@mindlogic-ai/logician-ui 3.0.0 → 3.1.0-alpha.0

package/dist/theme/colors.d.ts

@@ -65,159 +65,395 @@ export declare const semanticTokens: {
          * Primary colors (Blue-based)
          * Use for: Primary buttons, links, focus rings, brand elements
          *
-         * Contrast ratios (on white):
+         * 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: "{colors.blue.25}";
+                readonly value: {
+                    readonly base: "{colors.blue.25}";
+                    readonly _dark: "{colors.blue.900}";
+                };
             };
             readonly extralight: {
-                readonly value: "{colors.blue.50}";
+                readonly value: {
+                    readonly base: "{colors.blue.50}";
+                    readonly _dark: "{colors.blue.800}";
+                };
             };
             readonly lighter: {
-                readonly value: "{colors.blue.100}";
+                readonly value: {
+                    readonly base: "{colors.blue.100}";
+                    readonly _dark: "{colors.blue.700}";
+                };
             };
             readonly light: {
-                readonly value: "{colors.blue.200}";
+                readonly value: {
+                    readonly base: "{colors.blue.200}";
+                    readonly _dark: "{colors.blue.600}";
+                };
             };
             readonly main: {
-                readonly value: "{colors.blue.500}";
+                readonly value: {
+                    readonly base: "{colors.blue.500}";
+                    readonly _dark: "{colors.blue.300}";
+                };
             };
             readonly dark: {
-                readonly value: "{colors.blue.700}";
+                readonly value: {
+                    readonly base: "{colors.blue.700}";
+                    readonly _dark: "{colors.blue.200}";
+                };
             };
             readonly darker: {
-                readonly value: "{colors.blue.900}";
+                readonly value: {
+                    readonly base: "{colors.blue.900}";
+                    readonly _dark: "{colors.blue.100}";
+                };
             };
         };
         /**
          * Secondary colors (Violet-based)
          * Use for: Accent elements, highlights, tags
          *
-         * Contrast ratios (on white):
+         * Light contrast ratios (on white):
          * - main (#9117D0): 5.1:1 ✓ AA
          * - dark (#570D7D): 9.2:1 ✓ AAA
          */
         readonly secondary: {
             readonly lightest: {
-                readonly value: "{colors.violet.25}";
+                readonly value: {
+                    readonly base: "{colors.violet.25}";
+                    readonly _dark: "{colors.violet.900}";
+                };
             };
             readonly extralight: {
-                readonly value: "{colors.violet.50}";
+                readonly value: {
+                    readonly base: "{colors.violet.50}";
+                    readonly _dark: "{colors.violet.800}";
+                };
             };
             readonly lighter: {
-                readonly value: "{colors.violet.100}";
+                readonly value: {
+                    readonly base: "{colors.violet.100}";
+                    readonly _dark: "{colors.violet.700}";
+                };
             };
             readonly light: {
-                readonly value: "{colors.violet.200}";
+                readonly value: {
+                    readonly base: "{colors.violet.200}";
+                    readonly _dark: "{colors.violet.600}";
+                };
             };
             readonly main: {
-                readonly value: "{colors.violet.500}";
+                readonly value: {
+                    readonly base: "{colors.violet.500}";
+                    readonly _dark: "{colors.violet.200}";
+                };
             };
             readonly dark: {
-                readonly value: "{colors.violet.700}";
+                readonly value: {
+                    readonly base: "{colors.violet.700}";
+                    readonly _dark: "{colors.violet.200}";
+                };
             };
             readonly darker: {
-                readonly value: "{colors.violet.900}";
+                readonly value: {
+                    readonly base: "{colors.violet.900}";
+                    readonly _dark: "{colors.violet.100}";
+                };
             };
         };
         /**
          * Danger colors (Rose-based)
          * Use for: Error states, destructive actions, validation errors
          *
-         * Contrast ratios (on white):
+         * Light contrast ratios (on white):
          * - main (#D01721): 5.2:1 ✓ AA
          * - dark (#7D0D14): 9.6:1 ✓ AAA
          */
         readonly danger: {
             readonly lightest: {
-                readonly value: "{colors.rose.25}";
+                readonly value: {
+                    readonly base: "{colors.rose.25}";
+                    readonly _dark: "{colors.rose.900}";
+                };
             };
             readonly extralight: {
-                readonly value: "{colors.rose.50}";
+                readonly value: {
+                    readonly base: "{colors.rose.50}";
+                    readonly _dark: "{colors.rose.800}";
+                };
             };
             readonly lighter: {
-                readonly value: "{colors.rose.100}";
+                readonly value: {
+                    readonly base: "{colors.rose.100}";
+                    readonly _dark: "{colors.rose.700}";
+                };
             };
             readonly light: {
-                readonly value: "{colors.rose.200}";
+                readonly value: {
+                    readonly base: "{colors.rose.200}";
+                    readonly _dark: "{colors.rose.600}";
+                };
             };
             readonly main: {
-                readonly value: "{colors.rose.500}";
+                readonly value: {
+                    readonly base: "{colors.rose.500}";
+                    readonly _dark: "{colors.rose.300}";
+                };
             };
             readonly dark: {
-                readonly value: "{colors.rose.700}";
+                readonly value: {
+                    readonly base: "{colors.rose.700}";
+                    readonly _dark: "{colors.rose.200}";
+                };
             };
             readonly darker: {
-                readonly value: "{colors.rose.900}";
+                readonly value: {
+                    readonly base: "{colors.rose.900}";
+                    readonly _dark: "{colors.rose.100}";
+                };
             };
         };
         /**
          * Success colors (Green-based)
          * Use for: Success messages, confirmations, positive feedback
          *
-         * Contrast ratios (on white):
+         * 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: "{colors.green.25}";
+                readonly value: {
+                    readonly base: "{colors.green.25}";
+                    readonly _dark: "{colors.green.900}";
+                };
             };
             readonly extralight: {
-                readonly value: "{colors.green.50}";
+                readonly value: {
+                    readonly base: "{colors.green.50}";
+                    readonly _dark: "{colors.green.800}";
+                };
             };
             readonly lighter: {
-                readonly value: "{colors.green.100}";
+                readonly value: {
+                    readonly base: "{colors.green.100}";
+                    readonly _dark: "{colors.green.700}";
+                };
             };
             readonly light: {
-                readonly value: "{colors.green.200}";
+                readonly value: {
+                    readonly base: "{colors.green.200}";
+                    readonly _dark: "{colors.green.600}";
+                };
             };
             readonly main: {
-                readonly value: "{colors.green.600}";
+                readonly value: {
+                    readonly base: "{colors.green.600}";
+                    readonly _dark: "{colors.green.300}";
+                };
             };
             readonly dark: {
-                readonly value: "{colors.green.700}";
+                readonly value: {
+                    readonly base: "{colors.green.700}";
+                    readonly _dark: "{colors.green.200}";
+                };
             };
             readonly darker: {
-                readonly value: "{colors.green.900}";
+                readonly value: {
+                    readonly base: "{colors.green.900}";
+                    readonly _dark: "{colors.green.100}";
+                };
             };
         };
         /**
          * Warning colors (Gold-based)
          * Use for: Warning messages, caution states, attention needed
          *
-         * Contrast ratios (on white):
+         * 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: "{colors.gold.25}";
+                readonly value: {
+                    readonly base: "{colors.gold.25}";
+                    readonly _dark: "{colors.gold.900}";
+                };
             };
             readonly extralight: {
-                readonly value: "{colors.gold.50}";
+                readonly value: {
+                    readonly base: "{colors.gold.50}";
+                    readonly _dark: "{colors.gold.800}";
+                };
             };
             readonly lighter: {
-                readonly value: "{colors.gold.100}";
+                readonly value: {
+                    readonly base: "{colors.gold.100}";
+                    readonly _dark: "{colors.gold.700}";
+                };
             };
             readonly light: {
-                readonly value: "{colors.gold.200}";
+                readonly value: {
+                    readonly base: "{colors.gold.200}";
+                    readonly _dark: "{colors.gold.600}";
+                };
             };
             readonly main: {
-                readonly value: "{colors.gold.500}";
+                readonly value: {
+                    readonly base: "{colors.gold.500}";
+                    readonly _dark: "{colors.gold.300}";
+                };
             };
             readonly dark: {
-                readonly value: "{colors.gold.700}";
+                readonly value: {
+                    readonly base: "{colors.gold.700}";
+                    readonly _dark: "{colors.gold.200}";
+                };
             };
             readonly darker: {
-                readonly value: "{colors.gold.900}";
+                readonly value: {
+                    readonly base: "{colors.gold.900}";
+                    readonly _dark: "{colors.gold.100}";
+                };
+            };
+        };
+        /**
+         * 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 canvas: {
+                readonly value: {
+                    readonly base: "{colors.gray.0}";
+                    readonly _dark: "{colors.gray.1500}";
+                };
+            };
+            readonly surface: {
+                readonly value: {
+                    readonly base: "{colors.white}";
+                    readonly _dark: "{colors.gray.1400}";
+                };
+            };
+            readonly subtle: {
+                readonly value: {
+                    readonly base: "{colors.gray.50}";
+                    readonly _dark: "{colors.gray.1300}";
+                };
+            };
+            readonly muted: {
+                readonly value: {
+                    readonly base: "{colors.gray.100}";
+                    readonly _dark: "{colors.gray.1200}";
+                };
+            };
+            readonly inverse: {
+                readonly value: {
+                    readonly base: "{colors.gray.1300}";
+                    readonly _dark: "{colors.gray.50}";
+                };
+            };
+            readonly panel: {
+                readonly value: {
+                    readonly base: "{colors.white}";
+                    readonly _dark: "{colors.gray.1400}";
+                };
+            };
+        };
+        /**
+         * 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 base: "{colors.gray.1300}";
+                    readonly _dark: "{colors.gray.50}";
+                };
+            };
+            readonly muted: {
+                readonly value: {
+                    readonly base: "{colors.gray.900}";
+                    readonly _dark: "{colors.gray.400}";
+                };
+            };
+            readonly subtle: {
+                readonly value: {
+                    readonly base: "{colors.gray.700}";
+                    readonly _dark: "{colors.gray.600}";
+                };
+            };
+            readonly inverse: {
+                readonly value: {
+                    readonly base: "{colors.gray.0}";
+                    readonly _dark: "{colors.gray.1400}";
+                };
+            };
+        };
+        /**
+         * 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 base: "{colors.gray.300}";
+                    readonly _dark: "{colors.gray.1100}";
+                };
+            };
+            readonly subtle: {
+                readonly value: {
+                    readonly base: "{colors.gray.200}";
+                    readonly _dark: "{colors.gray.1300}";
+                };
+            };
+            readonly strong: {
+                readonly value: {
+                    readonly base: "{colors.gray.500}";
+                    readonly _dark: "{colors.gray.900}";
+                };
             };
         };
     };
 };
+/**
+ * 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.
+ *
+ * Note: `bg.panel` is deliberately omitted — it is an internal realignment of a
+ * Chakra default (for overlay surfaces), not part of the public migration
+ * contract. App code should use `bg.surface`/`bg.canvas`.
+ */
+export type SemanticColorToken = `bg.${'canvas' | 'surface' | 'subtle' | 'muted' | 'inverse'}` | `fg.${'default' | 'muted' | 'subtle' | 'inverse'}` | `border.${'default' | 'subtle' | 'strong'}` | `${'primary' | 'secondary' | 'danger' | 'success' | 'warning'}.${'lightest' | 'extralight' | 'lighter' | 'light' | 'main' | 'dark' | 'darker'}`;
 /**
  * Primitive color palette following the Golden Ratio system.
  *

package/dist/theme/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/theme/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,cAAc;;QAEvB;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;QAWH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;QAWH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;QAWH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;QAWH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;CAWG,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,MAAM;IACjB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqBH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBJ,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/theme/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,cAAc;;QAEvB;;;;;;;;;;;;WAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyBH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA6BH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyBH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyBH;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyBH;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA0BH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgBH;;;;;;WAMG;;;;;;;;;;;;;;;;;;;;;;CAaG,CAAC;AAEX;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,kBAAkB,GAC1B,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,EAAE,GAC7D,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,EAAE,GAClD,UAAU,SAAS,GAAG,QAAQ,GAAG,QAAQ,EAAE,GAC3C,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,IACzD,UAAU,GACV,YAAY,GACZ,SAAS,GACT,OAAO,GACP,MAAM,GACN,MAAM,GACN,QAAQ,EAAE,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,MAAM;IACjB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqBH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBJ,CAAC"}