feat: rewrite input with dark mode

ui/input/src/input.styles.ts

@@ -5,6 +5,8 @@ import { createBaseStyles }       from '@atls-ui-parts/input'
 import { createShapeStyles }      from '@atls-ui-parts/input'
 import { createAppearanceStyles } from '@atls-ui-parts/input'
 
+export const baseStyles = createBaseStyles()
+
 export const shapeStyles = createShapeStyles({
   fontFamily: prop('theme.fonts.primary'),
   size: 52,
@@ -15,15 +17,19 @@ export const shapeStyles = createShapeStyles({
   paddingRight: 18,
 })
 
-export const baseStyles = createBaseStyles()
-export const appearanceStyles = createAppearanceStyles({
-  backgroundColor: 'white',
-  fontColor: 'black',
-  borderColor: '#DADEED',
+const lightAppearanceStyles = createAppearanceStyles({
+  backgroundColor: prop('theme.colors.gray_200'),
+  fontColor: prop('theme.colors.gray_1600'),
+  // borderColor: '#DADEED',
 })
 
-// export const shapeStyles = switchProp(prop('size', 'normal'), {
-//   small: smallNormalSizeStyles,
-//   normal: shapeNormalSizeStyles,
-//   large: largeNormalSizeStyles,
-// })
+const darkAppearanceStyles = createAppearanceStyles({
+  backgroundColor: prop('theme.colors.gray_1400'),
+  fontColor: prop('theme.colors.white'),
+  // borderColor: '#DADEED',
+})
+
+export const appearanceStyles = switchProp(prop('mode', 'light'), {
+	light: lightAppearanceStyles,
+	dark: darkAppearanceStyles,
+})

ui/theme/src/theme/colors.ts

@@ -1,18 +1,7 @@
 export const colors = {
-  input: {
-    font: 'rgb(128, 127, 127)',
-  },
-  switch: {
-    default: {
-      background: 'rgb(128, 127, 127)',
-      hover: {
-        background: 'rgb(128, 127, 127)',
-      },
-    },
-    checked: {
-      hover: {
-        background: 'rgb(128, 127, 127)',
-      },
-    },
-  },
+	white: '#FFFFFF',
+	gray_200: '#E4E4E4',
+	gray_800: '#949494',
+	gray_1400: '#434343',
+	gray_1600: '#282828'
 }