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

package/src/lib/components/tag/rt-tag.component.scss

@@ -1,98 +1,103 @@
-/* rt-tag — status pill в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-tag` висит
-   и на `<rt-tag>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
+@layer rt-kit.components {
+    /* rt-tag — status pill в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-tag` висит
+       и на `<rt-tag>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
 
-rt-tag {
-    display: inline-flex;
-
-    .rt-tag {
+    rt-tag {
         display: inline-flex;
-        align-items: center;
-        padding: var(--rt-space-1) var(--rt-space-2);
-        border-radius: var(--rt-radius-md);
-        background: var(--rt-neutral-100);
-        color: var(--rt-neutral-700);
-        font-size: var(--rt-text-sm);
-        gap: var(--rt-space-1);
-        line-height: var(--rt-leading-tight);
-
-        &--shape--pill {
-            border-radius: var(--rt-radius-full);
-        }
-
-        &--shape--square {
-            border-radius: var(--rt-radius-sm);
-        }
-
-        /* Явный radius переопределяет shape — правила идут позже по порядку. */
-        &--radius--none {
-            border-radius: var(--rt-radius-none);
-        }
-
-        &--radius--sm {
-            border-radius: var(--rt-radius-sm);
-        }
-
-        &--radius--md {
-            border-radius: var(--rt-radius-md);
-        }
-
-        &--radius--lg {
-            border-radius: var(--rt-radius-lg);
-        }
-
-        &--radius--full {
-            border-radius: var(--rt-radius-full);
-        }
-
-        &--severity--info {
-            background: var(--rt-color-state-info-bg);
-            color: var(--rt-color-state-info);
-        }
-
-        &--severity--success {
-            background: var(--rt-color-state-success-bg);
-            color: var(--rt-color-state-success);
-        }
-
-        &--severity--warning {
-            background: var(--rt-color-state-warning-bg);
-            color: var(--rt-color-state-warning);
-        }
-
-        &--severity--danger {
-            background: var(--rt-color-state-danger-bg);
-            color: var(--rt-color-state-danger);
-        }
-
-        &--severity--secondary,
-        &--severity--neutral {
-            background: var(--rt-color-bg-subtle);
-            color: var(--rt-color-text-primary);
-        }
-
-        /* Outlined: прозрачный фон + рамка цвета палитры (currentColor = текст).
-           После severity-блоков — иначе их `background` перебил бы transparent. */
-        &--appearance--outlined {
-            border: var(--rt-border-width-thin) solid currentcolor;
-            background: transparent;
-        }
-
-        &__icon {
-            flex-shrink: 0;
-        }
-
-        &__icon-end {
-            flex-shrink: 0;
-        }
-
-        &__text {
-            line-height: var(--rt-leading-none);
-        }
 
-        &__close {
-            margin-inline-start: var(--rt-space-0-5);
+        .rt-tag {
+            --rt-tag-radius: var(--rt-radius-md);
+            --rt-tag-border-width: var(--rt-border-width-thin);
+
+            display: inline-flex;
+            align-items: center;
+            padding: var(--rt-space-1) var(--rt-space-2);
+            border-radius: var(--rt-tag-radius);
+            background: var(--rt-neutral-100);
+            color: var(--rt-neutral-700);
+            font-size: var(--rt-text-sm);
+            gap: var(--rt-space-1);
+            line-height: var(--rt-leading-tight);
+
+            &--shape--pill {
+                --rt-tag-radius: var(--rt-radius-full);
+            }
+
+            &--shape--square {
+                --rt-tag-radius: var(--rt-radius-sm);
+            }
+
+            /* Явный radius переопределяет shape — правила идут позже по порядку. */
+            &--radius--none {
+                --rt-tag-radius: var(--rt-radius-none);
+            }
+
+            &--radius--sm {
+                --rt-tag-radius: var(--rt-radius-sm);
+            }
+
+            &--radius--md {
+                --rt-tag-radius: var(--rt-radius-md);
+            }
+
+            &--radius--lg {
+                --rt-tag-radius: var(--rt-radius-lg);
+            }
+
+            &--radius--full {
+                --rt-tag-radius: var(--rt-radius-full);
+            }
+
+            &--severity--info {
+                background: var(--rt-color-state-info-bg);
+                color: var(--rt-color-state-info);
+            }
+
+            &--severity--success {
+                background: var(--rt-color-state-success-bg);
+                color: var(--rt-color-state-success);
+            }
+
+            &--severity--warning {
+                background: var(--rt-color-state-warning-bg);
+                color: var(--rt-color-state-warning);
+            }
+
+            &--severity--danger {
+                background: var(--rt-color-state-danger-bg);
+                color: var(--rt-color-state-danger);
+            }
+
+            &--severity--secondary,
+            &--severity--neutral {
+                background: var(--rt-color-bg-subtle);
+                color: var(--rt-color-text-primary);
+            }
+
+            /* Outlined: прозрачный фон + рамка цвета палитры (currentColor = текст).
+               После severity-блоков — иначе их `background` перебил бы transparent. */
+            &--appearance--outlined {
+                border: var(--rt-tag-border-width) solid currentcolor;
+                background: transparent;
+            }
+
+            &__icon {
+                flex-shrink: 0;
+            }
+
+            &__icon-end {
+                flex-shrink: 0;
+            }
+
+            &__text {
+                line-height: var(--rt-leading-none);
+            }
+
+            &__close {
+                margin-inline-start: var(--rt-space-0-5);
+            }
         }
     }
 }

package/src/lib/components/textarea/rt-textarea.component.scss

