/* @boog-ui-start */ /* Экспериментальная тема «Pastel». Активируется классом .theme-pastel на . ПРИНЦИП (по правке PO): пастели — ЯКОРЬ, остаются как есть (точные цвета вложения). Все остальные цвета СИНХРОНИЗИРУЮТСЯ с ними: берём ТОН каждой пастели и строим на нём насыщенный вариант единого веса. Тон совпадает с пастелью (одна семья), различие — только в насыщенности/светлоте. */ :root.theme-pastel{ /* ── Пастели PO — как есть (точные тона вложения) ── */ --pastel-rose: #fecdd3; --pastel-amber: oklch(0.87 0.09 70); /* тёплый золотой янтарь (тон 70), отличим от жёлтого */ --pastel-yellow: #fef08a; --pastel-green: #bbf7d0; --pastel-sky: #bae6fd; --pastel-purple: #e9d5ff; --pastel-gray: oklch(0.78 0.008 240); /* нейтраль темы: чуть уведена в синеву */ /* ── Цвета примитивов библиотеки ── Сняты пипеткой с самих картинок библиотеки примитивов: нейтраль темы рядом с ними читается другим цветом, поэтому это отдельные роли, а не оттенки пастельной серии. */ --primitive-gray: #999999; --primitive-orange: #e8b474; /* ── Синхронизированные насыщенные тона (тот же ТОН, что у пастели) ── тёплые (amber/yellow) чуть светлее — иначе уходят в грязь, теряя тон. */ --rose-solid: oklch(0.56 0.15 13); --amber-solid: oklch(0.60 0.15 70); --yellow-solid: oklch(0.64 0.14 105); --green-solid: oklch(0.56 0.15 150); --sky-solid: oklch(0.55 0.15 235); --purple-solid: oklch(0.56 0.16 305); /* Нейтрали — чистый холст, тон уведён в синеву палитры для родства */ --color-bg: #f7f9fc; --color-surface: #ffffff; --color-surface-2: #eef3f9; --color-border: #e3e9f1; --color-text: #16233a; --color-muted: #5b6a83; --color-track: #8493aa; /* неактивная часть шкалы, 3.12:1 к белому (см. tokens.css) */ /* Акцент = sky, тот же тон, что у пастельного sky, но насыщенный (годен для CTA) */ --color-accent: var(--sky-solid); --color-accent-hover: oklch(0.49 0.15 235); --color-accent-active: oklch(0.43 0.14 235); --color-accent-weak: var(--pastel-sky); /* пастель как мягкий фон */ --color-on-accent: #ffffff; /* Статусы: насыщенный тон — текст/иконка, ПАСТЕЛЬ PO — как -weak фон */ --color-success: var(--green-solid); --color-success-weak: var(--pastel-green); --color-warning: var(--amber-solid); --color-warning-weak: var(--pastel-amber); --color-danger: var(--rose-solid); --color-danger-weak: var(--pastel-rose); --color-info: oklch(0.66 0.10 218); --color-info-weak: oklch(0.95 0.03 218); /* мягче+холоднее акцента, не путается с кнопкой */ --color-purple: var(--purple-solid);--color-purple-weak: var(--pastel-purple); /* ── "Усиленные" тона для текста метки (.chip) на пастельной заливке ── Тот же тон/хьюе, что у -solid, но темнее (ниже L в OKLCH). Измерением в браузере (канвас, реальный пиксель) базовые -solid тона на своих пастельных -weak фонах дают контраст текста 2.71-3.67 при норме 4.5 для текста 12pt. Используются только там, где текст стоит на -weak фоне (метка) - кнопки, точки статусов и заливки-клипы на насыщенном -solid тоне не трогаем, там другая пара контраста (белый текст на насыщенном фоне) и норма уже держится. */ --color-success-strong: oklch(0.49 0.15 150); --color-warning-strong: oklch(0.465 0.15 70); --color-danger-strong: oklch(0.495 0.15 13); --color-purple-strong: oklch(0.50 0.16 305); --color-accent-strong: oklch(0.47 0.15 235); /* Фокус/слои — под акцент */ --focus-ring: 0 0 0 3px oklch(0.55 0.15 235 / .35); --state-hover: oklch(0.55 0.05 235 / .07); --state-active:oklch(0.55 0.05 235 / .14); /* ── Кластеры компетенций: три недостающих якоря ───────────────────────── Модель компетенций даёт 9 кластеров, а якорей в палитре было 6. Добавлены teal 195, indigo 270, fuchsia 340 — та же светлота и насыщенность, что у остальных, и они закрывают самые широкие разрывы круга (в т.ч. sky 235 → purple 305). Итог: 9 тонов с шагом 33–57°, соседи не сливаются. Само семейство --cluster-* объявлено в tokens.css (работает в любой теме); здесь шесть из них привязаны к фирменным якорям, чтобы правка тона бренда тянула за собой цвет кластера, а не расходилась с ним. */ --teal-solid: oklch(0.55 0.14 195); --indigo-solid: oklch(0.55 0.15 270); --fuchsia-solid: oklch(0.56 0.15 340); --cluster-1: var(--sky-solid); /* Исследование и понимание */ --cluster-2: var(--purple-solid); /* Проектирование решения */ --cluster-3: var(--fuchsia-solid); /* Критическое суждение */ --cluster-4: var(--green-solid); /* Организация работы */ --cluster-5: var(--teal-solid); /* Сотрудничество */ --cluster-6: var(--indigo-solid); /* Влияние */ --cluster-7: var(--rose-solid); /* Лидерство */ --cluster-8: var(--yellow-solid); /* Саморегуляция */ --cluster-9: var(--amber-solid); /* Саморазвитие и рефлексия */ } /* @boog-ui-end */