@rt-tools/ui-kit-v2 0.5.0 → 0.7.0

package/src/styles/_primitives.scss

@@ -1,42 +1,65 @@
-/* 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: цветность нулевая у всех ступеней, светлота идёт ровным
+       шагом 0.0785 от 0.985 к 0.20. Ноль остаётся чистым белым — это бумага, а не
+       ступень ряда.
+
+       Цветность снята потому, что ею красились три роли сразу: фон поля ввода,
+       приглушённая поверхность и подсветка наведения. Все три разворачивались в одну
+       ступень 100, а на тоне 264° с цветностью 0.0234 она давала #d8e0f0 — сине-серый
+       блок на почти белой странице, в котором тонула и собственная рамка поля. Синева
+       была следствием того, что тон и цветность ряда взяли у ступени 600: у тёмного
+       конца они незаметны, у светлого — нет.
+
+       Ряд остаётся ровным, и две опорные ступени сходятся с прежним выпуском кита:
+       50 и 500. Светлый конец с ним не сходится и сойтись не может: там три ступени
+       подряд лежат в полосе светлоты шириной 0.06, а ровный ряд из одиннадцати
+       ступеней, доходящий до почти чёрного, столько туда не вмещает. Полосу закрывает
+       назначение прозрачным оттенком, а не правка шага. */
     --rt-neutral-0: #fff;
     --rt-neutral-50: #fafafa;
-    --rt-neutral-100: #f6f7f9;
-    --rt-neutral-150: #eef0f4;
-    --rt-neutral-200: #e6e6e6;
-    --rt-neutral-250: #d2d2d2;
-    --rt-neutral-280: #bebebe;
-    --rt-neutral-300: #cad5e2;
-    --rt-neutral-350: #b1b1b1;
-    --rt-neutral-400: #90a1b9;
-    --rt-neutral-420: #9e9e9e;
-    --rt-neutral-450: #909090;
-    --rt-neutral-520: #707070;
+    --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: назначения, прозрачные оттенки и кольцо
+       фокуса берут цвет отсюда сами, в обеих темах.
 
-    /* Самый светлый серый, проходящий порог AA (4.5:1) на белом — 4.54:1.
-       Ниже него подпись на светлой поверхности порог не берёт. */
-    --rt-neutral-510: #767676;
-    --rt-neutral-550: #666;
-    --rt-neutral-600: #6b7280;
-    --rt-neutral-700: #3b4557;
-    --rt-neutral-800: #364152;
-    --rt-neutral-900: #1f1f1f;
-    --rt-neutral-950: #122341;
-
-    /* Blue — brand accent */
-    --rt-blue-50: #eff6ff;
-    --rt-blue-100: #dbeafe;
-    --rt-blue-150: #ddebf6;
-    --rt-blue-300: #93c5fd;
-    --rt-blue-400: #5496ff; /* отметка прочтения в чате */
-    --rt-blue-500: #155dfc; /* brand */
-    --rt-blue-600: #0e4ad6;
-    --rt-blue-700: #0c3fb0;
-    --rt-blue-900: #182142;
+       Ряд посчитан в OKLCH: тон 262.87° и цветность взяты у ступени 500, светлота идёт
+       ровными шагами от 0.97 к 0.20. Ступень 500 — сам цвет марки, поэтому светлый конец
+       ряда темнее, чем у палитр, где 500 стоит серединой светлоты. У 600 и 700 цветность
+       ужата: с полной они не влезают в охват sRGB. */
+    --rt-brand-50: #f0f5ff;
+    --rt-brand-100: #cddaf1;
+    --rt-brand-200: #a8bfea;
+    --rt-brand-300: #7ea3e9;
+    --rt-brand-400: #4e84f2; /* отметка прочтения в чате */
+    --rt-brand-500: #155dfc; /* цвет марки */
+    --rt-brand-600: #0047df;
+    --rt-brand-700: #0038b5;
+    --rt-brand-800: #012a8a;
+    --rt-brand-900: #021d62;
+    --rt-brand-950: #02113c;
+
+    /* Navy — тёмная синева обвязки и рельсы прогресса. Цветом марки она не красится:
+       перекрасивший бренд не ждёт, что вместе с кнопкой сменится подложка шапки. */
+    --rt-navy-600: #435775; /* трек прогресса, тёмная тема */
+    --rt-navy-900: #182142; /* подложка шапки и боковой навигации */
 
     /* Charcoal — тёплый графит для тёмной темы. */
     --rt-charcoal-950: #17181c; /* глубокий фон / приподнятая alt-поверхность, subtle */
