@rt-tools/ui-kit-v2 0.8.0 → 0.10.0

package/src/styles/_index.scss

@@ -8,6 +8,12 @@
 
 @forward './primitives';
 @forward './semantic';
+
+// Материальный набор стоит между назначениями и тёмной темой: у признака набора и признака
+// тёмной темы на корне одинаковая специфичность, и порядок здесь — единственное, чем тёмная
+// тема выигрывает у набора.
+@forward './preset-material';
+
 @forward './theme-dark';
 @forward './theme-dark-rules';
 @forward './scrollbar';
@@ -18,7 +24,17 @@
 // этого не видят — истории у экрана входа нет.
 @forward './login';
 
+// Словарь формы панели: раздел, колонка контролов, строка контрола, элемент в ряду. Он тоже
+// объявлен классами, а не компонентом, и другого пути к потребителю у него нет. Без этой строки
+// приложение размечает панель именами, которым ни одно правило не отвечает, — то есть заводит
+// раскладку у себя, ради чего словарь и переехал в кит.
+@forward './form';
+
 // Стили директивы кнопки: своего представления у директивы нет, поэтому её `.scss` не
 // подключён ни одним `styleUrl`. Без этой строки потребитель, взявший `tokens.css` по
 // инструкции README, получает `rtButton`, нарисованный браузерной кнопкой.
 @forward '../lib/components/button/rt-button.directive';
+
+// Стили волны нажатия — по той же причине: директива своего представления не имеет.
+// Без этой строки узел волны ставится в разметку и остаётся невидимым.
+@forward '../lib/components/ripple/rt-ripple.directive';

package/src/styles/_preset-material.scss

