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

package/src/styles/_layers.scss

@@ -0,0 +1,22 @@
+/* Порядок подслоёв кита. Объявляется раньше всего остального: слой, не названный здесь,
+   встаёт в каскад по первому появлению, а появляются подслои в порядке загрузки — стили
+   компонента Angular инжектит отдельным блоком, и он способен прийти раньше основы. Названные
+   заранее, оба подслоя держат порядок независимо от того, что загрузилось первым.
+
+   Правило приложения, объявленное вне слоя, выигрывает у любого правила отсюда независимо от
+   специфичности: неслоевое правило сильнее слоевого. Ради этого слой и заводится — перебивать
+   кит счётом специфичности потребителю больше не нужно.
+
+   Объявления свойств на корне страницы (`:root { --rt-* }`) в слой не уходят: их потребитель
+   перебивает порядком, объявляя свою линейку бренда после `tokens.css`.
+
+   Нижний подслой — `vendor`, и он для чужого CSS, который чинит кит: тема редактора текста,
+   готовые стили перекрытия. Слой опускает правила кита ниже всего, что объявлено вне слоя, —
+   не только ниже приложения, но и ниже такой библиотеки, и панель редактора перестраивалась
+   молча. Подключается чужой файл импортом с именем подслоя:
+
+       @import 'quill/dist/quill.snow.css' layer(rt-kit.vendor);
+
+   Кит его за потребителя не подключает: редактор текста опционален, и тянуть его тему в
+   пакет значило бы отдать её всем. */
+@layer rt-kit.vendor, rt-kit.base, rt-kit.components;

package/src/styles/_login.scss

@@ -1,97 +1,99 @@
-.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);
-}
+@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__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__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__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__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__form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-5);
+    }
 
-.login__error {
-    padding: var(--rt-space-sm) var(--rt-space-3);
-    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__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__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__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 {
+        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: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;
+    .login__link:focus-visible {
+        border-radius: var(--rt-radius-xs);
+        outline: 2px solid var(--rt-color-action-primary);
+        outline-offset: 2px;
+    }
 }

package/src/styles/_mixins.scss

@@ -6,7 +6,7 @@
 }
 
 @mixin surface-card-dark {
-    background: var(--rt-blue-900);
+    background: var(--rt-color-bg-nav);
     box-shadow: var(--rt-shadow-card-soft);
 }
 

package/src/styles/_primitives.scss

@@ -1,42 +1,55 @@
 /* Primitive design tokens — single source of truth для шкал. */
 
 :root {
-    /* Neutral scale — серо-сине-стальная. */
+    /* Neutral scale — серо-сине-стальная.
+
+       Ряд посчитан в OKLCH: тон 264.4° и цветность 0.0234 взяты у прежней ступени 600,
+       светлота идёт ровным шагом 0.0785 от 0.985 к 0.20. Ноль остаётся чистым белым —
+       это бумага, а не ступень ряда. В самом светлом конце цветность ужата охватом
+       sRGB: синеватого такой светлоты не существует.
+
+       До пересчёта ряд шкалой не был. Он держал два семейства сразу — чисто серое
+       (0, 50, 200, 500, 900) и синеватое (100, 300, 400, 600, 700, 800, 950), —
+       шаг светлоты гулял от 0.009 до 0.173, а ступень 900 была темнее ступени 950,
+       то есть ряд шёл назад. Ещё девять ступеней стояли между этими: заведённые под
+       одно место, они выглядели шкалой, но выбрать из такого ряда было нельзя. */
     --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-500: #7e7e7e;
-
-    /* Самый светлый серый, проходящий порог 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;
+    --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;
+
+    /* Бренд — линейка цвета марки. Потребитель перекрашивает кит объявлением этих
+       одиннадцати ступеней после tokens.css: назначения, прозрачные оттенки и кольцо
+       фокуса берут цвет отсюда сами, в обеих темах.
+
+       Ряд посчитан в 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 +61,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 +181,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;
@@ -198,10 +248,19 @@
     --rt-overlay-white-25: rgb(250 250 250 / 25%); /* disabled-текст на графите */
     --rt-overlay-white-40: rgb(250 250 250 / 40%); /* muted-текст на графите */
     --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);
+    }
 }