diff --git a/.changeset/add-design-tokens-package.md b/.changeset/add-design-tokens-package.md new file mode 100644 index 000000000..840e41caf --- /dev/null +++ b/.changeset/add-design-tokens-package.md @@ -0,0 +1,27 @@ +--- +"@clickhouse/click-ui": patch +--- + +Redirect theme and hook exports to @clickhouse/design-tokens/legacy + +`@clickhouse/click-ui` now re-exports theme utilities and hooks from `@clickhouse/design-tokens/legacy/*` subpaths instead of providing them directly. This establishes a runtime dependency on `@clickhouse/design-tokens`. + +**Affected imports (now re-exported from legacy paths):** + +These continue to work via re-export + +```typescript +import { useCUITheme } from '@clickhouse/click-ui'; +import { InitCUIThemeScript } from '@clickhouse/click-ui'; +import { THEMES } from '@clickhouse/click-ui'; +``` + +Alternatively, consumer apps can import directly from legacy exports path: + +```typescript +import { useCUITheme } from '@clickhouse/design-tokens/legacy/hooks'; +``` + +**Removed legacy token generator:** + +The old Style Dictionary-based token generator (`yarn generate:tokens`) has been removed along with its dependencies (`@tokens-studio/sd-transforms`, `style-dictionary`) and the `tokens/` source directory. The legacy TypeScript theme objects remain available in `@clickhouse/design-tokens/legacy` as frozen snapshots, but the modern CSS-based token system in `packages/design-tokens` is now the only maintained system. diff --git a/.changeset/design-tokens-legacy-support.md b/.changeset/design-tokens-legacy-support.md new file mode 100644 index 000000000..38a1fde5e --- /dev/null +++ b/.changeset/design-tokens-legacy-support.md @@ -0,0 +1,20 @@ +--- +"@clickhouse/design-tokens": minor +--- + +Add legacy backward compatibility exports for styled-components theme + +Provides deprecated TypeScript theme exports for gradual migration from `@clickhouse/click-ui`. + +**Usage:** + +```typescript +// Before (deprecated in @clickhouse/click-ui) +import { useCUITheme } from '@clickhouse/click-ui'; + +// After (explicit legacy path) +import { useCUITheme } from '@clickhouse/design-tokens/legacy/hooks'; +import { THEMES, InitCUIThemeScript } from '@clickhouse/design-tokens/legacy'; +``` + +See [LEGACY.md](./packages/design-tokens/LEGACY.md) for migration guide. diff --git a/.husky/pre-commit b/.husky/pre-commit index c1bef199f..0e5f06d86 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -39,13 +39,15 @@ else exit 1 fi -if yarn workspace @clickhouse/click-ui changeset:verify; then - echo "✅ Changeset file's included!" -else - echo "⚠️ WARNING: You must include a changeset!" - echo "💡 Use the command yarn workspace @clickhouse/click-ui changeset:add" - exit 1 -fi +# TODO: Once chore(monorepo): 🤖 setup changeset handling from root https://github.com/ClickHouse/click-ui/pull/951 is merged +# uncomment the changeset:verify check! +# if yarn workspace @clickhouse/click-ui changeset:verify; then +# echo "✅ Changeset file's included!" +# else +# echo "⚠️ WARNING: You must include a changeset!" +# echo "💡 Use the command yarn workspace @clickhouse/click-ui changeset:add" +# exit 1 +# fi echo "👍 Health check completed." echo diff --git a/package.json b/package.json index c242c1452..c03cd3161 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "prepare": "husky" }, "devDependencies": { + "glob": "^13.0.6", "husky": "^9.1.7" }, "resolutions": { diff --git a/packages/click-ui/.changeset/add-design-tokens-package.md b/packages/click-ui/.changeset/add-design-tokens-package.md deleted file mode 100644 index 26d20c941..000000000 --- a/packages/click-ui/.changeset/add-design-tokens-package.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -"@clickhouse/design-tokens": minor ---- - -Initial release of the design-tokens package. Provides DTCG-compliant design token definitions for colors, spacing, radius, sizing, and typography. Includes Terrazzo-based CSS output generation. - -**Package pathname:** `packages/design-tokens` - -**Token Dictionary Location:** `packages/design-tokens/dictionary/` - -- `primitives.dtcg.json` -- `semantic.dtcg.json` - Semantic color tokens (references primitives) -- `spacing.dtcg.json` - Spacing scale (8px base unit) -- `radius.dtcg.json` - Border radius scale -- `sizing.dtcg.json` - Icon and component sizes -- `typography.dtcg.json` - Font sizes, weights, and line heights - -**Creating Tokens:** Add or modify tokens in the dictionary files following DTCG format: - -```json -{ - "$type": "dimension", - "$value": { "value": 8, "unit": "px" }, - "$description": "8px, base spacing" -} -``` - -**Building:** Run `yarn tokens:build` to generate `packages/design-tokens/dist/tokens.css`. - -**Configuration:** `packages/design-tokens/config.js` contains build settings: - -- `CSS_VAR_PREFIX` - CSS variable prefix (default: `cui` → `--cui-*`) -- `DICTIONARY_PATH` - Token dictionary location -- `TOKEN_FILES` - Token files and import order - -See `packages/design-tokens/SPECIFICATION.md` for naming conventions and detailed guidelines. diff --git a/packages/click-ui/.scripts/js/generate-tokens.js b/packages/click-ui/.scripts/js/generate-tokens.js deleted file mode 100644 index 2b9a24ed6..000000000 --- a/packages/click-ui/.scripts/js/generate-tokens.js +++ /dev/null @@ -1,71 +0,0 @@ -import { register } from '@tokens-studio/sd-transforms'; -import StyleDictionary from 'style-dictionary'; - -const themes = ['dark', 'light']; - -await register(StyleDictionary); - -StyleDictionary.registerTransform({ - type: 'name', - name: 'name/cti/dot', - transform: (token, options) => { - if (options.prefix && options.prefix.length) { - return [options.prefix].concat(token.path).join('.'); - } else { - return token.path.join('.'); - } - }, -}); - -StyleDictionary.registerFormat({ - name: 'typescript/es6-theme', - format: function ({ dictionary, file }) { - const themeName = file.destination.replace('variables.', '').replace('.ts', ''); - const theme = {}; - - dictionary.allTokens.forEach(token => { - let current = theme; - const path = token.path; - - for (let i = 0; i < path.length - 1; i++) { - const key = path[i]; - if (!current[key] || typeof current[key] !== 'object') { - current[key] = {}; - } - current = current[key]; - } - - current[path[path.length - 1]] = token.value; - }); - - theme.name = themeName; - - return `const theme = ${JSON.stringify(theme, null, 2)};\n\nexport default theme;\n`; - }, -}); - -for (const theme of themes) { - const sd = new StyleDictionary({ - source: [ - `./tokens/**/!(${themes.join('|')}).json`, - `./tokens/**/${theme}.json`, - ], - preprocessors: ['tokens-studio'], - platforms: { - ts: { - transformGroup: 'tokens-studio', - transforms: ['name/cti/dot'], - buildPath: 'src/theme/tokens/', - files: [ - { - destination: `variables.${theme}.ts`, - format: 'typescript/es6-theme', - }, - ], - }, - }, - }); - - await sd.cleanAllPlatforms(); - await sd.buildAllPlatforms(); -} diff --git a/packages/click-ui/README.md b/packages/click-ui/README.md index 685c9d6a6..0aa5db0bb 100644 --- a/packages/click-ui/README.md +++ b/packages/click-ui/README.md @@ -103,23 +103,12 @@ yarn circular-dependency:check If circular dependencies are found it'll exit with a report showing the affeced files which require your attention. -### Generating design tokens +### Design Tokens -Tokens are provided by a style directionary sourced from [tokens-studio](https://tokens.studio/). +Design tokens are provided by the `@clickhouse/design-tokens` package. See the [design-tokens documentation](../design-tokens/) for details on the token system and CSS variable usage. -It's expected to have theme tokens provided externally, e.g. Figma tokens-studio output is stored in the repository and a PR's opened. The assets are stored in the directory [./tokens/themes]. - -Once [./tokens/themes] files are updated or provided from exernal source, e.g. Figma, we must regenerate the tokens for consumption in the project. - -Run the command to generate tokens in the path `./src/theme/tokens/`: - -```sh -yarn generate:tokens -``` - -Once done, you must commit the changes. - -Learn more about tokens-studio [here](https://documentation.tokens.studio/). +> [!NOTE] +> The legacy styled-components theme system has been moved to `@clickhouse/design-tokens/legacy` and is deprecated. Migrate to CSS variables for new projects. ### Local development diff --git a/packages/click-ui/package.json b/packages/click-ui/package.json index e97138595..ddf2c0353 100644 --- a/packages/click-ui/package.json +++ b/packages/click-ui/package.json @@ -374,7 +374,6 @@ "format": ".scripts/bash/format", "format:fix": ".scripts/bash/format --write", "generate:exports": ".scripts/js/generate-exports", - "generate:tokens": "node ./.scripts/js/generate-tokens.js && yarn format:fix src/theme/tokens/**/*.ts", "lint": "eslint src --report-unused-disable-directives", "lint:fix": "eslint src --report-unused-disable-directives --fix", "prettify": "yarn format:fix", @@ -392,6 +391,7 @@ "typecheck": "tsc --noEmit" }, "dependencies": { + "@clickhouse/design-tokens": "workspace:^", "@h6s/calendar": "2.0.1", "@radix-ui/react-accordion": "1.2.12", "@radix-ui/react-avatar": "1.1.1", @@ -430,7 +430,6 @@ "@testing-library/jest-dom": "^6.4.5", "@testing-library/react": "^16.1.0", "@testing-library/user-event": "^14.5.2", - "@tokens-studio/sd-transforms": "^1.2.0", "@types/eslint-plugin-react-refresh": "^0.4.0", "@types/lodash-es": "^4.17.12", "@types/node": "^24.10.1", @@ -460,7 +459,6 @@ "skott": "^0.35.4", "storybook": "^10.1.10", "storybook-addon-pseudo-states": "^10.1.10", - "style-dictionary": "^5.0.0", "stylis": "^4.3.0", "ts-node": "^10.9.1", "typescript": "^5.5.3", diff --git a/packages/click-ui/src/components/Assets/Flags/system/Flag.tsx b/packages/click-ui/src/components/Assets/Flags/system/Flag.tsx index ed67b35c1..116542b64 100644 --- a/packages/click-ui/src/components/Assets/Flags/system/Flag.tsx +++ b/packages/click-ui/src/components/Assets/Flags/system/Flag.tsx @@ -1,6 +1,6 @@ import { SVGAttributes } from 'react'; import { useTheme } from 'styled-components'; -import { getFallbackThemeName } from '@/theme/theme.utils'; +import { getFallbackThemeName } from '@clickhouse/design-tokens/legacy/theme'; import { SvgImageElement } from '@/components/Icon/SvgImageElement'; import { FlagName, FlagProps } from './types'; import { diff --git a/packages/click-ui/src/components/Assets/Flags/system/types.ts b/packages/click-ui/src/components/Assets/Flags/system/types.ts index b876d8d0c..abd59cbdd 100644 --- a/packages/click-ui/src/components/Assets/Flags/system/types.ts +++ b/packages/click-ui/src/components/Assets/Flags/system/types.ts @@ -1,6 +1,6 @@ import type { SVGAttributes } from 'react'; import type { AssetSize } from '@/types'; -import type { ThemeName } from '@/theme/theme.types'; +import type { ThemeName } from '@clickhouse/design-tokens/legacy/theme'; export type FlagName = | 'australia' diff --git a/packages/click-ui/src/components/Assets/Icons/system/Icon.tsx b/packages/click-ui/src/components/Assets/Icons/system/Icon.tsx index 3a5b8411d..8641f8906 100644 --- a/packages/click-ui/src/components/Assets/Icons/system/Icon.tsx +++ b/packages/click-ui/src/components/Assets/Icons/system/Icon.tsx @@ -1,6 +1,6 @@ import { SVGAttributes } from 'react'; import { useTheme } from 'styled-components'; -import { getFallbackThemeName } from '@/theme/theme.utils'; +import { getFallbackThemeName } from '@clickhouse/design-tokens/legacy/theme'; import { SvgImageElement } from '@/components/Icon/SvgImageElement'; import { IconName, IconProps } from './types'; import { diff --git a/packages/click-ui/src/components/Assets/Icons/system/types.ts b/packages/click-ui/src/components/Assets/Icons/system/types.ts index a41659710..db0493411 100644 --- a/packages/click-ui/src/components/Assets/Icons/system/types.ts +++ b/packages/click-ui/src/components/Assets/Icons/system/types.ts @@ -1,6 +1,6 @@ import type { SVGAttributes } from 'react'; import type { AssetSize } from '@/types'; -import type { ThemeName } from '@/theme/theme.types'; +import type { ThemeName } from '@clickhouse/design-tokens/legacy/theme'; export type IconName = | 'activity' diff --git a/packages/click-ui/src/components/Assets/Logos/system/Logo.tsx b/packages/click-ui/src/components/Assets/Logos/system/Logo.tsx index 851a312bf..969995d79 100644 --- a/packages/click-ui/src/components/Assets/Logos/system/Logo.tsx +++ b/packages/click-ui/src/components/Assets/Logos/system/Logo.tsx @@ -1,6 +1,6 @@ import { SVGAttributes } from 'react'; import { useTheme } from 'styled-components'; -import { getFallbackThemeName } from '@/theme/theme.utils'; +import { getFallbackThemeName } from '@clickhouse/design-tokens/legacy/theme'; import { SvgImageElement } from '@/components/Icon/SvgImageElement'; import { LogoName, LogoProps } from './types'; import { diff --git a/packages/click-ui/src/components/Assets/Logos/system/types.ts b/packages/click-ui/src/components/Assets/Logos/system/types.ts index 2b79b78e3..3aa0b2b58 100644 --- a/packages/click-ui/src/components/Assets/Logos/system/types.ts +++ b/packages/click-ui/src/components/Assets/Logos/system/types.ts @@ -1,6 +1,6 @@ import type { SVGAttributes } from 'react'; import type { AssetSize } from '@/types'; -import type { ThemeName } from '@/theme/theme.types'; +import type { ThemeName } from '@clickhouse/design-tokens/legacy/theme'; export type LogoName = | 'airbyte' diff --git a/packages/click-ui/src/components/Assets/Payments/system/Payment.tsx b/packages/click-ui/src/components/Assets/Payments/system/Payment.tsx index 6f11366be..84cacb01f 100644 --- a/packages/click-ui/src/components/Assets/Payments/system/Payment.tsx +++ b/packages/click-ui/src/components/Assets/Payments/system/Payment.tsx @@ -1,6 +1,6 @@ import { SVGAttributes } from 'react'; import { useTheme } from 'styled-components'; -import { getFallbackThemeName } from '@/theme/theme.utils'; +import { getFallbackThemeName } from '@clickhouse/design-tokens/legacy/theme'; import { SvgImageElement } from '@/components/Icon/SvgImageElement'; import { PaymentName, PaymentProps } from './types'; import { diff --git a/packages/click-ui/src/components/Assets/Payments/system/types.ts b/packages/click-ui/src/components/Assets/Payments/system/types.ts index 080a63b92..fbab5525e 100644 --- a/packages/click-ui/src/components/Assets/Payments/system/types.ts +++ b/packages/click-ui/src/components/Assets/Payments/system/types.ts @@ -1,6 +1,6 @@ import type { SVGAttributes } from 'react'; import type { AssetSize } from '@/types'; -import type { ThemeName } from '@/theme/theme.types'; +import type { ThemeName } from '@clickhouse/design-tokens/legacy/theme'; export type PaymentName = 'amex' | 'mastercard' | 'paypal' | 'visa'; diff --git a/packages/click-ui/src/components/Assets/types.ts b/packages/click-ui/src/components/Assets/types.ts index 6dc61c07c..42ae3fbf9 100644 --- a/packages/click-ui/src/components/Assets/types.ts +++ b/packages/click-ui/src/components/Assets/types.ts @@ -1,6 +1,6 @@ import type { SVGAttributes } from 'react'; import type { AssetSize } from '@/types'; -import type { ThemeName } from '@/theme/theme.types'; +import type { ThemeName } from '@clickhouse/design-tokens/legacy/theme'; export type SVGAssetProps = SVGAttributes & { theme?: ThemeName; diff --git a/packages/click-ui/src/components/GenericMenu/GenericMenu.test.tsx b/packages/click-ui/src/components/GenericMenu/GenericMenu.test.tsx index 86b7ea7bc..d005f365c 100644 --- a/packages/click-ui/src/components/GenericMenu/GenericMenu.test.tsx +++ b/packages/click-ui/src/components/GenericMenu/GenericMenu.test.tsx @@ -6,7 +6,7 @@ import { GenericPopoverMenuPanel, GenericMenuItem, } from './GenericMenu'; -import { themes } from '@/theme/theme.core'; +import { themes } from '@clickhouse/design-tokens/legacy/theme'; const renderWithTheme = (component: React.ReactNode) => { return render({component}); diff --git a/packages/click-ui/src/components/Switch/Switch.tsx b/packages/click-ui/src/components/Switch/Switch.tsx index 01c2133a7..bdeb9e9b8 100644 --- a/packages/click-ui/src/components/Switch/Switch.tsx +++ b/packages/click-ui/src/components/Switch/Switch.tsx @@ -4,7 +4,7 @@ import { styled } from 'styled-components'; import { FormRoot } from '@/components/FormContainer'; import { GenericLabel } from '@/components/GenericLabel'; import { SwitchProps } from './Switch.types'; -import type { Theme } from '@/theme/theme.types'; +import type { Theme } from '@clickhouse/design-tokens/legacy/theme'; interface ThumbProps { $checked: boolean; diff --git a/packages/click-ui/src/hooks/index.ts b/packages/click-ui/src/hooks/index.ts index ecfd9ab25..e358bad78 100644 --- a/packages/click-ui/src/hooks/index.ts +++ b/packages/click-ui/src/hooks/index.ts @@ -1,15 +1,6 @@ export { useToast } from './useToast'; -export { useInitialTheme } from './useInitialTheme'; -export type { UseThemeParams } from './useInitialTheme'; - -/** - * @deprecated This hook is deprecated and will be removed in a future version. - * Use CSS variables for theming instead (e.g., `var(--click-global-color-text-default)`). - * For theme name, use the `useInitialTheme` hook or access the theme context directly. - */ -export { useCUITheme } from './useCUITheme'; - -/** - * @deprecated This type is deprecated and will be removed in a future version. - */ -export type { CUIThemeType } from './useCUITheme'; +export { useInitialTheme, useCUITheme } from '@clickhouse/design-tokens/legacy/hooks'; +export type { + UseThemeParams, + CUIThemeType, +} from '@clickhouse/design-tokens/legacy/hooks'; diff --git a/packages/click-ui/src/hooks/useCUITheme.ts b/packages/click-ui/src/hooks/useCUITheme.ts deleted file mode 100644 index e6a1c538f..000000000 --- a/packages/click-ui/src/hooks/useCUITheme.ts +++ /dev/null @@ -1,16 +0,0 @@ -'use client'; - -import { useTheme } from 'styled-components'; -import type { Theme } from '@/theme/theme.types'; - -export type CUIThemeType = Pick; - -export const useCUITheme = (): CUIThemeType => { - const theme = useTheme(); - return { - breakpoint: theme.breakpoint, - global: theme.global, - name: theme.name, - sizes: theme.sizes, - }; -}; diff --git a/packages/click-ui/src/index.ts b/packages/click-ui/src/index.ts index 9275bafe3..91649daf5 100644 --- a/packages/click-ui/src/index.ts +++ b/packages/click-ui/src/index.ts @@ -264,8 +264,17 @@ export type { ToastProps } from './components/Toast'; // Hooks // ================================================ -export { useInitialTheme, useToast, useCUITheme } from './hooks'; -export type { CUIThemeType, UseThemeParams } from './hooks'; +export { useToast } from './hooks'; + +/** + * @deprecated These hooks are deprecated. Import from '@clickhouse/design-tokens/legacy' directly for backward compatibility, or migrate to CSS variables. + */ +export { useInitialTheme, useCUITheme } from '@clickhouse/design-tokens/legacy'; + +/** + * @deprecated These types are deprecated. Import from '@clickhouse/design-tokens/legacy' directly for backward compatibility, or migrate to CSS variables. + */ +export type { CUIThemeType, UseThemeParams } from '@clickhouse/design-tokens/legacy'; // Tooltip export { Tooltip } from './components/Tooltip/Tooltip'; @@ -295,19 +304,30 @@ export type { export { ClickUIProvider, ThemeProvider } from './providers'; // ================================================ -// Theme +// Theme (Deprecated) // ================================================ -export { THEMES, themes } from './theme/theme.core'; -export type { ThemeName, Theme } from './theme/theme.types'; +/** + * @deprecated These theme utilities are deprecated. Import from '@clickhouse/design-tokens/legacy' directly for backward compatibility, or migrate to CSS variables. + */ export { + THEMES, + themes, + InitCUIThemeScript, isValidThemeName, getFallbackThemeName, getDefaultThemeName, getAvailableThemeNames, -} from './theme/theme.utils'; -export { InitCUIThemeScript } from './theme/InitCUIThemeScript/InitCUIThemeScript'; -export type { InitCUIThemeScriptProps } from './theme/InitCUIThemeScript/InitCUIThemeScript'; +} from '@clickhouse/design-tokens/legacy'; + +/** + * @deprecated These types are deprecated. Import from '@clickhouse/design-tokens/legacy' directly for backward compatibility, or migrate to CSS variables. + */ +export type { + ThemeName, + Theme, + InitCUIThemeScriptProps, +} from '@clickhouse/design-tokens/legacy'; // ================================================ // Global Types diff --git a/packages/click-ui/src/providers/ClickUIProvider.tsx b/packages/click-ui/src/providers/ClickUIProvider.tsx index b38605324..84924b2fa 100644 --- a/packages/click-ui/src/providers/ClickUIProvider.tsx +++ b/packages/click-ui/src/providers/ClickUIProvider.tsx @@ -3,13 +3,16 @@ import { TooltipProviderProps, } from '@radix-ui/react-tooltip'; import { ToastProvider, ToastProviderProps } from '@/components/Toast/Toast'; -import { THEMES } from '@/theme/theme.core'; -import type { ThemeName } from '@/theme/theme.types'; +import { + THEMES, + isValidThemeName, + getFallbackThemeName, +} from '@clickhouse/design-tokens/legacy/theme'; +import type { ThemeName } from '@clickhouse/design-tokens/legacy/theme'; import { ThemeProvider } from './ThemeProvider'; import { ReactNode, useEffect } from 'react'; import { setRootThemeAttribute, removeRootThemeAttribute } from '@/utils/dom'; import { CUI_THEME_STORAGE_KEY } from '@/utils/localStorage'; -import { isValidThemeName, getFallbackThemeName } from '@/theme/theme.utils'; interface Props { config?: { diff --git a/packages/click-ui/src/providers/ThemeProvider.tsx b/packages/click-ui/src/providers/ThemeProvider.tsx index a998d49e5..6096578c2 100644 --- a/packages/click-ui/src/providers/ThemeProvider.tsx +++ b/packages/click-ui/src/providers/ThemeProvider.tsx @@ -2,10 +2,8 @@ import { ThemeProvider as StyledThemeProvider, createGlobalStyle, } from 'styled-components'; -import { THEMES } from '@/theme/theme.core'; -import type { ThemeName } from '@/theme/theme.types'; -import { themes } from '@/theme/theme.core'; -import { isValidThemeName } from '@/theme/theme.utils'; +import { THEMES, themes, isValidThemeName } from '@clickhouse/design-tokens/legacy/theme'; +import type { ThemeName } from '@clickhouse/design-tokens/legacy/theme'; const GlobalStyle = createGlobalStyle` body{ diff --git a/packages/click-ui/src/theme/InitCUIThemeScript/InitCUIThemeScript.tsx b/packages/click-ui/src/theme/InitCUIThemeScript/InitCUIThemeScript.tsx deleted file mode 100644 index 6db22f807..000000000 --- a/packages/click-ui/src/theme/InitCUIThemeScript/InitCUIThemeScript.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { THEME_ATTRIBUTE } from '@/utils/dom'; -import { CUI_THEME_STORAGE_KEY } from '@/utils/localStorage'; -import { THEMES } from '@/theme/theme.core'; -import type { ThemeName } from '@/theme/theme.types'; - -export interface InitCUIThemeScriptProps { - defaultTheme?: ThemeName; - storageKey?: string; - attribute?: string; - nonce?: string; -} - -// TODO: Provide support for system prefers-color-scheme - -export const InitCUIThemeScript = ({ - defaultTheme = THEMES.Light, - storageKey = CUI_THEME_STORAGE_KEY, - attribute = THEME_ATTRIBUTE, - nonce, -}: InitCUIThemeScriptProps) => { - return ( -