@mindlogic-ai/logician-ui 5.0.0-alpha.2 → 5.0.0-alpha.4

package/src/theme/colors.ts

@@ -7,7 +7,8 @@
  *    black), `sand.1–12` / `sandDark.1–12` (beige-brown), `slate.1–12` /
  *    `slateDark.1–12` (today's cool gray rebuilt on the same contrast targets),
  *    `coral.*`, and the 12 system hues (`red` … `brown`, each
- *    `{base, baseDark, hc, hcDark, surface, ink, surfaceDark, inkDark}`).
+ *    `{base, baseDark, hc, hcDark, surface, ink, surfaceDark, inkDark}`), and
+ *    `dataviz.*` (the data-visualisation values no hue step covers).
  *    The step number is the job (Radix-style): 1–3 backgrounds, 4–6 dividers
  *    and borders, 7 control border (3:1), 8 icon/placeholder (4.5:1), 9–11
  *    text, 12 maximum contrast.
@@ -16,7 +17,9 @@
  *    them (default `ink` / `sand`).
  * 3. **Semantic roles** — `bg.*`, `layer.*`, `fg.*`, `border.*`, `primary.*`,
  *    `secondary.*`, `action.*`, `send.*`, `count.*`, `disabled.*`, `focus.ring`,
- *    the four status families, `tooltip.*`, `category.{hue}.*`.
+ *    the four status families, `tooltip.*`, `category.{hue}.*`, and the
+ *    data-visualisation fills `data.1–4` and `diverging.{pos,neg}.1–3` /
+ *    `diverging.mid`.
  *
  * Every value comes from `palette.generated.ts` (see
  * `scripts/palette/generate.mjs`), which ports the designer-reviewed prototype
@@ -36,7 +39,13 @@
  * `no-deprecated-tokens` lint rule. They are removed in 6.0.
  */
 import DEPRECATED from './deprecatedColorTokens.json';
-import { CORAL, RAMPS, SCHEMES, SYSTEM_HUES } from './palette.generated';
+import {
+  CORAL,
+  DATAVIZ,
+  RAMPS,
+  SCHEMES,
+  SYSTEM_HUES,
+} from './palette.generated';
 
 /** Raw scale that fills `neutral.1–12` and every neutral role. */
 export type NeutralScale = 'ink' | 'slate';
@@ -122,6 +131,9 @@ export const colors = {
       ),
     ])
   ),
+  dataviz: Object.fromEntries(
+    Object.entries(DATAVIZ).map(([k, val]) => [k, v(val)])
+  ),
   white: v('#FFFFFF'),
 } as Record<string, Record<string, TokenValue> | TokenValue>;
 
@@ -214,6 +226,20 @@ const PATHS: Record<FlatKey, string> = {
   'info-onSolid': 'info.onSolid',
   'tooltip-bg': 'tooltip.bg',
   'tooltip-fg': 'tooltip.fg',
+  // Data visualisation (fills only). Higher number = larger value, in both
+  // modes; the dark values flip lightness so the strongest step stays the
+  // most prominent on a dark canvas.
+  'data-1': 'data.1',
+  'data-2': 'data.2',
+  'data-3': 'data.3',
+  'data-4': 'data.4',
+  'diverging-pos-1': 'diverging.pos.1',
+  'diverging-pos-2': 'diverging.pos.2',
+  'diverging-pos-3': 'diverging.pos.3',
+  'diverging-neg-1': 'diverging.neg.1',
+  'diverging-neg-2': 'diverging.neg.2',
+  'diverging-neg-3': 'diverging.neg.3',
+  'diverging-mid': 'diverging.mid',
 };
 
 /** Exposed for tests and docs: every role token generated from the scheme table. */
