@gtcx/theme 0.1.0

package/dist/config-provider.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @module config-provider
+ *
+ * Root provider for GTCX theming. Wraps Ant Design's `ConfigProvider` with
+ * GTCX tokens and ensures all descendants receive the correct theme.
+ *
+ * Per ADR-0002: All styling flows from GTCX tokens via ConfigProvider.
+ * Platform apps should wrap their root with this provider.
+ */
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { type ThemeMode, type ThemeDensity, type TokensOverride } from './create-theme';
+export interface GtcxConfigProviderProps {
+    /** Light or dark mode. Defaults to `'light'`. */
+    mode?: ThemeMode;
+    /** Comfortable or compact density. Defaults to `'comfortable'`. */
+    density?: ThemeDensity;
+    /** Deep-merged token overrides. Must be a stable reference or memoized. */
+    tokensOverride?: TokensOverride;
+    /** Layout direction. Defaults to `'ltr'`. */
+    direction?: 'ltr' | 'rtl';
+    /** Ant Design locale object for i18n. */
+    locale?: React.ComponentProps<typeof ConfigProvider>['locale'];
+    children: React.ReactNode;
+}
+/**
+ * Root GTCX theme provider.
+ *
+ * @example
+ * ```tsx
+ * <GtcxConfigProvider mode="dark" density="compact">
+ *   <App />
+ * </GtcxConfigProvider>
+ * ```
+ */
+export declare function GtcxConfigProvider({ mode, density, tokensOverride, direction, locale, children, }: GtcxConfigProviderProps): React.ReactElement;
+export declare namespace GtcxConfigProvider {
+    var displayName: string;
+}
+//# sourceMappingURL=config-provider.d.ts.map

package/dist/config-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-provider.d.ts","sourceRoot":"","sources":["../src/config-provider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,cAAc,EAAO,MAAM,MAAM,CAAC;AAC3C,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,yCAAyC;IACzC,MAAM,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC/D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAc,EACd,OAAuB,EACvB,cAAc,EACd,SAAiB,EACjB,MAAM,EACN,QAAQ,GACT,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CA2B9C;yBAlCe,kBAAkB"}

package/dist/create-theme.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @module create-theme
+ *
+ * Creates Ant Design v5 {@link ThemeConfig} objects from GTCX semantic tokens.
+ * This is the single bridge between the GTCX token system and Ant Design's
+ * theming engine.
+ *
+ * Key design decisions:
+ * - Deep merges `tokensOverride` so nested objects (like `colors.primary`)
+ *   don't blow away sibling keys.
+ * - Maps ~80% of Ant Design's seed, alias, and component tokens.
+ * - Supports light/dark modes via `theme.darkAlgorithm`.
+ * - Supports compact density via `theme.compactAlgorithm`.
+ */
+import { type SemanticColors, type SemanticSpacing, type SemanticTypography, type SemanticRadii, type SemanticShadows, type SemanticLayout } from '@gtcx/tokens';
+import type { ThemeConfig } from 'antd';
+export type ThemeMode = 'light' | 'dark';
+export type ThemeDensity = 'comfortable' | 'compact';
+type Widen<T> = T extends string ? string : T extends number ? number : T extends boolean ? boolean : T;
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : Widen<T[K]>;
+};
+export interface TokensOverride {
+    colors?: DeepPartial<SemanticColors>;
+    spacing?: DeepPartial<SemanticSpacing>;
+    typography?: DeepPartial<SemanticTypography>;
+    radii?: DeepPartial<SemanticRadii>;
+    shadows?: DeepPartial<SemanticShadows>;
+    layout?: DeepPartial<SemanticLayout>;
+}
+export interface CreateAntdThemeOptions {
+    /** Light or dark mode. Defaults to `'light'`. */
+    mode?: ThemeMode;
+    /** Comfortable (default) or compact density. */
+    density?: ThemeDensity;
+    /** Deep-merged overrides for semantic tokens. */
+    tokensOverride?: TokensOverride;
+}
+/**
+ * Creates an Ant Design {@link ThemeConfig} from GTCX semantic tokens.
+ *
+ * @example
+ * ```ts
+ * // Light mode (default)
+ * const theme = createAntdTheme();
+ *
+ * // Dark mode
+ * const dark = createAntdTheme({ mode: 'dark' });
+ *
+ * // Compact density
+ * const compact = createAntdTheme({ density: 'compact' });
+ *
+ * // Override specific tokens without losing siblings
+ * const custom = createAntdTheme({
+ *   tokensOverride: { colors: { primary: '#ff0000' } },
+ * });
+ * ```
+ */
+export declare function createAntdTheme(options?: CreateAntdThemeOptions): ThemeConfig;
+export {};
+//# sourceMappingURL=create-theme.d.ts.map

