@scattered-light/loomiere 0.0.0-stage → 0.1.0

package/exporters/chakra.mjs

@@ -0,0 +1,630 @@
+/**
+ * Chakra UI v3 system: every brand palette as a Chakra color palette, plus recipe overrides
+ * that give Chakra's components the same look as loomiere-base-ui: Button variants are the
+ * brand's emphasis levels, inputs are the field concept, menus are popups and rows, and so
+ * on. Tokens and recipes read the theme's --sl- variables, so load tokens.css too.
+ *   import { ChakraProvider } from '@chakra-ui/react';
+ *   import { system } from './theme/exports/chakra.js';
+ *   <ChakraProvider value={system}>…</ChakraProvider>
+ */
+import { STYLES } from '../generator/roles.mjs';
+import { styleKit, toSource } from './component-styles.mjs';
+
+/** Chakra size → control tier. */
+const TIER = { '2xs': 'xs', xs: 'xs', sm: 'sm', md: 'md', lg: 'lg', xl: 'lg', '2xl': 'lg' };
+/** Button variant → emphasis level, as data-variant does for the Base UI Button. */
+const VARIANT_LEVEL = { solid: 'bold', outline: 'standard', subtle: 'subtle', surface: 'subtle', ghost: 'quiet', plain: 'quiet' };
+/** Chakra's own color-palette keys → scope slots, so Chakra components we leave alone still fit. */
+const CHAKRA_SLOTS = { contrast: 'on-solid', subtle: 'soft', muted: 'soft-hover', emphasized: 'soft-active', focusRing: 'focus' };
+const STATUS = ['info', 'warning', 'success', 'error'];
+/** Text styles a Chakra user can name as textStyle="…". */
+const TEXT_STYLES = [
+  'minimize', 'condense', 'base', 'magnify', 'base-label', 'base-selected', 'condense-subtitle-label',
+  'condense-trigger', 'base-trigger', 'magnify-trigger', 'maximize-md', 'maximize-lg', 'maximize-xl', 'maximize-2xl', 'maximize-3xl', 'maximize-4xl',
+];
+
+/** Merges our recipe pieces into Chakra's own, in the generated file (see RESTYLE below). */
+const RESTYLE = `/**
+ * Our recipe pieces merged into Chakra's own: a base style merges key by key into
+ * Chakra's (null removes a key), and a variant's style replaces Chakra's for that slot.
+ * Anything we leave out keeps Chakra's style.
+ */
+const merge = (a = {}, b) => {
+  const out = { ...a, ...b };
+  for (const key of Object.keys(out)) if (out[key] === null) delete out[key];
+  return out;
+};
+function restyle(recipe, ours) {
+  const slotted = Boolean(recipe.slots);
+  const base = !ours.base ? recipe.base : slotted ? Object.fromEntries([...new Set([...Object.keys(recipe.base ?? {}), ...Object.keys(ours.base)])].map((slot) => [slot, merge(recipe.base?.[slot], ours.base[slot] ?? {})])) : merge(recipe.base, ours.base);
+  const variants = { ...recipe.variants };
+  for (const [group, values] of Object.entries(ours.variants ?? {})) {
+    variants[group] = { ...recipe.variants?.[group] };
+    for (const [value, style] of Object.entries(values)) variants[group][value] = slotted ? { ...recipe.variants?.[group]?.[value], ...style } : style;
+  }
+  return { ...recipe, base, variants, compoundVariants: ours.compoundVariants ?? recipe.compoundVariants ?? [], defaultVariants: { ...recipe.defaultVariants, ...ours.defaultVariants } };
+}
+const restyleAll = (defaults, ours) => ({ ...defaults, ...Object.fromEntries(Object.entries(ours).map(([name, r]) => [name, restyle(defaults[name], r)])) });`;
+
+export default {
+  id: 'chakra',
+  name: 'Chakra UI v3',
+  file: 'chakra.js',
+  for: 'React apps on @chakra-ui/react v3: pass the exported system to ChakraProvider, and load tokens.css.',
+  build(theme) {
+    const { scopes, palettes, roles } = theme;
+    const prefix = theme.prefix ?? 'sl';
+    const k = styleKit(prefix, roles);
+    const { v, text } = k;
+    const sizes = (names, fn) => Object.fromEntries(names.map((s) => [s, fn(TIER[s], s)]));
+
+    // Colors: each palette's steps, and each scope's slots as a Chakra color palette.
+    const value = (x) => ({ value: x });
+    const colors = Object.fromEntries(Object.entries(palettes).map(([name, steps]) => [name, Object.fromEntries(Object.entries(steps).map(([s, hex]) => [s, value(hex)]))]));
+    const scopeColors = Object.fromEntries(
+      Object.entries(scopes).map(([name, s]) => {
+        const slots = Object.keys(s.light);
+        return [
+          name,
+          {
+            ...Object.fromEntries(slots.map((slot) => [slot, value(k.scope(name, slot))])),
+            ...Object.fromEntries(Object.entries(CHAKRA_SLOTS).map(([key, slot]) => [key, value(k.scope(name, slot))])),
+          },
+        ];
+      }),
+    );
+    // Chakra's own semantic colors, pointed at ours, so the components we leave alone match too.
+    const semanticColors = {
+      ...scopeColors,
+      bg: {
+        DEFAULT: value(v('surface-canvas')),
+        subtle: value(v('surface-raised')),
+        muted: value(v('surface-overlay')),
+        emphasized: value(v('fill-default')),
+        panel: value(v('popup-background')),
+        inverted: value(v('surface-inverse')),
+        ...Object.fromEntries(STATUS.map((s) => [s, value(k.scope(s, 'soft'))])),
+      },
+      fg: {
+        DEFAULT: value(v('text-primary')),
+        muted: value(v('text-secondary')),
+        subtle: value(v('text-tertiary')),
+        inverted: value(v('text-on-inverse-surface')),
+        ...Object.fromEntries(STATUS.map((s) => [s, value(k.scope(s, 'fg'))])),
+      },
+      border: {
+        DEFAULT: value(v('border-default')),
+        muted: value(v('border-subtle')),
+        subtle: value(v('border-subtle')),
+        emphasized: value(v('border-strong')),
+        inverted: value(v('surface-canvas')),
+        ...Object.fromEntries(STATUS.map((s) => [s, value(k.scope(s, 'border'))])),
+      },
+    };
+
+    // An emphasis level in Chakra's colorPalette, so colorPalette="…" re-colors it the way
+    // data-color re-colors a Base UI Button. Without one the level keeps its own color.
+    const palette = (slot) => (slot === 'transparent' ? 'transparent' : `colorPalette.${slot}`);
+    const paletteVar = (slot) => `var(--chakra-colors-color-palette-${slot})`;
+    const level = (name) => {
+      const { style, color } = roles.emphasis[name];
+      const s = STYLES[style];
+      const rest = { bg: palette(s.bg), color: palette(s.fg), borderColor: palette(s.border) };
+      return {
+        colorPalette: color,
+        ...rest,
+        _hover: { bg: palette(s['bg-hover']), borderColor: palette(s['border-hover']) },
+        _active: { bg: palette(s['bg-active']) },
+        _focusVisible: {
+          outline: `${v('a11y-focus-outline-width')} solid ${paletteVar('focus')}`,
+          outlineOffset: v('a11y-focus-outline-offset'),
+          boxShadow: `0 0 0 ${v('focus-halo-spread')} ${paletteVar('soft-hover')}`,
+        },
+        _disabled: { ...rest, opacity: v('button-opacity-disabled'), cursor: 'not-allowed' },
+      };
+    };
+    const control = (tier, opts) => ({ ...k.control(tier, opts), textStyle: null, minW: 0, px: null, h: null });
+
+    const field = {
+      ...k.field,
+      ...text('base'),
+      focusVisibleRing: null,
+      focusRingColor: null,
+      _hover: k.fieldStates.hover,
+      _focus: k.fieldStates.focus,
+      _invalid: { ...k.fieldStates.error, _focus: k.fieldStates.errorFocus },
+      _disabled: { ...k.fieldStates.disabled, layerStyle: null },
+      _placeholder: k.fieldStates.placeholder,
+    };
+    const fieldSize = (tier) => ({
+      ...text(tier === 'xs' || tier === 'sm' ? 'condense' : tier === 'lg' ? 'magnify' : 'base'),
+      textStyle: null,
+      '--input-height': v(`control-height-${tier}`),
+      height: v(`control-height-${tier}`),
+      px: v(`control-padding-inline${tier === 'md' ? '' : `-${tier}`}`),
+    });
+
+    const popup = { ...k.popupSurface, bg: null, '--menu-bg': v('popup-background') };
+    const row = {
+      ...k.itemRow,
+      textStyle: null,
+      cursor: 'default',
+      _highlighted: k.itemStates.hover,
+      _disabled: { ...k.itemStates.disabled, layerStyle: null },
+    };
+    const groupLabel = { ...k.groupLabel, textStyle: null };
+    const listParts = {
+      content: { ...popup, borderRadius: v('popup-radius-field'), padding: v('popup-padding'), boxShadow: v('popup-shadow') },
+      item: { ...row, '&[data-state=checked]': k.itemStates.selected },
+      itemGroupLabel: groupLabel,
+      itemIndicator: { color: v('item-indicator-color') },
+    };
+    const clearListSizes = (names, extra = () => ({})) => sizes(names, (tier) => ({ content: {}, item: {}, itemGroupLabel: {}, ...extra(tier) }));
+
+    const statusPalette = (s) => (scopes[s] ? s : 'chrome');
+
+    const recipes = {
+      button: {
+        base: {
+          ...control('md', { trigger: true }),
+          // Longhands: Chakra drops a variant's borderColor when the base has the shorthand.
+          borderWidth: v('stroke-default'),
+          borderStyle: 'solid',
+          borderColor: 'transparent',
+          borderRadius: v('button-radius'),
+          transition: v('transition-button'),
+          transitionProperty: null,
+          transitionDuration: null,
+          focusVisibleRing: null,
+          _disabled: null,
+          _icon: { flexShrink: 0, width: k.iconSize('md'), height: k.iconSize('md') },
+        },
+        variants: {
+          variant: Object.fromEntries(Object.entries(VARIANT_LEVEL).map(([variant, name]) => [variant, level(name)])),
+          size: sizes(['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'], (tier) => ({ ...control(tier, { trigger: true }), _icon: { width: k.iconSize(tier), height: k.iconSize(tier) } })),
+        },
+      },
+      input: {
+        base: { ...field, height: v('control-height-md'), minW: 0 },
+        variants: { size: sizes(['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'], fieldSize), variant: { outline: {} } },
+      },
+      textarea: {
+        base: { ...field, minHeight: '80px', paddingBlock: v('control-padding-block'), px: v('control-padding-inline') },
+        variants: { size: sizes(['xs', 'sm', 'md', 'lg', 'xl'], () => ({})), variant: { outline: {} } },
+      },
+    };
+
+    const checkControl = (tier) => ({ boxSize: k.iconSize(tier), '& svg': { width: v(`icon-size-${{ xs: 'minimize', sm: 'minimize', md: 'condense', lg: 'base' }[tier]}`), height: v(`icon-size-${{ xs: 'minimize', sm: 'minimize', md: 'condense', lg: 'base' }[tier]}`) } });
+    const checkRow = { gap: v('gap-control'), color: v('text-primary') };
+    const label = { ...text('base'), textStyle: null, _disabled: { color: v('text-disabled'), opacity: null } };
+    const checked = '&:is([data-state=checked], [data-state=indeterminate])';
+
+    const slotRecipes = {
+      field: {
+        base: {
+          root: { gap: v('field-gap') },
+          // A disabled field fades as a whole, as a disabled Base UI Field.Root does.
+          label: { ...text('base-label'), textStyle: null, gap: v('space-1'), marginBottom: v('field-label-spacing'), color: v('text-primary'), _disabled: { opacity: v('field-opacity-disabled') } },
+          helperText: { ...text('condense'), textStyle: null, margin: `${v('field-message-spacing')} 0 0`, color: v('text-secondary'), _disabled: { opacity: v('field-opacity-disabled') } },
+          errorText: { ...text('base-label'), textStyle: null, margin: `${v('field-message-spacing')} 0 0`, color: v('status-error') },
+          requiredIndicator: { color: v('status-error') },
+        },
+      },
+
+      checkbox: {
+        base: {
+          root: checkRow,
+          control: {
+            ...k.checkBox,
+            ...checkControl('md'),
+            borderRadius: v('check-radius'),
+            p: 0,
+            focusVisibleRing: null,
+            _hover: k.checkStates.hover,
+            [checked]: k.checkStates.checked,
+            _focusVisible: k.focusRing,
+            _invalid: { borderColor: v('field-border-color-error'), colorPalette: null },
+            _disabled: { ...k.checkStates.disabled, cursor: 'not-allowed' },
+          },
+          label,
+        },
+        variants: {
+          variant: { solid: { control: {} }, outline: { control: {} }, subtle: { control: {} } },
+          size: sizes(['xs', 'sm', 'md', 'lg'], (tier) => ({ root: { gap: v(tier === 'xs' ? 'gap-control-xs' : tier === 'sm' ? 'gap-control-sm' : 'gap-control') }, label: {}, control: checkControl(tier) })),
+        },
+      },
+      radioGroup: {
+        base: {
+          root: { display: 'flex', gap: v('gap-stack-sm') },
+          item: { ...checkRow, fontWeight: null },
+          itemText: label,
+          label,
+          itemControl: {
+            ...k.checkBox,
+            boxSize: k.iconSize('md'),
+            borderRadius: v('radius-pill'),
+            _focusVisible: k.focusRing,
+            _hover: k.checkStates.hover,
+            _checked: k.checkStates.checked,
+            _invalid: { borderColor: v('field-border-color-error'), colorPalette: null },
+            _disabled: { ...k.checkStates.disabled, cursor: 'not-allowed' },
+            '& .dot': { width: `round(100% * ${v('check-dot-scale')}, 1px)`, height: `round(100% * ${v('check-dot-scale')}, 1px)`, scale: null, borderRadius: v('radius-pill'), bg: v('check-mark-color') },
+            '&:not([data-state=checked]) .dot': { display: 'none' },
+          },
+        },
+        variants: {
+          variant: { solid: { itemControl: {} }, outline: { itemControl: {} }, subtle: { itemControl: {} } },
+          size: sizes(['xs', 'sm', 'md', 'lg'], (tier) => ({ item: { gap: v(tier === 'xs' ? 'gap-control-xs' : tier === 'sm' ? 'gap-control-sm' : 'gap-control') }, itemControl: { boxSize: k.iconSize(tier) } })),
+        },
+      },
+      switch: {
+        base: {
+          root: { gap: v('gap-control'), '--switch-diff': 'calc(var(--switch-width) - var(--switch-height))' },
+          label: { ...text('base-label'), fontSize: v('font-base-label-font-size'), color: v('text-primary'), _disabled: { color: v('text-disabled'), opacity: null } },
+          control: {
+            boxSizing: 'border-box',
+            alignItems: 'center',
+            padding: v('switch-track-padding'),
+            border: `${v('check-border-width')} solid ${v('check-border-color')}`,
+            borderRadius: v('radius-pill'),
+            bg: v('fill-default'),
+            transition: `background-color ${v('duration-normal')} ${v('easing-in-out')}`,
+            focusVisibleRing: null,
+            _before: {
+              ...text('condense-subtitle-label'),
+              content: '"off"',
+              position: 'absolute',
+              insetBlock: 0,
+              right: v('switch-track-padding'),
+              width: 'var(--switch-diff)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 'var(--switch-indicator-font-size)',
+              lineHeight: 1,
+              color: v('text-secondary'),
+              pointerEvents: 'none',
+            },
+            _hover: { bg: v('fill-strong') },
+            _checked: {
+              bg: v('check-background-checked'),
+              borderColor: v('check-border-color-checked'),
+              _hover: { bg: v('interactive-hover') },
+              _before: { content: '"on"', right: 'auto', left: v('switch-track-padding'), color: v('check-mark-color') },
+            },
+            _focusVisible: k.focusRing,
+            _disabled: { opacity: v('check-opacity-disabled'), cursor: 'not-allowed', _hover: { bg: v('fill-default') } },
+          },
+          thumb: {
+            '--thumb-size': `calc(var(--switch-height) - 2 * (${v('switch-track-padding')} + ${v('check-border-width')}))`,
+            width: 'var(--thumb-size)',
+            height: 'var(--thumb-size)',
+            position: 'relative',
+            zIndex: 1,
+            transitionDuration: v('duration-normal'),
+            bg: v('check-background'),
+            boxShadow: v('elevation-sm'),
+          },
+        },
+        variants: {
+          variant: { solid: { control: {}, thumb: {} }, raised: { control: {}, thumb: {} } },
+          size: Object.fromEntries(
+            ['xs', 'sm', 'md', 'lg'].map((s) => {
+              const suffix = s === 'xs' || s === 'sm' ? '-sm' : s === 'lg' ? '-lg' : '';
+              return [s, { root: { '--switch-width': v(`switch-track-width${suffix}`), '--switch-height': v(`switch-track-height${suffix}`), '--switch-indicator-font-size': v(`switch-track-text-font-size${suffix}`) } }];
+            }),
+          ),
+        },
+      },
+      slider: {
+        base: {
+          root: { ...text('base'), textStyle: null, gap: v('gauge-gap'), _disabled: { opacity: v('check-opacity-disabled') } },
+          label: { ...text('base-label'), textStyle: null, color: v('gauge-label-color') },
+          valueText: { ...text('base'), color: v('gauge-value-color') },
+          track: { bg: v('gauge-track-color'), borderRadius: v('gauge-radius'), boxShadow: 'none' },
+          range: { bg: 'colorPalette.solid', borderRadius: v('gauge-radius') },
+          thumb: {
+            boxSizing: 'border-box',
+            bg: v('field-background'),
+            border: `${v('stroke-emphasis')} solid ${paletteVar('solid')}`,
+            transition: `box-shadow ${v('duration-normal')} ${v('easing-default')}`,
+            _hover: { boxShadow: `0 0 0 ${v('focus-halo-spread')} ${paletteVar('soft-hover')}` },
+            _dragging: { boxShadow: `0 0 0 calc(${v('focus-halo-spread')} * 1.5) ${paletteVar('soft-active')}` },
+            _focusVisible: { ...k.focusRing, ring: null, ringColor: null },
+          },
+        },
+        variants: {
+          variant: { outline: { track: {}, range: {}, thumb: {} }, solid: { track: {}, range: {}, thumb: {} } },
+          size: sizes(['sm', 'md', 'lg'], (tier) => ({ root: { '--slider-thumb-size': v('slider-thumb-size'), '--slider-track-size': v(tier === 'lg' ? 'gauge-height' : 'gauge-height-sm'), '--slider-marker-size': v('stroke-emphasis') } })),
+        },
+      },
+
+      tabs: {
+        base: {
+          list: { borderColor: v('disclosure-divider-color') },
+          trigger: {
+            ...text('base'),
+            height: 'auto',
+            minW: 0,
+            padding: `${v('space-2')} ${v('space-4')}`,
+            color: v('text-secondary'),
+            transition: v('transition-button'),
+            _hover: { color: v('text-primary'), bg: v('disclosure-trigger-background-hover') },
+            _focusVisible: { ...k.focusRingInset, zIndex: 1, outlineColor: null },
+            _disabled: { color: v('text-disabled'), opacity: v('disclosure-opacity-disabled'), cursor: 'not-allowed' },
+          },
+        },
+        variants: {
+          size: sizes(['sm', 'md', 'lg'], () => ({ trigger: {} })),
+          variant: {
+            line: {
+              list: { display: 'flex', borderColor: v('disclosure-divider-color'), _horizontal: { borderBottomWidth: v('stroke-default') }, _vertical: { borderEndWidth: v('stroke-default') } },
+              trigger: {
+                _selected: {
+                  ...text('base-selected'),
+                  color: v('disclosure-selected-color'),
+                  _horizontal: { layerStyle: 'indicator.bottom', '--indicator-offset-y': `calc(${v('stroke-default')} * -1)`, '--indicator-color': v('disclosure-indicator-color'), '--indicator-thickness': v('disclosure-indicator-width') },
+                  _vertical: { layerStyle: 'indicator.end', '--indicator-offset-x': `calc(${v('stroke-default')} * -1)`, '--indicator-color': v('disclosure-indicator-color'), '--indicator-thickness': v('disclosure-indicator-width') },
+                },
+              },
+            },
+          },
+        },
+      },
+      accordion: {
+        base: {
+          root: { color: v('text-primary') },
+          item: { borderBottom: `${v('stroke-default')} solid ${v('disclosure-divider-color')}`, _last: { borderBottom: 'none' } },
+          itemTrigger: {
+            ...text('maximize-md'),
+            justifyContent: 'space-between',
+            gap: v('space-4'),
+            padding: `${v('space-4')} ${v('space-6')}`,
+            borderRadius: 0,
+            transition: `background-color ${v('disclosure-animation-duration')} ${v('disclosure-animation-easing')}`,
+            _hover: { bg: v('disclosure-trigger-background-hover') },
+            _active: { bg: v('disclosure-trigger-background-active') },
+            _focusVisible: { ...k.focusRingInset, outlineColor: null, borderRadius: v('radius-item') },
+            _disabled: { opacity: v('disclosure-opacity-disabled'), layerStyle: null },
+          },
+          itemIndicator: { color: v('disclosure-icon-color') },
+          itemBody: { ...text('base'), padding: `0 ${v('space-6')} ${v('space-4')}`, color: v('disclosure-content-color') },
+        },
+        variants: {
+          variant: { outline: { item: {} } },
+          size: sizes(['sm', 'md', 'lg'], () => ({ itemTrigger: {} })),
+        },
+      },
+
+      menu: {
+        base: {
+          content: { ...popup, minW: v('popup-min-width'), padding: v('popup-padding'), overflow: null },
+          item: { ...row, paddingBlock: v('item-padding-block-dense'), '&[data-type]': { ps: null } },
+          itemGroupLabel: groupLabel,
+          itemCommand: { ...text('condense'), color: v('text-tertiary'), opacity: null, letterSpacing: null },
+          itemIndicator: { color: v('item-indicator-color') },
+          separator: { ...k.separator, mx: 0, my: null },
+          arrow: { '--arrow-background': v('popup-background') },
+        },
+        variants: {
+          variant: { subtle: { item: {} }, solid: { item: { _highlighted: { bg: 'colorPalette.solid', color: 'colorPalette.on-solid' } } } },
+          size: sizes(['sm', 'md'], () => ({ content: {}, item: {} })),
+        },
+      },
+      select: {
+        base: {
+          trigger: {
+            ...field,
+            gap: v('gap-control'),
+            minH: null,
+            height: 'var(--select-trigger-height)',
+            cursor: 'pointer',
+            _focus: null,
+            _focusVisible: k.fieldStates.focus,
+            _placeholderShown: { color: v('field-placeholder-color') },
+          },
+          indicator: { color: v('text-tertiary') },
+          label: { ...text('base-label'), textStyle: null, color: v('text-primary') },
+          ...listParts,
+        },
+        variants: {
+          variant: { outline: { trigger: {} } },
+          size: clearListSizes(['xs', 'sm', 'md', 'lg'], (tier) => ({
+            root: { '--select-trigger-height': v(`control-height-${tier}`), '--select-trigger-padding-x': v(`control-padding-inline${tier === 'md' ? '' : `-${tier}`}`) },
+            trigger: {},
+          })),
+        },
+      },
+      combobox: {
+        base: {
+          input: { ...field, focusVisibleRing: null },
+          label: { ...text('base-label'), textStyle: null, color: v('text-primary') },
+          trigger: { color: v('text-tertiary') },
+          empty: { ...text('condense'), color: v('text-tertiary'), justifyContent: 'center', paddingBlock: v('popup-empty-padding-block') },
+          ...listParts,
+        },
+        variants: {
+          variant: { outline: { input: {} } },
+          size: clearListSizes(['xs', 'sm', 'md', 'lg'], (tier) => ({ input: fieldSize(tier) })),
+        },
+      },
+      popover: {
+        base: {
+          content: { ...popup, '--popover-bg': v('popup-background'), textStyle: null, ...text('base') },
+          title: { ...text('maximize-md') },
+          description: { ...text('base'), color: v('text-secondary') },
+          arrow: { '--arrow-background': v('popup-background') },
+        },
+      },
+      tooltip: {
+        base: {
+          content: {
+            ...text('condense'),
+            textStyle: null,
+            maxW: v('tooltip-max-width'),
+            padding: `${v('space-1-5')} ${v('space-2-5')}`,
+            borderRadius: v('radius-chrome'),
+            bg: v('surface-inverse'),
+            color: v('text-on-inverse-surface'),
+            boxShadow: v('popup-shadow'),
+            '--tooltip-bg': v('surface-inverse'),
+          },
+          arrow: { '--arrow-background': v('surface-inverse') },
+        },
+      },
+
+      dialog: {
+        base: {
+          backdrop: { bg: v('modal-backdrop') },
+          content: { ...k.modalSurface, bg: null, background: v('modal-background'), textStyle: null, ...text('base'), width: v('modal-width'), maxH: v('modal-max-height') },
+          header: { padding: 0, gap: v('space-2') },
+          body: { padding: 0 },
+          footer: { padding: 0, gap: v('modal-actions-gap'), marginTop: v('modal-actions-spacing') },
+          title: { ...text('maximize-xl'), textStyle: null, color: v('modal-title-color') },
+          description: { ...text('base'), color: v('modal-description-color') },
+          closeTrigger: { top: v('space-3'), insetEnd: v('space-3') },
+        },
+        variants: { size: { md: { content: { maxW: v('modal-max-width') } } } },
+      },
+      drawer: {
+        base: {
+          backdrop: { bg: v('modal-backdrop') },
+          content: { bg: v('modal-background'), color: v('text-primary'), boxShadow: v('modal-shadow'), textStyle: null, ...text('base') },
+          title: { ...text('maximize-xl'), textStyle: null, color: v('modal-title-color') },
+          description: { ...text('base'), color: v('modal-description-color') },
+          footer: { gap: v('modal-actions-gap') },
+        },
+      },
+
+      toast: {
+        base: {
+          root: {
+            ...k.popupSurface,
+            ...text('base'),
+            padding: v('notice-padding'),
+            gap: v('notice-gap'),
+            '--toast-trigger-bg': v('surface-raised'),
+            ...Object.fromEntries(
+              STATUS.filter((s) => scopes[s]).map((s) => [`&[data-type=${s}]`, { colorPalette: s, bg: 'colorPalette.soft', borderColor: 'colorPalette.border', color: 'colorPalette.on-soft' }]),
+            ),
+          },
+          title: { ...text('maximize-md'), textStyle: null },
+          description: { ...text('base'), textStyle: null, marginTop: v('notice-text-gap'), color: v('notice-description-color'), '[data-type] &': { color: 'inherit' } },
+          closeTrigger: k.iconButton,
+        },
+      },
+      alert: {
+        base: {
+          root: { ...text('base'), textStyle: null, padding: v('notice-padding'), gap: v('notice-gap'), borderRadius: v('popup-radius'), borderWidth: v('popup-border-width'), borderStyle: 'solid', borderColor: 'transparent' },
+          title: { ...text('maximize-md') },
+          description: { ...text('base'), marginTop: v('notice-text-gap') },
+          indicator: { color: 'inherit' },
+        },
+        variants: {
+          status: { ...Object.fromEntries(STATUS.map((s) => [s, { root: { colorPalette: statusPalette(s) } }])), neutral: { root: { colorPalette: 'chrome' } } },
+          variant: {
+            subtle: { root: { bg: 'colorPalette.soft', borderColor: 'colorPalette.border', color: 'colorPalette.on-soft' } },
+            surface: { root: { bg: 'colorPalette.soft', borderColor: 'colorPalette.border', color: 'colorPalette.on-soft' } },
+            outline: { root: { bg: 'transparent', borderColor: 'colorPalette.border', color: 'colorPalette.fg' } },
+            solid: { root: { bg: 'colorPalette.solid', borderColor: 'colorPalette.solid', color: 'colorPalette.on-solid' } },
+          },
+          size: sizes(['sm', 'md', 'lg'], () => ({ root: {} })),
+        },
+      },
+      progress: {
+        base: {
+          root: { gap: v('gauge-gap') },
+          label: { ...text('base-label'), textStyle: null, color: v('gauge-label-color') },
+          valueText: { ...text('base'), textStyle: null, color: v('gauge-value-color') },
+          track: { bg: v('gauge-track-color'), borderRadius: v('gauge-radius') },
+          range: { bg: 'colorPalette.solid', borderRadius: v('gauge-radius'), transition: v('gauge-transition') },
+        },
+        variants: {
+          variant: { outline: { track: {}, range: {} }, subtle: { track: {}, range: {} } },
+          size: sizes(['xs', 'sm', 'md', 'lg', 'xl'], (tier, s) => ({ track: { height: v(s === 'xs' || s === 'sm' ? 'gauge-height-sm' : s === 'xl' ? 'gauge-height-lg' : 'gauge-height') } })),
+        },
+      },
+      avatar: {
+        base: {
+          root: { ...text('maximize-md'), boxSizing: 'border-box', border: `${v('stroke-emphasis')} solid ${v('surface-canvas')}`, boxShadow: v('elevation-sm'), textTransform: 'uppercase' },
+        },
+        variants: {
+          variant: Object.fromEntries(['solid', 'subtle', 'outline'].map((s) => [s, { root: { bg: 'colorPalette.solid', color: 'colorPalette.on-solid' } }])),
+          size: Object.fromEntries(['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((s) => [s, { root: { '--avatar-size': v(`avatar-size-${{ '2xs': 'xs', '2xl': 'xl' }[s] ?? s}`), '--avatar-font-size': null } }])),
+        },
+      },
+      table: {
+        base: {
+          root: { ...text('condense'), textStyle: null, color: v('table-color') },
+          columnHeader: { ...text('base-label'), bg: v('table-header-background'), color: v('table-header-color'), borderColor: v('table-row-border-color') },
+          cell: { borderColor: v('table-row-border-color'), paddingInline: v('table-cell-padding-inline') },
+          row: { '&[data-selected]': { bg: v('table-row-selected') } },
+        },
+      },
+      numberInput: { base: { input: { ...field } } },
+      pinInput: { base: { input: { ...field, textAlign: 'center', boxSize: v('control-height-md'), paddingInline: 0 } } },
+    };
+
+    const config = {
+      // Dark follows data-theme, the attribute tokens.css (and Base UI's stories) use.
+      conditions: { light: ':root &, .light &, [data-theme=light] &', dark: '.dark &, [data-theme=dark] &' },
+      globalCss: { html: { colorPalette: 'accent' } },
+      theme: {
+        tokens: {
+          colors,
+          fonts: { heading: value(v('font-family-display')), body: value(v('font-family-body')), mono: value(v('font-family-mono')) },
+          radii: { l1: value(v('radius-item')), l2: value(v('radius-chrome')), l3: value(v('radius-surface')) },
+        },
+        semanticTokens: { colors: semanticColors },
+        textStyles: Object.fromEntries(TEXT_STYLES.map((s) => [s, { value: text(s) }])),
+      },
+    };
+
+    const js = `/**
+ * Chakra UI v3 system for "${theme.brand}". Generated by loomiere build; do not edit.
+ * Load the theme's tokens.css as well: tokens and recipes read its --${prefix}- variables, so
+ * Chakra's components match loomiere-base-ui in light and dark (data-theme="dark" on <html>).
+ *
+ *   import './tokens.css';
+ *   import { ChakraProvider } from '@chakra-ui/react';
+ *   import { system } from './chakra.js';
+ *   <ChakraProvider value={system}>…</ChakraProvider>
+ *
+ * Every palette, plus "accent" and "chrome", works as a colorPalette. Button variants are
+ * the brand's emphasis levels (solid = bold, outline = standard, subtle = subtle,
+ * ghost = quiet); each keeps its own color unless you pass colorPalette.
+ * To add your own config on top: createSystem(config, yours).
+ */
+import { createSystem, defaultConfig, mergeConfigs } from '@chakra-ui/react';
+
+${RESTYLE}
+
+const recipes = ${toSource(recipes)};
+
+const slotRecipes = ${toSource(slotRecipes)};
+
+const merged = mergeConfigs(defaultConfig, ${toSource(config)});
+
+export const config = {
+  ...merged,
+  theme: {
+    ...merged.theme,
+    recipes: restyleAll(merged.theme.recipes, recipes),
+    slotRecipes: restyleAll(merged.theme.slotRecipes, slotRecipes),
+  },
+};
+
+export const system = createSystem(config);
+
+export default system;
+`;
+    const dts = `/** Chakra UI v3 system for "${theme.brand}". Generated by loomiere build; do not edit. */
+import type { SystemConfig, SystemContext } from '@chakra-ui/react';
+
+export declare const config: SystemConfig;
+export declare const system: SystemContext;
+export default system;
+`;
+    return { 'chakra.js': js, 'chakra.d.ts': dts };
+  },
+};