@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

package/dist/theme/colors.d.ts

@@ -1,1032 +1,55 @@
+/** Raw scale that fills `neutral.1–12` and every neutral role. */
+export type NeutralScale = 'ink' | 'slate';
+/** Raw scale that fills `secondary.1–12` and the secondary roles. */
+export type SecondaryScale = 'sand';
+export interface LogicianColorOptions {
+    /** @default 'ink' (BAZE warm black). `'slate'` is the cool 4.x temperature. */
+    neutral?: NeutralScale;
+    /** @default 'sand' (BAZE beige-brown). */
+    secondary?: SecondaryScale;
+}
+export declare const SYSTEM_HUE_NAMES: readonly ["red", "orange", "yellow", "green", "mint", "teal", "cyan", "blue", "indigo", "purple", "pink", "brown"];
+export type SystemHue = (typeof SYSTEM_HUE_NAMES)[number];
+declare const STEPS: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+type Step = (typeof STEPS)[number];
+type TokenValue = {
+    value: string;
+};
+type TokenTree = {
+    [key: string]: TokenValue | TokenTree;
+};
 /**
- * Golden Ratio Color System
- *
- * A mathematically harmonious color palette designed using the golden ratio (φ ≈ 1.618)
- * to create visually balanced color relationships. Each color scale follows a consistent
- * lightness progression from 50 (lightest) to 900 (darkest).
- *
- * ## Palette Structure
- *
- * ### Primitive Colors
- * - `blue`: Primary brand color - trustworthy, professional
- * - `rose`: Danger/error states - attention, urgency
- * - `green`: Success states - growth, confirmation
- * - `violet`: Secondary/accent - creative, distinctive
- * - `gold`: Warning states - caution, attention
- * - `gray`: Neutral tones with cool blue undertone (slate-based)
- *
- * ### Semantic Tokens
- * Map primitive colors to meaningful UI states:
- * - `primary`: Main brand interactions (blue-based)
- * - `secondary`: Supporting accent (violet-based)
- * - `success`: Positive feedback (green-based)
- * - `warning`: Cautionary feedback (gold-based)
- * - `danger`: Error/destructive feedback (rose-based)
- *
- * ## Design Principles
- *
- * 1. **Accessibility First**: All semantic color combinations meet WCAG 2.1 AA standards
- * 2. **Cool Gray Foundation**: Slate-based grays with blue undertone for modern feel
- * 3. **Consistent Scale**: Each color has 25/50/100/200/300/500/600/700/800/900 steps
- * 4. **Light Mode Optimized**: Designed for light mode with semantic token flexibility
- *
- * @see https://www.w3.org/TR/WCAG21/#contrast-minimum
- * @version 3.0.0
+ * Raw palette. Components never read these; the semantic layer below does.
+ * Override a raw step (e.g. `ink.11`) to retint everything built on it.
  */