package/dist/create-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-theme.d.ts","sourceRoot":"","sources":["../src/create-theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAWL,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAMxC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACzC,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,SAAS,CAAC;AAErD,KAAK,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAC5B,MAAM,GACN,CAAC,SAAS,MAAM,GACd,MAAM,GACN,CAAC,SAAS,OAAO,GACf,OAAO,GACP,CAAC,CAAC;AACV,KAAK,WAAW,CAAC,CAAC,IAAI;KACnB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACvE,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,sBAAsB;IACrC,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,iDAAiD;IACjD,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAsDD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,OAAO,GAAE,sBAA2B,GAAG,WAAW,CA6LjF"}

package/dist/index.cjs

@@ -0,0 +1,167 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  GtcxConfigProvider: () => GtcxConfigProvider,
+  createAntdTheme: () => createAntdTheme,
+  getAntThemeForPlatform: () => getAntThemeForPlatform,
+  getPlatformTheme: () => getPlatformTheme,
+  platformThemes: () => platformThemes
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/createAntdTheme.ts
+var import_tokens = require("@gtcx/tokens");
+function createAntdTheme(options = {}) {
+  const { mode = "light" } = options;
+  const tokens = { ...import_tokens.semanticTokens, ...options.tokensOverride };
+  const baseTheme = {
+    token: {
+      colorPrimary: tokens.colors.primary,
+      colorSuccess: tokens.colors.success,
+      colorWarning: tokens.colors.warning,
+      colorError: tokens.colors.error,
+      colorInfo: tokens.colors.info,
+      colorLink: tokens.colors.link,
+      colorLinkHover: tokens.colors.linkHover,
+      colorText: tokens.colors.textPrimary,
+      colorTextSecondary: tokens.colors.textSecondary,
+      colorTextTertiary: tokens.colors.textMuted,
+      colorBgContainer: tokens.colors.bgSurface,
+      colorBgLayout: tokens.colors.bgPage,
+      colorBorder: tokens.colors.border,
+      colorBorderSecondary: tokens.colors.borderLight,
+      borderRadius: tokens.radii.component,
+      fontFamily: tokens.typography.fontFamily,
+      fontFamilyCode: tokens.typography.fontFamilyCode,
+      fontSize: tokens.typography.body.md.fontSize,
+      lineHeight: tokens.typography.body.md.lineHeight,
+      boxShadow: tokens.shadows.card,
+      boxShadowSecondary: tokens.shadows.dropdown
+    },
+    components: {
+      Layout: {
+        headerBg: tokens.colors.bgHeader,
+        headerHeight: tokens.layout.headerHeight,
+        siderBg: tokens.colors.bgSidebar,
+        bodyBg: tokens.colors.bgPage
+      },
+      Menu: {
+        itemBg: "transparent",
+        itemSelectedBg: tokens.colors.primaryBg,
+        itemSelectedColor: tokens.colors.primary,
+        itemHoverBg: tokens.colors.bgSurfaceHover,
+        itemHeight: 36,
+        itemMarginInline: 8,
+        itemPaddingInline: 12,
+        itemBorderRadius: 6,
+        groupTitleColor: tokens.colors.textMuted,
+        groupTitleFontSize: 11,
+        groupTitleLineHeight: 16
+      },
+      Button: {
+        borderRadius: tokens.radii.button
+      },
+      Card: {
+        borderRadiusLG: tokens.radii.card
+      },
+      Input: {
+        borderRadius: tokens.radii.input
+      }
+    }
+  };
+  if (mode === "dark") {
+    return {
+      ...baseTheme,
+      algorithm: void 0
+      // TODO: implement dark mode algorithm
+    };
+  }
+  return baseTheme;
+}
+
+// src/GtcxConfigProvider.tsx
+var import_react = require("react");
+var import_antd = require("antd");
+var import_jsx_runtime = require("react/jsx-runtime");
+function GtcxConfigProvider({
+  mode = "light",
+  tokensOverride,
+  direction = "ltr",
+  children
+}) {
+  const theme = (0, import_react.useMemo)(
+    () => createAntdTheme({ mode, tokensOverride }),
+    [mode, tokensOverride]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.ConfigProvider, { theme, direction, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.App, { children }) });
+}
+
+// src/platform-themes.ts
+var import_tokens2 = require("@gtcx/tokens");
+var platformThemes = {
+  crx: {
+    platform: "crx",
+    colors: import_tokens2.platformColors.crx,
+    spacing: import_tokens2.platformSpacing.crx
+  },
+  sgx: {
+    platform: "sgx",
+    colors: import_tokens2.platformColors.sgx,
+    spacing: import_tokens2.platformSpacing.sgx
+  },
+  agx: {
+    platform: "agx",
+    colors: import_tokens2.platformColors.agx,
+    spacing: import_tokens2.platformSpacing.agx
+  }
+};
+var getPlatformTheme = (platform) => platformThemes[platform];
+function getAntThemeForPlatform(platform) {
+  const theme = platformThemes[platform];
+  return {
+    token: {
+      colorPrimary: theme.colors.primary,
+      colorInfo: import_tokens2.colorPrimitives.info[500],
+      colorSuccess: import_tokens2.colorPrimitives.success[500],
+      colorWarning: import_tokens2.colorPrimitives.warning[500],
+      colorError: import_tokens2.colorPrimitives.error[500],
+      borderRadius: 8,
+      fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+    },
+    components: {
+      Button: {
+        paddingInline: theme.spacing.basePadding
+      },
+      Card: {
+        paddingLG: theme.spacing.basePadding + 8
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GtcxConfigProvider,
+  createAntdTheme,
+  getAntThemeForPlatform,
+  getPlatformTheme,
+  platformThemes
+});

package/dist/index.d.cts

@@ -0,0 +1,58 @@
+import { ThemeConfig } from 'antd';
+import { semanticTokens, Platform } from '@gtcx/tokens';
+export { Platform } from '@gtcx/tokens';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ThemeMode = 'light' | 'dark';
+interface CreateAntdThemeOptions {
+    mode?: ThemeMode;
+    tokensOverride?: Partial<typeof semanticTokens>;
+}
+/**
+ * Creates an Ant Design theme config from GTCX semantic tokens.
+ * Follows ADR-0002: use ConfigProvider as primary customization mechanism.
+ */
+declare function createAntdTheme(options?: CreateAntdThemeOptions): ThemeConfig;
+
+interface GtcxConfigProviderProps {
+    mode?: ThemeMode;
+    tokensOverride?: Partial<typeof semanticTokens>;
+    direction?: 'ltr' | 'rtl';
+    children: React.ReactNode;
+}
+/**
+ * Root provider for GTCX theming.
+ * Wraps Ant Design ConfigProvider with GTCX tokens.
+ *
+ * Per ADR-0002: All styling flows from GTCX tokens via ConfigProvider.
+ * Platform apps should wrap their root with this provider.
+ */
+declare function GtcxConfigProvider({ mode, tokensOverride, direction, children, }: GtcxConfigProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Platform-specific Ant Design theme generators for CRX, SGX, and AGX.
+ */
+
+interface PlatformTheme {
+    platform: Platform;
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        gradient: string;
+    };
+    spacing: {
+        density: string;
+        basePadding: number;
+        baseGap: number;
+    };
+}
+declare const platformThemes: Record<Platform, PlatformTheme>;
+declare const getPlatformTheme: (platform: Platform) => PlatformTheme;
+/**
+ * Generate an Ant Design theme config for a specific platform.
+ */
+declare function getAntThemeForPlatform(platform: Platform): ThemeConfig;
+
+export { type CreateAntdThemeOptions, GtcxConfigProvider, type GtcxConfigProviderProps, type PlatformTheme, type ThemeMode, createAntdTheme, getAntThemeForPlatform, getPlatformTheme, platformThemes };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { createAntdTheme } from './create-theme';
+export type { ThemeMode, ThemeDensity, CreateAntdThemeOptions, TokensOverride, } from './create-theme';
+export { GtcxConfigProvider } from './config-provider';
+export type { GtcxConfigProviderProps } from './config-provider';
+export { useGtcxTheme } from './use-gtcx-theme';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EACV,SAAS,EACT,YAAY,EACZ,sBAAsB,EACtB,cAAc,GACf,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,228 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  GtcxConfigProvider: () => GtcxConfigProvider,
+  createAntdTheme: () => createAntdTheme,
+  useGtcxTheme: () => useGtcxTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/create-theme.ts
+var import_tokens = require("@gtcx/tokens");
+var import_antd = require("antd");
+function deepMerge(base, override) {
+  if (typeof base !== "object" || base === null || typeof override !== "object" || override === null) {
+    return override ?? base;
+  }
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    const overrideVal = override[key];
+    const baseVal = base[key];
+    if (overrideVal !== null && overrideVal !== void 0 && typeof overrideVal === "object" && !Array.isArray(overrideVal) && typeof baseVal === "object" && baseVal !== null && !Array.isArray(baseVal)) {
+      result[key] = deepMerge(baseVal, overrideVal);
+    } else if (overrideVal !== void 0) {
+      result[key] = overrideVal;
+    }
+  }
+  return result;
+}
+function createAntdTheme(options = {}) {
+  const { mode = "light", density = "comfortable" } = options;
+  const base = {
+    colors: { ...import_tokens.semanticColors },
+    spacing: { ...import_tokens.semanticSpacing },
+    typography: { ...import_tokens.semanticTypography },
+    radii: { ...import_tokens.semanticRadii },
+    shadows: { ...import_tokens.semanticShadows },
+    layout: { ...import_tokens.semanticLayout }
+  };
+  const tokens = options.tokensOverride ? {
+    colors: options.tokensOverride.colors ? deepMerge(base.colors, options.tokensOverride.colors) : base.colors,
+    spacing: options.tokensOverride.spacing ? deepMerge(base.spacing, options.tokensOverride.spacing) : base.spacing,
+    typography: options.tokensOverride.typography ? deepMerge(base.typography, options.tokensOverride.typography) : base.typography,
+    radii: options.tokensOverride.radii ? deepMerge(base.radii, options.tokensOverride.radii) : base.radii,
+    shadows: options.tokensOverride.shadows ? deepMerge(base.shadows, options.tokensOverride.shadows) : base.shadows,
+    layout: options.tokensOverride.layout ? deepMerge(base.layout, options.tokensOverride.layout) : base.layout
+  } : base;
+  const colors = mode === "dark" ? { ...tokens.colors, ...import_tokens.darkSemanticColors } : tokens.colors;
+  const algorithms = [];
+  if (mode === "dark") {
+    algorithms.push(import_antd.theme.darkAlgorithm);
+  }
+  if (density === "compact") {
+    algorithms.push(import_antd.theme.compactAlgorithm);
+  }
+  const config = {
+    // Algorithm
+    ...algorithms.length === 1 ? { algorithm: algorithms[0] } : algorithms.length > 1 ? { algorithm: algorithms } : {},
+    // Seed + alias tokens
+    token: {
+      // Colors — seed
+      colorPrimary: colors.primary,
+      colorSuccess: colors.success,
+      colorWarning: colors.warning,
+      colorError: colors.error,
+      colorInfo: colors.info,
+      colorLink: colors.link,
+      colorLinkHover: colors.linkHover,
+      // Colors — text
+      colorText: colors.textPrimary,
+      colorTextSecondary: colors.textSecondary,
+      colorTextTertiary: colors.textTertiary,
+      colorTextQuaternary: colors.textMuted,
+      // Colors — backgrounds
+      colorBgBase: colors.bgPage,
+      colorBgContainer: colors.bgSurface,
+      colorBgLayout: colors.bgPage,
+      colorBgElevated: colors.bgSurface,
+      // Colors — borders
+      colorBorder: colors.border,
+      colorBorderSecondary: colors.borderLight,
+      // Typography
+      fontFamily: tokens.typography.fontFamily,
+      fontFamilyCode: tokens.typography.fontFamilyCode,
+      fontSize: tokens.typography.body.md.fontSize,
+      lineHeight: tokens.typography.body.md.lineHeight,
+      // Border radius — seed
+      borderRadius: tokens.radii.component,
+      // Shadows
+      boxShadow: tokens.shadows.card,
+      boxShadowSecondary: tokens.shadows.dropdown,
+      boxShadowTertiary: tokens.shadows.modal,
+      // Focus
+      controlOutlineWidth: import_tokens.focusPrimitives.ringWidth,
+      // Opacity
+      opacityLoading: import_tokens.opacityPrimitives.loading,
+      // Spacing — Ant Design seed tokens
+      sizeUnit: 4,
+      sizeStep: 4,
+      // Motion
+      motionUnit: 0.1,
+      // Z-index
+      zIndexBase: 0,
+      zIndexPopupBase: 1e3,
+      // Control height
+      controlHeight: 36
+    },
+    // Component-level token overrides
+    components: {
+      Layout: {
+        headerBg: colors.bgHeader,
+        headerHeight: tokens.layout.headerHeight,
+        siderBg: colors.bgSidebar,
+        bodyBg: colors.bgPage
+      },
+      Menu: {
+        itemBg: "transparent",
+        itemSelectedBg: colors.primaryBg,
+        itemSelectedColor: colors.primary,
+        itemHoverBg: colors.bgSurfaceHover,
+        itemHeight: 36,
+        itemMarginInline: 8,
+        itemPaddingInline: 12,
+        itemBorderRadius: import_tokens.borderRadiusPrimitives.md,
+        groupTitleColor: colors.textMuted,
+        groupTitleFontSize: tokens.typography.caption.fontSize - 1,
+        groupTitleLineHeight: 16
+      },
+      Button: {
+        borderRadius: tokens.radii.button,
+        paddingInline: tokens.spacing.component.button.paddingX,
+        fontWeight: tokens.typography.button.md.fontWeight
+      },
+      Card: {
+        borderRadiusLG: tokens.radii.card,
+        paddingLG: tokens.spacing.component.card.padding
+      },
+      Input: {
+        borderRadius: tokens.radii.input,
+        paddingInline: tokens.spacing.component.input.paddingX
+      },
+      Table: {
+        cellPaddingBlock: tokens.spacing.component.table.cellPadding,
+        cellPaddingInline: tokens.spacing.component.table.cellPadding,
+        headerBg: colors.bgSurfaceHover,
+        headerColor: colors.textSecondary,
+        borderColor: colors.borderLight,
+        rowHoverBg: colors.bgSurfaceHover
+      },
+      Modal: {
+        paddingLG: tokens.spacing.component.modal.padding,
+        borderRadiusLG: tokens.radii.card
+      },
+      Form: {
+        itemMarginBottom: tokens.spacing.component.form.fieldGap,
+        labelFontSize: tokens.typography.body.sm.fontSize
+      },
+      Typography: {
+        fontFamilyCode: tokens.typography.fontFamilyCode
+      },
+      Tag: {
+        borderRadiusSM: tokens.radii.tag
+      }
+    }
+  };
+  return config;
+}
+
+// src/config-provider.tsx
+var import_antd2 = require("antd");
+var import_react = require("react");
+function GtcxConfigProvider({
+  mode = "light",
+  density = "comfortable",
+  tokensOverride,
+  direction = "ltr",
+  locale,
+  children
+}) {
+  const overrideRef = (0, import_react.useRef)(tokensOverride);
+  const overrideJson = JSON.stringify(tokensOverride);
+  const prevJson = (0, import_react.useRef)(overrideJson);
+  if (overrideJson !== prevJson.current) {
+    overrideRef.current = tokensOverride;
+    prevJson.current = overrideJson;
+  }
+  const theme = (0, import_react.useMemo)(
+    () => createAntdTheme({ mode, density, tokensOverride: overrideRef.current }),
+    [mode, density, overrideJson]
+  );
+  return (0, import_react.createElement)(
+    import_antd2.ConfigProvider,
+    { theme, direction, locale },
+    (0, import_react.createElement)(import_antd2.App, null, children)
+  );
+}
+GtcxConfigProvider.displayName = "GtcxConfigProvider";
+
+// src/use-gtcx-theme.ts
+var import_antd3 = require("antd");
+function useGtcxTheme() {
+  const { token } = import_antd3.theme.useToken();
+  return { token };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GtcxConfigProvider,
+  createAntdTheme,
+  useGtcxTheme
+});

