@mindlogic-ai/logician-ui 5.0.0-alpha.3 → 5.0.0-alpha.30

package/src/theme/controlSizes.test.ts

@@ -0,0 +1,153 @@
+import { defaultSystem } from '@chakra-ui/react';
+import { describe, expect, it } from 'vitest';
+
+import {
+  segmentItemHeight,
+  segmentRootPaddingPx,
+} from '../components/SegmentedControl/SegmentedControl.styles';
+import { getTagSizeStyles } from '../components/Tag/Tag.styles';
+import {
+  CONTROL_RADIUS,
+  CONTROL_SIZES,
+  controlHeightToken,
+  controlSizes,
+  CORE_CONTROL_SIZES,
+} from './controlSizes';
+import { system } from './index';
+
+/**
+ * Every control that takes `size` must resolve it through `controlSizes`.
+ *
+ * These read the recipes the shipped `system` actually ends up with (Chakra's
+ * defaults deep-merged with ours) and the helpers the components call, so a
+ * component that grows its own height or type map again fails here — the
+ * QA #18 toolbar (SegmentedControl 36px next to Input 28px next to Tag 20px)
+ * is what that looked like.
+ */
+
+type Variant = Record<string, any>;
+const sizeVariants = (recipe: { variants?: { size?: Variant } }) =>
+  recipe.variants?.size ?? {};
+
+describe('controlSizes — Button is the reference', () => {
+  it('restates Chakra’s own button sizes exactly (no Button changes size)', () => {
+    const chakra = sizeVariants(defaultSystem.getRecipe('button'));
+    for (const size of CONTROL_SIZES) {
+      const s = controlSizes[size];
+      expect(chakra[size], size).toMatchObject({
+        h: s.height,
+        minW: s.height,
+        textStyle: s.textStyle,
+        px: s.actionPaddingX,
+        gap: s.gap,
+        _icon: { width: s.iconSize, height: s.iconSize },
+      });
+    }
+  });
+
+  it('the shipped button recipe resolves to the scale', () => {
+    const shipped = sizeVariants(system.getRecipe('button'));
+    for (const size of CONTROL_SIZES) {
+      expect(shipped[size].h, size).toBe(controlSizes[size].height);
+      expect(shipped[size].textStyle, size).toBe(controlSizes[size].textStyle);
+    }
+  });
+});
+
+describe('controlSizes — every other control resolves to the same scale', () => {
+  it.each(CORE_CONTROL_SIZES)('Input %s', (size) => {
+    const v = sizeVariants(system.getRecipe('input'))[size];
+    expect(v['--input-height']).toBe(controlHeightToken(size));
+    expect(v.textStyle).toBe(controlSizes[size].textStyle);
+    expect(v.px).toBe(controlSizes[size].fieldPaddingX);
+  });
+
+  it.each(CORE_CONTROL_SIZES)('Textarea %s (type and padding)', (size) => {
+    const v = sizeVariants(system.getRecipe('textarea'))[size];
+    expect(v.textStyle).toBe(controlSizes[size].textStyle);
+    expect(v.px).toBe(controlSizes[size].fieldPaddingX);
+  });
+
+  it.each(CORE_CONTROL_SIZES)('Select %s', (size) => {
+    const v = sizeVariants(system.getSlotRecipe('select'))[size];
+    expect(v.root['--select-trigger-height']).toBe(controlHeightToken(size));
+    expect(v.trigger.textStyle).toBe(controlSizes[size].textStyle);
+  });
+
+  it.each(CORE_CONTROL_SIZES)('Combobox %s', (size) => {
+    const v = sizeVariants(system.getSlotRecipe('combobox'))[size];
+    expect(v.root['--combobox-input-height']).toBe(controlHeightToken(size));
+    expect(v.input.textStyle).toBe(controlSizes[size].textStyle);
+  });
+
+  it.each(['sm', 'md', 'lg'] as const)('Tabs %s', (size) => {
+    const v = sizeVariants(system.getSlotRecipe('tabs'))[size];
+    expect(v.root['--tabs-height']).toBe(controlHeightToken(size));
+    expect(v.trigger.textStyle).toBe(controlSizes[size].textStyle);
+  });
+
+  it.each(CORE_CONTROL_SIZES)('Checkbox / Radio / Switch label %s', (size) => {
+    const t = controlSizes[size].textStyle;
+    expect(
+      sizeVariants(system.getSlotRecipe('checkbox'))[size].label.textStyle
+    ).toBe(t);
+    expect(
+      sizeVariants(system.getSlotRecipe('radioGroup'))[size].item.textStyle
+    ).toBe(t);
+    expect(
+      sizeVariants(system.getSlotRecipe('switch'))[size].label.textStyle
+    ).toBe(t);
+  });
+
+  it.each(CORE_CONTROL_SIZES)(
+    'SegmentedControl %s: item + 2 × root padding = the height token',
+    (size) => {
+      const padding = size === 'xs' ? 2 : 4;
+      expect(segmentRootPaddingPx(size)).toBe(padding);
+      expect(segmentItemHeight(size)).toBe(
+        `calc(var(--chakra-sizes-${controlSizes[size].height}) - ${padding * 2}px)`
+      );
+    }
+  );
+
+  it.each(CORE_CONTROL_SIZES)('interactive Tag %s', (size) => {
+    const { sizeStyles } = getTagSizeStyles(size, true);
+    expect(sizeStyles).toMatchObject({
+      h: controlSizes[size].height,
+      textStyle: controlSizes[size].textStyle,
+      px: controlSizes[size].actionPaddingX,
+      borderRadius: CONTROL_RADIUS,
+    });
+  });
+
+  it('a static Tag keeps the badge sizes', () => {
+    expect(getTagSizeStyles('lg', false).sizeStyles).toEqual({
+      fontSize: 'sm',
+    });
+    expect(getTagSizeStyles('xs', false).recipeSize).toBe('sm');
+  });
+
+  it('boxed fields share Button’s corner', () => {
+    expect(system.getRecipe('input').base.borderRadius).toBe(CONTROL_RADIUS);
+    expect(system.getRecipe('textarea').base.borderRadius).toBe(CONTROL_RADIUS);
+    expect(system.getSlotRecipe('select').base.trigger.borderRadius).toBe(
+      CONTROL_RADIUS
+    );
+    expect(system.getSlotRecipe('combobox').base.input.borderRadius).toBe(
+      CONTROL_RADIUS
+    );
+  });
+});
+
+describe('slot recipe overrides keep Chakra’s anatomy', () => {
+  // Chakra merges configs array-by-index: a partial `slots` list overwrites
+  // the first entries of the default list instead of adding to it.
+  it.each(['select', 'combobox', 'tabs', 'checkbox', 'radioGroup', 'switch'])(
+    '%s',
+    (key) => {
+      expect(system.getSlotRecipe(key).slots).toEqual(
+        defaultSystem.getSlotRecipe(key).slots
+      );
+    }
+  );
+});