+export declare const colors: Record<string, Record<string, TokenValue> | TokenValue>;
+/** Exposed for tests and docs: every role token generated from the scheme table. */
+export declare const ROLE_TOKEN_PATHS: Record<"track" | "bg-canvas" | "layer-1" | "layer-1-hover" | "layer-1-active" | "layer-2" | "layer-2-hover" | "layer-2-active" | "layer-3" | "layer-3-hover" | "layer-3-active" | "bg-subtle" | "bg-surface" | "bg-muted" | "border-subtle" | "border-default" | "border-strong" | "fg-default" | "fg-muted" | "fg-subtle" | "fg-icon" | "fg-placeholder" | "fg-onPrimary" | "primary-main" | "primary-hover" | "primary-active" | "primary-wash" | "primary-washActive" | "primary-selected" | "secondary-surface" | "secondary-surfaceStrong" | "secondary-border" | "secondary-fg" | "secondary-fgStrong" | "action-mark" | "action-iconOnSolid" | "action-bg" | "action-bgHover" | "action-bgActive" | "action-fg" | "action-border" | "send-bg" | "send-bgHover" | "send-bgActive" | "send-fg" | "count-bg" | "count-fg" | "disabled-bg" | "disabled-fg" | "fg-link" | "fg-linkHover" | "focus" | "danger-bg" | "danger-border" | "danger-fg" | "danger-solid" | "danger-solidHover" | "danger-solidActive" | "danger-onSolid" | "success-bg" | "success-border" | "success-fg" | "success-solid" | "success-onSolid" | "warning-bg" | "warning-border" | "warning-fg" | "warning-solid" | "warning-onSolid" | "info-bg" | "info-border" | "info-fg" | "info-solid" | "info-onSolid" | "tooltip-bg" | "tooltip-fg" | "border-control", string>;
+/**
+ * Build the semantic colour tokens for one neutral/secondary choice.
+ * `createLogicianTheme` calls this; the default export below is BAZE.
+ */
+export declare function createSemanticColors({ neutral, secondary, }?: LogicianColorOptions): TokenTree;
+/** BAZE semantic tokens (ink + sand). */
 export declare const semanticTokens: {
-    readonly colors: {
-        /**
-         * Primary colors (Blue-based)
-         * Use for: Primary buttons, links, focus rings, brand elements
-         *
-         * Light contrast ratios (on white):
-         * - main (#1751D0): 5.9:1 ✓ AA
-         * - dark (#0D317D): 9.4:1 ✓ AAA
-         *
-         * `_dark` lightens brand steps ~2 stops so interactive/text tokens keep
-         * AA contrast on dark surfaces (bg.canvas → gray.1500). Background tints
-         * (lightest/extralight/lighter/light) map to the deep end of the scale so
-         * brand-tinted fills read as subtle on dark, not as glare.
-         */
-        readonly primary: {
-            readonly lightest: {
-                readonly value: {
-                    readonly base: "{colors.blue.25}";
-                    readonly _dark: "{colors.blue.900}";
-                };
-            };
-            readonly extralight: {
-                readonly value: {
-                    readonly base: "{colors.blue.50}";
-                    readonly _dark: "{colors.blue.800}";
-                };
-            };
-            readonly lighter: {
-                readonly value: {
-                    readonly base: "{colors.blue.100}";
-                    readonly _dark: "{colors.blue.700}";
-                };
-            };
-            readonly light: {
-                readonly value: {
-                    readonly base: "{colors.blue.200}";
-                    readonly _dark: "{colors.blue.600}";
-                };
-            };
-            readonly main: {
-                readonly value: {
-                    readonly base: "{colors.blue.500}";
-                    readonly _dark: "{colors.blue.300}";
-                };
-            };
-            readonly dark: {
-                readonly value: {
-                    readonly base: "{colors.blue.700}";
-                    readonly _dark: "{colors.blue.200}";
-                };
-            };
-            readonly darker: {
-                readonly value: {
-                    readonly base: "{colors.blue.900}";
-                    readonly _dark: "{colors.blue.100}";
-                };
-            };
-            readonly fill: {
-                readonly value: {
-                    readonly base: "{colors.blue.500}";
-                    readonly _dark: "{colors.blue.700}";
-                };
-            };
-            readonly fillStrong: {
-                readonly value: {
-                    readonly base: "{colors.blue.700}";
-                    readonly _dark: "{colors.blue.800}";
-                };
-            };
-        };
-        /**
-         * Secondary colors (Violet-based)
-         * Use for: Accent elements, highlights, tags
-         *
-         * Light contrast ratios (on white):
-         * - main (#9117D0): 5.1:1 ✓ AA
-         * - dark (#570D7D): 9.2:1 ✓ AAA
-         */
-        readonly secondary: {
-            readonly lightest: {
-                readonly value: {
-                    readonly base: "{colors.violet.25}";
-                    readonly _dark: "{colors.violet.900}";
-                };
-            };
-            readonly extralight: {
-                readonly value: {
-                    readonly base: "{colors.violet.50}";
-                    readonly _dark: "{colors.violet.800}";
-                };
-            };
-            readonly lighter: {
-                readonly value: {
-                    readonly base: "{colors.violet.100}";
-                    readonly _dark: "{colors.violet.700}";
-                };
-            };
-            readonly light: {
-                readonly value: {
-                    readonly base: "{colors.violet.200}";
-                    readonly _dark: "{colors.violet.600}";
-                };
-            };
-            readonly main: {
-                readonly value: {
-                    readonly base: "{colors.violet.500}";
-                    readonly _dark: "{colors.violet.200}";
-                };
-            };
-            readonly dark: {
-                readonly value: {
-                    readonly base: "{colors.violet.700}";
-                    readonly _dark: "{colors.violet.200}";
-                };
-            };
-            readonly darker: {
-                readonly value: {
-                    readonly base: "{colors.violet.900}";
-                    readonly _dark: "{colors.violet.100}";
-                };
-            };
-        };
-        /**
-         * Danger colors (Rose-based)
-         * Use for: Error states, destructive actions, validation errors
-         *
-         * Light contrast ratios (on white):
-         * - main (#C1232C): 5.9:1 ✓ AA
-         * - dark (#7D0D14): 9.6:1 ✓ AAA
-         */
-        readonly danger: {
-            readonly lightest: {
-                readonly value: {
-                    readonly base: "{colors.rose.25}";
-                    readonly _dark: "{colors.rose.900}";
-                };
-            };
-            readonly extralight: {
-                readonly value: {
-                    readonly base: "{colors.rose.50}";
-                    readonly _dark: "{colors.rose.800}";
-                };
-            };
-            readonly lighter: {
-                readonly value: {
-                    readonly base: "{colors.rose.100}";
-                    readonly _dark: "{colors.rose.700}";
-                };
-            };
-            readonly light: {
-                readonly value: {
-                    readonly base: "{colors.rose.200}";
-                    readonly _dark: "{colors.rose.600}";
-                };
-            };
-            readonly main: {
-                readonly value: {
-                    readonly base: "{colors.rose.500}";
-                    readonly _dark: "{colors.rose.300}";
-                };
-            };
-            readonly dark: {
-                readonly value: {
-                    readonly base: "{colors.rose.700}";
-                    readonly _dark: "{colors.rose.200}";
-                };
-            };
-            readonly darker: {
-                readonly value: {
-                    readonly base: "{colors.rose.900}";
-                    readonly _dark: "{colors.rose.100}";
-                };
-            };
-        };
-        /**
-         * Success colors (Green-based)
-         * Use for: Success messages, confirmations, positive feedback
-         *
-         * Light contrast ratios (on white):
-         * - main (#1AA612): 4.5:1 ✓ AA (large text)
-         * - dark (#147D0D): 6.1:1 ✓ AA
-         */
-        readonly success: {
-            readonly lightest: {
-                readonly value: {
-                    readonly base: "{colors.green.25}";
-                    readonly _dark: "{colors.green.900}";
-                };
-            };
-            readonly extralight: {
-                readonly value: {
-                    readonly base: "{colors.green.50}";
-                    readonly _dark: "{colors.green.800}";
-                };
-            };
-            readonly lighter: {
-                readonly value: {
-                    readonly base: "{colors.green.100}";
-                    readonly _dark: "{colors.green.700}";
-                };
-            };
-            readonly light: {
-                readonly value: {
-                    readonly base: "{colors.green.200}";
-                    readonly _dark: "{colors.green.600}";
-                };
-            };
-            readonly main: {
-                readonly value: {
-                    readonly base: "{colors.green.600}";
-                    readonly _dark: "{colors.green.300}";
-                };
-            };
-            readonly dark: {
-                readonly value: {
-                    readonly base: "{colors.green.700}";
-                    readonly _dark: "{colors.green.200}";
-                };
-            };
-            readonly darker: {
-                readonly value: {
-                    readonly base: "{colors.green.900}";
-                    readonly _dark: "{colors.green.100}";
-                };
-            };
-        };
-        /**
-         * Warning colors (Gold-based)
-         * Use for: Warning messages, caution states, attention needed
-         *
-         * Light contrast ratios (on white):
-         * - main (#D0A117): 3.0:1 (use dark on light backgrounds)
-         * - dark (#7D610D): 5.8:1 ✓ AA
-         *
-         * NOTE: gold is the AA risk in both modes — verify per-pair contrast in the
-         * Storybook palette before relying on `warning.main` for text.
-         */
-        readonly warning: {
-            readonly lightest: {
-                readonly value: {
-                    readonly base: "{colors.gold.25}";
-                    readonly _dark: "{colors.gold.900}";
-                };
-            };
-            readonly extralight: {
-                readonly value: {
-                    readonly base: "{colors.gold.50}";
-                    readonly _dark: "{colors.gold.800}";
-                };
-            };
-            readonly lighter: {
-                readonly value: {
-                    readonly base: "{colors.gold.100}";
-                    readonly _dark: "{colors.gold.700}";
-                };
-            };
-            readonly light: {
-                readonly value: {
-                    readonly base: "{colors.gold.200}";
-                    readonly _dark: "{colors.gold.600}";
-                };
-            };
-            readonly main: {
-                readonly value: {
-                    readonly base: "{colors.gold.500}";
-                    readonly _dark: "{colors.gold.300}";
-                };
-            };
-            readonly dark: {
-                readonly value: {
-                    readonly base: "{colors.gold.700}";
-                    readonly _dark: "{colors.gold.200}";
-                };
-            };
-            readonly darker: {
-                readonly value: {
-                    readonly base: "{colors.gold.900}";
-                    readonly _dark: "{colors.gold.100}";
-                };
-            };
-        };
-        /**
-         * `slate.*` — the foundational **mode-aware neutral family**.
-         *
-         * A first-class neutral palette alongside the raw `gray.*` primitives, but
-         * mode-aware: each `slate.N` resolves to `gray.N` in light and to the
-         * desaturated counterpart of the *mirrored* step in dark, so a single token
-         * carries the same tonal level in both modes (e.g. `slate.300` is a light
-         * divider in light and the equivalent dark divider in dark — no `_dark={{…}}`
-         * at the call site). It lives under `semanticTokens` only because Chakra
-         * requires that for the `_dark` flip; conceptually it is a *foundation*
-         * (a tonal scale), not a *role*.
-         *
-         * When to use which:
-         * - Prefer the **role tokens** (`fg`/`bg`/`border`) when one matches the
-         *   intent — they carry semantics and AA-tuned dark values.
-         * - Reach for **`slate.N`** when you need a specific neutral tonal step that
-         *   no role names (mirroring how you'd otherwise drop to a raw `gray.N`, but
-         *   keeping the dark flip). `slate` and the role tokens are *distinct* ramps
-         *   (slate is a mechanical mirror; roles are hand-tuned), so they are not
-         *   interchangeable in dark mode.
-         *
-         * `600`/`700` are lifted off the straight mirror (#8E939F/#7C818D) so the
-         * secondary/muted text they most often carry clears WCAG AA 4.5:1 on the
-         * dark canvas/surface — the straight mirrors measured ~3.0–3.9 there.
-         */
-        readonly slate: {
-            readonly 0: {
-                readonly value: {
-                    readonly base: "{colors.gray.0}";
-                    readonly _dark: "#0E1014";
-                };
-            };
-            readonly 50: {
-                readonly value: {
-                    readonly base: "{colors.gray.50}";
-                    readonly _dark: "#181A20";
-                };
-            };
-            readonly 100: {
-                readonly value: {
-                    readonly base: "{colors.gray.100}";
-                    readonly _dark: "#23262E";
-                };
-            };
-            readonly 200: {
-                readonly value: {
-                    readonly base: "{colors.gray.200}";
-                    readonly _dark: "#30343C";
-                };
-            };
-            readonly 300: {
-                readonly value: {
-                    readonly base: "{colors.gray.300}";
-                    readonly _dark: "#3C404B";
-                };
-            };
-            readonly 400: {
-                readonly value: {
-                    readonly base: "{colors.gray.400}";
-                    readonly _dark: "#4A4E5A";
-                };
-            };
-            readonly 500: {
-                readonly value: {
-                    readonly base: "{colors.gray.500}";
-                    readonly _dark: "#595E6B";
-                };
-            };
-            readonly 600: {
-                readonly value: {
-                    readonly base: "{colors.gray.600}";
-                    readonly _dark: "#898E99";
-                };
-            };
-            readonly 700: {
-                readonly value: {
-                    readonly base: "{colors.gray.700}";
-                    readonly _dark: "#8D919D";
-                };
-            };
-            readonly 800: {
-                readonly value: {
-                    readonly base: "{colors.gray.800}";
-                    readonly _dark: "#8E939F";
-                };
-            };
-            readonly 900: {
-                readonly value: {
-                    readonly base: "{colors.gray.900}";
-                    readonly _dark: "#A2A6B1";
-                };
-            };
-            readonly 1000: {
-                readonly value: {
-                    readonly base: "{colors.gray.1000}";
-                    readonly _dark: "#B6BAC3";
-                };
-            };
-            readonly 1100: {
-                readonly value: {
-                    readonly base: "{colors.gray.1100}";
-                    readonly _dark: "#D2D5DB";
-                };
-            };
-            readonly 1200: {
-                readonly value: {
-                    readonly base: "{colors.gray.1200}";
-                    readonly _dark: "#E5E8EC";
-                };
-            };
-            readonly 1300: {
-                readonly value: {
-                    readonly base: "{colors.gray.1300}";
-                    readonly _dark: "#F2F4F7";
-                };
-            };
-            readonly 1400: {
-                readonly value: {
-                    readonly base: "{colors.gray.1400}";
-                    readonly _dark: "#F8F9FB";
-                };
-            };
-            readonly 1500: {
-                readonly value: {
-                    readonly base: "{colors.gray.1500}";
-                    readonly _dark: "#FEFEFF";
-                };
-            };
-        };
-        /**
-         * Neutral background tokens — map onto the gray.0–1500 scale.
-         * Use for: page/canvas, raised surfaces (cards, menus), subtle/muted fills,
-         * and inverse surfaces (tooltips, contrast banners).
-         *
-         * - canvas: app background
-         * - surface: raised surface (card, popover, menu)
-         * - subtle: subtle fill / secondary surface
-         * - muted: muted fill / tertiary surface, hover
-         * - inverse: high-contrast surface (flips to light in dark mode)
-         */
-        readonly bg: {
-            readonly DEFAULT: {
-                readonly value: {
-                    readonly _light: "{colors.white}";
-                    readonly _dark: "#0E1014";
-                };
-            };
-            readonly canvas: {
-                readonly value: {
-                    readonly base: "{colors.gray.0}";
-                    readonly _dark: "#0E1014";
-                };
-            };
-            readonly surface: {
-                readonly value: {
-                    readonly base: "{colors.white}";
-                    readonly _dark: "#181A20";
-                };
-            };
-            readonly raised: {
-                readonly value: {
-                    readonly base: "{colors.white}";
-                    readonly _dark: "#3C404B";
-                };
-            };
-            readonly subtle: {
-                readonly value: {
-                    readonly base: "{colors.gray.50}";
-                    readonly _dark: "#23262E";
-                };
-            };
-            readonly muted: {
-                readonly value: {
-                    readonly base: "{colors.gray.100}";
-                    readonly _dark: "#30343C";
-                };
-            };
-            readonly inverse: {
-                readonly value: {
-                    readonly base: "{colors.gray.1300}";
-                    readonly _dark: "#F8F9FB";
-                };
-            };
-            readonly sunken: {
-                readonly value: {
-                    readonly base: "{colors.gray.50}";
-                    readonly _dark: "#0E1014";
-                };
-            };
-            readonly track: {
-                readonly value: {
-                    readonly base: "{colors.gray.300}";
-                    readonly _dark: "#30343C";
-                };
-            };
-            readonly panel: {
-                readonly value: {
-                    readonly base: "{colors.white}";
-                    readonly _dark: "#181A20";
-                };
-            };
-            /**
-             * Row/selection state tints. Use these for selected rows,
-             * validation-error rows, and transient highlights instead of
-             * hand-picking `primary.*`/`danger.*` tints at the call site.
-             *
-             * Values mirror `primary.lightest` / `danger.lightest` /
-             * `warning.lightest` (this Chakra version doesn't resolve
-             * semantic→semantic token references, so the primitive pairs are
-             * repeated here — keep them in sync with the brand ramps above).
-             */
-            readonly selected: {
-                readonly value: {
-                    readonly base: "{colors.blue.25}";
-                    readonly _dark: "{colors.blue.900}";
-                };
-            };
-            readonly invalid: {
-                readonly subtle: {
-                    readonly value: {
-                        readonly base: "{colors.rose.25}";
-                        readonly _dark: "{colors.rose.900}";
-                    };
-                };
-            };
-            readonly highlighted: {
-                readonly value: {
-                    readonly base: "{colors.gold.25}";
-                    readonly _dark: "{colors.gold.900}";
-                };
-            };
-        };
-        /**
-         * Neutral foreground (text/icon) tokens — map onto the gray.0–1500 scale.
-         *
-         * - default: primary text/icons
-         * - muted: secondary text
-         * - subtle: tertiary / placeholder text
-         * - inverse: text on inverse surfaces (flips with mode)
-         */
-        readonly fg: {
-            readonly DEFAULT: {
-                readonly value: {
-                    readonly _light: "{colors.black}";
-                    readonly _dark: "#F8F9FB";
-                };
-            };
-            readonly emphasized: {
-                readonly value: {
-                    readonly base: "{colors.gray.1300}";
-                    readonly _dark: "#E5E8EC";
-                };
-            };
-            readonly default: {
-                readonly value: {
-                    readonly base: "{colors.gray.1000}";
-                    readonly _dark: "#D2D5DB";
-                };
-            };
-            readonly muted: {
-                readonly value: {
-                    readonly base: "{colors.gray.900}";
-                    readonly _dark: "#B6BAC3";
-                };
-            };
-            readonly subtle: {
-                readonly value: {
-                    readonly base: "{colors.gray.700}";
-                    readonly _dark: "#989DA9";
-                };
-            };
-            readonly inverse: {
-                readonly value: {
-                    readonly base: "{colors.gray.0}";
-                    readonly _dark: "#181A20";
-                };
-            };
-        };
-        /**
-         * Neutral border tokens — map onto the gray.0–1500 scale.
-         *
-         * - default: standard borders, dividers
-         * - subtle: low-emphasis dividers
-         * - strong: high-emphasis borders, focus outlines on neutral
-         */
-        readonly border: {
-            readonly DEFAULT: {
-                readonly value: {
-                    readonly _light: "{colors.gray.200}";
-                    readonly _dark: "#6A6F7C";
-                };
-            };
-            readonly default: {
-                readonly value: {
-                    readonly base: "{colors.gray.300}";
-                    readonly _dark: "#3C404B";
-                };
-            };
-            readonly subtle: {
-                readonly value: {
-                    readonly base: "{colors.gray.200}";
-                    readonly _dark: "#23262E";
-                };
-            };
-            readonly strong: {
-                readonly value: {
-                    readonly base: "{colors.gray.500}";
-                    readonly _dark: "#595E6B";
-                };
-            };
-        };
-    };
+    colors: TokenTree;
 };
