feat: apply theme (#602)

* feat: apply theme

* feat: add theme configuration for layout container

* feat: add configuration for screen breakpoints

* fix: remove redundant config

* chore: remove plugin test file

---------

Co-authored-by: Nguyen Dinh Nam <[email protected]>

packages/storybook/.storybook/main.ts

@@ -15,6 +15,7 @@ const storybookConfig: StorybookConfig = {
     '@storybook/addon-storysource',
     '@storybook/addon-styling-webpack',
     '@storybook/addon-a11y',
+    'storybook-dark-mode',
   ],
   webpackFinal: async (config) => {
     // Resolve mjs files from libs

packages/storybook/.storybook/preview.ts

@@ -74,4 +74,10 @@ export const parameters: Parameters = {
       ],
     },
   },
+  darkMode: {
+    darkClass: 'dark',
+    lightClass: 'light',
+    classTarget: 'html',
+    stylePreview: true,
+  },
 }

packages/storybook/package.json

@@ -36,7 +36,8 @@
     "@mochi-ui/theme": "workspace:*",
     "next": "^14.0.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "storybook-dark-mode": "^3.0.3"
   },
   "packageManager": "[email protected]",
   "engines": {

packages/theme/package.json

@@ -33,9 +33,16 @@
     "tsconfig": "workspace:*"
   },
   "dependencies": {
+    "@types/lodash.foreach": "^4.5.9",
+    "@types/lodash.get": "^4.4.9",
+    "@types/lodash.omit": "^4.5.9",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "color": "^4.2.3",
-    "flat": "^6.0.1"
+    "deepmerge": "^4.3.1",
+    "flat": "^6.0.1",
+    "lodash.foreach": "^4.5.0",
+    "lodash.get": "^4.4.2",
+    "lodash.omit": "^4.5.0"
   }
 }

packages/theme/src/colors/types.ts

@@ -0,0 +1,62 @@
+type ColorsVariant = {
+  solid: {
+    DEFAULT: string
+    fg: string
+    hover: string
+    active: string
+    disable: string
+    focus: string
+  }
+  outline: {
+    DEFAULT: string
+    fg: string
+    border: string
+    hover: string
+    active: string
+    'disable-fg': string
+  }
+  plain: {
+    fg: string
+    hover: string
+    active: string
+    'disable-fg': string
+    'hover-fg': string
+  }
+}
+
+type RecursivePartial<T> = {
+  [P in keyof T]?: RecursivePartial<T[P]>
+}
+
+export type ThemeColors = {
+  primary: RecursivePartial<ColorsVariant>
+  secondary: RecursivePartial<ColorsVariant>
+  white: RecursivePartial<ColorsVariant>
+  success: RecursivePartial<ColorsVariant>
+  warning: RecursivePartial<ColorsVariant>
+  danger: RecursivePartial<ColorsVariant>
+  neutral: RecursivePartial<ColorsVariant>
+  text: {
+    primary: string
+    secondary: string
+    disabled: string
+    icon: string
+    contrast: string
+  }
+  background: {
+    body: string
+    level1: string
+    level2: string
+    level3: string
+    surface: string
+    popup: string
+    tooltip: string
+    backdrop: string
+  }
+  divider: string
+}
+
+export type SemanticBaseColors = {
+  light: ThemeColors
+  dark: ThemeColors
+}