/* ════════════════════════════════════════════════════════════════ SF UI — design tokens ──────────────────────────────────────────────────────────── Источник истины — Figma file `SF-UI` (3x0yiBvUSMMkl15F1UVTtU), UI Kit page `2405:26773`. Каждое значение здесь — либо точное значение из секции «These styles are contained in the design: …» ответа MCP get_design_context, либо измерение размеров компонента из того же ответа. Изменяешь токен — каждая страница, которая подключает этот файл, автоматически подхватывает обновление. ──────────────────────────────────────────────────────────── */ /* ─── Webfonts ────────────────────────────────────────────────── Ubuntu / Oswald / Material Icons подгружаются через прямой в каждой страницы (cards/, uikit/). @import в CSS-файле ненадёжно работает на production (GH Pages иногда не подтягивает шрифт-stylesheets через @import). На случай fallback'a — токены ниже работают и без подгруженных шрифтов (font-family пары имеют system-стек как backup). ──────────────────────────────────────────────────────────── */ :root { /* ────────────────────────────────────────────────────────── 1. PALETTE — 14 named colours ────────────────────────────────────────────────────────── */ --sf-color-white: #FFFFFF; /* White (text on dark) */ --sf-color-beau-blue: #C4D1D9; /* Beau Blue (secondary icons / borders) */ --sf-color-roman-silver: #88919F; /* Roman Silver (placeholder text, captions) */ --sf-color-black-coral: #465B68; /* Black Coral (inactive icons, hover borders) */ --sf-color-black-coral-50: rgba(70, 91, 104, 0.5); --sf-color-bg-gray: #1B1C21; /* Background Gray (badge contrast / dark surface) */ --sf-color-black: #07080E; /* Black (deepest dark, tooltip bg) */ --sf-color-green-light: #34C5B5; /* Green Light (active / primary highlight) */ --sf-color-green-dark: #118570; /* Green Dark (primary buttons, accent) */ --sf-color-green-outline: #02AB55; /* Green outline (tag outline default) */ --sf-color-bike-blue: #4B6CFF; /* Bike Blue (link-ish, informational) [TODO: verify name] */ --sf-color-midnight: #712170; /* Midnight (secondary button colour) */ --sf-color-error: #FF5A73; /* Error (input error state) */ --sf-color-warning: #FFB800; /* Warning (OLR badge) */ --sf-color-info: #00FFD1; /* Info / OCP tech badge */ /* Tone alphas (для Tone Tag / Tag Filled / active menu / outline hover) */ --sf-color-tone-positive: rgba(17, 133, 112, 0.5); /* Positive tone tag bg */ --sf-color-tone-negative: rgba(206, 44, 68, 0.5); /* Negative tone tag bg (Wine 50%) */ --sf-color-tone-wine: rgba(206, 44, 68, 1); /* Wine base (для filled tags) */ --sf-color-menu-active-bg: rgba(17, 133, 112, 0.25); /* Active menu item bg */ --sf-color-outline-hover: rgba(17, 133, 112, 0.2); /* Outline button hover bg */ --sf-color-overlay-light: rgba(255, 255, 255, 0.1); /* Hover-on-dark overlay */ --sf-color-overlay-dark: rgba(7, 8, 14, 0.5); /* Details tag bg / glass dark */ --sf-color-link-underline: rgba(255, 255, 255, 0.5); /* Text link underline */ /* App surfaces (эмпирические — берутся из реальных скринов портала, не из named styles) */ --sf-color-app-bg: #0F1014; --sf-color-sidebar-bg: #0C0D11; --sf-color-panel-bg: #1B1C21; --sf-color-highlight-yellow: #F5C518; /* «Show more» подсветка слова */ /* ────────────────────────────────────────────────────────── 2. TYPOGRAPHY — Ubuntu + Material Icons (+ Oswald only for Ring/Stage) ────────────────────────────────────────────────────────── */ --sf-font-ubuntu: 'Ubuntu', ui-sans-serif, system-ui, -apple-system, sans-serif; --sf-font-oswald: 'Oswald', 'Ubuntu', sans-serif; /* только Ring/Stage */ /* Material Icons — 5 вариантов (filled — дефолт; остальные — стилевые альтернативы) */ --sf-font-icons: 'Material Icons', sans-serif; --sf-font-icons-outlined: 'Material Icons Outlined', sans-serif; --sf-font-icons-round: 'Material Icons Round', sans-serif; --sf-font-icons-sharp: 'Material Icons Sharp', sans-serif; --sf-font-icons-twotone: 'Material Icons Two Tone', sans-serif; /* Text style tokens — пары family/size/weight/line-height из Figma */ /* H3 — Ubuntu Regular 24 / 1.3 — News headers, page section heads */ --sf-text-h3-size: 24px; --sf-text-h3-weight: 400; --sf-text-h3-lh: 1.3; /* H5 — Ubuntu Regular 18 / 1.2 — Card headlines, table-row name */ --sf-text-h5-size: 18px; --sf-text-h5-weight: 400; --sf-text-h5-lh: 1.2; /* Btn 18 — Ubuntu Medium 18 / 1.0 — Large button label */ --sf-text-btn18-size: 18px; --sf-text-btn18-weight: 500; --sf-text-btn18-lh: 1.0; /* Btn 16 (Components/Btn 16) — Ubuntu Medium 16 / 1.0 — Medium button label */ --sf-text-btn16-size: 16px; --sf-text-btn16-weight: 500; --sf-text-btn16-lh: 1.0; /* Btn 14 — Ubuntu Medium 14 / 1.0 — Small button label */ --sf-text-btn14-size: 14px; --sf-text-btn14-weight: 500; --sf-text-btn14-lh: 1.0; /* Body 1 — Ubuntu Regular 16 / 1.6 — Основной body */ --sf-text-body1-size: 16px; --sf-text-body1-weight: 400; --sf-text-body1-lh: 1.6; /* Body 2 — Ubuntu Regular 14 / 1.6 — Secondary body, text link */ --sf-text-body2-size: 14px; --sf-text-body2-weight: 400; --sf-text-body2-lh: 1.6; /* Text Input (Components/Text Input) — Ubuntu Regular 14 / 1.2 — Fields, menu items */ --sf-text-input-size: 14px; --sf-text-input-weight: 400; --sf-text-input-lh: 1.2; /* Tags (Components/Tags) — Ubuntu Light 13 / 1.0 — Все tag-лейблы */ --sf-text-tags-size: 13px; --sf-text-tags-weight: 300; --sf-text-tags-lh: 1.0; /* Caption Bold — Ubuntu Bold 12 / 1.0 — Badge counter, accents */ --sf-text-caption-bold-size: 12px; --sf-text-caption-bold-weight: 700; --sf-text-caption-bold-lh: 1.0; /* Caption Bold Mini — Ubuntu Bold 10 / 1.0 — Small badge counter, menu mini label */ --sf-text-caption-mini-size: 10px; --sf-text-caption-mini-weight: 700; --sf-text-caption-mini-lh: 1.0; /* Tooltip 10pt — Ubuntu Medium 10 / 1.0 — Tooltip text, technology badges */ --sf-text-tooltip-size: 10px; --sf-text-tooltip-weight: 500; --sf-text-tooltip-lh: 1.0; /* Ring/Stage label — Oswald Regular 16 / 1.3 uppercase — только Ring */ --sf-text-stage-size: 16px; --sf-text-stage-weight: 400; --sf-text-stage-lh: 1.3; /* MUI icon sizes */ --sf-icon-sm: 16px; --sf-icon-md: 20px; --sf-icon-lg: 24px; /* ────────────────────────────────────────────────────────── 3. RADII ────────────────────────────────────────────────────────── */ --sf-radius-sm: 4px; /* Buttons, inputs, tags, badges */ --sf-radius-md: 8px; --sf-radius-lg: 14px; --sf-radius-pill: 51px; /* Tone tags */ --sf-radius-full: 9999px; /* Circle / Ring / Avatar */ /* ────────────────────────────────────────────────────────── 4. SPACING — 4px-base scale ────────────────────────────────────────────────────────── */ --sf-space-1: 4px; --sf-space-2: 8px; --sf-space-3: 12px; --sf-space-4: 16px; --sf-space-6: 24px; --sf-space-8: 32px; --sf-space-10: 40px; --sf-space-14: 54px; /* Large button height */ /* ────────────────────────────────────────────────────────── 5. EFFECTS — single elevation: Image hover shadow ────────────────────────────────────────────────────────── */ --sf-shadow-image-hover: 0px 1px 2px 0px #07080E, 0px 2px 4px 0px #07080E; /* ────────────────────────────────────────────────────────── 6. COMPONENT SIZES (для воспроизведения 1:1) ────────────────────────────────────────────────────────── */ --sf-btn-h-large: 54px; --sf-btn-h-medium: 40px; --sf-btn-h-small: auto; /* по контенту: padding 16×8 + 14pt label */ --sf-input-h: 40px; --sf-search-w: 538px; --sf-menu-w-expand: 256px; /* было 224 — поправлено по реальным экранам (News Dashboard 175:7808, Messages 463:6004) */ --sf-menu-w-mini: 88px; /* было 72 — поправлено по Video subtitles 1 (1586:20883) */ --sf-menu-item-h: 40px; --sf-ring-size: 100px; --sf-avatar-table: 56px; /* ────────────────────────────────────────────────────────── 7. LAYOUT — tiles, drawers, shadows, menu collapse Источник: реальные экраны на канвасе 0:1. - Video subtitles 1 (1586:20876) — стек tiles + Mini Menu - Profile Insights Profile Details v02 (524:10117) — drawer 650 px - News Dashboard (175:7808) — tile-grid, Expanded Menu 256 px - Messages v03 (463:6004) — content padding, tile gap ────────────────────────────────────────────────────────── */ /* App / content chrome */ --sf-topbar-h: 72px; /* 1586:20882 / 463:6007 */ --sf-content-pad-x: 40px; /* gap между sidebar и контентом (296 - 256 = 40) */ --sf-content-pad-x-mini: 32px; /* при mini-menu (1587:19903 left=32) */ --sf-content-pad-y: 24px; /* стандартный отступ контент-зоны сверху */ /* Tiles (карточки фида / новостей / постов) */ --sf-tile-bg: #1B1C21; --sf-tile-radius: 4px; --sf-tile-border: none; /* у tiles нет статической обводки, разделяются gap'ом и shadow'ом */ --sf-tile-pad-x: 24px; /* avatar/контент с левого края (1587:19682 left=24) */ --sf-tile-pad-y: 24px; /* верх — header chips/avatar (1587:19705 y=24) */ --sf-tile-body-offset-x: 117px; /* основной текст начинается с x=117 (24 + 68 avatar + 25 gap) */ --sf-tile-body-offset-y: 80px; /* основной текст начинается с y=80 (под header-chips) */ --sf-tile-gap-v: 16px; /* вертикальный gap между tiles в фиде (подтверждено на 175:7808, 463:6004, 1586:20876) */ --sf-tile-gap-h: 16px; /* горизонтальный gap между tiles в grid (524:10150) */ --sf-tile-gap-inner: 16px; /* gap между блоками внутри tile (header → body → meta) */ --sf-tile-footer-pad-x: 16px; /* meta-полоска внизу tile: px 16, py 8 (1587:19664) */ --sf-tile-footer-pad-y: 8px; --sf-tile-footer-border-t: 1px solid rgba(70, 91, 104, 0.5); /* Pill-group containers — мини-плашки внутри tile (фильтры/факторы) */ --sf-pill-group-bg: #111218; /* НОВЫЙ цвет — pill-group bg внутри tile (1589:20490) */ --sf-pill-group-pad: 4px; --sf-pill-group-gap: 4px; --sf-pill-group-radius: 4px; /* Drawer (slide-in side panel, как Profile Details 524:10119) */ --sf-drawer-w: 650px; /* 524:10119 width */ --sf-drawer-bg: #1B1C21; --sf-drawer-position: right; /* в Figma drawer прикреплён справа поверх контента */ --sf-drawer-pad-x: 32px; /* содержимое-зона drawer'а: 32 от каждого края */ --sf-drawer-pad-y: 32px; --sf-drawer-content-w: 586px; /* 650 - 32 - 32 = 586 (соответствует max-w внутренних фреймов) */ --sf-drawer-footer-h: 62px; /* фиксированный action-bar внизу (524:10198 height) */ --sf-drawer-footer-pad-l: 16px; --sf-drawer-footer-pad-r: 32px; --sf-drawer-footer-pad-y: 15px; --sf-drawer-footer-border-t: 1px solid #88919F; --sf-drawer-handle-w: 6px; /* декоративная вертикальная полоса возле края drawer (524:10153) */ --sf-drawer-handle-color: #88919F; --sf-drawer-handle-radius: 4px; --sf-drawer-top-stripe-h: 8px; /* декоративная полоса сверху (524:10154) */ --sf-drawer-close-offset-t: 32px; /* close-button position (524:10120) */ --sf-drawer-close-offset-r: 32px; --sf-drawer-close-size: 40px; --sf-drawer-close-radius: 20px; /* round-pill close */ /* Popup / modal */ /* На референсных экранах самостоятельного fullscreen-modal паттерна нет — основной */ /* паттерн «поп-апа над продуктом» в SF это drawer (см. выше). Если потребуется */ /* настоящий centered modal — используем drawer-token values + shadow Elevation 1. */ --sf-popup-bg: #1B1C21; --sf-popup-radius: 4px; --sf-popup-pad: 32px; --sf-popup-scrim: rgba(7, 8, 14, 0.5); /* совпадает с --sf-color-overlay-dark */ /* Shadows / Elevation Elevation 1 (именованный effect из Figma, найден на drawer 524:10119): 5 слоёв drop-shadow — близкий тонкий контур + два дальних мягких глоу + большой ambient. */ --sf-shadow-elev-1: 0px 1px 5px 0px rgba(7, 8, 14, 0.69), 0px 3px 20px 0px rgba(7, 8, 14, 0.69), 0px 0px 70px 0px #07080E, 0px 0px 70px 0px #07080E, 0px 0px 120px 0px #07080E; /* Тонкая тень под tile (`drop-shadow` style из 1587:19648) — для приподнятой плашки */ --sf-shadow-tile: 0px 0.5px 0.25px rgba(0, 0, 0, 0.25), 0px 2px 4px rgba(0, 0, 0, 0.25); /* Modal/drawer переиспользуют Elevation 1 */ --sf-shadow-drawer: var(--sf-shadow-elev-1); --sf-shadow-modal: var(--sf-shadow-elev-1); /* Menu collapse (Main Menu, см. 1586:20883 Mini + 175:7825/463:6005 Expanded) */ --sf-menu-w-expanded: 256px; /* alias к --sf-menu-w-expand для совместимости с брифом */ /* --sf-menu-w-mini уже определён выше как 88 */ --sf-menu-inner-w-mini: 72px; /* nav-зона внутри mini (88 - 8 left - 8 right) */ --sf-menu-item-h-mini: 54px; /* высота обычного item в Mini (1586:20888) */ --sf-menu-item-h-mini-first: 80px; /* первый/active item с подписью (1586:20887) */ --sf-menu-item-gap: 4px; /* gap между item'ами в Mini */ --sf-menu-item-pad-x: 12px; /* отступ слева у label внутри expanded item (340:26510) */ --sf-menu-logo-pad-x: 20px; --sf-menu-logo-pad-y: 20px; --sf-menu-logo-h: 33px; --sf-menu-collapse-trigger-size: 24px; /* chevron toggle 1586:20893 */ --sf-menu-collapse-trigger-offset-x: 76px; /* от левого края sidebar */ --sf-menu-collapse-trigger-offset-y: 24px; --sf-menu-collapse-trans: 200ms ease; /* TODO: точное значение transition не из Figma — эмпирическое */ }