feat: add theme hook, add bg color in Storybook, update colors

.storybook/preview.ts

@@ -2,9 +2,13 @@ import type { Preview, ReactRenderer } from "@storybook/react";
 import { withThemeByClassName } from "@storybook/addon-themes";
 
 import "../src/tailwind.css";
+import "./theme.css";
 
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      disable: true,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

.storybook/theme.css

@@ -0,0 +1,4 @@
+.ink-dark body,
+.ink-dark .docs-story {
+  background-color: #160f1f;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/components/index.ts

@@ -1 +1,2 @@
 export * from "./Button";
+export * from "./SegmentedControl";

src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useInkThemeClass";

src/hooks/useInkThemeClass.ts

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+
+const themeClasses = ["ink-dark", "ink-light"];
+
+export function useInkThemeClass(theme: "ink-dark" | "ink-light") {
+  useEffect(() => {
+    themeClasses.forEach((t) => {
+      if (theme === t) {
+        document.documentElement.classList.add(t);
+      } else {
+        document.documentElement.classList.remove(t);
+      }
+    });
+  }, [theme]);
+}

src/index.ts

@@ -1,3 +1,4 @@
 import "./tailwind.css";
 export * from "./components";
+export * from "./hooks";
 export * as InkIcon from "./icons";

src/styles/Colors.stories.tsx

@@ -5,10 +5,12 @@ function Colors() {
   const colors = [
     "ink-bg-primary ink-text-text-on-primary",
     "ink-bg-secondary ink-text-text-on-secondary",
-    "ink-bg-background-container",
-    "ink-bg-background-light-0",
-    "ink-bg-background-light-50",
+    "ink-bg-background-dark",
+    "ink-bg-background-dark-transparent",
     "ink-bg-background-light",
+    "ink-bg-background-light-transparent",
+    "ink-bg-background-light-invisible",
+    "ink-bg-background-container",
     "ink-bg-status-success-bg ink-text-status-success",
     "ink-bg-status-error-bg ink-text-status-error",
     "ink-bg-status-alert-bg ink-text-status-alert",

src/styles/colors.css

@@ -1,20 +1,27 @@
 :root {
+  /* Background */
   --ink-background-dark: rgb(240, 239, 255);
+  --ink-background-dark-transparent: color-mix(
+    in srgb,
+    var(--ink-background-dark),
+    transparent 20%
+  );
+  --ink-background-light: rgb(255, 255, 255);
+  --ink-background-light-transparent: rgb(255, 255, 255, 0.5);
+  --ink-background-light-invisible: rgb(255, 255, 255, 0);
   --ink-background-container: color-mix(
     in srgb,
     var(--ink-background-dark),
     transparent 6%
   );
-  --ink-background-light: rgb(255, 255, 255);
-  --ink-background-light-50: rgb(255, 255, 255);
-  --ink-background-light-0: rgb(255, 255, 255);
 
+  /* Button */
   --ink-primary: rgb(113, 50, 245);
   --ink-primary-hover: color-mix(in srgb, var(--ink-primary), transparent 10%);
   --ink-primary-pressed: color-mix(
     in srgb,
-    var(--ink-primary-hover),
-    transparent 10%
+    var(--ink-primary),
+    transparent 20%
   );
   --ink-secondary: color-mix(in srgb, var(--ink-primary), transparent 94%);
   --ink-secondary-hover: color-mix(
@@ -28,6 +35,7 @@
     transparent 90%
   );
 
+  /* Text */
   --ink-text-default: rgb(22, 15, 31);
   --ink-text-muted: color-mix(
     in srgb,
@@ -47,6 +55,7 @@
     transparent 50%
   );
 
+  /* Status */
   --ink-status-success: rgb(61, 166, 103);
   --ink-status-success-bg: color-mix(
     in srgb,

tailwind.config.mjs

@@ -30,29 +30,34 @@ const config = {
     colors: {
       background: {
         dark: "var(--ink-background-dark)",
+        "dark-transparent": "var(--ink-background-dark-transparent)",
         container: "var(--ink-background-container)",
         light: "var(--ink-background-light)",
-        "light-50": "var(--ink-background-light-50)",
-        "light-0": "var(--ink-background-light-0)",
+        "light-transparent": "var(--ink-background-light-transparent)",
+        "light-invisible": "var(--ink-background-light-invisible)",
       },
       primary: "var(--ink-primary)",
       "primary-hover": "var(--ink-primary-hover)",
       "primary-pressed": "var(--ink-primary-pressed)",
       secondary: "var(--ink-secondary)",
       "secondary-hover": "var(--ink-secondary-hover)",
       "secondary-pressed": "var(--ink-secondary-pressed)",
-      "text-default": "var(--ink-text-default)",
-      "text-muted": "var(--ink-text-muted)",
-      "text-on-primary": "var(--ink-text-on-primary)",
-      "text-on-primary-disabled": "var(--ink-text-on-primary-disabled)",
-      "text-on-secondary": "var(--ink-text-on-secondary)",
-      "text-on-secondary-disabled": "var(--ink-text-on-secondary-disabled)",
-      "status-success": "var(--ink-status-success)",
-      "status-success-bg": "var(--ink-status-success-bg)",
-      "status-alert": "var(--ink-status-alert)",
-      "status-alert-bg": "var(--ink-status-alert-bg)",
-      "status-error": "var(--ink-status-error)",
-      "status-error-bg": "var(--ink-status-error-bg)",
+      text: {
+        default: "var(--ink-text-default)",
+        muted: "var(--ink-text-muted)",
+        "on-primary": "var(--ink-text-on-primary)",
+        "on-primary-disabled": "var(--ink-text-on-primary-disabled)",
+        "on-secondary": "var(--ink-text-on-secondary)",
+        "on-secondary-disabled": "var(--ink-text-on-secondary-disabled)",
+      },
+      status: {
+        success: "var(--ink-status-success)",
+        "success-bg": "var(--ink-status-success-bg)",
+        alert: "var(--ink-status-alert)",
+        "alert-bg": "var(--ink-status-alert-bg)",
+        error: "var(--ink-status-error)",
+        "error-bg": "var(--ink-status-error-bg)",
+      },
     },
     fontSize: {
       h1: ["var(--ink-font-size-h1)", "var(--ink-font-line-height-h1)"],