/** * TOP BRO — токены дизайн-системы. * * Источник: Прототип/TOP BRO Design System.dc.html (v1.0). * Значения перенесены как есть, из данных страницы и её секций компонентов. * Ничего не подобрано «на глаз»: чего в дизайн-системе нет, того нет и здесь — * список пропусков в конце файла. */ :root { /* --- Нейтральная шкала --------------------------------------------------- Сырая палитра дизайн-системы. В вёрстке пользоваться смысловыми токенами ниже, а не этими: имена по номеру тона нужны только как источник. */ --color-neutral-900: #0D0D0D; --color-neutral-800: #1C1C1C; --color-neutral-700: #333333; --color-neutral-600: #525252; --color-neutral-500: #757575; --color-neutral-400: #A0A0A0; --color-neutral-300: #C7C7C7; --color-neutral-200: #E3E3E3; --color-neutral-100: #F2F2F2; --color-neutral-50: #FAFAFA; /* --- Поверхности и текст ------------------------------------------------- Семь токенов из блока «Семантические токены» — имена и описания их. */ --color-background: #FFFFFF; /* Фон страницы (светлое тело) */ --color-surface: #F2F2F2; /* Карточки, поля, подложки */ --color-surface-inverse: #0D0D0D; /* Хедер, футер, тёмные блоки */ --color-border: #C7C7C7; /* Границы, разделители */ --color-text-primary: #0D0D0D; /* Основной текст на светлом */ --color-text-secondary: #525252; /* Вторичный текст, подписи */ --color-text-inverse: #FFFFFF; /* Текст на тёмном фоне */ /* --- На тёмной поверхности ----------------------------------------------- Из блока «На тёмном фоне»: что чем становится поверх --color-surface-inverse. */ --color-text-on-inverse: #FFFFFF; /* Заголовок на тёмном */ --color-text-secondary-on-inverse: #C7C7C7; /* Body-текст на тёмном */ --color-border-on-inverse: #525252; /* Граница вторичной кнопки на тёмном */ /* --- Статусы ------------------------------------------------------------- Пары «цвет + подложка» из блока «Статусные цвета». В бейджах подложка идёт фоном, а сам цвет — текстом. По правилам системы статусный цвет вне бейджей и слотов не используется. */ --color-success: #2F6B4F; /* Подтверждено */ --color-success-surface: #EAF2ED; --color-warning: #B8862E; /* Ожидает */ --color-warning-surface: #FBF3E4; --color-danger: #B23B3B; /* Отменено, ошибка формы */ --color-danger-surface: #FBEAEA; --color-info: #3B5B8C; /* Информация */ --color-info-surface: #E9EEF6; /* --- Кнопки -------------------------------------------------------------- Раздел «Кнопки». Primary — одно основное действие на экране, secondary — второстепенные рядом с ним, ghost — низкоприоритетные и табличные, danger — только необратимые операции. */ --color-button-primary-background: #0D0D0D; --color-button-primary-text: #FFFFFF; --color-button-primary-background-hover: #333333; --color-button-primary-background-active: #333333; --color-button-primary-background-disabled: #E3E3E3; --color-button-primary-text-disabled: #A0A0A0; --color-button-secondary-border: #0D0D0D; --color-button-secondary-text: #0D0D0D; --color-button-secondary-background-hover: #F2F2F2; --color-button-secondary-border-disabled: #C7C7C7; --color-button-secondary-text-disabled: #A0A0A0; --color-button-ghost-text: #0D0D0D; --color-button-ghost-background-hover: #F2F2F2; --color-button-ghost-text-disabled: #A0A0A0; --color-button-danger-background: #B23B3B; --color-button-danger-text: #FFFFFF; --color-button-danger-background-hover: #912E2E; --color-button-danger-border: #B23B3B; /* Контурный вариант danger */ --color-button-danger-text-outline: #B23B3B; /* Размеры кнопок: отступы и кегль. Радиус у всех трёх — pill. */ --button-padding-small: 8px 18px; --button-font-size-small: 13px; --button-padding-medium: 12px 24px; --button-font-size-medium: 15px; --button-padding-large: 16px 32px; --button-font-size-large: 16px; /* Фокус на кнопке — двойное кольцо: белый зазор, затем тёмный контур. */ --button-focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 5px #0D0D0D; /* --- Поля ввода ---------------------------------------------------------- Раздел «Поля ввода»: default, focus, error, disabled. */ --color-input-border: #C7C7C7; --color-input-border-focus: #0D0D0D; --color-input-border-error: #B23B3B; --color-input-text-error: #B23B3B; --color-input-border-disabled: #E3E3E3; --color-input-background-disabled: #F2F2F2; --color-input-text-disabled: #A0A0A0; --input-padding: 14px 16px; --input-font-size: 15px; --input-focus-ring: 0 0 0 3px #E3E3E3; /* --- Слоты записи -------------------------------------------------------- Блок «Состояния слота записи» — экран выбора времени (Booking 03). */ --color-slot-free-background: #FFFFFF; --color-slot-free-border: #C7C7C7; --color-slot-free-text: #0D0D0D; --color-slot-busy-background: #F2F2F2; --color-slot-busy-border: #E3E3E3; --color-slot-busy-text: #A0A0A0; --color-slot-selected-background: #0D0D0D; --color-slot-selected-border: #0D0D0D; --color-slot-selected-text: #FFFFFF; --color-slot-disabled-background: #FFFFFF; --color-slot-disabled-border: #E3E3E3; --color-slot-disabled-text: #C7C7C7; /* --- Шрифт --------------------------------------------------------------- Один гротеск на весь интерфейс: заголовки, тело, интерфейсные элементы. */ --font-family-base: 'Manrope', sans-serif; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* --- Размеры текста ------------------------------------------------------ Шкала из 10 ступеней. У каждой — кегль, начертание, интерлиньяж и трекинг. */ --font-size-display: 72px; --font-weight-display: 800; --line-height-display: 1.0; --letter-spacing-display: -0.02em; --font-size-h1: 56px; --font-weight-h1: 800; --line-height-h1: 1.05; --letter-spacing-h1: -0.02em; --font-size-h2: 40px; --font-weight-h2: 700; --line-height-h2: 1.1; --letter-spacing-h2: -0.01em; --font-size-h3: 28px; --font-weight-h3: 700; --line-height-h3: 1.15; --letter-spacing-h3: -0.01em; --font-size-h4: 20px; --font-weight-h4: 700; --line-height-h4: 1.2; --letter-spacing-h4: 0em; --font-size-body-large: 18px; --font-weight-body-large: 400; --line-height-body-large: 1.5; --letter-spacing-body-large: 0em; --font-size-body-medium: 16px; --font-weight-body-medium: 400; --line-height-body-medium: 1.5; --letter-spacing-body-medium: 0em; --font-size-body-small: 14px; --font-weight-body-small: 400; --line-height-body-small: 1.5; --letter-spacing-body-small: 0em; --font-size-caption: 12px; --font-weight-caption: 600; --line-height-caption: 1.4; --letter-spacing-caption: 0.06em; --font-size-button: 15px; --font-weight-button: 600; --line-height-button: 1; --letter-spacing-button: 0.01em; /* --- Отступы ------------------------------------------------------------- Шкала интервалов из 9 ступеней. Имён у ступеней в системе нет — только значения, поэтому в названии токена стоит само значение. */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; /* --- Контейнер ----------------------------------------------------------- Максимальная ширина 1200px, 12 колонок, gutter 24px. Поля контейнера меняются по брейкпоинтам. Брейкпоинты (в @media переменные не работают, поэтому здесь справкой): desktop — от 1200px, tablet — 768–1199px, mobile — до 767px. */ --container-max-width: 1200px; --container-columns: 12; --grid-gutter: 24px; --container-padding-desktop: 80px; --container-padding-tablet: 40px; --container-padding-mobile: 20px; /* --- Скругления ---------------------------------------------------------- Имена ступеней взяты из системы. */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px; /* --- Толщина границ ------------------------------------------------------ */ --border-width-hairline: 1px; --border-width-default: 1.5px; --border-width-focus: 2px; /* --- Тени ---------------------------------------------------------------- Три ступени: без тени, выпадающие списки и тултипы, модальные окна. */ --shadow-none: none; --shadow-sm: 0 4px 12px rgba(13, 13, 13, .10); --shadow-md: 0 16px 40px rgba(13, 13, 13, .18); } /** * Чего в дизайн-системе нет — и потому нет здесь: * * - Цвет ссылки в тексте и её ховер. Внутри самой страницы дизайн-системы * ссылки покрашены, но это оформление документа, а не объявленный токен. * - Тёмная тема как набор токенов. Есть только показ «На тёмном фоне»: * какие цвета берут текст, кнопки и границы поверх тёмной поверхности. * - Длительности и кривые анимаций. В компонентах встречаются разовые * значения (переключатель, спиннер), шкалы движения не объявлено. * - Шкала z-index. * - Размеры иконок. * - Начертание 500. Шрифт подключается с ним, но ни одной ступени * типографики оно не назначено. * - Прозрачность отключённых элементов: состояния заданы отдельными * цветами, а не общим значением. * * Расхождение внутри самой системы: в шкале границ ширина кольца фокуса * названа 2px, а в компонентах фокус нарисован тенями — 3px и 5px у кнопки, * 3px у поля ввода. Перенесено и то и другое, как в источнике. */