chore(design-tokens): 🤖 add legacy backward compatibility exports for styled-components theme

.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.

.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.

.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

package.json

@@ -19,6 +19,7 @@
     "prepare": "husky"
   },
   "devDependencies": {
+    "glob": "^13.0.6",
     "husky": "^9.1.7"
   },
   "resolutions": {

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
 

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",

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 {
@@ -13,10 +13,10 @@
 
 const resolveFlagName = createAssetResolver<FlagName>();
 
 export { resolveFlagName };
 
 export interface FlagPropsWithAliases extends Omit<FlagProps, 'name'> {
   name: FlagName | AssetAlias | AssetDeprecatedName;
 }
 
 const Flag = ({ name, theme, size, ...props }: FlagPropsWithAliases) => {

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'

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 {
@@ -13,10 +13,10 @@
 
 const resolveIconName = createAssetResolver<IconName>();
 
 export { resolveIconName };
 
 export interface IconPropsWithAliases extends Omit<IconProps, 'name'> {
   name: IconName | AssetAlias | AssetDeprecatedName;
 }
 
 const Icon = ({ name, theme, size, ...props }: IconPropsWithAliases) => {

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'

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 {
@@ -13,10 +13,10 @@
 
 const resolveLogoName = createAssetResolver<LogoName>();
 
 export { resolveLogoName };
 
 export interface LogoPropsWithAliases extends Omit<LogoProps, 'name'> {
   name: LogoName | AssetAlias | AssetDeprecatedName;
 }
 
 const Logo = ({ name, theme, size, ...props }: LogoPropsWithAliases) => {

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'

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 {
@@ -13,10 +13,10 @@
 
 const resolvePaymentName = createAssetResolver<PaymentName>();
 
 export { resolvePaymentName };
 
 export interface PaymentPropsWithAliases extends Omit<PaymentProps, 'name'> {
   name: PaymentName | AssetAlias | AssetDeprecatedName;
 }
 
 const Payment = ({ name, theme, size, ...props }: PaymentPropsWithAliases) => {

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';
 

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<SVGElement> & {
   theme?: ThemeName;

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(<ThemeProvider theme={themes.dark}>{component}</ThemeProvider>);

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;

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';