@rt-tools/ui-kit-v2 0.15.0 → 0.16.0

package/src/lib/components/side-menu/rt-side-menu.component.scss

@@ -0,0 +1,303 @@
+@layer rt-kit.components {
+    /* rt-side-menu — боковая навигация. ViewEncapsulation.None.
+       Host несёт класс блока: полоса пунктов, рядом панель подменю. Незакреплённая панель стоит над
+       страницей, закреплённая — в потоке рядом с полосой и сдвигает страницу. */
+
+    .rt-side-menu {
+        --rt-side-menu-rail-width: 5.5rem;
+        --rt-side-menu-panel-width: 15rem;
+        --rt-side-menu-panel-held-width: 30rem;
+        --rt-side-menu-mobile-width: 15rem;
+        --rt-side-menu-panel-radius: var(--rt-radius-lg);
+        --rt-side-menu-panel-shadow: var(--rt-shadow-nav-panel);
+        --rt-side-menu-item-radius: var(--rt-radius-full);
+        --rt-side-menu-resizer-border-width: var(--rt-border-width-thick);
+        --rt-side-menu-panel-border-width: var(--rt-border-width-thin);
+        --rt-side-menu-transition-duration: var(--rt-duration-fast);
+
+        /* Натянутую рукой ширину ставит привязка хоста; без неё панель берёт ширину оформления. */
+        --rt-side-menu-panel-dragged-width: 0px;
+
+        /* Ширина панели: наибольшее из оформления и натянутой рукой. */
+        --rt-side-menu-panel-shown-width: max(var(--rt-side-menu-panel-width), var(--rt-side-menu-panel-dragged-width));
+
+        position: relative;
+        display: flex;
+        height: 100%;
+        color: var(--rt-color-text-primary);
+
+        /* Полоса — область прокрутки, а та растягивает себя на всю ширину своим правилом того же
+           веса. Основа гибкой строки сильнее ширины, и полоса держит свою, в каком бы порядке ни
+           пришли стили. */
+        &__rail {
+            max-width: var(--rt-side-menu-rail-width);
+            height: 100%;
+            box-sizing: border-box;
+            flex: 0 0 var(--rt-side-menu-rail-width);
+            border-right: var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);
+            background: var(--rt-color-bg-surface);
+
+            /* Отступ области прокрутки оставлял подписи 56 пикселей из 88, и слово рвалось посреди. */
+            .rt-scroll-area__body {
+                padding-inline: var(--rt-space-1);
+            }
+        }
+
+        &__rail-list {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: var(--rt-space-md);
+            padding-block: var(--rt-space-sm);
+        }
+
+        &__rail-item {
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            align-items: center;
+            padding: 0;
+            border: 0;
+            background: transparent;
+            color: inherit;
+            cursor: pointer;
+            font: inherit;
+            gap: var(--rt-space-1);
+            text-decoration: none;
+
+            &:focus-visible {
+                outline: none;
+
+                .rt-side-menu__rail-icon {
+                    outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                }
+            }
+
+            &:hover .rt-side-menu__rail-icon,
+            &:active .rt-side-menu__rail-icon {
+                background: var(--rt-color-bg-hover);
+            }
+
+            &--active .rt-side-menu__rail-icon,
+            &--active:hover .rt-side-menu__rail-icon {
+                background: var(--rt-color-action-primary-subtle);
+                color: var(--rt-color-action-primary-on-surface);
+            }
+        }
+
+        &__rail-icon {
+            display: flex;
+            width: 3.5rem;
+            height: 2rem;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-side-menu-item-radius);
+            transition: background-color var(--rt-side-menu-transition-duration) ease;
+        }
+
+        &__rail-title {
+            max-width: 100%;
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
+            overflow-wrap: anywhere;
+            text-align: center;
+        }
+
+        &__backdrop {
+            position: fixed;
+            z-index: var(--rt-z-dropdown);
+            inset: 0;
+        }
+
+        &__panel {
+            position: absolute;
+            z-index: var(--rt-z-dropdown);
+            top: 0;
+            left: var(--rt-side-menu-rail-width);
+            display: flex;
+            width: var(--rt-side-menu-panel-shown-width);
+            height: 100%;
+            box-sizing: border-box;
+            flex-direction: column;
+            border-radius: 0 var(--rt-side-menu-panel-radius) var(--rt-side-menu-panel-radius) 0;
+            border-left: var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);
+            background: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-side-menu-panel-shadow);
+
+            &--held {
+                width: max(var(--rt-side-menu-panel-held-width), var(--rt-side-menu-panel-shown-width));
+            }
+
+            &--pinned {
+                --rt-side-menu-panel-radius: 0;
+                --rt-side-menu-panel-shadow: var(--rt-shadow-none);
+
+                position: relative;
+                left: 0;
+                flex-shrink: 0;
+            }
+        }
+
+        &__panel-head {
+            display: flex;
+            align-items: center;
+            padding: var(--rt-space-sm);
+            gap: var(--rt-space-2);
+        }
+
+        &__search {
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+
+        &__pin {
+            flex-shrink: 0;
+        }
+
+        &__panel-body {
+            min-height: 0;
+            flex: 1 1 auto;
+        }
+
+        &__sub-list {
+            display: flex;
+            flex-direction: column;
+            padding-block-end: var(--rt-space-sm);
+            padding-inline: var(--rt-space-2);
+        }
+
+        &__empty {
+            padding: var(--rt-space-md);
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+        }
+
+        /* Ручка стоит у правого края закреплённой панели по всей её высоте. */
+        &__resizer {
+            position: absolute;
+            z-index: var(--rt-z-dropdown);
+            top: 0;
+            bottom: 0;
+            left: calc(var(--rt-side-menu-rail-width) + var(--rt-side-menu-panel-shown-width) - var(--rt-space-2));
+            width: var(--rt-space-sm);
+            cursor: col-resize;
+
+            &:before {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 50%;
+                border-left: var(--rt-side-menu-resizer-border-width) solid transparent;
+                content: '';
+            }
+
+            &:hover:before,
+            &:focus-visible:before {
+                border-left-color: var(--rt-color-border-strong);
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+
+        /* Столбец узкого экрана держит свою ширину — как у меню телефона первого кита: без неё меню
+           растягивалось по самой длинной подписи, и строки не резались многоточием. Ширина — основой
+           гибкой строки, как у полосы: область прокрутки ставит себе ширину правилом того же веса.
+           Нулевой нижний предел не даёт самой длинной подписи раздуть основу. Уже экрана столбец не
+           бывает. */
+        &__mobile {
+            min-width: 0;
+            max-width: 100%;
+            height: 100%;
+            flex: 0 0 var(--rt-side-menu-mobile-width);
+            background: var(--rt-color-bg-surface);
+
+            /* Строки стоят в восьми пикселях от края столбца, как у меню телефона первого кита: отступ
+               области прокрутки отодвигал подложку активной строки на 24. */
+            .rt-scroll-area__body {
+                padding-inline: 0;
+            }
+        }
+
+        &__mobile-list,
+        &__mobile-sub {
+            display: flex;
+            flex-direction: column;
+            padding: var(--rt-space-sm);
+            gap: var(--rt-space-1);
+        }
+
+        &__mobile-item,
+        &__back {
+            display: flex;
+            width: 100%;
+            min-height: var(--rt-control-height-lg);
+            box-sizing: border-box;
+            align-items: center;
+            border: 0;
+            border-radius: var(--rt-side-menu-item-radius);
+            background: transparent;
+            color: inherit;
+            cursor: pointer;
+            font: inherit;
+            font-size: var(--rt-text-sm);
+
+            /* Подпись с 56 пикселей от края столбца, как у первого кита: значок — с 24, зазор 12. В шкале
+               шага 12 нет, он собран из двух. */
+            gap: calc(var(--rt-space-sm) + var(--rt-space-xs));
+            padding-inline: var(--rt-space-md);
+            text-align: start;
+            text-decoration: none;
+
+            &:hover {
+                background: var(--rt-color-bg-hover);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: calc(var(--rt-focus-ring-width) * -1);
+            }
+
+            &--active {
+                background: var(--rt-color-action-primary-subtle);
+                color: var(--rt-color-action-primary-on-surface);
+            }
+        }
+
+        /* Свой значок приложения — в полосе и в списке телефона: коробка размера значка пункта,
+           рисунок внутри занимает её целиком и красится через currentColor. */
+        &__own-icon {
+            --rt-side-menu-own-icon-size: var(--rt-size-5);
+
+            display: inline-flex;
+            width: var(--rt-side-menu-own-icon-size);
+            height: var(--rt-side-menu-own-icon-size);
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            color: inherit;
+            line-height: 1;
+
+            > * {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+
+        &__mobile-icon,
+        &__back-icon,
+        &__mobile-chevron {
+            flex-shrink: 0;
+        }
+
+        &__mobile-title,
+        &__back-label {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}

package/src/lib/components/side-menu/stories/component/test-side-menu-cell.component.scss

@@ -0,0 +1,27 @@
+@layer rt-kit.components {
+    /* Коробка показа: даёт меню высоту и становится местом отсчёта для панели и подложки. Свойство
+       `contain` делает её содержащим блоком и для фиксированной подложки, и оно же обрезает. */
+    .app-side-menu-cell {
+        width: 36rem;
+
+        /* Половина темы уже 36rem: без предела коробка вылезала за её край, и край кадра резал
+           меню. Предел берёт ширину половины, а вне пары тем коробка остаётся в 36rem. */
+        max-width: 100%;
+        height: 24rem;
+        border: 1px dashed var(--rt-color-border-subtle);
+        background: var(--rt-color-bg-page);
+        contain: paint;
+
+        &__slot {
+            padding: var(--rt-space-sm) 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            text-align: center;
+        }
+
+        &__own-icon {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

package/src/lib/components/side-menu/stories/component/test-side-menu.component.scss

@@ -0,0 +1,39 @@
+@layer rt-kit.components {
+    /* Меню во всю высоту окна и с тенью у края, как в истории первого кита: подменю выезжает над
+       страницей, и край меню виден на любом фоне. */
+    .app-side-menu {
+        --rt-side-menu-story-shadow: var(--rt-shadow-lg);
+
+        display: flex;
+        width: fit-content;
+        height: 100vh;
+        box-shadow: var(--rt-side-menu-story-shadow);
+
+        /* Низкий экран первого кита: окно высотой 360. */
+        &--short {
+            height: 22.5rem;
+        }
+
+        &__header {
+            display: flex;
+            width: 100%;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-md) 0;
+            border-bottom: 1px solid var(--rt-color-border-subtle);
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+        }
+
+        &__footer {
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            align-items: center;
+            padding-top: calc(var(--rt-space-sm) + var(--rt-space-xs));
+            border-top: 1px solid var(--rt-color-border-subtle);
+            color: var(--rt-color-text-primary);
+            gap: var(--rt-space-sm);
+        }
+    }
+}

package/src/lib/components/side-menu/sub-item/rt-side-menu-sub-item.component.scss

@@ -0,0 +1,203 @@
+@layer rt-kit.components {
+    /* rt-side-menu-sub-item — строка подменю бокового меню. ViewEncapsulation.None.
+       Host несёт класс блока; строка — ссылка или кнопка папки. */
+
+    .rt-side-menu-sub-item {
+        --rt-side-menu-sub-item-radius: var(--rt-radius-full);
+        --rt-side-menu-sub-item-transition-duration: var(--rt-duration-fast);
+
+        /* Маркер совпадения поиска — жёлтая подложка с тёмной подписью в обеих темах, как у первого кита. */
+        --rt-side-menu-sub-item-match-bg: var(--rt-yellow-400);
+        --rt-side-menu-sub-item-match-color: var(--rt-neutral-950);
+        --rt-side-menu-sub-item-match-radius: var(--rt-radius-xs);
+
+        display: block;
+
+        &__row {
+            /* Глубину вложения ставит шаблон на саму строку; здесь — значение строки верхнего уровня. */
+            --rt-side-menu-sub-item-depth: 0;
+
+            display: flex;
+            width: 100%;
+            min-height: var(--rt-control-height-md);
+            box-sizing: border-box;
+            align-items: center;
+            border: 0;
+            border-radius: var(--rt-side-menu-sub-item-radius);
+            background: transparent;
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font: inherit;
+            font-size: var(--rt-text-sm);
+            gap: var(--rt-space-sm);
+            padding-block: var(--rt-space-2);
+            padding-inline: calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth))) var(--rt-space-sm);
+            text-align: start;
+            text-decoration: none;
+            transition: background-color var(--rt-side-menu-sub-item-transition-duration) ease;
+
+            &:hover,
+            &:active,
+            &--highlighted {
+                background: var(--rt-color-bg-hover);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: calc(var(--rt-focus-ring-width) * -1);
+            }
+
+            /* Активна строка со ссылкой; у папки активность видна по её раскрытым пунктам. */
+            &--active {
+                background: var(--rt-color-action-primary-subtle);
+                color: var(--rt-color-action-primary-on-surface);
+            }
+        }
+
+        &__icon {
+            flex-shrink: 0;
+            color: inherit;
+        }
+
+        /* Свой значок приложения: коробка держит размер значка строки и её цвет, рисунок внутри
+           занимает её целиком и красится через currentColor. */
+        &__own-icon {
+            --rt-side-menu-sub-item-own-icon-size: var(--rt-size-4);
+
+            display: inline-flex;
+            width: var(--rt-side-menu-sub-item-own-icon-size);
+            height: var(--rt-side-menu-sub-item-own-icon-size);
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            color: inherit;
+            line-height: 1;
+
+            > * {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+
+        /* Подпись режется многоточием, полное имя — в подсказке. */
+        &__title {
+            overflow: hidden;
+            min-width: 0;
+            flex: 1 1 auto;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__part {
+            color: inherit;
+        }
+
+        &__match {
+            border-radius: var(--rt-side-menu-sub-item-match-radius);
+            background: var(--rt-side-menu-sub-item-match-bg);
+            color: var(--rt-side-menu-sub-item-match-color);
+        }
+
+        /* Кнопка потребителя — круг, как у первого кита: рамка круга прозрачна в покое и
+           проявляется под указателем. Рамка — обводкой, а не границей: граница раздвинула бы
+           кнопку, и «+» ушёл бы со столбца шевронов. */
+        &__action {
+            --rt-side-menu-sub-item-action-ring-width: var(--rt-border-width-thin);
+            --rt-side-menu-sub-item-action-radius: var(--rt-radius-full);
+
+            flex-shrink: 0;
+            border-radius: var(--rt-side-menu-sub-item-action-radius);
+            outline: var(--rt-side-menu-sub-item-action-ring-width) solid transparent;
+            outline-offset: calc(var(--rt-side-menu-sub-item-action-ring-width) * -1);
+
+            &:hover {
+                outline-color: var(--rt-color-border-strong);
+            }
+        }
+
+        /* Кнопка избранного: звезда у пункта раздела и «убрать» у строки блока. Закрашенная звезда
+           видна всегда — выбранное читается с одного взгляда; остальные — под наведением и фокусом
+           клавиатуры своей строки, а где указатель не умеет наводиться, — всегда. Прячется
+           прозрачностью: кнопка остаётся на месте и в порядке Tab. */
+        &__favorite {
+            flex-shrink: 0;
+            opacity: 0;
+
+            &--on {
+                --rt-icon-button-color: var(--rt-color-action-primary);
+
+                opacity: 1;
+            }
+
+            /* Корзина под указателем и под фокусом клавиатуры краснеет: нажатие убирает пункт. */
+            @media (hover: hover) {
+                &--remove:hover {
+                    --rt-icon-button-color: var(--rt-color-state-danger);
+                }
+            }
+
+            &--remove:has(:focus-visible) {
+                --rt-icon-button-color: var(--rt-color-state-danger);
+            }
+
+            @media (hover: none) {
+                opacity: 1;
+            }
+        }
+
+        &__row:hover &__favorite,
+        &__row:focus-visible &__favorite,
+        &__row:has(:focus-visible) &__favorite {
+            opacity: 1;
+        }
+
+        /* Папка — раскрывающаяся панель кита в простом виде. Её заголовок оформлен как строка со
+           ссылкой: те же высота, скругление, отступ глубины и подсветка ходьбы стрелками; шеврон
+           панели стоит в столбце кнопок строк, и «+» соседних строк с ним на одной вертикали.
+           Свойства переназначены правилом двух классов: так они сильнее значений самой панели,
+           объявленных на том же узле, а вложенная папка объявляет свои заново. */
+        &__folder.rt-expansion-panel {
+            --rt-expansion-panel-duration: var(--rt-side-menu-sub-item-transition-duration);
+            --rt-expansion-panel-header-radius: var(--rt-side-menu-sub-item-radius);
+            --rt-expansion-panel-header-min-height: var(--rt-control-height-md);
+            --rt-expansion-panel-header-padding-block: var(--rt-space-2);
+            --rt-expansion-panel-header-padding-start: calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth)));
+            --rt-expansion-panel-header-padding-end: var(--rt-space-sm);
+            --rt-expansion-panel-header-gap: var(--rt-space-sm);
+            --rt-expansion-panel-header-font-size: var(--rt-text-sm);
+            --rt-expansion-panel-header-bg: transparent;
+        }
+
+        &__folder--highlighted.rt-expansion-panel {
+            --rt-expansion-panel-header-bg: var(--rt-color-bg-hover);
+        }
+
+        &__children {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    /* Меню с `favoriteActionsReserve="none"`: кнопка избранного, ждущая наведения, в покое не
+       занимает ширины, и подпись идёт до края или до кнопки потребителя; отступ ряда перед ней
+       снимается тоже. Закрашенная звезда и экран без наведения держат место: там кнопка видна
+       всегда. Сжата, а не снята с раскладки: остаётся в порядке Tab. */
+    @media (hover: hover) {
+        .rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__favorite:not(.rt-side-menu-sub-item__favorite--on) {
+            overflow: hidden;
+            width: 0;
+            margin-inline-start: calc(var(--rt-space-sm) * -1);
+        }
+
+        /* Возврат места — прямым правилом, а не отрицанием в правиле выше: `:hover` внутри
+           `:not()` рядом с `:has()` браузер при наведении не пересчитывал, и кнопка оставалась
+           без ширины под указателем. */
+        .rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,
+        .rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,
+        .rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite {
+            overflow: visible;
+            width: auto;
+            margin-inline-start: 0;
+        }
+    }
+}

package/src/lib/components/table/CONTEXT.md

@@ -85,6 +85,12 @@
 колонки**: заголовки живут в шаблонах ячеек CDK, куда карточка не дотягивается. Осмысленные
 подписи даёт `columnsConfig`.
 
+**Карточка открывает запись так же, как строка.** Нажатие, Enter и пробел на карточке передаются
+спрятанной строке с тем же номером, и срабатывает её `(activated)` от `rtTableRow`: приложению не
+нужен второй обработчик. Нажатие по кнопке, ссылке, полю, `role="button"` или `role="switch"`
+внутри карточки открытием не считается. Карточка отзывается и берёт фокус клавишей Tab только при
+`clickable`.
+
 **Настройка колонок требует и `columnsConfig`, и `tableId`.** Выбор хранится в IndexedDB, и без
 идентификатора таблицы его некуда положить — поэтому `canConfigure()` останется `false`.
 

package/src/lib/components/table/rt-table.component.scss

@@ -164,9 +164,11 @@
         }
 
         /* Строки-ссылки: курсор + focus-ring. Активацию (click/Enter/Space) и
-           table-семантику обеспечивает директива rtTableRow на самой строке. */
+           table-семантику обеспечивает директива rtTableRow на самой строке.
+           Карточка узкого экрана открывает запись так же, как строка: вид у неё тот же. */
         &--clickable {
-            .cdk-row {
+            .cdk-row,
+            .rt-table__card {
                 cursor: pointer;
 
                 &:focus-visible {

package/src/lib/components/tooltip/CONTEXT.md

@@ -5,10 +5,11 @@
 <rt-icon-button icon="ico-trash" ariaLabel="Удалить" tooltip="Удалить" />
 ```
 
-| вход                 | тип                           | умолчание                                       |
-| -------------------- | ----------------------------- | ----------------------------------------------- |
-| `rtTooltip`          | `string \| null \| undefined` | `''`                                            |
-| `rtTooltipPlacement` | `'top' \| 'bottom' \| null`   | `null` — сверху, под материальным набором снизу |
+| вход                     | тип                           | умолчание                                       |
+| ------------------------ | ----------------------------- | ----------------------------------------------- |
+| `rtTooltip`              | `string \| null \| undefined` | `''`                                            |
+| `rtTooltipPlacement`     | `'top' \| 'bottom' \| null`   | `null` — сверху, под материальным набором снизу |
+| `rtTooltipWhenTruncated` | `boolean`                     | `false` — подсказка только у обрезанного текста |
 
 Выходов нет. Панель — `rt-tooltip` в оверлее CDK, `role="tooltip"`.
 
@@ -26,6 +27,8 @@ no-op, а не пустая панель под курсором. Поэтому
 
 - Показывают и наведение, и фокус с клавиатуры; прячут уход курсора, потеря фокуса и **клик**
   (панель мешала бы смотреть на результат нажатия).
+- Фокус, поставленный мышью или кодом, подсказку не показывает: меню возвращает фокус кнопке после
+  выбора пункта, и подсказка кнопки всплывала бы поверх того, что пункт открыл.
 - `rt-icon-button` уже несёт эту директиву — там достаточно входа `tooltip`.
 - Подсказка не заменяет `aria-label`: она вспомогательная, а имя контрола задаётся отдельно.
 

package/src/styles/_color-scheme.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+
+/* A colour scheme — the brand ramp under its own name, switched on by `data-rt-scheme` on `<html>`,
+   as in the first kit.
+
+   The scheme rewrites the steps, not the assignments: the accent of the own set derives from
+   `--rt-brand-*`, the accent of the material set from `--rt-mat-blue-100`, and the dark theme refers to
+   the same steps. So one ramp repaints every look the kit is drawn in, and the names the components
+   read stay untouched.
+
+   The scheme answers on the root only. A value referring to a step is resolved where it is declared,
+   and the assignments are declared on the root: a scheme on an inner node would change the steps under
+   assignments already resolved, and the piece would keep the old accent.
+
+   A Material theme of the application wins over the scheme in the material set: its `--mat-sys-primary`
+   stands in front of the step in that set's assignments.
+
+   Usage:
+     @use '@rt-tools/ui-kit-v2/styles/color-scheme' as rt;
+     @include rt.rt-color-scheme('teal', (50: #e6f4f3, …, 500: #008582, …, 950: #00201f));
+*/
+
+$brand-steps: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
+
+@mixin rt-color-scheme($name, $ramp) {
+    @if meta.type-of($name) != 'string' {
+        @error 'rt-color-scheme: the name must be a string, got #{meta.type-of($name)}.';
+    }
+
+    @if meta.type-of($ramp) != 'map' or not map.has-key($ramp, 500) {
+        @error 'rt-color-scheme("#{$name}"): the ramp is a map of (step: colour) and holds at least the step 500 — the brand colour.';
+    }
+
+    @each $step, $value in $ramp {
+        @if not list.index($brand-steps, $step) {
+            @error 'rt-color-scheme("#{$name}"): unknown step #{$step}. Allowed: #{$brand-steps}.';
+        }
+    }
+
+    /* `:root[…]` (0,2,0) outranks the steps on `:root` (0,1,0) whatever the order of the sources. */
+    :root[data-rt-scheme='#{$name}'] {
+        @each $step, $value in $ramp {
+            --rt-brand-#{$step}: #{$value};
+        }
+
+        --rt-mat-blue-100: #{map.get($ramp, 500)};
+    }
+}