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

package/src/components/noSandBackground.test.ts

@@ -0,0 +1,282 @@
+/* eslint-disable no-deprecated-tokens -- the strings below are fixtures for the pattern under test */
+import { readdirSync, readFileSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+/**
+ * The sand tint — `secondary.surface` (light #FBEFE3, reads peach) and
+ * `secondary.surfaceStrong` — is tint/accent only, never a component
+ * background (Sean, design-system owner). Components fill with the neutral
+ * grounds instead (`bg.subtle`, `bg.muted`, `layer.*`, `primary.wash` /
+ * `primary.selected`); a "secondary" variant keeps its identity through
+ * `secondary.border` / `secondary.fgStrong`.
+ *
+ * This scans every source file under `src/components` — stories included,
+ * tests excluded — for the sand token in any spelling (`'secondary.surface'`,
+ * `{colors.secondary.surface}`, `--chakra-colors-secondary-surface(-strong)`,
+ * and the 4.x aliases `secondary.extralight` / `secondary.lighter` that
+ * resolve to them) and fails when it is the value of a background property:
+ * `bg`, `bgColor`, `background`, `backgroundColor` (JSX prop, style object,
+ * `css` object, nested `_hover` / `_active` / `_selected`, responsive
+ * `{ base, md }` values). A use on a colour/border prop (`color`,
+ * `borderColor`, `fill` …) is allowed; any other spot (a constant, an
+ * unrecognised prop) is flagged too, because a bg reached through a variable
+ * is still a bg.
+ */
+
+const ROOT = join(__dirname);
+const REPO = join(__dirname, '..', '..');
+
+const SAND = new RegExp(
+  [
+    // dotted token, bare or inside `{colors.…}`
+    String.raw`(?<![\w$-])secondary\.(?:surface(?:Strong)?|extralight|lighter)(?![\w$])`,
+    // Chakra CSS variable
+    String.raw`--chakra-colors-secondary-(?:surface(?:-strong|Strong)?|extralight|lighter)(?![\w-])`,
+  ].join('|'),
+  'g'
+);
+
+const BG_PROPS = new Set([
+  'bg',
+  'bgColor',
+  'background',
+  'backgroundColor',
+  'bgGradient',
+  'bgImage',
+  'backgroundImage',
+]);
+
+/** Props where the tint is fine: text, borders, strokes. */
+const isTintProp = (key: string) =>
+  BG_PROPS.has(key)
+    ? false
+    : /color$/i.test(key) ||
+      /^border/.test(key) ||
+      /^outline/.test(key) ||
+      ['fill', 'stroke', 'boxShadow', 'hoverBorder', 'textShadow'].includes(
+        key
+      );
+
+/** Keys that only select a condition / breakpoint — the real prop is above. */
+const isConditionKey = (key: string) =>
+  /^_/.test(key) ||
+  /^[&@:[]/.test(key) ||
+  ['base', 'sm', 'md', 'lg', 'xl', '2xl'].includes(key);
+
+/** Blank out comments, keeping offsets (strings are left intact). */
+function stripComments(src: string): string {
+  const out = src.split('');
+  let i = 0;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === '"' || c === "'" || c === '`') {
+      const q = c;
+      i += 1;
+      while (i < src.length && src[i] !== q) i += src[i] === '\\' ? 2 : 1;
+      i += 1;
+    } else if (c === '/' && src[i + 1] === '/') {
+      while (i < src.length && src[i] !== '\n') out[i++] = ' ';
+    } else if (c === '/' && src[i + 1] === '*') {
+      const end = src.indexOf('*/', i + 2);
+      const stop = end === -1 ? src.length : end + 2;
+      for (; i < stop; i += 1) if (src[i] !== '\n') out[i] = ' ';
+    } else {
+      i += 1;
+    }
+  }
+  return out.join('');
+}
+
+const IDENT = /[\w$-]/;
+
+/**
+ * The property a value at `at` is assigned to: scan backwards, skipping
+ * strings and balanced brackets, to the nearest `key:` / `key=` at the same or
+ * an enclosing level. Condition keys (`_hover`, `base`, `'&:hover'` …) hop to
+ * the enclosing object's key. Returns null when none is found (`;`, start of
+ * file).
+ */
+function propertyAt(src: string, at: number): string | null {
+  let i = at;
+  // Step out of the string literal the match sits in.
+  while (i > 0 && !`'"\``.includes(src[i - 1]) && src[i - 1] !== '\n') i -= 1;
+  i -= 1;
+  let depth = 0;
+  let skipToOpener = false;
+  while (i > 0) {
+    i -= 1;
+    const c = src[i];
+    if (c === '"' || c === "'" || c === '`') {
+      i -= 1;
+      while (i > 0 && (src[i] !== c || src[i - 1] === '\\')) i -= 1;
+      continue;
+    }
+    if (')]}'.includes(c)) {
+      depth += 1;
+      continue;
+    }
+    if ('([{'.includes(c)) {
+      if (depth > 0) depth -= 1;
+      else skipToOpener = false; // left the enclosing scope
+      continue;
+    }
+    if (depth > 0 || skipToOpener) continue;
+    if (c === ';') return null;
+    if (c !== ':' && c !== '=') continue;
+    if (c === '=' && '=>'.includes(src[i + 1])) continue;
+    if (c === '=' && '=!<>'.includes(src[i - 1])) continue;
+    // Read the key before the separator: identifier or quoted string.
+    let j = i - 1;
+    while (j >= 0 && /\s/.test(src[j])) j -= 1;
+    let key = '';
+    if (src[j] === "'" || src[j] === '"') {
+      const q = src[j];
+      const end = j;
+      j -= 1;
+      while (j >= 0 && src[j] !== q) j -= 1;
+      key = src.slice(j + 1, end);
+      // A quoted string followed by `:` is a key only after `{` or `,`.
+      let k = j - 1;
+      while (k >= 0 && /\s/.test(src[k])) k -= 1;
+      if (!'{,'.includes(src[k])) continue;
+    } else {
+      const end = j + 1;
+      while (j >= 0 && IDENT.test(src[j])) j -= 1;
+      key = src.slice(j + 1, end);
+      if (!key) continue;
+      // `cond ? a : value` — `a` is not a key.
+      let k = j;
+      while (k >= 0 && /\s/.test(src[k])) k -= 1;
+      if (src[k] === '?') continue;
+    }
+    if (isConditionKey(key)) {
+      skipToOpener = true;
+      i = j + 1;
+      continue;
+    }
+    return key;
+  }
+  return null;
+}
+
+type SandHit = { line: number; key: string | null; text: string };
+
+/** Every background (or unclassified) use of the sand tint in `src`. */
+function findSandBackgrounds(src: string): SandHit[] {
+  const code = stripComments(src);
+  const hits: SandHit[] = [];
+  for (const m of code.matchAll(SAND)) {
+    const key = propertyAt(code, m.index ?? 0);
+    if (key && isTintProp(key)) continue;
+    const line = code.slice(0, m.index).split('\n').length;
+    hits.push({ line, key, text: src.split('\n')[line - 1].trim() });
+  }
+  return hits;
+}
+
+function* sourceFiles(dir: string): Generator<string> {
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) yield* sourceFiles(full);
+    else if (/\.(tsx?|mdx)$/.test(entry.name) && !/\.test\./.test(entry.name))
+      yield full;
+  }
+}
+
+/**
+ * Files allowed to keep a sand background, and why. Keep it short; an entry
+ * needs a reason a reviewer would accept.
+ */
+const ALLOWED: Record<string, string> = {};
+
+describe('no component uses the sand tint as a background', () => {
+  it('src/components has no secondary.surface / surfaceStrong background', () => {
+    const offenders: string[] = [];
+    for (const file of sourceFiles(ROOT)) {
+      const rel = relative(REPO, file);
+      if (rel in ALLOWED) continue;
+      for (const h of findSandBackgrounds(readFileSync(file, 'utf8')))
+        offenders.push(`${rel}:${h.line} [${h.key ?? '?'}] ${h.text}`);
+    }
+    expect(offenders).toEqual([]);
+  });
+
+  it('every ALLOWED entry is a real file', () => {
+    for (const rel of Object.keys(ALLOWED))
+      expect(() => readFileSync(join(REPO, rel))).not.toThrow();
+  });
+});
+
+describe('sand-background guard self-test', () => {
+  const flagged = (src: string) => findSandBackgrounds(src).map((h) => h.key);
+
+  it('catches the pre-fix ErrorFallback support box (JSX prop)', () => {
+    // Verbatim from ErrorFallback.tsx before the fix.
+    const old = `
+            {/* Support Information */}
+            <Card
+              bg="secondary.surface"
+              borderColor="secondary.border"
+              p={6}
+              w="full"
+            >`;
+    expect(flagged(old)).toEqual(['bg']);
+  });
+
+  it('catches every other pre-fix site shape', () => {
+    expect(
+      flagged(
+        `neutral: {\n    bgColor: 'secondary.surface',\n    color: 'secondary.fgStrong',\n  },`
+      )
+    ).toEqual(['bgColor']);
+    expect(
+      flagged(`{...(isBrand && { bg: 'secondary.surfaceStrong' })}`)
+    ).toEqual(['bg']);
+    expect(
+      flagged(
+        `isInRangeBtnProps: {\n  color: 'fg.default',\n  background: 'secondary.surfaceStrong',\n}`
+      )
+    ).toEqual(['background']);
+    expect(
+      flagged(
+        `if (!hue) return { bg: 'secondary.surface', color: 'secondary.fgStrong' };`
+      )
+    ).toEqual(['bg']);
+  });
+
+  it('catches nested conditions, responsive values, css objects and vars', () => {
+    expect(flagged(`_hover: { bg: 'secondary.surface' }`)).toEqual(['bg']);
+    expect(
+      flagged(
+        `_selected: { _hover: { backgroundColor: 'secondary.surfaceStrong' } }`
+      )
+    ).toEqual(['backgroundColor']);
+    expect(
+      flagged(`bg={{ base: 'bg.canvas', xl: 'secondary.extralight' }}`)
+    ).toEqual(['bg']);
+    expect(
+      flagged(
+        `css={{ '&:hover': { background: 'var(--chakra-colors-secondary-surface-strong)' } }}`
+      )
+    ).toEqual(['background']);
+    expect(flagged(`bg: '{colors.secondary.surface}'`)).toEqual(['bg']);
+    expect(flagged(`bg={on ? 'bg.muted' : 'secondary.lighter'}`)).toEqual([
+      'bg',
+    ]);
+    expect(flagged(`const WASH = 'secondary.surface';`)).toEqual(['WASH']);
+  });
+
+  it('allows the tint on text/border props and in comments', () => {
+    expect(flagged(`color: 'secondary.surface'`)).toEqual([]);
+    expect(flagged(`borderColor="secondary.surfaceStrong"`)).toEqual([]);
+    expect(flagged(`_hover: { borderColor: 'secondary.surface' }`)).toEqual([]);
+    expect(
+      flagged(`// bg: 'secondary.surface'\n/* bg="secondary.surface" */`)
+    ).toEqual([]);
+    expect(
+      flagged(`bg: 'secondary.border', color: 'secondary.fgStrong'`)
+    ).toEqual([]);
+    expect(flagged(`bg: 'category.blue.surface'`)).toEqual([]);
+  });
+});

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './components/ColorMode';
 export * from './components/Confetti';
 export * from './components/Container';
 export * from './components/CopyableCode';