@@ -48,48 +71,52 @@
 
     /* Stepper rail — приглушённые оттенки трека/прогресса прогресс-полосы. */
     --rt-gray-350: #b3b3b3; /* трек, light */
-    --rt-navy-600: #435775; /* трек, dark */
     --rt-slate-300: #a9b8cd; /* пройденный прогресс, dark */
 
-    /* Status — success/warning/danger/info */
+    /* Status — success/warning/danger/info.
+
+       Ступени 600 и 700 считаны от своей 500 ровным шагом светлоты линейки бренда
+       (ΔL = 0.0687 в OKLCH): тон и цветность берутся у 500, светлота убывает шагом.
+       До этого ряды были собраны вручную и шли неровно — у успеха 700 была светлее
+       600, а у опасности 600 отличалась от 500 неразличимо на глаз. Наведение и
+       нажатие действия берут именно эти ступени, и такая пара их сливала. */
     --rt-success-50: #ecfdf5;
     --rt-success-100: #eafaf5;
     --rt-success-500: #059669;
-    --rt-success-600: #047857;
-    --rt-success-700: #088e63;
+    --rt-success-600: #017f58;
+    --rt-success-700: #006848;
     --rt-warning-50: #fffbeb;
     --rt-warning-500: #d97706;
-    --rt-warning-600: #b45309;
+    --rt-warning-600: #bc6600;
+    --rt-warning-700: #9f5500;
     --rt-yellow-400: #f4d85a;
     --rt-amber-400: #f49f5a;
     --rt-danger-50: #fef2f2;
     --rt-danger-500: #dc2626;
-    --rt-danger-600: #d32f2f;
-    --rt-danger-700: #b91c1c;
-    --rt-info-50: #eff6ff;
-    --rt-info-500: #2563eb;
-    --rt-info-600: #1d4ed8;
+    --rt-danger-600: #c00111;
+    --rt-danger-700: #9e000c;
 
-    /* Spacing — 8px base (off-grid half-steps помечены @deprecated). */
+    /* Info разведён с маркой намеренно. До этого две палитры стояли на одном тоне —
+       262.9° у обеих, — различаясь только цветностью, а ступень 700 совпадала с
+       брендовой буквально. Уведомление «к сведению» — статус наравне с успехом и
+       опасностью, а не акцент марки: у потребителя с зелёной маркой оно иначе стало
+       бы неотличимо от успешного. Тон уведён к 250°: дальше охват sRGB режет
+       цветность вдвое, и синий уходит в бирюзу. */
+    --rt-info-50: #eef6ff;
+    --rt-info-500: #0173c6;
+    --rt-info-600: #005fa5;
+    --rt-info-700: #004c85;
+
+    /* Spacing — ряд с шагом 4px. Промежуточных ступеней в нём нет: 6, 10, 12 и 28
+       пикселей стояли ступенями под конкретные места, и выбрать из такого ряда было
+       нельзя. Употребления округлены к ближайшей ступени, при равенстве — вверх. */
     --rt-space-0: 0;
     --rt-space-0-5: 2px;
     --rt-space-1: 4px;
-
-    /* @deprecated off-grid — округлять к --rt-space-2 (8) или --rt-space-1 (4). */
-    --rt-space-1-5: 6px;
     --rt-space-2: 8px;
-
-    /* @deprecated off-grid — округлять к --rt-space-2 (8) или --rt-space-md (16). */
-    --rt-space-2-5: 10px;
-
-    /* @deprecated off-grid — округлять к --rt-space-md (16). */
-    --rt-space-3: 12px;
     --rt-space-4: 16px;
     --rt-space-5: 20px;
     --rt-space-6: 24px;
-
-    /* @deprecated off-grid — заведён под промежуток между группами панели навигации. */
-    --rt-space-7: 28px;
     --rt-space-8: 32px;
     --rt-space-10: 40px;
     --rt-space-12: 48px;
@@ -164,11 +191,44 @@
        панели навигации размазывают её край вместо того, чтобы его очертить. */
     --rt-shadow-profile-menu: 0 16px 32px rgb(0 0 0 / 15%);
 
