From 99e89fbcee0f9728204f472aaec04458bf5abe8b Mon Sep 17 00:00:00 2001 From: scottrepreneur Date: Mon, 6 Nov 2023 13:55:01 -0600 Subject: [PATCH] Fix/select color mode (#106) * start colormode handling * remove outputs * action --- README.md | 1 + package.json | 2 +- .../atoms/DatePicker/CustomDatePickerButton.tsx | 2 +- src/components/atoms/DatePicker/DatePicker.tsx | 3 +++ src/components/forms/NumberInput/NumberInput.tsx | 2 ++ src/theme/components/NumberInput.ts | 14 ++++++++------ src/theme/index.ts | 7 ++++--- 7 files changed, 20 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index ef6ec5c..2567558 100644 --- a/README.md +++ b/README.md @@ -23,3 +23,4 @@ On http://localhost:6006/ you'll see the components built in the [storybook](htt ## Prettier If you do not already use [Prettier](https://prettier.io/), please add Prettier to your text editor. Prettier allows us to have consistent formatting without having to think much about it. + diff --git a/package.json b/package.json index 02b229a..fc02b10 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@raidguild/design-system", - "version": "0.4.50", + "version": "0.5.0", "license": "MIT", "author": "Raid Guild", "module": "dist/design-system.esm.js", diff --git a/src/components/atoms/DatePicker/CustomDatePickerButton.tsx b/src/components/atoms/DatePicker/CustomDatePickerButton.tsx index fec5b62..bfd2f52 100644 --- a/src/components/atoms/DatePicker/CustomDatePickerButton.tsx +++ b/src/components/atoms/DatePicker/CustomDatePickerButton.tsx @@ -20,7 +20,7 @@ export const CustomDatePickerButton = forwardRef< CustomDatePickerButtonProps, 'button' >(({ value, onClick }, ref) => ( - )); diff --git a/src/components/atoms/DatePicker/DatePicker.tsx b/src/components/atoms/DatePicker/DatePicker.tsx index e78689b..f1b7101 100644 --- a/src/components/atoms/DatePicker/DatePicker.tsx +++ b/src/components/atoms/DatePicker/DatePicker.tsx @@ -6,6 +6,9 @@ import { FormControl, FormLabel, Box, Stack } from '@chakra-ui/react'; import { UseFormReturn } from 'react-hook-form/dist/types/form'; import { CustomDatePickerButton } from './CustomDatePickerButton'; +// TODO pass variants to button +// TODO currently only single date is supported, but type shows that it can be a range + export interface DatePickerProps extends ReactDatePickerProps { name: string; label?: string; diff --git a/src/components/forms/NumberInput/NumberInput.tsx b/src/components/forms/NumberInput/NumberInput.tsx index 518da0e..fff0d1d 100644 --- a/src/components/forms/NumberInput/NumberInput.tsx +++ b/src/components/forms/NumberInput/NumberInput.tsx @@ -49,6 +49,7 @@ const NumberInput = ({ min = 0, max = 100, spacing, + ...props }: NumberInputProps) => { if (!localForm) return null; @@ -73,6 +74,7 @@ const NumberInput = ({ step={step} min={min} max={max} + placeholder={props.placeholder} {...restField} > diff --git a/src/theme/components/NumberInput.ts b/src/theme/components/NumberInput.ts index a97efbd..a75393d 100644 --- a/src/theme/components/NumberInput.ts +++ b/src/theme/components/NumberInput.ts @@ -1,24 +1,26 @@ +import { StyleFunctionProps, mode } from '@chakra-ui/theme-tools'; + const NumberInput = { baseStyle: {}, defaultProps: { variant: 'outline', }, variants: { - filled: { + filled: (props: StyleFunctionProps) => ({ field: { borderRadius: '0px', - bg: 'gray.700', - color: 'white', + bg: mode('blackAlpha.200', 'gray.700')(props), + color: mode('black', 'white')(props), _focus: { - bg: 'gray.700', + bg: mode('blackAlpha.400', 'gray.700')(props), }, _hover: { - bg: 'gray.700', + bg: mode('blackAlpha.300', 'gray.700')(props), }, }, stepperGroup: {}, stepper: {}, - }, + }), outline: { field: { border: '1px solid', diff --git a/src/theme/index.ts b/src/theme/index.ts index 0038548..3a1d03f 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,3 +1,4 @@ +import { StyleFunctionProps, mode } from '@chakra-ui/theme-tools'; import { extendTheme } from '../components/chakra'; import colors from './colors'; @@ -25,7 +26,7 @@ import Textarea from './components/Textarea'; import Tooltip from './components/Tooltip'; const theme = extendTheme({ - styles: { + styles: (props: StyleFunctionProps) => ({ global: { '*': { margin: 0, @@ -33,7 +34,7 @@ const theme = extendTheme({ boxSizing: 'border-box', }, body: { - bg: 'gray.800', + bg: mode('white', 'blue')(props), fontFamily: 'texturina', color: 'white', minHeight: '100vh', @@ -56,7 +57,7 @@ const theme = extendTheme({ // background: '#e4728b', // }, }, - }, + }), colors, fonts: { texturina: `'Texturina', serif`,