@@ -0,0 +1,102 @@
+/* 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 material preset — a second layer of assignments: the kit drawn in the look of the first kit.
+
+   It does not touch the scale steps: a rewritten step would repaint the dark theme as well,
+   and the dark theme refers to those same steps. The values come from the material steps of the scale.
+
+   The body is taken into a @mixin for the same reason as the dark theme's: the preset is needed not
+   only on `:root` but on a separate container too — otherwise two presets cannot be shown side by side.
+
+   The preset rule is declared before the dark theme on purpose: the root signs have equal
+   specificity, and the order in the file is the only thing by which the dark theme wins over the preset. */
+
+@mixin rt-preset-material-tokens {
+    /* Подложки */
+    --rt-color-bg-page: var(--rt-mat-neutral-5);
+    --rt-color-bg-surface: var(--rt-mat-neutral-0);
+    --rt-color-bg-surface-subtle: var(--rt-mat-overlay-black-4);
+    --rt-color-bg-surface-subtle-2: var(--rt-mat-neutral-15);
+    --rt-color-bg-hover: var(--rt-mat-neutral-10);
+    --rt-color-bg-subtle: var(--rt-mat-neutral-10);
+    --rt-color-bg-overlay: var(--rt-mat-overlay-black-32);
+    --rt-color-bg-inverse: var(--rt-mat-neutral-100);
+    --rt-color-bg-nav: var(--rt-mat-navy-100); /* марка первого кита: обвязка тёмная в обоих наборах */
+    --rt-color-bg-page-auth: var(--rt-mat-neutral-5);
+    --rt-color-bg-surface-auth-card: var(--rt-mat-neutral-0);
+
+    /* Текст */
+    --rt-color-text-primary: var(--rt-mat-neutral-100);
+    --rt-color-text-muted: var(--rt-mat-neutral-60);
+    --rt-color-text-disabled: var(--rt-mat-neutral-40);
+    --rt-color-text-inverse: var(--rt-mat-neutral-0);
+    --rt-color-text-link: var(--rt-mat-blue-100);
+    --rt-color-text-link-hover: var(--rt-mat-blue-hover);
+
+    /* Рамки */
+    --rt-color-border-default: var(--rt-mat-neutral-25);
+    --rt-color-border-strong: var(--rt-mat-neutral-30);
+    --rt-color-border-subtle: var(--rt-mat-neutral-20);
+    --rt-color-border-focus: var(--rt-mat-blue-40); /* кольцо фокуса первого кита светлее его действия */
+
+    /* Действие: подложка, наведение, нажатие, подпись на них и цвет роли на поверхности */
+    --rt-color-action-primary: var(--rt-mat-blue-100);
+    --rt-color-action-primary-hover: var(--rt-mat-blue-hover);
+    --rt-color-action-primary-active: var(--rt-mat-blue-active);
+    --rt-color-action-primary-subtle: var(--rt-mat-overlay-blue-8);
+    --rt-color-action-primary-soft: var(--rt-mat-overlay-blue-24);
+    --rt-color-action-on-primary: var(--rt-mat-neutral-0);
+    --rt-color-action-secondary: var(--rt-mat-neutral-60);
+    --rt-color-action-secondary-hover: var(--rt-mat-neutral-hover);
+    --rt-color-action-secondary-active: var(--rt-mat-neutral-active);
+    --rt-color-action-on-secondary: var(--rt-mat-neutral-0);
+    --rt-color-action-secondary-on-surface: var(--rt-mat-neutral-60);
+    --rt-color-action-success: var(--rt-mat-green-80);
+    --rt-color-action-success-hover: var(--rt-mat-green-hover);
+    --rt-color-action-success-active: var(--rt-mat-green-active);
+    --rt-color-action-on-success: var(--rt-mat-neutral-0);
+    --rt-color-action-warning: var(--rt-mat-orange-80);
+    --rt-color-action-warning-hover: var(--rt-mat-orange-hover);
+    --rt-color-action-warning-active: var(--rt-mat-orange-active);
+    --rt-color-action-on-warning: var(--rt-mat-neutral-0);
+    --rt-color-action-danger: var(--rt-mat-red-100);
+    --rt-color-action-danger-hover: var(--rt-mat-red-hover);
+    --rt-color-action-danger-active: var(--rt-mat-red-active);
+    --rt-color-action-on-danger: var(--rt-mat-neutral-0);
+    --rt-color-action-info: var(--rt-mat-blue-100);
+    --rt-color-action-info-hover: var(--rt-mat-blue-hover);
+    --rt-color-action-info-active: var(--rt-mat-blue-active);
+    --rt-color-action-on-info: var(--rt-mat-neutral-0);
+    --rt-color-action-disabled: var(--rt-mat-neutral-25);
+
+    /* Состояния: цвет роли и её светлая подложка */
+    --rt-color-state-success: var(--rt-mat-green-100);
+    --rt-color-state-success-bg: var(--rt-mat-green-10);
+    --rt-color-state-warning: var(--rt-mat-orange-100);
+    --rt-color-state-warning-bg: var(--rt-mat-orange-5);
+    --rt-color-state-warning-text: var(--rt-mat-orange-100);
+    --rt-color-state-danger: var(--rt-mat-red-100);
+    --rt-color-state-danger-bg: var(--rt-mat-red-10);
+    --rt-color-state-error-text: var(--rt-mat-red-100);
+    --rt-color-state-info: var(--rt-mat-blue-100);
+    --rt-color-state-info-bg: var(--rt-mat-blue-20);
+
+    /* Рельса шагов */
+    --rt-color-stepper-track: var(--rt-mat-neutral-30);
+
+    /* Заглушка загрузки: краски те же, что набор давал ей прежде через подложку и
+       рамку, — вид под набором от разведения концов не поехал. */
+    --rt-color-skeleton-base: var(--rt-mat-neutral-10);
+    --rt-color-skeleton-wave: var(--rt-mat-neutral-25);
+
+    /* Кнопка и поле первого кита скруглены заметно сильнее: 1.5rem против 10px.
+       Значение снято числом — ссылки на токены первого кита во второй кит не едут. */
+    --rt-radius-control: 1.5rem;
+}
+
+:root[data-preset='material'],
+[data-preset='material'],
+.rt-preset-material {
+    @include rt-preset-material-tokens;
+}

package/src/styles/_primitives.scss