-    /* Form-control size primitives — raw-шкала высот/min-height для полей.
-       Semantic-слой (--rt-input-*) ссылается на эти значения. */
-    --rt-control-height-sm: 36px;
-    --rt-control-height-md: 45px;
-    --rt-control-height-lg: 52px;
+    /* Тень окна — тот же силуэт, что у shadow-card-soft, но вдвое плотнее: окно
+       лежит поверх затемнённой страницы, и слабый ореол на ней не читается. */
+    --rt-shadow-dialog: 0 0 40px rgb(0 0 0 / 25%);
+
+    /* Size — шкала габаритов: ширина, высота и сторона квадратного узла там, где их
+       задаёт не содержимое. Множитель тот же, что у отступов: ступень N равна N × 4px,
+       и ряд идёт без промежуточных ступеней — габарит, не легший на ряд, округляется к
+       соседней, а не заводит себе ступень по месту. */
+    --rt-size-1: 4px;
+    --rt-size-2: 8px;
+    --rt-size-3: 12px;
+    --rt-size-4: 16px;
+    --rt-size-5: 20px;
+    --rt-size-6: 24px;
+    --rt-size-8: 32px;
+    --rt-size-10: 40px;
+    --rt-size-12: 48px;
+    --rt-size-16: 64px;
+    --rt-size-20: 80px;
+    --rt-size-24: 96px;
+    --rt-size-30: 120px;
+    --rt-size-40: 160px;
+    --rt-size-60: 240px;
+    --rt-size-64: 256px;
+    --rt-size-100: 400px;
+
+    /* Control height — одна шкала высот на все интерактивные контролы: кнопку,
+       иконочную кнопку и семейство полей. Ряд идёт шагом 8px и ложится на сетку
+       отступов; ступень md остаётся сорока, потому что это самый ходовой размер
+       кнопки.
+
+       До свода рядов было три, и в одной строке они не совпадали: кнопка шла
+       30/40/50/60/70, поле 36/45/52, иконочная кнопка 28/36/44/52/60. */
+    --rt-control-height-sm: 32px;
+    --rt-control-height-md: 40px;
+    --rt-control-height-lg: 48px;
+    --rt-control-height-xl: 56px;
+    --rt-control-height-2xl: 64px;
     --rt-control-textarea-min-height-sm: 80px;
     --rt-control-textarea-min-height-md: 120px;
     --rt-control-textarea-min-height-lg: 160px;
@@ -194,14 +254,26 @@
 
     /* 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%);
-    --rt-overlay-blue-8: rgb(21 93 252 / 8%);
-    --rt-overlay-blue-24: rgb(21 93 252 / 24%);
-    --rt-overlay-danger-16: rgb(220 38 38 / 16%);
-    --rt-overlay-amber-16: rgb(244 159 90 / 16%);
+
+    /* Оттенки марки считаются от её ступени, а не повторяют код цвета: повторённое
+       значение расходится с источником молча, и перекрасивший бренд получал бы прежний
+       синий в подложке действия и в кольце фокуса. */
+    --rt-overlay-brand-8: color-mix(in srgb, var(--rt-brand-500) 8%, transparent);
+    --rt-overlay-brand-24: color-mix(in srgb, var(--rt-brand-500) 24%, transparent);
+    --rt-overlay-danger-16: color-mix(in srgb, var(--rt-danger-500) 16%, transparent);
+    --rt-overlay-amber-16: color-mix(in srgb, var(--rt-amber-400) 16%, transparent);
+
+    /* Подложка окна — синеватая, а не чёрная: окно стоит на странице обвязки, и
+       чёрное затемнение под ним холоднее её синевы. Считается от ступени обвязки
+       по той же причине, что и оттенки марки. */
+    --rt-overlay-navy-70: color-mix(in srgb, var(--rt-navy-900) 70%, transparent);
 
     /* Z-index */
     --rt-z-base: 0;

package/src/styles/_scrollbar.scss

@@ -1,24 +1,26 @@
-::-webkit-scrollbar {
-    width: 12px;
-}
+@layer rt-kit.base {
+    ::-webkit-scrollbar {
+        width: 12px;
+    }
 
-::-webkit-scrollbar:horizontal {
-    height: 12px;
-}
+    ::-webkit-scrollbar:horizontal {
+        height: 12px;
+    }
 
-::-webkit-scrollbar-thumb {
-    border: var(--rt-border-width-thick) solid transparent;
-    border-radius: var(--rt-radius-md);
-    background: var(--rt-color-border-default);
-    background-clip: content-box;
-}
+    ::-webkit-scrollbar-thumb {
+        border: var(--rt-border-width-thick) solid transparent;
+        border-radius: var(--rt-radius-md);
+        background: var(--rt-color-border-default);
+        background-clip: content-box;
+    }
 
-::-webkit-scrollbar-thumb:hover {
-    border: var(--rt-border-width-medium) solid transparent;
-    background: var(--rt-color-border-strong);
-    background-clip: content-box;
-}
+    ::-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 {
-    border: var(--rt-border-width-thin) solid var(--rt-color-bg-subtle);
+    ::-webkit-scrollbar-track:hover {
+        border: var(--rt-border-width-thin) solid var(--rt-color-bg-subtle);
+    }
 }