@clickhouse/click-ui 0.0.234-sc-deprecation.7 → 0.0.234-sc-deprecation.9

package/README.md

@@ -47,171 +47,45 @@ Click UI has been tested in NextJS, Gatsby, and Vite. If you run into problems u
 
 ### Customizing Your Theme
 
-To customize the theme with your own colors, spacing, and styles:
+For detailed theming and configuration options, see:
+- **[Theme System Documentation](src/theme/index.md)** - Complete theme system overview
+- **[Build-Time Configuration](BUILD_TIME_CONFIG_CLICK_UI.md)** - Build-time optimization guide
+- **[Bundler Plugins](config/README.md)** - Vite, Webpack, Rollup, and Next.js plugins
 
-1. **Initialize configuration**
-   ```bash
-   npx @clickhouse/click-ui init
-   ```
-
-   This creates a `click-ui.config.ts` file in your project root.
-
-2. **Setup Vite alias** to enable auto-discovery
-
-   In your `vite.config.ts`:
-   ```ts
-   import { defineConfig } from 'vite';
-   import path from 'path';
-
-   export default defineConfig({
-     resolve: {
-       alias: {
-         'click-ui-config': path.resolve(__dirname, './click-ui.config.ts'),
-       },
-     },
-   });
-   ```
-
-3. **Customize the generated config file**
-
-   ```typescript
-   import type { ThemeConfig } from '@clickhouse/click-ui/theme';
-
-   const config: ThemeConfig = {
-     theme: {
-       global: {
-         color: {
-           brand: '#FFCC00',
-           background: {
-             default: '#FFFFFF'
-           }
-         }
-       },
-       button: {
-         primary: {
-           background: {
-             default: '#FFCC00',
-             hover: '#FFD700'
-           }
-         }
-       }
-     }
-   };
-
-   export default config;
-   ```
-
-4. **That's it!** Your custom theme will be automatically loaded by ClickUIProvider.
-
-#### CLI Options
-
-```bash
-# Create TypeScript config (default)
-npx @clickhouse/click-ui init
-
-# Create JavaScript config
-npx @clickhouse/click-ui init -f js
-
-# Overwrite existing config
-npx @clickhouse/click-ui init --force
-```
-
-### Advanced Configuration Options
-
-The generated config file supports extensive customization:
-
-#### System Mode Overrides
-
-Define different styles for light and dark modes:
+**Quick example:**
 
 ```typescript
-const config: ThemeConfig = {
-  systemModeOverrides: {
-    light: {
-      global: {
-        color: {
-          background: { default: '#FFFFFF' }
-        }
-      }
-    },
-    dark: {
-      global: {
-        color: {
-          background: { default: '#0D1117' },
-          text: { default: '#F0F6FC' }
-        }
-      }
-    }
-  }
-};
-```
-
-#### Component-Specific Styling
+import type { ThemeConfig } from '@clickhouse/click-ui/theme';
 
-Customize individual components:
-
-```typescript
 const config: ThemeConfig = {
   theme: {
-    button: {
-      space: { x: '1rem', y: '0.5rem' },
-      radii: { all: '0.375rem' },
-      primary: {
-        background: {
-          default: '#FFCC00',
-          hover: '#FFD700'
-        }
+    global: {
+      color: {
+        brand: '#FFCC00',
+        background: { default: '#FFFFFF' }
+      }
+    }
+  },
+  // Dark mode overrides
+  dark: {
+    global: {
+      color: {
+        background: { default: '#0D1117' },
+        text: { default: '#F0F6FC' }
       }
     }
   }
 };
-```
-
-### Manual Theme Control
-
-You can manually control the theme at runtime:
 
-```typescript
-import { ClickUIProvider, useCUITheme, Switch } from '@clickhouse/click-ui'
-
-function ThemeToggle() {
-  const { themeName, toggleTheme } = useCUITheme();
-
-  return (
-    <Switch
-      checked={themeName === 'dark'}
-      onClick={toggleTheme}
-    />
-  );
-}
-
-function App() {
-  return (
-    <ClickUIProvider theme="dark">
-      <ThemeToggle />
-      <Title type='h1'>Click UI Example</Title>
-    </ClickUIProvider>
-  )
-}
+export default config;
 ```
 
-### How It Works
-
-1. **Config File**: Create `click-ui.config.ts` in your project root
-2. **Vite Alias**: The alias makes the config discoverable via `'click-ui-config'` import
-3. **Auto-Load**: `ClickUIProvider` automatically imports and applies your config
-4. **Runtime Override**: Props passed to `ClickUIProvider` can override the config
-
-### Troubleshooting
-
-**Config not loading?**
-- Verify the Vite alias is correctly set up in `vite.config.ts`
-- Ensure `click-ui.config.ts` is in your project root
-- Restart your dev server after adding the alias
-
-**TypeScript errors?**
-- Import types from: `import type { ThemeConfig } from '@clickhouse/click-ui/theme';`
-- Your IDE will provide autocomplete for all config options
+See the full documentation for advanced features including:
+- CLI tools for config generation
+- Multiple bundler support
+- SSR/RSC compatibility
+- Theme switching and persistence
+- Performance optimization
 
 ## To develop this library locally 🚀
 

package/bin/commands/init.js

@@ -14,6 +14,7 @@ const config: ThemeConfig = {
   cssPrefix: '--click',
   storageKey: 'click-ui-theme',
 
+  // Light mode theme (default)
   theme: {
     global: {
       color: {
@@ -34,25 +35,15 @@ const config: ThemeConfig = {
     }
   },
 
-  systemModeOverrides: {
-    light: {
-      global: {
-        color: {
-          background: {
-            default: '#FFFFFF'
-          }
-        }
-      }
-    },
-    dark: {
-      global: {
-        color: {
-          background: {
-            default: '#0D1117'
-          },
-          text: {
-            default: '#F0F6FC'
-          }
+  // Dark mode overrides - if not defined, theme values are used for dark mode too
+  dark: {
+    global: {
+      color: {
+        background: {
+          default: '#0D1117'
+        },
+        text: {
+          default: '#F0F6FC'
         }
       }
     }
@@ -66,6 +57,7 @@ const config = {
   cssPrefix: '--click',
   storageKey: 'click-ui-theme',
 
+  // Light mode theme (default)
   theme: {
     global: {
       color: {
@@ -86,25 +78,15 @@ const config = {
     }
   },
 
-  systemModeOverrides: {
-    light: {
-      global: {
-        color: {
-          background: {
-            default: '#FFFFFF'
-          }
-        }
-      }
-    },
-    dark: {
-      global: {
-        color: {
-          background: {
-            default: '#0D1117'
-          },
-          text: {
-            default: '#F0F6FC'
-          }
+  // Dark mode overrides - if not defined, theme values are used for dark mode too
+  dark: {
+    global: {
+      color: {
+        background: {
+          default: '#0D1117'
+        },
+        text: {
+          default: '#F0F6FC'
         }
       }
     }