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

package/src/theme/palette.generated.ts

@@ -20,25 +20,28 @@ export const RAMPS = {
       "12": "#171615"
     },
     "dark": {
-      "1": "#282622",
-      "2": "#302D28",
-      "3": "#38332E",
-      "4": "#3F3B34",
-      "5": "#48443E",
-      "6": "#57524B",
-      "7": "#716C66",
-      "8": "#8F8982",
-      "9": "#B2ACA5",
-      "10": "#D3CDC4",
-      "11": "#ECE2D5",
-      "12": "#FCF2E3"
+      "1": "#202020",
+      "2": "#282828",
+      "3": "#2E2F2F",
+      "4": "#363636",
+      "5": "#3F403F",
+      "6": "#4E4E4D",
+      "7": "#696866",
+      "8": "#868481",
+      "9": "#A9A6A3",
+      "10": "#C9C6C1",
+      "11": "#DFDBD6",
+      "12": "#EEEBE5"
     },
-    "canvasDark": "#1F1E1D",
+    "canvasDark": "#171717",
     "anchors": {
       "cream": "#F5EDE0",
       "press": "#2E2A25",
-      "primaryDark": "#E3D7C4",
-      "pressDark": "#D6C8B2"
+      "fgDark": "#E8E6E3",
+      "fgHcDark": "#F2F0ED",
+      "primaryDark": "#D6D3CD",
+      "primaryHoverDark": "#EBE8E3",
+      "pressDark": "#C5C2BC"
     }
   },
   "sand": {
@@ -57,20 +60,20 @@ export const RAMPS = {
       "12": "#1D150A"
     },
     "dark": {
-      "1": "#2A2620",
-      "2": "#342C24",
-      "3": "#3B332A",
-      "4": "#44392E",
-      "5": "#4F4334",
-      "6": "#644F39",
-      "7": "#81694C",
-      "8": "#A18565",
-      "9": "#C4A989",
-      "10": "#E2CAAE",
-      "11": "#F3E1CC",
-      "12": "#FFF1E3"
+      "1": "#22201D",
+      "2": "#2B2724",
+      "3": "#322E29",
+      "4": "#3B3530",
+      "5": "#453F38",
+      "6": "#554D44",
+      "7": "#71665B",
+      "8": "#8F8374",
+      "9": "#B3A595",
+      "10": "#D2C4B5",
+      "11": "#E5DACE",
+      "12": "#F1EAE1"
     },
-    "canvasDark": "#1F1E1D",
+    "canvasDark": "#171717",
     "anchors": {}
   },
   "slate": {
@@ -248,6 +251,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
@@ -304,6 +318,7 @@ export const SCHEMES = {
       "count-fg": "#FFFFFF",
       "disabled-bg": "#EDEDED",
       "disabled-fg": "#8A8A8A",
+      "disabled-fgGhost": "#C2C2C2",
       "fg-link": "#48607A",
       "fg-linkHover": "#295684",
       "focus": "#252525",
@@ -332,49 +347,60 @@ 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": {
-      "bg-canvas": "#1F1E1D",
-      "layer-1": "#302D28",
-      "layer-1-hover": "#38332E",
-      "layer-1-active": "#3F3B34",
-      "layer-2": "#3F3B34",
-      "layer-2-hover": "#48443E",
-      "layer-2-active": "#57524B",
-      "layer-3": "#48443E",
-      "layer-3-hover": "#57524B",
-      "layer-3-active": "#716C66",
-      "bg-subtle": "#282622",
-      "bg-surface": "#302D28",
-      "bg-muted": "#38332E",
-      "border-subtle": "#3F3B34",
-      "border-default": "#48443E",
-      "border-strong": "#57524B",
-      "fg-default": "#F5EDE0",
-      "fg-muted": "#D3CDC4",
-      "fg-subtle": "#B7B1AA",
-      "fg-icon": "#958F88",
-      "fg-placeholder": "#99938C",
+      "bg-canvas": "#171717",
+      "layer-1": "#282828",
+      "layer-1-hover": "#2E2F2F",
+      "layer-1-active": "#363636",
+      "layer-2": "#363636",
+      "layer-2-hover": "#3F403F",
+      "layer-2-active": "#4E4E4D",
+      "layer-3": "#3F403F",
+      "layer-3-hover": "#4E4E4D",
+      "layer-3-active": "#696866",
+      "bg-subtle": "#202020",
+      "bg-surface": "#282828",
+      "bg-muted": "#2E2F2F",
+      "border-subtle": "#363636",
+      "border-default": "#3F403F",
+      "border-strong": "#4E4E4D",
+      "fg-default": "#E8E6E3",
+      "fg-muted": "#C9C6C1",
+      "fg-subtle": "#ADAAA7",
+      "fg-icon": "#8C8A87",
+      "fg-placeholder": "#908E8B",
       "fg-onPrimary": "#252525",
-      "primary-main": "#E3D7C4",
-      "primary-hover": "#F5EDE0",
-      "primary-active": "#D6C8B2",
-      "primary-wash": "#302D28",
-      "primary-washActive": "#38332E",
-      "primary-selected": "#48443E",
-      "secondary-surface": "#3B332A",
-      "secondary-surfaceStrong": "#44392E",
-      "secondary-border": "#644F39",
-      "secondary-fg": "#C4A989",
-      "secondary-fgStrong": "#E2CAAE",
+      "primary-main": "#D6D3CD",
+      "primary-hover": "#EBE8E3",
+      "primary-active": "#C5C2BC",
+      "primary-wash": "#282828",
+      "primary-washActive": "#2E2F2F",
+      "primary-selected": "#3F403F",
+      "secondary-surface": "#322E29",
+      "secondary-surfaceStrong": "#3B3530",
+      "secondary-border": "#554D44",
+      "secondary-fg": "#B3A595",
+      "secondary-fgStrong": "#D2C4B5",
       "action-mark": "#FF8680",
       "action-iconOnSolid": "#FF8680",
-      "action-bg": "#38332E",
-      "action-bgHover": "#3F3B34",
-      "action-bgActive": "#302D28",
-      "action-fg": "#FFFFFF",
-      "action-border": "#716C66",
+      "action-bg": "#2E2F2F",
+      "action-bgHover": "#363636",
+      "action-bgActive": "#282828",
+      "action-fg": "#E8E6E3",
+      "action-border": "#696866",
       "send-bg": "#EE8580",
       "send-bgHover": "#F79A95",
       "send-bgActive": "#DC766F",
@@ -383,9 +409,10 @@ export const SCHEMES = {
       "count-fg": "#FFFFFF",
       "disabled-bg": "#2C2C2C",
       "disabled-fg": "#737373",
+      "disabled-fgGhost": "#4A4A4A",
       "fg-link": "#AFC7E1",
       "fg-linkHover": "#8BB7E3",
-      "focus": "#E3D7C4",
+      "focus": "#D6D3CD",
       "danger-bg": "#47211E",
       "danger-border": "#6E3530",
       "danger-fg": "#F5B9B6",
@@ -408,10 +435,21 @@ export const SCHEMES = {
       "info-fg": "#8BB7E3",
       "info-solid": "#6892BD",
       "info-onSolid": "#1B1B1B",
-      "tooltip-bg": "#E3D7C4",
+      "tooltip-bg": "#D6D3CD",
       "tooltip-fg": "#252525",
-      "track": "#48443E",
-      "border-control": "#948F87"
+      "track": "#3F403F",
+      "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": "#2E2F2F",
+      "border-control": "#8A8A88"
     },
     "hcLight": {
       "bg-canvas": "#FFFFFF",
@@ -462,6 +500,7 @@ export const SCHEMES = {
       "count-fg": "#FFFFFF",
       "disabled-bg": "#EDEDED",
       "disabled-fg": "#8A8A8A",
+      "disabled-fgGhost": "#C2C2C2",
       "fg-link": "#3B536C",
       "fg-linkHover": "#265381",
       "focus": "#252525",
@@ -490,49 +529,60 @@ 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": {
-      "bg-canvas": "#1F1E1D",
-      "layer-1": "#302D28",
-      "layer-1-hover": "#38332E",
-      "layer-1-active": "#3F3B34",
-      "layer-2": "#3F3B34",
-      "layer-2-hover": "#48443E",
-      "layer-2-active": "#57524B",
-      "layer-3": "#48443E",
-      "layer-3-hover": "#57524B",
-      "layer-3-active": "#716C66",
-      "bg-subtle": "#282622",
-      "bg-surface": "#302D28",
-      "bg-muted": "#38332E",
-      "border-subtle": "#3F3B34",
-      "border-default": "#938F88",
-      "border-strong": "#57524B",
-      "fg-default": "#F5EDE0",
-      "fg-muted": "#E1DBD2",
-      "fg-subtle": "#E1DBD3",
-      "fg-icon": "#B7B0A9",
-      "fg-placeholder": "#BFB9B2",
+      "bg-canvas": "#171717",
+      "layer-1": "#282828",
+      "layer-1-hover": "#2E2F2F",
+      "layer-1-active": "#363636",
+      "layer-2": "#363636",
+      "layer-2-hover": "#3F403F",
+      "layer-2-active": "#4E4E4D",
+      "layer-3": "#3F403F",
+      "layer-3-hover": "#4E4E4D",
+      "layer-3-active": "#696866",
+      "bg-subtle": "#202020",
+      "bg-surface": "#282828",
+      "bg-muted": "#2E2F2F",
+      "border-subtle": "#363636",
+      "border-default": "#898A89",
+      "border-strong": "#4E4E4D",
+      "fg-default": "#F2F0ED",
+      "fg-muted": "#E5E2DC",
+      "fg-subtle": "#D7D3D0",
+      "fg-icon": "#ADAAA7",
+      "fg-placeholder": "#B5B3B0",
       "fg-onPrimary": "#252525",
-      "primary-main": "#E3D7C4",
-      "primary-hover": "#F5EDE0",
-      "primary-active": "#D6C8B2",
-      "primary-wash": "#302D28",
-      "primary-washActive": "#38332E",
-      "primary-selected": "#48443E",
-      "secondary-surface": "#3B332A",
-      "secondary-surfaceStrong": "#44392E",
-      "secondary-border": "#644F39",
-      "secondary-fg": "#F3D7B6",
-      "secondary-fgStrong": "#E2CAAE",
-      "action-mark": "#FF938C",
+      "primary-main": "#D6D3CD",
+      "primary-hover": "#EBE8E3",
+      "primary-active": "#C5C2BC",
+      "primary-wash": "#282828",
+      "primary-washActive": "#2E2F2F",
+      "primary-selected": "#3F403F",
+      "secondary-surface": "#322E29",
+      "secondary-surfaceStrong": "#3B3530",
+      "secondary-border": "#554D44",
+      "secondary-fg": "#E1D2C1",
+      "secondary-fgStrong": "#D2C4B5",
+      "action-mark": "#FF8882",
       "action-iconOnSolid": "#FF8680",
-      "action-bg": "#38332E",
-      "action-bgHover": "#3F3B34",
-      "action-bgActive": "#302D28",
-      "action-fg": "#FFFFFF",
-      "action-border": "#716C66",
+      "action-bg": "#2E2F2F",
+      "action-bgHover": "#363636",
+      "action-bgActive": "#282828",
+      "action-fg": "#F2F0ED",
+      "action-border": "#696866",
       "send-bg": "#FC928C",
       "send-bgHover": "#F79A95",
       "send-bgActive": "#FC938B",
@@ -541,9 +591,10 @@ export const SCHEMES = {
       "count-fg": "#FFFFFF",
       "disabled-bg": "#2C2C2C",
       "disabled-fg": "#737373",
-      "fg-link": "#C6DEF9",
-      "fg-linkHover": "#B4E2FF",
-      "focus": "#E3D7C4",
+      "disabled-fgGhost": "#4A4A4A",
+      "fg-link": "#BED7F1",
+      "fg-linkHover": "#ACD9FF",
+      "focus": "#D6D3CD",
       "danger-bg": "#47211E",
       "danger-border": "#A2645D",
       "danger-fg": "#F5B9B6",
@@ -566,10 +617,21 @@ export const SCHEMES = {
       "info-fg": "#92BFEB",
       "info-solid": "#7FAAD6",
       "info-onSolid": "#1B1B1B",
-      "tooltip-bg": "#E3D7C4",
+      "tooltip-bg": "#D6D3CD",
       "tooltip-fg": "#252525",
-      "track": "#48443E",
-      "border-control": "#B6B1A9"
+      "track": "#3F403F",
+      "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": "#2E2F2F",
+      "border-control": "#ABABA9"
     }
   },
   "slate": {
@@ -622,6 +684,7 @@ export const SCHEMES = {
       "count-fg": "#FFFFFF",
       "disabled-bg": "#EDEDED",
       "disabled-fg": "#8A8A8A",
+      "disabled-fgGhost": "#C2C2C2",
       "fg-link": "#48607A",
       "fg-linkHover": "#295684",
       "focus": "#1F2534",
@@ -650,6 +713,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": {
@@ -681,11 +755,11 @@ export const SCHEMES = {
       "primary-wash": "#2A2E35",
       "primary-washActive": "#30343C",
       "primary-selected": "#40454E",
-      "secondary-surface": "#3B332A",
-      "secondary-surfaceStrong": "#44392E",
-      "secondary-border": "#644F39",
-      "secondary-fg": "#C4A989",
-      "secondary-fgStrong": "#E2CAAE",
+      "secondary-surface": "#322E29",
+      "secondary-surfaceStrong": "#3B3530",
+      "secondary-border": "#554D44",
+      "secondary-fg": "#B3A595",
+      "secondary-fgStrong": "#D2C4B5",
       "action-mark": "#FF8680",
       "action-iconOnSolid": "#FF8680",
       "action-bg": "#30343C",
@@ -701,6 +775,7 @@ export const SCHEMES = {
       "count-fg": "#FFFFFF",
       "disabled-bg": "#2C2C2C",
       "disabled-fg": "#737373",
+      "disabled-fgGhost": "#4A4A4A",
       "fg-link": "#AFC7E1",
       "fg-linkHover": "#8BB7E3",
       "focus": "#D5D9E1",
@@ -729,6 +804,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": {
@@ -780,6 +866,7 @@ export const SCHEMES = {
       "count-fg": "#FFFFFF",
       "disabled-bg": "#EDEDED",
       "disabled-fg": "#8A8A8A",
+      "disabled-fgGhost": "#C2C2C2",
       "fg-link": "#3C536C",
       "fg-linkHover": "#265381",
       "focus": "#1F2534",
@@ -808,6 +895,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": {
@@ -839,11 +937,11 @@ export const SCHEMES = {
       "primary-wash": "#2A2E35",
       "primary-washActive": "#30343C",
       "primary-selected": "#40454E",
-      "secondary-surface": "#3B332A",
-      "secondary-surfaceStrong": "#44392E",
-      "secondary-border": "#644F39",
-      "secondary-fg": "#F4D8B6",
-      "secondary-fgStrong": "#E2CAAE",
+      "secondary-surface": "#322E29",
+      "secondary-surfaceStrong": "#3B3530",
+      "secondary-border": "#554D44",
+      "secondary-fg": "#E9DAC9",
+      "secondary-fgStrong": "#D2C4B5",
       "action-mark": "#FF938D",
       "action-iconOnSolid": "#FF8680",
       "action-bg": "#30343C",
@@ -859,6 +957,7 @@ export const SCHEMES = {
       "count-fg": "#FFFFFF",
       "disabled-bg": "#2C2C2C",
       "disabled-fg": "#737373",
+      "disabled-fgGhost": "#4A4A4A",
       "fg-link": "#C7DFFA",
       "fg-linkHover": "#B4E2FF",
       "focus": "#D5D9E1",
@@ -887,6 +986,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.test.ts

@@ -32,7 +32,7 @@ describe('Setup/Theme → Default swatches', () => {
   });
 
   it('follows semantic → semantic references per mode', () => {
-    // fg.default → neutral.11 (light) / cream-ish (dark): two different hexes.
+    // fg.default → neutral.11 (light) / off-white (dark): two different hexes.
     const light = resolveColor('{colors.fg.default}', 'light');
     const dark = resolveColor('{colors.fg.default}', 'dark');
     expect(light).toMatch(/^#[0-9a-f]{6}$/i);

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

package/src/theme/recipes/avatar.ts

@@ -0,0 +1,92 @@
+import { defineSlotRecipe } from '@chakra-ui/react';
+
+/**
+ * Logician overrides for Chakra's `avatar` slot recipe (merged over it, so
+ * Chakra's `size` and `shape` variants and `--avatar-size` stay as they are).
+ *
+ * **The root owns the circle.** Chakra sizes only the root (`--avatar-size`)
+ * and gives `fallback` no width or height, so a fill painted on the fallback
+ * covers just the glyph box — a dark disc with a small light pill around the
+ * initial. Here the root carries the fill, the text colour, the hairline
+ * border and `overflow: hidden`, and the fallback fills the root and centres
+ * its content, so `Avatar.Root` + `Avatar.Fallback` render correctly with no
+ * styling at the call site.
+ *
+ * **Colour comes from `colorPalette`.** The default (`subtle`) variant reads
+ * `colorPalette.surface` / `colorPalette.fg`, and a `category.{hue}` palette
+ * resolves those to the `category.{hue}.surface` / `.fg` pair (Chakra derives
+ * a palette from every token-path prefix, so `colorPalette="category.blue"`
+ * is a real palette). `Avatar` passes `category.<hueForName(name)>`; with no
+ * name the palette is `category.neutral` (`bg.muted` / `secondary.fgStrong`),
+ * which is also this recipe's own default, so a bare `Avatar.Root` never
+ * inherits an ancestor's palette and never turns red.
+ *
+ * `variant="logo"` is the light tile for model, chatbot and brand marks:
+ * `bg.logo` in both modes, `fg.onLogo` for any initials, the fallback icon
+ * centred. Chakra's `solid` / `outline` keep working on a category palette
+ * by falling back onto the same `surface` / `fg` pair.
+ */
+/**
+ * `colorPalette.<key>`, falling back to `colorPalette.<fallback>` when the
+ * active palette has no `<key>` (Chakra sets a palette's vars only for the
+ * keys it defines). Raw vars because Chakra's token syntax has no fallback.
+ */
+const palette = (key: string, fallback: string) =>
+  `var(--chakra-colors-color-palette-${key}, var(--chakra-colors-color-palette-${fallback}))`;
+
+export const avatarSlotRecipe = defineSlotRecipe({
+  slots: ['root', 'image', 'fallback'],
+  base: {
+    root: {
+      // The no-name palette, as a style rather than `defaultVariants`: Chakra
+      // feeds a default `colorPalette` only to the recipe function, never to
+      // the element, so it would not reach `colorPalette.*` here. A caller's
+      // `colorPalette` prop is a style prop and overrides this (style props
+      // land outside the `recipes` layer).
+      colorPalette: 'category.neutral',
+      borderWidth: '1px',
+      borderColor: 'border.subtle',
+      overflow: 'hidden',
+    },
+    fallback: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'inherit',
+    },
+  },
+  variants: {
+    variant: {
+      // Chakra's default variant; Chakra paints it `colorPalette.muted`, which
+      // a category palette does not have — so `surface` first, `muted` for a
+      // Chakra palette a caller passes (`colorPalette="blue"`).
+      subtle: {
+        root: {
+          bg: palette('surface', 'muted'),
+          color: 'colorPalette.fg',
+        },
+      },
+      // Chakra's `solid` / `outline` read `solid` / `contrast` / `border`; a
+      // category palette has only `surface` / `fg`, so each falls back onto the
+      // pair (solid = the pair inverted, still ≥ 4.5:1).
+      solid: {
+        root: {
+          bg: palette('solid', 'fg'),
+          color: palette('contrast', 'surface'),
+        },
+      },
+      outline: {
+        root: {
+          bg: 'transparent',
+          color: 'colorPalette.fg',
+          borderColor: palette('border', 'fg'),
+        },
+      },
+      logo: {
+        root: { bg: 'bg.logo', color: 'fg.onLogo' },
+      },
+    },
+  },
+});