@sigx/lynx-zero 0.4.9

package/src/index.ts

@@ -0,0 +1,101 @@
+// @sigx/lynx-zero — design-system-neutral UI foundation.
+//
+// Holds what every design-system package (@sigx/lynx-daisyui,
+// @sigx/lynx-heroui, …) shares: the props/token contract, the theme engine,
+// layout primitives, style utilities and press-feedback defaults
+// (see signalxjs/lynx#219).
+
+// The shared contract: scales, semantic colors, prop fragments,
+// token-name conventions.
+export type {
+  SizeScale,
+  ColorVariant,
+  ColorToken,
+  CoreColorToken,
+  SoftColorToken,
+  BackgroundValue,
+  WithClass,
+  WithDisabled,
+  WithColor,
+  WithSize,
+  WithAccessibility,
+  PressEvent,
+} from './contract.js';
+export { resolveColorToken, COLOR_VARIANT_LIST } from './contract.js';
+
+// Box-model style helpers.
+export type { SpacingValue, BoxProps } from './shared/styles.js';
+export { resolveSpacing, resolveBoxStyle } from './shared/styles.js';
+
+// Press-feedback defaults for interactive components.
+export { PRESSED_SCALE, PRESSED_OPACITY } from './shared/press.js';
+
+// Headless tabs selection — shared behavior behind every DS's Tabs/Tab.
+export { useTabsSelection, provideTabsSelection } from './shared/tabs-selection.js';
+export type { TabsSelection } from './shared/tabs-selection.js';
+
+// Theme engine — registry mechanism, provider, headless controller. Theme
+// *data* (palettes, generated first-paint CSS classes) lives in each
+// design-system package, which seeds the registry at module load.
+export {
+  ThemeProvider,
+  useTheme,
+  listThemes,
+  registerTheme,
+  extendTheme,
+  pickThemeFor,
+  pairOf,
+  variantOf,
+  colorsOf,
+  radiusOf,
+  sizesOf,
+} from './theme/ThemeProvider.js';
+export type {
+  ThemeName,
+  ThemeController,
+  ThemeProviderProps,
+  Theme,
+  ThemePalette,
+  ThemeRadius,
+  ThemeSizes,
+  ThemeVariant,
+} from './theme/ThemeProvider.js';
+// Palette completion (soft tints) + the JS-side color mixer behind it.
+export { completeTheme } from './theme/registry.js';
+export type { ThemeInput, ThemePaletteInput } from './theme/registry.js';
+export { mixColors } from './theme/color-mix.js';
+// Scoped palette → concrete values for native consumers that can't read
+// CSS custom properties (platform inputs, sigx-richtext, SVG fills).
+export { useThemeColors, toHexColor, withAlpha } from './theme/use-theme-colors.js';
+export type { ThemeColors } from './theme/use-theme-colors.js';
+// Headless theme handle: import and call from anywhere — stores, services,
+// effects, app-boot — with no `<ThemeProvider>` ancestor required.
+export { themeController } from './theme/theme-state.js';
+export { StatusBarSync } from './theme/StatusBarSync.js';
+export type { StatusBarSyncProps } from './theme/StatusBarSync.js';
+// Per-screen theming (`useScreenTheme`) is deliberately NOT re-exported here:
+// it statically imports the optional `@sigx/lynx-navigation` peer, and a
+// barrel re-export would force that resolution onto every consumer. Import it
+// from the subpath instead: `@sigx/lynx-zero/screen-theme`.
+
+// Layout primitives — design-system-neutral structure (flex containers,
+// spacing, scrolling); no design-system class names involved.
+export { Row } from './layout/Row.js';
+export type { RowProps } from './layout/Row.js';
+export { Col } from './layout/Col.js';
+export type { ColProps } from './layout/Col.js';
+export { Center } from './layout/Center.js';
+export type { CenterProps } from './layout/Center.js';
+export { Spacer } from './layout/Spacer.js';
+export type { SpacerProps } from './layout/Spacer.js';
+export { ScrollView } from './layout/ScrollView.js';
+export type { ScrollViewProps } from './layout/ScrollView.js';
+
+// Swiper page indicator — design-system-neutral (pure tokens + headless
+// gesture/motion hooks, no DS class names). Both design systems re-export it.
+export { SwiperIndicator } from './components/SwiperIndicator.js';
+export type {
+  SwiperIndicatorProps,
+  SwiperIndicatorVariant,
+  SwiperIndicatorSize,
+} from './components/SwiperIndicator.js';

