feat: Design tokens / themes implementation

BREAKING CHANGE: This changes the colors, variables, and some of the components that might be removed.

.eslintignore

@@ -1 +1,2 @@
-tailwind.config.cjs
+tailwind.config.cjs
+.eslintrc.cjs

.releaserc

@@ -1,20 +1,35 @@
 {
-  "branches": ["main"],
-  "debug": true,
-  "ci": true,
-  "dryRun": false,
-  "plugins":
-    [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      ["@semantic-release/npm", { "npmPublish": true, "tarballDir": "dist" }],
-      "@semantic-release/github",
-      [
-        "@semantic-release/git",
+    "branches": [
+        "main",
         {
-          "assets": ["package.json", "package-lock.json", "CHANGELOG.md"],
-          "message": "chore(release): ${nextRelease.version} [skip ci]",
-        },
-      ],
+            "name": "beta",
+            "prerelease": true
+        }
     ],
+    "debug": true,
+    "ci": true,
+    "dryRun": false,
+    "plugins": [
+        "@semantic-release/commit-analyzer",
+        "@semantic-release/release-notes-generator",
+        [
+            "@semantic-release/npm",
+            {
+                "npmPublish": true,
+                "tarballDir": "dist"
+            }
+        ],
+        "@semantic-release/github",
+        [
+            "@semantic-release/git",
+            {
+                "assets": [
+                    "package.json",
+                    "package-lock.json",
+                    "CHANGELOG.md"
+                ],
+                "message": "chore(release): ${nextRelease.version} [skip ci]"
+            }
+        ]
+    ]
 }

.storybook/main.ts

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

.storybook/preview.ts

@@ -1,15 +1,24 @@
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import type { Preview } from "@storybook/react";
 import "tailwindcss/tailwind.css";
 import "../src/styles/index.css";
 
 const preview: Preview = {
+    decorators: [
+        withThemeByDataAttribute({
+            themes: {
+                light: "light",
+                dark: "dark",
+            },
+            defaultTheme: "light",
+        }),
+    ],
     parameters: {
         actions: { argTypesRegex: "^on[A-Z].*" },
         layout: "centered", // "centered" | "fullscreen"
         backgrounds: {
             default: "white",
             values: [
-                { name: "white", value: "#FFFFFF" },
                 { name: "light", value: "#FAFAFC" },
                 { name: "dark", value: "#212121" },
             ],
@@ -27,8 +36,7 @@ const preview: Preview = {
             showPanel: true,
         },
     },
-
-    tags: ["autodocs"]
+    tags: ["autodocs"],
 };
 
 export default preview;

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-  "prettier.configPath": ".prettierrc.cjs"
+    "prettier.configPath": ".prettierrc.cjs",
+    "css.customData": [".vscode/tailwind.json"],
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
 }

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+    "version": 1.1,
+    "atDirectives": [
+        {
+            "name": "@tailwind",
+            "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+                }
+            ]
+        },
+        {
+            "name": "@apply",
+            "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+                }
+            ]
+        },
+        {
+            "name": "@responsive",
+            "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+                }
+            ]
+        },
+        {
+            "name": "@screen",
+            "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+                }
+            ]
+        },
+        {
+            "name": "@variants",
+            "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+                }
+            ]
+        }
+    ]
+}