+/** Deprecated 4.x semantic name → 5.0 replacement. */
+export declare const DEPRECATED_COLOR_TOKENS: Readonly<Record<string, string>>;
+type Hue = SystemHue;
+type StatusFamily = 'danger' | 'success' | 'warning' | 'info';
 /**
- * Union of every semantic color token name exposed by the Logician theme,
- * in Chakra dotted-path form (e.g. `fg.default`, `bg.surface`, `primary.main`).
- *
- * This is the contract consumed by the factchat primitive→semantic codemod and
- * by reviewers. It is intentionally hand-maintained alongside `semanticTokens`
- * so a rename here is a visible, reviewable diff.
+ * Every public semantic colour token, in Chakra dotted-path form.
  *
- * Note: `bg.panel` and the bare `bg`/`fg`/`border` DEFAULT tokens are
- * deliberately omitted — they are internal realignments of Chakra defaults
- * (overlay surfaces and html-level globals), not part of the public migration
- * contract. App code should use `bg.surface`/`bg.canvas`, `fg.default`, etc.
+ * The contract consumed by the factchat codemod and by reviewers; hand-kept
+ * beside `PATHS` so a rename is a visible diff. Internal `scheme.*` helpers and
+ * the bare `bg`/`fg`/`border` DEFAULTs are deliberately absent.
  */