package/src/layout/Center.tsx

@@ -0,0 +1,41 @@
+import { component, type Define } from '@sigx/lynx';
+import type { BackgroundValue } from '../contract.js';
+import { resolveBoxStyle } from '../shared/styles.js';
+
+export type CenterProps =
+  & Define.Prop<'width', number | string, false>
+  & Define.Prop<'height', number | string, false>
+  & Define.Prop<'flex', number, false>
+  & Define.Prop<'background', BackgroundValue, false>
+  & Define.Prop<'borderRadius', number, false>
+  & Define.Prop<'class', string, false>
+  & Define.Slot<'default'>;
+
+export const Center = component<CenterProps>(({ props, slots }) => {
+  const getStyle = (): Record<string, string | number> => {
+    const style: Record<string, string | number> = {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    };
+
+    const box = resolveBoxStyle({
+      width: props.width,
+      height: props.height,
+      flex: props.flex,
+      background: props.background,
+      borderRadius: props.borderRadius,
+    });
+    for (const key in box) {
+      style[key] = box[key] as string | number;
+    }
+
+    return style;
+  };
+
+  return () => (
+    <view class={props.class} style={getStyle()}>
+      {slots.default?.()}
+    </view>
+  );
+});

package/src/layout/Col.tsx

@@ -0,0 +1,53 @@
+import { component, type Define } from '@sigx/lynx';
+import type { BackgroundValue } from '../contract.js';
+import { type SpacingValue, resolveBoxStyle } from '../shared/styles.js';
+
+export type ColProps =
+  & Define.Prop<'gap', number, false>
+  & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false>
+  & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false>
+  & Define.Prop<'wrap', boolean, false>
+  & Define.Prop<'padding', SpacingValue, false>
+  & Define.Prop<'margin', SpacingValue, false>
+  & Define.Prop<'width', number | string, false>
+  & Define.Prop<'height', number | string, false>
+  & Define.Prop<'flex', number, false>
+  & Define.Prop<'background', BackgroundValue, false>
+  & Define.Prop<'borderRadius', number, false>
+  & Define.Prop<'class', string, false>
+  & Define.Slot<'default'>;
+
+export const Col = component<ColProps>(({ props, slots }) => {
+  const getStyle = (): Record<string, string | number> => {
+    const style: Record<string, string | number> = {
+      display: 'flex',
+      flexDirection: 'column',
+    };
+
+    if (props.gap !== undefined) style.gap = props.gap;
+    if (props.align) style.alignItems = props.align;
+    if (props.justify) style.justifyContent = props.justify;
+    if (props.wrap) style.flexWrap = 'wrap';
+
+    const box = resolveBoxStyle({
+      width: props.width,
+      height: props.height,
+      flex: props.flex,
+      background: props.background,
+      borderRadius: props.borderRadius,
+      padding: props.padding,
+      margin: props.margin,
+    });
+    for (const key in box) {
+      style[key] = box[key] as string | number;
+    }
+
+    return style;
+  };
+
+  return () => (
+    <view class={props.class} style={getStyle()}>
+      {slots.default?.()}
+    </view>
+  );
+});

package/src/layout/Row.tsx

