prime-ui-kit 0.2.5 → 0.3.1

package/dist/tokens/semantic.d.ts

@@ -0,0 +1,732 @@
+/**
+ * Семантика: нейтральные поверхности — `color.gray.0` (бумага); литеральный светлый текст на тёмном — `color.white`;
+ * акцентный «чёрный» — `color.black`. См. план §3.1.
+ */
+export declare const semanticTokens: {
+    readonly color: {
+        readonly surface: {
+            readonly default: "{color.gray.50}";
+            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}";
+            readonly disabled: "{color.gray.400}";
+            readonly inverse: "{color.white}";
+            readonly accent: "{color.gray.800}";
+            readonly danger: "{color.red.800}";
+        };
+        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}";
+        };
+        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}";
+            };
+        };
+        /**
+         * Разделители ячеек таблицы: смешение с `border-subtle` (тема задаёт процент в light/dark).
+         */
+        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 lineHeight: {
+            readonly tight: "1.25";
+            readonly normal: "1.5";
+            readonly relaxed: "1.65";
+        };
+        readonly control: {
+            readonly s: "{font.size.xs}";
+            readonly m: "{font.size.s}";
+            readonly l: "{font.size.m}";
+        };
+        readonly support: {
+            readonly "3xs": "{font.size.3xs}";
+            readonly "2xs": "{font.size.2xs}";
+            readonly xs: "{font.size.xs}";
+            readonly s: "{font.size.s}";
+        };
+        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";
+        };
+        readonly title: {
+            readonly size: "{font.size.l}";
+            readonly weight: "{font.weight.semibold}";
+        };
+        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}";
+        };
+        /**
+         * Семантические роли чтения (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 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 border: {
+        readonly width: {
+            readonly control: "1px";
+            readonly focusRing: "2px";
+        };
+    };
+    /**
+     * Алиасы сетки → примитивы `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}";
+    };
+    /**
+     * Слои наложения: `--prime-sys-elevation-zIndex-*` + контекст `OverlayPortalLayer` для порталов
+     * (popover/dropdown/tooltip внутри drawer/modal — см. `drawerInModal`, `*InModal`, `*InDrawerInModal`).
+     */
+    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 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.s}";
+            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}";
+        };
+    };
+    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 fast: "{motion.duration.fast}";
+        readonly medium: "{motion.duration.medium}";
+        readonly slow: "{motion.duration.slow}";
+        readonly standard: "{motion.easing.standard}";
+    };
+};
+//# sourceMappingURL=semantic.d.ts.map