package/dist/index.mjs

@@ -0,0 +1,210 @@
+// src/create-theme.ts
+import {
+  semanticColors,
+  semanticSpacing,
+  semanticTypography,
+  semanticRadii,
+  semanticShadows,
+  semanticLayout,
+  darkSemanticColors,
+  borderRadiusPrimitives,
+  opacityPrimitives,
+  focusPrimitives
+} from "@gtcx/tokens";
+import { theme as antdTheme } from "antd";
+function deepMerge(base, override) {
+  if (typeof base !== "object" || base === null || typeof override !== "object" || override === null) {
+    return override ?? base;
+  }
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    const overrideVal = override[key];
+    const baseVal = base[key];
+    if (overrideVal !== null && overrideVal !== void 0 && typeof overrideVal === "object" && !Array.isArray(overrideVal) && typeof baseVal === "object" && baseVal !== null && !Array.isArray(baseVal)) {
+      result[key] = deepMerge(baseVal, overrideVal);
+    } else if (overrideVal !== void 0) {
+      result[key] = overrideVal;
+    }
+  }
+  return result;
+}
+function createAntdTheme(options = {}) {
+  const { mode = "light", density = "comfortable" } = options;
+  const base = {
+    colors: { ...semanticColors },
+    spacing: { ...semanticSpacing },
+    typography: { ...semanticTypography },
+    radii: { ...semanticRadii },
+    shadows: { ...semanticShadows },
+    layout: { ...semanticLayout }
+  };
+  const tokens = options.tokensOverride ? {
+    colors: options.tokensOverride.colors ? deepMerge(base.colors, options.tokensOverride.colors) : base.colors,
+    spacing: options.tokensOverride.spacing ? deepMerge(base.spacing, options.tokensOverride.spacing) : base.spacing,
+    typography: options.tokensOverride.typography ? deepMerge(base.typography, options.tokensOverride.typography) : base.typography,
+    radii: options.tokensOverride.radii ? deepMerge(base.radii, options.tokensOverride.radii) : base.radii,
+    shadows: options.tokensOverride.shadows ? deepMerge(base.shadows, options.tokensOverride.shadows) : base.shadows,
+    layout: options.tokensOverride.layout ? deepMerge(base.layout, options.tokensOverride.layout) : base.layout
+  } : base;
+  const colors = mode === "dark" ? { ...tokens.colors, ...darkSemanticColors } : tokens.colors;
+  const algorithms = [];
+  if (mode === "dark") {
+    algorithms.push(antdTheme.darkAlgorithm);
+  }
+  if (density === "compact") {
+    algorithms.push(antdTheme.compactAlgorithm);
+  }
+  const config = {
+    // Algorithm
+    ...algorithms.length === 1 ? { algorithm: algorithms[0] } : algorithms.length > 1 ? { algorithm: algorithms } : {},
+    // Seed + alias tokens
+    token: {
+      // Colors — seed
+      colorPrimary: colors.primary,
+      colorSuccess: colors.success,
+      colorWarning: colors.warning,
+      colorError: colors.error,
+      colorInfo: colors.info,
+      colorLink: colors.link,
+      colorLinkHover: colors.linkHover,
+      // Colors — text
+      colorText: colors.textPrimary,
+      colorTextSecondary: colors.textSecondary,
+      colorTextTertiary: colors.textTertiary,
+      colorTextQuaternary: colors.textMuted,
+      // Colors — backgrounds
+      colorBgBase: colors.bgPage,
+      colorBgContainer: colors.bgSurface,
+      colorBgLayout: colors.bgPage,
+      colorBgElevated: colors.bgSurface,
+      // Colors — borders
+      colorBorder: colors.border,
+      colorBorderSecondary: colors.borderLight,
+      // Typography
+      fontFamily: tokens.typography.fontFamily,
+      fontFamilyCode: tokens.typography.fontFamilyCode,
+      fontSize: tokens.typography.body.md.fontSize,
+      lineHeight: tokens.typography.body.md.lineHeight,
+      // Border radius — seed
+      borderRadius: tokens.radii.component,
+      // Shadows
+      boxShadow: tokens.shadows.card,
+      boxShadowSecondary: tokens.shadows.dropdown,
+      boxShadowTertiary: tokens.shadows.modal,
+      // Focus
+      controlOutlineWidth: focusPrimitives.ringWidth,
+      // Opacity
+      opacityLoading: opacityPrimitives.loading,
+      // Spacing — Ant Design seed tokens
+      sizeUnit: 4,
+      sizeStep: 4,
+      // Motion
+      motionUnit: 0.1,
+      // Z-index
+      zIndexBase: 0,
+      zIndexPopupBase: 1e3,
+      // Control height
+      controlHeight: 36
+    },
+    // Component-level token overrides
+    components: {
+      Layout: {
+        headerBg: colors.bgHeader,
+        headerHeight: tokens.layout.headerHeight,
+        siderBg: colors.bgSidebar,
+        bodyBg: colors.bgPage
+      },
+      Menu: {
+        itemBg: "transparent",
+        itemSelectedBg: colors.primaryBg,
+        itemSelectedColor: colors.primary,
+        itemHoverBg: colors.bgSurfaceHover,
+        itemHeight: 36,
+        itemMarginInline: 8,
+        itemPaddingInline: 12,
+        itemBorderRadius: borderRadiusPrimitives.md,
+        groupTitleColor: colors.textMuted,
+        groupTitleFontSize: tokens.typography.caption.fontSize - 1,
+        groupTitleLineHeight: 16
+      },
+      Button: {
+        borderRadius: tokens.radii.button,
+        paddingInline: tokens.spacing.component.button.paddingX,
+        fontWeight: tokens.typography.button.md.fontWeight
+      },
+      Card: {
+        borderRadiusLG: tokens.radii.card,
+        paddingLG: tokens.spacing.component.card.padding
+      },
+      Input: {
+        borderRadius: tokens.radii.input,
+        paddingInline: tokens.spacing.component.input.paddingX
+      },
+      Table: {
+        cellPaddingBlock: tokens.spacing.component.table.cellPadding,
+        cellPaddingInline: tokens.spacing.component.table.cellPadding,
+        headerBg: colors.bgSurfaceHover,
+        headerColor: colors.textSecondary,
+        borderColor: colors.borderLight,
+        rowHoverBg: colors.bgSurfaceHover
+      },
+      Modal: {
+        paddingLG: tokens.spacing.component.modal.padding,
+        borderRadiusLG: tokens.radii.card
+      },
+      Form: {
+        itemMarginBottom: tokens.spacing.component.form.fieldGap,
+        labelFontSize: tokens.typography.body.sm.fontSize
+      },
+      Typography: {
+        fontFamilyCode: tokens.typography.fontFamilyCode
+      },
+      Tag: {
+        borderRadiusSM: tokens.radii.tag
+      }
+    }
+  };
+  return config;
+}
+
+// src/config-provider.tsx
+import { ConfigProvider, App } from "antd";
+import { useMemo, useRef, createElement } from "react";
+function GtcxConfigProvider({
+  mode = "light",
+  density = "comfortable",
+  tokensOverride,
+  direction = "ltr",
+  locale,
+  children
+}) {
+  const overrideRef = useRef(tokensOverride);
+  const overrideJson = JSON.stringify(tokensOverride);
+  const prevJson = useRef(overrideJson);
+  if (overrideJson !== prevJson.current) {
+    overrideRef.current = tokensOverride;
+    prevJson.current = overrideJson;
+  }
+  const theme = useMemo(
+    () => createAntdTheme({ mode, density, tokensOverride: overrideRef.current }),
+    [mode, density, overrideJson]
+  );
+  return createElement(
+    ConfigProvider,
+    { theme, direction, locale },
+    createElement(App, null, children)
+  );
+}
+GtcxConfigProvider.displayName = "GtcxConfigProvider";
+
+// src/use-gtcx-theme.ts
+import { theme as antdTheme2 } from "antd";
+function useGtcxTheme() {
+  const { token } = antdTheme2.useToken();
+  return { token };
+}
+export {
+  GtcxConfigProvider,
+  createAntdTheme,
+  useGtcxTheme
+};