@@ -0,0 +1,53 @@
+import { component, type Define } from '@sigx/lynx';
+import type { BackgroundValue } from '../contract.js';
+import { type SpacingValue, resolveBoxStyle } from '../shared/styles.js';
+
+export type RowProps =
+  & Define.Prop<'gap', number, false>
+  & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false>
+  & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false>
+  & Define.Prop<'wrap', boolean, false>
+  & Define.Prop<'padding', SpacingValue, false>
+  & Define.Prop<'margin', SpacingValue, false>
+  & Define.Prop<'width', number | string, false>
+  & Define.Prop<'height', number | string, false>
+  & Define.Prop<'flex', number, false>
+  & Define.Prop<'background', BackgroundValue, false>
+  & Define.Prop<'borderRadius', number, false>
+  & Define.Prop<'class', string, false>
+  & Define.Slot<'default'>;
+
+export const Row = component<RowProps>(({ props, slots }) => {
+  const getStyle = (): Record<string, string | number> => {
+    const style: Record<string, string | number> = {
+      display: 'flex',
+      flexDirection: 'row',
+    };
+
+    if (props.gap !== undefined) style.gap = props.gap;
+    if (props.align) style.alignItems = props.align;
+    if (props.justify) style.justifyContent = props.justify;
+    if (props.wrap) style.flexWrap = 'wrap';
+
+    const box = resolveBoxStyle({
+      width: props.width,
+      height: props.height,
+      flex: props.flex,
+      background: props.background,
+      borderRadius: props.borderRadius,
+      padding: props.padding,
+      margin: props.margin,
+    });
+    for (const key in box) {
+      style[key] = box[key] as string | number;
+    }
+
+    return style;
+  };
+
+  return () => (
+    <view class={props.class} style={getStyle()}>
+      {slots.default?.()}
+    </view>
+  );
+});

package/src/layout/ScrollView.tsx

@@ -0,0 +1,38 @@
+import { component, type Define } from '@sigx/lynx';
+
+export type ScrollViewProps =
+  & Define.Prop<'direction', 'vertical' | 'horizontal', false>
+  & Define.Prop<'height', number | string, false>
+  & Define.Prop<'width', number | string, false>
+  & Define.Prop<'flex', number, false>
+  & Define.Prop<'showScrollbar', boolean, false>
+  & Define.Prop<'bounces', boolean, false>
+  & Define.Prop<'class', string, false>
+  & Define.Slot<'default'>;
+
+export const ScrollView = component<ScrollViewProps>(({ props, slots }) => {
+  const getStyle = (): Record<string, string | number> => {
+    const style: Record<string, string | number> = {};
+    if (props.height !== undefined) style.height = props.height;
+    if (props.width !== undefined) style.width = props.width;
+    if (props.flex !== undefined) style.flex = props.flex;
+    return style;
+  };
+
+  return () => {
+    const dir = props.direction ?? 'vertical';
+    return (
+      <scroll-view
+        class={props.class}
+        style={getStyle()}
+        scroll-orientation={dir}
+        scroll-y={dir === 'vertical' ? true : undefined}
+        scroll-x={dir === 'horizontal' ? true : undefined}
+        show-scrollbar={props.showScrollbar}
+        bounces={props.bounces}
+      >
+        {slots.default?.()}
+      </scroll-view>
+    );
+  };
+});

package/src/layout/Spacer.tsx

@@ -0,0 +1,18 @@
+import { component, type Define } from '@sigx/lynx';
+
+export type SpacerProps =
+  & Define.Prop<'size', number, false>
+  & Define.Prop<'class', string, false>;
+
+export const Spacer = component<SpacerProps>(({ props }) => {
+  const getStyle = (): Record<string, string | number> => {
+    if (props.size !== undefined) {
+      return { width: props.size, height: props.size };
+    }
+    return { flex: 1 };
+  };
+
+  return () => (
+    <view class={props.class} style={getStyle()} />
+  );
+});

package/src/preset/index.ts

