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

package/styles/tokens.css

@@ -21,32 +21,41 @@
    Кит его за потребителя не подключает: редактор текста опционален, и тянуть его тему в
    пакет значило бы отдать её всем. */
 @layer rt-kit.vendor, rt-kit.base, rt-kit.components;
-/* Primitive design tokens — single source of truth для шкал. */
+/* Собрано генератором `tools/build-tokens-v2.mjs` из `tokens.source.mjs` — правится там, не здесь:
+   правка на месте теряется на следующей сборке, и её называет `pnpm run check:tokens-build`. */
+/* Ступени шкал — значения, из которых слой назначений выбирает. Единственное место кита, где
+   код цвета и размер числом законны по определению. */
 :root {
-  /* Neutral scale — серо-сине-стальная.
+  /* Neutral scale — серая, без цветности.
 
-     Ряд посчитан в OKLCH: тон 264.4° и цветность 0.0234 взяты у прежней ступени 600,
-     светлота идёт ровным шагом 0.0785 от 0.985 к 0.20. Ноль остаётся чистым белым —
-     это бумага, а не ступень ряда. В самом светлом конце цветность ужата охватом
-     sRGB: синеватого такой светлоты не существует.
+     Ряд посчитан в OKLCH: цветность нулевая у всех ступеней, светлота идёт ровным
+     шагом 0.0785 от 0.985 к 0.20. Ноль остаётся чистым белым — это бумага, а не
+     ступень ряда.
 
-     До пересчёта ряд шкалой не был. Он держал два семейства сразу — чисто серое
-     (0, 50, 200, 500, 900) и синеватое (100, 300, 400, 600, 700, 800, 950), —
-     шаг светлоты гулял от 0.009 до 0.173, а ступень 900 была темнее ступени 950,
-     то есть ряд шёл назад. Ещё девять ступеней стояли между этими: заведённые под
-     одно место, они выглядели шкалой, но выбрать из такого ряда было нельзя. */
+     Цветность снята потому, что ею красились три роли сразу: фон поля ввода,
+     приглушённая поверхность и подсветка наведения. Все три разворачивались в одну
+     ступень 100, а на тоне 264° с цветностью 0.0234 она давала #d8e0f0 — сине-серый
+     блок на почти белой странице, в котором тонула и собственная рамка поля. Синева
+     была следствием того, что тон и цветность ряда взяли у ступени 600: у тёмного
+     конца они незаметны, у светлого — нет.
+
+     Ряд остаётся ровным, и две опорные ступени сходятся с прежним выпуском кита:
+     50 и 500. Светлый конец с ним не сходится и сойтись не может: там три ступени
+     подряд лежат в полосе светлоты шириной 0.06, а ровный ряд из одиннадцати
+     ступеней, доходящий до почти чёрного, столько туда не вмещает. Полосу закрывает
+     назначение прозрачным оттенком, а не правка шага. */
   --rt-neutral-0: #fff;
-  --rt-neutral-50: #f8faff;
-  --rt-neutral-100: #d8e0f0;
-  --rt-neutral-200: #bfc7d6;
-  --rt-neutral-300: #a6aebd;
-  --rt-neutral-400: #8e96a4;
-  --rt-neutral-500: #777e8c;
-  --rt-neutral-600: #606775;
-  --rt-neutral-700: #4b515f;
-  --rt-neutral-800: #363c49;
-  --rt-neutral-900: #232934;
-  --rt-neutral-950: #111621;
+  --rt-neutral-50: #fafafa;
+  --rt-neutral-100: #e0e0e0;
+  --rt-neutral-200: #c6c6c6;
+  --rt-neutral-300: #aeaeae;
+  --rt-neutral-400: #959595;
+  --rt-neutral-500: #7e7e7e;
+  --rt-neutral-600: #676767;
+  --rt-neutral-700: #515151;
+  --rt-neutral-800: #3c3c3c;
+  --rt-neutral-900: #282828;
+  --rt-neutral-950: #161616;
   /* Бренд — линейка цвета марки. Потребитель перекрашивает кит объявлением этих
      одиннадцати ступеней после tokens.css: назначения, прозрачные оттенки и кольцо
      фокуса берут цвет отсюда сами, в обеих темах.
@@ -240,9 +249,12 @@
   --rt-border-width-thick: 3px;
   /* Alpha overlays — для backdrop'ов и focus-ring tint'ов. */
   --rt-overlay-black-4: rgb(0 0 0 / 4%);
+  --rt-overlay-black-8: rgb(0 0 0 / 8%); /* наведение поверх приглушённой поверхности: она сама стоит на четырёх процентах */
   --rt-overlay-white-4: rgb(255 255 255 / 4%);
+  --rt-overlay-white-8: rgb(255 255 255 / 8%); /* то же на графите */
   --rt-overlay-white-25: rgb(250 250 250 / 25%); /* disabled-текст на графите */
-  --rt-overlay-white-40: rgb(250 250 250 / 40%); /* muted-текст на графите */
+  --rt-overlay-white-40: rgb(250 250 250 / 40%); /* приглушённый знак: порога не берёт */
+  --rt-overlay-white-50: rgb(250 250 250 / 50%); /* приглушённый текст: слабее порог не берётся */
   --rt-overlay-black-50: rgb(0 0 0 / 50%);
   /* Оттенки марки считаются от её ступени, а не повторяют код цвета: повторённое
      значение расходится с источником молча, и перекрасивший бренд получал бы прежний
@@ -272,7 +284,9 @@
   --rt-bp-xl: 1380px;
 }
 
-/* Semantic design tokens — light defaults.
+/* Собрано генератором `tools/build-tokens-v2.mjs` из `tokens.source.mjs` — правится там, не здесь:
+   правка на месте теряется на следующей сборке, и её называет `pnpm run check:tokens-build`. */
+/* Назначения светлой темы.
 
    Тело вынесено в @mixin по той же причине, что и у тёмной темы: набор нужен не
    только на `:root`, но и на отдельном контейнере. Без этого светлую половину
@@ -282,9 +296,9 @@
   /* Background */
   --rt-color-bg-page: var(--rt-neutral-50);
   --rt-color-bg-surface: var(--rt-neutral-0);
-  --rt-color-bg-surface-subtle: var(--rt-neutral-100);
+  --rt-color-bg-surface-subtle: var(--rt-overlay-black-4);
   --rt-color-bg-surface-subtle-2: var(--rt-neutral-200);
-  --rt-color-bg-hover: var(--rt-neutral-100);
+  --rt-color-bg-hover: var(--rt-overlay-black-4);
   --rt-color-bg-subtle: var(--rt-neutral-100);
   --rt-color-bg-overlay: var(--rt-overlay-black-50);
   --rt-color-bg-inverse: var(--rt-neutral-900);
@@ -296,16 +310,22 @@
   --rt-color-text-primary: var(--rt-neutral-900);
   /* Ступень 600, а не 500: приглушённый текст обязан брать порог, а после
      пересчёта ряда самая светлая ступень, которая его берёт, — шестисотая.
-     Прежде эту роль держала off-grid ступень 510, заведённая ровно под неё. */
+     Прежде эту роль держала off-grid ступень 510, заведённая ровно под неё.
+
+     Тёмный ответ — пятьдесят процентов белого, а не сорок: на сорока он давал
+     3.6:1 над поверхностью, 3.7:1 над страницей и 3.7:1 над фоном поля, то есть
+     не брал порога ни над одной подложкой. Светлую сторону под порог подводили,
+     тёмную забыли, и держал её список принятого. Пятьдесят — самая слабая доля,
+     берущая порог над всеми тремя: 4.86, 5.02 и 5.09. */
   --rt-color-text-muted: var(--rt-neutral-600);
   --rt-color-text-disabled: var(--rt-neutral-400);
   --rt-color-text-inverse: var(--rt-neutral-0);
   --rt-color-text-link: var(--rt-brand-500);
   --rt-color-text-link-hover: var(--rt-brand-600);
   /* Border */
-  --rt-color-border-default: var(--rt-neutral-200);
+  --rt-color-border-default: var(--rt-neutral-100);
   --rt-color-border-strong: var(--rt-neutral-300);
-  --rt-color-border-subtle: var(--rt-neutral-200);
+  --rt-color-border-subtle: var(--rt-neutral-100);
   --rt-color-border-focus: var(--rt-brand-500);
   /* Action — роли действия.
 
@@ -437,7 +457,7 @@
   /* Colors */
   --rt-input-color-bg: var(--rt-color-bg-surface-subtle);
   --rt-input-color-bg-disabled: var(--rt-color-bg-surface-subtle);
-  --rt-input-color-bg-hover: var(--rt-overlay-black-4);
+  --rt-input-color-bg-hover: var(--rt-overlay-black-8);
   --rt-input-color-border: var(--rt-color-border-default);
   --rt-input-color-border-focus: var(--rt-color-action-primary);
   --rt-input-color-border-error: var(--rt-color-state-danger);
@@ -612,29 +632,35 @@
     --rt-input-font-size: var(--rt-text-md);
   }
 }