package/dist/platform-themes.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @module platform-themes
+ *
+ * Pre-built theme configs for each GTCX exchange platform.
+ * These compose platform-specific token overrides with the base
+ * semantic theme to produce ready-to-use Ant Design ThemeConfig objects.
+ */
+import { type Platform } from '@gtcx/tokens';
+import type { ThemeConfig } from 'antd';
+export interface PlatformTheme {
+    platform: Platform;
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        gradient: string;
+    };
+    spacing: {
+        density: string;
+        basePadding: number;
+        baseGap: number;
+    };
+}
+export declare const platformThemes: Record<Platform, PlatformTheme>;
+/** Get the platform theme descriptor for a given platform. */
+export declare const getPlatformTheme: (platform: Platform) => PlatformTheme;
+/**
+ * Generate an Ant Design theme config for a specific platform.
+ *
+ * Uses semantic token references instead of hardcoded values.
+ */
+export declare function getAntThemeForPlatform(platform: Platform): ThemeConfig;
+//# sourceMappingURL=platform-themes.d.ts.map

package/dist/platform-themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform-themes.d.ts","sourceRoot":"","sources":["../src/platform-themes.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAML,KAAK,QAAQ,EACd,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAExC,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,QAAQ,EAAE,aAAa,CAgB1D,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,gBAAgB,GAAI,UAAU,QAAQ,KAAG,aAAyC,CAAC;AAEhG;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAqBtE"}

