/* ═══════════════════════════════════════════════════════════ FinancialDS — Design Tokens B2B Financial Portal · Neutral-Blue chrome · Inter Variable ═══════════════════════════════════════════════════════════ */ :root { /* ── Brand (Red) ────────────────────────────────────────── Scarce: only primary CTA / auth / logo. Never "Save". */ --ds-brand-50: #FFE9E3; --ds-brand-100: #FFC8BE; /* Brand soft hover */ --ds-brand-300: #ff4d4d; --ds-brand-500: #ff0508; /* Default */ --ds-brand-700: #d90407; /* Hover */ --ds-brand-900: #b30306; /* Pressed */ --ds-brand-disabled:#ffb3b4; /* ── Neutral-Blue ramp (Grey-Blue chrome) ───────────────── Primary visual identity of FinancialDS. */ --ds-nb-0: #ffffff; --ds-nb-50: #f9fafb; --ds-nb-100: #f3f4f6; --ds-nb-200: #e5e7eb; --ds-nb-300: #d1d5db; --ds-nb-400: #9ca3af; --ds-nb-500: #6b7280; --ds-nb-600: #4b5563; --ds-nb-700: #374151; --ds-nb-800: #1f2937; --ds-nb-900: #111827; --ds-nb-950: #0f1724; /* ── Semantic: Info (Blue) ────────────────────────────────*/ --ds-info-50: #E6EDFF; --ds-info-100: #d9dffe; --ds-info-500: #4564e5; --ds-info-700: #3a55c7; --ds-info-800: #5475F8; /* Focus ring color. Use: box-shadow паттерн → --ds-shadow-focus. НЕ border-color. */ --ds-info-900: #3046aa; /* ── Semantic: Positive (Green) ──────────────────────────*/ --ds-pos-50: #E4F2E1; --ds-pos-100: #d9fbcc; --ds-pos-500: #258101; --ds-pos-700: #1e6b00; --ds-pos-900: #175500; /* ── Semantic: Negative (Deep Red, different from Brand) ─*/ --ds-neg-50: rgba(174,181,189,0.30); /* Negative Soft bg = nba-30 · neutral chrome (не красный — B2B паттерн) */ --ds-neg-100: #ffd6cf; --ds-neg-500: #cc2200; --ds-neg-700: #ad1d00; --ds-neg-900: #8c1700; /* ── Semantic: Warning (Amber) ───────────────────────────*/ --ds-warn-50: #FBEDB8; --ds-warn-100: #ffefd6; --ds-warn-500: #b45309; /* text in soft/outline variants */ --ds-warn-700: #963f06; --ds-warn-900: #7c3204; --ds-warn-fill: #F4A800; /* solid fill (Fill/Warning/Solid/Default) */ --ds-warn-solid-text: #592E06; /* text on warning solid bg */ /* ── Neutral Text ramp (APCA-tuned warm neutral — separate from NB chrome) Values differ from NB ramp intentionally: slightly warmer tone, tuned for APCA body-text thresholds. Do NOT substitute NB steps for these. */ --ds-nt-900: #131316; /* text-primary light */ --ds-nt-700: #33373B; /* text-secondary light */ --ds-nt-500: #6B7175; /* text-tertiary light */ --ds-nt-400: #6A6C6E; /* stroke-neutral-hover light */ --ds-nt-100: #ebedef; /* Static/Surface/Neutral/2-Medium — badge-counter neutral surface (Chip/Button) */ /* ── Info extra step (below info-50, chip utility) */ --ds-info-25: #f3f6fe; /* ── Surface & Background (Static/Surface/Neutral-Blue · Light) ───────── Три реальных уровня фона: --ds-surface (карточка) > --ds-surface-muted (секция) > --ds-page-bg (страница). Static токены — меняются только при смене темы, не реагируют на ховер/клик. Use --ds-surface: карточки, модалки, поповеры, белые поверхности. Use --ds-surface-muted: внутренние секции карточек, чуть темнее поверхности. Use --ds-page-bg: фон страницы/лейаута. НЕ ставить на компонент/карточку. Use --ds-border: разделители, внешние рамки (не интерактивные элементы). Use --ds-border-strong: акцентные разделители, table headers. Do NOT use --ds-page-bg как fill кнопки/контрола → Fill/[semantic]/Solid/Default. Do NOT use --ds-surface как hover bg → --ds-nba-20. Do NOT use --ds-surface-accent как text color → флипает в Dark, использовать --ds-text-invert. */ --ds-surface: var(--ds-nb-0); --ds-surface-muted: var(--ds-nb-50); --ds-surface-neutral-medium: var(--ds-nt-100); /* Static/Surface/Neutral/2-Medium — badge-counter bg (Chip/Button); HC→--ds-surface-0 */ --ds-page-bg: var(--ds-nb-100); --ds-border: var(--ds-nb-200); --ds-border-strong: var(--ds-nb-300); --ds-surface-accent: var(--ds-neutral-fill); /* тёмная инверсная поверхность → dark mode: белая */ /* ── Static Border ramp (Figma Static/Border/Neutral-Blue · Light) ────── Opaque, для статических сепараторов: Divider, tab-divider, рамки карточек. Несёт значения по 4 темам; --ds-stroke-* алиасят его (var() резолвится по теме). */ --ds-sb-low: #c0c6d0; --ds-sb-mid: #8f969b; --ds-sb-high: #222629; /* ── Stroke (alias static-border ramp) ────────────────────────────────*/ --ds-stroke-low: var(--ds-sb-low); /* разделители, внешние рамки */ --ds-stroke-mid: var(--ds-sb-mid); /* основные бордеры #8f969b */ --ds-stroke-high: var(--ds-sb-high); /* акцентные линии #222629 */ --ds-stroke-neutral: var(--ds-nba-border); /* Switcher track Off-state */ /* ── Icon (Static/Icon/Neutral-Blue — зеркалит Text) ─────────────────*/ --ds-icon-primary: var(--ds-text-primary); --ds-icon-secondary: var(--ds-text-secondary); --ds-icon-tertiary: var(--ds-text-tertiary); --ds-icon-invert: var(--ds-text-invert); --ds-icon-disable-neutral: var(--ds-nb-400); /* Иконка-индикатор слева в поле — всегда серая */ /* ── Field interactive icon buttons (clear / eye / etc.) ─────────────── Single source of truth — dark override lives here, not in components. */ --ds-field-icon-btn-radius: 2px; --ds-field-icon-btn-hover-bg: var(--ds-nba-20); --ds-field-icon-btn-active-bg: var(--ds-nba-40); --ds-field-icon-btn-active-color: var(--ds-icon-primary); /* ── Text (Static/Text/Neutral-Blue · Light) ──────────────────────────── Primary = основной текст (заголовки, body) Secondary = подзаголовки, второстепенный контент Tertiary = подписи, meta, вспомогательный текст Invert = текст на тёмной / инвертированной поверхности */ --ds-text-primary: var(--ds-nt-900); --ds-text-secondary: var(--ds-nt-700); --ds-text-tertiary: var(--ds-nt-500); --ds-text-invert: var(--ds-nb-0); /* ── Semantic surfaces · Light ────────────────────────────────────────*/ --ds-surface-brand-low: var(--ds-brand-50); /* #FFE9E3 · badge soft brand */ --ds-surface-brand-mid: var(--ds-brand-100); /* #ffe0e0 · reserved: medium-emphasis surface, Alert/Banner */ --ds-surface-brand-accent: var(--ds-brand-500); /* badge dot/solid brand */ --ds-surface-info-low: var(--ds-info-50); /* #E6EDFF · badge soft info */ --ds-surface-info-mid: var(--ds-info-100); /* #d9dffe · reserved: medium-emphasis surface, Alert/Banner */ --ds-surface-info-accent: var(--ds-info-800); /* #5475F8 · badge dot/solid info; ProgressBar fill */ --ds-surface-pos-low: var(--ds-pos-50); /* #E4F2E1 · badge soft positive */ --ds-surface-pos-mid: var(--ds-pos-100); /* #d9fbcc · reserved: medium-emphasis surface, Alert/Banner */ --ds-surface-pos-accent: var(--ds-pos-500); /* reserved: pos-500 ≠ pos-default; future Alert solid variant */ --ds-surface-warn-low: var(--ds-warn-50); /* #FBEDB8 · badge soft warning */ --ds-surface-warn-mid: var(--ds-warn-100); /* #ffefd6 · reserved: medium-emphasis surface, Alert/Banner */ --ds-surface-warn-accent: var(--ds-warn-pressed); /* Static/Surface/Warning/Accent · #DD8420 · badge solid/dot bg */ --ds-surface-neg-low: var(--ds-neg-50); /* = nba-30 · neutral chrome, not red — Negative Anomaly · badge soft */ --ds-surface-neg-mid: var(--ds-neg-100); /* #ffd6cf · reserved: medium-emphasis surface, Alert/Banner */ --ds-surface-neg-accent: var(--ds-neg-hover); /* Static/Surface/Negative/Accent · #D70000 · badge solid/dot bg */ /* ── Static/Text — Soft text для статических компонентов (Badge, Alert, Dot) A5: Static/Text/(all)/Accent != Fill/Text/(all)/Soft/Default для Info/Pos/Neg в Light. Warning и Brand — совпадают с -soft-text, алиасировать не нужно. Источник: Static/Text/(intent)/Accent из Theme_extracted/Light.tokens.json */ --ds-surface-info-text: var(--ds-info-500); /* Static/Text/Info/Accent · Light · #4564E5 */ --ds-surface-pos-text: var(--ds-pos-500); /* Static/Text/Positive/Accent · Light · #258101 */ --ds-surface-neg-text: var(--ds-neg-hover); /* Static/Text/Negative/Accent · Light · #D70000 */ /* ── Radius ───────────────────────────────────────────── */ --ds-radius-xs: 4px; --ds-radius-sm: 6px; --ds-radius-md: 8px; --ds-radius-lg: 12px; --ds-radius-xl: 16px; /* reserved: large surface radius · Card, Sheet, Drawer */ --ds-radius-xxl: 24px; /* reserved: full-radius overlay · Modal bottom-sheet, mobile-first */ --ds-radius-pill: 9999px; /* ── Spacing (4px base) ───────────────────────────────── */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; /* space-5: reserved spacing step · 20px */ --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; /* space-10: reserved · 40px */ --ds-space-12: 48px; /* reserved · 48px */ --ds-space-16: 64px; --ds-space-24: 96px; /* ── Grid System ──────────────────────────────────────── */ --ds-grid-gap-xs: var(--ds-space-2); --ds-grid-gap-sm: var(--ds-space-3); /* reserved: tight grid variant */ --ds-grid-gap-md: var(--ds-space-4); --ds-grid-gap-lg: var(--ds-space-6); --ds-grid-gap-xl: var(--ds-space-8); /* Grid label columns */ --ds-grid-label-sm: 80px; --ds-grid-label-md: 120px; --ds-grid-label-lg: 140px; --ds-grid-label-xl: 160px; --ds-grid-label-2xl: 200px; /* reserved: extra-wide form label column */ /* Breakpoints — CSS vars не работают в @media; используются в JS/документации */ --ds-bp-sm: 640px; /* JS: mobile breakpoint */ --ds-bp-md: 1024px; /* JS: tablet breakpoint */ --ds-bp-lg: 1280px; /* JS: desktop default (B2B target) */ --ds-bp-xl: 1920px; /* JS: wide desktop */ /* ── Elevation ────────────────────────────────────────── */ --ds-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.06); --ds-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 2px 8px rgba(17, 24, 39, 0.06); /* reserved: light card elevation */ --ds-shadow-md: 0 2px 4px rgba(17, 24, 39, 0.06), 0 4px 16px rgba(17, 24, 39, 0.10); --ds-shadow-lg: 0 8px 16px rgba(17, 24, 39, 0.06), 0 16px 48px rgba(17, 24, 39, 0.12); /* reserved: Dropdown/Popover elevation */ --ds-shadow-xl: 0 24px 48px rgba(17, 24, 39, 0.08), 0 48px 96px rgba(17, 24, 39, 0.14); /* reserved: Modal/Sheet elevation */ --ds-shadow-focus: 0 0 0 1px var(--ds-surface), 0 0 0 3px var(--ds-info-800); /* Focus ring: 2px Info-800 + 1px offset. Единственный правильный focus-стиль в DS. */ --ds-shadow-active: inset 0 0 0 1px var(--ds-stroke-high); /* Field active/open: simulates 2px border, no layout shift */ --ds-shadow-active-error: inset 0 0 0 1px var(--ds-neg-default); /* Field error+active: simulates 2px red border, no layout shift */ /* ── Motion ───────────────────────────────────────────── */ --ds-ease: cubic-bezier(0.2, 0, 0, 1); --ds-dur-1: 120ms; --ds-dur-2: 150ms; --ds-dur-3: 240ms; /* reserved: overlay enter (Modal, Drawer, Toast) */ --ds-dur-4: 320ms; /* reserved: page-level transitions, complex sequences */ --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ds-scale-press: 0.97; --ds-transition-control: background var(--ds-dur-2) var(--ds-ease), border-color var(--ds-dur-2) var(--ds-ease), box-shadow var(--ds-dur-2) var(--ds-ease); /* ── Typography ───────────────────────────────────────── */ --ds-font: 'Inter', system-ui, -apple-system, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, monospace; --ds-text-3xs: 10px; --ds-text-2xs: 11px; --ds-text-xs: 12px; --ds-text-sm: 13px; --ds-text-base: 14px; --ds-text-md: 16px; --ds-text-lg: 18px; --ds-text-xl: 20px; --ds-text-2xl: 24px; --ds-text-3xl: 32px; --ds-text-4xl: 40px; --ds-text-5xl: 56px; --ds-text-6xl: 80px; /* Label tokens (L0–L3 × Default/Compact) */ --ds-l0-size: 18px; --ds-l0-lh: 24px; --ds-l1-size: 16px; --ds-l1-lh: 24px; --ds-l1-lh-c: 20px; --ds-l2-size: 14px; --ds-l2-lh: 20px; --ds-l2-lh-c: 16px; --ds-l3-size: 12px; --ds-l3-lh: 16px; --ds-l3-lh-c: 14px; --ds-l3-ls: 0.04em; /* ── Component density unit ────────────────────────────────────────────── Единый движок геометрических размеров компонентов (px-значения, не layout). Изменить здесь → все высоты, отступы, gap, радиусы, иконки масштабируются. Типографика (fs) намеренно не привязана — у неё отдельная шкала. Density-режимы переопределяют значение напрямую (см. [data-density] ниже). ×8-кратные (SM) всегда на 8px grid; ×10/12/14 (MD/LG/XL) при 3.5px/4.5px дают sub-pixel значения (35/42/49px) — визуально незначимо. */ --ds-comp-unit: 4px; /* Button size tokens — h: SM×8, MD×10, LG×12, XL×14 */ --ds-btn-sm-h: calc(var(--ds-comp-unit) * 8); --ds-btn-sm-py: calc(var(--ds-comp-unit) * 2); --ds-btn-sm-px: calc(var(--ds-comp-unit) * 2); --ds-btn-sm-gap: var(--ds-comp-unit); --ds-btn-sm-icon: calc(var(--ds-comp-unit) * 4); --ds-btn-sm-r: calc(var(--ds-comp-unit) * 2); --ds-btn-sm-label-px: calc(var(--ds-comp-unit) * 1.5); --ds-btn-sm-stroke: var(--ds-icon-stroke-sm); --ds-btn-sm-fs: var(--ds-l2-size); --ds-btn-sm-lh: calc(var(--ds-comp-unit) * 4); --ds-btn-md-h: calc(var(--ds-comp-unit) * 10); --ds-btn-md-py: calc(var(--ds-comp-unit) * 2.5); --ds-btn-md-px: calc(var(--ds-comp-unit) * 2.5); --ds-btn-md-gap: calc(var(--ds-comp-unit) * 1.5); --ds-btn-md-icon: calc(var(--ds-comp-unit) * 5); --ds-btn-md-r: calc(var(--ds-comp-unit) * 3); --ds-btn-md-label-px: calc(var(--ds-comp-unit) * 2); --ds-btn-md-stroke: var(--ds-icon-stroke-md); --ds-btn-md-fs: var(--ds-l1-size); --ds-btn-md-lh: calc(var(--ds-comp-unit) * 5); --ds-btn-lg-h: calc(var(--ds-comp-unit) * 12); --ds-btn-lg-py: calc(var(--ds-comp-unit) * 3); --ds-btn-lg-px: calc(var(--ds-comp-unit) * 3); --ds-btn-lg-gap: calc(var(--ds-comp-unit) * 2); --ds-btn-lg-icon: calc(var(--ds-comp-unit) * 6); --ds-btn-lg-r: calc(var(--ds-comp-unit) * 3); --ds-btn-lg-label-px: calc(var(--ds-comp-unit) * 2.5); --ds-btn-lg-stroke: var(--ds-icon-stroke-md); --ds-btn-lg-fs: var(--ds-l1-size); --ds-btn-lg-lh: calc(var(--ds-comp-unit) * 6); --ds-btn-xl-h: calc(var(--ds-comp-unit) * 14); --ds-btn-xl-py: calc(var(--ds-comp-unit) * 4); --ds-btn-xl-px: calc(var(--ds-comp-unit) * 4); --ds-btn-xl-gap: calc(var(--ds-comp-unit) * 2.5); --ds-btn-xl-icon: calc(var(--ds-comp-unit) * 6); --ds-btn-xl-r: calc(var(--ds-comp-unit) * 4); --ds-btn-xl-label-px: calc(var(--ds-comp-unit) * 3); --ds-btn-xl-stroke: var(--ds-icon-stroke-md); --ds-btn-xl-fs: 18px; --ds-btn-xl-lh: calc(var(--ds-comp-unit) * 6); /* Tag size tokens — multipliers: SM×5, MD×6 */ --ds-tag-sm-h: calc(var(--ds-comp-unit) * 5); --ds-tag-sm-px: var(--ds-comp-unit); --ds-tag-sm-gap: calc(var(--ds-comp-unit) * 0.5); --ds-tag-sm-r: var(--ds-comp-unit); --ds-tag-sm-fs: var(--ds-l3-size); --ds-tag-sm-lh: calc(var(--ds-comp-unit) * 4); --ds-tag-sm-ls: 0.5px; --ds-tag-md-h: calc(var(--ds-comp-unit) * 6); --ds-tag-md-px: calc(var(--ds-comp-unit) * 1.5); --ds-tag-md-gap: calc(var(--ds-comp-unit) * 0.5); --ds-tag-md-r: calc(var(--ds-comp-unit) * 1.5); --ds-tag-md-fs: var(--ds-l2-size); --ds-tag-md-lh: calc(var(--ds-comp-unit) * 4); --ds-tag-sm-group-gap-x: var(--ds-comp-unit); /* 4px */ --ds-tag-sm-group-gap-y: calc(var(--ds-comp-unit) * 1.5); /* 6px */ --ds-tag-md-group-gap-x: calc(var(--ds-comp-unit) * 1.5); /* 6px */ --ds-tag-md-group-gap-y: calc(var(--ds-comp-unit) * 2); /* 8px */ /* Badge size tokens — height multipliers: SM×4 (h16, Desktop-B2B), MD×5 (h20, base). Figma (resolved vars 58:5956 / 219:23409): font-size = 12px ОБА размера; px = MD 4 / SM 2; lh MD 16 / SM 14. */ --ds-bdg-sm-h: calc(var(--ds-comp-unit) * 4); --ds-bdg-sm-px: calc(var(--ds-comp-unit) * 0.5); --ds-bdg-sm-fs: 12px; --ds-bdg-md-h: calc(var(--ds-comp-unit) * 5); --ds-bdg-md-px: var(--ds-comp-unit); --ds-bdg-md-fs: 12px; /* Toggle Group Button — алиас btn-* по всем параметрам кроме grp-gap */ --ds-tgb-sm-grp-gap: var(--ds-comp-unit); /* 4px = btn-sm-gap */ --ds-tgb-md-grp-gap: calc(var(--ds-comp-unit) * 1.5); /* 6px = btn-md-gap */ --ds-tgb-lg-grp-gap: calc(var(--ds-comp-unit) * 2); /* 8px = btn-lg-gap */ --ds-tgb-xl-grp-gap: calc(var(--ds-comp-unit) * 2.5); /* 10px = btn-xl-gap */ /* Buttons Group gap tokens — SM×4, MD×5, LG×6, XL×7 */ --ds-bg-sm-gap: calc(var(--ds-comp-unit) * 4); --ds-bg-md-gap: calc(var(--ds-comp-unit) * 5); --ds-bg-lg-gap: calc(var(--ds-comp-unit) * 6); --ds-bg-xl-gap: calc(var(--ds-comp-unit) * 7); /* Link Text — полный алиас btn-* по размерной лестнице SM/MD/LG */ --ds-lnk-sm-fs: var(--ds-btn-sm-fs); /* 14px */ --ds-lnk-sm-lh: var(--ds-btn-sm-lh); /* 16px */ --ds-lnk-sm-gap: var(--ds-btn-sm-gap); /* 4px */ --ds-lnk-sm-icon: var(--ds-btn-sm-icon); /* 16px */ --ds-lnk-sm-stroke: var(--ds-btn-sm-stroke); /* 1.5 */ --ds-lnk-md-fs: var(--ds-btn-md-fs); /* 16px */ --ds-lnk-md-lh: var(--ds-btn-md-lh); /* 20px */ --ds-lnk-md-gap: var(--ds-btn-md-gap); /* 6px */ --ds-lnk-md-icon: var(--ds-btn-md-icon); /* 20px */ --ds-lnk-md-stroke: var(--ds-btn-md-stroke); /* 2.0 */ --ds-lnk-lg-fs: var(--ds-btn-lg-fs); /* 16px */ --ds-lnk-lg-lh: var(--ds-btn-lg-lh); /* 24px */ --ds-lnk-lg-gap: var(--ds-btn-lg-gap); /* 8px */ --ds-lnk-lg-icon: var(--ds-btn-lg-icon); /* 24px */ --ds-lnk-lg-stroke: var(--ds-btn-lg-stroke); /* 2.0 */ /* Chip size tokens — XS×6, SM×8 (=Btn SM), MD×10 (=Btn MD) */ --ds-chip-xs-h: calc(var(--ds-comp-unit) * 6); --ds-chip-xs-px: calc(var(--ds-comp-unit) * 1.5); --ds-chip-xs-py: var(--ds-comp-unit); --ds-chip-xs-gap: var(--ds-comp-unit); --ds-chip-xs-fs: 14px; --ds-chip-xs-lh: calc(var(--ds-comp-unit) * 4); --ds-chip-xs-grp-x: calc(var(--ds-comp-unit) * 1.5); --ds-chip-xs-grp-y: calc(var(--ds-comp-unit) * 2); --ds-chip-sm-h: calc(var(--ds-comp-unit) * 8); --ds-chip-sm-px: calc(var(--ds-comp-unit) * 2); --ds-chip-sm-py: calc(var(--ds-comp-unit) * 2); --ds-chip-sm-gap: calc(var(--ds-comp-unit) * 1.5); --ds-chip-sm-fs: var(--ds-l2-size); --ds-chip-sm-lh: calc(var(--ds-comp-unit) * 4); --ds-chip-sm-grp-x: calc(var(--ds-comp-unit) * 2); --ds-chip-sm-grp-y: calc(var(--ds-comp-unit) * 2.5); --ds-chip-md-h: calc(var(--ds-comp-unit) * 10); --ds-chip-md-px: calc(var(--ds-comp-unit) * 2.5); --ds-chip-md-py: calc(var(--ds-comp-unit) * 2.5); --ds-chip-md-gap: calc(var(--ds-comp-unit) * 2); --ds-chip-md-fs: var(--ds-l1-size); --ds-chip-md-lh: calc(var(--ds-comp-unit) * 5); --ds-chip-md-grp-x: calc(var(--ds-comp-unit) * 2.5); --ds-chip-md-grp-y: calc(var(--ds-comp-unit) * 3); /* ── Input tokens ─────────────────────────────────────────────── */ --ds-field-border-w: 1px; --ds-input-sm-h: 32px; --ds-input-sm-px: 8px; --ds-input-sm-py: 8px; --ds-input-sm-gap: 6px; --ds-input-sm-fs: 14px; --ds-input-sm-lh: 16px; --ds-input-sm-icon: 16px; --ds-input-sm-r: 10px; --ds-input-sm-label-fs: 14px; --ds-input-sm-helper-fs: 12px; --ds-input-md-h: 40px; --ds-input-md-px: 10px; --ds-input-md-py: 10px; --ds-input-md-gap: 8px; --ds-input-md-fs: 16px; --ds-input-md-lh: 20px; --ds-input-md-icon: 20px; --ds-input-md-r: 10px; --ds-input-md-label-fs: 16px; --ds-input-md-helper-fs: 12px; --ds-input-lg-h: 48px; --ds-input-lg-px: 12px; --ds-input-lg-py: 12px; --ds-input-lg-gap: 8px; --ds-input-lg-fs: 16px; --ds-input-lg-lh: 24px; --ds-input-lg-icon: 24px; --ds-input-lg-r: 10px; --ds-input-lg-label-fs: 18px; --ds-input-lg-helper-fs: 12px; /* Input XL */ --ds-input-xl-h: 56px; --ds-input-xl-px: 16px; --ds-input-xl-py: 16px; --ds-input-xl-r: 10px; --ds-input-xl-gap: 12px; --ds-input-xl-fs: 18px; --ds-input-xl-lh: 24px; --ds-input-xl-icon: 24px; --ds-input-xl-icon-stroke: 2; /* ─── Field Layout Tokens ─── */ /* Gap-y: Label→Field, Field→Caption */ --ds-field-gap-y-sm: 6px; --ds-field-gap-y-md: 8px; --ds-field-gap-y-lg: 10px; --ds-field-gap-y-xl: 12px; /* Gap-x: Label→Field (горизонтальный layout) */ --ds-field-gap-x-sm: 10px; --ds-field-gap-x-md: 12px; --ds-field-gap-x-lg: 12px; --ds-field-gap-x-xl: 16px; /* Label */ --ds-field-label-sm-fs: 14px; --ds-field-label-sm-lh: 16px; --ds-field-label-sm-gap: 2px; --ds-field-label-sm-icon: 16px; --ds-field-label-md-fs: 16px; --ds-field-label-md-lh: 20px; --ds-field-label-md-gap: 2px; --ds-field-label-md-icon: 20px; --ds-field-label-lg-fs: 16px; --ds-field-label-lg-lh: 24px; --ds-field-label-lg-gap: 4px; --ds-field-label-lg-icon: 24px; --ds-field-label-xl-fs: 18px; --ds-field-label-xl-lh: 24px; --ds-field-label-xl-gap: 4px; --ds-field-label-xl-icon: 24px; /* Caption + Counter (фиксированные, не масштабируются) */ --ds-field-caption-fs: 12px; --ds-field-caption-lh: 16px; --ds-field-caption-icon: 16px; --ds-field-caption-icon-stroke: 1.5px; --ds-field-counter-gap: 8px; /* ─── Field LabelIn Tokens (floating label) ─── */ /* SM ступень (используется для SM и MD) */ --ds-field-in-sm-h: 48px; --ds-field-in-sm-px: 12px; --ds-field-in-sm-py: 12px; --ds-field-in-sm-py-filled: 6px; --ds-field-in-sm-r: 12px; --ds-field-in-sm-gap: 0px; --ds-field-in-sm-label-fs: 16px; --ds-field-in-sm-label-lh: 24px; --ds-field-in-sm-label-float-fs: 12px; --ds-field-in-sm-label-float-lh: 16px; --ds-field-in-sm-fs: 16px; --ds-field-in-sm-lh: 20px; /* MD алиасирует SM */ --ds-field-in-md-h: var(--ds-field-in-sm-h); --ds-field-in-md-px: var(--ds-field-in-sm-px); --ds-field-in-md-py: var(--ds-field-in-sm-py); --ds-field-in-md-py-filled: var(--ds-field-in-sm-py-filled); --ds-field-in-md-r: var(--ds-field-in-sm-r); --ds-field-in-md-gap: var(--ds-field-in-sm-gap); --ds-field-in-md-label-fs: var(--ds-field-in-sm-label-fs); --ds-field-in-md-label-lh: var(--ds-field-in-sm-label-lh); --ds-field-in-md-label-float-fs: var(--ds-field-in-sm-label-float-fs); --ds-field-in-md-label-float-lh: var(--ds-field-in-sm-label-float-lh); --ds-field-in-md-fs: var(--ds-field-in-sm-fs); --ds-field-in-md-lh: var(--ds-field-in-sm-lh); /* LG ступень (используется для LG и XL) */ --ds-field-in-lg-h: 56px; --ds-field-in-lg-px: 16px; --ds-field-in-lg-py: 16px; --ds-field-in-lg-py-filled: 8px; --ds-field-in-lg-r: 16px; --ds-field-in-lg-gap: 4px; --ds-field-in-lg-label-fs: 18px; --ds-field-in-lg-label-lh: 24px; --ds-field-in-lg-label-float-fs: 12px; --ds-field-in-lg-label-float-lh: 16px; --ds-field-in-lg-fs: 16px; --ds-field-in-lg-lh: 20px; /* XL алиасирует LG */ --ds-field-in-xl-h: var(--ds-field-in-lg-h); --ds-field-in-xl-px: var(--ds-field-in-lg-px); --ds-field-in-xl-py: var(--ds-field-in-lg-py); --ds-field-in-xl-py-filled: var(--ds-field-in-lg-py-filled); --ds-field-in-xl-r: var(--ds-field-in-lg-r); --ds-field-in-xl-gap: var(--ds-field-in-lg-gap); --ds-field-in-xl-label-fs: var(--ds-field-in-lg-label-fs); --ds-field-in-xl-label-lh: var(--ds-field-in-lg-label-lh); --ds-field-in-xl-label-float-fs: var(--ds-field-in-lg-label-float-fs); --ds-field-in-xl-label-float-lh: var(--ds-field-in-lg-label-float-lh); --ds-field-in-xl-fs: var(--ds-field-in-lg-fs); --ds-field-in-xl-lh: var(--ds-field-in-lg-lh); /* ─── TextArea Tokens ─── */ --ds-textarea-sm-min-h: 72px; --ds-textarea-md-min-h: 80px; --ds-textarea-lg-min-h: 96px; /* ─── Scrollbar Tokens (❖ Scrollbar collection — SM context) ─── */ --ds-scrollbar-width: 6px; /* SM=6px / LG=8px */ --ds-scrollbar-r: 999px; /* pill shape */ /* Icon tokens */ --ds-icon-stroke-sm: 2.25; /* 16px icon → 1.5px visual: 1.5 × (24/16) = 2.25 */ --ds-icon-stroke-md: 2.4; /* 20px icon → 2px visual: 2.0 × (24/20) = 2.4 */ --ds-icon-stroke-lg: 2; /* 24px icon → 2px visual: 2.0 × (24/24) = 2.0 */ --ds-icon-stroke: var(--ds-icon-stroke-sm); /* алиас для обратной совместимости */ --ds-icon-sm: calc(var(--ds-comp-unit) * 4); --ds-icon-md: calc(var(--ds-comp-unit) * 5); --ds-icon-lg: calc(var(--ds-comp-unit) * 6); /* ── Neutral component fill (cool dark grey, L3 — отличается от NB-рампы) ── DARK MODE WARNING: #222629 Light → #FFFFFF Dark (флип через CSS var). Use for: High-Contrast fills (Switch track ON, TGB active, accent surfaces). Do NOT use for: text color на любой поверхности → --ds-text-* вместо него. Do NOT use for: disabled states → --ds-nba-15. Pair with: --ds-surface-0 для текста/иконки поверх этого фона. HC-adjacency: элемент на поверхности близкой по яркости → HC Static-поверхность (--ds-surface-0), не alpha/border. См. memory/patterns/high-contrast-adjacency-pattern.md */ --ds-neutral-fill: #222629; --ds-neutral-fill-hover: #54595c; --ds-neutral-fill-pressed: #7a8187; /* ── Neutral-Blue alpha — шкала интерактивных состояний ────────────────── Единая шкала для Soft/Outline/Ghost (Chip, Tag, TGB, Button, SelectControl). ПРАВИЛО DARK OVERRIDE: nba-20 hover → ОБЯЗАТЕЛЬНО добавить dark override nba-40. Без него hover невидим в тёмной теме (α=20% серого почти не различим). Use nba-15: disabled fill для ВСЕХ компонентов. НЕ opacity, НЕ серый hex. Use nba-20: hover bg на нейтральных поверхностях. + dark override nba-40! Use nba-30: Soft Default fill; Outline Active-Hover fill. Use nba-40: pressed fill; Dark mode override вместо nba-20 hover. Use nba-50: Outline Active fill (выбранный элемент). Use nba-border: border у Outline/Ghost компонентов. НЕ --ds-nb-200. Do NOT use: opacity: 0.5 для disabled — нарушение системы, использовать nba-15. Do NOT use: --ds-nb-200 как border интерактивных элементов → только nba-border. Dark base shift: #AEB5BD → #91989D; nba-border Light=#8F969B Dark=#ACB3BB. */ --ds-nba-fill-base: #AEB5BD; /* L0 — base для alpha-заливок */ --ds-nba-border-base: #8F969B; /* L0 — base для бордеров */ --ds-nba-15: rgb(from var(--ds-nba-fill-base) r g b / 0.15); /* disabled fill */ --ds-nba-20: rgb(from var(--ds-nba-fill-base) r g b / 0.20); /* hover fill (+dark override→nba-40!) */ --ds-nba-30: rgb(from var(--ds-nba-fill-base) r g b / 0.30); /* Soft Default; Outline Active-Hover */ --ds-nba-40: rgb(from var(--ds-nba-fill-base) r g b / 0.40); /* pressed; Dark hover override */ --ds-nba-50: rgb(from var(--ds-nba-fill-base) r g b / 0.50); /* Outline Active fill */ --ds-nba-border: var(--ds-nba-border-base); /* Outline/Ghost border */ --ds-nba-border-disabled: rgb(from var(--ds-nba-border-base) r g b / 0.80); /* Outline Disabled border */ --ds-disabled-text: var(--ds-nba-border-base); /* text в disabled. Pair: nba-15 fill. НЕ --ds-text-tertiary. */ /* ── Brand state extensions ─────────────────────────────────────────── */ --ds-brand-hover: #fd5b4c; --ds-brand-pressed: #d70000; /* ── Positive L3 (компонентные, отличаются от рампы) ───────────────── */ --ds-pos-default: #2c9205; --ds-pos-hover: #51a63c; --ds-pos-pressed: #258101; /* совпадает с --ds-pos-500 */ /* ── Negative L3 (компонентные; --ds-neg-500 = #cc2200 — рамповое) ── */ --ds-neg-default: #a70000; --ds-neg-hover: #d70000; --ds-neg-pressed: #68130e; /* ── Soft/Outline text colors (Text/[semantic]/Soft+Outline/Default) ────── Use for: текст и иконка на Soft bg или Outline варианте компонента. Do NOT use: на Solid варианте → там --ds-text-invert (Badge Solid text = всегда инверт). Do NOT use: --ds-info-500/pos-500 как текст → они для Solid fill, не текст. */ --ds-info-soft-text: #324ABD; /* Text/Info/Soft+Outline/Default */ --ds-pos-soft-text: #1B6403; /* Text/Positive/Soft+Outline/Default */ --ds-warn-soft-text: #874504; /* Text/Warning/Soft+Outline/Default */ --ds-brand-soft-text: #D70000; /* Text/Brand/Soft+Outline/Default */ --ds-neg-soft-text: #A70000; /* Text/Negative/Soft+Outline/Default */ /* ── Outline stroke/border colors (Stroke/[semantic]/Default) ──────────*/ --ds-info-stroke: #6C8DFA; /* Stroke/Info/Default */ --ds-pos-stroke: #51A63C; /* Stroke/Positive/Default */ --ds-warn-stroke: #F4A800; /* Stroke/Warning/Default (= warn-fill) */ --ds-brand-stroke: #FD5B4C; /* Stroke/Brand/Default */ /* neg-stroke: Stroke/Negative-Blue/* → --ds-neg-default / --ds-neg-hover (updated 2026-05-13) */ --ds-info-outline-active: #C7D5FB; /* Fill/Info/Outline/Active light */ /* ── Component state extensions (React migration layer) ─────────────── */ --ds-brand-200: #FF9585; /* Fill/Brand/Soft/Pressed */ --ds-brand-stroke-pressed: #A70000; /* Stroke/Brand/Active+Pressed */ --ds-info-hover: #6C8DFA; /* Fill/Info/Solid/Hover */ --ds-info-pressed: #4564e5; /* Fill/Info/Solid/Pressed */ --ds-info-soft-hover: #C7D5FB; /* Fill/Info/Soft/Hover */ --ds-info-soft-pressed: #96B1FE; /* Fill/Info/Soft/Pressed */ --ds-info-stroke-pressed: #324ABD; /* Stroke/Info/Pressed */ --ds-info-text-pressed: #111C56; /* Text/Info/Pressed */ --ds-pos-soft-hover: #C2DEBC; /* Fill/Positive/Soft/Hover */ --ds-pos-soft-pressed: #83C375; /* Fill/Positive/Soft/Pressed */ --ds-pos-stroke-pressed: #1B6403; /* Stroke/Positive/Pressed */ --ds-warn-hover: #FABA1C; /* Fill/Warning/Solid/Hover */ --ds-warn-pressed: #DD8420; /* Fill/Warning/Solid/Pressed */ --ds-warn-soft-hover: #FFDE89; /* Fill/Warning/Soft/Hover */ --ds-warn-soft-pressed: #FED049; /* Fill/Warning/Soft/Pressed */ --ds-warn-stroke-pressed: #AC5900; /* Stroke/Warning/Pressed */ --ds-stroke-neutral-hover: var(--ds-nt-400); /* Stroke/Neutral/Hover */ --ds-disabled-fill: var(--ds-nba-fill-base); /* Fill/Disable solid */ --ds-surface-0: var(--ds-nb-0); /* Page base surface (focus ring gap) */ --ds-focus-offset: 1px; --ds-focus-width: 2px; --ds-chip-info-bg: var(--ds-info-25); /* Chip Info initial bg (< info-50) */ /* ── Shared component utilities ─────────────────────────── */ --ds-focus-ring: 0 0 0 var(--ds-focus-offset) var(--ds-surface-0), 0 0 0 calc(var(--ds-focus-offset) + var(--ds-focus-width)) var(--ds-info-800); --ds-component-transition: background-color var(--ds-dur-1) var(--ds-ease), border-color var(--ds-dur-1) var(--ds-ease), color var(--ds-dur-1) var(--ds-ease), box-shadow var(--ds-dur-1) var(--ds-ease); --ds-link-underline-thickness: 1px; --ds-link-underline-offset: 2px; /* ── React CSS-Module aliases (legacy shorthand → --ds-* canonical names) */ /* Chip MD */ --chip-md-height: var(--ds-chip-md-h); --chip-md-padding-x: var(--ds-chip-md-px); --chip-md-gap: var(--ds-chip-md-gap); --chip-md-font-size: var(--ds-chip-md-fs); --chip-md-line-height: var(--ds-chip-md-lh); --chip-md-radius: var(--ds-radius-pill); --chip-md-icon-size: var(--ds-icon-md); /* Badge MD */ --badge-md-height: var(--ds-bdg-md-h); --badge-md-min-width: var(--ds-bdg-md-h); --badge-md-padding-x: var(--ds-bdg-md-px); --badge-md-padding-y: 0px; --badge-md-font-size: var(--ds-bdg-md-fs); --badge-md-line-height: var(--ds-bdg-md-fs); --badge-md-letter-spacing: 0.04em; --badge-md-radius: var(--ds-radius-pill); /* Tag MD */ --tag-md-height: var(--ds-tag-md-h); --tag-md-padding-x: var(--ds-tag-md-px); --tag-md-padding-y: 0px; --tag-md-gap: var(--ds-tag-md-gap); --tag-md-radius: var(--ds-tag-md-r); --tag-md-font-size: var(--ds-tag-md-fs); --tag-md-line-height: var(--ds-tag-md-lh); --tag-md-letter-spacing: 0; --tag-md-icon-size: var(--ds-icon-sm); /* Radio MD / SM — legacy aliases (kept for backward compat) */ --radio-md-circle-size: 24px; --radio-md-stroke: 2px; --radio-md-inner-dot-size: 10px; --radio-md-gap: 8px; --radio-md-group-gap: 12px; --radio-md-touch-target: 40px; --radio-md-font-size: var(--ds-btn-md-fs); --radio-md-line-height: var(--ds-btn-md-lh); --radio-sm-circle-size: 20px; --radio-sm-stroke: 2px; --radio-sm-inner-dot-size: 8px; --radio-sm-gap: 6px; --radio-sm-group-gap: 8px; --radio-sm-touch-target: 36px; --radio-sm-font-size: var(--ds-btn-sm-fs); --radio-sm-line-height: var(--ds-btn-sm-lh); /* Radio MD / SM — canonical --ds-* tokens */ --ds-radio-stroke: 1.5px; /* default border */ --ds-radio-stroke-negative: 2px; /* error/negative border */ --ds-radio-md-circle: calc(var(--ds-comp-unit) * 6); /* 24px */ --ds-radio-md-stroke: var(--ds-radio-stroke); --ds-radio-md-dot: calc(var(--ds-comp-unit) * 2.5); /* 10px */ --ds-radio-md-gap: calc(var(--ds-comp-unit) * 2); /* 8px */ --ds-radio-md-group-gap: calc(var(--ds-comp-unit) * 3); /* 12px */ --ds-radio-md-touch: var(--ds-btn-md-h); /* 40px */ --ds-radio-md-fs: var(--ds-l1-size); /* 16px — label, Figma 293:19133 (был btn-md alias) */ --ds-radio-md-lh: var(--ds-l1-lh); /* 24px — comfort full-lh для многострочных лейблов (был btn-md-lh 20) */ --ds-radio-sm-circle: calc(var(--ds-comp-unit) * 5); /* 20px */ --ds-radio-sm-stroke: var(--ds-radio-stroke); --ds-radio-sm-dot: calc(var(--ds-comp-unit) * 2); /* 8px */ --ds-radio-sm-gap: calc(var(--ds-comp-unit) * 1.5); /* 6px */ --ds-radio-sm-group-gap: calc(var(--ds-comp-unit) * 2); /* 8px */ --ds-radio-sm-touch: calc(var(--ds-comp-unit) * 9); /* 36px */ --ds-radio-sm-fs: var(--ds-l1-size); /* 16px — label 16 на обоих размерах, Figma 293:19121 (был btn-sm 14) */ --ds-radio-sm-lh: var(--ds-l1-lh-c); /* 20px — comfort compact-lh для многострочных (был btn-sm-lh 16) */ /* ── Radiobutton Ghost + Container ───────────────────────── */ --ds-radio-core-gap: 2px; --ds-radio-caption-fs: 12px; --ds-radio-caption-lh: 16px; /* MD */ --ds-radio-label-gap-md: 8px; --ds-radio-label-px-md: 10px; --ds-radio-caption-px-md: 10px; --ds-radio-icon-py-md: 4px; --ds-radio-cont-px-md: 10px; --ds-radio-cont-py-md: 10px; --ds-radio-cont-r-md: var(--ds-form-cont-r-md); /* 16px — Figma 293:19133, aliased to form-cont-r (был 12px, баг) */ /* SM */ --ds-radio-label-gap-sm: 6px; --ds-radio-label-px-sm: 8px; --ds-radio-caption-px-sm: 8px; --ds-radio-icon-py-sm: 2px; --ds-radio-cont-px-sm: 8px; --ds-radio-cont-py-sm: 8px; --ds-radio-cont-r-sm: var(--ds-form-cont-r-sm); /* 12px — Figma 293:19121, aliased to form-cont-r (был 8px, баг) */ /* ── Checkbox (Check square-specific) ────────────────── */ --ds-checkbox-md-ctrl-size: 24px; --ds-checkbox-sm-ctrl-size: 20px; --ds-checkbox-md-ctrl-r: 6px; --ds-checkbox-sm-ctrl-r: 4px; /* Container radius shared with Switcher — отличается от Radio (12/8) */ --ds-form-cont-r-md: 16px; --ds-form-cont-r-sm: 12px; /* Legacy aliases — bridge compatibility */ --check-md-size: var(--ds-checkbox-md-ctrl-size); --check-sm-size: var(--ds-checkbox-sm-ctrl-size); --check-md-radius: var(--ds-checkbox-md-ctrl-r); --check-sm-radius: var(--ds-checkbox-sm-ctrl-r); --cb-cont-r-md: var(--ds-form-cont-r-md); --cb-cont-r-sm: var(--ds-form-cont-r-sm); /* Exception: graphic symbol inside filled square — не UI-icon, читаемость важнее нормы */ --check-icon-stroke: 2.5px; /* Exception: iconHelp=16px для обоих размеров — вспомогательный элемент, btn-md-icon=20px намеренно не применяется */ /* ───────────────────────────────────────────────────────────── Switch [semantic] Switcher Track geometry: new tokens (no Radio[semantic]Checkbox analog) Label layout: aliases to --ds-radio-* (identity duplicates) Container: aliases to --cb-* (cont-r) and --ds-radio-* (px[semantic]py) ────────────────────────────────────────────────────────────── */ /* Track — unique geometry (pill toggle, no Radio[semantic]Checkbox analog) */ --ds-switch-track-w-md: 40px; --ds-switch-track-w-sm: 32px; --ds-switch-track-h-md: 24px; --ds-switch-track-h-sm: 20px; --ds-switch-track-r-md: 12px; /* pill = height [semantic] 2 */ --ds-switch-track-r-sm: 10px; /* pill = height [semantic] 2 */ /* Thumb — unique geometry */ --ds-switch-thumb-md: 12px; /* dot diameter MD */ --ds-switch-thumb-sm: 10px; /* dot diameter SM */ --ds-switch-thumb-inset-md: 6px; /* left[semantic]right offset MD */ --ds-switch-thumb-inset-sm: 5px; /* left[semantic]right offset SM */ /* Label typography — line-height UNIQUE (24px vs Radio 20px = L1-Default vs L1-Compact) */ --ds-switch-md-lh: 24px; --ds-switch-sm-lh: 20px; /* Icon stroke (thumb icon, if used) */ --ds-switch-icon-stroke: 1.5px; /* Label layout — identity aliases to Radio (same role, same value) */ --ds-switch-md-fs: var(--ds-radio-md-fs); --ds-switch-sm-fs: var(--ds-radio-sm-fs); --ds-switch-md-gap: var(--ds-radio-md-gap); --ds-switch-sm-gap: var(--ds-radio-sm-gap); --ds-switch-core-gap: var(--ds-radio-core-gap); --ds-switch-label-px-md: var(--ds-radio-label-px-md); --ds-switch-label-px-sm: var(--ds-radio-label-px-sm); --ds-switch-label-gap-md: var(--ds-radio-label-gap-md); --ds-switch-label-gap-sm: var(--ds-radio-label-gap-sm); --ds-switch-caption-fs: var(--ds-radio-caption-fs); --ds-switch-caption-lh: var(--ds-radio-caption-lh); --ds-switch-caption-px-md:var(--ds-radio-caption-px-md); --ds-switch-caption-px-sm:var(--ds-radio-caption-px-sm); --ds-switch-icon-py-md: var(--ds-radio-icon-py-md); --ds-switch-icon-py-sm: var(--ds-radio-icon-py-sm); /* Container — radius через общий form-cont-r (12/16), px[semantic]py aliases Radio (10px[semantic]8px) */ --ds-switch-cont-r-md: var(--ds-form-cont-r-md); /* 16px — form-cont-r, унифицирован Radio/Checkbox/Switch (ADR-006) */ --ds-switch-cont-r-sm: var(--ds-form-cont-r-sm); /* 12px */ --ds-switch-cont-px-md: var(--ds-radio-cont-px-md); --ds-switch-cont-py-md: var(--ds-radio-cont-py-md); --ds-switch-cont-px-sm: var(--ds-radio-cont-px-sm); --ds-switch-cont-py-sm: var(--ds-radio-cont-py-sm); /* Thumb elevation shadow — separate token for dark-theme adaptation */ --ds-switch-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* ── Tabs ───────────────────────────────────────────────────────────── */ /* SM: h=32 px=8 py=8 gap=4 icon=16 fs=14 lh=16 label-lr=4 grp-gap=12 bdg-py=0 */ --ds-tab-sm-h: calc(var(--ds-comp-unit) * 8); /* 32px */ --ds-tab-sm-px: calc(var(--ds-comp-unit) * 2); /* 8px */ --ds-tab-sm-py: calc(var(--ds-comp-unit) * 2); /* 8px */ --ds-tab-sm-gap: calc(var(--ds-comp-unit) * 1); /* 4px */ --ds-tab-sm-icon: calc(var(--ds-comp-unit) * 4); /* 16px */ --ds-tab-sm-fs: var(--ds-l2-size); /* 14px */ --ds-tab-sm-lh: calc(var(--ds-comp-unit) * 4); /* 16px */ --ds-tab-sm-stroke: 1.5; /* MD: h=40 px=10 py=10 gap=6 icon=20 fs=16 lh=20 label-lr=6 grp-gap=16 bdg-py=0 */ --ds-tab-md-h: calc(var(--ds-comp-unit) * 10); /* 40px */ --ds-tab-md-px: calc(var(--ds-comp-unit) * 2.5); /* 10px */ --ds-tab-md-py: calc(var(--ds-comp-unit) * 2.5); /* 10px */ --ds-tab-md-gap: calc(var(--ds-comp-unit) * 1.5); /* 6px */ --ds-tab-md-icon: calc(var(--ds-comp-unit) * 5); /* 20px */ --ds-tab-md-fs: var(--ds-l1-size); /* 16px */ --ds-tab-md-lh: calc(var(--ds-comp-unit) * 5); /* 20px */ --ds-tab-md-stroke: 2; /* LG: h=48 px=12 py=12 gap=8 icon=24 fs=16 lh=24 label-lr=8 grp-gap=20 bdg-py=2 */ --ds-tab-lg-h: calc(var(--ds-comp-unit) * 12); /* 48px */ --ds-tab-lg-px: calc(var(--ds-comp-unit) * 3); /* 12px */ --ds-tab-lg-py: calc(var(--ds-comp-unit) * 3); /* 12px */ --ds-tab-lg-gap: calc(var(--ds-comp-unit) * 2); /* 8px */ --ds-tab-lg-icon: calc(var(--ds-comp-unit) * 6); /* 24px */ --ds-tab-lg-fs: var(--ds-l1-size); /* 16px */ --ds-tab-lg-lh: calc(var(--ds-comp-unit) * 6); /* 24px */ --ds-tab-lg-stroke: 2; /* SM: label-lr=4 grp-gap=12 bdg-py=0 */ --ds-tab-sm-label-lr: calc(var(--ds-comp-unit) * 1); /* 4px — Label wrapper padding-inline */ --ds-tab-sm-grp-gap: calc(var(--ds-comp-unit) * 3); /* 12px — gap between tabs list and more-button */ --ds-tab-sm-bdg-py: 0px; /* badge top-bottom padding */ /* MD: label-lr=6 grp-gap=16 bdg-py=0 */ --ds-tab-md-label-lr: calc(var(--ds-comp-unit) * 1.5); /* 6px */ --ds-tab-md-grp-gap: calc(var(--ds-comp-unit) * 4); /* 16px */ --ds-tab-md-bdg-py: 0px; /* LG: label-lr=8 grp-gap=20 bdg-py=2 */ --ds-tab-lg-label-lr: calc(var(--ds-comp-unit) * 2); /* 8px */ --ds-tab-lg-grp-gap: calc(var(--ds-comp-unit) * 5); /* 20px */ --ds-tab-lg-bdg-py: calc(var(--ds-comp-unit) * 0.5); /* 2px */ /* Shared */ --ds-tab-indicator-h: 2px; --ds-tab-indicator-color: var(--ds-stroke-high); /* @no-dark-mirror Selected: #222629 Light → #fff Dark — адаптивно через --ds-stroke-high, dark-override не нужен */ --ds-tab-indicator-hover-color: var(--ds-nba-border); /* @no-dark-mirror Hover: #8f969b Light → #acb3bb Dark — адаптивно через --ds-nba-border, dark-override не нужен */ --ds-tab-divider-color: var(--ds-stroke-low); /* @no-dark-mirror nb-200 — адаптивно через --ds-stroke-low, dark-override не нужен */ /* ── Spinner ──────────────────────────────────── */ --ds-spinner-sm-size: 16px; --ds-spinner-md-size: 20px; --ds-spinner-lg-size: 24px; --ds-spinner-sm-stroke: 1.5px; --ds-spinner-md-stroke: 2px; --ds-spinner-lg-stroke: 2px; /* intentional plateau md=lg: 2px = минимальный читаемый stroke; lg не растёт — конструктивный предел */ --ds-spinner-duration: 0.7s; --ds-spinner-track: var(--ds-nb-200); --ds-spinner-fill: var(--ds-brand-500); /* ── Progress Bar ─────────────────────────────── */ --ds-progress-sm-h: 2px; /* L1 dim-25 → SM track height */ --ds-progress-md-h: 4px; /* L1 dim-50 → MD track height */ --ds-progress-sm-gap: 2px; /* bar ↔ label gap SM */ --ds-progress-md-gap: 4px; /* bar ↔ label gap MD */ --ds-progress-track: var(--ds-nba-30); /* unfilled track — alpha, adapts to bg */ --ds-progress-fill-none: var(--ds-neutral-fill); /* determinate default (flips in dark) */ --ds-progress-fill-info: var(--ds-surface-info-accent); /* #5475F8 */ --ds-progress-fill-positive: var(--ds-pos-default); /* #2c9205 */ --ds-progress-fill-warning: var(--ds-warn-fill); /* #F4A800 */ --ds-progress-fill-negative: var(--ds-neg-hover); /* #d70000 */ --ds-progress-fill-indeterminate: var(--ds-surface-info-accent); --ds-progress-indeterminate-dur: 1.5s; /* ── Tooltip ──────────────────────────────────── */ --ds-tooltip-bg: var(--ds-nb-900); --ds-tooltip-text: var(--ds-nb-0); --ds-tooltip-r: var(--ds-radius-sm); --ds-tooltip-px: 8px; --ds-tooltip-py: 4px; --ds-tooltip-max-w: 200px; --ds-tooltip-offset: 6px; --ds-tooltip-arrow: 6px; --ds-tooltip-dur: var(--ds-dur-2); /* ── Notification ─────────────────────────────── */ --ds-notification-bg: var(--ds-surface-0); --ds-notification-text: var(--ds-text-primary); --ds-notification-r: var(--ds-radius-md); --ds-notification-px: 16px; --ds-notification-py: 12px; --ds-notification-gap: 8px; --ds-notification-shadow: var(--ds-shadow-md); --ds-notification-min-w: 300px; --ds-notification-max-w: 420px; --ds-notification-z: 9000; --ds-notification-bar-w: 4px; --ds-notification-offset: 16px; --ds-notification-icon-sz: 16px; --ds-notification-close-sz: 20px; /* ── Modal ────────────────────────────────────────────────────────────────── Consumers: site/preview/modal.html + src/components/Modal/Modal.tsx ─────────────────────────────────────────────────────────────────────── */ --ds-modal-sm-w: 400px; --ds-modal-md-w: 560px; --ds-modal-lg-w: 800px; --ds-modal-padding: 24px; --ds-modal-r: var(--ds-radius-lg); --ds-modal-shadow: var(--ds-shadow-xl); --ds-modal-z: 900; --ds-modal-backdrop-bg: rgba(0, 0, 0, 0.40); --ds-modal-bg: var(--ds-surface-0); --ds-modal-title-fs: 18px; --ds-modal-title-fw: 600; --ds-modal-title-lh: 1.4; --ds-modal-dur: 200ms; /* ── Combobox dropdown (field reuses --ds-input-* tokens) ───────────────── Consumers: site/preview/combobox.html + src/components/Combobox/Combobox.tsx ─────────────────────────────────────────────────────────────────────── */ --ds-combobox-dropdown-r: var(--ds-radius-md); --ds-combobox-dropdown-shadow: var(--ds-shadow-lg); --ds-combobox-dropdown-z: 850; /* Elevation aliases — Float (md) and Overlay (lg) components */ --ds-tooltip-shadow: var(--ds-shadow-md); --ds-popover-shadow: var(--ds-shadow-md); --ds-select-dropdown-shadow: var(--ds-shadow-lg); --ds-combobox-dropdown-bg: var(--ds-surface-0); --ds-combobox-dropdown-border: var(--ds-border); --ds-combobox-dropdown-py: 4px; --ds-combobox-item-sm-h: var(--ds-input-sm-h); --ds-combobox-item-md-h: var(--ds-input-md-h); --ds-combobox-item-lg-h: var(--ds-input-lg-h); --ds-combobox-item-sm-px: var(--ds-input-sm-px); --ds-combobox-item-md-px: var(--ds-input-md-px); --ds-combobox-item-lg-px: var(--ds-input-lg-px); --ds-combobox-dur: 200ms; } /* ══════════════════════════════════════════════════════════════════════ THEME MODES Global: [data-theme="dark"] на — переключается Select Control Local: .theme-invert на блоке/секции — акцент, адаптируется к теме Fallback: @media prefers-color-scheme при отсутствии data-theme ══════════════════════════════════════════════════════════════════════ */ /* ── Light Invert — локальная инверсия внутри Light ──────────────────── */ .theme-invert { --ds-text-primary: #FFFFFF; --ds-text-secondary: #E9EDF2; --ds-text-tertiary: #D0D7DE; --ds-text-invert: #222629; --ds-surface: var(--ds-nb-900); --ds-surface-muted: var(--ds-neutral-fill); --ds-surface-accent: var(--ds-nb-0); --ds-page-bg: var(--ds-nb-700); --ds-border: var(--ds-nba-border); --ds-border-strong: var(--ds-nb-500); --ds-sb-low: #8f969b; --ds-sb-mid: #d0d7de; --ds-sb-high: #ffffff; --ds-stroke-low: var(--ds-sb-low); /* re-alias в scope .theme-invert (var() резолвится локально) */ --ds-stroke-mid: var(--ds-sb-mid); --ds-stroke-high: var(--ds-sb-high); /* Neutral solid inverts to white in dark section — text must flip */ --ds-neutral-fill: #FFFFFF; /* Semantic soft fills & text — Light Invert palette (Light Invert.tokens.json) */ --ds-info-50: #1D2D7D; --ds-pos-50: #0F4101; --ds-warn-50: #592E06; --ds-info-700: #AFC4FF; --ds-pos-500: #A4D19B; --ds-warn-700: #FED049; --ds-field-icon-btn-hover-bg: var(--ds-nba-40); /* Static/Text — Light Invert overrides (Static/Text/[semantic]/Accent из Light Invert.tokens.json) */ --ds-surface-info-text: #AFC4FF; /* Static/Text/Info/Accent · Light Invert */ --ds-surface-pos-text: #A4D19B; /* Static/Text/Positive/Accent · Light Invert */ --ds-surface-neg-text: #FF9585; /* Static/Text/Negative/Accent · Light Invert */ } /* ── Dark — глобальная тёмная тема ───────────────────────────────────── */ [data-theme="dark"] { --ds-text-primary: var(--ds-nb-0); --ds-text-secondary: var(--ds-nt-700); --ds-text-tertiary: var(--ds-nba-border-base); --ds-text-invert: var(--ds-nt-bg); --ds-surface: var(--ds-nb-950); --ds-surface-muted: var(--ds-nb-800); --ds-surface-accent: var(--ds-nb-0); --ds-page-bg: var(--ds-nb-800); --ds-border: var(--ds-nb-600); --ds-border-strong: var(--ds-nb-500); --ds-sb-low: #676d71; --ds-sb-mid: #acb3bb; --ds-sb-high: #ffffff; /* NT ramp — dark overrides (warm neutral text, APCA-tuned for dark bg) */ --ds-nt-700: #DEE4EA; /* text-secondary dark */ --ds-nt-400: #B0B2B5; /* stroke-neutral-hover dark */ --ds-nt-bg: #1C2023; /* dark base: text-invert + surface-0 */ --ds-nt-100: #2c3033; /* Static/Surface/Neutral/2-Medium dark — badge-counter neutral surface */ /* Dark palette — deep surface steps (darker than existing ramp, dark-mode only) */ --ds-brand-deep-low: #290C09; /* surface-brand-low dark */ --ds-brand-deep-mid: #450D09; /* surface-brand-mid dark */ --ds-info-deep-low: #0D152D; /* surface-info-low dark */ --ds-info-deep-mid: #15214E; /* surface-info-mid dark */ --ds-pos-deep-low: #091C05; /* surface-pos-low dark */ --ds-pos-deep-mid: #082E00; /* surface-pos-mid dark */ --ds-warn-deep-low: #2F1704; /* surface-warn-low dark */ --ds-warn-deep-mid: #3A1C03; /* surface-warn-mid dark */ /* Semantic surfaces · Dark (Figma Static/Surface значения) */ --ds-surface-brand-low: var(--ds-brand-deep-low); --ds-surface-brand-mid: var(--ds-brand-deep-mid); --ds-surface-brand-accent: var(--ds-brand-500); --ds-surface-info-low: var(--ds-info-deep-low); --ds-surface-info-mid: var(--ds-info-deep-mid); --ds-surface-info-accent: var(--ds-info-500); --ds-surface-pos-low: var(--ds-pos-deep-low); --ds-surface-pos-mid: var(--ds-pos-deep-mid); --ds-surface-pos-accent: var(--ds-pos-default); --ds-surface-warn-low: var(--ds-warn-deep-low); --ds-surface-warn-mid: var(--ds-warn-deep-mid); --ds-surface-warn-accent: var(--ds-warn-hover); /* Static/Surface/Warning/Accent Dark · #D48140 (= dark warn-hover) */ --ds-surface-neg-low: var(--ds-nb-800); --ds-surface-neg-mid: var(--ds-nb-700); --ds-surface-neg-accent: var(--ds-neg-default); /* Static/Text — Dark overrides (Static/Text/[semantic]/Accent из Dark.tokens.json) */ --ds-surface-info-text: var(--ds-info-700); /* Static/Text/Info/Accent · Dark · #BBCDFD */ --ds-surface-pos-text: var(--ds-pos-500); /* Static/Text/Positive/Accent · Dark · #B3D9AA */ --ds-surface-neg-text: var(--ds-neg-500); /* Static/Text/Negative/Accent · Dark · #FE9485 */ /* ── Component color tokens — dark mode inversions ────────────────────── Source: Dark.tokens.json Fill/* / Text/* / Stroke/* groups */ /* Neutral fill inverts: solid components use white fill with dark text */ --ds-neutral-fill: #FFFFFF; --ds-neutral-fill-hover: #DEE4EA; --ds-neutral-fill-pressed: #ACB3BB; /* Neutral-Blue alpha — base shifts #AEB5BD → #91989D; α увеличены для тёмного фона */ --ds-nba-fill-base: #91989D; --ds-nba-border-base: #ACB3BB; --ds-nba-15: rgb(from var(--ds-nba-fill-base) r g b / 0.20); /* elevated vs light: тёмный фон */ --ds-nba-20: rgb(from var(--ds-nba-fill-base) r g b / 0.20); --ds-nba-30: rgb(from var(--ds-nba-fill-base) r g b / 0.40); --ds-nba-40: rgb(from var(--ds-nba-fill-base) r g b / 0.60); --ds-nba-50: rgb(from var(--ds-nba-fill-base) r g b / 0.80); /* Outline Active fill dark */ --ds-nba-border: var(--ds-nba-border-base); --ds-nba-border-disabled: rgb(from var(--ds-nba-fill-base) r g b / 0.60); --ds-disabled-text: var(--ds-nba-fill-base); --ds-icon-disable-neutral: var(--ds-nba-fill-base); /* Иконка-индикатор слева в поле — всегда серая (dark) */ --ds-field-icon-btn-hover-bg: var(--ds-nba-40); /* nba-20 too weak on dark bg */ /* Brand palette — dark adjustments */ --ds-brand-50: #600F09; --ds-brand-100: #900806; --ds-brand-500: #EF3E31; --ds-brand-700: #F96453; --ds-brand-hover: #F96453; --ds-brand-pressed: #CC1811; --ds-brand-disabled: rgba(239,62,49,0.40); /* Info palette — dark */ --ds-info-50: #1C2B6C; --ds-info-100: #293EA4; --ds-info-500: #5679FD; --ds-info-700: #BBCDFD; /* text on dark info bg */ --ds-info-800: #5679FD; /* focus ring = solid */ /* Positive palette — dark */ --ds-pos-50: #113906; --ds-pos-100: #185705; --ds-pos-500: #B3D9AA; /* text on dark pos bg */ --ds-pos-700: #D7E7D4; --ds-pos-default: #30960D; --ds-pos-hover: #57A745; --ds-pos-pressed: #247C02; /* Negative palette — dark */ --ds-neg-50: rgba(145,152,157,0.40); /* Negative Soft bg dark = nba-30 dark · neutral chrome */ --ds-neg-100: rgba(145,152,157,0.60); /* Negative Soft Hover bg dark = nba-40 dark · neutral chrome */ --ds-neg-500: #FE9485; /* text on dark neg bg */ --ds-neg-700: #FFBFB5; --ds-neg-default: #CC1811; --ds-neg-hover: #900806; --ds-neg-pressed: #600F09; /* Warning palette — dark */ --ds-warn-50: #4B2706; --ds-warn-100: #733D0D; --ds-warn-500: #C26D25; /* text in soft/outline variants */ --ds-warn-700: #F4C873; /* text on dark warn bg */ --ds-warn-fill: #C26D25; /* solid fill (equals warn-500 in dark) */ --ds-warn-solid-text: #FFFFFF; /* text on dark warning solid bg */ /* Soft/Outline text + stroke — dark overrides */ --ds-info-soft-text: #BBCDFD; /* Text/Info/Soft+Outline/Default dark (= info-700) */ --ds-pos-soft-text: #B3D9AA; /* Text/Positive/Soft+Outline/Default dark (= pos-500) */ --ds-warn-soft-text: #F4C873; /* Text/Warning/Soft+Outline/Default dark (= warn-700) */ --ds-brand-soft-text: #FFBFB5; /* Text/Brand/Soft+Outline/Default dark */ --ds-neg-soft-text: #FE9485; /* Text/Negative/Soft+Outline/Default dark */ --ds-info-stroke: #3F5CE6; /* Stroke/Info/Default dark */ --ds-pos-stroke: #247C02; /* Stroke/Positive/Default dark */ --ds-warn-stroke: #A05818; /* Stroke/Warning/Default dark */ --ds-brand-stroke: #CC1811; /* Stroke/Brand/Default dark */ --ds-info-outline-active: #3F5CE6; /* Fill/Info/Outline/Active dark */ /* ── Component state extensions — dark overrides ──────────────────── */ --ds-brand-200: #CC1811; --ds-brand-stroke-pressed: #FE9485; --ds-info-hover: #7191F7; --ds-info-pressed: #5679FD; /* Fill/Info/Solid/Pressed dark */ --ds-info-soft-hover: #293EA4; --ds-info-soft-pressed: #3F5CE6; --ds-info-stroke-pressed: #96B0F9; --ds-info-text-pressed: #DCE4F9; --ds-pos-soft-hover: #185705; --ds-pos-soft-pressed: #247C02; --ds-pos-stroke-pressed: #88BF7C; --ds-warn-hover: #D48140; --ds-warn-pressed: #A05818; --ds-warn-soft-hover: #733D0D; --ds-warn-soft-pressed: #A05818; --ds-warn-stroke-pressed: #EAA31B; --ds-stroke-neutral-hover: var(--ds-nt-400); --ds-disabled-fill: var(--ds-nba-fill-base); --ds-surface-0: var(--ds-nt-bg); --ds-chip-info-bg: var(--ds-info-50); /* Neutral-Blue ramp — dark inversions (light near-white → dark near-black) */ --ds-nb-50: #111827; /* light #f9fafb → dark nb-900 */ --ds-nb-100: #1f2937; /* light #f3f4f6 → dark nb-800 */ --ds-nb-200: #374151; /* light #e5e7eb → dark nb-700 */ --ds-nb-300: #4b5563; /* light #d1d5db → dark nb-600 */ /* ── Elevation — dark overrides (glow pattern: white alpha ring + ambient) ── */ --ds-shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(255, 255, 255, 0.06); --ds-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 2px 10px rgba(255, 255, 255, 0.09); --ds-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 20px rgba(255, 255, 255, 0.12); --ds-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 8px 32px rgba(255, 255, 255, 0.15); --ds-shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 16px 56px rgba(255, 255, 255, 0.18); /* Focus ring — explicit dark override (surface-0 + info-800 both shift in dark) */ --ds-focus-ring: 0 0 0 var(--ds-focus-offset) var(--ds-surface-0), 0 0 0 calc(var(--ds-focus-offset) + var(--ds-focus-width)) var(--ds-info-800); /* Spinner dark overrides */ --ds-spinner-track: var(--ds-nb-600); --ds-spinner-fill: var(--ds-brand-500); /* Switch thumb — dark mode needs stronger shadow */ --ds-switch-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); /* Tooltip dark overrides */ --ds-tooltip-bg: var(--ds-nb-100); --ds-tooltip-text: var(--ds-nb-950); /* Notification dark overrides */ --ds-notification-bg: var(--ds-nb-700); --ds-notification-text: var(--ds-nb-50); /* Progress Bar dark overrides */ --ds-progress-fill-none: var(--ds-nb-0); /* validation=none fill flips to white on dark bg */ /* Calendar — nba-20 hover invisible in dark → nba-40 */ --ds-cal-day-bg-hover: var(--ds-nba-40); --ds-cal-picker-bg-hover: var(--ds-nba-40); --ds-cal-preset-bg-hover: var(--ds-nba-40); --ds-cal-status-orange: #e07b30; /* @l0-exempt L0 status color dark */ --ds-cal-status-yellow: #d4b400; /* @l0-exempt L0 status color dark */ --ds-cal-status-purple: #9c6dff; /* @l0-exempt L0 status color dark */ } /* System preference fallback (первый визит, data-theme не задан) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ds-text-primary: #FFFFFF; --ds-text-secondary: #DEE4EA; --ds-text-tertiary: #ACB3BB; --ds-text-invert: #1C2023; --ds-surface: var(--ds-nb-950); --ds-surface-muted: var(--ds-nb-800); --ds-surface-accent: var(--ds-nb-0); --ds-page-bg: var(--ds-nb-800); --ds-border: var(--ds-nb-600); --ds-border-strong: var(--ds-nb-500); --ds-sb-low: #676d71; --ds-sb-mid: #acb3bb; --ds-sb-high: #ffffff; --ds-surface-brand-low: #290C09; --ds-surface-brand-mid: #450D09; --ds-surface-brand-accent: #EF3E31; --ds-surface-info-low: #0D152D; --ds-surface-info-mid: #15214E; --ds-surface-info-accent: #5679FD; --ds-surface-pos-low: #091C05; --ds-surface-pos-mid: #082E00; --ds-surface-pos-accent: #30960D; --ds-surface-warn-low: #2F1704; --ds-surface-warn-mid: #3A1C03; --ds-surface-warn-accent: #D48140; --ds-surface-neg-low: var(--ds-nb-800); --ds-surface-neg-mid: var(--ds-nb-700); --ds-surface-neg-accent: #CC1811; /* Static/Text — @media dark fallback (зеркало [data-theme=dark]) */ --ds-surface-info-text: #BBCDFD; --ds-surface-pos-text: #B3D9AA; --ds-surface-neg-text: #FE9485; /* Component tokens — same as [data-theme="dark"] above */ --ds-neutral-fill: #FFFFFF; --ds-neutral-fill-hover: #DEE4EA; --ds-neutral-fill-pressed: #ACB3BB; --ds-nba-fill-base: #91989D; --ds-nba-border-base: #ACB3BB; --ds-nba-15: rgb(from var(--ds-nba-fill-base) r g b / 0.20); --ds-nba-20: rgb(from var(--ds-nba-fill-base) r g b / 0.20); --ds-nba-30: rgb(from var(--ds-nba-fill-base) r g b / 0.40); --ds-nba-40: rgb(from var(--ds-nba-fill-base) r g b / 0.60); --ds-nba-50: rgb(from var(--ds-nba-fill-base) r g b / 0.80); /* Outline Active fill dark */ --ds-nba-border: var(--ds-nba-border-base); --ds-nba-border-disabled: rgb(from var(--ds-nba-fill-base) r g b / 0.60); --ds-disabled-text: var(--ds-nba-fill-base); --ds-icon-disable-neutral: var(--ds-nba-fill-base); /* Иконка-индикатор слева в поле — всегда серая (dark) */ --ds-field-icon-btn-hover-bg: var(--ds-nba-40); --ds-brand-50: #600F09; --ds-brand-100: #900806; --ds-brand-500: #EF3E31; --ds-brand-700: #F96453; --ds-brand-hover: #F96453; --ds-brand-pressed: #CC1811; --ds-brand-disabled: rgba(239,62,49,0.40); --ds-info-50: #1C2B6C; --ds-info-100: #293EA4; --ds-info-500: #5679FD; --ds-info-700: #BBCDFD; --ds-info-800: #5679FD; --ds-pos-50: #113906; --ds-pos-100: #185705; --ds-pos-500: #B3D9AA; --ds-pos-700: #D7E7D4; --ds-pos-default: #30960D; --ds-pos-hover: #57A745; --ds-pos-pressed: #247C02; --ds-neg-50: rgba(145,152,157,0.40); /* Negative Soft bg dark = nba-30 dark · neutral chrome */ --ds-neg-100: rgba(145,152,157,0.60); /* Negative Soft Hover bg dark = nba-40 dark · neutral chrome */ --ds-neg-500: #FE9485; --ds-neg-700: #FFBFB5; --ds-neg-default: #CC1811; --ds-neg-hover: #900806; --ds-neg-pressed: #600F09; --ds-warn-50: #4B2706; --ds-warn-100: #733D0D; --ds-warn-500: #C26D25; --ds-warn-700: #F4C873; --ds-warn-fill: #C26D25; --ds-warn-solid-text: #FFFFFF; --ds-info-soft-text: #BBCDFD; --ds-pos-soft-text: #B3D9AA; --ds-warn-soft-text: #F4C873; --ds-brand-soft-text: #FFBFB5; --ds-neg-soft-text: #FE9485; --ds-info-stroke: #3F5CE6; --ds-pos-stroke: #247C02; --ds-warn-stroke: #A05818; --ds-brand-stroke: #CC1811; --ds-info-outline-active: #3F5CE6; --ds-brand-200: #CC1811; --ds-brand-stroke-pressed: #FE9485; --ds-info-hover: #7191F7; --ds-info-pressed: #5679FD; /* Fill/Info/Solid/Pressed B2B dark */ --ds-info-soft-hover: #293EA4; --ds-info-soft-pressed: #3F5CE6; --ds-info-stroke-pressed: #96B0F9; --ds-info-text-pressed: #DCE4F9; --ds-pos-soft-hover: #185705; --ds-pos-soft-pressed: #247C02; --ds-pos-stroke-pressed: #88BF7C; --ds-warn-hover: #D48140; --ds-warn-pressed: #A05818; --ds-warn-soft-hover: #733D0D; --ds-warn-soft-pressed: #A05818; --ds-warn-stroke-pressed: #EAA31B; --ds-stroke-neutral-hover: #B0B2B5; --ds-disabled-fill: #91989D; --ds-surface-0: #1C2023; --ds-chip-info-bg: #1C2B6C; /* Neutral-Blue ramp — dark inversions (light near-white → dark near-black) */ --ds-nb-50: #111827; /* light #f9fafb → dark nb-900 */ --ds-nb-100: #1f2937; /* light #f3f4f6 → dark nb-800 */ --ds-nb-200: #374151; /* light #e5e7eb → dark nb-700 */ --ds-nb-300: #4b5563; /* light #d1d5db → dark nb-600 */ /* Focus ring — explicit dark override (surface-0 + info-800 both shift in dark) */ --ds-focus-ring: 0 0 0 var(--ds-focus-offset) var(--ds-surface-0), 0 0 0 calc(var(--ds-focus-offset) + var(--ds-focus-width)) var(--ds-info-800); /* Progress Bar dark overrides */ --ds-progress-fill-none: #FFFFFF; /* Calendar — nba-20 hover invisible in dark → nba-40 */ --ds-cal-day-bg-hover: var(--ds-nba-40); --ds-cal-picker-bg-hover: var(--ds-nba-40); --ds-cal-preset-bg-hover: var(--ds-nba-40); --ds-cal-status-orange: #e07b30; /* @l0-exempt L0 status color dark */ --ds-cal-status-yellow: #d4b400; /* @l0-exempt L0 status color dark */ --ds-cal-status-purple: #9c6dff; /* @l0-exempt L0 status color dark */ } } /* ── Dark Invert — локальная инверсия внутри Dark ────────────────────── */ [data-theme="dark"] .theme-invert { --ds-text-primary: #1C2023; --ds-text-secondary: #3F4347; --ds-text-tertiary: #5B6063; --ds-text-invert: #FFFFFF; --ds-surface: var(--ds-nb-0); --ds-surface-muted: var(--ds-nb-200); --ds-surface-accent: var(--ds-nb-800); --ds-page-bg: var(--ds-nb-100); --ds-border: var(--ds-nb-300); --ds-border-strong: var(--ds-nb-400); --ds-sb-low: #b0b2b5; --ds-sb-mid: #7d848a; --ds-sb-high: #1c2023; --ds-stroke-low: var(--ds-sb-low); /* re-alias в scope .theme-invert */ --ds-stroke-mid: var(--ds-sb-mid); --ds-stroke-high: var(--ds-sb-high); /* Neutral solid inverts back to dark inside Dark Invert */ --ds-neutral-fill: #1C2023; /* Semantic soft fills & text — Dark Invert palette (Dark Invert.tokens.json) */ --ds-info-50: #DCE4F9; --ds-pos-50: #D7E7D4; --ds-warn-50: #F5E2AE; --ds-info-700: #3F5CE6; --ds-pos-500: #1D6803; --ds-warn-700: #8B4A10; /* Static/Text — Dark Invert overrides (Static/Text/[semantic]/Accent из Dark Invert.tokens.json) */ --ds-surface-info-text: #3F5CE6; /* Static/Text/Info/Accent · Dark Invert */ --ds-surface-pos-text: #247C02; /* Static/Text/Positive/Accent · Dark Invert */ --ds-surface-neg-text: #CC1811; /* Static/Text/Negative/Accent · Dark Invert */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-invert { --ds-text-primary: #1C2023; --ds-text-secondary: #3F4347; --ds-text-tertiary: #5B6063; --ds-text-invert: #FFFFFF; --ds-surface: var(--ds-nb-0); --ds-surface-muted: var(--ds-nb-200); --ds-surface-accent: var(--ds-nb-800); --ds-page-bg: var(--ds-nb-100); --ds-border: var(--ds-nb-300); --ds-border-strong: var(--ds-nb-400); --ds-sb-low: #b0b2b5; --ds-sb-mid: #7d848a; --ds-sb-high: #1c2023; --ds-stroke-low: var(--ds-sb-low); /* re-alias в scope .theme-invert */ --ds-stroke-mid: var(--ds-sb-mid); --ds-stroke-high: var(--ds-sb-high); --ds-neutral-fill: #1C2023; --ds-info-50: #DCE4F9; --ds-pos-50: #D7E7D4; --ds-warn-50: #F5E2AE; --ds-info-700: #3F5CE6; --ds-pos-500: #1D6803; --ds-warn-700: #8B4A10; /* Static/Text — @media dark invert fallback (зеркало [data-theme=dark] .theme-invert) */ --ds-surface-info-text: #3F5CE6; --ds-surface-pos-text: #247C02; --ds-surface-neg-text: #CC1811; } } /* ── Calendar ───────────────────────────────────────────────────────────── Sourced from Figma ZIP: MD.tokens.json / SM.tokens.json */ --ds-cal-date-size-md: 40px; --ds-cal-date-size-sm: 32px; --ds-cal-label-px-md: 8px; --ds-cal-label-px-sm: 6px; --ds-cal-text-size-md: 16px; --ds-cal-text-lh-md: 20px; --ds-cal-text-size-sm: 14px; --ds-cal-text-lh-sm: 16px; --ds-cal-meeting-size-md: 6px; --ds-cal-meeting-size-sm: 4px; --ds-cal-meeting-r: 999px; --ds-cal-part-height-md: 40px; --ds-cal-part-px-md: 16px; /* Figma img/34: MD outer px = 16 */ --ds-cal-part-py-md: 4px; /* Figma img/34: 4px top/bottom padding inside sections */ --ds-cal-part-r-md: 12px; --ds-cal-part-height-sm: 32px; --ds-cal-part-px-sm: 12px; /* Figma img/33: SM outer px = 12 */ --ds-cal-part-py-sm: 4px; /* Figma img/33: 4px top/bottom padding inside sections */ --ds-cal-part-r-sm: 8px; --ds-cal-footer-gap-md: 12px; --ds-cal-footer-gap-sm: 8px; --ds-cal-group-gap: 6px; --ds-cal-width-md: 320px; --ds-cal-width-sm: 280px; --ds-cal-dropdown-px-md: 16px; /* Figma img/34: MD outer px = 16 */ --ds-cal-dropdown-py-md: 12px; --ds-cal-dropdown-r-md: 16px; --ds-cal-dropdown-px-sm: 12px; /* Figma img/33: SM outer px = 12 */ --ds-cal-dropdown-py-sm: 10px; --ds-cal-dropdown-r-sm: 12px; /* Calendar — Color tokens (Light base) */ --ds-cal-day-text: var(--ds-text-primary); --ds-cal-day-text-adjacent: var(--ds-text-tertiary); --ds-cal-day-text-disabled: var(--ds-disabled-text); --ds-cal-day-text-weekend: var(--ds-neg-default); --ds-cal-day-text-active: var(--ds-text-invert); --ds-cal-day-bg-hover: var(--ds-nba-20); --ds-cal-day-bg-active: var(--ds-neutral-fill); --ds-cal-day-bg-active-hover:var(--ds-neutral-fill-hover); --ds-cal-day-bg-in-range: var(--ds-nba-15); --ds-cal-day-border-today: 1.5px solid var(--ds-nba-border); --ds-cal-picker-bg-hover: var(--ds-nba-20); --ds-cal-picker-bg-active: var(--ds-neutral-fill); --ds-cal-picker-bg-active-hover: var(--ds-neutral-fill-hover); --ds-cal-nav-color: var(--ds-info-500); --ds-cal-nav-color-hover: var(--ds-info-700); --ds-cal-event-dot: var(--ds-info-500); --ds-cal-bg: var(--ds-surface-0); --ds-cal-shadow: var(--ds-shadow-lg); --ds-cal-status-red: var(--ds-neg-default); --ds-cal-status-orange: #d4620a; /* @l0-exempt L0 status color */ --ds-cal-status-yellow: #b59900; /* @l0-exempt L0 status color */ --ds-cal-status-green: var(--ds-pos-default); --ds-cal-status-blue: var(--ds-info-500); --ds-cal-status-purple: #7c4dcc; /* @l0-exempt L0 status color */ --ds-cal-preset-bg-hover: var(--ds-nba-20); --ds-cal-preset-border: var(--ds-nba-border); /* ── DateTimePicker ──────────────────────────────────────────────────── */ --ds-dp-labelin-h: 48px; --ds-dp-labelin-r: 12px; --ds-dp-labelin-px: 12px; --ds-dp-label-float-fs: var(--ds-field-caption-fs); --ds-dp-label-float-lh: var(--ds-field-caption-lh); --ds-dp-labelin-gap: calc(var(--ds-comp-unit) * 0.5); --ds-dp-time-popup-min-w: 200px; /* ── Density scaling ────────────────────────────────────────────────────── Применяется к любому элементу с data-density — переопределяет --ds-comp-unit напрямую. Все компонентные размеры (высота, паддинги, gap, радиусы, иконки) масштабируются автоматически. Типографика НЕ масштабируется. compact: 3.5px → SM×8=28px ✓ · MD×10=35px · LG×12=42px (sub-pixel, OK) spacious: 4.5px → SM×8=36px ✓ · MD×10=45px · LG×12=54px (sub-pixel, OK) */ [data-density="compact"] { --ds-comp-unit: 3.5px; } [data-density="comfortable"] { --ds-comp-unit: 4px; } [data-density="spacious"] { --ds-comp-unit: 4.5px; }