/* Берёзка — дизайн-токены, design v2.0. Значений вне этих шкал в вёрстке быть не должно: каждое из них — решение, а не подобранное на глаз число. Если нужного значения нет — это повод обсудить шкалу, а не дописать шестнадцатый радиус. Темы переключаются одним классом для А/Б-теста через Яндекс Метрику. В магазине класс ставится на и должен стоять до первой отрисовки, иначе будет мигание. Селектор намеренно не привязан к : на борде макетов тот же класс висит на обёртке кадров, и обе темы показываются рядом из одного и того же файла. */ :root { /* ── нейтральные заливки ─────────────────────────────────────────────── */ --fill: rgba(0, 0, 0, .05); /* подложки полей, неактивных кнопок, треков */ --fill-strong: rgba(0, 0, 0, .12); /* круглые кнопки закрытия, грабер шторки */ --line: rgba(0, 0, 0, .09); /* разделители и обводки */ /* ── семантика, общая для тем ────────────────────────────────────────── */ --ink: #1d1a16; /* основной текст */ --muted: #8b8578; /* вторичный текст */ --ok: #2e7d4f; /* магазин открыт, доставка есть */ --warn: #b3541e; /* закрыт, откроется позже */ --danger:#b23a2e; /* ошибка, удаление */ /* ── цвета интерфейса, не покрытые семантикой выше ──────────────────── */ --icon-idle: rgba(29, 26, 22, .42); /* неактивные иконки и подписи таб-бара, включая круглую кнопку поиска рядом с ним */ --icon-close: rgba(60, 60, 67, .65); /* крестик закрытия шторки */ --danger-ink: #8d2f26; /* текст и обводка на мягкой красной подложке: --danger на ней не добирает контраста */ --surface-float: rgba(247, 247, 247, .82); /* таб-бар, кнопка поиска, куки-островок — всё, что плавает над контентом с блюром */ --scrim: rgba(0, 0, 0, .35); /* затемнение под шторкой */ --surface-active: rgba(237, 237, 237, .9); /* капсула активной вкладки таб-бара */ --bg-sunk: #f0ede8; /* подложка под колонками десктопа */ --danger-soft: rgba(178, 58, 46, .08); /* подложка блока с ошибкой */ --danger-line: rgba(178, 58, 46, .3); /* обводка на этой подложке */ --warn-soft: rgba(179, 84, 30, .10); /* подложка предупреждения */ /* ── радиусы ─────────────────────────────────────────────────────────── */ --r-badge: 5px; /* бейджи скидки, чипы-метки */ --r-control:10px; /* кнопки, пилюли, чипы, сегмент переключателя */ --r-field: 13px; /* поля ввода, плитки категорий, трек переключателя */ --r-photo: 14px; /* фото товара 1:1 */ --r-card: 20px; /* карточки, поповер, куки-баннер */ --r-sheet: 26px; /* шторки, капсула таб-бара */ /* Вложенные скругления: внутренний радиус = внешний − паддинг. Переключатель: трек 13 + паддинг 3 → сегмент 10. Не нарушать — иначе внутренний угол выглядит вырезанным чужим инструментом. */ /* ── тени, три уровня ────────────────────────────────────────────────── */ --shadow-raised: 0 1px 3px rgba(0, 0, 0, .10); /* кнопка, активный сегмент */ --shadow-float: 0 8px 30px rgba(0, 0, 0, .14); /* таб-бар, куки-островок */ /* Поповер — пара drop-shadow на обёртке, чтобы тень обтекала пузырь вместе с хвостиком единым контуром. Через box-shadow так не сделать: */ --shadow-popover: drop-shadow(0 1px 1px rgba(45, 33, 20, .10)) drop-shadow(0 10px 22px rgba(45, 33, 20, .20)); --shadow-sheet: 0 -12px 40px rgba(30, 20, 10, .18); /* шторка снизу */ --shadow-pin: drop-shadow(0 4px 8px rgba(45, 33, 20, .3)); /* пин на карте */ /* ── отступы ─────────────────────────────────────────────────────────── */ --inset-screen: 12px; /* поля экрана на мобильной, включая плавающий слой */ --inset-sheet: 16px; /* внутри шторки — своя поверхность, своя сетка */ --inset-desk: 24px; /* десктоп: 12px на 1440 читались бы как обрезка */ } /* ── темы под А/Б-тест ─────────────────────────────────────────────────── */ .theme-bordeaux { --brand: #6e1e1e; --brand-deep: #5a0e00; --accent: #d4a95e; --on-accent: #3a1005; --bg: #faf8f4; --sale: #c43b2b; --soft: rgba(110, 30, 30, .07); /* полупрозрачный оттенок бренда */ --soft-solid: #ffffff; /* непрозрачная подложка поповера */ } .theme-green { --brand: #006633; --brand-deep: #004d26; --accent: #3aaa35; --on-accent: #ffffff; --bg: #ffffff; --sale: #d23c2a; --soft: rgba(0, 102, 51, .07); --soft-solid: #ffffff; } /* ── типографика ───────────────────────────────────────────────────────── */ body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Google Sans', sans-serif; -webkit-font-smoothing: antialiased; } /* Одна гарнитура на весь интерфейс. Вторую (Manrope) убрали осознанно: иерархия строится начертанием и размером, а не сменой шрифта. Кегли: 11 · 12,5 · 14 · 16 · 18 · 22 · 26 Веса закреплены за ступенями. Свободных комбинаций нет: 400 и 450 на одном кегле различаются на 50 единиц и глазом неразличимы — это тот же дефект, что и полпикселя разницы в кегле, только на другой оси. 11 400 подпись · 500 лейбл · 600 бейдж 12,5 400 вторичный текст · 500 лейбл · 600 акцент 14 450 основной текст · 600 акцент, кнопки, названия 16 450 изменяемое значение · 600 цена, заголовок подраздела 18 600 заголовок экрана и шторки 22 600 название экрана · 700 итог заказа 26 600 дисплейный 22 намеренно держит два веса: название экрана и сумма заказа — вещи одного масштаба, различать их размером было бы враньём. Это единственная ступень с двумя весами, и она такая по решению, а не по недосмотру. Семь ступеней вместо десяти. В v2.0 середина шкалы слиплась: 13, 13,5, 14 и 15 глазом не различаются, и разница в полпикселя читалась не как иерархия, а как случайность. Схлопнуто в 14 и 16. 16 — ступень ИЗМЕНЯЕМОГО ЗНАЧЕНИЯ. На ней стоит всё, что показывает одно и то же значение: поле ввода, его плейсхолдер, подсказки автокомплита, строки выбора в списке сохранённых адресов. Разный кегль у поля и у подсказки под ним — это разнобой, а не иерархия: это один и тот же адрес. Тот же 16 закрывает зум на iOS. Safari (а на iOS это все браузеры, там один WebKit) при фокусе на поле мельче 16px принудительно зумит вьюпорт, и шторка с полем уезжает за край экрана. Правило ниже даёт нижнюю границу один раз и без !important. Кегли НЕ делать плавными через clamp() на мобильной: разброс 360–430px слишком мал, а дробный кегль ломает обрезку названий товаров — она меряет высоту блока в целых пикселях (см. js/truncate-name.js). Плавными делаем сетку и контейнеры на десктопе, не шрифт. */ /* ── переменные шкалы ────────────────────────────────────────────────── Классы ниже собраны из них же. Если вешать класс некуда — например, типографика уже описана в вашем компоненте — берите переменную прямо в своё правило: font-size: var(--fs-body). Менять шкалу тогда всё равно придётся в одном месте, здесь. Имена по РОЛИ, а не по числу. --fs-14 пришлось бы переименовывать при каждой правке шкалы, а --fs-body переживёт её: поменяется значение, не имя. Это же и защищает от возврата к «поставлю тут 13, тут 15» — у промежуточных значений просто нет имени. */ :root { --font-ui: 'Google Sans', sans-serif; /* кегли */ --fs-caption: 11px; /* подписи, цена за единицу, бейджи, таб-бар */ --fs-small: 12.5px; /* вторичный текст, модификаторы, чипы */ --fs-body: 14px; /* основной текст, названия товаров, кнопки */ --fs-field: 16px; /* изменяемое значение, цена в плитке витрины */ --fs-title: 18px; /* заголовки экранов и шторок */ --fs-total: 22px; /* название экрана, итог заказа */ --fs-display: 26px; /* дисплейные заголовки */ /* межстрочные — только там, где текст переносится */ --lh-body: 19px; --lh-field: 21px; /* веса */ --fw-secondary: 400; --fw-body: 450; --fw-label: 500; --fw-accent: 600; --fw-total: 700; --input-height: 46px; --button-height: 46px; } .t-tab { font: var(--fw-label) var(--fs-caption) var(--font-ui); } /* подписи таб-бара */ .t-caption { font: var(--fw-secondary) var(--fs-caption) var(--font-ui); color: var(--muted); } .t-label { font: var(--fw-label) var(--fs-caption) var(--font-ui); letter-spacing: .06em; text-transform: uppercase; } .t-small { font: var(--fw-secondary) var(--fs-small) var(--font-ui); color: var(--muted); } .t-body { font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui); } .t-strong { font: var(--fw-accent) var(--fs-body) var(--font-ui); } .t-button { font: var(--fw-accent) var(--fs-body) var(--font-ui); } .t-field { font: var(--fw-body) var(--fs-field) var(--font-ui); } /* изменяемое значение */ .t-price { font: var(--fw-accent) var(--fs-field) var(--font-ui); } .t-title { font: var(--fw-accent) var(--fs-title) var(--font-ui); letter-spacing: -.01em; } .t-total { font: var(--fw-total) var(--fs-total) var(--font-ui); } .t-display { font: var(--fw-accent) var(--fs-display) var(--font-ui); letter-spacing: -.01em; } .fw-body { font-weight: var(--fw-body); } .fw-accent { font-weight: var(--fw-accent); } /* Двенадцать ролей на семи ступенях: .t-body, .t-strong и .t-button стоят на одном кегле и расходятся начертанием. Так и задумано — иерархию держит вес, а не полпикселя разницы. Классы набраны шорткатом font: осознанно — каждый описывает роль целиком, и сбросить чужой межстрочный это как раз то, что от него требуется. В чужие правила шорткат не тащить, там только нужные longhand-свойства. */ /* Нижняя граница для полей ввода. Ниже 16px iOS Safari зумит вьюпорт на фокусе, и шторка с полем уезжает за край экрана. Правило намеренно голое: селектор на элементе, специфичность (0,0,1), никаких исключений внутри. Так и задумано — это ПОЛ, а не размер поля. Всё, что должно отличаться, задаётся своим классом и перебивает эту строку без борьбы: поле кода из СМС .otp-code-input { font-size: 24px } крупнее — можно телефон на входе .phone-input { font-size: 22px } крупнее — можно значение степпера .qty-value { font-size: 14px } мельче — см. ниже Мельче 16px безопасно только там, где клавиатура не встаёт: значение степпера меняется кнопками − и +, поэтому оно readonly и не зумит. Но размер ему задаёт класс, а не readonly: одно про зум, другое про кегль, мешать их в одном селекторе нельзя. Чего не делать: не добавлять сюда :not([readonly]) и прочие исключения. Каждое :not() с атрибутом добавляет к специфичности класс — семь штук дают (0,7,1) и начинают подавлять любые компонентные стили. Проверено: поле, которому класс просил 24px, получало 16px. И не через : Safari игнорирует это с iOS 10 ради доступности, а Android честно запретит пользователю зумить страницу. */ input, select, textarea, .form-control, .form-select { font-family: inherit; /* иначе поля уедут в системный Arial: гарнитура в них не наследуется сама */ font-size: max(var(--fs-field), 1rem); border-radius: var(--r-field); height: var(--input-height); } /* Если у вас на полях висит .form-control и он задаёт меньше 16px — правьте его, а не обходите это правило: класс сильнее элемента и выиграет молча. */ /* Цифры в ценах, суммах, количествах и расстояниях — моноширинные, иначе колонки цен «пляшут» при смене значения. */ .tabular { font-variant-numeric: tabular-nums; }