/* ============================================================================ * GRAPHITE — МОСТ СОВМЕСТИМОСТИ С ЛЕГАСИ (необязательный модуль) * * 🔴 ЭТО НЕ ПАЛИТРА И НЕ ПРИМИТИВЫ. Здесь живут правила, которые НЕЙТРАЛИЗУЮТ чужое * легаси в областях, отданных системе. Подключается ОТДЕЛЬНО и только тем, у кого * это легаси есть: @import "…/Graphite/graphite.legacy-bridge.css"; * Потребителю без легаси модуль не нужен — и подключать его не надо. * * 🔴 ОБЛАСТЬ ДЕЙСТВИЯ — МАРКЕР СИСТЕМЫ `.graphite` / `.graphite-scope`, а не имена * классов потребителя. Система не должна знать, как называются панели того, кто её * применил: иначе модуль привязан к одному проекту и не переносится. * Обязанность потребителя — повесить маркер на корень области И НА КАЖДЫЙ ПОРТАЛ * (закон 6). Портал без маркера останется светлым — это главная грабля системы. * * Что внутри: * · перехват СВЕТЛЫХ веток `dark:`-пар. Причина: Tailwind настроен `darkMode: "class"`, * но класс `dark` не ставит никто, и каждая пара «светлый + dark:тёмный» рисует * СВЕТЛУЮ ветку. Лечим не включением класса (это увело бы палитру мимо системы), * а сбросом светлой ветки на токены. * · сброс легаси-правила «любая кнопка в тёмной теме — синяя». * * Версия и журнал — общие с пакетом (VERSION / CHANGELOG.md). * ==========================================================================*/ /* ── 13. СВЕТЛЫЕ ВЕТКИ `dark:`-ПАР — ОБЩИЙ СБРОС ──────────────────────────────── * 🔴 КОРЕНЬ, найденный аудитом 2026-07-26 (замер, не глаз): * Tailwind настроен `darkMode: 'class'`, но класса `dark` на НЕ СТАВИТ НИКТО * (замер: `documentElement.className` пуст, `color-scheme: normal`). При этом в * исходниках редактора 379 вхождений `dark:` в 43 файлах. Значит КАЖДЫЙ компонент, * написанный парой «светлый + `dark:`тёмный», рисует СВЕТЛУЮ ветку, а тёмным * выглядит лишь там, где его перебили силой. Где не успели — дефект: * · крошка «Releases» (`text-zinc-900 dark:text-zinc-100`) — контраст 1.09:1; * · пилюли «Published» (`bg-emerald-100 text-emerald-700`) — светлые пятна. * * ПОЧЕМУ НЕ «ПРОСТО ПОВЕСИТЬ КЛАСС dark»: это одномоментно включило бы 197 собранных * `.dark\:`-правил, среди которых сине-серые gray-700/800/900 — читаемость бы * починилась, а палитра уехала бы МИМО системы (тот же аудит, корни №2 и №5). * Поэтому лечим наоборот: гасим СВЕТЛУЮ ветку, отображая её на токены Graphite. * Побочная выгода — правило работает и для БУДУЩИХ компонентов: любой новый * `text-zinc-900` или `bg-*-100` в редакторе приходит на палитру даром. * * СКОУП. Через `:is()`, чтобы не плодить по 4 копии каждого селектора: контейнер + * порталы (меню/окна живут в body, каскад от контейнера до них не доходит). * Специфичность у всех правил секции одинаковая — (0,3,0): * `:is()` берёт вес самого тяжёлого аргумента = `.graphite-scope` * (0,2,0), плюс класс-мишень (0,1,0). * 🔴 Исключение Медиа Пула (§7) держится на (0,4,0) и ЭТУ секцию переживает — * проверено: светлая подложка превью остаётся светлой осознанно. * 🔴 Секция стоит ПОСЛЕДНЕЙ намеренно: при равной специфичности выигрывает нижний, * поэтому §13 задаёт общий закон, а точечные исключения выше должны быть ТЯЖЕЛЕЕ. */ /* ── 13.1 Текст: тёмные нейтральные ветки → основной цвет ────────────────────── * Именно это чинит нечитаемую крошку. Берём 700…950 у всех пяти нейтральных * семейств Tailwind (gray/zinc/slate/neutral/stone) — они и есть «светлая ветка». */ :is(.graphite, .graphite-scope) :is(.text-gray-700, .text-gray-800, .text-gray-900, .text-gray-950, .text-zinc-700, .text-zinc-800, .text-zinc-900, .text-zinc-950, .text-slate-700, .text-slate-800, .text-slate-900, .text-slate-950, .text-neutral-700, .text-neutral-800, .text-neutral-900, .text-neutral-950, .text-stone-700, .text-stone-800, .text-stone-900, .text-stone-950) { color: var(--g-ink) !important; } /* ── 13.2 Текст: холодный серый → нейтральный (корень №2 аудита) ─────────────── * 371 вхождение из 749: `gray-400 #9ca3af` и `gray-500 #6b7280` — серые С СИНЕВОЙ, * рядом с нейтральными панелями #202020 это читается как грязь. Уводим на токены: * 300/400 → вторичный, 500/600 → третичный (иерархия яркостью, закон системы). */ :is(.graphite, .graphite-scope) :is(.text-gray-300, .text-gray-400, .text-zinc-300, .text-zinc-400, .text-slate-300, .text-slate-400, .text-neutral-300, .text-neutral-400, .text-stone-300, .text-stone-400) { color: var(--g-dim) !important; } :is(.graphite, .graphite-scope) :is(.text-gray-500, .text-gray-600, .text-zinc-500, .text-zinc-600, .text-slate-500, .text-slate-600, .text-neutral-500, .text-neutral-600, .text-stone-500, .text-stone-600) { color: var(--gr-text-faint) !important; } /* ── 13.3 Фоны: сине-серые тёмные ветки → поверхности системы ────────────────── * `bg-gray-900 #111827` и родня — тоже с синевой; лестница поверхностей у нас * нейтральная (#202020 → #2a2a2a). 900/950 → панель, 700/800 → вторичная подложка. */ :is(.graphite, .graphite-scope) :is(.bg-gray-900, .bg-gray-950, .bg-zinc-900, .bg-zinc-950, .bg-slate-900, .bg-slate-950, .bg-neutral-900, .bg-neutral-950) { background-color: var(--g-panel) !important; } :is(.graphite, .graphite-scope) :is(.bg-gray-700, .bg-gray-800, .bg-zinc-700, .bg-zinc-800, .bg-slate-700, .bg-slate-800, .bg-neutral-700, .bg-neutral-800, .bg-zinc-50, .bg-zinc-100, .bg-zinc-200, .bg-slate-50, .bg-slate-100, .bg-neutral-50, .bg-neutral-100, .bg-stone-50, .bg-stone-100) { background-color: var(--g-raised) !important; } /* ── 13.4 Пастель: светлые подложки → тонировка по формуле спектра ───────────── * Формула Graphite: фон `rgba(<оттенок-500>, .16)`, текст `<оттенок>-300`. * Смысловое кодирование СОХРАНЯЕТСЯ (пастель не глушим в серый) — «Published» * остаётся зелёным, просто перестаёт быть светлым пятном на тёмной панели. * Тот же приём, что §5 у нод и §11 у линейного вида, но теперь — на весь редактор. */ :is(.graphite, .graphite-scope) :is(.bg-green-50, .bg-green-100) { background-color: rgba(var(--g-hue-green), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-emerald-50, .bg-emerald-100) { background-color: rgba(var(--g-hue-emerald), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-cyan-50, .bg-cyan-100) { background-color: rgba(var(--g-hue-cyan), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-sky-50, .bg-sky-100) { background-color: rgba(var(--g-hue-sky), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-blue-50, .bg-blue-100) { background-color: rgba(var(--g-hue-blue), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-indigo-50, .bg-indigo-100) { background-color: rgba(var(--g-hue-indigo), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-violet-50, .bg-violet-100, .bg-purple-50, .bg-purple-100) { background-color: rgba(var(--g-hue-violet), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-fuchsia-50, .bg-fuchsia-100) { background-color: rgba(var(--g-hue-fuchsia), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-pink-50, .bg-pink-100) { background-color: rgba(var(--g-hue-pink), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-rose-50, .bg-rose-100) { background-color: rgba(var(--g-hue-rose), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-red-50, .bg-red-100) { background-color: rgba(var(--g-hue-red), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-orange-50, .bg-orange-100) { background-color: rgba(var(--g-hue-orange), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-amber-50, .bg-amber-100) { background-color: rgba(var(--g-hue-amber), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-yellow-50, .bg-yellow-100) { background-color: rgba(var(--g-hue-yellow), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-lime-50, .bg-lime-100) { background-color: rgba(var(--g-hue-lime), var(--g-tint-a)) !important; } :is(.graphite, .graphite-scope) :is(.bg-teal-50, .bg-teal-100) { background-color: rgba(var(--g-hue-teal), var(--g-tint-a)) !important; } /* тёмный пастельный текст (пара к светлой подложке) → `<оттенок>-300` из спектра */ :is(.graphite, .graphite-scope) :is(.text-green-600, .text-green-700, .text-green-800) { color: var(--g-ink-green) !important; } :is(.graphite, .graphite-scope) :is(.text-emerald-600, .text-emerald-700, .text-emerald-800) { color: var(--g-ink-emerald) !important; } :is(.graphite, .graphite-scope) :is(.text-cyan-600, .text-cyan-700, .text-cyan-800) { color: var(--g-ink-cyan) !important; } :is(.graphite, .graphite-scope) :is(.text-sky-600, .text-sky-700, .text-sky-800) { color: var(--g-ink-sky) !important; } :is(.graphite, .graphite-scope) :is(.text-blue-600, .text-blue-700, .text-blue-800) { color: var(--g-ink-blue) !important; } :is(.graphite, .graphite-scope) :is(.text-indigo-600, .text-indigo-700, .text-indigo-800) { color: var(--g-ink-indigo) !important; } :is(.graphite, .graphite-scope) :is(.text-violet-600, .text-violet-700, .text-violet-800, .text-purple-600, .text-purple-700, .text-purple-800) { color: var(--g-ink-violet) !important; } :is(.graphite, .graphite-scope) :is(.text-fuchsia-600, .text-fuchsia-700, .text-fuchsia-800) { color: var(--g-ink-fuchsia) !important; } :is(.graphite, .graphite-scope) :is(.text-pink-600, .text-pink-700, .text-pink-800) { color: var(--g-ink-pink) !important; } :is(.graphite, .graphite-scope) :is(.text-rose-600, .text-rose-700, .text-rose-800) { color: var(--g-ink-rose) !important; } :is(.graphite, .graphite-scope) :is(.text-red-600, .text-red-700, .text-red-800) { color: var(--g-ink-red) !important; } :is(.graphite, .graphite-scope) :is(.text-orange-600, .text-orange-700, .text-orange-800) { color: var(--g-ink-orange) !important; } :is(.graphite, .graphite-scope) :is(.text-amber-600, .text-amber-700, .text-amber-800) { color: var(--g-ink-amber) !important; } :is(.graphite, .graphite-scope) :is(.text-yellow-600, .text-yellow-700, .text-yellow-800) { color: var(--g-ink-yellow) !important; } :is(.graphite, .graphite-scope) :is(.text-lime-600, .text-lime-700, .text-lime-800) { color: var(--g-ink-lime) !important; } :is(.graphite, .graphite-scope) :is(.text-teal-600, .text-teal-700, .text-teal-800) { color: var(--g-ink-teal) !important; } /* ── 13.5 Пастельный текст 400/500 → тот же `<оттенок>-300` ──────────────────── * Замер нашёл «почти правильные» оттенки: `amber-400 #fbbf24` (43×, индикатор * несохранённых правок), `emerald-400 #34d399` (19×, «сохранено»), `red-500` * (14×, опасные действия). Они уже тёмнотемные, но каждый — своя нота мимо * спектра. Сводим к одному ряду -300, чтобы статусы говорили одним голосом. */ :is(.graphite, .graphite-scope) :is(.text-green-400, .text-green-500) { color: var(--g-ink-green) !important; } :is(.graphite, .graphite-scope) :is(.text-emerald-400, .text-emerald-500) { color: var(--g-ink-emerald) !important; } :is(.graphite, .graphite-scope) :is(.text-cyan-400, .text-cyan-500) { color: var(--g-ink-cyan) !important; } :is(.graphite, .graphite-scope) :is(.text-sky-400, .text-sky-500) { color: var(--g-ink-sky) !important; } :is(.graphite, .graphite-scope) :is(.text-blue-400, .text-blue-500) { color: var(--g-ink-blue) !important; } :is(.graphite, .graphite-scope) :is(.text-indigo-400, .text-indigo-500) { color: var(--g-ink-indigo) !important; } :is(.graphite, .graphite-scope) :is(.text-violet-400, .text-violet-500, .text-purple-400, .text-purple-500) { color: var(--g-ink-violet) !important; } :is(.graphite, .graphite-scope) :is(.text-fuchsia-400, .text-fuchsia-500) { color: var(--g-ink-fuchsia) !important; } :is(.graphite, .graphite-scope) :is(.text-pink-400, .text-pink-500) { color: var(--g-ink-pink) !important; } :is(.graphite, .graphite-scope) :is(.text-rose-400, .text-rose-500) { color: var(--g-ink-rose) !important; } :is(.graphite, .graphite-scope) :is(.text-red-400, .text-red-500) { color: var(--g-ink-red) !important; } :is(.graphite, .graphite-scope) :is(.text-orange-400, .text-orange-500) { color: var(--g-ink-orange) !important; } :is(.graphite, .graphite-scope) :is(.text-amber-400, .text-amber-500) { color: var(--g-ink-amber) !important; } :is(.graphite, .graphite-scope) :is(.text-yellow-400, .text-yellow-500) { color: var(--g-ink-yellow) !important; } :is(.graphite, .graphite-scope) :is(.text-lime-400, .text-lime-500) { color: var(--g-ink-lime) !important; } :is(.graphite, .graphite-scope) :is(.text-teal-400, .text-teal-500) { color: var(--g-ink-teal) !important; } /* почти-белый текст (`slate-50` #f8fafc и родня) → основной тон системы #e8e8e8: чистая белизна на тёмном бьёт по глазам и ломает лестницу яркостей */ :is(.graphite, .graphite-scope) :is(.text-slate-50, .text-slate-100, .text-gray-50, .text-gray-100, .text-zinc-50, .text-zinc-100, .text-neutral-50, .text-neutral-100) { color: var(--g-ink) !important; } /* ── 16. СИНИЕ КНОПКИ В ПЛАВАЮЩИХ ОКНАХ (легаси-правило продукта) ──────────────── * 🔴 Найдено прогоном канона «панель свойств» 2026-07-27, ЗАМЕРОМ источника правила: * `[data-theme="dark"] button:not(.graph-editor-container *):not(.graph-editor-container button)` * → `rgb(59,130,246)` * Продуктовое легаси красит СПЛОШЬ СИНИМ любую кнопку в тёмной теме, а из-под правила * выведены только кнопки ВНУТРИ `.graph-editor-container`. Окно WindowC — ПОРТАЛ в body, * снаружи контейнера (замер: `внутриКонтейнера: false`), поэтому исключение до него не * достаёт: библиотека пузырей показывала три сплошные синие плашки-шаблона вместо тихого * списка. Это ровно пункт B10 канона («порталам обязательны тёмные токены»), просто * маркеров `.wc-uniform` оказалось мало — легаси тяжелее по специфичности. * * 🔴🔴 САМОЕ ВАЖНОЕ (нашлось только замером, две неверные гипотезы до этого): * `data-theme="dark"` стоит НЕ на `` — там как раз `light`. Его ставит на СЕБЯ * КАЖДЫЙ тёмный портал: `div.wc-uniform.dark.gr-dark-panel.gr-surface[data-theme="dark"]`. * То есть механизм, которым порталы ЗАТЕМНЯЮТСЯ, сам же и ВКЛЮЧАЕТ легаси-правило * синих кнопок. Отсюда два следствия: * · носитель темы и маркер панели — ОДИН И ТОТ ЖЕ элемент, поэтому селектор * `[data-theme="dark"] .wc-uniform button` (с пробелом) НЕ матчится — нужен * КОМПАУНД `[data-theme="dark"]:is(...)` без пробела; * · чинится это раз и навсегда для всех порталов сразу, а не для окна пузырей. * * 🔴 ПОЧЕМУ НЕЛЬЗЯ «ПРОСТО СБРОСИТЬ ФОН У ВСЕХ КНОПОК»: правило легаси весит (0,3,2) * и стоит с `!important`; всё, что его перебьёт, перебьёт и утилиты Tailwind (0,1,0) — * вместе с синим умрут НАМЕРЕННЫЕ акцентные кнопки (`bg-primary`). Поэтому бьём адресно: * сопоставляем КОНКРЕТНЫЕ фоновые утилиты, которые кнопка объявила сама. * 🔴 Вес добираем `:not(.bg-primary)` — это (0,1,0) сверху, итог (0,4,1) > (0,3,2), и * guard осмысленный, а не хак: акцентную кнопку правило и не должно трогать. */ /* 🔴 ПОРЯДОК ВАЖЕН. Первый заход был «сбросить фон у кнопок БЕЗ фоновой утилиты» через `:not([class*="bg-"])` — и промахнулся: подстрока `bg-` есть и в `hover:bg-accent`, поэтому ghost-кнопки (у которых фон только на ховере) под правило не попадали и оставались легаси-синими. Замер поймал: кнопка режима «Hotspot» — `rgb(59,130,246)`. Правильная схема — БАЗА + ЯВНЫЕ УТИЛИТЫ: сначала гасим фон у всех кнопок портала, потом (правилами ВЫШЕ по файлу… точнее НИЖЕ, они и выигрывают при равном весе) возвращаем фон тем, кто объявил его сам. Guard `:not(.bg-none):not(.bg-void)` — классы, которых в проекте нет: они ничего не отбирают, а нужны только чтобы добрать вес до (0,4,1) и перебить легаси (0,3,2) с его `!important`. */ [data-theme="dark"]:is(.graphite, .graphite-scope) button:not(.bg-none):not(.bg-void), [data-theme="dark"] :is(.graphite, .graphite-scope) button:not(.bg-none):not(.bg-void) { background-color: transparent !important; } [data-theme="dark"]:is(.graphite, .graphite-scope) button:is(.bg-background, .bg-card, .bg-white, .bg-popover):not(.bg-primary), [data-theme="dark"] :is(.graphite, .graphite-scope) button:is(.bg-background, .bg-card, .bg-white, .bg-popover):not(.bg-primary) { background-color: var(--g-panel) !important; } [data-theme="dark"]:is(.graphite, .graphite-scope) button:is(.bg-muted, .bg-secondary, .bg-accent):not(.bg-primary), [data-theme="dark"] :is(.graphite, .graphite-scope) button:is(.bg-muted, .bg-secondary, .bg-accent):not(.bg-primary) { background-color: var(--g-raised) !important; } /* 🔴 АКЦЕНТНУЮ кнопку легаси перехватывает ТОЖЕ — и это коварнее всего: `bg-primary` выглядит «правильно синей», но это ДРУГОЙ синий (`#3b82f6` вместо акцента `#2563eb`), потому что утилита (0,1,0) не может побить легаси (0,3,2) с `!important`. Замер в окне WindowC: обе кнопки режима — `rgb(59,130,246)`. Возвращаем им акцент системы. Вес добираем `:not(.bg-transparent)` — у акцентной кнопки этого класса нет никогда. */ [data-theme="dark"]:is(.graphite, .graphite-scope) button.bg-primary:not(.bg-transparent), [data-theme="dark"] :is(.graphite, .graphite-scope) button.bg-primary:not(.bg-transparent) { background-color: var(--g-accent) !important; }