@mindlogic-ai/logician-ui 4.0.0-alpha.8 → 4.0.0

package/src/theme/colors.ts

@@ -60,36 +60,11 @@
  * <Badge bgColor="success.lightest" color="success.dark" />
  * ```
  */
-/**
- * Halved-saturation counterpart of each primitive `gray.N` — same hue and
- * lightness, HSL saturation cut by ~50% (e.g. `gray.1300` #1E2433 @ 26% →
- * #23262E @ 13%). The blue-tinted `gray` ramp reads as the right neutral in
- * light mode but turns muddy/over-chromatic as a dark surface, so every
- * dark-mode neutral below (`slate.*`, and the `_dark` of `bg`/`fg`/`border`)
- * resolves to this desaturated mirror instead of the raw `gray` step. Light
- * mode is untouched — it keeps referencing `{colors.gray.*}` verbatim.
- *
- * Single source of truth: change a dark neutral here, not at each token.
- */
-const desaturatedGray = {
-  0: '#FEFEFF',
-  50: '#F8F9FB',
-  100: '#F2F4F7',
-  200: '#E5E8EC',
-  300: '#D2D5DB',
-  400: '#B6BAC3',
-  500: '#A2A6B1',
-  600: '#8E939F',
-  700: '#7C818D',
-  800: '#6A6F7C',
-  900: '#595E6B',
-  1000: '#4A4E5A',
-  1100: '#3C404B',
-  1200: '#30343C',
-  1300: '#23262E',
-  1400: '#181A20',
-  1500: '#0E1014',
-} as const;
+// The dark-mode neutral family now lives in `colors.grayDark` (see below) so
+// consumers can retint dark surfaces by overriding a primitive scale — exactly
+// like `blue.*` for the brand ramp — instead of these values being unreachable
+// hex literals. Every dark-mode neutral in the semantic tokens (`slate.*`, and
+// the `_dark` of `bg`/`fg`/`border`) references `{colors.grayDark.N}`.
 
 export const semanticTokens = {
   colors: {
@@ -303,48 +278,56 @@ export const semanticTokens = {
      * dark canvas/surface — the straight mirrors measured ~3.0–3.9 there.
      */
     slate: {
-      0: { value: { base: '{colors.gray.0}', _dark: desaturatedGray[1500] } },
-      50: { value: { base: '{colors.gray.50}', _dark: desaturatedGray[1400] } },
+      0: {
+        value: { base: '{colors.gray.0}', _dark: '{colors.grayDark.1500}' },
+      },
+      50: {
+        value: { base: '{colors.gray.50}', _dark: '{colors.grayDark.1400}' },
+      },
       100: {
-        value: { base: '{colors.gray.100}', _dark: desaturatedGray[1300] },
+        value: { base: '{colors.gray.100}', _dark: '{colors.grayDark.1300}' },
       },
       200: {
-        value: { base: '{colors.gray.200}', _dark: desaturatedGray[1200] },
+        value: { base: '{colors.gray.200}', _dark: '{colors.grayDark.1200}' },
       },
       300: {
-        value: { base: '{colors.gray.300}', _dark: desaturatedGray[1100] },
+        value: { base: '{colors.gray.300}', _dark: '{colors.grayDark.1100}' },
       },
       400: {
-        value: { base: '{colors.gray.400}', _dark: desaturatedGray[1000] },
+        value: { base: '{colors.gray.400}', _dark: '{colors.grayDark.1000}' },
       },
       500: {
-        value: { base: '{colors.gray.500}', _dark: desaturatedGray[900] },
+        value: { base: '{colors.gray.500}', _dark: '{colors.grayDark.900}' },
+      },
+      600: {
+        value: { base: '{colors.gray.600}', _dark: '{colors.grayDark.fg600}' },
+      },
+      700: {
+        value: { base: '{colors.gray.700}', _dark: '{colors.grayDark.fg700}' },
       },
-      600: { value: { base: '{colors.gray.600}', _dark: '#898E99' } },
-      700: { value: { base: '{colors.gray.700}', _dark: '#8D919D' } },
       800: {
-        value: { base: '{colors.gray.800}', _dark: desaturatedGray[600] },
+        value: { base: '{colors.gray.800}', _dark: '{colors.grayDark.600}' },
       },
       900: {
-        value: { base: '{colors.gray.900}', _dark: desaturatedGray[500] },
+        value: { base: '{colors.gray.900}', _dark: '{colors.grayDark.500}' },
       },
       1000: {
-        value: { base: '{colors.gray.1000}', _dark: desaturatedGray[400] },
+        value: { base: '{colors.gray.1000}', _dark: '{colors.grayDark.400}' },
       },
       1100: {
-        value: { base: '{colors.gray.1100}', _dark: desaturatedGray[300] },
+        value: { base: '{colors.gray.1100}', _dark: '{colors.grayDark.300}' },
       },
       1200: {
-        value: { base: '{colors.gray.1200}', _dark: desaturatedGray[200] },
+        value: { base: '{colors.gray.1200}', _dark: '{colors.grayDark.200}' },
       },
       1300: {
-        value: { base: '{colors.gray.1300}', _dark: desaturatedGray[100] },
+        value: { base: '{colors.gray.1300}', _dark: '{colors.grayDark.100}' },
       },
       1400: {
-        value: { base: '{colors.gray.1400}', _dark: desaturatedGray[50] },
+        value: { base: '{colors.gray.1400}', _dark: '{colors.grayDark.50}' },
       },
       1500: {
-        value: { base: '{colors.gray.1500}', _dark: desaturatedGray[0] },
+        value: { base: '{colors.gray.1500}', _dark: '{colors.grayDark.0}' },
       },
     },
 
@@ -366,13 +349,13 @@ export const semanticTokens = {
       // value, so light is untouched); `_dark` rejoins our neutral floor instead
       // of Chakra's off-palette black.
       DEFAULT: {
-        value: { _light: '{colors.white}', _dark: desaturatedGray[1500] },
+        value: { _light: '{colors.white}', _dark: '{colors.grayDark.1500}' },
       },
       canvas: {
-        value: { base: '{colors.gray.0}', _dark: desaturatedGray[1500] },
+        value: { base: '{colors.gray.0}', _dark: '{colors.grayDark.1500}' },
       },
       surface: {
-        value: { base: '{colors.white}', _dark: desaturatedGray[1400] },
+        value: { base: '{colors.white}', _dark: '{colors.grayDark.1400}' },
       },
       // Strongly-raised neutral surface — one level above `surface` (e.g. the
       // selected thumb of a SegmentedControl). In dark this is the *lightest*
@@ -384,16 +367,22 @@ export const semanticTokens = {
       // cannot be overridden via semanticTokens in this setup (it keeps
       // resolving to Chakra's own gray.200), whereas a fresh name is honoured.
       raised: {
-        value: { base: '{colors.white}', _dark: desaturatedGray[1100] },
-      },
+        value: { base: '{colors.white}', _dark: '{colors.grayDark.1100}' },
+      },
+      // `_light` (not `base`): Chakra's defaults for `bg.subtle`/`bg.muted` are
+      // `{ _light: gray.50 }` / `{ _light: gray.100 }`, which outrank `base` in
+      // light mode. Our light values happen to match Chakra's today, so `base`
+      // rendered correctly by coincidence — pin `_light` so these stay ours if
+      // either value ever diverges (as `border.subtle`/`fg.muted`/`fg.subtle`
+      // already did). No visible change.
       subtle: {
-        value: { base: '{colors.gray.50}', _dark: desaturatedGray[1300] },
+        value: { _light: '{colors.gray.50}', _dark: '{colors.grayDark.1300}' },
       },
       muted: {
-        value: { base: '{colors.gray.100}', _dark: desaturatedGray[1200] },
+        value: { _light: '{colors.gray.100}', _dark: '{colors.grayDark.1200}' },
       },
       inverse: {
-        value: { base: '{colors.gray.1300}', _dark: desaturatedGray[50] },
+        value: { base: '{colors.gray.1300}', _dark: '{colors.grayDark.50}' },
       },
       // Sunken page wash for list/overview surfaces: a gray floor in light so
       // `bg.surface` cards read as raised above it. In dark the `bg.*` ramp is
@@ -401,7 +390,7 @@ export const semanticTokens = {
       // that elevation — so the dark value drops to the canvas floor instead.
       // Component-level fills (hover, chips, inner blocks) keep using `bg.subtle`.
       sunken: {
-        value: { base: '{colors.gray.50}', _dark: desaturatedGray[1500] },
+        value: { base: '{colors.gray.50}', _dark: '{colors.grayDark.1500}' },
       },
       // Recessed control-track surface for "meter"-style components whose
       // unfilled track carries meaning (Switch off-state, Slider rail,
@@ -409,39 +398,64 @@ export const semanticTokens = {
       // `bg.muted` (gray.50 / gray.100), which collapse into the `bg.sunken`
       // page wash in light mode, this sits at gray.300 so the track reads as a
       // filled surface on any background. Dark keeps the `bg.muted` value
-      // (desaturatedGray[1200]) — already lighter than the dark canvas/surface,
+      // (grayDark.1200) — already lighter than the dark canvas/surface,
       // so it reads there without change. Use this only for control tracks, not
       // as a general fill (that stays `bg.subtle` / `bg.muted`).
       track: {
-        value: { base: '{colors.gray.300}', _dark: desaturatedGray[1200] },
+        value: { base: '{colors.gray.300}', _dark: '{colors.grayDark.1200}' },
       },
       // Override Chakra's default `bg.panel` (whose `_dark` resolves to Chakra's
       // own gray.950 = #111111, off our slate palette). Light value is white —
       // identical to Chakra's default — so this only realigns dark overlay
-      // surfaces (Menu / Modal / Popover / Toast) onto our gray scale.
+      // surfaces (Menu / Modal / Popover / Toast) onto our gray scale. `_light`
+      // (not `base`) for the same reason as `bg.subtle`/`bg.muted`: Chakra's
+      // default `bg.panel` is `{ _light: white }`, which would outrank `base`.
       panel: {
-        value: { base: '{colors.white}', _dark: desaturatedGray[1400] },
+        value: { _light: '{colors.white}', _dark: '{colors.grayDark.1400}' },
       },
       /**
        * Row/selection state tints. Use these for selected rows,
        * validation-error rows, and transient highlights instead of
        * hand-picking `primary.*`/`danger.*` tints at the call site.
        *
-       * Values mirror `primary.lightest` / `danger.lightest` /
+       * Light mirrors `primary.lightest` / `danger.lightest` /
        * `warning.lightest` (this Chakra version doesn't resolve
-       * semantic→semantic token references, so the primitive pairs are
-       * repeated here — keep them in sync with the brand ramps above).
+       * semantic→semantic token references, so the primitive is repeated
+       * here — keep it in sync with the brand ramps above).
+       *
+       * Dark does NOT mirror `*.lightest`. There the "lightest" hue step is the
+       * `900` of the ramp, which is darker than `bg.surface` (`grayDark.1400`),
+       * so a selected row rendered as a block sunk *below* its neighbours
+       * instead of a tint lifted above them. Instead the hue's `200` step (the
+       * dark-mode `main`/hover step of each family) is mixed 20% into the row
+       * surface. That keeps the tint one step lighter than the surface
+       * (~1.4:1, the same separation the old value had, in the right
+       * direction), keeps `fg.default` on it above 8:1, and stays
+       * tenant-restageable because it reads the ramp rather than a literal.
+       * Primitives only inside the mix — see the note above on references.
        */
       selected: {
-        value: { base: '{colors.blue.25}', _dark: '{colors.blue.900}' },
+        value: {
+          base: '{colors.blue.25}',
+          _dark:
+            'color-mix(in oklab, {colors.blue.200} 20%, {colors.grayDark.1400})',
+        },
       },
       invalid: {
         subtle: {
-          value: { base: '{colors.rose.25}', _dark: '{colors.rose.900}' },
+          value: {
+            base: '{colors.rose.25}',
+            _dark:
+              'color-mix(in oklab, {colors.rose.200} 20%, {colors.grayDark.1400})',
+          },
         },
       },
       highlighted: {
-        value: { base: '{colors.gold.25}', _dark: '{colors.gold.900}' },
+        value: {
+          base: '{colors.gold.25}',
+          _dark:
+            'color-mix(in oklab, {colors.gold.200} 20%, {colors.grayDark.1400})',
+        },
       },
     },
 
@@ -458,14 +472,14 @@ export const semanticTokens = {
       // `_light` repeats Chakra's value (black); `_dark` rejoins our desaturated
       // neutral so legacy html-level text tracks `fg.default`.
       DEFAULT: {
-        value: { _light: '{colors.black}', _dark: desaturatedGray[50] },
+        value: { _light: '{colors.black}', _dark: '{colors.grayDark.50}' },
       },
       // Strongest text — headings, titles, key figures, emphasis. This is the
       // near-black step that `fg.default` used to be; `default` is now re-pegged
       // to a lighter body weight (see below), so reach for `emphasized` when you
       // specifically want maximum contrast.
       emphasized: {
-        value: { base: '{colors.gray.1300}', _dark: desaturatedGray[200] },
+        value: { base: '{colors.gray.1300}', _dark: '{colors.grayDark.200}' },
       },
       default: {
         // Primary *body* text. Re-pegged from gray.1300 → gray.1000: near-black
@@ -473,23 +487,30 @@ export const semanticTokens = {
         // real product usage clustered well below it. gray.1000 (~9:1) is a
         // comfortable AAA body weight; the old near-black step lives on as
         // `fg.emphasized`. _dark drops one step from emphasized for hierarchy.
-        value: { base: '{colors.gray.1000}', _dark: desaturatedGray[300] },
+        value: { base: '{colors.gray.1000}', _dark: '{colors.grayDark.300}' },
       },
       muted: {
-        // Secondary text. _dark sits one step below `default` (~9.5:1 on the dark
-        // canvas) to keep the default→muted hierarchy gap. Light value (gray.900)
-        // is unchanged.
-        value: { base: '{colors.gray.900}', _dark: desaturatedGray[400] },
+        // Secondary text. `_light` (not `base`): Chakra's default `fg.muted` is
+        // `{ _light: gray.600 }`, which outranks `base` in light mode — so `base`
+        // was shadowed and secondary text rendered gray.600, lighter than our
+        // intended gray.900. _dark sits one step below `default` (~9.5:1 on the
+        // dark canvas) to keep the default→muted hierarchy gap.
+        value: { _light: '{colors.gray.900}', _dark: '{colors.grayDark.400}' },
       },
       subtle: {
-        // Tertiary / placeholder / icon text. _dark a11y-bumped from the straight
-        // mirror (desaturatedGray[600] #8E939F, ~4.06:1 on bg.muted) to #989DA9
-        // (~4.6:1) so it clears AA while staying below fg.muted. Light value
-        // (gray.700) is unchanged.
-        value: { base: '{colors.gray.700}', _dark: '#989DA9' },
+        // Tertiary / placeholder / icon text. `_light` (not `base`): Chakra's
+        // default `fg.subtle` is `{ _light: gray.400 }`, which outranks `base` in
+        // light mode — so `base` was shadowed and this rendered gray.400, much
+        // lighter than our intended gray.700. _dark a11y-bumped from the straight
+        // mirror (grayDark.600 #8E939F, ~4.06:1 on bg.muted) to #989DA9
+        // (~4.6:1) so it clears AA while staying below fg.muted.
+        value: {
+          _light: '{colors.gray.700}',
+          _dark: '{colors.grayDark.fgSubtle}',
+        },
       },
       inverse: {
-        value: { base: '{colors.gray.0}', _dark: desaturatedGray[1400] },
+        value: { base: '{colors.gray.0}', _dark: '{colors.grayDark.1400}' },
       },
     },
 
@@ -506,16 +527,22 @@ export const semanticTokens = {
       // straight halved-saturation mirror (no a11y bump). `_light` repeats
       // Chakra's value so light is untouched.
       DEFAULT: {
-        value: { _light: '{colors.gray.200}', _dark: desaturatedGray[800] },
+        value: { _light: '{colors.gray.200}', _dark: '{colors.grayDark.800}' },
       },
       default: {
-        value: { base: '{colors.gray.300}', _dark: desaturatedGray[1100] },
+        value: { base: '{colors.gray.300}', _dark: '{colors.grayDark.1100}' },
       },
       subtle: {
-        value: { base: '{colors.gray.200}', _dark: desaturatedGray[1300] },
+        // `_light` (not `base`): Chakra's default `border.subtle` is
+        // `{ _light: gray.50 }`, and a `_light` condition outranks `base` in
+        // light mode — so a `base` override here is silently shadowed by
+        // Chakra's near-white gray.50 (dividers/frames vanish). Pin `_light` so
+        // our gray.200 wins. (`border.default`/`strong` are safe: Chakra has no
+        // default for those names, so `base` is honoured.)
+        value: { _light: '{colors.gray.200}', _dark: '{colors.grayDark.1300}' },
       },
       strong: {
-        value: { base: '{colors.gray.500}', _dark: desaturatedGray[900] },
+        value: { base: '{colors.gray.500}', _dark: '{colors.grayDark.900}' },
       },
     },
   },
@@ -730,6 +757,50 @@ export const colors = {
     1500: { value: '#0B0E17' }, // Darkest background
   },
 
+  /**
+   * Dark-mode neutral palette — the halved-saturation counterpart of each
+   * primitive `gray.N` (same hue and lightness, HSL saturation cut by ~50%,
+   * e.g. `gray.1300` #1E2433 @ 26% → #23262E @ 13%). The blue-tinted `gray`
+   * ramp reads as the right neutral in light mode but turns muddy/
+   * over-chromatic as a dark surface, so every dark-mode neutral in the
+   * semantic layer (`slate.*`, and the `_dark` of `bg`/`fg`/`border`) resolves
+   * to a step of this scale instead of a raw `gray` step. Light mode is
+   * untouched — it keeps referencing `{colors.gray.*}` verbatim.
+   *
+   * Exposed as a primitive scale (rather than the previous inlined hex
+   * literals) so a consumer theme — e.g. FactChat's per-tenant
+   * `theme_color_overrides` — can rebrand dark mode by overriding these
+   * tokens, the same way overriding `blue.*` retints the `primary.*` ramp.
+   *
+   * The three `fg*` steps are the hand-tuned a11y lifts documented at their
+   * consuming tokens (`slate.600`/`slate.700`/`fg.subtle` in dark mode): the
+   * straight mirrors measured under WCAG AA 4.5:1 on the dark canvas/surface,
+   * so these sit slightly lighter than their scale neighbours.
+   */
+  grayDark: {
+    0: { value: '#FEFEFF' },
+    50: { value: '#F8F9FB' },
+    100: { value: '#F2F4F7' },
+    200: { value: '#E5E8EC' },
+    300: { value: '#D2D5DB' },
+    400: { value: '#B6BAC3' },
+    500: { value: '#A2A6B1' },
+    600: { value: '#8E939F' },
+    700: { value: '#7C818D' },
+    800: { value: '#6A6F7C' },
+    900: { value: '#595E6B' },
+    1000: { value: '#4A4E5A' },
+    1100: { value: '#3C404B' },
+    1200: { value: '#30343C' },
+    1300: { value: '#23262E' },
+    1400: { value: '#181A20' },
+    1500: { value: '#0E1014' },
+    // A11y-lifted foreground steps (see scale doc above).
+    fg600: { value: '#898E99' },
+    fg700: { value: '#8D919D' },
+    fgSubtle: { value: '#989DA9' },
+  },
+
   /**
    * Legacy purple palette (aliased to violet for backwards compatibility)
    * @deprecated Use `violet` instead

package/src/theme/formControls.ts

@@ -0,0 +1,58 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
+/**
+ * Keeps a text-entry control at the size iOS Safari needs to leave the viewport
+ * alone.
+ *
+ * Safari zooms the page when a focused editable host computes to a font-size
+ * under 16px. The only ways to suppress that are `maximum-scale=1` /
+ * `user-scalable=no`, which also remove pinch-zoom and fail KWCAG 2.2 8.2.1
+ * (확대/축소 보장), so the control has to meet the threshold instead.
+ *
+ * Being under it is the default here rather than the exception: `html` is 14px
+ * (see `global.ts`), and Chakra's input recipe maps `size="sm"`/`"md"` onto the
+ * `sm`/`md` textStyles, which this theme defines as
+ * `{ base: '0.875em', md: '1em' }`. The `base` arm is the PHONE, so a control
+ * renders *smaller* there than on desktop — 12.25px against the 14px root.
+ *
+ * Exactly 16px, not a floor like `max(16px, 1em)`: 16px is the threshold
+ * itself, so anything above it only makes a phone form bigger than the type
+ * scale intends. Nothing in the set is clamped by it — the largest shipped
+ * control text is `PinInput`'s OTP box at `1.125rem` = 15.75px, which is itself
+ * under the line and gets raised.
+ *
+ * **`pointer: coarse`, never a width breakpoint.** The zoom is a property of the
+ * device, and a width rule is wrong in both directions: it misses touch devices
+ * above the breakpoint (iPad portrait is exactly 768px, iPhone landscape wider
+ * still), and it catches devices that never zoom — a desktop user at 200%
+ * browser zoom has a ~640px CSS viewport, so a width rule enlarges their form
+ * controls and pushes wide tables off-screen, making the low-vision case worse.
+ *
+ * `Input`, `Textarea` and `PinInput` already spread this, so their call sites
+ * need nothing, and `PasswordInput` composes `Input` so it inherits.
+ *
+ * `Combobox`'s input spreads it too — it is the one typeable listbox.
+ *
+ * `Select` deliberately does NOT, because the zoom does not reach it. It is a
+ * listbox — a `<button>` trigger over a portalled list, plus a
+ * visually hidden native `<select>` that exists only for form submission and
+ * never takes visible focus; Safari zooms toward text entry, not toward a
+ * button.
+ *
+ * Spread it yourself on any editable surface the design system does not own —
+ * a Lexical/ProseMirror `contenteditable`, a bare Chakra `Input`, or a
+ * `ChakraPinInput.Input`:
+ *
+ * ```tsx
+ * <Box css={mergeCss(noZoomOnFocus, ownStyles)} />
+ * ```
+ *
+ * It is merged first inside those components, so a call site that genuinely
+ * wants a different size can still pass one. That makes it a default rather
+ * than a lock, and the cost is that a regression is invisible at the call
+ * site — catch it by measuring computed font-size under device emulation, not
+ * by reading the JSX.
+ */
+export const noZoomOnFocus: SystemStyleObject = {
+  '@media (pointer: coarse)': { fontSize: '16px' },
+};

package/src/theme/index.ts

@@ -2,11 +2,14 @@ import {
   createSystem,
   defaultConfig,
   defineConfig,
+  defineSlotRecipe,
   defineTextStyles,
 } from '@chakra-ui/react';
 
 import { colors, semanticTokens } from './colors';
 import { globalCss } from './global';
+import { animationStyles, durations, easings, keyframes } from './motion';
+import { accordionSlotRecipe } from './recipes/accordion';
 import { tableSlotRecipe } from './recipes/table';
 
 /**
@@ -18,21 +21,25 @@ const SHARED_TEXT_STYLE_VALUES = {
   h1: {
     fontFamily: 'heading',
     fontSize: { base: '2.4em', md: '3em' }, // 38.4px → 48px
-    fontWeight: 'bold',
+    // Display sizes carry the heaviest weight; the tight negative tracking
+    // above keeps extrabold from reading loose at 48px.
+    fontWeight: 'extrabold',
     lineHeight: '1.33',
     letterSpacing: '-0.02em',
   },
   h2: {
     fontFamily: 'heading',
     fontSize: { base: '2em', md: '2.5em' }, // 32px → 40px
-    fontWeight: 'semibold',
+    fontWeight: 'extrabold',
     lineHeight: '1.33',
     letterSpacing: '-0.01em',
   },
   h3: {
     fontFamily: 'heading',
     fontSize: { base: '1.5em', md: '1.75em' }, // 24px → 28px
-    fontWeight: 'semibold',
+    // Steps down to bold — the weight ramp tapers as size shrinks so heavy
+    // display weights don't muddy the smaller headings (h4/h5 stay lighter).
+    fontWeight: 'bold',
     lineHeight: '1.33',
     letterSpacing: '-0.01em',
   },
@@ -60,6 +67,14 @@ const SHARED_TEXT_STYLE_VALUES = {
     fontWeight: '500',
     lineHeight: '1.5',
   },
+  caption: {
+    fontFamily: 'body',
+    fontSize: { base: '0.688em', md: '0.75em' }, // 11px → 12px
+    fontWeight: '500',
+    // Tighter leading than the body scale (1.5): captions are compact,
+    // typically single-line metadata (timestamps, counts, helper microcopy).
+    lineHeight: '1.4',
+  },
   overline: {
     fontFamily: 'body',
     fontSize: { base: '0.805em', md: '0.875em' }, // 12.88px → 14px (matches subtext)
@@ -177,9 +192,14 @@ export const textStyles = defineTextStyles({
     value: SHARED_TEXT_STYLE_VALUES.subtitleAndP,
   },
   subtext: {
-    description: 'Small caption text - responsive 12.88-14px',
+    description: 'Supporting / secondary text - responsive 12.88-14px',
     value: SHARED_TEXT_STYLE_VALUES.subtext,
   },
+  caption: {
+    description:
+      'Smallest metadata tier — timestamps, counts, helper microcopy (11-12px)',
+    value: SHARED_TEXT_STYLE_VALUES.caption,
+  },
   overline: {
     description:
       'Eyebrow / section label - uppercase, wider tracking (12.88-14px)',
@@ -187,6 +207,49 @@ export const textStyles = defineTextStyles({
   },
 });
 
+/**
+ * `lg`/`xl` form-control font size.
+ *
+ * Chakra's input, textarea and select recipes put `sm`/`md` on the `sm`
+ * textStyle and `lg`/`xl` on `md`. This theme maps both textStyles to
+ * `subtitleAndP`, so every size rendered at the same 14px and only the height
+ * changed. `lg`/`xl` get their own step here (desktop 16px, phone 14px);
+ * `xs`/`sm`/`md` keep their current size on purpose, so call sites that do not
+ * pass `size` render exactly as before.
+ *
+ * Spacing tokens are em-based, so Chakra's `lg` `px: 4` grows with the font to
+ * 16px. `lg` drops to `px: 3` (12px) to stay close to `md`'s 10.5px.
+ */
+const FORM_CONTROL_LG_FONT_SIZE = { base: '1em', md: '1.143em' } as const;
+
+const formControlLgOverride = {
+  variants: {
+    size: {
+      lg: { fontSize: FORM_CONTROL_LG_FONT_SIZE, px: '3' },
+      xl: { fontSize: FORM_CONTROL_LG_FONT_SIZE },
+    },
+  },
+};
+
+// Same `lg` step as Input, and the same height as Input `lg` (Chakra puts the
+// select trigger one token taller). Chakra's `py: 3` is em-based, so at 16px it
+// alone pushes the trigger past the min height; let the height token win.
+const selectSlotRecipe = defineSlotRecipe({
+  slots: ['root', 'trigger', 'content'],
+  variants: {
+    size: {
+      lg: {
+        root: {
+          '--select-trigger-height': 'sizes.11',
+          '--select-trigger-padding-x': 'spacing.3',
+        },
+        trigger: { fontSize: FORM_CONTROL_LG_FONT_SIZE, py: '1.5' },
+        content: { fontSize: FORM_CONTROL_LG_FONT_SIZE },
+      },
+    },
+  },
+});
+
 /**
  * Chakra UI v3 theme configuration for Logician UI
  *
@@ -195,8 +258,17 @@ export const textStyles = defineTextStyles({
 const config = defineConfig({
   globalCss,
   theme: {
+    // The motion vocabulary, consumed as `animationStyle="feedback"` — the same
+    // composition slot `textStyles` uses, so a consuming app can remap a preset
+    // from its own config.
+    animationStyles,
+    keyframes,
     tokens: {
       colors,
+      // Merged with Chakra's own scales, not replacing them — see ./motion for
+      // why the durations carry a `motion.` prefix and the easings don't.
+      durations,
+      easings,
       fonts: {
         body: {
           value: '"Pretendard Variable", "Inter", "Noto Sans", sans-serif',
@@ -257,8 +329,14 @@ const config = defineConfig({
       colors: semanticTokens.colors,
     },
     textStyles,
+    recipes: {
+      input: formControlLgOverride,
+      textarea: formControlLgOverride,
+    },
     slotRecipes: {
+      accordion: accordionSlotRecipe,
       table: tableSlotRecipe,
+      select: selectSlotRecipe,
     },
   },
 });

package/src/theme/motion.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+
+import { system } from './index';
+
+/**
+ * These lock in the two decisions the motion scale is built on, both of which
+ * are invisible at the call site and easy to undo by accident.
+ */
+describe('motion tokens', () => {
+  it('resolves the prefixed durations, and flattens them to hyphenated vars', () => {
+    expect(system.token('durations.motion.instant')).toBe('0ms');
+    expect(system.token('durations.motion.press')).toBe('120ms');
+    expect(system.token('durations.motion.base')).toBe('300ms');
+    expect(system.token('durations.motion.slow')).toBe('500ms');
+    expect(system.token('durations.motion.slower')).toBe('700ms');
+
+    // The reason `durations.motion` is a nested object rather than flat
+    // `'motion.base'` keys: a literal dot is escaped into the variable name
+    // (`--chakra-durations-motion\.base`), which cannot be written by hand in
+    // emotion keyframes or a raw `css={{ }}` block.
+    expect(system.tokens.getVar('durations.motion.base')).toBe(
+      'var(--chakra-durations-motion-base)'
+    );
+  });
+
+  it('leaves Chakra own duration scale untouched', () => {
+    // The whole point of the `motion.` prefix. `slow`/`slower` mean 500/700ms to
+    // us and 300/400ms to Chakra, and `dialog`, `drawer` and `progress` read
+    // Chakra's — overriding them would retime components we do not own.
+    expect(system.token('durations.fast')).toBe('150ms');
+    expect(system.token('durations.moderate')).toBe('200ms');
+    expect(system.token('durations.slow')).toBe('300ms');
+    expect(system.token('durations.slower')).toBe('400ms');
+  });
+
+  it('adds easings alongside Chakra own, with no collision', () => {
+    expect(system.token('easings.standard')).toBe(
+      'cubic-bezier(0.4, 0, 0.2, 1)'
+    );
+    expect(system.token('easings.emphasized')).toBe(
+      'cubic-bezier(0.22, 1, 0.36, 1)'
+    );
+    expect(system.token('easings.overshoot')).toBe(
+      'cubic-bezier(0.34, 1.56, 0.64, 1)'
+    );
+    expect(system.token('easings.ease-in-smooth')).toBe(
+      'cubic-bezier(0.32, 0.72, 0, 1)'
+    );
+  });
+});