/* themes — краски, шрифт и геометрия переключателя тем. Единственное место, где заданы исходные краски. Компоненты про темы не знают и берут только var(--…), поэтому смена краски здесь меняет весь сайт. Здесь лежат только те краски, что нельзя вывести из чёрного фона и белого текста: --color-dark чёрный — фон страницы и всё утопленное в него --color-ink белый — текст и иконки --color-panel чуть светлее тёмного — фон дока и окон --color-accent акцент: белый в стандартной, цвет ОС в системной --color-danger красный — опасность и ошибки Производные роли заданы ниже и пересчитываются в каждом локальном scope акцента: страницы выбирают роль, а не повторяют рецепт. Красный стоит особняком: его нельзя вывести ни из белого, ни из тёмного, а опасность должна читаться как опасность. Стандартная тема — значения :root ниже. Системная переопределяет только акцент от корня html. */ :root { /* ===== Шрифт ===== */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-size: 16px; --line-height: 1.5; /* ===== Краски ===== */ /* Белый: текст и иконки. Обводки его не берут — они на акценте. */ --color-ink: #f4f4f4; /* Тёмный: фон страницы и всё, что в него утоплено. */ --color-dark: #141414; /* Акцент — единственная краска, что зависит от темы. Стандартная берёт белый, системная подставляет вместо него цвет из ОС. --color-accent-fg — что рисовать поверх акцента. */ --color-accent: var(--color-ink); --color-accent-fg: var(--color-dark); /* Опасность: красная в любой теме — это цвет опасности, а не акцент. Его нельзя вывести из чёрного и белого, поэтому он живёт здесь. */ --color-danger: #ff5a5a; --color-danger-hover: #ff7b7b; /* Панели — фон дока и окон: тёмный, осветлённый белым. */ --color-panel: color-mix(in srgb, var(--color-dark) 94%, var(--color-ink)); /* ===== Плавность ===== Стандартная Material emphasized: мягкий старт, ровная середина, мягкое торможение. Старая кривая cubic-bezier(0.22, 1, 0.36, 1) отдавала почти всё движение за первые четверти времени — окно дёргалось в начале и почти замирало в хвосте. */ --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1); /* ===== Кольцо ===== Скруглённую рамку нельзя собрать через border-image — он обрывает радиус, — поэтому кольцо рисуется фоном: прозрачная граница держит размер, заливка закрывает середину, а краска кольца ложится на всю коробку и видна только в зазоре между ними: background: linear-gradient(var(--fill), var(--fill)) padding-box, linear-gradient(var(--ring-color), var(--ring-color)) border-box; Эти две строки пишет каждый элемент сам, а не берёт готовым токеном: переменная вычисляется там, где объявлена, а не там, где использована, поэтому общий токен на корне подхватил бы --fill корня, а не поля. Зато краски по-прежнему одни на весь сайт, а проценты — там, где им место, в самом элементе. Внутри слоёв лежат linear-gradient с одинаковыми концами. Это не переход цвета, а способ положить краску в нужный слой: background-color двумя слоями не рисуется. На экране — сплошная заливка, градиентов в теме нет. */ /* ===== Геометрия переключателя ===== */ --slider-pad: 3px; --slider-radius: 12px; --slider-item-radius: 9px; } /* Применение палитры к документу. Живёт здесь, а не в base.css: это решение о теме, а не оболочка. */ body.page { background-color: var(--color-dark); color: var(--color-ink); font-family: var(--font-family); font-size: var(--font-size); line-height: var(--line-height); -webkit-font-smoothing: antialiased; } /* ===== Системная ===== Палитра родная, из :root: тёмный фон и белый текст всегда. От ОС берётся только акцент — системным цветом AccentColor (Windows, macOS, Android). Он один участвует и в подложках состояний, и во всех обводках, так что менять проценты под него не нужно — цветность делает работу за процент. */ html.theme-system { --color-accent: AccentColor; } /* Цвет текста поверх акцента тоже системный, но поддерживается не всеми браузерами. Без него var() в свойстве color дал бы невалидное значение и текст стал бы нечитаемым, поэтому подставляем его только при подтверждённой поддержке. */ @supports (color: AccentColorText) { html.theme-system { --color-accent-fg: AccentColorText; } } /* Semantic roles are evaluated again on every local accent scope. */ :root, [data-theme-scope], [style*="--color-accent"] { --color-text-muted: color-mix(in srgb, var(--color-ink) 53%, var(--color-dark)); --color-border: color-mix(in srgb, var(--color-accent) 75%, var(--color-dark)); --color-shine: color-mix(in srgb, var(--color-ink) 12%, transparent); --color-accent-soft: color-mix(in srgb, var(--color-accent) 25%, var(--color-panel)); --color-surface-inset: color-mix(in srgb, var(--color-dark) 50%, var(--color-panel)); --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, var(--color-dark)); --color-accent-subtle: color-mix(in srgb, var(--color-accent) 15%, var(--color-panel)); --color-hover: color-mix(in srgb, var(--color-accent) 15%, transparent); --color-on-accent-muted: color-mix(in srgb, var(--color-accent-fg) 55%, transparent); --color-scrim-soft: color-mix(in srgb, var(--color-dark) 70%, transparent); --color-danger-soft: color-mix(in srgb, var(--color-danger) 10%, transparent); --color-selected: color-mix(in srgb, var(--color-accent) 30%, transparent); --color-scrim: color-mix(in srgb, var(--color-dark) 82%, transparent); --color-text-secondary: color-mix(in srgb, var(--color-ink) 80%, var(--color-dark)); } :root { --shadow-window: 0 12px 48px rgba(0, 0, 0, 0.45); --shadow-icon: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.7)); --shadow-search: 0 2px 10px rgba(0, 0, 0, 0.18); --window-radius: 20px; } :root { --color-button-secondary: color-mix(in srgb, var(--color-ink) 10%, transparent); } :root { --post-size: 240px; --post-radius: 16px; } :root, [data-theme-scope], [style*="--color-accent"] { --color-iconbutton-background: var(--color-panel); --color-iconbutton-hover: color-mix(in srgb, var(--color-accent) 15%, var(--color-panel)); } :root { --motion-control-duration: 220ms; --motion-ease: cubic-bezier(.22, 1, .36, 1); }