-/* Dark theme — переопределение СЕМАНТИЧЕСКИХ токенов (примитивы неизменны).
+/* Собрано генератором `tools/build-tokens-v2.mjs` из `tokens.source.mjs` — правится там, не здесь:
+   правка на месте теряется на следующей сборке, и её называет `pnpm run check:tokens-build`. */
+/* Тёмная тема — переопределение назначений; ступени шкалы неизменны.
 
-   Тело токенов вынесено в @mixin, чтобы тот же набор переопределений можно было
+   Тело вынесено в @mixin, чтобы тот же набор переопределений можно было
    применить не только на html-уровне (тема приложения), но и к локальному
    контейнеру (side-by-side light/dark в Storybook) — без дублирования значений.
 
    База (`rt-theme-dark-tokens`) — тёплый графит для приложений и всех
    CDK-overlay'ев (асайды/диалоги/меню рендерятся на уровне body, вне
    host-классов шеллов — поэтому графит держим на :root, иначе overlay'и
-   не наследовали бы палитру). */
+   не наследовали бы палитру).
+
+   Значения ответов живут в источнике рядом со своим светлым назначением: забытая половина
+   пары видна там же, а не вылавливается сверкой двух файлов. */
 :root[data-theme=dark],
 html.rt-theme-dark {
   /* Background — тёплый графит */
   --rt-color-bg-page: var(--rt-charcoal-900);
   --rt-color-bg-surface: var(--rt-charcoal-800);
   --rt-color-bg-surface-subtle: var(--rt-charcoal-950);
+  --rt-color-bg-surface-subtle-2: var(--rt-charcoal-950);
   --rt-color-bg-hover: var(--rt-charcoal-700);
   --rt-color-bg-subtle: var(--rt-charcoal-950);
   --rt-color-bg-overlay: rgb(0 0 0 / 70%);
   --rt-color-bg-inverse: var(--rt-neutral-0);
   /* Text — почти белый на графите */
   --rt-color-text-primary: var(--rt-neutral-50);
-  --rt-color-text-muted: var(--rt-overlay-white-40);
+  --rt-color-text-muted: var(--rt-overlay-white-50);
   --rt-color-text-disabled: var(--rt-overlay-white-25);
   --rt-color-text-inverse: var(--rt-neutral-900);
   --rt-color-text-link: var(--rt-brand-300);
@@ -694,7 +720,7 @@ html.rt-theme-dark {
   /* Soft card-shadow в dark — насыщеннее для отделения от фона. */
   --rt-shadow-card-soft: 0 0 40px rgb(0 0 0 / 25%);
   /* Hover-overlay инвертирован для dark (light overlay поверх тёмного фона). */
-  --rt-input-color-bg-hover: var(--rt-overlay-white-4);
+  --rt-input-color-bg-hover: var(--rt-overlay-white-8);
   --rt-icon-button-color-bg-hover: var(--rt-overlay-white-4);
   /* Toggle-switch — трек уходит в подложку, а бегунок остаётся светлым:
      общий bg-surface на обоих слил бы их в один силуэт. Тень на графите
@@ -726,6 +752,8 @@ html.rt-theme-dark {
   --rt-color-bg-surface-auth-card: transparent;
 }
 
+/* Правила тёмной темы, которые свойств не объявляют. Стоят отдельно от `_theme-dark.scss`:
+   тот собирается генератором из источника и держит только объявления. */
 /* Body-level градиент — подложка экранов авторизации: их вьюпорт прозрачен
    (`--rt-color-bg-surface-auth-card: transparent`) и просвечивает body.
    Остальные экраны его не видят — rt-container кроет body непрозрачным фоном
@@ -767,6 +795,94 @@ html.rt-theme-dark {
     border: var(--rt-border-width-thin) solid var(--rt-color-bg-subtle);
   }
 }
+@layer rt-kit.base {
+  .login__viewport {
+    display: flex;
+    min-height: 100dvh;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--rt-space-5);
+    background-color: var(--rt-color-bg-surface-auth-card);
+  }
+  .login__chrome {
+    position: fixed;
+    z-index: 10;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    gap: var(--rt-space-2);
+  }
+  .login__card {
+    position: relative;
+    display: flex;
+    width: 100%;
+    max-width: 400px;
+    box-sizing: border-box;
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--rt-space-16) var(--rt-space-5);
+    border-radius: var(--rt-radius-md);
+    background-color: var(--rt-color-bg-surface-auth-card);
+    gap: var(--rt-space-10);
+  }
+  .login__logo {
+    align-self: center;
+  }
+  .login__title {
+    margin: 0;
+    color: var(--rt-color-text-primary);
+    font-size: var(--rt-text-2xl);
+    font-weight: var(--rt-font-weight-bold);
+    text-align: center;
+  }
+  .login__form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rt-space-5);
+  }
+  .login__error {
+    padding: var(--rt-space-sm) var(--rt-space-4);
+    border-radius: var(--rt-radius-md);
+    margin: 0;
+    background-color: var(--rt-color-state-danger-bg);
+    color: var(--rt-color-state-error-text);
+    font-size: var(--rt-text-sm);
+  }
+  .login__submit {
+    width: 100%;
+    height: 40px;
+  }
+  .login__links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-top: var(--rt-space-5);
+    border-top: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+    gap: var(--rt-space-5);
+  }
+  .login__link {
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--rt-color-text-muted);
+    cursor: pointer;
+    font-size: var(--rt-text-xs);
+    font-weight: var(--rt-font-weight-medium);
+    letter-spacing: var(--rt-letter-spacing-wide);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+  }
+  .login__link:hover {
+    color: var(--rt-color-action-primary);
+  }
+  .login__link:focus-visible {
+    border-radius: var(--rt-radius-xs);
+    outline: 2px solid var(--rt-color-action-primary);
+    outline-offset: 2px;
+  }
+}
 @layer rt-kit.components {
   .rt-button {
     /* Высота приходит общей шкалой контролов, а не своим числом: кнопка, поле и