@@ -1,8 +1,8 @@
-/* Собрано генератором `tools/build-tokens-v2.mjs` из `tokens.source.mjs` — правится там, не здесь:
-   правка на месте теряется на следующей сборке, и её называет `pnpm run check:tokens-build`. */
+/* 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 scale steps — the values the assignment layer chooses from. The only place in the kit where
+   a colour code and a size as a number are lawful by definition. */
 
 :root {
     /* Neutral scale — серая, без цветности.
@@ -291,4 +291,74 @@
     --rt-bp-md: 768px;
     --rt-bp-lg: 1080px;
     --rt-bp-xl: 1380px;
+
+    /* Материальный набор: нейтральный ряд первого кита */
+    --rt-mat-neutral-0: #fff;
+    --rt-mat-neutral-5: #f5f6f8;
+    --rt-mat-neutral-10: #f3f3f3;
+    --rt-mat-neutral-15: #eee;
+    --rt-mat-neutral-20: #e8e8e8;
+    --rt-mat-neutral-25: #e0e0e0;
+    --rt-mat-neutral-30: #d1d1d1;
+    --rt-mat-neutral-35: #ccc;
+    --rt-mat-neutral-40: #a3a3a3;
+    --rt-mat-neutral-60: #747474;
+    --rt-mat-neutral-80: #323033;
+    --rt-mat-neutral-100: #181818;
+
+    /* Материальный набор: синий — действие, ссылка, кольцо фокуса */
+    --rt-mat-blue-20: #eaedfc;
+    --rt-mat-blue-40: #b3ceef;
+    --rt-mat-blue-60: #6d96e8;
+    --rt-mat-blue-80: #4285f4;
+    --rt-mat-blue-100: #4284d7;
+
+    /* Материальный набор: красный — опасное действие и ошибка */
+    --rt-mat-red-10: #fdedee;
+    --rt-mat-red-20: #efc0c1;
+    --rt-mat-red-40: #f7b9bb;
+    --rt-mat-red-60: #e88487;
+    --rt-mat-red-80: #df6064;
+    --rt-mat-red-100: #eb5055;
+
+    /* Материальный набор: оранжевый — предупреждение */
+    --rt-mat-orange-5: #f6e4d9;
+    --rt-mat-orange-10: #e8cbbf;
+    --rt-mat-orange-20: #e1ba9e;
+    --rt-mat-orange-40: #e4a985;
+    --rt-mat-orange-60: #f1a05d;
+    --rt-mat-orange-70: #f2994a;
+    --rt-mat-orange-80: #ee7a34;
+    --rt-mat-orange-100: #ef7128;
+
+    /* Материальный набор: зелёный — успех */
+    --rt-mat-green-10: #e5f8f4;
+    --rt-mat-green-20: #baf4e0;
+    --rt-mat-green-40: #5dbfbc;
+    --rt-mat-green-60: #46c4c0;
+    --rt-mat-green-80: #21b18e;
+    --rt-mat-green-100: #01af8d;
+
+    /* Материальный набор: марка первого кита и подложка его обвязки */
+    --rt-mat-navy-100: #0d1c2b;
+
+    /* Прозрачные оттенки считаются от своих ступеней, а не повторяют их коды цвета. */
+    --rt-mat-overlay-black-4: color-mix(in srgb, var(--rt-mat-neutral-100) 4%, transparent);
+    --rt-mat-overlay-black-32: color-mix(in srgb, var(--rt-mat-neutral-100) 32%, transparent);
+    --rt-mat-overlay-blue-8: color-mix(in srgb, var(--rt-mat-blue-100) 8%, transparent);
+    --rt-mat-overlay-blue-24: color-mix(in srgb, var(--rt-mat-blue-100) 24%, transparent);
+
+    /* Наведение и нажатие первый кит считает от своей ступени тем же приёмом — подмешивая
+       чёрное. Ступени здесь считаются так же, а не подбираются на глаз: иначе перекрашенная
+       марка перестанет темнеть под курсором вместе с остальным. */
+    --rt-mat-blue-hover: color-mix(in srgb, var(--rt-mat-blue-100) 90%, #000);
+    --rt-mat-blue-active: color-mix(in srgb, var(--rt-mat-blue-100) 80%, #000);
+    --rt-mat-green-hover: color-mix(in srgb, var(--rt-mat-green-80) 90%, #000);
+    --rt-mat-green-active: color-mix(in srgb, var(--rt-mat-green-80) 80%, #000);
+    --rt-mat-orange-hover: color-mix(in srgb, var(--rt-mat-orange-80) 90%, #000);
+    --rt-mat-orange-active: color-mix(in srgb, var(--rt-mat-orange-80) 80%, #000);
+    --rt-mat-red-hover: color-mix(in srgb, var(--rt-mat-red-100) 90%, #000);
+    --rt-mat-red-active: color-mix(in srgb, var(--rt-mat-red-100) 80%, #000);
+    --rt-mat-neutral-hover: color-mix(in srgb, var(--rt-mat-neutral-60) 90%, #000);
+    --rt-mat-neutral-active: color-mix(in srgb, var(--rt-mat-neutral-60) 80%, #000);
 }

package/src/styles/_scrollbar.scss

@@ -1,4 +1,23 @@
 @layer rt-kit.base {
+    // Тихая полоса: место под неё занято всегда, а ползунка не видно, пока на зону не навели.
+    // Приёмы, которыми заменяют убранное из браузеров наложение полосы поверх содержимого,
+    // показывают её вместе с её местом — и содержимое дёргается вбок на каждом наведении. Здесь
+    // двигается только цвет, поэтому раскладка стоит на месте.
+    // Стандартные свойства объявлены рядом с псевдоэлементами: одни понимает одна ветка
+    // браузеров, другие — другая, и написанные порознь они расходятся видом.
+    * {
+        scrollbar-color: transparent transparent;
+        scrollbar-width: thin;
+    }
+
+    // Проявляется ползунок наведением на саму зону, а не на себя: навести на невидимое нечем.
+    // Фокус внутри зоны показывает его наравне — прокрутка с клавиатуры идёт без указателя, и
+    // человек иначе не видит ни того, где он в списке, ни того, что список прокручивается.
+    *:hover,
+    *:focus-within {
+        scrollbar-color: var(--rt-color-border-default) transparent;
+    }
+
     ::-webkit-scrollbar {
         width: 12px;
     }
@@ -10,6 +29,12 @@
     ::-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 {
         background: var(--rt-color-border-default);
         background-clip: content-box;
     }
@@ -23,4 +48,18 @@
     ::-webkit-scrollbar-track:hover {
         border: var(--rt-border-width-thin) solid var(--rt-color-bg-subtle);
     }
+
+    // Там, где наведения не бывает, тихая полоса осталась бы невидимой навсегда: на сенсорном
+    // экране указателя нет вовсе, а признак прокручиваемости зоны нужен ровно так же.
+    // Ветка hover-none: наведения на этом экране не бывает.
+    @media (hover: none) {
+        * {
+            scrollbar-color: var(--rt-color-border-default) transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--rt-color-border-default);
+            background-clip: content-box;
+        }
+    }
 }

package/src/styles/_semantic.scss

@@ -1,12 +1,12 @@
-/* Собрано генератором `tools/build-tokens-v2.mjs` из `tokens.source.mjs` — правится там, не здесь:
-   правка на месте теряется на следующей сборке, и её называет `pnpm run check:tokens-build`. */
+/* 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.
 
-   Тело вынесено в @mixin по той же причине, что и у тёмной темы: набор нужен не
-   только на `:root`, но и на отдельном контейнере. Без этого светлую половину
-   пары «светлая ↔ тёмная» нельзя показать, пока приложение стоит в тёмной теме, —
-   контейнер унаследует тёмные значения, и обе половины покажут одно и то же. */
+   The body is carried into an @mixin for the same reason as the dark theme's: the set is needed not
+   only on `:root` but on a separate container too. Without that the light half of the
+   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. */
 
 @mixin rt-theme-light-tokens {
     /* Background */
@@ -133,19 +133,6 @@
         0 0 0 var(--rt-focus-ring-offset) var(--rt-color-bg-surface),
         0 0 0 calc(var(--rt-focus-ring-offset) + var(--rt-focus-ring-width)) var(--rt-focus-ring-color-danger);
 
-    /* Stepper (rt-stepper) — рельса прогресса. Текущий шаг — янтарный (одинаков
-       в обеих темах); трек/прогресс переопределяются в dark на приглушённые. */
-    --rt-color-stepper-current: var(--rt-amber-400); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
-    --rt-color-stepper-current-subtle: var(--rt-overlay-amber-16); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
-    --rt-color-stepper-track: var(--rt-gray-350);
-    --rt-color-stepper-progress: var(--rt-color-action-primary);
-
-    /* Step-indicator ring — halo вокруг активного пункта rt-stepper. */
-    --rt-shadow-step-indicator: 0 0 0 4px var(--rt-color-stepper-current-subtle);
-
-    /* Status-dot ring — halo вокруг точки «объект занят сейчас». */
-    --rt-shadow-status-dot: 0 0 0 3px var(--rt-color-state-success-bg);
-
     /* State */
     --rt-color-state-success: var(--rt-success-500); /* rt-theme-shared: цвет статуса один в обеих темах */
     --rt-color-state-success-bg: var(--rt-success-50);
@@ -161,6 +148,19 @@
     --rt-color-state-info: var(--rt-info-500); /* rt-theme-shared: цвет статуса один в обеих темах */
     --rt-color-state-info-bg: var(--rt-info-50);
 
+    /* Stepper (rt-stepper) — рельса прогресса. Текущий шаг — янтарный (одинаков
+       в обеих темах); трек/прогресс переопределяются в dark на приглушённые. */
+    --rt-color-stepper-current: var(--rt-amber-400); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
+    --rt-color-stepper-current-subtle: var(--rt-overlay-amber-16); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
+    --rt-color-stepper-track: var(--rt-gray-350);
+    --rt-color-stepper-progress: var(--rt-color-action-primary);
+
+    /* Step-indicator ring — halo вокруг активного пункта rt-stepper. */
+    --rt-shadow-step-indicator: 0 0 0 4px var(--rt-color-stepper-current-subtle);
+
+    /* Status-dot ring — halo вокруг точки «объект занят сейчас». */
+    --rt-shadow-status-dot: 0 0 0 3px var(--rt-color-state-success-bg);
+
     /* Chat — пузыри переписки. Входящее и своё различаются фоном, а не рамкой:
        рамка на каждом пузыре дробит ленту. Отметка прочтения синяя — единственный
        цветной элемент подвала пузыря, остальные статусы приглушены. */
@@ -175,6 +175,12 @@
     --rt-color-bg-page-auth: var(--rt-neutral-50);
     --rt-color-bg-surface-auth-card: var(--rt-neutral-0);
 
+    /* Skeleton (rt-skeleton) — заглушка загрузки. Два конца перелива: покой и гребень
+       волны. Имена свои, а не роли подложки и рамки: в светлом наборе те ведут на одну краску,
+       и перелив между ними стоял ровной заливкой. */
+    --rt-color-skeleton-base: var(--rt-neutral-100);
+    --rt-color-skeleton-wave: var(--rt-neutral-50);
+
     /* 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 */
@@ -213,8 +219,13 @@
        внутри flex-баров контрол без ограничения растягивается на всю строку. */
     --rt-input-max-width: var(--rt-control-max-width);
 
+    /* Скругление контрола — назначение, а не ступень на месте. Кнопка, поле ввода и
+       всё, что стоит с ними в строке, берут его отсюда: набор оформления живёт слоем
+       назначений и до ступени, взятой компонентом напрямую, не достаёт. */
+    --rt-radius-control: var(--rt-radius-lg);
+
     /* Radius / spacing / border */
-    --rt-input-radius: var(--rt-radius-lg);
+    --rt-input-radius: var(--rt-radius-control);
     --rt-input-padding-x: var(--rt-space-4);
     --rt-input-padding-y: var(--rt-space-0);
     --rt-input-border-width: var(--rt-border-width-thin);
@@ -389,9 +400,9 @@
     @include rt-theme-light-tokens;
 }
 
-/* На тач-устройствах инпут не меньше 16px: WebKit (весь iOS, включая Chrome)
-   зумит страницу при фокусе на поле с font-size < 16px — отсюда горизонтальный
-   сдвиг вёрстки. Десктоп сохраняет плотный 14px. */
+/* 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

@@ -1,19 +1,19 @@
-/* Собрано генератором `tools/build-tokens-v2.mjs` из `tokens.source.mjs` — правится там, не здесь:
-   правка на месте теряется на следующей сборке, и её называет `pnpm run check:tokens-build`. */
+/* 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 dark theme — an override of the assignments; the scale steps are unchanging.
 
-   Тело вынесено в @mixin, чтобы тот же набор переопределений можно было
-   применить не только на html-уровне (тема приложения), но и к локальному
-   контейнеру (side-by-side light/dark в Storybook) — без дублирования значений.
+   The body is carried into an @mixin so that the same set of overrides could be
+   applied not only at the html level (the application's theme) but to a local
+   container too (side-by-side light/dark in Storybook) — without duplicating the values.
 
-   База (`rt-theme-dark-tokens`) — тёплый графит для приложений и всех
-   CDK-overlay'ев (асайды/диалоги/меню рендерятся на уровне body, вне
-   host-классов шеллов — поэтому графит держим на :root, иначе overlay'и
-   не наследовали бы палитру).
+   The base (`rt-theme-dark-tokens`) is warm graphite for the applications and all the
+   CDK overlays (asides/dialogs/menus are rendered at the body level, outside the
+   shells' host classes — so the graphite is held on :root, otherwise the overlays
+   would not inherit the palette).
 
-   Значения ответов живут в источнике рядом со своим светлым назначением: забытая половина
-   пары видна там же, а не вылавливается сверкой двух файлов. */
+   The values of the answers live in the source next to their light assignment: a forgotten half of
+   a pair is visible right there rather than caught by matching two files. */
 
 @mixin rt-theme-dark-tokens {
     /* Background — тёплый графит */
@@ -134,6 +134,10 @@
     /* Special — Auth surface (градиентный фон логина + прозрачная карточка). */
     --rt-color-bg-page-auth: linear-gradient(156deg, var(--rt-neutral-950) 12.68%, var(--rt-navy-900) 99.28%);
     --rt-color-bg-surface-auth-card: transparent;
+
+    /* Skeleton — заглушка загрузки: покой и гребень волны. */
+    --rt-color-skeleton-base: var(--rt-charcoal-950);
+    --rt-color-skeleton-wave: var(--rt-charcoal-border);
 }
 
 :root[data-theme='dark'],