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

package/src/lib/components/workspace-details/rt-workspace-details.component.scss

@@ -1,128 +1,132 @@
-.rt-workspace-details {
-    display: flex;
-    flex-direction: column;
-    block-size: 100%;
-    min-block-size: 0;
+@layer rt-kit.components {
+    .rt-workspace-details {
+        --rt-workspace-details-border-width: var(--rt-border-width-thin);
 
-    &__head {
         display: flex;
-        flex: 0 0 auto;
-        align-items: center;
-        block-size: 56px;
-        border-block-end: var(--rt-border-width-thin) solid var(--rt-color-border-strong);
-        padding-inline: var(--rt-space-lg);
-    }
-
-    &__head-title {
-        color: var(--rt-color-text-primary);
-        font-size: var(--rt-text-md);
-        font-weight: var(--rt-font-weight-semibold);
-    }
-
-    &__tabs {
-        flex: 1 1 auto;
+        flex-direction: column;
+        block-size: 100%;
         min-block-size: 0;
 
-        .rt-tabs__header {
-            align-items: flex-end;
+        &__head {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
             block-size: 56px;
-            border-block-end: var(--rt-border-width-thin) solid var(--rt-color-border-strong);
+            border-block-end: var(--rt-workspace-details-border-width) solid var(--rt-color-border-strong);
             padding-inline: var(--rt-space-lg);
         }
 
-        .rt-tabs__tab-list {
-            border-block-end: 0;
+        &__head-title {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
         }
 
-        .rt-tabs__content {
-            padding-block-end: var(--rt-space-5);
-            padding-inline: var(--rt-space-lg);
+        &__tabs {
+            flex: 1 1 auto;
+            min-block-size: 0;
+
+            .rt-tabs__header {
+                align-items: flex-end;
+                block-size: 56px;
+                border-block-end: var(--rt-workspace-details-border-width) solid var(--rt-color-border-strong);
+                padding-inline: var(--rt-space-lg);
+            }
+
+            .rt-tabs__tab-list {
+                border-block-end: 0;
+            }
+
+            .rt-tabs__content {
+                padding-block-end: var(--rt-space-5);
+                padding-inline: var(--rt-space-lg);
+            }
         }
-    }
-
-    &__body {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-        padding: var(--rt-space-5) var(--rt-space-lg);
-        gap: var(--rt-space-md);
-        min-block-size: 0;
-        overflow-y: auto;
-    }
 
-    &__agent-view,
-    &__agent-edit {
-        display: flex;
-        align-items: center;
-        gap: var(--rt-space-sm);
-    }
+        &__body {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
+            padding: var(--rt-space-5) var(--rt-space-lg);
+            gap: var(--rt-space-md);
+            min-block-size: 0;
+            overflow-y: auto;
+        }
 
-    &__agent-name {
-        overflow: hidden;
-        min-inline-size: 0;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
+        &__agent-view,
+        &__agent-edit {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-space-sm);
+        }
 
-    &__toggle-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--rt-space-md);
-    }
+        &__agent-name {
+            overflow: hidden;
+            min-inline-size: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
 
-    &__toggle-label {
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-sm);
-        font-weight: var(--rt-font-weight-medium);
-    }
+        &__toggle-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: var(--rt-space-md);
+        }
 
-    &__toggle-hint {
-        margin: 0;
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-sm);
-    }
+        &__toggle-label {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
+        }
 
-    &__transition-form {
-        display: flex;
-        flex-direction: column;
-        gap: var(--rt-space-md);
-    }
+        &__toggle-hint {
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+        }
 
-    &__transition-submit {
-        align-self: flex-start;
-    }
+        &__transition-form {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-md);
+        }
 
-    &__audit {
-        display: flex;
-        flex-direction: column;
-        gap: var(--rt-space-md);
-    }
+        &__transition-submit {
+            align-self: flex-start;
+        }
 
-    &__audit-loading,
-    &__audit-more {
-        align-self: center;
-    }
+        &__audit {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-md);
+        }
 
-    &__footer {
-        display: flex;
-        flex: 0 0 auto;
-        flex-direction: column;
-        padding: var(--rt-space-md) var(--rt-space-lg);
-        border-block-start: var(--rt-border-width-thin) solid var(--rt-color-border-strong);
-        gap: var(--rt-space-sm);
+        &__audit-loading,
+        &__audit-more {
+            align-self: center;
+        }
 
-        &:empty {
-            display: none;
+        &__footer {
+            display: flex;
+            flex: 0 0 auto;
+            flex-direction: column;
+            padding: var(--rt-space-md) var(--rt-space-lg);
+            border-block-start: var(--rt-workspace-details-border-width) solid var(--rt-color-border-strong);
+            gap: var(--rt-space-sm);
+
+            &:empty {
+                display: none;
+            }
         }
-    }
 
-    &__footer-action {
-        justify-content: center;
-        inline-size: 100%;
-    }
+        &__footer-action {
+            justify-content: center;
+            inline-size: 100%;
+        }
 
-    &__error {
-        margin-inline: var(--rt-space-lg);
+        &__error {
+            margin-inline: var(--rt-space-lg);
+        }
     }
 }

package/src/styles/_index.scss

@@ -2,11 +2,22 @@
 // _breakpoints.scss НЕ форвардим — это SCSS-namespace для прямого @use
 // из feature-стилей (CSS-vars в @media не поддерживаются).
 
+// Порядок подслоёв идёт первым: он обязан попасть в вывод раньше первого правила, которое в
+// подслой ложится.
+@forward './layers';
+
 @forward './primitives';
 @forward './semantic';
 @forward './theme-dark';
+@forward './theme-dark-rules';
 @forward './scrollbar';
 
+// Раскладка экрана входа: она объявлена классами, а не компонентом, поэтому доехать до
+// потребителя может только отсюда. Без этой строки приложение получает разметку, у которой ни
+// один класс не имеет правила: экран рисуется потоком, и ни сборка, ни линтер, ни снимки витрин
+// этого не видят — истории у экрана входа нет.
+@forward './login';
+
 // Стили директивы кнопки: своего представления у директивы нет, поэтому её `.scss` не
 // подключён ни одним `styleUrl`. Без этой строки потребитель, взявший `tokens.css` по
 // инструкции README, получает `rtButton`, нарисованный браузерной кнопкой.

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);
 }