/* ========================================================================== Circly — design tokens Единственный источник правды по цвету, типографике, ритму и форме. При миграции на React Native / Flutter переносится этот файл, остальное — производные от него. ========================================================================== */ :root { /* ---- Палитра: бирюза (навигация, фирменные плоскости) ---------------- */ --palette-teal-900: #06403f; --palette-teal-800: #0a5a58; --palette-teal-700: #0e7370; --palette-teal-600: #128b87; --palette-teal-500: #17a39e; --palette-teal-200: #b5dedc; --palette-teal-100: #d9edec; --palette-teal-50: #eff7f6; /* ---- Палитра: золото (акцентные действия) ---------------------------- */ --palette-gold-800: #7d5612; --palette-gold-700: #9a6b18; --palette-gold-600: #b8862a; --palette-gold-500: #c99a3c; --palette-gold-200: #ecd8a9; --palette-gold-100: #f6ebd5; --palette-gold-50: #fbf6ea; /* ---- Палитра: нейтральные -------------------------------------------- */ --palette-ink-900: #0f1a19; --palette-ink-800: #1c2b2a; --palette-ink-700: #2c3a39; --palette-ink-500: #5c6b6a; --palette-ink-400: #849392; --palette-ink-300: #aeb9b8; --palette-ink-200: #dce3e2; --palette-ink-100: #edf1f0; --palette-ink-50: #f6f8f8; --palette-white: #ffffff; /* Поверхности тёмной темы. Не инверсия светлых: на чёрном фоне карточка должна быть светлее подложки, иначе список сливается в одно пятно. */ --palette-ink-950: #0a1211; --palette-ink-850: #172322; --palette-line-inverse: rgba(255, 255, 255, 0.13); --palette-line-inverse-subtle: rgba(255, 255, 255, 0.07); /* ---- Палитра: статусные ---------------------------------------------- */ --palette-green-600: #1f9d55; --palette-amber-600: #d08700; --palette-red-600: #d4433c; --palette-red-50: #fdeceb; /* ---- Цвета форматов файлов -------------------------------------------- Плитка формата узнаётся по цвету раньше, чем по подписи, и цвета здесь общие для всех мессенджеров: PDF красный, документ синий, таблица зелёная. Своих ролей у них нет — только плитка файла. Одни на обе темы: белая подпись на насыщенной плитке читается и там, и там. */ --file-pdf: #d4433c; --file-doc: #2f6fd6; --file-sheet: #1f9d55; --file-slides: #e0762b; --file-archive: #7a6a55; --file-audio: #8a4fd0; --file-video: #c2417f; --file-text: #5c6b73; --file-other: #4a5a61; /* ---- Семантика: поверхности ------------------------------------------ */ --color-bg-app: var(--palette-ink-50); --color-bg-surface: var(--palette-white); --color-bg-sunken: var(--palette-ink-100); --color-bg-brand: var(--palette-teal-700); --color-bg-overlay: rgba(15, 26, 25, 0.44); /* ---- Семантика: текст ------------------------------------------------- */ --color-text-primary: var(--palette-ink-900); --color-text-secondary: var(--palette-ink-500); --color-text-tertiary: var(--palette-ink-400); --color-text-inverse: var(--palette-white); --color-text-brand: var(--palette-teal-700); --color-text-accent: var(--palette-gold-700); --color-text-danger: var(--palette-red-600); /* ---- Семантика: бренд и акцент ---------------------------------------- */ --color-brand: var(--palette-teal-700); --color-brand-hover: var(--palette-teal-800); --color-brand-soft: var(--palette-teal-50); --color-brand-border: var(--palette-teal-200); --color-accent: var(--palette-gold-600); --color-accent-hover: var(--palette-gold-700); --color-accent-soft: var(--palette-gold-50); --color-accent-border: var(--palette-gold-200); /* Роли, которые компоненты раньше брали из палитры напрямую и из-за этого не переживали смену темы: свой пузырь в переписке, наведение на мягкой бирюзовой строке и подложка всплывающего уведомления. */ --color-bubble-own: var(--palette-teal-100); /* Пузырь отложенного сообщения полупрозрачный: под ним лежат обои, и совсем прозрачный пузырь узор просвечивал насквозь — текст читался хуже самого фона */ --color-bubble-later: rgba(255, 255, 255, 0.55); /* Подложка под словами рядом со стикером — именем, цитатой, временем. Пузыря у стикера нет, а мелкий текст прямо на обоях тонет в узоре; плотнее пузыря отложенного, потому что текст на ней мельче */ --color-sticker-plate: rgba(255, 255, 255, 0.78); --color-brand-soft-hover: var(--palette-teal-100); --color-bg-toast: var(--palette-ink-900); /* ---- Семантика: границы и статусы ------------------------------------- */ --color-border: var(--palette-ink-200); --color-border-subtle: var(--palette-ink-100); --color-success: var(--palette-green-600); --color-warning: var(--palette-amber-600); --color-danger: var(--palette-red-600); --color-danger-soft: var(--palette-red-50); /* ---- Типографика ------------------------------------------------------ */ --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Множитель размера шрифта из настроек. Иконки, аватары и зоны касания от него не зависят: растёт текст, а не интерфейс целиком. */ --font-scale: 1; --font-size-display: calc(28px * var(--font-scale)); --line-height-display: calc(34px * var(--font-scale)); --font-size-title-1: calc(22px * var(--font-scale)); --line-height-title-1: calc(28px * var(--font-scale)); --font-size-title-2: calc(18px * var(--font-scale)); --line-height-title-2: calc(24px * var(--font-scale)); --font-size-title-3: calc(16px * var(--font-scale)); --line-height-title-3: calc(22px * var(--font-scale)); --font-size-body: calc(15px * var(--font-scale)); --line-height-body: calc(21px * var(--font-scale)); --font-size-caption: calc(13px * var(--font-scale)); --line-height-caption: calc(18px * var(--font-scale)); --font-size-micro: calc(11px * var(--font-scale)); --line-height-micro: calc(14px * var(--font-scale)); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --letter-spacing-tight: -0.02em; --letter-spacing-wide: 0.04em; /* ---- Ритм (шаг 4px) --------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Горизонтальные поля экрана — одна переменная на всё приложение */ --space-gutter: var(--space-4); /* ---- Форма ------------------------------------------------------------ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 999px; /* ---- Тени -------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(15, 26, 25, 0.05); --shadow-sm: 0 2px 8px rgba(15, 26, 25, 0.06); --shadow-md: 0 6px 20px rgba(15, 26, 25, 0.09); --shadow-lg: 0 16px 40px rgba(15, 26, 25, 0.16); --shadow-accent: 0 6px 18px rgba(184, 134, 42, 0.35); /* Тень вверх — под нижним меню: одной линии мало, лента подъезжает под меню и на светлом фоне шов почти не читается */ --shadow-up: 0 -3px 12px rgba(15, 26, 25, 0.1); /* Край ленты: полоса над ней и строка ввода под ней отбрасывают на неё еле заметную тень — лента читается слоем под панелями, а не их продолжением. Слабее --shadow-up: панели здесь и так отделены линией */ --shadow-edge-down: 0 2px 6px rgba(15, 26, 25, 0.07); --shadow-edge-up: 0 -2px 6px rgba(15, 26, 25, 0.07); /* Шапка разговора над лентой. Плотнее тени края: под тёмной полосой шапки семь процентов на светлых обоях не видны вовсе, а тень здесь — то, что отделяет шапку от подъехавших под неё сообщений */ --shadow-bar-down: 0 3px 8px rgba(15, 26, 25, 0.24); /* ---- Слои -------------------------------------------------------------- */ --z-content: 1; --z-appbar: 10; --z-statusbar: 15; --z-tabbar: 20; --z-float: 25; /* плавающее окно «Телевидения» — над навигацией, под шторками */ --z-overlay: 30; --z-sheet: 35; --z-toast: 40; /* ---- Движение ---------------------------------------------------------- */ --duration-fast: 140ms; --duration-base: 220ms; --duration-slow: 320ms; --easing-standard: cubic-bezier(0.2, 0, 0.1, 1); --easing-decelerate: cubic-bezier(0, 0, 0.15, 1); /* ---- Размеры каркаса ---------------------------------------------------- */ --size-appbar: 56px; --size-tabbar: 60px; --size-touch: 44px; /* минимальная кликабельная зона */ --size-statusbar: 44px; /* ---- Раскладка: заготовка под десктоп ----------------------------------- */ /* Мобильный — единственный активный сценарий. Значения ниже описывают будущие колонки, чтобы десктоп добавлялся медиазапросом без переписывания. */ --layout-viewport-width: 390px; /* ширина рабочей области */ --layout-rail-width: 0px; /* боковая навигация (десктоп) */ --layout-list-width: 0px; /* колонка списка (десктоп) */ --layout-content-max: none; /* ограничение ширины контента */ } /* ========================================================================== Тёмная тема Переопределяется только семантический слой: компоненты о теме не знают. Атрибут ставит app.js. Вариант «Как в системе» он же и разрешает через matchMedia — здесь остаётся один блок вместо светлого дубля в медиазапросе. ========================================================================== */ :root[data-appearance="dark"] { --color-bg-app: var(--palette-ink-950); --color-bg-surface: var(--palette-ink-850); --color-bg-sunken: var(--palette-ink-800); --color-bg-brand: var(--palette-teal-800); --color-bg-overlay: rgba(0, 0, 0, 0.6); --color-text-primary: var(--palette-ink-50); --color-text-secondary: var(--palette-ink-300); --color-text-tertiary: var(--palette-ink-400); /* Бирюза и золото берутся светлее: рабочие оттенки светлой темы на почти чёрном фоне не добирают контраста и читаются как выключенные */ --color-text-brand: var(--palette-teal-200); --color-text-accent: var(--palette-gold-200); --color-brand: var(--palette-teal-500); --color-brand-hover: var(--palette-teal-600); --color-brand-soft: rgba(23, 163, 158, 0.16); --color-brand-border: rgba(23, 163, 158, 0.34); --color-accent: var(--palette-gold-500); --color-accent-hover: var(--palette-gold-600); --color-accent-soft: rgba(201, 154, 60, 0.16); --color-accent-border: rgba(201, 154, 60, 0.34); --color-border: var(--palette-line-inverse); --color-border-subtle: var(--palette-line-inverse-subtle); --color-danger-soft: rgba(212, 67, 60, 0.18); /* Свой пузырь остаётся бирюзовым, но тёмным: светлая плашка со светлым текстом была бы нечитаемой. Тост, наоборот, светлеет — иначе тёмная пилюля на тёмном фоне не читается как всплывающая. */ --color-bubble-own: var(--palette-teal-800); --color-bubble-later: rgba(16, 26, 25, 0.5); --color-sticker-plate: rgba(16, 26, 25, 0.66); --color-brand-soft-hover: rgba(23, 163, 158, 0.24); --color-bg-toast: var(--palette-ink-700); /* На тёмном фоне тень не читается как высота — только как глубина под шторкой и плавающей кнопкой */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); --shadow-up: 0 -3px 12px rgba(0, 0, 0, 0.4); --shadow-edge-down: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-edge-up: 0 -2px 6px rgba(0, 0, 0, 0.35); /* На тёмном тень края под шапкой уже читается — она же */ --shadow-bar-down: 0 2px 6px rgba(0, 0, 0, 0.35); }