@rt-tools/ui-kit 0.0.19 → 0.0.20

package/src/lib/ui-kit/dynamic-selectors/strories/component/input/test-dynamic-input.component.scss

@@ -1,11 +1,10 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-
-    display: flex;
     flex-direction: column;
-    justify-content: flex-start;
     align-items: center;
+    justify-content: flex-start;
     margin: -1rem;
 
     rtui-dynamic-input {

package/src/lib/ui-kit/dynamic-selectors/strories/component/selector/test-selector.component.scss

@@ -1,11 +1,10 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-
-    display: flex;
     flex-direction: column;
-    justify-content: flex-start;
     align-items: center;
+    justify-content: flex-start;
     margin: -1rem;
 
     rtui-dynamic-selector {
@@ -23,13 +22,13 @@
     .custom-title {
         display: inline-flex;
         align-items: center;
-        gap: 0.5rem;
         font-size: 0.875rem;
+        gap: 0.5rem;
 
         &__icon {
-            font-size: 1.125rem;
             width: 1.125rem;
             height: 1.125rem;
+            font-size: 1.125rem;
         }
 
         &__id {

package/src/lib/ui-kit/file-uploader/rtui-file-upload.component.scss

@@ -35,18 +35,18 @@ $file-upload: (
         }
     }
 
+    display: var(--rt-file-upload-host-display);
     width: var(--rt-file-upload-host-width);
     max-width: var(--rt-file-upload-host-max-width);
     height: var(--rt-file-upload-host-height);
     max-height: var(--rt-file-upload-host-max-height);
-    display: var(--rt-file-upload-host-display);
     flex-direction: var(--rt-file-upload-host-flex-direction);
-    justify-content: var(--rt-file-upload-host-justify-content);
     align-items: var(--rt-file-upload-host-align-items);
-    gap: var(--rt-file-upload-host-gap);
+    justify-content: var(--rt-file-upload-host-justify-content);
     padding: var(--rt-file-upload-host-padding);
     border: var(--rt-file-upload-host-border);
     border-radius: var(--rt-file-upload-host-border-radius);
+    gap: var(--rt-file-upload-host-gap);
     transition: border-color 0.3s ease-in-out;
 
     &.--dragged {
@@ -57,13 +57,13 @@ $file-upload: (
         &__icon {
             width: var(--rt-file-upload-icon-size);
             height: var(--rt-file-upload-icon-size);
-            font-size: var(--rt-file-upload-icon-size);
             color: var(--rt-file-upload-icon-color);
+            font-size: var(--rt-file-upload-icon-size);
         }
 
         &__title {
-            font-size: var(--rt-file-upload-title-font-size);
             color: var(--rt-file-upload-title-color);
+            font-size: var(--rt-file-upload-title-font-size);
         }
     }
 }

package/src/lib/ui-kit/file-uploader/stories/component/test-file-upload.component.scss

@@ -1,6 +1,6 @@
 :host {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 }

package/src/lib/ui-kit/header/header.component.scss

@@ -0,0 +1 @@
+// Intentionally empty — header is styled entirely via host bindings and Material theme vars.

package/src/lib/ui-kit/header/stories/component/test-header.component.scss

@@ -1,14 +1,14 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
     margin: -1rem;
 
     .content {
-        flex-grow: 1;
         display: flex;
-        justify-content: center;
+        flex-grow: 1;
         align-items: center;
+        justify-content: center;
     }
 }

package/src/lib/ui-kit/image-uploader/image-uploader/rtui-image-upload.component.scss

@@ -40,15 +40,15 @@ $image-upload: (
         }
     }
 
+    display: var(--rt-image-upload-host-display);
     width: var(--rt-image-upload-host-width);
     min-width: var(--rt-image-upload-host-min-height);
     max-width: var(--rt-image-upload-host-max-width);
     height: var(--rt-image-upload-host-height);
     min-height: var(--rt-image-upload-host-min-height);
     max-height: var(--rt-image-upload-host-max-height);
-    display: var(--rt-image-upload-host-display);
-    justify-content: var(--rt-image-upload-host-justify-content);
     align-items: var(--rt-image-upload-host-align-items);
+    justify-content: var(--rt-image-upload-host-justify-content);
 
     .rtui-image-cropper {
         padding: var(--rt-image-upload-image-cropper-padding);
@@ -56,8 +56,8 @@ $image-upload: (
         &__actions {
             display: var(--rt-image-upload-image-cropper-actions-display);
             justify-content: var(--rt-image-upload-image-cropper-actions-justify-content);
-            gap: var(--rt-image-upload-image-cropper-actions-gap);
             margin-top: var(--rt-image-upload-image-cropper-actions-justify-margin-top);
+            gap: var(--rt-image-upload-image-cropper-actions-gap);
         }
     }
 
@@ -73,8 +73,8 @@ $image-upload: (
             pointer-events: none;
 
             &--active {
-                pointer-events: initial;
                 cursor: pointer;
+                pointer-events: initial;
 
                 &:hover {
                     opacity: 0.6;
@@ -84,9 +84,9 @@ $image-upload: (
 
         &__action {
             position: absolute;
+            z-index: 999;
             top: 0;
             right: 0;
-            z-index: 999;
             backdrop-filter: blur(1.25rem);
         }
     }

package/src/lib/ui-kit/image-uploader/stories/component/test-image-upload.component.scss

@@ -1,9 +1,9 @@
 :host {
+    display: flex;
     width: 20rem;
     height: 30rem;
-    display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     margin: 1rem;
 }

package/src/lib/ui-kit/info-badge/info-badge.component.scss

@@ -1,62 +1,63 @@
 :host {
-    border-radius: 9999px;
     display: block;
-    line-height: normal;
     max-width: fit-content;
+    border-radius: var(--rt-radius-full);
 
-    // default values
-    background-color: #005cbb;
-    color: #ffffff;
+    // default values (overridable by consumers; runtime variants set inline styles via InfoBadgeDirective)
+    /* stylelint-disable-next-line color-no-hex -- default brand blue has no palette token on purpose */
+    background-color: var(--rt-info-badge-background-color, #005cbb);
+    color: var(--rt-info-badge-color, var(--rt-text-static-light));
+    line-height: normal;
 
     .c-info-badge {
         display: flex;
-        gap: 0.15rem;
+        box-sizing: border-box;
         align-items: center;
         justify-content: center;
-        box-sizing: border-box;
+        gap: var(--rt-spacing-2);
         line-height: normal;
 
         &__content {
-            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
 
     .size-l {
-        font-size: 1.125rem;
-        padding: 0.3rem 0.65rem;
+        padding: var(--rt-spacing-4) var(--rt-spacing-12);
+        font-size: var(--rt-font-size-md);
 
         .mat-icon {
-            font-size: 1.5rem;
+            font-size: var(--rt-font-size-xl);
         }
     }
 
     .size-m {
-        font-size: 0.875rem;
-        padding: 0.22rem 0.65rem;
+        padding: var(--rt-spacing-4) var(--rt-spacing-12);
+        font-size: var(--rt-font-size-sm);
 
         .mat-icon {
-            font-size: 1.05rem;
+            font-size: var(--rt-font-size-md);
         }
     }
 
     .size-s {
-        font-size: 0.75rem;
-        padding: 0.2rem 0.65rem;
+        padding: var(--rt-spacing-4) var(--rt-spacing-12);
+        font-size: var(--rt-font-size-xs);
         letter-spacing: 0.025rem;
 
         .mat-icon {
-            font-size: 0.75rem;
+            font-size: var(--rt-font-size-xs);
         }
     }
 
     .mat-icon {
-        height: unset;
         width: unset;
+        height: unset;
     }
 
     .bold {
-        font-weight: 700;
+        font-weight: var(--rt-font-weight-bold);
     }
 }

package/src/lib/ui-kit/info-badge/stories/component/test-info-badge/test-info-badge.component.scss

@@ -4,8 +4,8 @@
     gap: 10px;
 
     &__container {
-        border: 1px grey dashed;
         max-width: 200px;
         padding: 5px;
+        border: 1px grey dashed;
     }
 }

package/src/lib/ui-kit/modal/modal.component.scss

@@ -47,23 +47,23 @@ $modal: (
     ::ng-deep {
         .--highlighted {
             display: inline;
-            font-weight: var(--rt-modal-text-highlited-font-weight);
             color: var(--rt-modal-text-highlited-color);
+            font-weight: var(--rt-modal-text-highlited-font-weight);
         }
 
         .--warn {
             display: inline;
+            color: var(--rt-modal-text-warn-color);
             font-size: var(--rt-modal-text-warn-font-size);
             font-weight: var(--rt-modal-text-warn-font-weight);
-            color: var(--rt-modal-text-warn-color);
         }
     }
 
     .rtui-modal {
         &__title {
             h1 {
-                font-size: var(--rt-modal-title-font-size);
                 color: var(--rt-modal-title-color);
+                font-size: var(--rt-modal-title-font-size);
                 font-weight: var(--rt-modal-title-font-weight);
             }
 
@@ -93,7 +93,7 @@ $modal: (
         height: auto;
     }
 
-    .mdc-dialog__title::before {
+    .mdc-dialog__title:before {
         height: 100%;
     }
 
@@ -101,8 +101,8 @@ $modal: (
         padding: var(--rt-modal-content-padding);
         color: var(--rt-modal-content-color);
         font-size: var(--rt-modal-content-font-size);
+        overflow-wrap: var(--rt-modal-content-word-wrap);
         text-align: var(--rt-modal-content-text-align);
-        word-wrap: var(--rt-modal-content-word-wrap);
 
         mat-form-field {
             width: 100%;

package/src/lib/ui-kit/popover/rtui-popover-container.component.scss

@@ -1,12 +1,11 @@
 :host {
     position: absolute;
-    width: fit-content;
     display: block;
+    width: fit-content;
 
     /* Hack to show properly popover on mouse hover */
-    padding-top: 20px;
+    padding-top: var(--rt-spacing-20);
     text-align: left;
-
     transition:
         transform 0.1s,
         opacity 0.5s;

package/src/lib/ui-kit/scrollable/scrollable-container.component.scss

@@ -27,12 +27,10 @@ $scrollable: (
 );
 
 :host {
-    height: var(--rt-scrollable-host-height);
-    width: var(--rt-scrollable-host-width);
-
     display: var(--rt-scrollable-host-display);
+    width: var(--rt-scrollable-host-width);
+    height: var(--rt-scrollable-host-height);
     flex-direction: var(--rt-scrollable-host-flex-direction);
-
     background-color: var(--rt-scrollable-host-background-color);
 
     @each $element, $elements in $scrollable {
@@ -49,11 +47,11 @@ $scrollable: (
 
         &__content {
             display: var(--rt-scrollable-content-display);
+            overflow: auto;
             flex-direction: var(--rt-scrollable-content-flex-direction);
             flex-grow: var(--rt-scrollable-content-flex-grow);
             padding: var(--rt-scrollable-content-padding);
             background-color: var(--rt-scrollable-content-background-color);
-            overflow: auto;
         }
 
         &__footer {

package/src/lib/ui-kit/side-menu/menu/rtui-side-menu.component.scss

@@ -41,21 +41,21 @@ $side-menu: (
 
         .rtui-mobile-side-menu-list {
             display: flex;
-            flex-direction: column;
             width: 100%;
+            flex-direction: column;
 
             &--scrollable {
                 width: fit-content;
             }
 
             &__sub {
+                animation: fade-in-animation 0.15s ease-in-out 0.15s forwards;
                 opacity: 0;
-                animation: fadeInAnimation 0.15s ease-in-out 0.15s forwards;
             }
 
             .rtui-mobile-side-menu-list-main {
+                animation: fade-in-animation 0.15s ease-in-out 0.15s forwards;
                 opacity: 0;
-                animation: fadeInAnimation 0.15s ease-in-out 0.15s forwards;
 
                 .rtui-mobile-side-menu-item {
                     &__icon {
@@ -66,22 +66,22 @@ $side-menu: (
 
                     .rtui-mobile-side-menu-item-title {
                         display: flex;
-                        justify-content: space-between;
                         align-items: center;
+                        justify-content: space-between;
 
                         &__text {
-                            font-size: 0.75rem;
+                            overflow: hidden;
+                            font-size: var(--rt-font-size-xs);
                             text-overflow: ellipsis;
                             white-space: nowrap;
-                            overflow: hidden;
                         }
 
                         .rtui-mobile-side-menu-item-title-button {
                             display: flex;
-                            justify-content: center;
                             align-items: center;
-                            margin-left: 0.5rem;
-                            border-radius: 50%;
+                            justify-content: center;
+                            border-radius: var(--rt-radius-full);
+                            margin-left: var(--rt-spacing-8);
 
                             &__icon {
                                 width: var(--rt-side-menu-mobile-item-additional-icon-size);
@@ -93,7 +93,7 @@ $side-menu: (
                 }
 
                 .rtui-mobile-side-menu-item + .rtui-mobile-side-menu-item {
-                    margin-top: 0.5rem;
+                    margin-top: var(--rt-spacing-8);
                 }
             }
         }
@@ -104,37 +104,37 @@ $side-menu: (
 
         &__list {
             display: flex;
+            width: 100%;
             flex-direction: column;
             align-items: center;
-            width: 100%;
 
             .rtui-side-menu-item {
                 display: flex;
+                width: 100%;
                 flex-direction: column;
-                justify-content: center;
                 align-items: center;
+                justify-content: center;
                 cursor: pointer;
-                width: 100%;
 
                 .rtui-side-menu-item-button {
-                    padding: 0;
                     display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    height: var(--rt-side-menu-item-height);
                     width: var(--rt-side-menu-item-width);
+                    height: var(--rt-side-menu-item-height);
+                    align-items: center;
+                    justify-content: center;
+                    padding: 0;
 
                     &__icon {
                         display: flex;
-                        justify-content: center;
                         align-items: center;
+                        justify-content: center;
                     }
                 }
 
                 &__title {
                     font-size: var(--rt-side-menu-item-font-size);
-                    text-align: var(--rt-side-menu-item-text-align);
                     line-height: var(--rt-side-menu-item-line-height);
+                    text-align: var(--rt-side-menu-item-text-align);
                 }
             }
 
@@ -157,18 +157,18 @@ $side-menu: (
         }
 
         .rtui-sub-side-menu-content {
+            // Component-local elevation token for the slide-out sub-menu drawer.
+            --rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);
+
             width: var(--rt-side-menu-sub-menu-width);
             height: 100%;
             border-left: 1px solid var(--rt-border-neutral-default);
-            box-shadow:
-                14px 0 28px rgba(0, 0, 0, 0.25),
-                10px 0 10px rgba(0, 0, 0, 0.22);
+            box-shadow: var(--rt-side-menu-sub-content-shadow);
 
             &__list {
                 width: 100%;
-
+                animation: fade-in-animation 0.15s ease-in-out 0.15s forwards;
                 opacity: 0;
-                animation: fadeInAnimation 0.15s ease-in-out 0.15s forwards;
 
                 &--scrollable {
                     min-width: fit-content;
@@ -178,7 +178,7 @@ $side-menu: (
     }
 }
 
-@keyframes fadeInAnimation {
+@keyframes fade-in-animation {
     to {
         opacity: 1;
     }

package/src/lib/ui-kit/side-menu/menu-sub-item/rtui-side-menu-sub-item.component.scss

@@ -2,12 +2,12 @@
     &::ng-deep {
         // Set expansion panel header padding
         .mat-expansion-indicator {
-            padding: 0 1.5rem 0 1.5rem;
+            padding: 0 var(--rt-spacing-24);
         }
 
         // Set expansion panel body padding
         .mat-expansion-panel-body {
-            padding: 0 0 0 1rem;
+            padding: 0 0 0 var(--rt-spacing-16);
         }
 
         // Set expansion panel transparent container
@@ -26,30 +26,30 @@
 
         .rtui-side-menu-sub-item-title {
             display: flex;
-            justify-content: space-between;
             align-items: center;
+            justify-content: space-between;
 
             &__text {
+                overflow: hidden;
                 font-size: var(--rt-side-menu-sub-menu-item-title-font-size);
                 text-overflow: ellipsis;
                 white-space: nowrap;
-                overflow: hidden;
             }
 
             .rtui-side-menu-sub-item-title-button {
                 display: flex;
-                justify-content: center;
                 align-items: center;
-                padding: 0.1rem;
-                margin-left: 0.5rem;
-                border-radius: 50%;
-                cursor: pointer;
+                justify-content: center;
+                padding: var(--rt-spacing-2);
                 border: 1.5px solid transparent;
+                border-radius: var(--rt-radius-full);
+                margin-left: var(--rt-spacing-8);
+                cursor: pointer;
 
                 &__icon {
                     width: 1.25rem;
                     height: 1.25rem;
-                    font-size: 1.25rem;
+                    font-size: var(--rt-font-size-lg);
                 }
 
                 &:hover {
@@ -61,9 +61,10 @@
 
     .rtui-side-menu-expand-sub-item {
         padding: 0;
-        box-shadow: none;
+
         // Set expand sub item header border like menu item border
-        border-radius: 1.35rem;
+        border-radius: var(--rt-radius-xl);
+        box-shadow: none;
 
         &--fixed {
             min-width: var(--rt-side-menu-sub-menu-item-width);
@@ -78,9 +79,8 @@
             }
 
             &__icon {
-                margin-inline-start: var(--mat-list-list-item-leading-icon-start-space);
-                margin-inline-end: var(--mat-list-list-item-leading-icon-end-space);
                 color: var(--mdc-list-list-item-leading-icon-color);
+                margin-inline: var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space);
             }
 
             &__title {

package/src/lib/ui-kit/side-menu/stories/component/test-side-menu-wrapper.component.scss

@@ -13,35 +13,35 @@
     height: 100vh;
     margin: -1rem;
     box-shadow:
-        0 14px 28px rgba(0, 0, 0, 0.25),
-        0 10px 10px rgba(0, 0, 0, 0.22);
+        0 14px 28px rgb(0 0 0 / 25%),
+        0 10px 10px rgb(0 0 0 / 22%);
 
     .side-menu-wrapper {
         &__header {
             display: flex;
+            width: 100%;
             align-items: center;
             justify-content: center;
-            width: 100%;
-            padding: 0.5rem 0 1rem 0;
+            padding: 0.5rem 0 1rem;
+            border-bottom: 1px solid var(--rt-color-neutral-25);
             cursor: pointer;
-            border-bottom: 1px solid var(--clr-black-20);
         }
 
         .footer {
             display: flex;
+            width: 100%;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            width: 100%;
-            gap: 0.5rem;
             padding-top: 0.5rem;
-            border-top: 1px solid var(--clr-black-20);
+            border-top: 1px solid var(--rt-color-neutral-25);
+            gap: 0.5rem;
 
             &__icon {
-                height: 2rem;
                 width: 2rem;
-                font-size: 2rem;
+                height: 2rem;
                 cursor: pointer;
+                font-size: 2rem;
             }
         }
     }

package/src/lib/ui-kit/snack-bar/snack-bar.component.scss

@@ -26,9 +26,9 @@ $snack-bar: (
 );
 
 :host {
-    height: 100%;
-    width: 100%;
     display: flex;
+    width: 100%;
+    height: 100%;
     align-items: center;
     justify-content: space-between;
 
@@ -40,10 +40,10 @@ $snack-bar: (
 
     .rt-snack-bar {
         &__content {
-            height: 100%;
-            width: 100%;
             position: relative;
             display: flex;
+            width: 100%;
+            height: 100%;
             align-items: center;
             gap: var(--rt-snack-bar-content-gap);
 
@@ -56,16 +56,16 @@ $snack-bar: (
                 width: var(--rt-snack-bar-icon-size);
                 min-width: var(--rt-snack-bar-icon-size);
                 height: var(--rt-snack-bar-icon-size);
-                font-size: var(--rt-snack-bar-icon-size);
                 color: var(--rt-snack-bar-icon-color);
+                font-size: var(--rt-snack-bar-icon-size);
             }
 
             &-message {
                 display: -webkit-box;
                 overflow: hidden;
-                text-overflow: ellipsis;
-                -webkit-line-clamp: var(--rt-snack-bar-message-line-clamp);
                 -webkit-box-orient: vertical;
+                -webkit-line-clamp: var(--rt-snack-bar-message-line-clamp);
+                text-overflow: ellipsis;
             }
         }
 
@@ -87,11 +87,11 @@ $snack-bar: (
 
         &__progress {
             position: absolute;
+            right: 0;
             bottom: 0;
             left: 0;
-            right: 0;
-            height: var(--rt-snack-bar-progress-height);
             width: 100%;
+            height: var(--rt-snack-bar-progress-height);
             background-color: var(--mat-button-filled-container-color);
             border-bottom-left-radius: var(--mat-snack-bar-container-shape);
             border-bottom-right-radius: var(--mat-snack-bar-container-shape);