@gtcx/tokens 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -1,3 +1,6 @@
+export { F as FiftyFourPlatformTokens, S as SemanticColorKey, a as SemanticColors, b as SemanticLayout, c as SemanticRadii, d as SemanticShadows, e as SemanticSpacing, f as SemanticSpacingKey, g as SemanticTokens, h as SemanticTypography, i as fiftyFourColors, j as fiftyFourPlatformTokens, k as fiftyFourRadii, l as fiftyFourShadows, s as semanticColors, m as semanticLayout, n as semanticRadii, o as semanticShadows, p as semanticSpacing, q as semanticTokens, r as semanticTypography } from './fifty-four-Z057XMFQ.mjs';
+export { generateCSSVariables } from './css.mjs';
+
 /**
  * @module primitives
  *
@@ -10,103 +13,135 @@
  */
 /** GTCX brand color palette. Each scale runs 50 (lightest) → 950 (darkest). */
 declare const colorPrimitives: {
-    /** GTCX brand primary — sky blue */
+    /** GTCX brand primary — Metronic blue (#1B84FF at 500) */
     readonly primary: {
-        readonly 50: "#f0f9ff";
-        readonly 100: "#e0f2fe";
-        readonly 200: "#bae6fd";
-        readonly 300: "#7dd3fc";
-        readonly 400: "#38bdf8";
-        readonly 500: "#0ea5e9";
-        readonly 600: "#0284c7";
-        readonly 700: "#0369a1";
-        readonly 800: "#075985";
-        readonly 900: "#0c4a6e";
-        readonly 950: "#082f49";
+        readonly 50: "#EFF5FF";
+        readonly 100: "#D6E6FF";
+        readonly 200: "#ADCAFF";
+        readonly 300: "#84A9FF";
+        readonly 400: "#5290FF";
+        readonly 500: "#1B84FF";
+        readonly 600: "#1270DC";
+        readonly 700: "#0A5CB8";
+        readonly 800: "#064794";
+        readonly 900: "#033370";
+        readonly 950: "#01214D";
     };
-    /** GTCX brand secondary — purple */
+    /** GTCX brand secondary — indigo */
     readonly secondary: {
-        readonly 50: "#faf5ff";
-        readonly 100: "#f3e8ff";
-        readonly 200: "#e9d5ff";
-        readonly 300: "#d8b4fe";
-        readonly 400: "#c084fc";
-        readonly 500: "#a855f7";
-        readonly 600: "#9333ea";
-        readonly 700: "#7c3aed";
-        readonly 800: "#6b21a8";
-        readonly 900: "#581c87";
-        readonly 950: "#3b0764";
+        readonly 50: "#eef4ff";
+        readonly 100: "#e0eaff";
+        readonly 200: "#c7d7fe";
+        readonly 300: "#a4bcfd";
+        readonly 400: "#8098f9";
+        readonly 500: "#6172f3";
+        readonly 600: "#444ce7";
+        readonly 700: "#3538cd";
+        readonly 800: "#2d31a6";
+        readonly 900: "#2d3282";
+        readonly 950: "#1f235b";
     };
-    /** Positive feedback, approvals, profit */
+    /** Positive feedback, approvals, profit — Metronic success (#17C653 at 500) */
     readonly success: {
-        readonly 50: "#f0fdf4";
-        readonly 100: "#dcfce7";
-        readonly 200: "#bbf7d0";
-        readonly 300: "#86efac";
-        readonly 400: "#4ade80";
-        readonly 500: "#22c55e";
-        readonly 600: "#16a34a";
-        readonly 700: "#15803d";
-        readonly 800: "#166534";
-        readonly 900: "#14532d";
-        readonly 950: "#052e16";
+        readonly 50: "#ECFDF1";
+        readonly 100: "#D1FAE1";
+        readonly 200: "#A3F5C3";
+        readonly 300: "#6DECA6";
+        readonly 400: "#3DD986";
+        readonly 500: "#17C653";
+        readonly 600: "#12A344";
+        readonly 700: "#0D7F35";
+        readonly 800: "#085F28";
+        readonly 900: "#044519";
+        readonly 950: "#02290F";
     };
-    /** Caution states, pending actions */
+    /** Caution states, pending actions — Metronic warning (#F6B100 at 500) */
     readonly warning: {
-        readonly 50: "#fffbeb";
-        readonly 100: "#fef3c7";
-        readonly 200: "#fde68a";
-        readonly 300: "#fcd34d";
-        readonly 400: "#fbbf24";
-        readonly 500: "#f59e0b";
-        readonly 600: "#d97706";
-        readonly 700: "#b45309";
-        readonly 800: "#92400e";
-        readonly 900: "#78350f";
-        readonly 950: "#451a03";
+        readonly 50: "#FFFBEB";
+        readonly 100: "#FEF3C7";
+        readonly 200: "#FDE68A";
+        readonly 300: "#FCD34D";
+        readonly 400: "#FBBF24";
+        readonly 500: "#F6B100";
+        readonly 600: "#D09200";
+        readonly 700: "#A37200";
+        readonly 800: "#7A5300";
+        readonly 900: "#563A00";
+        readonly 950: "#342300";
     };
-    /** Destructive actions, rejections, loss */
+    /** Destructive actions, rejections, loss — Metronic danger (#F8285A at 500) */
     readonly error: {
-        readonly 50: "#fef2f2";
-        readonly 100: "#fee2e2";
-        readonly 200: "#fecaca";
-        readonly 300: "#fca5a5";
-        readonly 400: "#f87171";
-        readonly 500: "#ef4444";
-        readonly 600: "#dc2626";
-        readonly 700: "#b91c1c";
-        readonly 800: "#991b1b";
-        readonly 900: "#7f1d1d";
-        readonly 950: "#450a0a";
+        readonly 50: "#FFF1F4";
+        readonly 100: "#FFE0E7";
+        readonly 200: "#FFC2D0";
+        readonly 300: "#FF99B3";
+        readonly 400: "#FF6089";
+        readonly 500: "#F8285A";
+        readonly 600: "#D4194A";
+        readonly 700: "#A80F37";
+        readonly 800: "#800A28";
+        readonly 900: "#60061D";
+        readonly 950: "#3D0312";
     };
-    /** Informational, links */
+    /** Informational — Metronic info (#7239EA at 500) */
     readonly info: {
-        readonly 50: "#eff6ff";
-        readonly 100: "#dbeafe";
-        readonly 200: "#bfdbfe";
-        readonly 300: "#93c5fd";
-        readonly 400: "#60a5fa";
-        readonly 500: "#3b82f6";
-        readonly 600: "#2563eb";
-        readonly 700: "#1d4ed8";
-        readonly 800: "#1e40af";
-        readonly 900: "#1e3a8a";
-        readonly 950: "#172554";
+        readonly 50: "#F4EFFE";
+        readonly 100: "#E9DFFC";
+        readonly 200: "#D3BFF9";
+        readonly 300: "#B894F5";
+        readonly 400: "#9866EF";
+        readonly 500: "#7239EA";
+        readonly 600: "#5B2CC5";
+        readonly 700: "#4621A0";
+        readonly 800: "#33177C";
+        readonly 900: "#230F58";
+        readonly 950: "#140836";
     };
-    /** Grays for text, backgrounds, borders */
+    /** Light mode grays — Metronic gray scale */
     readonly neutral: {
+        readonly 50: "#F9F9F9";
+        readonly 100: "#F1F1F4";
+        readonly 200: "#DBDFE9";
+        readonly 300: "#C4CADA";
+        readonly 400: "#99A1B7";
+        readonly 500: "#78829D";
+        readonly 600: "#5E6880";
+        readonly 700: "#4B5675";
+        readonly 800: "#252F4A";
+        readonly 900: "#071437";
+        readonly 950: "#030A25";
+    };
+    /** Dark mode grays — Metronic dark scale (purpose-built for dark surfaces) */
+    readonly neutralDark: {
+        readonly 25: "#F5F5F5";
+        readonly 50: "#CDCED1";
+        readonly 100: "#9899A3";
+        readonly 200: "#6D6F80";
+        readonly 300: "#636674";
+        readonly 400: "#565674";
+        readonly 500: "#383D50";
+        readonly 600: "#2D3142";
+        readonly 700: "#242731";
+        readonly 800: "#1E2129";
+        readonly 900: "#181C22";
+        readonly 950: "#13171E";
+    };
+    /**
+     * Zinc — Tailwind CSS neutral gray scale used by Metronic v9.4.x as its dark
+     * surface palette. Referenced by darkSemanticColors for layout parity.
+     */
+    readonly zinc: {
         readonly 50: "#fafafa";
-        readonly 100: "#f5f5f5";
-        readonly 200: "#e5e5e5";
-        readonly 300: "#d4d4d4";
-        readonly 400: "#a3a3a3";
-        readonly 500: "#737373";
-        readonly 600: "#525252";
-        readonly 700: "#404040";
-        readonly 800: "#262626";
-        readonly 900: "#171717";
-        readonly 950: "#0a0a0a";
+        readonly 100: "#f4f4f5";
+        readonly 200: "#e4e4e7";
+        readonly 300: "#d4d4d8";
+        readonly 400: "#a1a1aa";
+        readonly 500: "#71717a";
+        readonly 600: "#52525b";
+        readonly 700: "#3f3f46";
+        readonly 800: "#27272a";
+        readonly 900: "#18181b";
+        readonly 950: "#09090b";
     };
     readonly white: "#ffffff";
     readonly black: "#000000";
@@ -128,7 +163,7 @@ declare const spacingPrimitives: {
     readonly 24: 96;
     readonly 32: 128;
 };
-/** Font size scale in pixels. */
+/** Font size scale in pixels — Untitled UI v7.0 type scale. */
 declare const fontSizePrimitives: {
     readonly xs: 12;
     readonly sm: 14;
@@ -139,6 +174,8 @@ declare const fontSizePrimitives: {
     readonly '3xl': 30;
     readonly '4xl': 36;
     readonly '5xl': 48;
+    readonly '6xl': 60;
+    readonly '7xl': 72;
 };
 /** Font weight scale. Maps named weights to numeric values. */
 declare const fontWeightPrimitives: {
@@ -165,13 +202,18 @@ declare const fontFamilyPrimitives: {
     readonly mono: "JetBrains Mono, Fira Code, Consolas, monospace";
     readonly serif: "Georgia, 'Times New Roman', serif";
 };
-/** Border radius scale in pixels. */
+/** Border radius scale in pixels — Untitled UI v7.0 radius scale. */
 declare const borderRadiusPrimitives: {
     readonly none: 0;
-    readonly sm: 2;
-    readonly md: 4;
-    readonly lg: 8;
+    readonly xxs: 2;
+    readonly xs: 4;
+    readonly sm: 6;
+    readonly md: 8;
+    readonly lg: 10;
     readonly xl: 12;
+    readonly '2xl': 16;
+    readonly '3xl': 20;
+    readonly '4xl': 24;
     readonly full: 9999;
 };
 /** Box shadow scale using CSS shadow syntax. */
@@ -225,7 +267,7 @@ declare const focusPrimitives: {
     /** Ring offset from element edge in pixels */
     readonly ringOffset: 2;
     /** Ring color — uses primary brand color */
-    readonly ringColor: "#0ea5e9";
+    readonly ringColor: "#1B84FF";
     /** Ring border-style */
     readonly ringStyle: "solid";
 };
@@ -268,573 +310,6 @@ type ColorScaleKey = Exclude<keyof typeof colorPrimitives, 'white' | 'black'>;
 /** Union of color shade steps (50, 100, ... 950). */
 type ColorShade = keyof (typeof colorPrimitives)['primary'];
 
-/**
- * @module semantic
- *
- * Semantic design tokens — named for their purpose, not their value.
- * Components should consume these tokens exclusively; never reference
- * primitives directly.
- *
- * Each category is exported individually so consumers can import only
- * what they need:
- *
- * ```ts
- * import { semanticColors, semanticTypography } from '@gtcx/tokens';
- * ```
- *
- * The combined `semanticTokens` object is also exported for backward
- * compatibility with code that imports the entire token set.
- */
-/**
- * Semantic color tokens.
- *
- * Every value traces back to a {@link colorPrimitives} value — no orphan
- * hex strings. Dark mode overrides live in {@link ../dark | darkSemanticColors}.
- */
-declare const semanticColors: {
-    /** Primary brand action color */
-    readonly primary: "#0ea5e9";
-    /** Primary hover state */
-    readonly primaryHover: "#0284c7";
-    /** Primary active/pressed state */
-    readonly primaryActive: "#0369a1";
-    /** Primary tinted background (selected rows, badges) */
-    readonly primaryBg: "#f0f9ff";
-    /** Secondary brand color */
-    readonly secondary: "#a855f7";
-    /** Secondary hover state */
-    readonly secondaryHover: "#9333ea";
-    /** Positive outcome (approvals, passing checks) */
-    readonly success: "#22c55e";
-    /** Caution state (pending review, warnings) */
-    readonly warning: "#f59e0b";
-    /** Destructive/failure state */
-    readonly error: "#ef4444";
-    /** Informational state */
-    readonly info: "#3b82f6";
-    /** Financial gain */
-    readonly profit: "#22c55e";
-    /** Financial loss */
-    readonly loss: "#ef4444";
-    /** Compliance approved */
-    readonly approved: "#16a34a";
-    /** Compliance pending */
-    readonly pending: "#d97706";
-    /** Compliance rejected */
-    readonly rejected: "#dc2626";
-    /** Security verified */
-    readonly secure: "#16a34a";
-    /** Security compromised */
-    readonly insecure: "#dc2626";
-    /** Primary body text */
-    readonly textPrimary: "#171717";
-    /** Secondary/supporting text */
-    readonly textSecondary: "#525252";
-    /** Tertiary/label text */
-    readonly textTertiary: "#737373";
-    /** Muted/placeholder text */
-    readonly textMuted: "#a3a3a3";
-    /** Text on dark backgrounds */
-    readonly textInverse: "#fafafa";
-    /** Page-level background */
-    readonly bgPage: "#fafafa";
-    /** Card/surface background */
-    readonly bgSurface: "#ffffff";
-    /** Surface hover state */
-    readonly bgSurfaceHover: "#f5f5f5";
-    /** Tertiary surface (nested cards, wells) */
-    readonly bgSurfaceTertiary: "#e5e5e5";
-    /** Inverse background (dark sections) */
-    readonly bgInverse: "#171717";
-    /** Sidebar background */
-    readonly bgSidebar: "#ffffff";
-    /** Header background */
-    readonly bgHeader: "#ffffff";
-    /** Default border */
-    readonly border: "#e5e5e5";
-    /** Light/subtle border */
-    readonly borderLight: "#f5f5f5";
-    /** Emphasized border */
-    readonly borderSecondary: "#d4d4d4";
-    /** Focus ring border */
-    readonly borderFocus: "#0ea5e9";
-    /** Default link color */
-    readonly link: "#0284c7";
-    /** Link hover state */
-    readonly linkHover: "#0369a1";
-};
-/**
- * Semantic spacing tokens.
- *
- * Page-level gutters, component-internal spacing, and layout dimensions.
- * All values trace to {@link spacingPrimitives}.
- */
-declare const semanticSpacing: {
-    /** Horizontal page gutter */
-    readonly pageGutter: 24;
-    /** Internal card padding */
-    readonly cardPadding: 16;
-    /** Gap between page sections */
-    readonly sectionGap: 24;
-    /** Gap between sibling components */
-    readonly componentGap: 12;
-    /** Inline element gap (icon + label) */
-    readonly inlineGap: 8;
-    /** Per-component spacing presets */
-    readonly component: {
-        readonly button: {
-            readonly paddingX: 16;
-            readonly paddingY: 8;
-            readonly gap: 8;
-        };
-        readonly input: {
-            readonly paddingX: 12;
-            readonly paddingY: 8;
-        };
-        readonly card: {
-            readonly padding: 24;
-            readonly gap: 16;
-        };
-        readonly form: {
-            readonly fieldGap: 16;
-            readonly sectionGap: 32;
-            readonly labelGap: 8;
-        };
-        readonly modal: {
-            readonly padding: 24;
-            readonly gap: 16;
-        };
-        readonly table: {
-            readonly cellPadding: 16;
-            readonly headerPadding: 16;
-        };
-    };
-    /** Layout-level spacing presets */
-    readonly layout: {
-        readonly container: {
-            readonly paddingX: 16;
-            readonly paddingY: 24;
-        };
-        readonly section: {
-            readonly marginY: 48;
-            readonly gap: 32;
-        };
-        readonly page: {
-            readonly marginY: 64;
-            readonly paddingX: 24;
-        };
-    };
-};
-/**
- * Semantic typography tokens.
- *
- * Font families, display/heading/body/button type scales.
- * All values trace to font-* primitive scales.
- */
-declare const semanticTypography: {
-    /** Default sans-serif font stack */
-    readonly fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-    /** Monospace font stack for code */
-    readonly fontFamilyCode: "JetBrains Mono, Fira Code, Consolas, monospace";
-    /** Serif font stack for editorial content */
-    readonly fontFamilySerif: "Georgia, 'Times New Roman', serif";
-    /** Display type scale — hero sections, feature numbers */
-    readonly display: {
-        readonly lg: {
-            readonly fontSize: 48;
-            readonly fontWeight: 700;
-            readonly lineHeight: 1.2;
-            readonly letterSpacing: "-0.025em";
-        };
-        readonly md: {
-            readonly fontSize: 36;
-            readonly fontWeight: 700;
-            readonly lineHeight: 1.2;
-            readonly letterSpacing: "0em";
-        };
-        readonly sm: {
-            readonly fontSize: 30;
-            readonly fontWeight: 600;
-            readonly lineHeight: 1.2;
-            readonly letterSpacing: "0em";
-        };
-    };
-    /** Heading type scale — page/section/card headings */
-    readonly heading: {
-        readonly h1: {
-            readonly fontSize: 30;
-            readonly fontWeight: 700;
-            readonly lineHeight: 1.2;
-        };
-        readonly h2: {
-            readonly fontSize: 24;
-            readonly fontWeight: 600;
-            readonly lineHeight: 1.2;
-        };
-        readonly h3: {
-            readonly fontSize: 20;
-            readonly fontWeight: 600;
-            readonly lineHeight: 1.5;
-        };
-        readonly h4: {
-            readonly fontSize: 18;
-            readonly fontWeight: 500;
-            readonly lineHeight: 1.5;
-        };
-    };
-    /** Body type scale — paragraphs, descriptions */
-    readonly body: {
-        readonly lg: {
-            readonly fontSize: 18;
-            readonly fontWeight: 400;
-            readonly lineHeight: 1.7;
-        };
-        readonly md: {
-            readonly fontSize: 16;
-            readonly fontWeight: 400;
-            readonly lineHeight: 1.5;
-        };
-        readonly sm: {
-            readonly fontSize: 14;
-            readonly fontWeight: 400;
-            readonly lineHeight: 1.5;
-        };
-    };
-    /** Caption — footnotes, timestamps, fine print */
-    readonly caption: {
-        readonly fontSize: 12;
-        readonly fontWeight: 400;
-        readonly lineHeight: 1.5;
-    };
-    /** Button label type scale */
-    readonly button: {
-        readonly lg: {
-            readonly fontSize: 18;
-            readonly fontWeight: 500;
-            readonly lineHeight: 1.5;
-        };
-        readonly md: {
-            readonly fontSize: 16;
-            readonly fontWeight: 500;
-            readonly lineHeight: 1.5;
-        };
-        readonly sm: {
-            readonly fontSize: 14;
-            readonly fontWeight: 500;
-            readonly lineHeight: 1.5;
-        };
-    };
-};
-/** Semantic border-radius tokens for component shapes. */
-declare const semanticRadii: {
-    /** Default component radius */
-    readonly component: 4;
-    /** Card/panel radius */
-    readonly card: 8;
-    /** Button radius */
-    readonly button: 4;
-    /** Input/select radius */
-    readonly input: 4;
-    /** Tag/badge radius */
-    readonly tag: 2;
-    /** Avatar — fully round */
-    readonly avatar: 9999;
-};
-/** Semantic shadow tokens for elevation. */
-declare const semanticShadows: {
-    /** Card/panel elevation */
-    readonly card: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-    /** Dropdown/popover elevation */
-    readonly dropdown: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    /** Modal/dialog elevation */
-    readonly modal: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-};
-/** Semantic layout dimension tokens (in pixels). */
-declare const semanticLayout: {
-    /** Sidebar expanded width */
-    readonly sidebarWidth: 240;
-    /** Sidebar collapsed width */
-    readonly sidebarCollapsedWidth: 72;
-    /** Top header height */
-    readonly headerHeight: 56;
-    /** Maximum content area width */
-    readonly contentMaxWidth: 1440;
-};
-/**
- * Combined semantic token object.
- *
- * @deprecated Prefer the named exports (`semanticColors`, `semanticSpacing`,
- * etc.) for better tree-shaking and clearer imports. This combined object
- * is preserved for backward compatibility only.
- */
-declare const semanticTokens: {
-    readonly colors: {
-        /** Primary brand action color */
-        readonly primary: "#0ea5e9";
-        /** Primary hover state */
-        readonly primaryHover: "#0284c7";
-        /** Primary active/pressed state */
-        readonly primaryActive: "#0369a1";
-        /** Primary tinted background (selected rows, badges) */
-        readonly primaryBg: "#f0f9ff";
-        /** Secondary brand color */
-        readonly secondary: "#a855f7";
-        /** Secondary hover state */
-        readonly secondaryHover: "#9333ea";
-        /** Positive outcome (approvals, passing checks) */
-        readonly success: "#22c55e";
-        /** Caution state (pending review, warnings) */
-        readonly warning: "#f59e0b";
-        /** Destructive/failure state */
-        readonly error: "#ef4444";
-        /** Informational state */
-        readonly info: "#3b82f6";
-        /** Financial gain */
-        readonly profit: "#22c55e";
-        /** Financial loss */
-        readonly loss: "#ef4444";
-        /** Compliance approved */
-        readonly approved: "#16a34a";
-        /** Compliance pending */
-        readonly pending: "#d97706";
-        /** Compliance rejected */
-        readonly rejected: "#dc2626";
-        /** Security verified */
-        readonly secure: "#16a34a";
-        /** Security compromised */
-        readonly insecure: "#dc2626";
-        /** Primary body text */
-        readonly textPrimary: "#171717";
-        /** Secondary/supporting text */
-        readonly textSecondary: "#525252";
-        /** Tertiary/label text */
-        readonly textTertiary: "#737373";
-        /** Muted/placeholder text */
-        readonly textMuted: "#a3a3a3";
-        /** Text on dark backgrounds */
-        readonly textInverse: "#fafafa";
-        /** Page-level background */
-        readonly bgPage: "#fafafa";
-        /** Card/surface background */
-        readonly bgSurface: "#ffffff";
-        /** Surface hover state */
-        readonly bgSurfaceHover: "#f5f5f5";
-        /** Tertiary surface (nested cards, wells) */
-        readonly bgSurfaceTertiary: "#e5e5e5";
-        /** Inverse background (dark sections) */
-        readonly bgInverse: "#171717";
-        /** Sidebar background */
-        readonly bgSidebar: "#ffffff";
-        /** Header background */
-        readonly bgHeader: "#ffffff";
-        /** Default border */
-        readonly border: "#e5e5e5";
-        /** Light/subtle border */
-        readonly borderLight: "#f5f5f5";
-        /** Emphasized border */
-        readonly borderSecondary: "#d4d4d4";
-        /** Focus ring border */
-        readonly borderFocus: "#0ea5e9";
-        /** Default link color */
-        readonly link: "#0284c7";
-        /** Link hover state */
-        readonly linkHover: "#0369a1";
-    };
-    readonly spacing: {
-        /** Horizontal page gutter */
-        readonly pageGutter: 24;
-        /** Internal card padding */
-        readonly cardPadding: 16;
-        /** Gap between page sections */
-        readonly sectionGap: 24;
-        /** Gap between sibling components */
-        readonly componentGap: 12;
-        /** Inline element gap (icon + label) */
-        readonly inlineGap: 8;
-        /** Per-component spacing presets */
-        readonly component: {
-            readonly button: {
-                readonly paddingX: 16;
-                readonly paddingY: 8;
-                readonly gap: 8;
-            };
-            readonly input: {
-                readonly paddingX: 12;
-                readonly paddingY: 8;
-            };
-            readonly card: {
-                readonly padding: 24;
-                readonly gap: 16;
-            };
-            readonly form: {
-                readonly fieldGap: 16;
-                readonly sectionGap: 32;
-                readonly labelGap: 8;
-            };
-            readonly modal: {
-                readonly padding: 24;
-                readonly gap: 16;
-            };
-            readonly table: {
-                readonly cellPadding: 16;
-                readonly headerPadding: 16;
-            };
-        };
-        /** Layout-level spacing presets */
-        readonly layout: {
-            readonly container: {
-                readonly paddingX: 16;
-                readonly paddingY: 24;
-            };
-            readonly section: {
-                readonly marginY: 48;
-                readonly gap: 32;
-            };
-            readonly page: {
-                readonly marginY: 64;
-                readonly paddingX: 24;
-            };
-        };
-    };
-    readonly typography: {
-        /** Default sans-serif font stack */
-        readonly fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-        /** Monospace font stack for code */
-        readonly fontFamilyCode: "JetBrains Mono, Fira Code, Consolas, monospace";
-        /** Serif font stack for editorial content */
-        readonly fontFamilySerif: "Georgia, 'Times New Roman', serif";
-        /** Display type scale — hero sections, feature numbers */
-        readonly display: {
-            readonly lg: {
-                readonly fontSize: 48;
-                readonly fontWeight: 700;
-                readonly lineHeight: 1.2;
-                readonly letterSpacing: "-0.025em";
-            };
-            readonly md: {
-                readonly fontSize: 36;
-                readonly fontWeight: 700;
-                readonly lineHeight: 1.2;
-                readonly letterSpacing: "0em";
-            };
-            readonly sm: {
-                readonly fontSize: 30;
-                readonly fontWeight: 600;
-                readonly lineHeight: 1.2;
-                readonly letterSpacing: "0em";
-            };
-        };
-        /** Heading type scale — page/section/card headings */
-        readonly heading: {
-            readonly h1: {
-                readonly fontSize: 30;
-                readonly fontWeight: 700;
-                readonly lineHeight: 1.2;
-            };
-            readonly h2: {
-                readonly fontSize: 24;
-                readonly fontWeight: 600;
-                readonly lineHeight: 1.2;
-            };
-            readonly h3: {
-                readonly fontSize: 20;
-                readonly fontWeight: 600;
-                readonly lineHeight: 1.5;
-            };
-            readonly h4: {
-                readonly fontSize: 18;
-                readonly fontWeight: 500;
-                readonly lineHeight: 1.5;
-            };
-        };
-        /** Body type scale — paragraphs, descriptions */
-        readonly body: {
-            readonly lg: {
-                readonly fontSize: 18;
-                readonly fontWeight: 400;
-                readonly lineHeight: 1.7;
-            };
-            readonly md: {
-                readonly fontSize: 16;
-                readonly fontWeight: 400;
-                readonly lineHeight: 1.5;
-            };
-            readonly sm: {
-                readonly fontSize: 14;
-                readonly fontWeight: 400;
-                readonly lineHeight: 1.5;
-            };
-        };
-        /** Caption — footnotes, timestamps, fine print */
-        readonly caption: {
-            readonly fontSize: 12;
-            readonly fontWeight: 400;
-            readonly lineHeight: 1.5;
-        };
-        /** Button label type scale */
-        readonly button: {
-            readonly lg: {
-                readonly fontSize: 18;
-                readonly fontWeight: 500;
-                readonly lineHeight: 1.5;
-            };
-            readonly md: {
-                readonly fontSize: 16;
-                readonly fontWeight: 500;
-                readonly lineHeight: 1.5;
-            };
-            readonly sm: {
-                readonly fontSize: 14;
-                readonly fontWeight: 500;
-                readonly lineHeight: 1.5;
-            };
-        };
-    };
-    readonly radii: {
-        /** Default component radius */
-        readonly component: 4;
-        /** Card/panel radius */
-        readonly card: 8;
-        /** Button radius */
-        readonly button: 4;
-        /** Input/select radius */
-        readonly input: 4;
-        /** Tag/badge radius */
-        readonly tag: 2;
-        /** Avatar — fully round */
-        readonly avatar: 9999;
-    };
-    readonly shadows: {
-        /** Card/panel elevation */
-        readonly card: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-        /** Dropdown/popover elevation */
-        readonly dropdown: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-        /** Modal/dialog elevation */
-        readonly modal: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-    };
-    readonly layout: {
-        /** Sidebar expanded width */
-        readonly sidebarWidth: 240;
-        /** Sidebar collapsed width */
-        readonly sidebarCollapsedWidth: 72;
-        /** Top header height */
-        readonly headerHeight: 56;
-        /** Maximum content area width */
-        readonly contentMaxWidth: 1440;
-    };
-};
-type SemanticColors = typeof semanticColors;
-type SemanticSpacing = typeof semanticSpacing;
-type SemanticTypography = typeof semanticTypography;
-type SemanticRadii = typeof semanticRadii;
-type SemanticShadows = typeof semanticShadows;
-type SemanticLayout = typeof semanticLayout;
-type SemanticTokens = typeof semanticTokens;
-/** Union of all semantic color keys. */
-type SemanticColorKey = keyof typeof semanticColors;
-/** Union of top-level semantic spacing keys. */
-type SemanticSpacingKey = keyof typeof semanticSpacing;
-
 /**
  * @module dark
  *
@@ -852,45 +327,47 @@ type SemanticSpacingKey = keyof typeof semanticSpacing;
 /**
  * Dark mode overrides for {@link semanticColors}.
  *
+ * Surface colors use the zinc scale to match Metronic v9.4.x dark mode.
+ * Brand and feedback colors remain on the GTCX primitive scales.
  * Structure intentionally mirrors `semanticColors` so the theme engine
  * can validate completeness at build time.
  */
 declare const darkSemanticColors: {
-    readonly primary: "#38bdf8";
-    readonly primaryHover: "#7dd3fc";
-    readonly primaryActive: "#0ea5e9";
-    readonly primaryBg: "#082f49";
-    readonly secondary: "#c084fc";
-    readonly secondaryHover: "#d8b4fe";
-    readonly success: "#4ade80";
-    readonly warning: "#fbbf24";
-    readonly error: "#f87171";
-    readonly info: "#60a5fa";
-    readonly profit: "#4ade80";
-    readonly loss: "#f87171";
-    readonly approved: "#4ade80";
-    readonly pending: "#fbbf24";
-    readonly rejected: "#f87171";
-    readonly secure: "#4ade80";
-    readonly insecure: "#f87171";
+    readonly primary: "#1B84FF";
+    readonly primaryHover: "#5290FF";
+    readonly primaryActive: "#1270DC";
+    readonly primaryBg: "#01214D";
+    readonly secondary: "#6172f3";
+    readonly secondaryHover: "#8098f9";
+    readonly success: "#3DD986";
+    readonly warning: "#FBBF24";
+    readonly error: "#FF6089";
+    readonly info: "#9866EF";
+    readonly profit: "#3DD986";
+    readonly loss: "#FF6089";
+    readonly approved: "#3DD986";
+    readonly pending: "#FBBF24";
+    readonly rejected: "#FF6089";
+    readonly secure: "#3DD986";
+    readonly insecure: "#FF6089";
     readonly textPrimary: "#fafafa";
-    readonly textSecondary: "#d4d4d4";
-    readonly textTertiary: "#a3a3a3";
-    readonly textMuted: "#737373";
-    readonly textInverse: "#171717";
-    readonly bgPage: "#0a0a0a";
-    readonly bgSurface: "#171717";
-    readonly bgSurfaceHover: "#262626";
-    readonly bgSurfaceTertiary: "#404040";
-    readonly bgInverse: "#fafafa";
-    readonly bgSidebar: "#171717";
-    readonly bgHeader: "#171717";
-    readonly border: "#404040";
-    readonly borderLight: "#262626";
-    readonly borderSecondary: "#525252";
-    readonly borderFocus: "#38bdf8";
-    readonly link: "#38bdf8";
-    readonly linkHover: "#7dd3fc";
+    readonly textSecondary: "#d4d4d8";
+    readonly textTertiary: "#a1a1aa";
+    readonly textMuted: "#71717a";
+    readonly textInverse: "#071437";
+    readonly bgPage: "#09090b";
+    readonly bgSurface: "#18181b";
+    readonly bgSurfaceHover: "#27272a";
+    readonly bgSurfaceTertiary: "#3f3f46";
+    readonly bgInverse: "#ffffff";
+    readonly bgSidebar: "#18181b";
+    readonly bgHeader: "#09090b";
+    readonly border: "#3f3f46";
+    readonly borderLight: "#27272a";
+    readonly borderSecondary: "#52525b";
+    readonly borderFocus: "#1B84FF";
+    readonly link: "#1B84FF";
+    readonly linkHover: "#5290FF";
 };
 /**
  * Legacy dark colors export.
@@ -901,19 +378,140 @@ declare const darkSemanticColors: {
 declare const darkColors: {
     readonly text: {
         readonly primary: "#fafafa";
-        readonly secondary: "#d4d4d4";
-        readonly tertiary: "#a3a3a3";
+        readonly secondary: "#d4d4d8";
+        readonly tertiary: "#a1a1aa";
     };
     readonly background: {
-        readonly primary: "#0a0a0a";
-        readonly secondary: "#171717";
-        readonly tertiary: "#404040";
+        readonly primary: "#09090b";
+        readonly secondary: "#18181b";
+        readonly tertiary: "#3f3f46";
     };
     readonly border: {
-        readonly primary: "#404040";
-        readonly secondary: "#525252";
+        readonly primary: "#3f3f46";
+        readonly secondary: "#52525b";
     };
 };
 type DarkSemanticColors = typeof darkSemanticColors;
 
-export { type BorderRadiusPrimitives, type BreakpointKey, type BreakpointPrimitives, type ColorPrimitives, type ColorScaleKey, type ColorShade, type DarkSemanticColors, type FocusPrimitives, type FontFamilyPrimitives, type FontSizePrimitives, type FontWeightPrimitives, type LetterSpacingPrimitives, type LineHeightPrimitives, type MotionPrimitives, type OpacityPrimitives, type SemanticColorKey, type SemanticColors, type SemanticLayout, type SemanticRadii, type SemanticShadows, type SemanticSpacing, type SemanticSpacingKey, type SemanticTokens, type SemanticTypography, type ShadowPrimitives, type SpacingPrimitives, type TransitionPrimitives, type ZIndexPrimitives, borderRadiusPrimitives, breakpointPrimitives, colorPrimitives, darkColors, darkSemanticColors, focusPrimitives, fontFamilyPrimitives, fontSizePrimitives, fontWeightPrimitives, letterSpacingPrimitives, lineHeightPrimitives, motionPrimitives, opacityPrimitives, semanticColors, semanticLayout, semanticRadii, semanticShadows, semanticSpacing, semanticTokens, semanticTypography, shadowPrimitives, spacingPrimitives, transitionPrimitives, zIndexPrimitives };
+/**
+ * @module theme
+ *
+ * Theme factory for generating CSS custom properties from token overrides.
+ * Bridges @gtcx/tokens primitives to the Metronic/Tailwind v4 CSS variable
+ * system used by @gtcx/ui components.
+ *
+ * Usage:
+ * ```ts
+ * import { createTheme, brands } from '@gtcx/tokens';
+ *
+ * // Default GTCX theme
+ * const css = createTheme();
+ *
+ * // Brand variant
+ * const agxCss = createTheme(brands.agx);
+ *
+ * // Custom theme
+ * const custom = createTheme({ primary: '#FF6600' });
+ * ```
+ */
+interface BrandConfig {
+    name: string;
+    primary: string;
+    primaryForeground?: string;
+    secondary?: string;
+    secondaryForeground?: string;
+    accent?: string;
+    accentForeground?: string;
+    destructive?: string;
+    chart1?: string;
+    chart2?: string;
+    chart3?: string;
+    chart4?: string;
+    chart5?: string;
+}
+/** GTCX ecosystem brand palettes. */
+declare const brands: {
+    readonly gtcx: {
+        readonly name: "GTCX";
+        readonly primary: "#1B84FF";
+        readonly chart1: "#1B84FF";
+        readonly chart2: "#17C653";
+        readonly chart3: "#F6B100";
+        readonly chart4: "#F8285A";
+        readonly chart5: "#7239EA";
+    };
+    readonly agx: {
+        readonly name: "AGX";
+        readonly primary: "#C5A028";
+        readonly chart1: "#C5A028";
+        readonly chart2: "#8B7020";
+        readonly chart3: "#E5C33C";
+        readonly chart4: "#F8285A";
+        readonly chart5: "#A08620";
+    };
+    readonly crx: {
+        readonly name: "CRX";
+        readonly primary: "#00B894";
+        readonly chart1: "#00B894";
+        readonly chart2: "#00A383";
+        readonly chart3: "#55D6B8";
+        readonly chart4: "#F8285A";
+        readonly chart5: "#009B77";
+    };
+    readonly sgx: {
+        readonly name: "SGX";
+        readonly primary: "#6C5CE7";
+        readonly chart1: "#6C5CE7";
+        readonly chart2: "#5A4BD1";
+        readonly chart3: "#8E7FF0";
+        readonly chart4: "#F8285A";
+        readonly chart5: "#4834D4";
+    };
+    readonly pathways: {
+        readonly name: "Pathways";
+        readonly primary: "#0984E3";
+        readonly chart1: "#0984E3";
+        readonly chart2: "#0773C5";
+        readonly chart3: "#3DA4F0";
+        readonly chart4: "#F8285A";
+        readonly chart5: "#0660A7";
+    };
+};
+type BrandKey = keyof typeof brands;
+interface ThemeOptions {
+    /** Brand primary color — overrides --primary and --ring */
+    primary?: string;
+    /** Foreground for primary backgrounds */
+    primaryForeground?: string;
+    /** Destructive/error color */
+    destructive?: string;
+    /** Chart color overrides */
+    chart1?: string;
+    chart2?: string;
+    chart3?: string;
+    chart4?: string;
+    chart5?: string;
+    /** Border radius base value */
+    radius?: string;
+}
+/**
+ * Generate CSS custom property declarations for a theme.
+ *
+ * Returns an object of CSS variable key-value pairs suitable for
+ * injection into `:root` or a `style` attribute.
+ *
+ * @param options - Brand config or custom overrides. Omit for Metronic defaults.
+ */
+declare function createTheme(options?: ThemeOptions | BrandConfig): {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+};
+/**
+ * Generate a CSS string from theme variables.
+ *
+ * @param options - Brand config or custom overrides.
+ * @returns CSS string with :root and .dark selectors.
+ */
+declare function createThemeCSS(options?: ThemeOptions | BrandConfig): string;
+
+export { type BorderRadiusPrimitives, type BrandConfig, type BrandKey, type BreakpointKey, type BreakpointPrimitives, type ColorPrimitives, type ColorScaleKey, type ColorShade, type DarkSemanticColors, type FocusPrimitives, type FontFamilyPrimitives, type FontSizePrimitives, type FontWeightPrimitives, type LetterSpacingPrimitives, type LineHeightPrimitives, type MotionPrimitives, type OpacityPrimitives, type ShadowPrimitives, type SpacingPrimitives, type ThemeOptions, type TransitionPrimitives, type ZIndexPrimitives, borderRadiusPrimitives, brands, breakpointPrimitives, colorPrimitives, createTheme, createThemeCSS, darkColors, darkSemanticColors, focusPrimitives, fontFamilyPrimitives, fontSizePrimitives, fontWeightPrimitives, letterSpacingPrimitives, lineHeightPrimitives, motionPrimitives, opacityPrimitives, shadowPrimitives, spacingPrimitives, transitionPrimitives, zIndexPrimitives };