Типографика в @layer components

[khaliulin]

Проблема

Классы типографики задают color, но подключаются вне слоёв каскада. Unlayered CSS всегда сильнее layered, поэтому утилиты Tailwind не могут переопределить цвет текста:

<h2 class="title-h2 text-white">Заголовок на тёмном фоне</h2>
<!-- ожидаем белый, получаем #181A1F -->

<p class="body-regular-base text-color-secondary">Подпись</p>
<!-- серый не применяется -->

Продуктовые команды вынуждены писать text-white! на каждом таком месте.

Убрать color из классов нельзя: он часть публичного API именования — из 183 селекторов 145 содержат цвет как смысловую часть (-secondary, -disabled, -primary, -danger).

Решение

Пакет объявляет порядок слоёв и кладёт всё своё содержимое в components:

@layer theme, base, components, utilities;

@layer components {
    /* все 183 селектора без изменений */
}

Содержимое правил не менялось — только объявление порядка и обёртка.

Почему components: утилиты (text-*) становятся сильнее типографики, а preflight в base — слабее, поэтому сбросы h1..h6 { font-size: inherit } не ломают заголовки. Поведение идентично обходу @import '...' layer(components), но работает и при подключении через CDN <link>, где layer() недоступен.

Почему объявление порядка обязательно: позиция слоя определяется первым объявлением. Без этой строки при подключении пакета до Tailwind порядок стал бы components, theme, base, utilities — и preflight убил бы размеры заголовков.

Проверка

Замеры getComputedStyle на Tailwind v4.3.3, до и после:

Сценарий	3.2.2	4.0.0
title-h2 text-white	rgb(24,26,31) ❌	rgb(255,255,255) ✅
body-regular-base text-color-secondary	rgb(24,26,31) ❌	rgb(133,136,142) ✅
title-h2 без утилит (контроль preflight)	20px/600 ✅	20px/600 ✅
title-h2 text-white! (текущий обход)	белый ✅	белый ✅
data-theme="dark"	белый ✅	белый ✅

Прогнаны оба порядка подключения — пакет до Tailwind и после — результаты идентичны.

Целостность сборки: 177 классов и 186 color-деклараций до и после, clean-css сохраняет @layer корректно — минификатор и workflow публикации не менялись.

Совместимость

Мажорная версия 4.0.0: меняется сила каскада, правила, которые раньше проигрывали пакету, теперь могут начать применяться.

• Обходы text-white! продолжают работать — чистить их можно постепенно
• Переопределение обычным CSS вне слоёв работает как раньше
• Переопределение из слоя base перестаёт работать — правила нужно перенести в components или в CSS вне слоёв

Отдельно

CDN-копия (public-static.cdek.ru/common/typography/...) заливается вне этого репозитория — командам на <link> понадобится новый путь версии.