@gtcx/tokens 0.1.0 → 0.2.0

package/dist/fifty-four-Z057XMFQ.d.mts

@@ -0,0 +1,688 @@
+/**
+ * @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: "#1B84FF";
+    /** Primary hover state */
+    readonly primaryHover: "#1270DC";
+    /** Primary active/pressed state */
+    readonly primaryActive: "#0A5CB8";
+    /** Primary tinted background (selected rows, badges) */
+    readonly primaryBg: "#EFF5FF";
+    /** Secondary brand color */
+    readonly secondary: "#6172f3";
+    /** Secondary hover state */
+    readonly secondaryHover: "#444ce7";
+    /** Positive outcome (approvals, passing checks) */
+    readonly success: "#17C653";
+    /** Caution state (pending review, warnings) */
+    readonly warning: "#F6B100";
+    /** Destructive/failure state */
+    readonly error: "#F8285A";
+    /** Informational state */
+    readonly info: "#7239EA";
+    /** Financial gain */
+    readonly profit: "#17C653";
+    /** Financial loss */
+    readonly loss: "#F8285A";
+    /** Compliance approved */
+    readonly approved: "#12A344";
+    /** Compliance pending */
+    readonly pending: "#D09200";
+    /** Compliance rejected */
+    readonly rejected: "#D4194A";
+    /** Security verified */
+    readonly secure: "#12A344";
+    /** Security compromised */
+    readonly insecure: "#D4194A";
+    /** Primary body text */
+    readonly textPrimary: "#071437";
+    /** Secondary/supporting text */
+    readonly textSecondary: "#5E6880";
+    /** Tertiary/label text */
+    readonly textTertiary: "#78829D";
+    /** Muted/placeholder text */
+    readonly textMuted: "#99A1B7";
+    /** Text on dark backgrounds */
+    readonly textInverse: "#F9F9F9";
+    /** Page-level background */
+    readonly bgPage: "#F9F9F9";
+    /** Card/surface background */
+    readonly bgSurface: "#ffffff";
+    /** Surface hover state */
+    readonly bgSurfaceHover: "#F1F1F4";
+    /** Tertiary surface (nested cards, wells) */
+    readonly bgSurfaceTertiary: "#DBDFE9";
+    /** Inverse background (dark sections) */
+    readonly bgInverse: "#071437";
+    /** Sidebar background */
+    readonly bgSidebar: "#ffffff";
+    /** Header background */
+    readonly bgHeader: "#ffffff";
+    /** Default border */
+    readonly border: "#DBDFE9";
+    /** Light/subtle border */
+    readonly borderLight: "#F1F1F4";
+    /** Emphasized border */
+    readonly borderSecondary: "#C4CADA";
+    /** Focus ring border */
+    readonly borderFocus: "#1B84FF";
+    /** Default link color */
+    readonly link: "#1270DC";
+    /** Link hover state */
+    readonly linkHover: "#0A5CB8";
+};
+/**
+ * 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 — Untitled UI v7.0 exact values */
+    readonly display: {
+        readonly '2xl': {
+            readonly fontSize: 72;
+            readonly fontWeight: 600;
+            readonly lineHeight: "90px";
+            readonly letterSpacing: "-0.02em";
+        };
+        readonly xl: {
+            readonly fontSize: 60;
+            readonly fontWeight: 600;
+            readonly lineHeight: "72px";
+            readonly letterSpacing: "-0.02em";
+        };
+        readonly lg: {
+            readonly fontSize: 48;
+            readonly fontWeight: 600;
+            readonly lineHeight: "60px";
+            readonly letterSpacing: "-0.02em";
+        };
+        readonly md: {
+            readonly fontSize: 36;
+            readonly fontWeight: 600;
+            readonly lineHeight: "44px";
+            readonly letterSpacing: "-0.02em";
+        };
+        readonly sm: {
+            readonly fontSize: 30;
+            readonly fontWeight: 600;
+            readonly lineHeight: "38px";
+            readonly letterSpacing: "0em";
+        };
+        readonly xs: {
+            readonly fontSize: 24;
+            readonly fontWeight: 600;
+            readonly lineHeight: "32px";
+            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 — Untitled UI v7.0 exact values */
+    readonly body: {
+        readonly lg: {
+            readonly fontSize: 18;
+            readonly fontWeight: 400;
+            readonly lineHeight: "28px";
+        };
+        readonly md: {
+            readonly fontSize: 16;
+            readonly fontWeight: 400;
+            readonly lineHeight: "24px";
+        };
+        readonly sm: {
+            readonly fontSize: 14;
+            readonly fontWeight: 400;
+            readonly lineHeight: "20px";
+        };
+    };
+    /** Caption — footnotes, timestamps, fine print */
+    readonly caption: {
+        readonly fontSize: 12;
+        readonly fontWeight: 400;
+        readonly lineHeight: "18px";
+    };
+    /** 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 — Untitled UI v7.0 defaults. */
+declare const semanticRadii: {
+    /** Default component radius — 8px (Untitled UI md) */
+    readonly component: 8;
+    /** Card/panel radius — 12px (Untitled UI xl) */
+    readonly card: 12;
+    /** Button radius — 8px (Untitled UI md) */
+    readonly button: 8;
+    /** Input/select radius — 8px (Untitled UI md) */
+    readonly input: 8;
+    /** Tag/badge radius — 4px (Untitled UI xs) */
+    readonly tag: 4;
+    /** 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 — Metronic: 280px */
+    readonly sidebarWidth: 280;
+    /** Sidebar collapsed width */
+    readonly sidebarCollapsedWidth: 72;
+    /** Top header height — Metronic: 70px */
+    readonly headerHeight: 70;
+    /** 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: "#1B84FF";
+        /** Primary hover state */
+        readonly primaryHover: "#1270DC";
+        /** Primary active/pressed state */
+        readonly primaryActive: "#0A5CB8";
+        /** Primary tinted background (selected rows, badges) */
+        readonly primaryBg: "#EFF5FF";
+        /** Secondary brand color */
+        readonly secondary: "#6172f3";
+        /** Secondary hover state */
+        readonly secondaryHover: "#444ce7";
+        /** Positive outcome (approvals, passing checks) */
+        readonly success: "#17C653";
+        /** Caution state (pending review, warnings) */
+        readonly warning: "#F6B100";
+        /** Destructive/failure state */
+        readonly error: "#F8285A";
+        /** Informational state */
+        readonly info: "#7239EA";
+        /** Financial gain */
+        readonly profit: "#17C653";
+        /** Financial loss */
+        readonly loss: "#F8285A";
+        /** Compliance approved */
+        readonly approved: "#12A344";
+        /** Compliance pending */
+        readonly pending: "#D09200";
+        /** Compliance rejected */
+        readonly rejected: "#D4194A";
+        /** Security verified */
+        readonly secure: "#12A344";
+        /** Security compromised */
+        readonly insecure: "#D4194A";
+        /** Primary body text */
+        readonly textPrimary: "#071437";
+        /** Secondary/supporting text */
+        readonly textSecondary: "#5E6880";
+        /** Tertiary/label text */
+        readonly textTertiary: "#78829D";
+        /** Muted/placeholder text */
+        readonly textMuted: "#99A1B7";
+        /** Text on dark backgrounds */
+        readonly textInverse: "#F9F9F9";
+        /** Page-level background */
+        readonly bgPage: "#F9F9F9";
+        /** Card/surface background */
+        readonly bgSurface: "#ffffff";
+        /** Surface hover state */
+        readonly bgSurfaceHover: "#F1F1F4";
+        /** Tertiary surface (nested cards, wells) */
+        readonly bgSurfaceTertiary: "#DBDFE9";
+        /** Inverse background (dark sections) */
+        readonly bgInverse: "#071437";
+        /** Sidebar background */
+        readonly bgSidebar: "#ffffff";
+        /** Header background */
+        readonly bgHeader: "#ffffff";
+        /** Default border */
+        readonly border: "#DBDFE9";
+        /** Light/subtle border */
+        readonly borderLight: "#F1F1F4";
+        /** Emphasized border */
+        readonly borderSecondary: "#C4CADA";
+        /** Focus ring border */
+        readonly borderFocus: "#1B84FF";
+        /** Default link color */
+        readonly link: "#1270DC";
+        /** Link hover state */
+        readonly linkHover: "#0A5CB8";
+    };
+    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 — Untitled UI v7.0 exact values */
+        readonly display: {
+            readonly '2xl': {
+                readonly fontSize: 72;
+                readonly fontWeight: 600;
+                readonly lineHeight: "90px";
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly xl: {
+                readonly fontSize: 60;
+                readonly fontWeight: 600;
+                readonly lineHeight: "72px";
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly lg: {
+                readonly fontSize: 48;
+                readonly fontWeight: 600;
+                readonly lineHeight: "60px";
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly md: {
+                readonly fontSize: 36;
+                readonly fontWeight: 600;
+                readonly lineHeight: "44px";
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly sm: {
+                readonly fontSize: 30;
+                readonly fontWeight: 600;
+                readonly lineHeight: "38px";
+                readonly letterSpacing: "0em";
+            };
+            readonly xs: {
+                readonly fontSize: 24;
+                readonly fontWeight: 600;
+                readonly lineHeight: "32px";
+                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 — Untitled UI v7.0 exact values */
+        readonly body: {
+            readonly lg: {
+                readonly fontSize: 18;
+                readonly fontWeight: 400;
+                readonly lineHeight: "28px";
+            };
+            readonly md: {
+                readonly fontSize: 16;
+                readonly fontWeight: 400;
+                readonly lineHeight: "24px";
+            };
+            readonly sm: {
+                readonly fontSize: 14;
+                readonly fontWeight: 400;
+                readonly lineHeight: "20px";
+            };
+        };
+        /** Caption — footnotes, timestamps, fine print */
+        readonly caption: {
+            readonly fontSize: 12;
+            readonly fontWeight: 400;
+            readonly lineHeight: "18px";
+        };
+        /** 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 — 8px (Untitled UI md) */
+        readonly component: 8;
+        /** Card/panel radius — 12px (Untitled UI xl) */
+        readonly card: 12;
+        /** Button radius — 8px (Untitled UI md) */
+        readonly button: 8;
+        /** Input/select radius — 8px (Untitled UI md) */
+        readonly input: 8;
+        /** Tag/badge radius — 4px (Untitled UI xs) */
+        readonly tag: 4;
+        /** 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 — Metronic: 280px */
+        readonly sidebarWidth: 280;
+        /** Sidebar collapsed width */
+        readonly sidebarCollapsedWidth: 72;
+        /** Top header height — Metronic: 70px */
+        readonly headerHeight: 70;
+        /** 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 platforms/fifty-four
+ *
+ * Platform theme overrides for GTCX fifty-four.
+ *
+ * Transforms the Metronic dark-mode defaults into fifty-four's cinematic
+ * dark aesthetic. Canonical spec: `docs/specs/_project/theme-spec.md`
+ *
+ * Aesthetic targets: Linear, Cursor, Mercury, Stripe, Notion AI, Attio,
+ * Webflow, Sana Labs. Metronic is the component chassis — not the
+ * aesthetic target.
+ *
+ * Usage:
+ * ```ts
+ * import { createAntdTheme } from '@gtcx/theme';
+ * import { fiftyFourPlatformTokens } from '@gtcx/tokens/platforms/fifty-four';
+ *
+ * const theme = createAntdTheme({
+ *   mode: 'dark',
+ *   tokensOverride: fiftyFourPlatformTokens,
+ * });
+ * ```
+ *
+ * For Tailwind / CSS integration, import the generated CSS file instead:
+ * ```css
+ * @import '@gtcx/tokens/css/platforms/fifty-four-dark.css';
+ * ```
+ */
+
+/** Color override — same keys as SemanticColors but accepts any string value. */
+type ColorOverrides = {
+    [K in keyof SemanticColors]: string;
+};
+/** Radii override — same keys as SemanticRadii but accepts any number value. */
+type RadiiOverrides = {
+    [K in keyof SemanticRadii]: number;
+};
+/** Shadow override — same keys as SemanticShadows but accepts any string value. */
+type ShadowOverrides = {
+    [K in keyof SemanticShadows]: string;
+};
+/**
+ * fifty-four color palette.
+ *
+ * Elevation stack (§1.1): Void → Surface → Elevated → Raised → Overlay → Spotlight
+ * Min 8 lightness points between adjacent levels.
+ *
+ * Text hierarchy (§1.2): WCAG AA enforced. text-tertiary is lowest for
+ * informational text. text-muted for placeholders/disabled only.
+ *
+ * Border system (§1.4): Three rgba tiers only. No hex borders.
+ */
+declare const fiftyFourColors: ColorOverrides;
+/**
+ * Three radius stops (§3.1).
+ *
+ * - sm (6px): buttons, inputs, badges, chips
+ * - md (10px): cards, panels, list items, dropdown items
+ * - lg (16px): modals, drawers, command palette, hero containers
+ *
+ * `rounded-full` allowed only for: avatars, status dots, toggles.
+ */
+declare const fiftyFourRadii: RadiiOverrides;
+/**
+ * Glass-edge shadow system (§3.2).
+ *
+ * Every shadow includes a 1px white-opacity inset ring — the "glass edge"
+ * that separates surfaces on dark backgrounds. Technique used by Linear,
+ * Cursor, and Mercury.
+ */
+declare const fiftyFourShadows: ShadowOverrides;
+/**
+ * Complete fifty-four platform token overrides.
+ *
+ * Pass this object to `createAntdTheme({ tokensOverride })` or use it
+ * to generate CSS custom properties via `generateCSSVariables()`.
+ */
+declare const fiftyFourPlatformTokens: {
+    readonly colors: ColorOverrides;
+    readonly radii: RadiiOverrides;
+    readonly shadows: ShadowOverrides;
+};
+type FiftyFourPlatformTokens = typeof fiftyFourPlatformTokens;
+
+export { type FiftyFourPlatformTokens as F, type SemanticColorKey as S, type SemanticColors as a, type SemanticLayout as b, type SemanticRadii as c, type SemanticShadows as d, type SemanticSpacing as e, type SemanticSpacingKey as f, type SemanticTokens as g, type SemanticTypography as h, fiftyFourColors as i, fiftyFourPlatformTokens as j, fiftyFourRadii as k, fiftyFourShadows as l, semanticLayout as m, semanticRadii as n, semanticShadows as o, semanticSpacing as p, semanticTokens as q, semanticTypography as r, semanticColors as s };