💄 - feat: refactor styling and add dark mode support

.storybook/main.ts

@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-themes",
   ],
   core: {
     disableTelemetry: true,

.storybook/modes.ts

@@ -0,0 +1,22 @@
+export const allModes = {
+  "light desktop": {
+    backgrounds: "light",
+    theme: "light",
+    viewport: "large",
+  },
+  "light mobile": {
+    backgrounds: "light",
+    theme: "light",
+    viewport: "small",
+  },
+  "dark desktop": {
+    backgrounds: "dark",
+    theme: "dark",
+    viewport: "large",
+  },
+  "dark mobile": {
+    backgrounds: "dark",
+    theme: "dark",
+    viewport: "small",
+  },
+};

.storybook/preview.tsx

@@ -1,10 +1,27 @@
+import { withThemeByClassName } from "@storybook/addon-themes";
 import type { Preview } from "@storybook/react";
 
-import "../src/settings/tokens.css";
+import "../src/style/default.scss";
+import { allModes } from "./modes";
 
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
+    chromatic: {
+      modes: {
+        "light desktop": allModes["light desktop"],
+        "light mobile": allModes["light mobile"],
+        "dark desktop": allModes["dark desktop"],
+        "dark mobile": allModes["dark mobile"],
+      },
+      controls: {
+        matchers: {
+          color: /(background|color)$/i,
+          date: /Date$/i,
+        },
+      },
+      layout: "fullscreen",
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -13,6 +30,16 @@ const preview: Preview = {
     },
     layout: "fullscreen",
   },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        system: "view--system",
+        light: "view--light",
+        dark: "view--dark",
+      },
+      defaultTheme: "light",
+    }) as any,
+  ],
 };
 
 export default preview;

package.json

@@ -58,6 +58,7 @@
     "@storybook/addon-interactions": "^7.6.14",
     "@storybook/addon-links": "^7.6.14",
     "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/addon-themes": "^7.6.14",
     "@storybook/blocks": "^7.6.14",
     "@storybook/react": "^7.6.14",
     "@storybook/react-webpack5": "^7.6.14",

src/components/badge/badge.scss

@@ -1,5 +1,6 @@
 .mykn-badge {
-  background-color: var(--theme-color-primary-200);
+  background-color: var(--page-color-info-background);
+  color: var(--page-color-info);
   align-items: center;
   border-radius: var(--border-radius-m);
   display: inline-flex;

src/components/boolean/bool.scss

@@ -3,18 +3,19 @@
   border-radius: var(--border-radius-m);
   display: inline-flex;
   font-size: var(--typography-font-size-body-s);
-  justify-content: center;
   height: var(--typography-line-height-body-s);
+  justify-content: center;
+  position: relative;
   width: var(--typography-line-height-body-s);
 
   &--value-true {
-    background-color: var(--theme-color-success-background);
-    color: var(--theme-color-success-body);
+    background-color: var(--page-color-success-background);
+    color: var(--page-color-success);
   }
 
   &--value-false {
-    background-color: var(--theme-color-danger-background);
-    color: var(--theme-color-danger-body);
+    background-color: var(--page-color-danger-background);
+    color: var(--page-color-danger);
   }
 
   &--value-false:not(#{&}--explicit) {

src/components/breadcrumbs/breadcrumbs.scss

@@ -13,15 +13,15 @@
     grid-auto-flow: column;
     gap: var(--spacing-v-xs);
     align-items: center;
-    color: var(--theme-shade-600);
+    color: var(--typography-color-body);
 
     &--last {
-      color: var(--theme-color-primary-800);
+      color: var(--page-color-primary);
     }
   }
 
   .mykn-icon {
-    color: var(--theme-color-primary-800);
+    color: var(--page-color-primary);
     margin: 0 var(--spacing-h-xs);
   }
 }

src/components/button/button.scss

