prime-ui-kit 0.7.11 → 0.9.0

package/dist/tokens/semantic.d.ts

@@ -1,732 +1,557 @@
 /**
- * Семантика: нейтральные поверхности — `color.gray.0` (бумага); литеральный светлый текст на тёмном — `color.white`;
- * акцентный «чёрный» — `color.black`. См. план §3.1.
+ * Semantic layer (`--prime-*`). Components read only these variables.
+ * Path → variable: `color.bg.canvas` → `--prime-color-bg-canvas`, camelCase → kebab-case.
+ * Values below are the light theme; `themes/dark.ts` overrides colors and shadows.
+ *
+ * Design rules (see docs/foundation.md):
+ * - Depth comes from fills, not borders. `border.subtle` is a hairline, `border.control` is transparent
+ *   (it becomes visible only under `prefers-contrast: more`).
+ * - Every size is on the 4px grid. Controls share one size axis: xs 28 · s 32 · m 36 · l 40 · xl 48.
+ * - A nested radius equals the outer radius minus the padding between them.
  */
 export declare const semanticTokens: {
     readonly color: {
-        readonly surface: {
-            readonly default: "{color.gray.50}";
+        readonly bg: {
+            /** App background. */
+            readonly canvas: "{color.gray.50}";
+            /** Cards, panels, table bodies. */
+            readonly surface: "{color.gray.0}";
+            /** Floating layers: menus, popovers, modals, drawers. */
             readonly raised: "{color.gray.0}";
-            readonly elevated: "{color.gray.0}";
-            readonly overlay: "{color.overlay.scrimLight}";
-            readonly accentSoft: "{color.gray.100}";
-            readonly dangerSoft: "{color.red.50}";
-        };
-        readonly content: {
-            readonly primary: "{color.gray.950}";
-            readonly secondary: "{color.gray.600}";
-            readonly muted: "{color.gray.500}";
+            /** Inset areas inside a surface: modal footer, table head, code. */
+            readonly sunken: "{color.gray.75}";
+            readonly inverse: "{color.gray.925}";
+            readonly scrim: "rgba(17, 19, 24, 0.44)";
+        };
+        readonly fill: {
+            /** Transparent wash: ghost hover, row hover. Works on any background. */
+            readonly subtle: "rgba(17, 19, 24, 0.04)";
+            readonly subtleActive: "rgba(17, 19, 24, 0.07)";
+            /**
+             * Neutral buttons, chips, segmented track. Translucent ink wash: always one step off whatever
+             * it sits on (canvas, card, sunken tile, a custom container), in both themes.
+             */
+            readonly muted: "color-mix(in srgb, var(--prime-ref-color-gray-925) 7%, transparent)";
+            readonly mutedHover: "color-mix(in srgb, var(--prime-ref-color-gray-925) 10%, transparent)";
+            /** Unchecked checkbox, switch track, slider track. Same wash, stronger. */
+            readonly strong: "color-mix(in srgb, var(--prime-ref-color-gray-925) 15%, transparent)";
+            readonly strongHover: "color-mix(in srgb, var(--prime-ref-color-gray-925) 22%, transparent)";
+        };
+        readonly text: {
+            readonly primary: "{color.gray.925}";
+            readonly secondary: "{color.gray.700}";
+            readonly muted: "{color.gray.600}";
+            /** gray.600: keeps AA on the field wash over every host, including the canvas. */
+            readonly placeholder: "{color.gray.600}";
             readonly disabled: "{color.gray.400}";
-            readonly inverse: "{color.white}";
-            readonly accent: "{color.gray.800}";
-            readonly danger: "{color.red.800}";
+            readonly inverse: "{color.gray.0}";
         };
         readonly border: {
-            readonly subtle: "{color.gray.200}";
-            readonly separator: "{color.gray.300}";
-            readonly strong: "{color.gray.300}";
-            readonly emphasis: "{color.gray.950}";
-            readonly muted: "{color.gray.200}";
-            readonly accent: "{color.gray.400}";
-            readonly danger: "{color.red.400}";
-            readonly disabled: "{color.gray.100}";
-            readonly inverse: "{color.white}";
-        };
-        readonly status: {
-            readonly information: {
-                readonly background: "{color.blue.50}";
-                readonly backgroundEmphasis: "{color.blue.600}";
-                readonly foreground: "{color.blue.900}";
-                readonly border: "{color.blue.200}";
-            };
-            readonly warning: {
-                readonly background: "{color.orange.50}";
-                readonly backgroundEmphasis: "{color.orange.600}";
-                readonly foreground: "{color.orange.900}";
-                readonly border: "{color.orange.200}";
-            };
-            readonly success: {
-                readonly background: "{color.green.50}";
-                readonly backgroundEmphasis: "{color.green.600}";
-                readonly foreground: "{color.green.900}";
-                readonly border: "{color.green.200}";
-            };
-            readonly away: {
-                readonly background: "{color.yellow.50}";
-                readonly backgroundEmphasis: "{color.yellow.600}";
-                readonly foreground: "{color.yellow.900}";
-                readonly border: "{color.yellow.200}";
-            };
-            readonly feature: {
-                readonly background: "{color.purple.50}";
-                readonly backgroundEmphasis: "{color.purple.600}";
-                readonly foreground: "{color.purple.900}";
-                readonly border: "{color.purple.200}";
-            };
-            readonly verified: {
-                readonly background: "{color.sky.50}";
-                readonly backgroundEmphasis: "{color.sky.600}";
-                readonly foreground: "{color.sky.900}";
-                readonly border: "{color.sky.200}";
-            };
-            readonly error: {
-                readonly background: "{color.red.50}";
-                readonly backgroundEmphasis: "{color.red.600}";
-                readonly foreground: "{color.red.900}";
-                readonly border: "{color.red.200}";
-            };
-        };
-        readonly focus: {
-            readonly ring: "{color.gray.950}";
-        };
-        readonly action: {
-            readonly primaryBackground: "{color.gray.950}";
-            readonly primaryBackgroundHover: "{color.gray.800}";
-            readonly primaryForeground: "{color.white}";
-            readonly primarySoftBackground: "{color.gray.100}";
-            readonly primarySoftForeground: "{color.gray.950}";
-            readonly neutralBackground: "{color.gray.50}";
-            readonly neutralBackgroundHover: "{color.gray.100}";
-            readonly neutralForeground: "{color.gray.600}";
-            readonly errorBackground: "{color.red.600}";
-            readonly errorBackgroundHover: "{color.red.700}";
-            readonly errorForeground: "{color.white}";
+            /** Zone separators inside floating layers (dialog header/footer): only just visible. */
+            readonly faint: "{color.gray.75}";
+            /** Hairline separators: dividers, table rows. Barely visible by design. */
+            readonly subtle: "{color.gray.100}";
+            /** Stroke-mode buttons and the few places that genuinely need a line. */
+            readonly default: "{color.gray.150}";
+            /** Control outline. Transparent; `globals.css` turns it on for `prefers-contrast: more`. */
+            readonly control: "transparent";
+        };
+        readonly accent: {
+            readonly default: "{color.cobalt.700}";
+            readonly hover: "{color.cobalt.800}";
+            readonly fg: "{color.white}";
+            readonly soft: "{color.cobalt.100}";
+            readonly softHover: "{color.cobalt.200}";
+            readonly text: "{color.cobalt.700}";
+        };
+        readonly danger: {
+            readonly default: "{color.red.600}";
+            readonly hover: "{color.red.700}";
+            readonly fg: "{color.white}";
+            readonly soft: "{color.red.100}";
+            readonly text: "{color.red.700}";
+            readonly border: "{color.red.500}";
+        };
+        readonly success: {
+            readonly default: "{color.green.700}";
+            readonly fg: "{color.white}";
+            readonly soft: "{color.green.100}";
+            readonly text: "{color.green.700}";
+        };
+        readonly warning: {
+            readonly default: "{color.orange.700}";
+            readonly fg: "{color.white}";
+            readonly soft: "{color.orange.100}";
+            readonly text: "{color.orange.800}";
+        };
+        /** Sky, not cobalt: info must read differently from the accent. */
+        readonly info: {
+            readonly default: "{color.sky.700}";
+            readonly fg: "{color.white}";
+            readonly soft: "{color.sky.100}";
+            readonly text: "{color.sky.800}";
         };
+        /**
+         * Field fill depends on what it sits on. `bg` is the canvas value; every surface component
+         * (Card, Modal, Drawer, Popover, Sidebar…) sets `--prime-color-field-bg: var(--prime-color-field-bg-surface)`.
+         */
         readonly field: {
-            readonly bg: "{color.gray.50}";
-            readonly text: "{color.gray.950}";
-            readonly placeholder: "{color.gray.400}";
-            readonly border: "{color.gray.200}";
-            readonly borderHover: "{color.gray.300}";
-            readonly borderFocus: "{color.gray.800}";
-            readonly borderError: "{color.red.500}";
-        };
-        readonly tooltip: {
-            readonly background: "{color.gray.900}";
-            readonly foreground: "{color.white}";
-            readonly border: "{color.gray.700}";
-        };
-        /** Бейдж: серый filled + палитры pink/teal без прямых `--prime-ref-*` в CSS компонента. */
-        readonly badge: {
-            readonly grayFilled: {
-                readonly background: "{color.gray.600}";
-            };
-            readonly pink: {
-                readonly backgroundSoft: "{color.pink.50}";
-                readonly foregroundOnSoft: "{color.pink.700}";
-                readonly backgroundEmphasis: "{color.pink.500}";
-                readonly border: "{color.pink.300}";
-            };
-            readonly teal: {
-                readonly backgroundSoft: "{color.teal.50}";
-                readonly foregroundOnSoft: "{color.teal.700}";
-                readonly backgroundEmphasis: "{color.teal.500}";
-                readonly border: "{color.teal.300}";
-            };
+            /** Translucent wash, visible on any background; `bgSurface` kept equal for surface contexts. */
+            readonly bg: "color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent)";
+            readonly bgSurface: "color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent)";
+            readonly bgFocus: "{color.gray.0}";
+            readonly bgDisabled: "color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent)";
         };
         /**
-         * Разделители ячеек таблицы: смешение с `border-subtle` (тема задаёт процент в light/dark).
+         * Card fill depends on what it sits on (same idea as `field`). On the canvas a card is white and raised;
+         * every surface plane (AppShell content, Card, Modal, Drawer, Popover) sets
+         * `--prime-color-card-bg: var(--prime-color-bg-sunken)`, and a card on a sunken fill drops its shadow.
          */
-        readonly dataTable: {
-            readonly dividerVertical: "color-mix(in srgb, var(--prime-sys-color-border-subtle) 72%, transparent)";
-            readonly dividerHorizontal: "color-mix(in srgb, var(--prime-sys-color-border-subtle) 82%, transparent)";
-            readonly headBackground: "{color.surface.default}";
-            readonly rowBackground: "{color.surface.elevated}";
-        };
-    };
-    readonly typography: {
-        readonly family: {
-            readonly base: "{font.family.base}";
-        };
-        readonly body: {
-            readonly size: "{font.size.s}";
-            readonly lineHeight: "{typography.lineHeight.normal}";
-            readonly letterSpacing: "{font.letterSpacing.normal}";
+        readonly card: {
+            readonly bg: "{color.bg.surface}";
         };
-        readonly lineHeight: {
-            readonly tight: "1.25";
-            readonly normal: "1.5";
-            readonly relaxed: "1.65";
+        readonly focus: {
+            readonly ring: "{color.cobalt.700}";
         };
         readonly control: {
-            readonly s: "{font.size.xs}";
-            readonly m: "{font.size.s}";
-            readonly l: "{font.size.m}";
+            /** Switch thumb, slider thumb. */
+            readonly thumb: "{color.white}";
+            /** Selected segment in a segmented track: one step lighter than the track. */
+            readonly selected: "{color.gray.0}";
         };
-        readonly support: {
-            readonly "3xs": "{font.size.3xs}";
-            readonly "2xs": "{font.size.2xs}";
-            readonly xs: "{font.size.xs}";
-            readonly s: "{font.size.s}";
+        readonly tooltip: {
+            readonly bg: "{color.gray.925}";
+            readonly text: "{color.gray.0}";
+        };
+        readonly palette: Record<string, {
+            soft: string;
+            text: string;
+            solid: string;
+            solidFg: string;
+        }>;
+    };
+    readonly font: {
+        readonly family: {
+            readonly sans: "{font.family.sans}";
+            readonly mono: "{font.family.mono}";
         };
         readonly weight: {
             readonly regular: "{font.weight.regular}";
             readonly medium: "{font.weight.medium}";
             readonly semibold: "{font.weight.semibold}";
-            readonly bold: "{font.weight.bold}";
         };
-        readonly style: {
-            readonly normal: "normal";
-            readonly italic: "italic";
+    };
+    /**
+     * Type roles. Each role = size / lineHeight / weight / tracking.
+     * Big headings get tighter leading and negative tracking; small text gets more air.
+     */
+    readonly text: {
+        readonly caption: {
+            readonly size: "{font.size.12}";
+            readonly lineHeight: "{font.lineHeight.16}";
+            readonly weight: "{font.weight.regular}";
+            readonly tracking: "{font.tracking.wide}";
+        };
+        readonly bodyS: {
+            readonly size: "{font.size.13}";
+            readonly lineHeight: "{font.lineHeight.20}";
+            readonly weight: "{font.weight.regular}";
+            readonly tracking: "{font.tracking.normal}";
+        };
+        readonly bodyM: {
+            readonly size: "{font.size.14}";
+            readonly lineHeight: "{font.lineHeight.20}";
+            readonly weight: "{font.weight.regular}";
+            readonly tracking: "{font.tracking.normal}";
+        };
+        readonly bodyL: {
+            readonly size: "{font.size.16}";
+            readonly lineHeight: "{font.lineHeight.24}";
+            readonly weight: "{font.weight.regular}";
+            readonly tracking: "{font.tracking.normal}";
+        };
+        readonly titleS: {
+            readonly size: "{font.size.14}";
+            readonly lineHeight: "{font.lineHeight.20}";
+            readonly weight: "{font.weight.semibold}";
+            readonly tracking: "{font.tracking.normal}";
         };
-        readonly title: {
-            readonly size: "{font.size.l}";
+        readonly titleM: {
+            readonly size: "{font.size.16}";
+            readonly lineHeight: "{font.lineHeight.24}";
             readonly weight: "{font.weight.semibold}";
+            readonly tracking: "{font.tracking.tight}";
         };
-        readonly sizeScale: {
-            readonly "3xs": "{font.size.3xs}";
-            readonly "2xs": "{font.size.2xs}";
-            readonly xs: "{font.size.xs}";
-            readonly s: "{font.size.s}";
-            readonly m: "{font.size.m}";
-            readonly l: "{font.size.l}";
-            readonly xl: "{font.size.xl}";
-            readonly "2xl": "{font.size.2xl}";
-            readonly "3xl": "{font.size.3xl}";
-            readonly "4xl": "{font.size.4xl}";
-            readonly "5xl": "{font.size.5xl}";
-            readonly "6xl": "{font.size.6xl}";
-            readonly "7xl": "{font.size.7xl}";
-            readonly "8xl": "{font.size.8xl}";
-            readonly "9xl": "{font.size.9xl}";
-            readonly labelMicro: "{font.size.labelMicro}";
-        };
-        readonly lineHeightScale: {
-            readonly "3xs": "{font.lineHeight.3xs}";
-            readonly "2xs": "{font.lineHeight.2xs}";
-            readonly xs: "{font.lineHeight.xs}";
-            readonly s: "{font.lineHeight.s}";
-            readonly m: "{font.lineHeight.m}";
-            readonly l: "{font.lineHeight.l}";
-            readonly xl: "{font.lineHeight.xl}";
-            readonly "2xl": "{font.lineHeight.2xl}";
-            readonly "3xl": "{font.lineHeight.3xl}";
-            readonly "4xl": "{font.lineHeight.4xl}";
-            readonly "5xl": "{font.lineHeight.5xl}";
-            readonly "6xl": "{font.lineHeight.6xl}";
-            readonly "7xl": "{font.lineHeight.7xl}";
-            readonly "8xl": "{font.lineHeight.8xl}";
-            readonly "9xl": "{font.lineHeight.9xl}";
-            readonly labelMicro: "{font.lineHeight.labelMicro}";
-        };
-        readonly tracking: {
-            readonly tighter: "{font.letterSpacing.tighter}";
-            readonly tight: "{font.letterSpacing.tight}";
-            readonly normal: "{font.letterSpacing.normal}";
-            readonly wide: "{font.letterSpacing.wide}";
-            readonly wider: "{font.letterSpacing.wider}";
+        readonly titleL: {
+            readonly size: "{font.size.18}";
+            readonly lineHeight: "{font.lineHeight.24}";
+            readonly weight: "{font.weight.semibold}";
+            readonly tracking: "{font.tracking.tight}";
         };
-        /**
-         * Семантические роли чтения (Typography `variant`): пары `fontSize` / `lineHeight` согласованы
-         * по смыслу с [Material Design 3 type scale](https://m3.material.io/styles/typography/type-scale-tokens)
-         * (Display / Headline / Title / Body / Label), [Polaris Text](https://polaris.shopify.com/components/typography/text)
-         * и уровнями текста [Apple HIG — Typography](https://developer.apple.com/design/human-interface-guidelines/typography)
-         * (Large Title … Caption). Кегли — в `font.size.*`; ниже — ссылки на ступени `sizeScale`.
-         */
-        readonly role: {
-            /** MD3 Display Large (57/45); Polaris `heading3xl`; Apple Large Title */
-            readonly display: {
-                readonly fontSize: "{typography.sizeScale.9xl}";
-                readonly lineHeight: "{typography.lineHeightScale.9xl}";
-            };
-            /** MD3 Headline Large (32/40); Polaris `heading2xl`; Apple Title 1 */
-            readonly headline: {
-                readonly fontSize: "{typography.sizeScale.6xl}";
-                readonly lineHeight: "{typography.lineHeightScale.6xl}";
-            };
-            /** MD3 Headline Medium (28/36); Polaris `headingXl`; Apple Title 2 */
-            readonly headingPage: {
-                readonly fontSize: "{typography.sizeScale.4xl}";
-                readonly lineHeight: "{typography.lineHeightScale.4xl}";
-            };
-            /** MD3 Headline Small (24/32); Polaris `headingLg`; Apple Title 3 */
-            readonly headingSection: {
-                readonly fontSize: "{typography.sizeScale.2xl}";
-                readonly lineHeight: "{typography.lineHeightScale.2xl}";
-            };
-            /** MD3 Title Large (22/28); Polaris `headingMd`; Apple Headline */
-            readonly headingSubsection: {
-                readonly fontSize: "{typography.sizeScale.xl}";
-                readonly lineHeight: "{typography.lineHeightScale.xl}";
-            };
-            /** MD3 Title Small (14/20); Polaris `headingSm` / `headingXs`; Apple Subheadline / Footnote */
-            readonly headingGroup: {
-                readonly fontSize: "{typography.sizeScale.xs}";
-                readonly lineHeight: "{typography.lineHeightScale.xs}";
-            };
-            /** MD3 Body Large (~16px); Polaris bodyLg; Apple Body / Callout */
-            readonly bodyLarge: {
-                readonly fontSize: "{typography.sizeScale.s}";
-                readonly lineHeight: "{typography.lineHeightScale.s}";
-            };
-            /** MD3 Body Medium (~14px); Polaris bodyMd; Apple Subheadline / Footnote */
-            readonly bodyDefault: {
-                readonly fontSize: "{typography.sizeScale.xs}";
-                readonly lineHeight: "{typography.lineHeightScale.xs}";
-            };
-            /** MD3 Body Small (~12px); Polaris bodySm; Apple Footnote */
-            readonly bodySmall: {
-                readonly fontSize: "{typography.sizeScale.2xs}";
-                readonly lineHeight: "{typography.lineHeightScale.2xs}";
-            };
-            /** MD3 Label Large (14/20): кегль как у Body Medium, межстрочный плотнее (`2xs`), чем у `body-default` */
-            readonly bodyCompact: {
-                readonly fontSize: "{typography.sizeScale.xs}";
-                readonly lineHeight: "{typography.lineHeightScale.2xs}";
-            };
-            /** MD3 Label Medium (~12px); Apple Caption1 */
-            readonly caption: {
-                readonly fontSize: "{typography.sizeScale.2xs}";
-                readonly lineHeight: "{typography.lineHeightScale.2xs}";
-            };
-            /** MD3 Label Small (~11px); Apple Caption2 */
-            readonly captionMicro: {
-                readonly fontSize: "{typography.sizeScale.labelMicro}";
-                readonly lineHeight: "{typography.lineHeightScale.labelMicro}";
-            };
+        readonly headingS: {
+            readonly size: "{font.size.20}";
+            readonly lineHeight: "{font.lineHeight.28}";
+            readonly weight: "{font.weight.semibold}";
+            readonly tracking: "{font.tracking.tight}";
         };
-    };
-    readonly shape: {
-        readonly radius: {
-            readonly xs: "{radius.xs}";
-            readonly s: "{radius.s}";
-            readonly m: "{radius.m}";
-            readonly l: "{radius.l}";
-            readonly "4xl": "{radius.4xl}";
-            readonly round: "{radius.round}";
+        readonly headingM: {
+            readonly size: "{font.size.24}";
+            readonly lineHeight: "{font.lineHeight.32}";
+            readonly weight: "{font.weight.semibold}";
+            readonly tracking: "{font.tracking.tighter}";
         };
+        readonly headingL: {
+            readonly size: "{font.size.30}";
+            readonly lineHeight: "{font.lineHeight.36}";
+            readonly weight: "{font.weight.semibold}";
+            readonly tracking: "{font.tracking.tighter}";
+        };
+        readonly displayS: {
+            readonly size: "{font.size.36}";
+            readonly lineHeight: "{font.lineHeight.44}";
+            readonly weight: "{font.weight.semibold}";
+            readonly tracking: "{font.tracking.tighter}";
+        };
+        readonly displayM: {
+            readonly size: "{font.size.48}";
+            readonly lineHeight: "{font.lineHeight.56}";
+            readonly weight: "{font.weight.semibold}";
+            readonly tracking: "{font.tracking.tightest}";
+        };
+        readonly displayL: {
+            readonly size: "{font.size.60}";
+            readonly lineHeight: "{font.lineHeight.68}";
+            readonly weight: "{font.weight.semibold}";
+            readonly tracking: "{font.tracking.tightest}";
+        };
+        readonly code: {
+            readonly size: "{font.size.13}";
+            readonly lineHeight: "{font.lineHeight.20}";
+            readonly weight: "{font.weight.regular}";
+            readonly tracking: "{font.tracking.normal}";
+        };
+    };
+    /** 4px grid; the key is the number of 4px steps. Values outside this scale are not allowed. */
+    readonly space: {
+        readonly 0: "{space.0}";
+        readonly 1: "{space.1}";
+        readonly 2: "{space.2}";
+        readonly 3: "{space.3}";
+        readonly 4: "{space.4}";
+        readonly 5: "{space.5}";
+        readonly 6: "{space.6}";
+        readonly 7: "{space.7}";
+        readonly 8: "{space.8}";
+        readonly 9: "{space.9}";
+        readonly 10: "{space.10}";
+        readonly 12: "{space.12}";
+        readonly 14: "{space.14}";
+        readonly 16: "{space.16}";
+        readonly 20: "{space.20}";
+        readonly 24: "{space.24}";
+    };
+    readonly radius: {
+        readonly xs: "{radius.4}";
+        readonly s: "{radius.6}";
+        readonly m: "{radius.8}";
+        readonly l: "{radius.12}";
+        readonly xl: "{radius.16}";
+        readonly "2xl": "{radius.20}";
+        readonly full: "{radius.full}";
+    };
+    readonly icon: {
+        readonly xs: "{icon.14}";
+        readonly s: "{icon.16}";
+        readonly m: "{icon.20}";
+        readonly l: "{icon.24}";
+        readonly xl: "{icon.32}";
     };
     readonly border: {
-        readonly width: {
-            readonly control: "1px";
-            readonly focusRing: "2px";
+        readonly width: "1px";
+    };
+    readonly focus: {
+        readonly width: "2px";
+        /** Outer ring for buttons, links, chips, tabs… */
+        readonly offset: "2px";
+        /** Fields draw the ring inside their edge: it reads as a crisp accent border and can never be clipped. */
+        readonly offsetInset: "-2px";
+        /** Minimum free space a scroll/overflow container keeps around focusable content (= width + offset). */
+        readonly space: "4px";
+    };
+    readonly shadow: {
+        /** Cards on canvas: a whisper, depth mostly comes from the fill. */
+        readonly raised: "0 1px 2px rgba(17, 19, 24, 0.04)";
+        /** Menus, popovers, tooltips, datepicker. */
+        readonly overlay: "0 0 0 1px rgba(17, 19, 24, 0.04), 0 12px 32px -8px rgba(17, 19, 24, 0.18)";
+        /** Modals and drawers. */
+        readonly modal: "0 0 0 1px rgba(17, 19, 24, 0.04), 0 32px 64px -16px rgba(17, 19, 24, 0.30)";
+    };
+    readonly motion: {
+        readonly duration: {
+            readonly fast: "{duration.120}";
+            readonly base: "{duration.200}";
+            readonly slow: "{duration.300}";
+        };
+        readonly easing: {
+            readonly standard: "{easing.standard}";
+            readonly enter: "{easing.enter}";
+            readonly exit: "{easing.exit}";
         };
     };
-    /**
-     * Алиасы сетки → примитивы `spaces.layout.*`. `x*` — счётчики шагов по **4px** для layout (drawer и т.д.).
-     */
-    readonly spacing: {
-        readonly xs: "{spaces.layout.xs}";
-        readonly s: "{spaces.layout.s}";
-        readonly m: "{spaces.layout.m}";
-        readonly l: "{spaces.layout.l}";
-        readonly xl: "{spaces.layout.xl}";
-        readonly "2xl": "{spaces.layout.2xl}";
-        readonly "3xl": "{spaces.layout.3xl}";
-        readonly "4xl": "{spaces.layout.4xl}";
-        readonly "5xl": "{spaces.layout.5xl}";
-        readonly "6xl": "{spaces.layout.6xl}";
-        readonly x0: "{spaces.layout.0}";
-        readonly x1: "{spaces.layout.xs}";
-        readonly x2: "{spaces.layout.s}";
-        readonly x3: "{spaces.layout.m}";
-        readonly x4: "{spaces.layout.l}";
-        readonly x5: "{spaces.layout.xl}";
-        readonly x6: "{spaces.layout.2xl}";
-        readonly x8: "{spaces.layout.3xl}";
-        readonly x10: "{spaces.layout.4xl}";
-        readonly x12: "{spaces.layout.5xl}";
-        readonly x14: "{spaces.layout.6xl}";
+    readonly z: {
+        readonly base: "{zIndex.base}";
+        readonly sticky: "{zIndex.sticky}";
+        readonly popover: "{zIndex.popover}";
+        readonly dropdown: "{zIndex.dropdown}";
+        readonly tooltip: "{zIndex.tooltip}";
+        readonly drawer: "{zIndex.drawer}";
+        readonly popoverInDrawer: "{zIndex.popoverInDrawer}";
+        readonly dropdownInDrawer: "{zIndex.dropdownInDrawer}";
+        readonly tooltipInDrawer: "{zIndex.tooltipInDrawer}";
+        readonly modal: "{zIndex.modal}";
+        readonly popoverInModal: "{zIndex.popoverInModal}";
+        readonly dropdownInModal: "{zIndex.dropdownInModal}";
+        readonly tooltipInModal: "{zIndex.tooltipInModal}";
+        readonly drawerNestedShell: "{zIndex.drawerNestedShell}";
+        readonly popoverInDrawerInModal: "{zIndex.popoverInDrawerInModal}";
+        readonly dropdownInDrawerInModal: "{zIndex.dropdownInDrawerInModal}";
+        readonly tooltipInDrawerInModal: "{zIndex.tooltipInDrawerInModal}";
+        readonly toast: "{zIndex.toast}";
     };
     /**
-     * Слои наложения: `--prime-sys-elevation-zIndex-*` + контекст `OverlayPortalLayer` для порталов
-     * (popover/dropdown/tooltip внутри drawer/modal — см. `drawerInModal`, `*InModal`, `*InDrawerInModal`).
+     * Control size tiers shared by Button, Input, Select, Datepicker, Tabs, SegmentedControl, etc.
+     * Pairing: a field of tier T uses `labelSize`/`hintSize` of tier T; menus opened from tier T
+     * use `itemHeight` of tier T; badges inside tier T use the badge tier one step down.
      */
-    readonly elevation: {
-        readonly zIndex: {
-            readonly base: "{zIndex.base}";
-            readonly sticky: "{zIndex.sticky}";
-            readonly popover: "{zIndex.popover}";
-            readonly dropdown: "{zIndex.dropdown}";
-            readonly tooltip: "{zIndex.tooltip}";
-            readonly drawer: "{zIndex.drawer}";
-            readonly modal: "{zIndex.modal}";
-            readonly popoverInDrawer: "{zIndex.popoverInDrawer}";
-            readonly dropdownInDrawer: "{zIndex.dropdownInDrawer}";
-            readonly tooltipInDrawer: "{zIndex.tooltipInDrawer}";
-            readonly popoverInModal: "{zIndex.popoverInModal}";
-            readonly dropdownInModal: "{zIndex.dropdownInModal}";
-            readonly tooltipInModal: "{zIndex.tooltipInModal}";
-            readonly drawerNestedShell: "{zIndex.drawerNestedShell}";
-            readonly popoverInDrawerInModal: "{zIndex.popoverInDrawerInModal}";
-            readonly dropdownInDrawerInModal: "{zIndex.dropdownInDrawerInModal}";
-            readonly tooltipInDrawerInModal: "{zIndex.tooltipInDrawerInModal}";
-            readonly toast: "{zIndex.toast}";
-        };
-        readonly shadow: {
-            readonly surface: "{shadow.s}";
-            readonly modal: "{shadow.3xl}";
-            readonly tooltip: "0 12px 28px rgba(15, 17, 21, 0.22), 0 4px 10px rgba(15, 17, 21, 0.16)";
-            readonly buttonFocus: "0 0 0 2px rgba(10, 10, 12, 0.14)";
-            readonly primaryFocus: "0 0 0 2px rgba(10, 10, 12, 0.2)";
-            readonly errorFocus: "0 0 0 2px rgba(220, 38, 38, 0.2)";
-            readonly fancyButtonNeutral: "0 1px 2px rgba(14, 18, 27, 0.24), 0 0 0 1px var(--prime-sys-color-content-primary)";
-            readonly fancyButtonPrimary: "0 1px 2px rgba(14, 18, 27, 0.24), 0 0 0 1px var(--prime-sys-color-action-primaryBackground)";
-            readonly fancyButtonError: "0 1px 2px rgba(14, 18, 27, 0.24), 0 0 0 1px var(--prime-sys-color-action-errorBackground)";
+    readonly control: {
+        readonly xs: {
+            readonly height: "{space.7}";
+            readonly paddingX: "{space.2}";
+            readonly fieldPaddingX: "{space.2}";
+            readonly gap: "{space.1}";
+            readonly icon: "{icon.14}";
+            readonly radius: "{radius.6}";
+            readonly textSize: "{font.size.12}";
+            readonly lineHeight: "{font.lineHeight.16}";
+            readonly labelSize: "{font.size.12}";
+            readonly labelLineHeight: "{font.lineHeight.16}";
+            readonly hintSize: "{font.size.12}";
+            readonly hintLineHeight: "{font.lineHeight.16}";
+            readonly labelGap: "{space.1}";
+            readonly hintGap: "{space.1}";
+            readonly itemHeight: "{space.6}";
+            readonly choice: "{icon.14}";
+        };
+        readonly s: {
+            readonly height: "{space.8}";
+            readonly paddingX: "{space.3}";
+            readonly fieldPaddingX: "{space.2}";
+            readonly gap: "{space.2}";
+            readonly icon: "{icon.16}";
+            readonly radius: "{radius.8}";
+            readonly textSize: "{font.size.13}";
+            readonly lineHeight: "{font.lineHeight.20}";
+            readonly labelSize: "{font.size.12}";
+            readonly labelLineHeight: "{font.lineHeight.16}";
+            readonly hintSize: "{font.size.12}";
+            readonly hintLineHeight: "{font.lineHeight.16}";
+            readonly labelGap: "{space.1}";
+            readonly hintGap: "{space.1}";
+            readonly itemHeight: "{space.7}";
+            readonly choice: "{icon.16}";
+        };
+        readonly m: {
+            readonly height: "{space.9}";
+            readonly paddingX: "{space.4}";
+            readonly fieldPaddingX: "{space.3}";
+            readonly gap: "{space.2}";
+            readonly icon: "{icon.16}";
+            readonly radius: "{radius.8}";
+            readonly textSize: "{font.size.14}";
+            readonly lineHeight: "{font.lineHeight.20}";
+            readonly labelSize: "{font.size.13}";
+            readonly labelLineHeight: "{font.lineHeight.20}";
+            readonly hintSize: "{font.size.12}";
+            readonly hintLineHeight: "{font.lineHeight.16}";
+            readonly labelGap: "{space.2}";
+            readonly hintGap: "{space.1}";
+            readonly itemHeight: "{space.8}";
+            readonly choice: "1.125rem";
+        };
+        readonly l: {
+            readonly height: "{space.10}";
+            readonly paddingX: "{space.5}";
+            readonly fieldPaddingX: "{space.3}";
+            readonly gap: "{space.2}";
+            readonly icon: "{icon.20}";
+            readonly radius: "{radius.10}";
+            readonly textSize: "{font.size.16}";
+            readonly lineHeight: "{font.lineHeight.24}";
+            readonly labelSize: "{font.size.14}";
+            readonly labelLineHeight: "{font.lineHeight.20}";
+            readonly hintSize: "{font.size.13}";
+            readonly hintLineHeight: "{font.lineHeight.20}";
+            readonly labelGap: "{space.2}";
+            readonly hintGap: "{space.1}";
+            readonly itemHeight: "{space.9}";
+            readonly choice: "{icon.20}";
+        };
+        readonly xl: {
+            readonly height: "{space.12}";
+            readonly paddingX: "{space.6}";
+            readonly fieldPaddingX: "{space.4}";
+            readonly gap: "{space.3}";
+            readonly icon: "{icon.20}";
+            readonly radius: "{radius.12}";
+            readonly textSize: "{font.size.16}";
+            readonly lineHeight: "{font.lineHeight.24}";
+            readonly labelSize: "{font.size.14}";
+            readonly labelLineHeight: "{font.lineHeight.20}";
+            readonly hintSize: "{font.size.13}";
+            readonly hintLineHeight: "{font.lineHeight.20}";
+            readonly labelGap: "{space.2}";
+            readonly hintGap: "{space.1}";
+            readonly itemHeight: "{space.10}";
+            readonly choice: "{icon.24}";
         };
     };
-    readonly size: {
-        /**
-         * Ярусы контрола: одна ось высоты (`size.*`), общая иконка/типографика,
-         * `gap` / `inputPaddingX` — `primitive.spaces.control.spacing.*` (линейно s→xl), совпадают внутри яруса.
-         * `buttonPadding*` — `primitive.spaces.control.button.*` (линейно s→xl).
-         * `inputPaddingY` — вертикаль поля (по `spacing.*`).
-         * `radius` — `primitive.radius.*` по ярусу (контролы xs…xl; см. `shape.radius` для крупных поверхностей).
-         */
-        readonly control: {
-            readonly xs: {
-                readonly height: "{size.xs}";
-                readonly radius: "{radius.xs}";
-                readonly icon: "{icon.xs}";
-                readonly gap: "{spacing.xs}";
-                readonly buttonPaddingX: "{spacing.s}";
-                readonly buttonPaddingY: "{spacing.s}";
-                readonly inputPaddingX: "{spacing.xs}";
-                readonly inputPaddingY: "{spacing.xs}";
-                readonly text: "{typography.support.3xs}";
-                readonly supportText: "{typography.support.3xs}";
-            };
-            readonly s: {
-                readonly height: "{size.s}";
-                readonly radius: "{radius.s}";
-                readonly icon: "{icon.s}";
-                readonly gap: "{spaces.control.spacing.s}";
-                readonly buttonPaddingX: "{spaces.control.button.s}";
-                readonly buttonPaddingY: "{spaces.control.button.s}";
-                readonly inputPaddingX: "{spaces.control.spacing.s}";
-                readonly inputPaddingY: "{spacing.xs}";
-                readonly text: "{typography.support.2xs}";
-                readonly supportText: "{typography.support.2xs}";
-            };
-            readonly m: {
-                readonly height: "{size.m}";
-                readonly radius: "{radius.m}";
-                readonly icon: "{icon.m}";
-                readonly gap: "{spaces.control.spacing.m}";
-                readonly buttonPaddingX: "{spaces.control.button.m}";
-                readonly buttonPaddingY: "{spaces.control.button.m}";
-                readonly inputPaddingX: "{spaces.control.spacing.m}";
-                readonly inputPaddingY: "{spacing.s}";
-                readonly text: "{typography.control.s}";
-                readonly supportText: "{typography.support.2xs}";
-            };
-            readonly l: {
-                readonly height: "{size.l}";
-                readonly radius: "{radius.l}";
-                readonly icon: "{icon.l}";
-                readonly gap: "{spaces.control.spacing.l}";
-                readonly buttonPaddingX: "{spaces.control.button.l}";
-                readonly buttonPaddingY: "{spaces.control.button.l}";
-                readonly inputPaddingX: "{spaces.control.spacing.l}";
-                readonly inputPaddingY: "{spacing.s}";
-                readonly text: "{typography.control.m}";
-                readonly supportText: "{typography.support.xs}";
-            };
-            readonly xl: {
-                readonly height: "{size.xl}";
-                readonly radius: "{radius.xl}";
-                readonly icon: "{icon.xl}";
-                readonly gap: "{spaces.control.spacing.xl}";
-                readonly buttonPaddingX: "{spaces.control.button.xl}";
-                readonly buttonPaddingY: "{spaces.control.button.xl}";
-                readonly inputPaddingX: "{spaces.control.spacing.xl}";
-                readonly inputPaddingY: "{spacing.m}";
-                readonly text: "{typography.control.l}";
-                readonly supportText: "{typography.support.xs}";
-            };
-        };
-        readonly modal: {
-            readonly radius: "{shape.radius.4xl}";
-            readonly maxWidth: "30rem";
-            readonly paddingX: "{spacing.xl}";
-            readonly paddingY: "{spacing.xl}";
-            readonly titleGap: "{spacing.x1}";
-            readonly contentGap: "{spacing.l}";
-            readonly headerGap: "{spacing.m}";
-            readonly headerPaddingBottom: "{spacing.l}";
-            readonly headTextPaddingRight: "{spacing.3xl}";
-            readonly bodyGap: "{spacing.l}";
-            readonly footerGap: "{spacing.m}";
-            readonly footerPaddingTop: "{spacing.l}";
-            readonly overlayPaddingX: "{spacing.l}";
-            readonly overlayPaddingY: "{spacing.l}";
-            readonly headerIconSize: "{size.m}";
-        };
-        readonly drawer: {
-            readonly s: {
-                readonly paddingX: "{spacing.x3}";
-                readonly paddingY: "{spacing.x3}";
-                readonly titleGap: "{size.control.s.gap}";
-                readonly headerGap: "{spacing.x2}";
-                readonly footerGap: "{spacing.x2}";
-                readonly titleText: "{size.control.s.text}";
-            };
-            readonly m: {
-                readonly paddingX: "{spacing.x5}";
-                readonly paddingY: "{spacing.x5}";
-                readonly titleGap: "{size.control.m.gap}";
-                readonly headerGap: "{spacing.x3}";
-                readonly footerGap: "{spacing.x3}";
-                readonly titleText: "{size.control.m.text}";
-            };
-            readonly l: {
-                readonly paddingX: "{spacing.x6}";
-                readonly paddingY: "{spacing.x6}";
-                readonly titleGap: "{size.control.l.gap}";
-                readonly headerGap: "{spacing.x3}";
-                readonly footerGap: "{spacing.x3}";
-                readonly titleText: "{size.control.l.text}";
-            };
-            readonly xl: {
-                readonly paddingX: "{spacing.x8}";
-                readonly paddingY: "{spacing.x8}";
-                readonly titleGap: "{size.control.xl.gap}";
-                readonly headerGap: "{spacing.x4}";
-                readonly footerGap: "{spacing.x4}";
-                readonly titleText: "{size.control.xl.text}";
-            };
-        };
-        /** Внутренний отступ: одно значение на обе оси (см. `paddingX` = Y). */
-        readonly textarea: {
-            readonly s: {
-                readonly minHeight: "4rem";
-                readonly radius: "{radius.s}";
-                readonly paddingX: "{spacing.s}";
-            };
-            readonly m: {
-                readonly minHeight: "5rem";
-                readonly radius: "{radius.m}";
-                readonly paddingX: "{spacing.m}";
-            };
-            readonly l: {
-                readonly minHeight: "6rem";
-                readonly radius: "{radius.l}";
-                readonly paddingX: "{spacing.l}";
-            };
-            readonly xl: {
-                readonly minHeight: "8rem";
-                readonly radius: "{radius.xl}";
-                readonly paddingX: "{spacing.xl}";
-            };
-        };
-        readonly choice: {
-            readonly s: {
-                readonly control: "{icon.s}";
-                readonly dot: "{spaces.layout.xs}";
-                readonly gap: "{spacing.s}";
-                readonly text: "{typography.support.2xs}";
-            };
-            readonly m: {
-                readonly control: "{icon.m}";
-                readonly dot: "{spaces.layout.s}";
-                readonly gap: "{spacing.s}";
-                readonly text: "{typography.control.s}";
-            };
-            readonly l: {
-                readonly control: "{icon.l}";
-                readonly dot: "{spaces.layout.s}";
-                readonly gap: "{spacing.m}";
-                readonly text: "{typography.control.m}";
-            };
-            readonly xl: {
-                readonly control: "{icon.xl}";
-                readonly dot: "{spaces.layout.m}";
-                readonly gap: "{spacing.l}";
-                readonly text: "{typography.control.l}";
-            };
-        };
-        readonly switch: {
-            readonly s: {
-                readonly trackWidth: "1.75rem";
-                readonly trackHeight: "1rem";
-                readonly thumb: "{icon.xs}";
-            };
-            readonly m: {
-                readonly trackWidth: "2rem";
-                readonly trackHeight: "1.25rem";
-                readonly thumb: "{icon.s}";
-            };
-            readonly l: {
-                readonly trackWidth: "2.25rem";
-                readonly trackHeight: "1.25rem";
-                readonly thumb: "{icon.m}";
-            };
-            readonly xl: {
-                readonly trackWidth: "2.5rem";
-                readonly trackHeight: "1.5rem";
-                readonly thumb: "{icon.l}";
-            };
-        };
-        /** На ступень ниже кнопки того же яруса; высота из контента + `paddingY`. Боковые — `buttonPaddingX`. */
-        readonly badge: {
-            readonly s: {
-                readonly paddingX: "{size.control.xs.buttonPaddingX}";
-                readonly paddingY: "{size.control.xs.inputPaddingY}";
-                readonly text: "{size.control.xs.text}";
-                readonly dotSize: "{spaces.layout.xs}";
-                readonly iconSize: "{size.control.xs.icon}";
-                readonly gap: "{size.control.xs.gap}";
-                readonly radius: "{size.control.xs.radius}";
-            };
-            readonly m: {
-                readonly paddingX: "{size.control.s.buttonPaddingX}";
-                readonly paddingY: "{size.control.s.inputPaddingY}";
-                readonly text: "{size.control.s.text}";
-                readonly dotSize: "{spaces.layout.s}";
-                readonly iconSize: "{size.control.s.icon}";
-                readonly gap: "{size.control.s.gap}";
-                readonly radius: "{size.control.s.radius}";
-            };
-            readonly l: {
-                readonly paddingX: "{size.control.m.buttonPaddingX}";
-                readonly paddingY: "{size.control.m.inputPaddingY}";
-                readonly text: "{size.control.m.text}";
-                readonly dotSize: "{spaces.layout.m}";
-                readonly iconSize: "{size.control.m.icon}";
-                readonly gap: "{size.control.m.gap}";
-                readonly radius: "{size.control.m.radius}";
-            };
-            readonly xl: {
-                readonly paddingX: "{size.control.l.buttonPaddingX}";
-                readonly paddingY: "{size.control.l.inputPaddingY}";
-                readonly text: "{size.control.l.text}";
-                readonly dotSize: "{spaces.layout.l}";
-                readonly iconSize: "{size.control.l.icon}";
-                readonly gap: "{size.control.l.gap}";
-                readonly radius: "{size.control.l.radius}";
-            };
-        };
-        readonly avatar: {
-            readonly s: {
-                readonly size: "{size.s}";
-                readonly text: "{typography.support.2xs}";
-                readonly radius: "{shape.radius.round}";
-            };
-            readonly m: {
-                readonly size: "{size.m}";
-                readonly text: "{typography.support.2xs}";
-                readonly radius: "{shape.radius.round}";
-            };
-            readonly l: {
-                readonly size: "{size.l}";
-                readonly text: "{typography.control.s}";
-                readonly radius: "{shape.radius.round}";
-            };
-            readonly xl: {
-                readonly size: "{size.xl}";
-                readonly text: "{typography.control.l}";
-                readonly radius: "{shape.radius.round}";
-            };
-            readonly "2xl": {
-                readonly size: "{size.2xl}";
-                readonly text: "{typography.sizeScale.2xl}";
-                readonly radius: "{shape.radius.round}";
-            };
-            readonly "3xl": {
-                readonly size: "{size.3xl}";
-                readonly text: "{typography.sizeScale.3xl}";
-                readonly radius: "{shape.radius.round}";
-            };
-            readonly "4xl": {
-                readonly size: "{size.4xl}";
-                readonly text: "{typography.sizeScale.4xl}";
-                readonly radius: "{shape.radius.round}";
-            };
-            readonly "5xl": {
-                readonly size: "{size.5xl}";
-                readonly text: "{typography.sizeScale.5xl}";
-                readonly radius: "{shape.radius.round}";
-            };
-            readonly "6xl": {
-                readonly size: "{size.6xl}";
-                readonly text: "{typography.sizeScale.6xl}";
-                readonly radius: "{shape.radius.round}";
-            };
-        };
-        /** На ступень ниже control того же яруса: компактнее по padding/тексту/радиусу. */
-        readonly tooltip: {
-            readonly s: {
-                readonly paddingX: "{size.control.xs.inputPaddingX}";
-                readonly paddingY: "{size.control.xs.inputPaddingY}";
-                readonly text: "{size.control.xs.supportText}";
-                readonly radius: "{size.control.xs.radius}";
-            };
-            readonly m: {
-                readonly paddingX: "{size.control.s.inputPaddingX}";
-                readonly paddingY: "{size.control.s.inputPaddingY}";
-                readonly text: "{size.control.s.supportText}";
-                readonly radius: "{size.control.s.radius}";
-            };
-            readonly l: {
-                readonly paddingX: "{size.control.m.inputPaddingX}";
-                readonly paddingY: "{size.control.m.inputPaddingY}";
-                readonly text: "{size.control.m.supportText}";
-                readonly radius: "{size.control.m.radius}";
-            };
-            readonly xl: {
-                readonly paddingX: "{size.control.l.inputPaddingX}";
-                readonly paddingY: "{size.control.l.inputPaddingY}";
-                readonly text: "{size.control.l.supportText}";
-                readonly radius: "{size.control.l.radius}";
-            };
-        };
-        /** На ступень ниже кнопки того же яруса (как `size.badge`); боковые — `buttonPaddingX`. */
-        readonly tag: {
-            readonly s: {
-                readonly paddingX: "{size.control.xs.buttonPaddingX}";
-                readonly paddingY: "{size.control.xs.inputPaddingY}";
-                readonly text: "{size.control.xs.text}";
-                readonly iconSize: "{size.control.xs.icon}";
-                readonly gap: "{size.control.xs.gap}";
-                readonly radius: "{size.control.xs.radius}";
-            };
-            readonly m: {
-                readonly paddingX: "{size.control.s.buttonPaddingX}";
-                readonly paddingY: "{size.control.s.inputPaddingY}";
-                readonly text: "{size.control.s.text}";
-                readonly iconSize: "{size.control.s.icon}";
-                readonly gap: "{size.control.s.gap}";
-                readonly radius: "{size.control.s.radius}";
-            };
-            readonly l: {
-                readonly paddingX: "{size.control.m.buttonPaddingX}";
-                readonly paddingY: "{size.control.m.inputPaddingY}";
-                readonly text: "{size.control.m.text}";
-                readonly iconSize: "{size.control.m.icon}";
-                readonly gap: "{size.control.m.gap}";
-                readonly radius: "{size.control.m.radius}";
-            };
-            readonly xl: {
-                readonly paddingX: "{size.control.l.buttonPaddingX}";
-                readonly paddingY: "{size.control.l.inputPaddingY}";
-                readonly text: "{size.control.l.text}";
-                readonly iconSize: "{size.control.l.icon}";
-                readonly gap: "{size.control.l.gap}";
-                readonly radius: "{size.control.l.radius}";
-            };
-        };
-        /** Ярус `s` на ступень ниже: совпадает с `size.control.xs`. */
-        readonly kbd: {
-            readonly height: "{size.control.xs.height}";
-            readonly paddingX: "{size.control.xs.inputPaddingX}";
-            readonly paddingY: "{size.control.xs.inputPaddingY}";
-            readonly text: "{size.control.xs.text}";
-            readonly radius: "{size.control.xs.radius}";
+    /** Badge / Tag / Kbd tiers. Inside a control of tier T use the badge tier one step down. */
+    readonly badge: {
+        readonly xs: {
+            readonly height: "1rem";
+            readonly paddingX: "{space.1}";
+            readonly textSize: "{font.size.12}";
+            readonly icon: "0.75rem";
+            readonly gap: "{space.1}";
+            readonly radius: "{radius.4}";
+        };
+        readonly s: {
+            readonly height: "{space.5}";
+            readonly paddingX: "0.375rem";
+            readonly textSize: "{font.size.12}";
+            readonly icon: "0.75rem";
+            readonly gap: "{space.1}";
+            readonly radius: "{radius.6}";
+        };
+        readonly m: {
+            readonly height: "{space.6}";
+            readonly paddingX: "{space.2}";
+            readonly textSize: "{font.size.12}";
+            readonly icon: "{icon.14}";
+            readonly gap: "{space.1}";
+            readonly radius: "{radius.6}";
+        };
+        readonly l: {
+            readonly height: "{space.7}";
+            readonly paddingX: "0.625rem";
+            readonly textSize: "{font.size.13}";
+            readonly icon: "{icon.16}";
+            readonly gap: "{space.1}";
+            readonly radius: "{radius.8}";
+        };
+        readonly xl: {
+            readonly height: "{space.8}";
+            readonly paddingX: "{space.3}";
+            readonly textSize: "{font.size.14}";
+            readonly icon: "{icon.16}";
+            readonly gap: "{space.2}";
+            readonly radius: "{radius.8}";
         };
     };
-    readonly motion: {
-        readonly duration: {
-            readonly fast: "{motion.duration.fast}";
-            readonly medium: "{motion.duration.medium}";
-            readonly slow: "{motion.duration.slow}";
-        };
-        readonly easing: {
-            readonly standard: "{motion.easing.standard}";
+    readonly switch: {
+        readonly xs: {
+            readonly width: "{space.6}";
+            readonly height: "1rem";
+            readonly thumb: "0.75rem";
+        };
+        readonly s: {
+            readonly width: "{space.7}";
+            readonly height: "1rem";
+            readonly thumb: "0.75rem";
+        };
+        readonly m: {
+            readonly width: "{space.8}";
+            readonly height: "{space.5}";
+            readonly thumb: "1rem";
+        };
+        readonly l: {
+            readonly width: "{space.9}";
+            readonly height: "{space.5}";
+            readonly thumb: "1rem";
+        };
+        readonly xl: {
+            readonly width: "2.75rem";
+            readonly height: "{space.6}";
+            readonly thumb: "{icon.20}";
         };
-        readonly fast: "{motion.duration.fast}";
-        readonly medium: "{motion.duration.medium}";
-        readonly slow: "{motion.duration.slow}";
-        readonly standard: "{motion.easing.standard}";
+    };
+    readonly avatar: {
+        readonly xs: "{space.5}";
+        readonly s: "{space.6}";
+        readonly m: "{space.8}";
+        readonly l: "{space.10}";
+        readonly xl: "{space.12}";
+        readonly "2xl": "{space.16}";
+    };
+    /** Floating panel shared by Select, Dropdown, Combobox, Datepicker, Popover. Item radius = radius − padding. */
+    readonly panel: {
+        readonly radius: "{radius.12}";
+        readonly padding: "{space.1}";
+        readonly itemRadius: "{radius.8}";
+        readonly itemPaddingX: "{space.2}";
+        readonly contentPadding: "{space.4}";
+        readonly offset: "{space.1}";
+        readonly groupLabelHeight: "{space.7}";
+        readonly maxHeight: "20rem";
+        readonly minWidth: "12rem";
+    };
+    readonly card: {
+        /** Context: surfaces set it to `none` together with `--prime-color-card-bg` (see color.card). */
+        readonly shadow: "{shadow.raised}";
+        readonly radius: "{radius.12}";
+        readonly paddingS: "{space.4}";
+        readonly paddingM: "{space.5}";
+        readonly paddingL: "{space.6}";
+        readonly gap: "{space.4}";
+    };
+    readonly modal: {
+        readonly radius: "{radius.16}";
+        readonly padding: "{space.6}";
+        readonly gap: "{space.4}";
+        readonly viewportPadding: "{space.4}";
+        readonly widthS: "27.5rem";
+        readonly widthM: "35rem";
+        readonly widthL: "45rem";
+        readonly widthXl: "60rem";
+    };
+    readonly drawer: {
+        readonly padding: "{space.6}";
+        readonly gap: "{space.4}";
+        readonly widthS: "22.5rem";
+        readonly widthM: "30rem";
+        readonly widthL: "40rem";
+        readonly widthXl: "50rem";
+    };
+    readonly tooltip: {
+        readonly radius: "{radius.6}";
+        readonly paddingX: "{space.2}";
+        readonly paddingY: "{space.1}";
+        readonly maxWidth: "17.5rem";
+    };
+    readonly table: {
+        readonly rowHeightS: "{space.9}";
+        readonly rowHeightM: "2.75rem";
+        readonly rowHeightL: "3.25rem";
+        readonly cellPaddingX: "{space.3}";
+    };
+    readonly layout: {
+        readonly sidebarWidth: "15.5rem";
+        readonly sidebarCollapsedWidth: "{space.14}";
+        readonly gutterS: "{space.4}";
+        readonly gutterM: "{space.6}";
+        readonly gutterL: "{space.8}";
+        readonly contentMaxWidth: "75rem";
+        readonly readingMaxWidth: "42rem";
     };
 };
 //# sourceMappingURL=semantic.d.ts.map