+export * from './components/CountBadge';
 export * from './components/CountUp';
 export * from './components/DatePicker';
 export * from './components/ErrorFallback';
@@ -141,11 +142,25 @@ export type { LanguageContextValue } from './hooks/useLanguage';
 export { LanguageContext, useLanguage } from './hooks/useLanguage';
 
 // Theme exports
-export { logicianConfig, system, theme } from './theme';
+export {
+  createLogicianTheme,
+  logicianConfig,
+  type LogicianThemeOptions,
+  normalizeSemanticOverrides,
+  system,
+  theme,
+} from './theme';
 export {
   colors,
+  createSemanticColors,
+  DEPRECATED_COLOR_TOKENS,
+  type DeprecatedSemanticColorToken,
+  type NeutralScale,
+  type SecondaryScale,
   type SemanticColorToken,
   semanticTokens,
+  SYSTEM_HUE_NAMES,
+  type SystemHue,
 } from './theme/colors';
 export { noZoomOnFocus } from './theme/formControls';
 export {
@@ -162,6 +177,8 @@ export {
   type MotionStyleToken,
 } from './theme/motion';
 export { cubicBezier } from './utils/cubicBezier';
+export { disabledControl, disabledText } from './utils/disabledControl';
+export { FOCUS_RING_SHADOW, focusRing } from './utils/focusRing';
 export {
   staggerDelayMs,
   type StaggerProps,

package/src/stories/SizeComparison.stories.tsx

@@ -43,7 +43,7 @@ export const ButtonVsSegmentedControlVsInput: Story = {
           <Text w="8" fontSize="sm" color="gray.500" fontFamily="mono">
             {size}
           </Text>
-          <Button size={size} colorPalette="neutral" variant="outline" w="32">
+          <Button size={size} variant="secondary" w="32">
             Button
           </Button>
           <SegmentedControl

package/src/theme/BazePalette.stories.tsx

@@ -0,0 +1,202 @@
+import { Box, Flex, Grid, Stack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { H4, Subtext, Text } from '../components/Typography';
+import {
+  DEPRECATED_COLOR_TOKENS,
+  ROLE_TOKEN_PATHS,
+  SYSTEM_HUE_NAMES,
+} from './colors';
+import { CORAL, RAMPS, SCHEMES, SYSTEM_HUES } from './palette.generated';
+
+/**
+ * logician-ui 5.0 BAZE palette — the three token layers.
+ *
+ * Every value here is read from `palette.generated.ts` (the generator output
+ * that `contrast.test.ts` audits), so this page cannot drift from the theme.
+ * Role tokens are shown for light / dark / high-contrast light / high-contrast
+ * dark; high contrast applies under `prefers-contrast: more`.
+ */
+const meta: Meta = {
+  title: 'Setup/Theme/BAZE Palette',
+  parameters: { layout: 'padded' },
+};
+export default meta;
+type Story = StoryObj;
+
+const lum = (h: string) => {
+  const c = [1, 3, 5]
+    .map((i) => parseInt(h.slice(i, i + 2), 16) / 255)
+    .map((x) => (x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+};
+const ratio = (a: string, b: string) => {
+  const [x, y] = [lum(a), lum(b)];
+  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+};
+const ink = (hex: string) =>
+  hex.startsWith('#') && lum(hex) < 0.18 ? '#F5EDE0' : '#252525';
+
+const Chip = ({ hex, label }: { hex: string; label?: string }) => (
+  <Box
+    bg={hex}
+    color={hex.startsWith('#') ? ink(hex) : 'fg.default'}
+    borderRadius="sm"
+    px={2}
+    py={1.5}
+    fontSize="11px"
+    fontFamily="mono"
+    borderWidth="1px"
+    borderColor="blackAlpha.100"
+  >
+    {label && <b>{label} </b>}
+    {hex.replace('#', '')}
+  </Box>
+);
+
+const Ramp = ({
+  name,
+  steps,
+  canvas,
+}: {
+  name: string;
+  steps: Record<string, string>;
+  canvas: string;
+}) => (
+  <Stack gap={1}>
+    <Subtext>
+      {name} (vs {canvas})
+    </Subtext>
+    <Grid templateColumns="repeat(12, 1fr)" gap={1}>
+      {Object.entries(steps).map(([step, hex]) => (
+        <Box key={step}>
+          <Chip hex={hex} label={step} />
+          <Subtext fontSize="10px">{ratio(hex, canvas).toFixed(2)}</Subtext>
+        </Box>
+      ))}
+    </Grid>
+  </Stack>
+);
+
+/** Raw scales — colour names. Components never read these directly. */
+export const RawScales: Story = {
+  render: () => (
+    <Stack gap={6} maxW="1100px">
+      <Text>
+        Step number = job: 1–3 backgrounds, 4–6 dividers/borders, 7 control
+        border (3:1), 8 icon/placeholder (4.5:1), 9–11 text, 12 maximum. ink 11
+        is the brand black anchor #252525.
+      </Text>
+      {(['ink', 'sand', 'slate'] as const).map((n) => (
+        <Stack key={n} gap={2}>
+          <H4>{n}</H4>
+          <Ramp name={`${n}.1–12`} steps={RAMPS[n].light} canvas="#FFFFFF" />
+          <Ramp
+            name={`${n}Dark.1–12`}
+            steps={RAMPS[n].dark}
+            canvas={RAMPS[n].canvasDark}
+          />
+        </Stack>
+      ))}
+      <H4>coral</H4>
+      <Flex gap={2} wrap="wrap">
+        {Object.entries(CORAL).map(([k, hex]) => (
+          <Chip key={k} hex={hex} label={k} />
+        ))}
+      </Flex>
+      <H4>system hues</H4>
+      <Grid templateColumns="120px repeat(8, 1fr)" gap={1} fontSize="11px">
+        <span />
+        {Object.keys(SYSTEM_HUES.red).map((k) => (
+          <Subtext key={k}>{k}</Subtext>
+        ))}
+        {SYSTEM_HUE_NAMES.map((hue) => (
+          <Box key={hue} display="contents">
+            <Text>{hue}</Text>
+            {Object.entries(SYSTEM_HUES[hue]).map(([k, hex]) => (
+              <Chip key={k} hex={hex} />
+            ))}
+          </Box>
+        ))}
+      </Grid>
+    </Stack>
+  ),
+};
+
+/** Role tokens in all four modes (BAZE scheme: neutral = ink, secondary = sand). */
+export const RoleTokens: Story = {
+  render: () => (
+    <Grid
+      templateColumns="220px repeat(4, 1fr)"
+      gap={1}
+      maxW="1100px"
+      alignItems="center"
+    >
+      {['token', 'light', 'dark', 'hc light', 'hc dark'].map((h) => (
+        <Subtext key={h} fontWeight="bold">
+          {h}
+        </Subtext>
+      ))}
+      {Object.entries(ROLE_TOKEN_PATHS).map(([flat, path]) => (
+        <Box key={flat} display="contents">
+          <Text fontFamily="mono" fontSize="12px">
+            {path.replace(/\.DEFAULT$/, '')}
+          </Text>
+          {(['light', 'dark', 'hcLight', 'hcDark'] as const).map((m) => (
+            <Chip
+              key={m}
+              hex={
+                (SCHEMES.ink[m] as Record<string, string>)[flat] ??
+                'transparent'
+              }
+            />
+          ))}
+        </Box>
+      ))}
+    </Grid>
+  ),
+};
+
+/** Live tokens on this page's colour mode — flip the toolbar to check dark. */
+export const Category: Story = {
+  render: () => (
+    <Flex gap={2} wrap="wrap">
+      {SYSTEM_HUE_NAMES.map((hue) => (
+        <Box
+          key={hue}
+          bg={`category.${hue}.surface`}
+          color="fg.default"
+          borderRadius="full"
+          px={3}
+          py={1}
+        >
+          <Box as="span" color={`category.${hue}.fg`} fontWeight="bold">
+            Aa
+          </Box>{' '}
+          {hue}
+        </Box>
+      ))}
+    </Flex>
+  ),
+};
+
+/** 4.x names kept as deprecated aliases in 5.0 (removed in 6.0). */
+export const DeprecatedAliases: Story = {
+  render: () => (
+    <Grid
+      templateColumns="220px 220px"
+      gap={1}
+      fontFamily="mono"
+      fontSize="12px"
+    >
+      <Subtext fontWeight="bold">4.x</Subtext>
+      <Subtext fontWeight="bold">5.0</Subtext>
+      {Object.entries(DEPRECATED_COLOR_TOKENS).map(([o, n]) => (
+        <Box key={o} display="contents">
+          <span>{o}</span>
+          <span>{n}</span>
+        </Box>
+      ))}
+    </Grid>
+  ),
+};

package/src/theme/Borders.stories.tsx

@@ -26,9 +26,9 @@ import { H3, H4, Subtext, Text } from '../components/Typography';
  * The roles resolve to:
  * | role | light | intended use |
  * | --- | --- | --- |
- * | `border.subtle` | `gray.200` | low-emphasis dividers, row separators |
- * | `border.default` | `gray.300` | standard borders: inputs, cards, panels |
- * | `border.strong` | `gray.500` | high-emphasis: hover/focus on neutral controls |
+ * | `border.subtle` | `neutral.4` | low-emphasis dividers, row separators |
+ * | `border.default` | `neutral.5` | standard borders: cards, panels (inputs use `border.control`) |
+ * | `border.strong` | `neutral.6` | high-emphasis: hover/focus on neutral controls |
  *
  * These stories are intentionally not bound to a single component — they exist
  * to validate that borders read as a coherent system across a page rather than
@@ -60,9 +60,9 @@ const PLAN_OPTIONS = [
 export const RoleReference: Story = {
   render: () => {
     const roles = [
-      { token: 'border.subtle', light: 'gray.200', use: 'dividers' },
-      { token: 'border.default', light: 'gray.300', use: 'inputs, cards' },
-      { token: 'border.strong', light: 'gray.500', use: 'hover / focus' },
+      { token: 'border.subtle', light: 'neutral.4', use: 'dividers' },
+      { token: 'border.default', light: 'neutral.5', use: 'inputs, cards' },
+      { token: 'border.strong', light: 'neutral.6', use: 'hover / focus' },
     ] as const;
 
     const Swatches = ({ surface }: { surface: 'bg.surface' | 'bg.canvas' }) => (
@@ -207,10 +207,10 @@ export const SettingsForm: Story = {
 
               {/* Footer */}
               <HStack justify="flex-end" gap={3} p={6}>
-                <Button colorPalette="neutral" variant="outline">
+                <Button variant="secondary">
                   Cancel
                 </Button>
-                <Button colorPalette="primary" variant="solid">
+                <Button variant="primary">
                   Save changes
                 </Button>
               </HStack>
@@ -290,7 +290,7 @@ export const Dashboard: Story = {
               borderColor="border.subtle"
             >
               <Text fontWeight="600">Recent</Text>
-              <Button colorPalette="neutral" variant="ghost" size="sm">
+              <Button variant="ghost" size="sm">
                 View all
               </Button>
             </HStack>