Fix/select color mode (#106)

* start colormode handling

* remove outputs

* action

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.
+

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",

src/components/atoms/DatePicker/CustomDatePickerButton.tsx

@@ -20,7 +20,7 @@ export const CustomDatePickerButton = forwardRef<
   CustomDatePickerButtonProps,
   'button'
 >(({ value, onClick }, ref) => (
-  <Button onClick={onClick} ref={ref} variant='solid'>
+  <Button onClick={onClick} ref={ref} variant='outline'>
     {value}
   </Button>
 ));

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;

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}
             >
               <NumberInputField ref={ref} name={restField.name} />

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',

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,15 +26,15 @@ import Textarea from './components/Textarea';
 import Tooltip from './components/Tooltip';
 
 const theme = extendTheme({
-  styles: {
+  styles: (props: StyleFunctionProps) => ({
     global: {
       '*': {
         margin: 0,
         padding: 0,
         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`,