@@ -1,16 +1,19 @@
 .mykn-button {
   $self: &;
-  --mykn-button-color-background: var(--theme-color-primary-800);
-  --mykn-button-color-shadow: var(--theme-shade-1000);
-  --mykn-button-color-text: var(--theme-shade-0);
+
+  --mykn-button-color-background: var(--typography-color-background);
+  --mykn-button-color-border: var(--form-color-border);
+  --mykn-button-color-shadow: var(--page-color-shadow);
+  --mykn-button-color-text: var(--typography-color-body);
+
   --mykn-button-font-size: var(--typography-font-size-body-s);
   --mykn-button-font-weight: var(--typography-font-weight-normal);
   --mykn-button-line-height: var(--typography-line-height-body-s);
   --mykn-button-height: auto;
   --mykn-button-width: auto;
   --mykn-button-offset: 0px;
-  --mykn-button-padding-v: 0;
-  --mykn-button-padding-h: 0;
+  --mykn-button-padding-v: var(--spacing-v-s);
+  --mykn-button-padding-h: var(--spacing-h-s);
 
   align-items: center;
   appearance: none;
@@ -52,11 +55,13 @@
   }
 
   &--pad-h {
-    --mykn-button-padding-h: var(--spacing-h-s);
+    padding-inline-start: var(--mykn-button-padding-h);
+    padding-inline-end: var(--mykn-button-padding-h);
   }
 
   &--pad-v {
-    --mykn-button-padding-v: var(--spacing-v-s);
+    padding-block-start: var(--mykn-button-padding-h);
+    padding-block-end: var(--mykn-button-padding-h);
   }
 
   &--size-xs {
@@ -77,68 +82,91 @@
   }
 
   &--variant-primary {
-    &#{$self}--active, // TODO
-    &:focus,
-    &:hover {
-      --mykn-button-color-background: var(--theme-color-primary-700);
-    }
+    --mykn-button-color-background: var(--button-color-background-primary);
+    --mykn-button-color-border: var(--button-color-border-primary);
+    --mykn-button-color-shadow: var(--button-color-shadow-primary);
+    --mykn-button-color-text: var(--button-color-text-primary);
 
     &:focus,
     &:hover {
+      --mykn-button-color-background: var(
+        --button-color-background-primary-hover
+      );
+      --mykn-button-color-border: var(--button-color-border-primary-hover);
+      --mykn-button-color-shadow: var(--button-color-shadow-primary-hover);
+      --mykn-button-color-text: var(--button-color-text-primary-hover);
       --mykn-button-offset: -2px;
     }
 
     &[aria-expanded="true"],
-    &:active {
-      --mykn-button-color-background: var(--theme-color-primary-800);
+    &:active,
+    &#{$self}--active {
+      --mykn-button-color-background: var(
+        --button-color-background-primary-active
+      );
+      --mykn-button-color-border: var(--button-color-border-primary-active);
+      --mykn-button-color-shadow: var(--button-color-shadow-primary-active);
+      --mykn-button-color-text: var(--button-color-text-primary-active);
       --mykn-button-offset: 0px;
     }
   }
 
   &--variant-outline {
-    --mykn-button-color-background: transparent;
-    --mykn-button-color-border: var(--form-color-border);
-    --mykn-button-color-shadow: currentColor;
-    --mykn-button-color-text: var(--typography-color-body);
-
-    &#{$self}--active,
-    &:focus,
-    &:hover {
-      --mykn-button-color-background: var(--theme-color-primary-200);
-    }
+    --mykn-button-color-background: var(--button-color-background-outline);
+    --mykn-button-color-border: var(--button-color-border-outline);
+    --mykn-button-color-shadow: var(--button-color-shadow-outline);
+    --mykn-button-color-text: var(--button-color-text-outline);
 
     &:focus,
     &:hover {
+      --mykn-button-color-background: var(
+        --button-color-background-outline-hover
+      );
+      --mykn-button-color-border: var(--button-color-border-outline-hover);
+      --mykn-button-color-shadow: var(--button-color-shadow-outline-hover);
+      --mykn-button-color-text: var(--button-color-text-outline-hover);
       --mykn-button-offset: -2px;
     }
 
     &[aria-expanded="true"],
-    &:active {
-      --mykn-button-color-background: var(--typography-color-background);
+    &:active,
+    &#{$self}--active {
+      --mykn-button-color-background: var(
+        --button-color-background-outline-active
+      );
+      --mykn-button-color-border: var(--button-color-border-outline-active);
+      --mykn-button-color-shadow: var(--button-color-shadow-outline-active);
+      --mykn-button-color-text: var(--button-color-text-outline-active);
       --mykn-button-offset: 0px;
     }
   }
 
   &--variant-transparent {
-    --mykn-button-color-background: transparent;
-    --mykn-button-color-shadow: currentColor;
-    --mykn-button-color-text: var(--theme-shade-700);
-
-    &#{$self}--active,
-    &:focus,
-    &:hover {
-      --mykn-button-color-background: var(--theme-color-primary-100);
-      --mykn-button-color-text: var(--theme-color-primary-800);
-    }
+    --mykn-button-color-background: var(--button-color-background-transparent);
+    --mykn-button-color-border: var(--button-color-border-transparent);
+    --mykn-button-color-shadow: var(--button-color-shadow-transparent);
+    --mykn-button-color-text: var(--button-color-text-transparent);
 
     &:focus,
     &:hover {
+      --mykn-button-color-background: var(
+        --button-color-background-transparent-hover
+      );
+      --mykn-button-color-border: var(--button-color-border-transparent-hover);
+      --mykn-button-color-shadow: var(--button-color-shadow-transparent-hover);
+      --mykn-button-color-text: var(--button-color-text-transparent-hover);
       --mykn-button-offset: -2px;
     }
 
     &[aria-expanded="true"],
-    &:active {
-      --mykn-button-color-background: var(--typography-color-background);
+    &:active,
+    &#{$self}--active {
+      --mykn-button-color-background: var(
+        --button-color-background-transparent-active
+      );
+      --mykn-button-color-border: var(--button-color-border-transparent-active);
+      --mykn-button-color-shadow: var(--button-color-shadow-transparent-active);
+      --mykn-button-color-text: var(--button-color-text-transparent-active);
       --mykn-button-offset: 0px;
     }
   }

