Migrate to SCSS modules and add build-time theming

.eslintrc.cjs

@@ -2,6 +2,7 @@ module.exports = {
   env: {
     browser: true,
     es2020: true,
+    node: true,
   },
   extends: [
     "eslint:recommended",

.gitignore

@@ -7,3 +7,7 @@ storybook-static
 *.log
 **/.DS_Store
 vite.config.ts.timestamp*
+
+# Generated TypeScript declaration files for SCSS modules
+**/*.scss.d.ts
+**/*.css.d.ts

.prettierignore

@@ -1 +0,0 @@
-src/styles/types.ts

.storybook/main.ts

@@ -31,5 +31,18 @@ const config: StorybookConfig = {
         prop.parent ? !/node_modules\/(?!@radix-ui)/.test(prop.parent.fileName) : true,
     },
   },
+
+  async viteFinal(config) {
+    if (config.css?.preprocessorOptions?.scss) {
+      config.css.preprocessorOptions.scss.api = 'modern-compiler';
+    } else {
+      config.css = config.css || {};
+      config.css.preprocessorOptions = config.css.preprocessorOptions || {};
+      config.css.preprocessorOptions.scss = {
+        api: 'modern-compiler'
+      };
+    }
+    return config;
+  },
 };
 export default config;

.storybook/preview.module.scss

@@ -0,0 +1,25 @@
+.cuiThemeBlock {
+  position: absolute;
+  top: 0.5rem;
+  width: 96vw;
+  height: 100vh;
+  bottom: 0;
+  overflow: auto;
+  padding: 1rem;
+  background: var(--click-storybook-global-background);
+
+  &.cuiLeft {
+    left: 0;
+    right: 50vw;
+  }
+
+  &.cuiRight {
+    left: 50vw;
+    right: 0;
+  }
+
+  &.cuiFill {
+    left: 0;
+    right: 0;
+  }
+}

.storybook/preview.tsx

@@ -1,24 +1,28 @@
 import React from "react";
 import type { Preview } from "@storybook/react-vite";
-import "../src/styles/variables.css";
+// Static CSS variables - will be overridden by dynamic theme injection
 import { Decorator } from "@storybook/react-vite";
-import styled from "styled-components";
 import { themes } from "storybook/theming";
-import ClickUIProvider from "../src/components/ClickUIProvider/ClickUIProvider";
+import { ClickUIProvider } from "@/theme/ClickUIProvider";
+import clsx from "clsx";
+import styles from "./preview.module.scss";
 
-const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
-  ({ $left, $bfill: fill, theme }) => `
-      position: absolute;
-      top: 0.5rem;
-      left: ${$left || fill ? 0 : "50vw"};
-      right: ${$left ? "50vw" : 0};
-      width: 96vw;
-      height: 100vh;
-      bottom: 0;
-      overflow: auto;
-      padding: 1rem;
-      background: ${theme.click.storybook.global.background};
-    `
+interface ThemeBlockProps {
+  left?: boolean;
+  fill?: boolean;
+  children: React.ReactNode;
+}
+
+const ThemeBlock: React.FC<ThemeBlockProps> = ({ left, fill, children }) => (
+  <div
+    className={clsx(styles.cuiThemeBlock, {
+      [styles.cuiLeft]: left || fill,
+      [styles.cuiRight]: !left && !fill,
+      [styles.cuiFill]: fill,
+    })}
+  >
+    {children}
+  </div>
 );
 
 export const globalTypes = {
@@ -27,30 +31,42 @@ export const globalTypes = {
     description: "Global theme for components",
     defaultValue: "dark",
     toolbar: {
-      // The icon for the toolbar item
       icon: "circlehollow",
-      // Array of options
       items: [
-        { value: "dark", icon: "moon", title: "dark" },
-        { value: "light", icon: "sun", title: "light" },
-        { value: "classic", icon: "circle", title: "classic" },
+        { value: "light", icon: "sun", title: "Light" },
+        { value: "dark", icon: "moon", title: "Dark" },
+        { value: "system", icon: "browser", title: "System" },
       ],
-      // Property that specifies if the name of the item will be displayed
       showName: true,
+      dynamicTitle: true,
     },
   },
 };
 const withTheme: Decorator = (StoryFn, context) => {
   const parameters = context.parameters;
-  const theme = parameters?.theme || context.globals.theme;
+  const theme = parameters?.theme || context.globals.theme || "light";
+
   return (
     <ClickUIProvider
-      theme={theme}
-      config={{ tooltip: { delayDuration: 0 } }}
+      key={`storybook-theme-${theme}`}
+      theme={theme as any}
+      defaultTheme="light"
+      enableTransitions={true}
+      transitionDuration={200}
+      enableDevTools={true}
+      fallbackTheme="light"
+      config={{
+        tooltip: { delayDuration: 100 },
+        toast: { duration: 3000 },
+        preloadThemes: ["light", "dark"],
+        logThemeChanges: true,
+      }}
     >
-      <ThemeBlock $left>
-        <StoryFn />
-      </ThemeBlock>
+      <div style={{ minHeight: "100vh", width: "100%" }}>
+        <ThemeBlock fill>
+          <StoryFn />
+        </ThemeBlock>
+      </div>
     </ClickUIProvider>
   );
 };
@@ -83,7 +99,24 @@ const preview: Preview = {
     },
     docs: {
       theme: themes.dark,
-      codePanel: true
+      codePanel: true,
+    },
+    backgrounds: {
+      default: "click-ui",
+      values: [
+        {
+          name: "click-ui",
+          value: "var(--click-storybook-global-background)",
+        },
+        {
+          name: "light",
+          value: "var(--click-storybook-global-background)",
+        },
+        {
+          name: "dark",
+          value: "var(--click-storybook-global-background)",
+        },
+      ],
     },
   },
 };

.vscode/settings.json

@@ -1,2 +1,19 @@
 {
+  // TypeScript: Prioritize source files over declaration files
+  "typescript.preferences.autoImportFileExcludePatterns": [
+    "**/*.scss.d.ts",
+    "**/node_modules/**"
+  ],
+
+  // Hide generated .scss.d.ts files from search and file explorer
+  "files.exclude": {
+    "**/*.scss.d.ts": true
+  },
+
+  // Search settings to exclude generated files
+  "search.exclude": {
+    "**/*.scss.d.ts": true,
+    "**/node_modules": true,
+    "**/dist": true
+  }
 }