@@ -0,0 +1,77 @@
+import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
+import { COLOR_VARIANT_LIST } from '../contract.js';
+
+/**
+ * The design-system-neutral Tailwind preset pieces — the parts of a DS preset
+ * that are really the *contract*, not the design system:
+ *
+ *   • `contractColors`: every semantic color token (incl. the `*-soft`
+ *     tints) → `var(--color-*)`, so utilities like `bg-primary` and
+ *     `text-base-content` resolve against the active theme of whichever
+ *     design system is mounted.
+ *   • `contractFontSizes`: re-points Tailwind's `text-xs`…`text-3xl`
+ *     font-size utilities at the shared `--text-*` ramp (defaults in
+ *     `styles/tokens.css`, multiplied app-wide by the theme controller's
+ *     `fontScale`). Merged via `theme.extend.fontSize`, so larger Tailwind
+ *     keys (`text-4xl`+) keep their rem defaults.
+ *   • `lynxLayoutPlugin`: ships `flex-fill` — the Lynx-correct "fill
+ *     remaining space" utility. In Lynx (like React Native) the `flex: 1`
+ *     shorthand expands to `flex: 1 1 auto`, where `flexBasis: 'auto'` sizes
+ *     the box to its content first, collapsing the layout chain; Tailwind's
+ *     own `flex-1` expands to the same broken shorthand. `flex-fill` writes
+ *     the long-form properties so the result actually fills.
+ *
+ * Design-system presets compose these (`@sigx/lynx-daisyui/preset`,
+ * `@sigx/lynx-heroui/preset`) and layer any DS-specific extensions on top;
+ * apps normally consume the DS preset, not this one directly.
+ */
+
+export const contractColors: Record<string, string> = Object.fromEntries([
+  ...COLOR_VARIANT_LIST.flatMap((v) => [
+    [v, `var(--color-${v})`],
+    [`${v}-content`, `var(--color-${v}-content)`],
+    [`${v}-soft`, `var(--color-${v}-soft)`],
+  ]),
+  ['base-100', 'var(--color-base-100)'],
+  ['base-200', 'var(--color-base-200)'],
+  ['base-300', 'var(--color-base-300)'],
+  ['base-content', 'var(--color-base-content)'],
+]);
+
+export const contractFontSizes: Record<string, string> = {
+  'xs': 'var(--text-xs)',
+  'sm': 'var(--text-sm)',
+  'base': 'var(--text-base)',
+  'lg': 'var(--text-lg)',
+  'xl': 'var(--text-xl)',
+  '2xl': 'var(--text-2xl)',
+  '3xl': 'var(--text-3xl)',
+};
+
+export const lynxLayoutPlugin = plugin(({ addUtilities }) => {
+  addUtilities({
+    // Long-form flex-fill — the Lynx-correct "take remaining space along
+    // the main axis" utility. Default flex direction column; consumers
+    // who want a horizontal fill compose with `flex-row` on the parent.
+    '.flex-fill': {
+      flexGrow: '1',
+      flexShrink: '1',
+      flexBasis: '0',
+      minHeight: '0',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+  });
+});
+
+/** The composed neutral preset — what DS presets spread. */
+export const zeroPreset: Partial<Config> = {
+  theme: {
+    extend: {
+      colors: contractColors,
+      fontSize: contractFontSizes,
+    },
+  },
+  plugins: [lynxLayoutPlugin],
+};

package/src/shared/press.ts

@@ -0,0 +1,6 @@
+// Shared press-feedback defaults applied across interactive components in
+// every design system. Lynx has no CSS `:active` support, so press feedback
+// comes from `<Pressable>` (in `@sigx/lynx-gestures`) flipping inline
+// opacity/transform on the main thread.
+export const PRESSED_SCALE = 0.97;
+export const PRESSED_OPACITY = 0.85;

package/src/shared/styles.ts

@@ -0,0 +1,82 @@
+/**
+ * Box-model style helpers shared by layout primitives and design-system
+ * components. Color values resolve through the semantic token contract
+ * (`resolveColorToken`), so `<Col background="base-100">` works identically
+ * under every design system's active theme.
+ */
+import { resolveColorToken, type BackgroundValue } from '../contract.js';
+
+export type SpacingValue = number | {
+  x?: number;
+  y?: number;
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};
+
+export interface BoxProps {
+  width?: number | string;
+  height?: number | string;
+  flex?: number;
+  background?: BackgroundValue;
+  borderRadius?: number;
+  padding?: SpacingValue;
+  margin?: SpacingValue;
+}
+
+export function resolveSpacing(
+  value: SpacingValue | undefined,
+  prefix: 'padding' | 'margin'
+): Record<string, number> {
+  if (value === undefined) return {};
+
+  if (typeof value === 'number') {
+    return {
+      [`${prefix}Top`]: value,
+      [`${prefix}Right`]: value,
+      [`${prefix}Bottom`]: value,
+      [`${prefix}Left`]: value,
+    };
+  }
+
+  const style: Record<string, number> = {};
+
+  if (value.top !== undefined) style[`${prefix}Top`] = value.top;
+  else if (value.y !== undefined) style[`${prefix}Top`] = value.y;
+
+  if (value.bottom !== undefined) style[`${prefix}Bottom`] = value.bottom;
+  else if (value.y !== undefined) style[`${prefix}Bottom`] = value.y;
+
+  if (value.right !== undefined) style[`${prefix}Right`] = value.right;
+  else if (value.x !== undefined) style[`${prefix}Right`] = value.x;
+
+  if (value.left !== undefined) style[`${prefix}Left`] = value.left;
+  else if (value.x !== undefined) style[`${prefix}Left`] = value.x;
+
+  return style;
+}
+
+export function resolveBoxStyle(props: BoxProps): Record<string, unknown> {
+  const style: Record<string, unknown> = {};
+
+  if (props.width !== undefined) style.width = props.width;
+  if (props.height !== undefined) style.height = props.height;
+  if (props.flex !== undefined) {
+    // Lynx (like React Native) expands `flex: n` shorthand to
+    // `flex: n n auto`, where `flexBasis: 'auto'` means "size to content
+    // first" — which collapses the layout chain. Write the long-form so
+    // `<Center flex={1}>` etc. actually fill remaining space.
+    style.flexGrow = props.flex;
+    style.flexShrink = 1;
+    style.flexBasis = 0;
+    style.minHeight = 0;
+  }
+  if (props.background !== undefined) style.backgroundColor = resolveColorToken(props.background);
+  if (props.borderRadius !== undefined) style.borderRadius = props.borderRadius;
+
+  Object.assign(style, resolveSpacing(props.padding, 'padding'));
+  Object.assign(style, resolveSpacing(props.margin, 'margin'));
+
+  return style;
+}

package/src/shared/tabs-selection.ts

@@ -0,0 +1,57 @@
+/**
+ * Headless tabs selection — the shared behavior behind every design system's
+ * `Tabs`/`Tab` pair (extracted once daisy and hero both duplicated it; the
+ * #219 pilot was the evidence gate).
+ *
+ * The DS's `Tabs` container provides a `TabsSelection` built from its
+ * `activeTab`/`onChange` props; each `Tab` injects it to derive its active
+ * state from its `value` and to report presses. Explicit per-tab
+ * `active`/`onPress` props take precedence in the DS components, so the
+ * fully-controlled per-tab style keeps working.
+ *
+ * Reactivity: `provideTabsSelection` is called once at the container's setup
+ * with *getters* into the container's reactive props, so `isActive()` reads
+ * track the current `activeTab` value on every render.
+ */
+import { defineInjectable, defineProvide } from '@sigx/lynx';
+
+export interface TabsSelection {
+  /** Whether the tab with this `value` is the selected one. Reactive. */
+  isActive(value: string): boolean;
+  /** Report a press on the tab with this `value` (drives `onChange`). */
+  select(value: string): void;
+}
+
+const NO_SELECTION: TabsSelection = {
+  isActive: () => false,
+  select: () => {},
+};
+
+/**
+ * Inject the nearest enclosing `Tabs` container's selection. Outside any
+ * container this resolves to an inert selection (never active, presses
+ * no-op), so a bare `Tab` driven purely by `active`/`onPress` still works.
+ */
+export const useTabsSelection = defineInjectable<TabsSelection>(() => NO_SELECTION);
+
+/**
+ * Provide a selection for the subtree. Call from the DS `Tabs` container's
+ * setup with getters into its reactive props:
+ *
+ * ```ts
+ * provideTabsSelection(
+ *   () => props.activeTab,
+ *   (v) => props.onChange?.(v),
+ * );
+ * ```
+ */
+export function provideTabsSelection(
+  getActive: () => string | undefined,
+  onSelect: (value: string) => void,
+): void {
+  const selection: TabsSelection = {
+    isActive: (value) => getActive() === value,
+    select: onSelect,
+  };
+  defineProvide(useTabsSelection, () => selection);
+}

package/src/styles/tokens.css

@@ -0,0 +1,98 @@
+/* Theme-agnostic structural design tokens.
+ *
+ * Theme COLORS come from the theme registry (seeded by the design-system package) and are
+ * applied as inline CSS custom properties by <ThemeProvider>. These
+ * radius / sizing / component tokens are identical across themes, so they
+ * ship once here under the `.lynx-zero` base class that <ThemeProvider> puts on
+ * its host view; CSS inheritance propagates them to every descendant. A theme
+ * may still override roundness via its `radius` field. */
+
+.lynx-zero {
+  /* ── Roundness (DaisyUI v5 contract) ── */
+  --radius-selector: 8px;
+  --radius-field: 8px;
+  --radius-box: 16px;
+
+  /* ── Base size units (DaisyUI v5 contract) ──
+   * A theme's `sizes` ({ field, selector }) overrides these; <ThemeProvider>
+   * re-derives the component dimensions below from them in JS. We deliberately
+   * do NOT use `calc(var() * n)` in CSS — it's unproven in Lynx's runtime CSS
+   * engine. Defaults below are base 4px × the per-token multiples shown. */
+  --size-selector: 4px;
+  --size-field: 4px;
+
+  /* ── Field sizing scale (button / input / select) — field × 6/8/12/16 ── */
+  --size-xs: 24px;
+  --size-sm: 32px;
+  --size-md: 48px;
+  --size-lg: 64px;
+
+  /* ── Text ramp (public <Text> / <Heading> sizes) ──
+   * The xs→3xl scale the `text-*` utilities resolve to (the daisy preset maps
+   * Tailwind's fontSize keys onto these vars). Literal px so they resolve on
+   * the first paint, like every other structural token. Anchored on a 17px
+   * base — the iOS HIG Body size, so bare <Text> (the default) reads as native
+   * body — and stepped as an even ~1.2 modular scale (each step ≈1.17–1.21×).
+   *
+   * The controller's `fontScale` multiplies this ramp app-wide; <ThemeProvider>
+   * re-emits the literals in JS (no `calc(var() * n)` — unproven in Lynx).
+   * NOTE: keep in sync with FONT_DEFAULTS in theme/ThemeProvider.tsx. */
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 17px;
+  --text-lg: 20px;
+  --text-xl: 24px;
+  --text-2xl: 28px;
+  --text-3xl: 34px;
+
+  /* ── Font sizes (control-internal: button / input / badge labels) ──
+   * A separate axis from the text ramp above and deliberately NOT scaled with
+   * it — control chrome stays fixed. Kept as independent literals (no
+   * var→var indirection; unproven in Lynx) even though values mirror the ramp. */
+  --font-xs: 12px;
+  --font-sm: 14px;
+  --font-md: 14px;
+  --font-lg: 18px;
+
+  /* ── Spacing ── */
+  --padding-btn-xs: 8px;
+  --padding-btn-sm: 12px;
+  --padding-btn-md: 16px;
+  --padding-btn-lg: 24px;
+  --padding-box: 16px;
+  --padding-box-compact: 8px;
+  --gap-box: 8px;
+
+  /* ── Borders ── */
+  --border-btn: 1px;
+  --border-card: 1px;
+
+  /* ── Selector-driven sizes (checkbox / toggle / badge) — selector × the
+   * multiples shown; <ThemeProvider> re-derives these from `sizes.selector`. ── */
+  --checkbox-xs: 16px; /* ×4 */
+  --checkbox-sm: 20px; /* ×5 */
+  --checkbox-md: 24px; /* ×6 */
+  --checkbox-lg: 32px; /* ×8 */
+  --toggle-width-xs: 32px; /* ×8 */
+  --toggle-width-sm: 40px; /* ×10 */
+  --toggle-width-md: 48px; /* ×12 */
+  --toggle-width-lg: 56px; /* ×14 */
+  --toggle-height-xs: 24px; /* ×6 */
+  --toggle-height-sm: 24px; /* ×6 */
+  --toggle-height-md: 28px; /* ×7 */
+  --toggle-height-lg: 32px; /* ×8 */
+  --toggle-thumb-xs: 16px; /* ×4 */
+  --toggle-thumb-sm: 16px; /* ×4 */
+  --toggle-thumb-md: 20px; /* ×5 */
+  --toggle-thumb-lg: 24px; /* ×6 */
+  --badge-xs: 16px; /* ×4 */
+  --badge-sm: 20px; /* ×5 */
+  --badge-md: 24px; /* ×6 */
+  --badge-lg: 32px; /* ×8 */
+  --step-indicator: 32px;
+  --progress-height: 8px;
+  --modal-max-width: 400px;
+
+  /* ── Opacity ── */
+  --disabled-opacity: 0.5;
+}