@@ -249,6 +275,7 @@ function buildRefIndex(neutral: NeutralScale, secondary: SecondaryScale) {
   for (const hue of SYSTEM_HUE_NAMES)
     for (const [k, hex] of Object.entries(SYSTEM_HUES[hue]))
       add(hex, `${hue}.${k}`);
+  for (const [k, hex] of Object.entries(DATAVIZ)) add(hex, `dataviz.${k}`);
   // The brand black/cream anchors exist only on ink; reachable from any scheme.
   if (neutral !== 'ink') addScale('ink');
   return (hex: string) => index.get(hex.toUpperCase()) ?? hex;
@@ -421,6 +448,9 @@ export type SemanticColorToken =
   | `danger.${'solidHover' | 'solidActive'}`
   | `tooltip.${'bg' | 'fg'}`
   | `category.${Hue}.${'surface' | 'fg'}`
+  | `data.${1 | 2 | 3 | 4}`
+  | `diverging.${'pos' | 'neg'}.${1 | 2 | 3}`
+  | 'diverging.mid'
   | DeprecatedSemanticColorToken;
 
 /**

package/src/theme/contrast.test.ts

@@ -10,6 +10,7 @@ import {
 } from './colors';
 import { system } from './index';
 import { SCHEMES } from './palette.generated';
+import { DATA_VIZ_LABEL_TOKEN, DATA_VIZ_LABELS } from './paletteSwatches';
 
 /**
  * Contrast audit for the BAZE semantic tokens — the same check as section 3-1
@@ -137,6 +138,12 @@ const NO_PAIR: Record<string, string> = {
   track: 'unfilled track; the filled part (primary-main) carries the value',
 };
 
+// Data-viz fills (`data.*`, `diverging.*`) are registered through
+// DATA_VIZ_LABELS (paletteSwatches.ts): each fill with the in-cell label it may
+// carry. Audited at 4.5:1 in light and dark, like the category pairs: the fills
+// keep their value under high contrast (they are fills, like `track`), so an
+// in-cell label is not held to the 7:1 high-contrast text target.
+
 // ───────────────────────────── resolver ─────────────────────────────
 
 const lum = (h: string) => {
@@ -253,6 +260,30 @@ describe.each(SCHEME_NAMES)('contrast — %s scheme', (neutral) => {
     expect(failures).toEqual([]);
   });
 
+  it('data-viz fills: each in-cell label clears 4.5:1, and "no label" means neither does (light and dark)', () => {
+    const failures = Object.entries(DATA_VIZ_LABELS).flatMap(([fill, labels]) =>
+      (['light', 'dark'] as const).flatMap((mode) => {
+        const bg = flat(fill, mode);
+        const label = labels[mode];
+        if (label) {
+          const c = ratio(resolve(DATA_VIZ_LABEL_TOKEN[label], mode), bg);
+          return c >= 4.5
+            ? []
+            : [`${label} on ${fill} ${mode}: ${c.toFixed(2)}`];
+        }
+        const best = Math.max(
+          ...Object.values(DATA_VIZ_LABEL_TOKEN).map((t) =>
+            ratio(resolve(t, mode), bg)
+          )
+        );
+        return best < 4.5
+          ? []
+          : [`${fill} ${mode} has no label but one clears ${best.toFixed(2)}`];
+      })
+    );
+    expect(failures).toEqual([]);
+  });
+
   it('every deprecated 4.x name resolves to its replacement in all modes', () => {
     for (const [oldName, newName] of Object.entries(DEPRECATED_COLOR_TOKENS))
       for (const mode of MODES)
@@ -267,6 +298,7 @@ describe('contrast registry', () => {
     ...PAIRS.flatMap(([a, b]) => [a, b]),
     ...SEP.flatMap(([a, b]) => [a, b]),
     ...Object.keys(NO_PAIR),
+    ...Object.keys(DATA_VIZ_LABELS),
   ]);
 
   it('every role token has a contrast pair or a NO_PAIR reason', () => {

package/src/theme/palette.generated.ts

@@ -248,6 +248,17 @@ export const SYSTEM_HUES = {
   }
 } as const;
 
+/** Data-visualisation values that are not system-hue steps (`data.*`, `diverging.*`). */
+export const DATAVIZ = {
+  "blueMid": "#7492B3",
+  "blue1": "#A9C7EB",
+  "blue2": "#5890CD",
+  "blue3": "#2C5D91",
+  "orange1": "#E4BBA0",
+  "orange2": "#BF7946",
+  "orange3": "#85491A"
+} as const;
+
 /**
  * Resolved hex per semantic token, per neutral scheme, per mode. Keys are the
  * prototype's flat names (`layer-1-hover`, `primary-washActive`); the Chakra
@@ -332,6 +343,17 @@ export const SCHEMES = {
       "tooltip-bg": "#252525",
       "tooltip-fg": "#F5EDE0",
       "track": "#E5DFD9",
+      "data-1": "#DFEBF9",
+      "data-2": "#AFC7E1",
+      "data-3": "#7492B3",
+      "data-4": "#48607A",
+      "diverging-pos-1": "#A9C7EB",
+      "diverging-pos-2": "#5890CD",
+      "diverging-pos-3": "#2C5D91",
+      "diverging-neg-1": "#E4BBA0",
+      "diverging-neg-2": "#BF7946",
+      "diverging-neg-3": "#85491A",
+      "diverging-mid": "#EDE9E2",
       "border-control": "#8F8A82"
     },
     "dark": {
@@ -411,6 +433,17 @@ export const SCHEMES = {
       "tooltip-bg": "#E3D7C4",
       "tooltip-fg": "#252525",
       "track": "#48443E",
+      "data-1": "#232F3D",
+      "data-2": "#48607A",
+      "data-3": "#7492B3",
+      "data-4": "#AFC7E1",
+      "diverging-pos-1": "#2C5D91",
+      "diverging-pos-2": "#5890CD",
+      "diverging-pos-3": "#A9C7EB",
+      "diverging-neg-1": "#85491A",
+      "diverging-neg-2": "#BF7946",
+      "diverging-neg-3": "#E4BBA0",
+      "diverging-mid": "#38332E",
       "border-control": "#948F87"
     },
     "hcLight": {
@@ -490,6 +523,17 @@ export const SCHEMES = {
       "tooltip-bg": "#252525",
       "tooltip-fg": "#F5EDE0",
       "track": "#E5DFD9",
+      "data-1": "#DFEBF9",
+      "data-2": "#AFC7E1",
+      "data-3": "#7492B3",
+      "data-4": "#48607A",
+      "diverging-pos-1": "#A9C7EB",
+      "diverging-pos-2": "#5890CD",
+      "diverging-pos-3": "#2C5D91",
+      "diverging-neg-1": "#E4BBA0",
+      "diverging-neg-2": "#BF7946",
+      "diverging-neg-3": "#85491A",
+      "diverging-mid": "#EDE9E2",
       "border-control": "#726D65"
     },
     "hcDark": {
@@ -569,6 +613,17 @@ export const SCHEMES = {
       "tooltip-bg": "#E3D7C4",
       "tooltip-fg": "#252525",
       "track": "#48443E",
+      "data-1": "#232F3D",
+      "data-2": "#48607A",
+      "data-3": "#7492B3",
+      "data-4": "#AFC7E1",
+      "diverging-pos-1": "#2C5D91",
+      "diverging-pos-2": "#5890CD",
+      "diverging-pos-3": "#A9C7EB",
+      "diverging-neg-1": "#85491A",
+      "diverging-neg-2": "#BF7946",
+      "diverging-neg-3": "#E4BBA0",
+      "diverging-mid": "#38332E",
       "border-control": "#B6B1A9"
     }
   },
@@ -650,6 +705,17 @@ export const SCHEMES = {
       "tooltip-bg": "#1F2534",
       "tooltip-fg": "#ECEEF4",
       "track": "#DBE0EC",
+      "data-1": "#DFEBF9",
+      "data-2": "#AFC7E1",
+      "data-3": "#7492B3",
+      "data-4": "#48607A",
+      "diverging-pos-1": "#A9C7EB",
+      "diverging-pos-2": "#5890CD",
+      "diverging-pos-3": "#2C5D91",
+      "diverging-neg-1": "#E4BBA0",
+      "diverging-neg-2": "#BF7946",
+      "diverging-neg-3": "#85491A",
+      "diverging-mid": "#E6E9F3",
       "border-control": "#858B9C"
     },
     "dark": {
@@ -729,6 +795,17 @@ export const SCHEMES = {
       "tooltip-bg": "#D5D9E1",
       "tooltip-fg": "#252525",
       "track": "#40454E",
+      "data-1": "#232F3D",
+      "data-2": "#48607A",
+      "data-3": "#7492B3",
+      "data-4": "#AFC7E1",
+      "diverging-pos-1": "#2C5D91",
+      "diverging-pos-2": "#5890CD",
+      "diverging-pos-3": "#A9C7EB",
+      "diverging-neg-1": "#85491A",
+      "diverging-neg-2": "#BF7946",
+      "diverging-neg-3": "#E4BBA0",
+      "diverging-mid": "#30343C",
       "border-control": "#8A909B"
     },
     "hcLight": {
@@ -808,6 +885,17 @@ export const SCHEMES = {
       "tooltip-bg": "#1F2534",
       "tooltip-fg": "#ECEEF4",
       "track": "#DBE0EC",
+      "data-1": "#DFEBF9",
+      "data-2": "#AFC7E1",
+      "data-3": "#7492B3",
+      "data-4": "#48607A",
+      "diverging-pos-1": "#A9C7EB",
+      "diverging-pos-2": "#5890CD",
+      "diverging-pos-3": "#2C5D91",
+      "diverging-neg-1": "#E4BBA0",
+      "diverging-neg-2": "#BF7946",
+      "diverging-neg-3": "#85491A",
+      "diverging-mid": "#E6E9F3",
       "border-control": "#686E7E"
     },
     "hcDark": {
@@ -887,6 +975,17 @@ export const SCHEMES = {
       "tooltip-bg": "#D5D9E1",
       "tooltip-fg": "#252525",
       "track": "#40454E",
+      "data-1": "#232F3D",
+      "data-2": "#48607A",
+      "data-3": "#7492B3",
+      "data-4": "#AFC7E1",
+      "diverging-pos-1": "#2C5D91",
+      "diverging-pos-2": "#5890CD",
+      "diverging-pos-3": "#A9C7EB",
+      "diverging-neg-1": "#85491A",
+      "diverging-neg-2": "#BF7946",
+      "diverging-neg-3": "#E4BBA0",
+      "diverging-mid": "#30343C",
       "border-control": "#ACB2BD"
     }
   }

package/src/theme/paletteSwatches.ts

@@ -48,6 +48,41 @@ export const resolveColor = (value: unknown, mode: Mode, depth = 0): string => {
 
 export type Swatch = { path: string; light: string; dark: string };
 
+/** In-cell label colour on a data-viz fill: `ink.11` (#252525), white, or none. */
+export type DataVizLabel = 'ink' | 'white' | null;
+
+/** Raw token each label resolves to, in either mode. */
+export const DATA_VIZ_LABEL_TOKEN = { ink: 'ink.11', white: 'white' } as const;
+
+/**
+ * Data-visualisation fills (`data.*`, `diverging.*`, by flat key) and the label
+ * a chart may print inside each one, per mode — the tables in
+ * SemanticTokens.mdx. Picked per step by measured contrast (≥ 4.5:1), not by
+ * step number; `null` means neither label clears it, so the value goes outside
+ * the mark. `contrast.test.ts` audits every entry; the BAZE Palette Data Viz
+ * story renders from it.
+ */
+export type DataVizKey =
+  | `data-${1 | 2 | 3 | 4}`
+  | `diverging-${'pos' | 'neg'}-${1 | 2 | 3}`
+  | 'diverging-mid';
+
+export const DATA_VIZ_LABELS: Readonly<
+  Record<DataVizKey, { light: DataVizLabel; dark: DataVizLabel }>
+> = {
+  'data-1': { light: 'ink', dark: 'white' },
+  'data-2': { light: 'ink', dark: 'white' },
+  'data-3': { light: 'ink', dark: 'ink' },
+  'data-4': { light: 'white', dark: 'ink' },
+  'diverging-pos-1': { light: 'ink', dark: 'white' },
+  'diverging-pos-2': { light: 'ink', dark: 'ink' },
+  'diverging-pos-3': { light: 'white', dark: 'ink' },
+  'diverging-neg-1': { light: 'ink', dark: 'white' },
+  'diverging-neg-2': { light: null, dark: null },
+  'diverging-neg-3': { light: 'white', dark: 'ink' },
+  'diverging-mid': { light: 'ink', dark: 'white' },
+};
+
 /**
  * 5.0 semantic colours grouped by their first segment. Deprecated 4.x aliases
  * (including the whole 4.x `slate.*` step scale) and the internal high-contrast