package/src/theme/controlSizes.ts

@@ -0,0 +1,162 @@
+/**
+ * One size scale for every control.
+ *
+ * A row of controls — a table filter bar, a toolbar, an inline form — only
+ * lines up when every control resolves the same `size` value to the same
+ * height, type size, icon size and corner. Each component used to carry its own
+ * map (Chakra's recipe here, a local table there), and they drifted: in the
+ * FactChat coding-agent toolbar a `SegmentedControl size="sm"` drew 36px, an
+ * `Input size="xs"` 28px and an `lg` `Tag` 20.4px side by side (R28 3차 QA #18).
+ * Every height-bearing control and every recipe override now reads this table,
+ * and `controlSizes.test.ts` fails if one stops doing so.
+ *
+ * ## The scale is Button's
+ *
+ * `Button` was the reference and does not change: the values below are exactly
+ * Chakra's button recipe. Everything else is aligned to it.
+ *
+ * | size | height token | px at the 14px root | in a 16px `ScaledContext` (desktop) |
+ * |------|--------------|---------------------|-------------------------------------|
+ * | 2xs  | `sizes.6`    | 21                  | 21 (2xs type is 0.875em)            |
+ * | xs   | `sizes.8`    | 28                  | 28 (xs type is 0.875em)             |
+ * | sm   | `sizes.9`    | 31.5                | 36                                  |
+ * | md   | `sizes.10`   | 35                  | 40                                  |
+ * | lg   | `sizes.11`   | 38.5                | 44                                  |
+ * | xl   | `sizes.12`   | 42                  | 48                                  |
+ *
+ * ## Why one type step per size, not just one height
+ *
+ * `html` is 14px, and the sizes tokens are rem, so outside a `ScaledContext`
+ * the height alone decides. Inside one (FactChat's `ReadingScale` is
+ * `<ScaledContext fontSize="16px">`) the sizes tokens become **em**, and an em
+ * resolves against the control's *own* font size. Two controls with the same
+ * height token but different type therefore stop matching there — that is how
+ * `Input lg` (1.143em type) drew 50px next to a 44px `Button lg`. The same
+ * happens at the mobile breakpoint, where the textStyles drop to 0.875em. So
+ * every control takes its type from `textStyle` here too: equal type per size
+ * is what keeps equal height everywhere, not only at the root.
+ *
+ * Text-entry controls still raise their type to 16px under `pointer: coarse`
+ * (`noZoomOnFocus`, iOS zoom). At the root that changes nothing about height;
+ * inside a `ScaledContext` on a touch device it makes an `Input` taller than
+ * its neighbours. That is the price of not zooming, and it is left alone.
+ *
+ * ## Two padding ramps
+ *
+ * Action controls (Button, SegmentedControl items, interactive Tag) and field
+ * controls (Input, Select, Combobox, Textarea) keep different inline padding on
+ * purpose: a field's text starts near its edge, a button's label is centred in
+ * air. Each ramp is shared by its whole family.
+ *
+ * ## Icons
+ *
+ * `iconSize` is Button's `_icon` ramp as a sizes token; `iconBoxSize` is the
+ * `Icon` `boxSize` name with the same size, for icons a control draws itself
+ * (DatePicker / MonthPicker triggers) and for call sites placing an icon in a
+ * control (`<SearchIcon boxSize={controlSizes[size].iconBoxSize} />`).
+ */
+
+export const CONTROL_SIZES = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+export type ControlSize = (typeof CONTROL_SIZES)[number];
+
+/**
+ * The four sizes a control row is built from. Every height-bearing control
+ * supports these; `2xs` / `xl` exist only where the component already had them.
+ */
+export const CORE_CONTROL_SIZES = ['xs', 'sm', 'md', 'lg'] as const;
+
+export type CoreControlSize = (typeof CORE_CONTROL_SIZES)[number];
+
+export interface ControlSizeSpec {
+  /** `sizes` token key — the outer height of every height-bearing control. */
+  height: string;
+  /** textStyle every control uses at this size (font size + line height). */
+  textStyle: 'xs' | 'sm' | 'md';
+  /** `sizes` token key for an icon inside the control (Button's `_icon`). */
+  iconSize: string;
+  /** The `Icon` `boxSize` name that renders at `iconSize`. */
+  iconBoxSize: '2xs' | 'xs' | 'sm';
+  /** Inline padding of action controls (spacing token). */
+  actionPaddingX: string;
+  /** Inline padding of field controls (spacing token). */
+  fieldPaddingX: string;
+  /** Gap between an icon and the label (spacing token). */
+  gap: string;
+}
+
+export const controlSizes: Record<ControlSize, ControlSizeSpec> = {
+  '2xs': {
+    height: '6',
+    textStyle: 'xs',
+    iconSize: '3.5',
+    iconBoxSize: '2xs',
+    actionPaddingX: '2',
+    fieldPaddingX: '2',
+    gap: '1',
+  },
+  xs: {
+    height: '8',
+    textStyle: 'xs',
+    iconSize: '4',
+    iconBoxSize: 'xs',
+    actionPaddingX: '2.5',
+    fieldPaddingX: '2',
+    gap: '1',
+  },
+  sm: {
+    height: '9',
+    textStyle: 'sm',
+    iconSize: '4',
+    iconBoxSize: 'xs',
+    actionPaddingX: '3.5',
+    fieldPaddingX: '2.5',
+    gap: '2',
+  },
+  md: {
+    height: '10',
+    textStyle: 'sm',
+    iconSize: '5',
+    iconBoxSize: 'sm',
+    actionPaddingX: '4',
+    fieldPaddingX: '3',
+    gap: '2',
+  },
+  lg: {
+    height: '11',
+    textStyle: 'md',
+    iconSize: '5',
+    iconBoxSize: 'sm',
+    actionPaddingX: '5',
+    // 12px at a 16px font — kept from the lg padding fix (f2820c8) so lg reads
+    // as a step up from md rather than a wider box.
+    fieldPaddingX: '3',
+    gap: '3',
+  },
+  xl: {
+    height: '12',
+    textStyle: 'md',
+    iconSize: '5',
+    iconBoxSize: 'sm',
+    actionPaddingX: '5',
+    fieldPaddingX: '4.5',
+    gap: '2.5',
+  },
+};
+
+/** Corner radius of every boxed control, at every size (Button's). */
+export const CONTROL_RADIUS = 'md';
+
+/** `sizes.N` token path of a size's height, for recipe CSS variables. */
+export const controlHeightToken = (size: ControlSize): string =>
+  `sizes.${controlSizes[size].height}`;
+
+/** The same height as a CSS value, for `calc()` and inline styles. */
+export const controlHeightVar = (size: ControlSize): string =>
+  `var(--chakra-sizes-${controlSizes[size].height})`;
+
+/** Resolve an arbitrary `size` prop to a spec, falling back to `md`. */
+export const getControlSize = (size: unknown): ControlSizeSpec =>
+  typeof size === 'string' && size in controlSizes
+    ? controlSizes[size as ControlSize]
+    : controlSizes.md;

