/* Токены мобильной витрины CA Tasker. * * Одно правило на весь файл: цвет здесь ничего не украшает. Акцент один и * значит «сюда нажимать»; вся остальная палитра — это шкала срока, и каждый * её тон означает ровно одно состояние задачи. Поэтому тонов ровно семь — * столько же, сколько состояний возвращает сервер в поле `tone`. * * Тема выбирается двумя способами и обоими сразу: `data-theme` на , * если человек выбрал явно, и prefers-color-scheme, если он оставил * «как в системе». Ни один цвет не определяется только внутри медиазапроса — * иначе переключатель побеждал бы систему лишь в одну сторону. */ :root { color-scheme: light; /* Поверхности: земля → карточка → приподнятый блок внутри карточки. */ --ground: #f1f3f7; /* Фон не плоский: два очень слабых пятна дают глубину, от которой белая карточка читается как лежащая сверху, а не вырезанная в фоне. */ --ground-glow-1: rgba(44, 95, 246, 0.07); --ground-glow-2: rgba(18, 145, 92, 0.05); --surface: #ffffff; --surface-2: #f7f8fb; --surface-3: #edf0f5; --surface-sunken: #e9ecf2; --overlay: rgba(14, 17, 24, 0.46); /* Тонкая светлая линия по верхней кромке карточки — «блик материала». В тёмной теме она заменяется на едва заметную белую. */ --sheen: rgba(255, 255, 255, 0.9); /* Текст: основной, пояснение, служебная подпись. */ --ink: #14171d; --ink-2: #59616f; --ink-3: #858d9c; --ink-on-accent: #ffffff; --line: #e4e7ec; --line-strong: #cdd3dc; --accent: #2b5cf0; --accent-2: #4c7cff; --accent-press: #1f47c4; --accent-soft: #e9effe; --accent-ring: rgba(43, 92, 240, 0.18); /* Шкала состояний проверена, а не подобрана на глаз: * `scripts/validate_palette.js` из набора dataviz + расчёт WCAG. Подпись * каждого тона держит 4.5:1 на своей подложке, «чистый» цвет — 3:1 на * поверхности в обеих темах. * * Два тона — «срок завтра» и «на закрытии» — при дейтеранопии сближаются. * Это допустимо ровно потому, что тон здесь никогда не работает один: рядом * с ним всегда стоит слово («Срок завтра», «На закрытии»), а цвет лишь * ускоряет чтение. Там, где слова нет, тона быть тоже не должно. */ /* Шкала состояний. У каждого тона три роли: заливка подложки, цвет подписи на ней и «чистый» цвет для точки, полосы и графика. */ --tone-overdue: #c9291d; --tone-overdue-bg: #fdeceb; --tone-overdue-pure: #cf2f22; --tone-today: #8a4204; --tone-today-bg: #fdf0da; --tone-today-pure: #b86206; --tone-tomorrow: #1451b8; --tone-tomorrow-bg: #e6eefb; --tone-tomorrow-pure: #2b74e0; --tone-pending: #5b3bb0; --tone-pending-bg: #eee9fb; --tone-pending-pure: #9333d6; --tone-waiting: #0b6a7d; --tone-waiting-bg: #e0f2f5; --tone-waiting-pure: #0e8aa3; --tone-done: #05683f; --tone-done-bg: #e3f5ec; --tone-done-pure: #12915c; --tone-neutral: #59616f; --tone-neutral-bg: #eef0f3; --tone-neutral-pure: #8a92a1; /* Цвета ярлыков приходят из snapshot по имени, а не по значению. */ --tag-blue: #1451b8; --tag-blue-bg: #e6eefb; --tag-cyan: #0b6a7d; --tag-cyan-bg: #e0f2f5; --tag-green: #05683f; --tag-green-bg: #e3f5ec; --tag-emerald: #05683f; --tag-emerald-bg: #e3f5ec; --tag-orange: #9a4a06; --tag-orange-bg: #fdf0da; --tag-amber: #8a4b04; --tag-amber-bg: #fdf3d6; --tag-red: #c9291d; --tag-red-bg: #fdeceb; --tag-rose: #b32456; --tag-rose-bg: #fdeaf0; --tag-violet: #5b3bb0; --tag-violet-bg: #eee9fb; --tag-purple: #5b3bb0; --tag-purple-bg: #eee9fb; --tag-indigo: #35399b; --tag-indigo-bg: #e8e9fa; --tag-gray: #4d5563; --tag-gray-bg: #eef0f3; /* Шрифт системный: приложение обязано работать без сети, а значит без единого внешнего файла — включая шрифты. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif; --font-num: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; --text-xs: 11px; --text-sm: 13px; --text-md: 15px; --text-lg: 17px; --text-xl: 21px; --text-2xl: 27px; --text-3xl: 36px; /* Число, ради которого открывают экран, должно быть крупнее всего остального на порядок, а не на пару пунктов. */ --text-display: clamp(44px, 13vw, 60px); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 28px; --space-7: 40px; /* Палец, а не курсор: ни одна цель касания не меньше 44px. */ --tap: 44px; --header-h: 52px; --tabbar-h: 58px; --rail-w: 248px; --content-max: 720px; --content-max-wide: 1180px; /* Тень в два слоя: короткая даёт кромку, длинная — отрыв от фона. Одна тень всегда выглядит либо грязной, либо не читается вовсе. */ --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px -12px rgba(16, 24, 40, 0.14); --shadow-raised: 0 2px 4px rgba(16, 24, 40, 0.06), 0 16px 40px -16px rgba(16, 24, 40, 0.22); --shadow-sheet: 0 -8px 48px rgba(12, 16, 24, 0.2); --shadow-pop: 0 10px 34px -8px rgba(12, 16, 24, 0.28); --shadow-row: var(--shadow-card); --ease: cubic-bezier(0.2, 0, 0, 1); /* Небольшой «перелёт» на появлении: движение читается как материал, а не как смена кадра. */ --ease-spring: cubic-bezier(0.18, 0.9, 0.26, 1.08); --fast: 130ms; --slow: 260ms; /* Полосы безопасной зоны: вырез сверху, домашний индикатор снизу. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* Тёмная тема описывает те же роли другими значениями. Ни одной новой переменной здесь быть не должно: если роль появилась только в тёмной теме, значит в светлой что-то нарисовано мимо системы. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ground: #0c0e12; --ground-glow-1: rgba(88, 128, 255, 0.10); --ground-glow-2: rgba(35, 167, 109, 0.07); --surface: #16191f; --surface-2: #1c2028; --surface-3: #232833; --surface-sunken: #101319; --overlay: rgba(0, 0, 0, 0.66); --sheen: rgba(255, 255, 255, 0.06); --ink: #e8eaf0; --ink-2: #a2aab8; --ink-3: #737c8b; --ink-on-accent: #0d0f13; --line: #262b34; --line-strong: #363d48; --accent: #7aa2ff; --accent-2: #9dbaff; --accent-press: #9dbaff; --accent-soft: #18233d; --accent-ring: rgba(122, 162, 255, 0.22); --tone-overdue: #ff8178; --tone-overdue-bg: #33191a; --tone-overdue-pure: #f2564a; --tone-today: #f2b45c; --tone-today-bg: #33260f; --tone-today-pure: #e69412; --tone-tomorrow: #8ab4ff; --tone-tomorrow-bg: #17233d; --tone-tomorrow-pure: #4a86ef; --tone-pending: #bda6ff; --tone-pending-bg: #241d3d; --tone-pending-pure: #a97ef7; --tone-waiting: #57cde3; --tone-waiting-bg: #102b31; --tone-waiting-pure: #21b0cc; --tone-done: #63d69c; --tone-done-bg: #102a20; --tone-done-pure: #23a76d; --tone-neutral: #a2aab8; --tone-neutral-bg: #21262e; --tone-neutral-pure: #79818f; --tag-blue: #8ab4ff; --tag-blue-bg: #17233d; --tag-cyan: #57cde3; --tag-cyan-bg: #102b31; --tag-green: #63d69c; --tag-green-bg: #102a20; --tag-emerald: #63d69c; --tag-emerald-bg: #102a20; --tag-orange: #f2b45c; --tag-orange-bg: #33260f; --tag-amber: #efc063; --tag-amber-bg: #322a10; --tag-red: #ff8178; --tag-red-bg: #33191a; --tag-rose: #ff8fb0; --tag-rose-bg: #331a24; --tag-violet: #bda6ff; --tag-violet-bg: #241d3d; --tag-purple: #bda6ff; --tag-purple-bg: #241d3d; --tag-indigo: #a3a8ff; --tag-indigo-bg: #1d1f3d; --tag-gray: #a2aab8; --tag-gray-bg: #21262e; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -14px rgba(0, 0, 0, 0.8); --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.55), 0 18px 44px -18px rgba(0, 0, 0, 0.9); --shadow-sheet: 0 -8px 48px rgba(0, 0, 0, 0.66); --shadow-pop: 0 10px 34px -8px rgba(0, 0, 0, 0.7); --shadow-row: var(--shadow-card); } } /* Явный выбор человека сильнее системы — в обе стороны. */ :root[data-theme="dark"] { color-scheme: dark; --ground: #0c0e12; --ground-glow-1: rgba(88, 128, 255, 0.10); --ground-glow-2: rgba(35, 167, 109, 0.07); --surface: #16191f; --surface-2: #1c2028; --surface-3: #232833; --surface-sunken: #101319; --overlay: rgba(0, 0, 0, 0.66); --sheen: rgba(255, 255, 255, 0.06); --ink: #e8eaf0; --ink-2: #a2aab8; --ink-3: #737c8b; --ink-on-accent: #0d0f13; --line: #262b34; --line-strong: #363d48; --accent: #7aa2ff; --accent-2: #9dbaff; --accent-press: #9dbaff; --accent-soft: #18233d; --accent-ring: rgba(122, 162, 255, 0.22); --tone-overdue: #ff8178; --tone-overdue-bg: #33191a; --tone-overdue-pure: #f2564a; --tone-today: #f2b45c; --tone-today-bg: #33260f; --tone-today-pure: #e69412; --tone-tomorrow: #8ab4ff; --tone-tomorrow-bg: #17233d; --tone-tomorrow-pure: #4a86ef; --tone-pending: #bda6ff; --tone-pending-bg: #241d3d; --tone-pending-pure: #a97ef7; --tone-waiting: #57cde3; --tone-waiting-bg: #102b31; --tone-waiting-pure: #21b0cc; --tone-done: #63d69c; --tone-done-bg: #102a20; --tone-done-pure: #23a76d; --tone-neutral: #a2aab8; --tone-neutral-bg: #21262e; --tone-neutral-pure: #79818f; --tag-blue: #8ab4ff; --tag-blue-bg: #17233d; --tag-cyan: #57cde3; --tag-cyan-bg: #102b31; --tag-green: #63d69c; --tag-green-bg: #102a20; --tag-emerald: #63d69c; --tag-emerald-bg: #102a20; --tag-orange: #f2b45c; --tag-orange-bg: #33260f; --tag-amber: #efc063; --tag-amber-bg: #322a10; --tag-red: #ff8178; --tag-red-bg: #33191a; --tag-rose: #ff8fb0; --tag-rose-bg: #331a24; --tag-violet: #bda6ff; --tag-violet-bg: #241d3d; --tag-purple: #bda6ff; --tag-purple-bg: #241d3d; --tag-indigo: #a3a8ff; --tag-indigo-bg: #1d1f3d; --tag-gray: #a2aab8; --tag-gray-bg: #21262e; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -14px rgba(0, 0, 0, 0.8); --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.55), 0 18px 44px -18px rgba(0, 0, 0, 0.9); --shadow-sheet: 0 -8px 48px rgba(0, 0, 0, 0.66); --shadow-pop: 0 10px 34px -8px rgba(0, 0, 0, 0.7); --shadow-row: var(--shadow-card); }