@@ -1,78 +1,80 @@
-.rt-textarea {
-    display: block;
-    width: 100%;
+@layer rt-kit.components {
+    .rt-textarea {
+        display: block;
+        width: 100%;
 
-    /* bordered=false: снимаем только resting-рамку контрола. Объявлено ДО блока
-       __control — его focus-visible (равная специфичность) и правило
-       --invalid __control идут ниже по source-order и перекрывают рамку. */
-    &--borderless &__control {
-        border-color: transparent;
-    }
+        /* bordered=false: снимаем только resting-рамку контрола. Объявлено ДО блока
+           __control — его focus-visible (равная специфичность) и правило
+           --invalid __control идут ниже по source-order и перекрывают рамку. */
+        &--borderless &__control {
+            border-color: transparent;
+        }
 
-    &__control {
-        width: 100%;
-        min-height: var(--rt-textarea-min-height);
-        box-sizing: border-box;
-        padding: var(--rt-textarea-padding-y) var(--rt-input-padding-x);
-        border: var(--rt-input-border-width) solid var(--rt-input-color-border);
-        border-radius: var(--rt-input-radius);
-        background-color: var(--rt-input-color-bg);
-        color: var(--rt-input-color-text);
+        &__control {
+            width: 100%;
+            min-height: var(--rt-textarea-min-height);
+            box-sizing: border-box;
+            padding: var(--rt-textarea-padding-y) var(--rt-input-padding-x);
+            border: var(--rt-input-border-width) solid var(--rt-input-color-border);
+            border-radius: var(--rt-input-radius);
+            background-color: var(--rt-input-color-bg);
+            color: var(--rt-input-color-text);
 
-        /* textarea не наследует font-family от body на UA-defaults (browser даёт
-           monospace) — задаём inherit явно, иначе шрифт отваливается. */
-        font-family: inherit;
-        font-size: var(--rt-input-font-size);
-        line-height: var(--rt-textarea-line-height);
-        transition: var(--rt-input-transition);
+            /* textarea не наследует font-family от body на UA-defaults (browser даёт
+               monospace) — задаём inherit явно, иначе шрифт отваливается. */
+            font-family: inherit;
+            font-size: var(--rt-input-font-size);
+            line-height: var(--rt-textarea-line-height);
+            transition: var(--rt-input-transition);
 
-        &::placeholder {
-            color: var(--rt-input-color-text-placeholder);
-            opacity: 1;
-        }
+            &::placeholder {
+                color: var(--rt-input-color-text-placeholder);
+                opacity: 1;
+            }
 
-        &:focus-visible {
-            border-color: var(--rt-input-color-border-focus);
-            box-shadow: var(--rt-input-focus-shadow);
-            outline: 2px solid transparent;
-            outline-offset: var(--rt-input-focus-outline-offset);
-        }
+            &:focus-visible {
+                border-color: var(--rt-input-color-border-focus);
+                box-shadow: var(--rt-input-focus-shadow);
+                outline: 2px solid transparent;
+                outline-offset: var(--rt-input-focus-outline-offset);
+            }
 
-        &:disabled {
-            background-color: var(--rt-input-color-bg-disabled);
-            cursor: not-allowed;
+            &:disabled {
+                background-color: var(--rt-input-color-bg-disabled);
+                cursor: not-allowed;
+            }
         }
-    }
 
-    &--size--sm &__control {
-        min-height: var(--rt-textarea-min-height-sm);
-    }
+        &--size--sm &__control {
+            min-height: var(--rt-textarea-min-height-sm);
+        }
 
-    &--size--lg &__control {
-        min-height: var(--rt-textarea-min-height-lg);
-    }
+        &--size--lg &__control {
+            min-height: var(--rt-textarea-min-height-lg);
+        }
 
-    &--invalid &__control {
-        border-color: var(--rt-input-color-border-error);
+        &--invalid &__control {
+            border-color: var(--rt-input-color-border-error);
 
-        &:focus-visible {
-            box-shadow: var(--rt-input-focus-shadow-error);
+            &:focus-visible {
+                box-shadow: var(--rt-input-focus-shadow-error);
+            }
         }
-    }
 
-    &--disabled {
-        opacity: var(--rt-input-disabled-opacity);
-    }
+        &--disabled {
+            opacity: var(--rt-input-disabled-opacity);
+        }
 
-    /* Read-only: многострочное значение как плоский текст (переносы сохраняем). */
-    &__readonly {
-        display: block;
-        color: var(--rt-field-value-color);
-        font-size: var(--rt-field-value-font-size);
-        white-space: pre-wrap;
+        /* Read-only: многострочное значение как плоский текст (переносы сохраняем). */
+        &__readonly {
+            display: block;
+            color: var(--rt-field-value-color);
+            font-size: var(--rt-field-value-font-size);
+            white-space: pre-wrap;
 
-        &--empty {
-            color: var(--rt-field-value-empty-color);
+            &--empty {
+                color: var(--rt-field-value-empty-color);
+            }
         }
     }
 }

package/src/lib/components/theme-toggle/rt-theme-toggle.component.scss

@@ -1,7 +1,9 @@
-/* rt-theme-toggle — ViewEncapsulation.None: правило таргетирует BEM-класс блока.
-   `.rt-theme-toggle` — сам хост: своей разметки блока у компонента нет, внутри
-   только rt-toggle-switch либо rt-icon-button. */
+@layer rt-kit.components {
+    /* rt-theme-toggle — ViewEncapsulation.None: правило таргетирует BEM-класс блока.
+       `.rt-theme-toggle` — сам хост: своей разметки блока у компонента нет, внутри
+       только rt-toggle-switch либо rt-icon-button. */
 
-.rt-theme-toggle {
-    display: inline-flex;
+    .rt-theme-toggle {
+        display: inline-flex;
+    }
 }