-export type SemanticColorToken = `bg.${'canvas' | 'surface' | 'raised' | 'subtle' | 'muted' | 'sunken' | 'track' | 'inverse' | 'selected' | 'highlighted'}` | 'bg.invalid.subtle' | `fg.${'emphasized' | 'default' | 'muted' | 'subtle' | 'inverse'}` | `border.${'default' | 'subtle' | 'strong'}` | `slate.${0 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100 | 1200 | 1300 | 1400 | 1500}` | `primary.${'fill' | 'fillStrong'}` | `${'primary' | 'secondary' | 'danger' | 'success' | 'warning'}.${'lightest' | 'extralight' | 'lighter' | 'light' | 'main' | 'dark' | 'darker'}`;
+export type SemanticColorToken = `neutral.${Step}` | `secondary.${Step}` | `bg.${'canvas' | 'surface' | 'raised' | 'subtle' | 'muted' | 'sunken' | 'track' | 'inverse' | 'panel' | 'highlighted'}` | 'bg.invalid.subtle' | `layer.${1 | 2 | 3}` | `layer.${1 | 2 | 3}.${'hover' | 'active'}` | `fg.${'default' | 'emphasized' | 'muted' | 'subtle' | 'icon' | 'placeholder' | 'onPrimary' | 'link' | 'linkHover' | 'inverse'}` | `border.${'subtle' | 'default' | 'strong' | 'control'}` | `primary.${'main' | 'hover' | 'active' | 'wash' | 'washActive' | 'selected'}` | `secondary.${'surface' | 'surfaceStrong' | 'border' | 'fg' | 'fgStrong'}` | `action.${'mark' | 'iconOnSolid' | 'bg' | 'bgHover' | 'bgActive' | 'fg' | 'border'}` | `send.${'bg' | 'bgHover' | 'bgActive' | 'fg'}` | `count.${'bg' | 'fg'}` | `disabled.${'bg' | 'fg'}` | 'focus.ring' | `${StatusFamily}.${'bg' | 'border' | 'fg' | 'solid' | 'onSolid'}` | `danger.${'solidHover' | 'solidActive'}` | `tooltip.${'bg' | 'fg'}` | `category.${Hue}.${'surface' | 'fg'}` | DeprecatedSemanticColorToken;
 /**
- * Primitive color palette following the Golden Ratio system.
- *
- * These are the raw color values organized by hue. In most cases,
- * you should use semantic tokens (`primary`, `danger`, etc.) instead
- * of these primitive values directly.
- *
- * ### Scale explanation:
- * - **25**: Lightest backgrounds, ghost states
- * - **50-200**: Light shades for backgrounds, subtle fills
- * - **300**: Medium shade for borders, hover states
- * - **500**: Base color, primary usage
- * - **600-700**: Dark shades for text, emphasis
- * - **800-900**: Darkest shades for high-contrast text
- *
- * ### Gray scale (Slate-based):
- * Extended from 0-1500 for fine-grained control:
- * - **0**: Pure background (near-white with blue tint)
- * - **50-200**: Light backgrounds, subtle borders
- * - **300-500**: Borders, disabled states
- * - **600-800**: Secondary text, icons
- * - **900-1200**: Primary text
- * - **1300-1500**: Darkest backgrounds, high-contrast text
- *
- * @example
- * ```tsx
- * // Prefer semantic tokens
- * <Button bgColor="primary.main" />
- *
- * // Use primitives only when semantic tokens don't apply
- * <Box borderColor="gray.300" />
- * ```
+ * @deprecated 4.x names kept as aliases in 5.0 — see `DEPRECATED_COLOR_TOKENS`
+ * for the replacement. Removed in 6.0.
  */
