/* ============================================================================ DOLAVIX · Токены дизайн-системы ---------------------------------------------------------------------------- Источник — файл Figma «SEO Маркетинг», страница «Дизайн» (node 3:2): 72 переменные, 18 текстовых стилей, 3 стиля теней. Двухслойная модель макета (Primitives → Semantic) сохранена: она сделана чисто, и ломать её не нужно. Все правки идут либо в примитивы, либо новыми семантическими ролями — не подменой значений на местах. ЧТО ИСПРАВЛЕНО ОТНОСИТЕЛЬНО МАКЕТА И ПОЧЕМУ --------------------------------------------------------------------------- Контраст считался по WCAG 2.1 формулой относительной яркости, не на глаз. 1. bg/accent #18A1D5 + белый = 2.96:1 при норме 4.5:1. Это главная кнопка магазина на всех 62 макетах. Заменён на #137EA6 (4.60:1), тон сохранён. Наведение #106D90 (5.81:1) — темнее основного, а не светлее. 2. text/accent #18A1D5 = 2.96:1. Это все ссылки и акцентные цифры. Заменён на #106D90: проходит на всех шести фонах системы (5.00–5.81). 3. text/muted #797979 не проходил нигде (4.35 на белом, 3.74 на тёплом). Заменён на #696969: 4.72–5.49 на всех шести фонах. 4. text/success #309440 = 3.86:1 на белом и 3.53:1 на своём же фоне. «В наличии» и «Отгрузим сегодня» — ключевые для опта. Стал #277934. 5. border/default #DCDCDC = 1.37:1 при норме 3:1 для границ элементов управления (WCAG 1.4.11). Рамка поля была практически не видна. Введён отдельный --border-input #878787 (3.59:1); #DCDCDC остался декоративным разделителем, где норма 3:1 не применяется. 6. Фокуса не было вообще — ни цвета, ни кольца, ни тени, при 134 полях и 153 кнопках в макете. Введено двухслойное кольцо: акцентное поверх белого отступа, поэтому читается на любом фоне. 7. Янтарной группы не было. Для опта это дыра: «осталось мало», «под заказ», «отгрузка через N дней» пришлось бы красить в красный (пугает) или в серый (теряется). Введён --text-warning #A46809 (4.60:1). 8. Состояний не было ни одного, кроме bg/accent-hover. Добавлены hover, active и disabled для всех интерактивных ролей. 9. Мобильной типографики не было: H1 34 px уезжал в контейнер 358 px как есть. Заголовки переведены на clamp() — одна шкала на обе ширины. 10. Табличных цифр не было ни в одном стиле. Цены в колонку, три уровня опта, остатки, GTIN — всё это числа в столбик. Включены font-variant numeric: tabular-nums там, где числа выравниваются. 11. Размеров как токенов не существовало: у всех 12 переменных отступов scopes = [GAP]. Высота кнопки, поля, иконки и зона касания 44 px не были описаны. Добавлена шкала --size-*. 12. Мёртвые примитивы (neutral/050, neutral/150, neutral/300, sand/050, sand/200, sand/400, brand/navy, status/red-dark) — треть коллекции — убраны или переосмыслены. neutral/150 и neutral/300 уходили в зелень и ломали однотонность ряда. brand/navy — наследие палитры прототипов, решение Р-15 их разводит. Единицы: px в токенах намеренно. Битрикс-админка и почтовые шаблоны живут в пикселях, а rem дал бы расхождение при смене базового кегля. ========================================================================= */ /* ─── Шрифт ────────────────────────────────────────────────────────────── Onest, SIL OFL 1.1, полная кириллица. Вариативный: один файл на подмножество покрывает веса 400–700, поэтому вместо восьми статических файлов — два, суммарно 49 КБ. Курсивов в системе нет ни одного. Локально, а не с fonts.googleapis.com: внешний RTT на каждой из 31 страницы плюс зависимость от чужого домена. В Figma начертание зовётся «SemiBold», в CSS это 600 — сопоставлять по числу, а не по имени, иначе браузер синтезирует жирность сам. ------------------------------------------------------------------------ */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/onest-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/onest-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ═══ СЛОЙ 1. ПРИМИТИВЫ ═══════════════════════════════════════════════ Сырые значения. В разметке не используются никогда — только через семантические роли ниже. Ряд нейтральных приведён к одной температуре и достроен ступенями 400 и 600, которых не было. ------------------------------------------------------------------- */ --c-neutral-000: #FFFFFF; --c-neutral-025: #F9F9F9; --c-neutral-100: #F1F1F1; --c-neutral-200: #DCDCDC; --c-neutral-300: #C4C4C4; /* достроено: было #B8B8AD — зеленило */ --c-neutral-400: #A8A8A8; /* достроено: ступени не было вовсе */ --c-neutral-450: #878787; /* достроено: минимум для границ полей, 3.59:1 */ --c-neutral-500: #696969; /* затемнено с #797979 ради 4.5:1 на всех фонах */ --c-neutral-600: #52525A; /* достроено: ступени не было вовсе */ --c-neutral-700: #3B3A3F; --c-neutral-800: #3E2E2E; --c-neutral-900: #1A1A1A; /* было #000000 — чистый чёрный груб на бумажном фоне */ /* Песочная ветка — тёплая тема бренда. Достроены тёмные ступени: раньше единственный тёмный sand/400 давал 2.82:1 и был непригоден как текст, поэтому тёплым тоном нечем было акцентировать. */ --c-sand-025: #F8F6F1; --c-sand-100: #F3EDE4; --c-sand-200: #ECE6DE; --c-sand-300: #D9CFC0; /* достроено */ --c-sand-600: #7A6A55; /* достроено: тёплый тон, пригодный как текст */ --c-sand-700: #5C4F3E; /* достроено: 7.4:1 на bg-warm */ --c-sand-border: #E8E1D6; /* было #F8F5EF (1.09:1) — разделитель был невидим */ /* Бренд. Один рабочий тон и его затемнение — это была не шкала, а пара. Достроены мягкие ступени для рамок и заливок и доступный тёмный. */ --c-blue-050: #F4F6FB; --c-blue-100: #DCEEF7; /* достроено: мягкая заливка, рамка инфо-плашки */ --c-blue-200: #B6DCEE; /* достроено */ --c-blue-400: #18A1D5; /* исходный бренд-тон. ТОЛЬКО декоративно */ --c-blue-600: #137EA6; /* заливка CTA: белый на нём 4.60:1 */ --c-blue-700: #106D90; /* текст, ссылки, наведение CTA: 5.81:1 */ --c-green-050: #EEF7F0; --c-green-600: #277934; /* было #309440 (3.86:1) */ --c-green-700: #1E5E28; --c-red-050: #FDF2F4; /* достроено: мягкого фона ошибки не было */ --c-red-600: #D62045; /* заливка: белый на нём 5.06:1 */ --c-red-650: #CD1F42; /* текст: проходит и на тёплом фоне, и на своём мягком */ --c-red-700: #B8173A; --c-amber-050: #FDF6E8; /* новая группа целиком */ --c-amber-600: #A46809; /* заливка: белый на нём 4.60:1 */ --c-amber-650: #955F08; /* текст: 4.61–5.36 на всех фонах, 4.98 на своём мягком */ --c-amber-700: #855305; /* ═══ СЛОЙ 2. СЕМАНТИКА ═══════════════════════════════════════════════ Это и только это используется в разметке. ------------------------------------------------------------------- */ /* Фоны */ --bg-page: var(--c-neutral-000); --bg-subtle: var(--c-neutral-025); --bg-muted: var(--c-neutral-100); --bg-warm: var(--c-sand-100); --bg-warm-soft: var(--c-sand-025); --bg-info: var(--c-blue-050); --bg-inverse: var(--c-neutral-800); --bg-accent: var(--c-blue-600); --bg-accent-hover: var(--c-blue-700); --bg-accent-soft: var(--c-blue-100); --bg-danger: var(--c-red-600); --bg-danger-soft: var(--c-red-050); --bg-success: var(--c-green-600); --bg-success-soft: var(--c-green-050); --bg-warning: var(--c-amber-600); --bg-warning-soft: var(--c-amber-050); --bg-disabled: var(--c-neutral-100); /* Поверхности. surface-card в макете был псевдонимом bg-page, из-за чего карточка на фоне bg-subtle отличалась на 1.03:1 — то есть никак. Карточка теперь держится рамкой, а не только тенью. */ --surface-card: var(--c-neutral-000); --surface-raised: var(--c-neutral-000); --surface-sunken: var(--c-neutral-025); /* Текст */ --text-primary: var(--c-neutral-800); --text-body: var(--c-neutral-700); --text-muted: var(--c-neutral-500); --text-subtle: var(--c-neutral-600); --text-inverse: var(--c-neutral-000); --text-accent: var(--c-blue-700); --text-danger: var(--c-red-650); --text-success: var(--c-green-600); --text-warning: var(--c-amber-650); --text-info: var(--c-blue-700); --text-price: var(--c-neutral-900); --text-disabled: var(--c-neutral-400); --text-warm: var(--c-sand-700); /* второстепенный текст на песочных подложках */ /* Границы. Разведены декоративные разделители и границы элементов управления: для вторых WCAG 1.4.11 требует 3:1, для первых — нет. */ --border-default: var(--c-neutral-200); --border-subtle: var(--c-sand-border); --border-input: var(--c-neutral-450); --border-strong: var(--c-neutral-800); --border-accent: var(--c-blue-600); --border-danger: var(--c-red-600); --border-success: var(--c-green-600); --border-warning: var(--c-amber-600); --border-info: var(--c-blue-200); /* Иконки */ --icon-default: var(--c-neutral-800); --icon-muted: var(--c-neutral-500); --icon-inverse: var(--c-neutral-000); --icon-accent: var(--c-blue-700); --icon-success: var(--c-green-600); --icon-danger: var(--c-red-600); --icon-warning: var(--c-amber-600); /* Фокус. Двухслойное кольцо: белый отступ отделяет акцент от любого фона, поэтому одно правило работает и на белом, и на тёмном, и поверх акцентной кнопки. */ --focus-ring-color: var(--c-blue-700); --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring: 0 0 0 var(--focus-ring-offset) var(--bg-page), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); /* Подложка модалок и шторок. Система вообще не оперировала альфой — ни одной прозрачности, кроме как внутри теней. */ --overlay-scrim: rgba(26, 26, 26, 0.55); --overlay-blur: 2px; /* ═══ ОТСТУПЫ ═════════════════════════════════════════════════════════ Подпись на доске «Сетка» гласила «шаг 8 px», но в самой шкале есть 2, 4, 12 и 20 — то есть шаг 4. Оставляю фактический шаг 4 и правлю документацию, а не шкалу. Добавлены 0 и верхние ступени 96/120: потолок 80 не закрывал отбивки секций на 1440. ------------------------------------------------------------------- */ --space-0: 0; --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; --space-4xl: 48px; --space-5xl: 64px; --space-6xl: 80px; --space-7xl: 96px; /* достроено */ --space-8xl: 120px; /* достроено */ /* Вертикальная отбивка секции — единственное место, где ритм страницы задаётся, поэтому вынесено отдельной ролью и сжимается на мобильной. */ --section-gap: clamp(40px, 5.5vw, 80px); --section-gap-lg: clamp(56px, 8vw, 120px); /* ═══ РАДИУСЫ ═════════════════════════════════════════════════════════ Добавлены none и 4 (мелким чипам и бейджам скруглять было нечем). 14 выпадал из четырёхпиксельного ритма — приведён к 12. ------------------------------------------------------------------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 999px; /* ═══ РАЗМЕРЫ ═════════════════════════════════════════════════════════ Этого слоя в макете не было вовсе. ------------------------------------------------------------------- */ --size-control-sm: 36px; --size-control-md: 44px; /* минимальная зона касания, а не «красиво» */ --size-control-lg: 52px; --size-icon-sm: 16px; --size-icon-md: 20px; --size-icon-lg: 24px; --size-touch-min: 44px; /* Контейнер. В файле зафиксировано только: «Контейнер 1280 при ширине 1440 — поля по 80. На мобильной 358 при 390 — поля по 16». Числа колонок и gutter в макете нет ни текстом, ни переменной, а 1280 не делится на 12 нацело ни при каком разумном gutter — поэтому вёрстка идёт на гибких ширинах, а не на колоночной сетке. Промежуточного брейкпоинта в системе не было: планшет лёг бы на десктопную ветку. Введены 768 и 1024. */ --container-max: 1280px; --container-pad: clamp(16px, 4vw, 80px); /* ═══ ТЕНИ ════════════════════════════════════════════════════════════ Тёплый подтон вместо чистого чёрного: на песочных подложках чёрная тень с малой альфой читается сероватой грязью. Добавлена тень вверх для липкой панели — Shadow/Header светил вниз, а StickyBar прижат к низу экрана. ------------------------------------------------------------------- */ --shadow-card: 0 1px 2px 0 rgba(62, 46, 46, 0.05), 0 8px 24px -4px rgba(62, 46, 46, 0.06); --shadow-raised: 0 2px 6px -1px rgba(62, 46, 46, 0.08), 0 12px 32px -6px rgba(62, 46, 46, 0.10); --shadow-pop: 0 12px 32px -6px rgba(62, 46, 46, 0.12); --shadow-header: 0 2px 10px 0 rgba(62, 46, 46, 0.06); --shadow-sticky: 0 -2px 12px 0 rgba(62, 46, 46, 0.10); /* ═══ ТИПОГРАФИКА ═════════════════════════════════════════════════════ В макете кегли жили текстовыми стилями без переменных, а цвет и отступы — переменными. Слой токенов был негерметичен: экспорт дал бы половину системы в CSS-переменных, половину жёстко в классах. Здесь герметично: всё через переменные. Мобильная ветка отсутствовала — на 31 мобильный макет приходился один адаптивный стиль. Заголовки переведены на clamp(): нижняя граница — кегль, читаемый в контейнере 358 px, верхняя — значение из макета. ------------------------------------------------------------------- */ --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Дисплейный и заголовки. Значения справа — из макета (1440), слева — подобраны под 358 px. */ --fs-display: clamp(30px, 3.1vw, 44px); --lh-display: 1.12; --ls-display: -0.02em; --fs-h1: clamp(26px, 2.4vw, 34px); --lh-h1: 1.18; --ls-h1: -0.012em; --fs-h2: clamp(22px, 2vw, 28px); --lh-h2: 1.22; --ls-h2: -0.007em; --fs-h3: clamp(18px, 1.5vw, 22px); --lh-h3: 1.28; /* Четвёртого уровня заголовка в макете не было вовсе — на страницах с глубокой структурой (доставка, оплата, размеры, политика) его подменяли бы Title/L. */ --fs-h4: 18px; --lh-h4: 1.34; --fs-title-l: 18px; --lh-title-l: 1.32; --fs-title-m: 16px; --lh-title-m: 1.38; --fs-body-l: 16px; --lh-body-l: 1.5; --fs-body-m: 14px; /* базовый кегль проекта */ --lh-body-m: 1.5; --fs-body-s: 13px; --lh-body-s: 1.48; --fs-caption: 12px; --lh-caption: 1.45; --fs-overline: 10px; --lh-overline: 1.3; --ls-overline: 0.08em; /* Цены. Display/Mobile и Price/L в макете были побайтово одинаковы — два имени на один стиль, которые рано или поздно разошлись бы. Здесь Price/L самостоятелен. */ --fs-price-l: clamp(24px, 2.2vw, 30px); --lh-price-l: 1.15; --fs-price-m: 20px; --lh-price-m: 1.2; --fs-price-s: 15px; --lh-price-s: 1.3; --fs-button: 14px; --lh-button: 1.2; --fs-link: 14px; --lh-link: 1.4; /* ═══ ДВИЖЕНИЕ ════════════════════════════════════════════════════════ Встроенные кривые CSS слабые. ease-in для интерфейса не используется никогда: он тормозит на старте — ровно в тот момент, когда человек смотрит внимательнее всего. ------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --dur-press: 140ms; /* отклик кнопки на нажатие */ --dur-hover: 160ms; --dur-pop: 180ms; /* подсказки, мелкие поповеры */ --dur-dropdown: 220ms; --dur-drawer: 320ms; /* шторка фильтра, мобильное меню */ /* ═══ СЛОИ ════════════════════════════════════════════════════════════ */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; } /* ─── Уважение к системной настройке движения ──────────────────────────── Reduced motion — это «меньше и мягче», а не «ноль». Прозрачность и цвет помогают понять, что произошло, и остаются. Уезжает перемещение. ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --dur-press: 1ms; --dur-hover: 1ms; --dur-pop: 1ms; --dur-dropdown: 1ms; --dur-drawer: 1ms; } }