/* * «Листва» — цветовая система * * Используйте семантические переменные --color-* в компонентах. * Тема меняется классом .light на элементе . */ :root { color-scheme: dark; /* Базовая палитра */ --leaf-50: #f3fde9; --leaf-100: #e3facd; --leaf-200: #c8f5a0; --leaf-300: #aaf36c; --leaf-400: #99e35d; --leaf-500: #78c83e; --leaf-600: #5ca72d; --leaf-700: #488025; --leaf-800: #3c6623; --leaf-900: #345620; --gray-50: #f5f7f3; --gray-100: #e8eee9; --gray-200: #cbd2cc; --gray-300: #a8b1aa; --gray-400: #7f8a82; --gray-500: #626d65; --gray-600: #4b554e; --gray-700: #303832; --gray-800: #202721; --gray-850: #151b17; --gray-900: #101411; --gray-950: #0b0e0c; /* Семантические цвета — тёмная тема */ --color-background: var(--gray-950); --color-surface: var(--gray-900); --color-surface-hover: var(--gray-850); --color-text: var(--gray-100); --color-text-body: var(--gray-200); --color-text-muted: var(--gray-400); --color-text-faint: var(--gray-600); --color-border: var(--gray-800); --color-accent: var(--leaf-400); --color-accent-hover: var(--leaf-300); --color-on-accent: #14200d; --color-overlay: rgb(2 5 3 / 75%); --color-shadow: rgb(0 0 0 / 40%); /* Короткие алиасы, используемые текущим сайтом */ --bg: var(--color-background); --surface: var(--color-surface); --surface-hover: var(--color-surface-hover); --text: var(--color-text); --muted: var(--color-text-muted); --faint: var(--color-text-faint); --line: var(--color-border); --accent: var(--color-accent); --accent-strong: var(--color-accent-hover); --accent-ink: var(--color-on-accent); } :root.light { color-scheme: light; /* Семантические цвета — светлая тема */ --color-background: #f5f7f3; --color-surface: #ffffff; --color-surface-hover: #edf1ea; --color-text: #182019; --color-text-body: #39413a; --color-text-muted: #697269; --color-text-faint: #9aa29a; --color-border: #dfe5dd; --color-accent: #67b632; --color-accent-hover: #599f2a; --color-on-accent: #f7fff2; --color-overlay: rgb(20 28 21 / 42%); --color-shadow: rgb(32 48 35 / 16%); } /* Автоматическая тема — используйте вместо класса .light при желании. */ /* @media (prefers-color-scheme: light) { :root.auto-theme { color-scheme: light; --color-background: #f5f7f3; --color-surface: #ffffff; --color-surface-hover: #edf1ea; --color-text: #182019; --color-text-body: #39413a; --color-text-muted: #697269; --color-text-faint: #9aa29a; --color-border: #dfe5dd; --color-accent: #67b632; --color-accent-hover: #599f2a; --color-on-accent: #f7fff2; --color-overlay: rgb(20 28 21 / 42%); --color-shadow: rgb(32 48 35 / 16%); } } */ ::view-transition-new(root) { mask: url('data:image/svg+xml,') center / 0 no-repeat; animation: scale 1s; animation-fill-mode: both; } ::view-transition-old(root), .dark::view-transition-old(root) { animation: none; animation-fill-mode: both; z-index: -1; } .dark::view-transition-new(root) { animation: scale 1s; animation-fill-mode: both; } @keyframes scale { to { mask-size: 200vmax; } }