@rt-tools/ui-kit-v2 0.11.0 → 0.13.0

package/src/styles/_scrollbar.scss

@@ -5,7 +5,11 @@
     // двигается только цвет, поэтому раскладка стоит на месте.
     // Стандартные свойства объявлены рядом с псевдоэлементами: одни понимает одна ветка
     // браузеров, другие — другая, и написанные порознь они расходятся видом.
-    * {
+    // Правила стоят только на узлах кита — у них класс с приставкой `rt-`. Стандартное свойство,
+    // поставленное всем узлам, выключает в Chrome `::-webkit-scrollbar` у всего приложения, а
+    // псевдоэлементы на всех узлах красили бы полосы приложения видом кита. Вес селектора нулевой,
+    // и своё правило приложения перебивает его без счёта.
+    :where([class^='rt-'], [class*=' rt-']) {
         scrollbar-color: transparent transparent;
         scrollbar-width: thin;
     }
@@ -13,39 +17,39 @@
     // Проявляется ползунок наведением на саму зону, а не на себя: навести на невидимое нечем.
     // Фокус внутри зоны показывает его наравне — прокрутка с клавиатуры идёт без указателя, и
     // человек иначе не видит ни того, где он в списке, ни того, что список прокручивается.
-    *:hover,
-    *:focus-within {
+    :where([class^='rt-'], [class*=' rt-']):hover,
+    :where([class^='rt-'], [class*=' rt-']):focus-within {
         scrollbar-color: var(--rt-color-border-default) transparent;
     }
 
-    ::-webkit-scrollbar {
+    :where([class^='rt-'], [class*=' rt-'])::-webkit-scrollbar {
         width: 12px;
     }
 
-    ::-webkit-scrollbar:horizontal {
+    :where([class^='rt-'], [class*=' rt-'])::-webkit-scrollbar:horizontal {
         height: 12px;
     }
 
-    ::-webkit-scrollbar-thumb {
+    :where([class^='rt-'], [class*=' rt-'])::-webkit-scrollbar-thumb {
         border: var(--rt-border-width-thick) solid transparent;
         border-radius: var(--rt-radius-md);
         background: transparent;
         background-clip: content-box;
     }
 
-    *:hover::-webkit-scrollbar-thumb,
-    *:focus-within::-webkit-scrollbar-thumb {
+    :where([class^='rt-'], [class*=' rt-']):hover::-webkit-scrollbar-thumb,
+    :where([class^='rt-'], [class*=' rt-']):focus-within::-webkit-scrollbar-thumb {
         background: var(--rt-color-border-default);
         background-clip: content-box;
     }
 
-    ::-webkit-scrollbar-thumb:hover {
+    :where([class^='rt-'], [class*=' rt-'])::-webkit-scrollbar-thumb:hover {
         border: var(--rt-border-width-medium) solid transparent;
         background: var(--rt-color-border-strong);
         background-clip: content-box;
     }
 
-    ::-webkit-scrollbar-track:hover {
+    :where([class^='rt-'], [class*=' rt-'])::-webkit-scrollbar-track:hover {
         border: var(--rt-border-width-thin) solid var(--rt-color-bg-subtle);
     }
 
@@ -53,11 +57,11 @@
     // экране указателя нет вовсе, а признак прокручиваемости зоны нужен ровно так же.
     // Ветка hover-none: наведения на этом экране не бывает.
     @media (hover: none) {
-        * {
+        :where([class^='rt-'], [class*=' rt-']) {
             scrollbar-color: var(--rt-color-border-default) transparent;
         }
 
-        ::-webkit-scrollbar-thumb {
+        :where([class^='rt-'], [class*=' rt-'])::-webkit-scrollbar-thumb {
             background: var(--rt-color-border-default);
             background-clip: content-box;
         }

package/src/styles/_semantic-lists.scss

@@ -0,0 +1,89 @@
+/* Built by the generator `tools/build-tokens-v2.mjs` from `tokens.source.mjs` — edited there, not here:
+   an edit on the spot is lost on the next build, and `pnpm run check:tokens-build` names it. */
+
+/* The light theme's assignments of the list panel, the pagination bar and the empty list. */
+
+@mixin rt-theme-light-list-tokens {
+    /* Кнопки действий на панели списка — свои и приложения. Свой вид оставляет их кнопками-
+       значками без подъёма; материальный набор делает из них круглые кнопки действия первого кита. */
+    --rt-list-action-gap: var(--rt-space-sm);
+    --rt-list-action-divider-height: var(--rt-size-5);
+    --rt-list-action-radius: var(--rt-radius-md);
+    --rt-list-action-shadow: var(--rt-shadow-none);
+    --rt-list-action-shadow-hover: var(--rt-shadow-none);
+    --rt-list-action-icon-size: var(--rt-size-5);
+    --rt-list-action-color: var(--rt-color-text-primary);
+    --rt-list-action-color-hover: var(--rt-color-text-primary);
+    --rt-list-action-color-bg-hover: var(--rt-icon-button-color-bg-hover);
+
+    /* Значки, кнопки и копирование таблицы списка: материальный набор рисует их, как первый кит. */
+    --rt-list-table-icon-size: 0px;
+    --rt-list-table-icon-color: var(--rt-color-text-primary);
+    --rt-list-table-head-divider-color: var(--rt-color-border-strong);
+    --rt-list-table-button-size: var(--rt-control-height-md);
+    --rt-list-table-button-radius: var(--rt-radius-md);
+    --rt-list-copy-button-size: var(--rt-control-height-sm);
+    --rt-list-copy-button-radius: var(--rt-radius-md);
+    --rt-list-copy-button-bg: transparent;
+    --rt-list-copy-button-bg-hover: var(--rt-icon-button-color-bg-hover);
+    --rt-list-copy-button-color: var(--rt-color-text-primary);
+
+    /* Подпись флажка «отметить все» на панели списка: свой вид — текст, материальный набор —
+       приглушённый серый первого кита. */
+    --rt-list-selector-label-color: var(--rt-color-text-primary);
+
+    /* Полоса страниц rt-pagination: ячейка страницы, текущая страница, стрелки, подпись
+       диапазона и поле размера. Свой вид — прежние значения; материальный набор делает из них
+       полосу первого кита. */
+    --rt-pagination-justify: space-between;
+    --rt-pagination-padding-y: var(--rt-space-4);
+    --rt-pagination-padding-x: var(--rt-space-xs);
+    --rt-pagination-gap: var(--rt-space-md);
+    --rt-pagination-nav-gap: var(--rt-space-xs);
+    --rt-pagination-range-display: inline;
+    --rt-pagination-box-size: var(--rt-space-xl);
+    --rt-pagination-box-radius: var(--rt-radius-md);
+    --rt-pagination-box-color-border: var(--rt-color-border-default);
+    --rt-pagination-box-color-text: var(--rt-color-text-primary);
+    --rt-pagination-box-current-color-bg: var(--rt-color-bg-surface-subtle);
+    --rt-pagination-box-current-color-text: var(--rt-color-text-primary);
+    --rt-pagination-box-current-color-border: var(--rt-color-border-strong);
+    --rt-pagination-box-current-font-weight: var(--rt-font-weight-semibold);
+    --rt-pagination-arrow-size: var(--rt-control-height-sm);
+    --rt-pagination-arrow-radius: var(--rt-radius-md);
+    --rt-pagination-arrow-shadow: var(--rt-shadow-none);
+    --rt-pagination-arrow-color: var(--rt-color-text-primary);
+    --rt-pagination-per-page-gap: var(--rt-space-sm);
+    --rt-pagination-per-page-label-white-space: normal;
+    --rt-pagination-field-height: var(--rt-input-height-md);
+    --rt-pagination-field-radius: var(--rt-input-radius);
+    --rt-pagination-field-color-border: var(--rt-input-color-border);
+    --rt-pagination-field-padding-x: var(--rt-input-padding-x);
+    --rt-pagination-field-color-bg: var(--rt-input-color-bg);
+    --rt-pagination-field-color-text: var(--rt-input-color-text);
+
+    /* Отступы вокруг тулбара списка и нижний отступ содержимого. Свой вид держит полосу с отступом
+       8px сверху и снизу вплотную к таблице; материальный набор даёт 16px сверху и 16px до таблицы. */
+    --rt-list-toolbar-padding-top: var(--rt-space-2);
+    --rt-list-toolbar-padding-bottom: var(--rt-space-2);
+    --rt-list-toolbar-gap: 0px;
+    --rt-list-content-padding-bottom: 0px;
+
+    /* Пустой список — заглушка rt-empty-state. Свой вид держит значок в сером круге и заголовок
+       среднего размера; материальный набор даёт значок 48px без круга и крупный заголовок первого кита. */
+    --rt-list-empty-icon-wrap-size: var(--rt-size-16);
+    --rt-list-empty-icon-wrap-bg: var(--rt-color-bg-subtle);
+    --rt-list-empty-icon-size: var(--rt-size-8);
+    --rt-list-empty-title-size: var(--rt-text-md);
+    --rt-list-empty-title-weight: var(--rt-font-weight-medium);
+
+    /* Плашка колонки в панели настройки списка под материальным набором: скругление первого кита. */
+    --rt-list-settings-item-radius: var(--rt-radius-sm);
+
+    /* Строка поля в фильтре и место под заглушку и крутилку пустого списка. Свой вид держит
+       строку по размеру шрифта и заглушку во всю высоту списка; материальный набор даёт строку 24px,
+       как у поля Material первого кита. */
+    --rt-list-filter-line-height: var(--rt-leading-none);
+    --rt-list-placeholder-min-height: var(--rt-size-60);
+    --rt-list-placeholder-grow: 1;
+}

package/src/styles/_semantic.scss

@@ -8,6 +8,8 @@
    pair «light ↔ dark» cannot be shown while the application stands in the dark theme —
    the container would inherit the dark values, and both halves would show the same. */
 
+@use './semantic-lists' as lists;
+
 @mixin rt-theme-light-tokens {
     /* Background */
     --rt-color-bg-page: var(--rt-neutral-50);
@@ -136,6 +138,11 @@
     /* State */
     --rt-color-state-success: var(--rt-success-500); /* rt-theme-shared: цвет статуса один в обеих темах */
     --rt-color-state-success-bg: var(--rt-success-50);
+
+    /* Подпись успеха на поверхности — пункт меню, строка статуса. Сам статус как текст порога
+       контраста не берёт ни на белом, ни на графите: он для значка и заливки. Пара к
+       warning-text и error-text. */
+    --rt-color-state-success-text: var(--rt-success-600);
     --rt-color-state-warning: var(--rt-warning-500); /* rt-theme-shared: цвет статуса один в обеих темах */
     --rt-color-state-warning-bg: var(--rt-warning-50);
 
@@ -148,6 +155,17 @@
     --rt-color-state-info: var(--rt-info-500); /* rt-theme-shared: цвет статуса один в обеих темах */
     --rt-color-state-info-bg: var(--rt-info-50);
 
+    /* Data table (rt-data-table) — заливка шапки. Своё имя, а не подложка роли: в материальном
+       наборе шапка залита цветом залитого поля, как у первого кита, а подложка роли остаётся
+       серой у всех остальных частей кита. Тёмная тема отвечает на имя сама: без ответа она
+       уступила бы его материальному набору, и тёмная шапка получила бы светлую заливку. */
+    --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+
+    /* Залитое поле (вид fill у поля ввода, числа, даты и выбора) — черта снизу. Своё имя,
+       а не рамка роли: в материальном наборе она берёт цвет черты поля Material, а рамка роли
+       остаётся светлой у всех остальных частей кита. Тёмная тема отвечает на имя сама. */
+    --rt-color-field-fill-underline: var(--rt-color-border-strong);
+
     /* Stepper (rt-stepper) — рельса прогресса. Текущий шаг — янтарный (одинаков
        в обеих темах); трек/прогресс переопределяются в dark на приглушённые. */
     --rt-color-stepper-current: var(--rt-amber-400); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
@@ -181,6 +199,43 @@
     --rt-color-skeleton-base: var(--rt-neutral-100);
     --rt-color-skeleton-wave: var(--rt-neutral-50);
 
+    /* Панели над страницей — меню, выпадающий список, подсказка: скругление и тень. Свой вид
+       держит ступени кита; материальный набор даёт числа и подъём первого кита. */
+    --rt-overlay-menu-radius: var(--rt-radius-md);
+    --rt-overlay-menu-shadow: var(--rt-shadow-lg);
+    --rt-overlay-select-radius: var(--rt-input-radius);
+    --rt-overlay-select-shadow: var(--rt-shadow-md);
+    --rt-overlay-tooltip-radius: var(--rt-radius-sm);
+    --rt-overlay-tooltip-shadow: var(--rt-shadow-md);
+
+    /* Меню и выпадающий список: фон, отступ и вес подписей меню, красный опасного пункта, пункт
+       списка и отметка выбранного. Свой вид держит прежние значения; материальный набор — первого кита. */
+    --rt-overlay-menu-bg: var(--rt-color-bg-surface);
+    --rt-overlay-menu-padding-y: var(--rt-space-xs);
+    --rt-overlay-menu-item-weight: var(--rt-font-weight-regular);
+    --rt-overlay-menu-danger-color: var(--rt-color-state-error-text);
+    --rt-overlay-select-option-font-size: var(--rt-input-font-size);
+    --rt-overlay-select-selected-bg: var(--rt-color-action-primary-subtle);
+    --rt-overlay-select-selected-weight: var(--rt-font-weight-semibold);
+    --rt-overlay-select-check-display: none;
+    --rt-overlay-menu-current-bg: var(--rt-color-bg-hover);
+
+    /* Размеры меню и выпадающего списка, рамка панели списка и неактивная кнопка-значок. Свой вид
+       держит прежние значения; материальный набор — числа первого кита. */
+    --rt-overlay-menu-min-width: 180px;
+    --rt-overlay-menu-item-min-height: auto;
+    --rt-overlay-menu-item-padding-y: var(--rt-space-sm);
+    --rt-overlay-menu-item-padding-x: var(--rt-space-md);
+    --rt-overlay-menu-item-icon-size: var(--rt-size-4);
+    --rt-overlay-menu-sm-item-min-height: var(--rt-overlay-menu-item-min-height);
+    --rt-overlay-menu-sm-item-icon-size: var(--rt-overlay-menu-item-icon-size);
+    --rt-overlay-menu-danger-label-color: var(--rt-overlay-menu-danger-color);
+    --rt-overlay-select-option-min-height: auto;
+    --rt-overlay-select-panel-border-width: var(--rt-input-border-width);
+    --rt-icon-button-disabled-opacity: 0.5;
+    --rt-icon-button-disabled-color: currentcolor;
+    --rt-icon-button-disabled-fill: 100%;
+
     /* Spacing aliases — named semantic aliases на primitive numeric scale */
     --rt-space-2xs: var(--rt-space-0-5); /* 2px */
     --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -208,6 +263,9 @@
     --rt-input-color-border-error: var(--rt-color-state-danger);
     --rt-input-color-text: var(--rt-color-text-primary);
     --rt-input-color-text-placeholder: var(--rt-color-text-muted);
+    --rt-input-icon-color: var(--rt-neutral-600);
+    --rt-input-icon-size: var(--rt-size-4);
+    --rt-input-gap: var(--rt-space-sm);
 
     /* Sizes (single-line height scale) */
     --rt-input-height-sm: var(--rt-control-height-sm);
@@ -219,6 +277,26 @@
        внутри flex-баров контрол без ограничения растягивается на всю строку. */
     --rt-input-max-width: var(--rt-control-max-width);
 
+    /* Поиск списка (rt-data-list). Свои имена, а не имена поля: в материальном наборе поиск
+       списка — поле Material первого кита, 52px высотой, со скруглением 4px и рамкой цвета
+       outline темы, а остальные поля набора остаются полями первого кита вне Material. */
+    --rt-list-search-height: var(--rt-input-height-sm);
+    --rt-list-search-radius: var(--rt-input-radius);
+    --rt-list-search-color-border: var(--rt-input-color-border);
+    --rt-list-search-color-bg: var(--rt-input-color-bg);
+    --rt-list-search-width: var(--rt-size-60);
+    --rt-list-search-padding-x: var(--rt-input-padding-x);
+    --rt-list-search-gap: var(--rt-input-gap);
+    --rt-list-search-font-size: var(--rt-input-font-size);
+    --rt-list-search-icon-size: var(--rt-input-icon-size);
+    --rt-list-search-icon-color: var(--rt-input-icon-color);
+    --rt-list-search-color-placeholder: var(--rt-input-color-text-placeholder);
+
+    /* Панель настройки колонок списка — заливка плашки колонки и тон значков на ней.
+       Свой вид берёт подложку и приглушённый текст; материальный набор отдаёт их теме. */
+    --rt-list-settings-item-bg: var(--rt-color-bg-subtle);
+    --rt-list-settings-icon-color: var(--rt-color-text-muted);
+
     /* Скругление контрола — назначение, а не ступень на месте. Кнопка, поле ввода и
        всё, что стоит с ними в строке, берут его отсюда: набор оформления живёт слоем
        назначений и до ступени, взятой компонентом напрямую, не достаёт. */
@@ -394,17 +472,10 @@
     --rt-field-value-font-size: var(--rt-text-sm);
     --rt-field-value-color: var(--rt-color-text-primary);
     --rt-field-value-empty-color: var(--rt-color-text-muted);
+
+    @include lists.rt-theme-light-list-tokens;
 }
 
 :root {
     @include rt-theme-light-tokens;
 }
-
-/* On touch devices an input is not smaller than 16px: WebKit (all of iOS, Chrome included)
-   zooms the page on focusing a field with font-size < 16px — hence the horizontal
-   shift of the layout. The desktop keeps the dense 14px. */
-@media (pointer: coarse) {
-    :root {
-        --rt-input-font-size: var(--rt-text-md);
-    }
-}

package/src/styles/_theme-dark.scss

@@ -16,6 +16,9 @@
    a pair is visible right there rather than caught by matching two files. */
 
 @mixin rt-theme-dark-tokens {
+    /* The Material colours of the page are resolved dark under the kit's dark theme. */
+    color-scheme: dark;
+
     /* Background — тёплый графит */
     --rt-color-bg-page: var(--rt-charcoal-900);
     --rt-color-bg-surface: var(--rt-charcoal-800);
@@ -42,12 +45,42 @@
 
     /* Input border видим в dark (в light — transparent). */
     --rt-input-color-border: var(--rt-charcoal-border);
+    --rt-list-search-color-border: var(--rt-input-color-border);
+    --rt-list-search-color-bg: var(--rt-input-color-bg);
+    --rt-list-search-icon-color: var(--rt-input-icon-color);
+    --rt-list-search-color-placeholder: var(--rt-input-color-text-placeholder);
+    --rt-list-settings-item-bg: var(--rt-color-bg-subtle);
+    --rt-list-settings-icon-color: var(--rt-color-text-muted);
+    --rt-list-action-color: var(--rt-color-text-primary);
+    --rt-list-action-color-hover: var(--rt-color-text-primary);
+    --rt-list-action-color-bg-hover: var(--rt-icon-button-color-bg-hover);
+    --rt-list-table-icon-color: var(--rt-color-text-primary);
+    --rt-list-table-head-divider-color: var(--rt-color-border-strong);
+    --rt-list-copy-button-bg: transparent;
+    --rt-list-copy-button-bg-hover: var(--rt-icon-button-color-bg-hover);
+    --rt-list-copy-button-color: var(--rt-color-text-primary);
+    --rt-list-selector-label-color: var(--rt-color-text-primary);
+    --rt-pagination-box-color-border: var(--rt-color-border-default);
+    --rt-pagination-box-color-text: var(--rt-color-text-primary);
+    --rt-pagination-box-current-color-bg: var(--rt-color-bg-surface-subtle);
+    --rt-pagination-box-current-color-text: var(--rt-color-text-primary);
+    --rt-pagination-box-current-color-border: var(--rt-color-border-strong);
+    --rt-pagination-arrow-color: var(--rt-color-text-primary);
+    --rt-pagination-field-color-border: var(--rt-input-color-border);
+    --rt-pagination-field-color-bg: var(--rt-input-color-bg);
+    --rt-pagination-field-color-text: var(--rt-input-color-text);
+    --rt-input-icon-color: var(--rt-neutral-600);
 
     /* Stepper — в dark рельса уходит от яркого синего к приглушённому серо-синему
        (текущий шаг остаётся янтарным из light-семантики). */
     --rt-color-stepper-track: var(--rt-navy-600);
     --rt-color-stepper-progress: var(--rt-slate-300);
 
+    /* Шапка таблицы — та же подложка роли, что в светлой: ответ стоит, чтобы тёмная тема
+       выигрывала у материального набора и на этом имени. */
+    --rt-color-table-head-bg: var(--rt-color-bg-surface-subtle);
+    --rt-color-field-fill-underline: var(--rt-color-border-strong);
+
     /* Навигация — вся шкала серых разворачивается: подложка уходит глубже
        поверхности, а приглушённые подписи становятся светлее фона, а не темнее.
        Плашка шапки садится на глубокий графит, активный пункт поднимается на
@@ -107,6 +140,8 @@
        общий bg-surface на обоих слил бы их в один силуэт. Тень на графите
        не работает, роль разделителя берёт на себя контраст. */
     --rt-toggle-color-track: var(--rt-charcoal-950);
+    --rt-toggle-color-track-on: var(--rt-color-action-primary);
+    --rt-toggle-color-border: var(--rt-color-border-strong);
     --rt-toggle-color-thumb: var(--rt-neutral-50);
     --rt-toggle-shadow-thumb: var(--rt-shadow-none);
 
@@ -120,6 +155,7 @@
     --rt-color-state-danger-bg: color-mix(in srgb, var(--rt-danger-500) 12%, transparent);
     --rt-color-state-error-text: var(--rt-danger-500);
     --rt-color-state-warning-text: var(--rt-warning-500);
+    --rt-color-state-success-text: var(--rt-success-400);
     --rt-color-state-info-bg: color-mix(in srgb, var(--rt-info-500) 12%, transparent);
 
     /* Chat — на графите светлые фоны пузырей нечитаемы: входящее уходит в

package/src/styles/_theme-scope.scss

@@ -0,0 +1,111 @@
+/* Built by the generator `tools/build-tokens-v2.mjs` from `tokens.source.mjs` — edited there, not here:
+   an edit on the spot is lost on the next build, and `pnpm run check:tokens-build` names it. */
+
+/* A local piece of the theme: the sign answers on an ordinary node too, not at the root of the page
+   alone. A dark card inside a light page, a light card inside a dark one, and either of them inside
+   a page of the styling set.
+
+   Every rule here declares the whole set of the assignments on one node rather than only the
+   difference from the page. That is not a repetition: the value of a property that refers to another
+   one is resolved where it is declared, not where it is read. A node carrying only the difference
+   inherits the rest from the root already resolved — by the values of the root — and the piece comes
+   out half of one theme and half of the other, whole and green in the frame.
+
+   The root is cut out of every rule by `:not(:root)`: there the layers already lie in the right
+   order, and laying the base over them once more would wipe the set on a dark page.
+
+   The file stands last in the aggregator: its rules are stronger than the root ones by their place,
+   not by specificity, and a piece must win over the page around it. */
+
+@use './semantic' as semantic;
+@use './theme-dark' as dark;
+@use './preset-material' as material;
+@use './coarse-pointer' as coarse;
+
+/* A light piece inside a page of another theme. */
+[data-theme='light']:not(:root) {
+    color-scheme: light;
+
+    @include semantic.rt-theme-light-tokens;
+    @include coarse.rt-coarse-pointer-tokens;
+}
+
+/* A dark piece inside a page of another theme. The light base goes under the dark answers, exactly
+   as it lies under them at the root: a piece carrying the dark answers alone would inherit the rest
+   from the root already resolved by the light values, and come out half dark. */
+[data-theme='dark']:not(:root) {
+    @include semantic.rt-theme-light-tokens;
+    @include dark.rt-theme-dark-tokens;
+    @include coarse.rt-coarse-pointer-tokens;
+}
+
+/* A node carrying the set on a light page. The set alone rewrites only its own names, and a name
+   whose value refers to one of them would stay resolved at the root by the base values: the text
+   button in a panel of the set kept the base blue while the brand beside it followed the theme. The
+   node therefore declares the light base under the set. The dark rules below have the same force and
+   stand after this one, so a node under a dark theme still takes them. */
+[data-preset='material']:not(:root),
+.rt-preset-material:not(:root) {
+    @include semantic.rt-theme-light-tokens;
+    @include material.rt-preset-material-tokens;
+    @include coarse.rt-coarse-pointer-tokens;
+}
+
+/* A piece carrying the set under a dark theme — of the page or of a piece around it. A component
+   draws the look of the first kit by carrying the set on its own host, and the plain rule of the set
+   would lay its light values over the dark ones the node inherited: the table came out light with
+   dark text in a dark piece. The node therefore declares the whole set in the order the root has —
+   light base, the set, the dark answers. A light piece between the dark one and the node answers
+   with the light base and the set; one level of such nesting is told apart, the next is not. */
+[data-theme='dark'] [data-preset='material'],
+[data-theme='dark'] .rt-preset-material,
+html.rt-theme-dark [data-preset='material'],
+html.rt-theme-dark .rt-preset-material {
+    @include semantic.rt-theme-light-tokens;
+    @include material.rt-preset-material-tokens;
+    @include dark.rt-theme-dark-tokens;
+    @include material.rt-preset-material-dark-tokens;
+    @include coarse.rt-coarse-pointer-tokens;
+}
+
+[data-theme='dark'] [data-theme='light'] [data-preset='material'],
+[data-theme='dark'] [data-theme='light'] .rt-preset-material,
+html.rt-theme-dark [data-theme='light'] [data-preset='material'],
+html.rt-theme-dark [data-theme='light'] .rt-preset-material {
+    @include semantic.rt-theme-light-tokens;
+    @include material.rt-preset-material-tokens;
+    @include coarse.rt-coarse-pointer-tokens;
+}
+
+/* A piece inside a page of the styling set, and a piece carrying the set itself. The set lies over
+   the light base and under the dark answers — the same order the root has, and there the order is
+   what the dark theme wins over the set by. */
+[data-preset='material'][data-theme='light']:not(:root),
+[data-preset='material'] [data-theme='light']:not(:root),
+.rt-preset-material[data-theme='light']:not(:root),
+.rt-preset-material [data-theme='light']:not(:root) {
+    @include semantic.rt-theme-light-tokens;
+    @include material.rt-preset-material-tokens;
+    @include coarse.rt-coarse-pointer-tokens;
+}
+
+[data-preset='material'][data-theme='dark']:not(:root),
+[data-preset='material'] [data-theme='dark']:not(:root),
+.rt-preset-material[data-theme='dark']:not(:root),
+.rt-preset-material [data-theme='dark']:not(:root) {
+    @include semantic.rt-theme-light-tokens;
+    @include material.rt-preset-material-tokens;
+    @include dark.rt-theme-dark-tokens;
+    @include material.rt-preset-material-dark-tokens;
+    @include coarse.rt-coarse-pointer-tokens;
+}
+
+/* The set and a dark theme both on the page root. The dark answers come after the set there by order,
+   and this rule lays the Material chains back over them: it is heavier than both root rules, so the
+   order of the files does not decide. */
+:root[data-theme='dark'][data-preset='material'],
+:root[data-theme='dark'].rt-preset-material,
+html.rt-theme-dark[data-preset='material'],
+html.rt-theme-dark.rt-preset-material {
+    @include material.rt-preset-material-dark-tokens;
+}

package/src/styles/tokens.coexist.scss

@@ -0,0 +1,3 @@
+// Вход сборки `styles/tokens.coexist.css` пакета: ступени второго кита на узле материального набора
+// на время, пока приложение держит оба кита. Удаляется вместе с первым китом.
+@use 'coexist';

package/src/styles/tokens.package.scss

@@ -0,0 +1,6 @@
+// Вход сборки `styles/tokens.css` пакета. Файл лежит на каталог выше исходников партиалов, и
+// адрес начертаний ему нужен свой: шрифты в пакете лежат в `src/assets/fonts`.
+@use 'fonts' with (
+    $rt-fonts-url: '../src/assets/fonts'
+);
+@use 'index';

package/styles/tokens.coexist.css

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+/* Built by the generator `tools/build-tokens-v2.mjs` from `tokens.source.mjs` — edited there, not here:
+   an edit on the spot is lost on the next build, and `pnpm run check:tokens-build` names it. */
+/* Coexistence with the first kit for the time of migration. The first kit declares ten steps of the
+   same names on the page root with its own values, and an application holding both kits gets them
+   inside the second kit's components: a 4px rounding becomes 8px. Here the second kit's values stand
+   on the preset node, and the preset is drawn by its own scale whatever lies on the root.
+
+   The selector outweighs the first kit's root by one step wherever the preset flag stands, the page
+   root included: there both kits declare the steps on the same node, and without the extra weight
+   the order of inclusion decides.
+
+   The application includes it only while it holds the first kit, and removes it together with it:
+   the values repeat the scale, so without the first kit the look does not change. */
+[data-preset=material]:is(:root, :not(:root)),
+.rt-preset-material:is(:root, :not(:root)) {
+  --rt-radius-xs: 2px;
+  --rt-radius-sm: 4px;
+  --rt-radius-md: 8px;
+  --rt-radius-lg: 10px;
+  --rt-radius-xl: 15px;
+  --rt-radius-2xl: 20px;
+  --rt-radius-full: 9999px;
+  --rt-shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
+  --rt-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 6%);
+  --rt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 6%);
+}