package/dist/use-gtcx-theme.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @module use-gtcx-theme
+ *
+ * React hook for accessing the resolved Ant Design theme token
+ * within the GTCX context. Thin wrapper around `antd`'s `theme.useToken()`.
+ */
+import type { GlobalToken } from 'antd/es/theme/interface';
+/**
+ * Access the resolved Ant Design theme token from the nearest
+ * `GtcxConfigProvider` (or `ConfigProvider`).
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { token } = useGtcxTheme();
+ *   return <div style={{ color: token.colorPrimary }}>Themed</div>;
+ * }
+ * ```
+ */
+export declare function useGtcxTheme(): {
+    token: GlobalToken;
+};
+//# sourceMappingURL=use-gtcx-theme.d.ts.map

package/dist/use-gtcx-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-gtcx-theme.d.ts","sourceRoot":"","sources":["../src/use-gtcx-theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,IAAI;IAAE,KAAK,EAAE,WAAW,CAAA;CAAE,CAGrD"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@gtcx/theme",
+  "version": "0.1.0",
+  "description": "GTCX Ant Design theme integration — maps tokens to ThemeConfig, provides GtcxConfigProvider",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup && tsc --emitDeclarationOnly --declaration --outDir dist",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@gtcx/tokens": "workspace:*",
+    "antd": "^5.12.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}