src/components/data/datagrid/datagrid.scss

@@ -108,7 +108,7 @@
       }
 
       &:before {
-        color: var(--theme-shade-700);
+        color: var(--typography-color-body);
         content: attr(aria-description);
         font-family: var(--typography-font-family-body);
         font-size: var(--typography-font-size-body-xs);

src/components/data/datagrid/datagrid.stories.tsx

@@ -125,16 +125,6 @@ export const DataGridComponent = {
   },
 };
 
-export const DataGridOnMobile: Story = {
-  ...DataGridComponent,
-  parameters: {
-    viewport: { defaultViewport: "mobile1" },
-    chromatic: {
-      viewports: ["mobile1"],
-    },
-  },
-};
-
 export const SortableDataGrid: Story = {
   ...DataGridComponent,
   args: {

src/components/dropdown/dropdown.scss

@@ -6,7 +6,7 @@
   justify-content: center;
 
   &--open > .mykn-button {
-    outline: 1px solid var(--theme-color-primary-800);
+    outline: 1px solid var(--page-color-primary);
   }
 
   .mykn-a,
@@ -17,7 +17,7 @@
 
   &__dropdown {
     width: fit-content;
-    border: 1px solid var(--theme-color-primary-800);
+    border: 1px solid var(--page-color-primary);
     border-radius: var(--border-radius-m);
     box-sizing: border-box;
     padding: 2px;

src/components/form/select/select.scss

@@ -90,7 +90,7 @@
   }
 
   &#{&}--active {
-    --mykn-option-color-background: var(--theme-color-primary-800);
-    --mykn-option-color-body: var(--typography-color-background);
+    --mykn-option-color-background: var(--page-color-primary);
+    --mykn-option-color-body: var(--page-color-primary-contrast);
   }
 }