-export declare const colors: {
-    /**
-     * Blue palette - Primary brand color
-     * Used for: primary semantic tokens, interactive elements
-     */
-    blue: {
-        25: {
-            value: string;
-        };
-        50: {
-            value: string;
-        };
-        100: {
-            value: string;
-        };
-        200: {
-            value: string;
-        };
-        300: {
-            value: string;
-        };
-        500: {
-            value: string;
-        };
-        600: {
-            value: string;
-        };
-        700: {
-            value: string;
-        };
-        800: {
-            value: string;
-        };
-        900: {
-            value: string;
-        };
-    };
-    /**
-     * Rose palette - Danger/error color
-     * Used for: danger semantic tokens, error states, destructive actions
-     */
-    rose: {
-        25: {
-            value: string;
-        };
-        50: {
-            value: string;
-        };
-        100: {
-            value: string;
-        };
-        200: {
-            value: string;
-        };
-        300: {
-            value: string;
-        };
-        500: {
-            value: string;
-        };
-        600: {
-            value: string;
-        };
-        700: {
-            value: string;
-        };
-        800: {
-            value: string;
-        };
-        900: {
-            value: string;
-        };
-    };
-    /**
-     * Green palette - Success color
-     * Used for: success semantic tokens, confirmations, positive feedback
-     */
-    green: {
-        25: {
-            value: string;
-        };
-        50: {
-            value: string;
-        };
-        100: {
-            value: string;
-        };
-        200: {
-            value: string;
-        };
-        300: {
-            value: string;
-        };
-        500: {
-            value: string;
-        };
-        600: {
-            value: string;
-        };
-        700: {
-            value: string;
-        };
-        800: {
-            value: string;
-        };
-        900: {
-            value: string;
-        };
-    };
-    /**
-     * Violet palette - Secondary/accent color
-     * Used for: secondary semantic tokens, highlights, tags
-     */
-    violet: {
-        25: {
-            value: string;
-        };
-        50: {
-            value: string;
-        };
-        100: {
-            value: string;
-        };
-        200: {
-            value: string;
-        };
-        300: {
-            value: string;
-        };
-        500: {
-            value: string;
-        };
-        600: {
-            value: string;
-        };
-        700: {
-            value: string;
-        };
-        800: {
-            value: string;
-        };
-        900: {
-            value: string;
-        };
-    };
-    /**
-     * Gold palette - Warning color
-     * Used for: warning semantic tokens, caution states
-     */
-    gold: {
-        25: {
-            value: string;
-        };
-        50: {
-            value: string;
-        };
-        100: {
-            value: string;
-        };
-        200: {
-            value: string;
-        };
-        300: {
-            value: string;
-        };
-        500: {
-            value: string;
-        };
-        600: {
-            value: string;
-        };
-        700: {
-            value: string;
-        };
-        800: {
-            value: string;
-        };
-        900: {
-            value: string;
-        };
-    };
-    /**
-     * Gray palette (Slate-based with cool blue undertone)
-     * Extended scale from 0-1500 for fine-grained control
-     *
-     * Used for: backgrounds, borders, text, disabled states
-     *
-     * Contrast ratios against gray.0 (#FDFDFF):
-     * - gray.700: 4.6:1 ✓ AA (large text)
-     * - gray.900: 6.2:1 ✓ AA
-     * - gray.1300: 11.2:1 ✓ AAA
-     */
-    gray: {
-        0: {
-            value: string;
-        };
-        50: {
-            value: string;
-        };
-        100: {
-            value: string;
-        };
-        200: {
-            value: string;
-        };
-        300: {
-            value: string;
-        };
-        400: {
-            value: string;
-        };
-        500: {
-            value: string;
-        };
-        600: {
-            value: string;
-        };
-        700: {
-            value: string;
-        };
-        800: {
-            value: string;
-        };
-        900: {
-            value: string;
-        };
-        1000: {
-            value: string;
-        };
-        1100: {
-            value: string;
-        };
-        1200: {
-            value: string;
-        };
-        1300: {
-            value: string;
-        };
-        1400: {
-            value: string;
-        };
-        1500: {
-            value: string;
-        };
-    };
-    /**
-     * Legacy purple palette (aliased to violet for backwards compatibility)
-     * @deprecated Use `violet` instead
-     */
-    purple: {
-        50: {
-            value: string;
-        };
-        100: {
-            value: string;
-        };
-        200: {
-            value: string;
-        };
-        300: {
-            value: string;
-        };
-        500: {
-            value: string;
-        };
-        600: {
-            value: string;
-        };
-        700: {
-            value: string;
-        };
-        800: {
-            value: string;
-        };
-        900: {
-            value: string;
-        };
-    };
-    /**
-     * Legacy red palette (aliased to rose for backwards compatibility)
-     * @deprecated Use `rose` instead
-     */
-    red: {
-        50: {
-            value: string;
-        };
-        100: {
-            value: string;
-        };
-        200: {
-            value: string;
-        };
-        300: {
-            value: string;
-        };
-        500: {
-            value: string;
-        };
-        600: {
-            value: string;
-        };
-        700: {
-            value: string;
-        };
-        800: {
-            value: string;
-        };
-        900: {
-            value: string;
-        };
-    };
-    /**
-     * Legacy yellow palette (aliased to gold for backwards compatibility)
-     * @deprecated Use `gold` instead
-     */
-    yellow: {
-        50: {
-            value: string;
-        };
-        100: {
-            value: string;
-        };
-        200: {
-            value: string;
-        };
-        300: {
-            value: string;
-        };
-        400: {
-            value: string;
-        };
-        500: {
-            value: string;
-        };
-        600: {
-            value: string;
-        };
-        700: {
-            value: string;
-        };
-        800: {
-            value: string;
-        };
-        900: {
-            value: string;
-        };
-    };
-    white: {
-        value: string;
-    };
-    black: {
-        value: string;
-    };
-};
+export type DeprecatedSemanticColorToken = `primary.${'lightest' | 'extralight' | 'lighter' | 'light' | 'dark' | 'darker' | 'fill' | 'fillStrong'}` | `${'secondary' | 'danger' | 'success' | 'warning'}.${'lightest' | 'extralight' | 'lighter' | 'light' | 'main' | 'dark' | 'darker'}` | 'warning.fill' | 'bg.selected' | 'fg.accent' | `slate.${0 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100 | 1200 | 1300 | 1400 | 1500}`;
+export {};
 //# sourceMappingURL=colors.d.ts.map