package/src/theme/global.ts

@@ -35,10 +35,29 @@ export const globalCss = defineGlobalStyles({
   },
 
   'html, body': {
-    // Mode-aware primary text (neutral.11 light / cream dark).
+    // Mode-aware primary text (neutral.11 light / off-white dark).
     color: 'fg.default',
   },
 
+  // Korean breaks between 어절, not mid-word — but only Korean. Japanese and
+  // Chinese have no spaces, so `keep-all` turns a whole sentence into one
+  // unbreakable run that overflows its box. Set once on <html> by language
+  // and let it inherit (`word-break` is inherited), so a component that asks
+  // for `break-all` (emails, keys, file names) still gets it. The Typography
+  // components used to hard-code `keep-all` on themselves, which left every
+  // ja screen to undo it one call site at a time.
+  'html:lang(ko)': {
+    wordBreak: 'keep-all',
+  },
+  // Japanese wraps at phrase boundaries (文節) where the browser can find them
+  // (Chromium 119+, ja only). Elsewhere the rule is skipped and ja keeps the
+  // default `normal`, which breaks between characters — never `keep-all`.
+  'html:lang(ja)': {
+    '@supports (word-break: auto-phrase)': {
+      wordBreak: 'auto-phrase',
+    },
+  },
+
   '#__next': {
     height: 'var(--chakra-vh)',
   },

package/src/theme/index.ts

@@ -2,7 +2,6 @@ import {
   createSystem,
   defaultConfig,
   defineConfig,
-  defineSlotRecipe,
   defineTextStyles,
   type SystemConfig,
 } from '@chakra-ui/react';
@@ -15,6 +14,18 @@ import {
 import { globalCss } from './global';
 import { animationStyles, durations, easings, keyframes } from './motion';
 import { accordionSlotRecipe } from './recipes/accordion';
+import { avatarSlotRecipe } from './recipes/avatar';
+import {
+  buttonRecipe,
+  checkboxSlotRecipe,
+  comboboxSlotRecipe,
+  inputRecipe,
+  radioGroupSlotRecipe,
+  selectSlotRecipe,
+  switchSlotRecipe,
+  tabsSlotRecipe,
+  textareaRecipe,
+} from './recipes/controls';
 import { tableSlotRecipe } from './recipes/table';
 
 /**
@@ -212,49 +223,6 @@ 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 },
-      },
-    },
-  },
-});
-
 type TokenNode = { value?: unknown; [key: string]: unknown };
 
 const normalizeNode = (node: TokenNode): TokenNode => {
@@ -397,14 +365,23 @@ export function createLogicianTheme(options: LogicianThemeOptions = {}) {
         colors: createSemanticColors(options),
       },
       textStyles,
+      // Every control's `size` variant reads the shared scale in
+      // ./controlSizes — see ./recipes/controls.
       recipes: {
-        input: formControlLgOverride,
-        textarea: formControlLgOverride,
+        button: buttonRecipe,
+        input: inputRecipe,
+        textarea: textareaRecipe,
       },
       slotRecipes: {
         accordion: accordionSlotRecipe,
+        avatar: avatarSlotRecipe,
         table: tableSlotRecipe,
         select: selectSlotRecipe,
+        combobox: comboboxSlotRecipe,
+        tabs: tabsSlotRecipe,
+        checkbox: checkboxSlotRecipe,
+        radioGroup: radioGroupSlotRecipe,
+        switch: switchSlotRecipe,
       },
     },
   });