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

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

@@ -1,129 +1,133 @@
-/* rt-calendar — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
-   `.rt-calendar` — сам хост (шаблон начинается с ng-container, класс ставит host). */
-
-.rt-calendar {
-    display: block;
-
-    &__header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: var(--rt-space-3);
-        gap: var(--rt-space-3);
-    }
-
-    &__nav {
-        flex: 0 0 auto;
-    }
+@layer rt-kit.components {
+    /* rt-calendar — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+       `.rt-calendar` — сам хост (шаблон начинается с ng-container, класс ставит host). */
 
-    &__months {
-        display: grid;
-        gap: var(--rt-space-6);
-        grid-template-columns: repeat(2, 1fr);
-    }
+    .rt-calendar {
+        --rt-calendar-day-radius: var(--rt-radius-md);
 
-    &__month-title {
-        margin: 0 0 var(--rt-space-2);
-        color: var(--rt-color-text-primary);
-        font-weight: var(--rt-font-weight-semibold);
-        text-align: center;
+        display: block;
 
-        &:first-letter {
-            text-transform: uppercase;
+        &__header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: var(--rt-space-4);
+            gap: var(--rt-space-4);
         }
-    }
-
-    &__grid {
-        display: grid;
-        gap: var(--rt-space-0-5);
-        grid-template-columns: repeat(7, 1fr);
-    }
 
-    &__weekday {
-        padding: var(--rt-space-1) 0;
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-xs);
-        text-align: center;
-    }
+        &__nav {
+            flex: 0 0 auto;
+        }
 
-    &__day {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: var(--rt-space-1-5) var(--rt-space-0-5);
-        border: none;
-        border-radius: var(--rt-radius-md);
-        background: none;
-        color: var(--rt-color-text-primary);
-        cursor: pointer;
-        font: inherit;
-        gap: var(--rt-space-0-5);
-
-        &:hover:not(:disabled, [data-state='start'], [data-state='end'], [data-state='in-range']) {
-            background: var(--rt-color-bg-subtle);
+        &__months {
+            display: grid;
+            gap: var(--rt-space-6);
+            grid-template-columns: repeat(2, 1fr);
         }
 
-        &:disabled {
-            cursor: not-allowed;
+        &__month-title {
+            margin: 0 0 var(--rt-space-2);
+            color: var(--rt-color-text-primary);
+            font-weight: var(--rt-font-weight-semibold);
+            text-align: center;
+
+            &:first-letter {
+                text-transform: uppercase;
+            }
         }
 
-        &[data-state='past'],
-        &[data-state='blocked'] {
-            color: var(--rt-color-text-muted);
-            opacity: 0.45;
+        &__grid {
+            display: grid;
+            gap: var(--rt-space-0-5);
+            grid-template-columns: repeat(7, 1fr);
         }
 
-        &[data-state='busy'] {
+        &__weekday {
+            padding: var(--rt-space-1) 0;
             color: var(--rt-color-text-muted);
-            opacity: 0.45;
-            text-decoration: line-through;
+            font-size: var(--rt-text-xs);
+            text-align: center;
         }
 
-        &[data-state='start'],
-        &[data-state='end'] {
-            background: var(--rt-color-action-primary);
-            color: var(--rt-color-action-on-primary);
+        &__day {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: var(--rt-space-2) var(--rt-space-0-5);
+            border: none;
+            border-radius: var(--rt-calendar-day-radius);
+            background: none;
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font: inherit;
+            gap: var(--rt-space-0-5);
+
+            &:hover:not(:disabled, [data-state='start'], [data-state='end'], [data-state='in-range']) {
+                background: var(--rt-color-bg-subtle);
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+            }
+
+            &[data-state='past'],
+            &[data-state='blocked'] {
+                color: var(--rt-color-text-muted);
+                opacity: 0.45;
+            }
+
+            &[data-state='busy'] {
+                color: var(--rt-color-text-muted);
+                opacity: 0.45;
+                text-decoration: line-through;
+            }
+
+            &[data-state='start'],
+            &[data-state='end'] {
+                background: var(--rt-color-action-primary);
+                color: var(--rt-color-action-on-primary);
+            }
+
+            &[data-state='in-range'] {
+                background: var(--rt-color-action-primary-soft);
+                color: var(--rt-color-text-link);
+                font-weight: var(--rt-font-weight-semibold);
+            }
         }
 
-        &[data-state='in-range'] {
-            background: var(--rt-color-action-primary-soft);
-            color: var(--rt-color-text-link);
-            font-weight: var(--rt-font-weight-semibold);
+        &__day-num {
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
         }
-    }
-
-    &__day-num {
-        font-size: var(--rt-text-sm);
-        font-weight: var(--rt-font-weight-medium);
-    }
-
-    &__day-sublabel {
-        font-size: var(--rt-text-2xs);
-        opacity: 0.75;
-    }
 
-    @media (width <= 640px) {
-        &__months {
-            grid-template-columns: 1fr;
+        &__day-sublabel {
+            font-size: var(--rt-text-2xs);
+            opacity: 0.75;
         }
 
-        /* на мобиле показываем один месяц — навигация листает по одному */
-        &__month:last-child {
-            display: none;
-        }
-    }
+        @media (width <= 640px) {
+            &__months {
+                grid-template-columns: 1fr;
+            }
 
-    /* Экраны уже 375px: колонка не сжимается ниже строки с ценой — разряды
-       разделены неразрывным пробелом, и перенести её нечем. Освобождаем
-       ширину боковыми отступами клетки и ступенью кегля, а не прячем цену:
-       без неё календарь перестаёт быть прайс-листом */
-    @media (width <= 374px) {
-        &__day {
-            padding-inline: 0;
+            /* на мобиле показываем один месяц — навигация листает по одному */
+            &__month:last-child {
+                display: none;
+            }
         }
 
-        &__day-sublabel {
-            font-size: var(--rt-text-3xs);
+        /* Экраны уже 375px: колонка не сжимается ниже строки с ценой — разряды
+           разделены неразрывным пробелом, и перенести её нечем. Освобождаем
+           ширину боковыми отступами клетки и ступенью кегля, а не прячем цену:
+           без неё календарь перестаёт быть прайс-листом */
+        @media (width <= 374px) {
+            &__day {
+                padding-inline: 0;
+            }
+
+            &__day-sublabel {
+                font-size: var(--rt-text-3xs);
+            }
         }
     }
 }

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

@@ -1,59 +1,67 @@
-/* rt-card — контейнер карточки в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-card` висит
-   и на `<rt-card>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
+@layer rt-kit.components {
+    /* rt-card — контейнер карточки в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-card` висит
+       и на `<rt-card>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
 
-rt-card {
-    display: block;
-
-    .rt-card {
+    rt-card {
         display: block;
-        padding: var(--rt-space-lg);
-        border-radius: var(--rt-radius-xl);
-        background: var(--rt-color-bg-surface);
-        box-shadow: var(--rt-shadow-card);
-        color: var(--rt-color-text-primary);
-
-        &--clickable {
-            cursor: pointer;
-            transition:
-                box-shadow var(--rt-duration-fast) ease,
-                transform var(--rt-duration-fast) ease;
-
-            &:hover {
-                box-shadow: var(--rt-shadow-lg);
-            }
 
-            &:focus-visible {
-                box-shadow: var(--rt-shadow-focus-ring);
-                outline: 2px solid transparent;
-                outline-offset: 2px;
+        .rt-card {
+            --rt-card-radius: var(--rt-radius-xl);
+            --rt-card-shadow: var(--rt-shadow-card);
+            --rt-card-shadow-hover: var(--rt-shadow-lg);
+            --rt-card-focus-shadow: var(--rt-shadow-focus-ring);
+            --rt-card-transition-duration: var(--rt-duration-fast);
+
+            display: block;
+            padding: var(--rt-space-lg);
+            border-radius: var(--rt-card-radius);
+            background: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-card-shadow);
+            color: var(--rt-color-text-primary);
+
+            &--clickable {
+                cursor: pointer;
+                transition:
+                    box-shadow var(--rt-card-transition-duration) ease,
+                    transform var(--rt-card-transition-duration) ease;
+
+                &:hover {
+                    box-shadow: var(--rt-card-shadow-hover);
+                }
+
+                &:focus-visible {
+                    box-shadow: var(--rt-card-focus-shadow);
+                    outline: 2px solid transparent;
+                    outline-offset: 2px;
+                }
             }
-        }
 
-        &__header {
-            margin-block-end: var(--rt-space-md);
+            &__header {
+                margin-block-end: var(--rt-space-md);
 
-            &:empty {
-                display: none;
+                &:empty {
+                    display: none;
+                }
             }
-        }
 
-        &__title {
-            margin: 0;
-            font-size: var(--rt-text-lg);
-            line-height: var(--rt-leading-snug);
-        }
+            &__title {
+                margin: 0;
+                font-size: var(--rt-text-lg);
+                line-height: var(--rt-leading-snug);
+            }
 
-        &__content {
-            display: block;
-        }
+            &__content {
+                display: block;
+            }
 
-        &__footer {
-            margin-block-start: var(--rt-space-md);
+            &__footer {
+                margin-block-start: var(--rt-space-md);
 
-            &:empty {
-                display: none;
+                &:empty {
+                    display: none;
+                }
             }
         }
     }