@rt-tools/ui-kit 0.0.16 → 0.0.20

package/src/lib/ui-kit/dynamic-selectors/components/multi-selector-popup/rtui-multi-selector-popup.component.scss

@@ -5,9 +5,9 @@ $multi-selector: (
         width: 20rem,
         height: 30rem,
         padding: 1rem 0 1rem 1rem,
-        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
+        box-shadow: 0 0.5rem 1rem 0 var(--rt-shadow-color),
         border-radius: 0.375rem,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
     header: (
         padding: 0 1rem 0 0,
@@ -17,25 +17,25 @@ $multi-selector: (
     ),
     header-controls-item-icon: (
         margin-left: 0.5rem,
-        color: var(--clr-black-40),
+        color: var(--rt-text-base-disabled),
     ),
     header-controls-item-info: (
         margin-left: 0.5rem,
         font-size: 0.875rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     header-controls-item-first: (
         padding: 1rem 0 0 0.5rem,
     ),
     header-controls-item-last: (
         padding: 1rem 0 0 0,
-        border-bottom: solid 1px var(--clr-gray-20),
+        border-bottom: solid 1px var(--rt-border-neutral-divider),
     ),
     item-label-hover: (
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     options-item-separated: (
-        border-bottom: solid 1px var(--clr-gray-20),
+        border-bottom: solid 1px var(--rt-border-neutral-divider),
     ),
     options-item-title: (
         max-width: 15rem,
@@ -46,11 +46,11 @@ $multi-selector: (
     ),
     placeholder-icon: (
         size: 3rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     placeholder-title: (
         font-size: 1.5rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     footer: (
         padding: 1rem 1.5rem 0 0.5rem,
@@ -58,10 +58,10 @@ $multi-selector: (
     ),
     footer-nav-action: (
         font-size: 0.875rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     footer-nav-action-hover: (
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
 );
 
@@ -73,13 +73,13 @@ $multi-selector: (
     }
 
     display: flex;
-    flex-direction: column;
     width: var(--rt-multi-selector-host-width);
     height: var(--rt-multi-selector-host-height);
+    flex-direction: column;
     padding: var(--rt-multi-selector-host-padding);
-    box-shadow: var(--rt-multi-selector-host-box-shadow);
     border-radius: var(--rt-multi-selector-host-border-radius);
     background-color: var(--rt-multi-selector-host-background-color);
+    box-shadow: var(--rt-multi-selector-host-box-shadow);
 
     &::ng-deep {
         // radiobutton
@@ -141,8 +141,8 @@ $multi-selector: (
 
                 &-info {
                     margin-left: var(--rt-multi-selector-header-controls-item-info-margin-left);
-                    font-size: var(--rt-multi-selector-header-controls-item-info-font-size);
                     color: var(--rt-multi-selector-header-controls-item-info-color);
+                    font-size: var(--rt-multi-selector-header-controls-item-info-font-size);
                 }
             }
         }
@@ -150,19 +150,19 @@ $multi-selector: (
 
     .rtui-multi-selector-options {
         display: flex;
-        flex-direction: column;
-        flex: 1 1 100%;
-        height: 100%;
         width: 100%;
+        height: 100%;
+        flex: 1 1 100%;
+        flex-direction: column;
         overflow-y: auto;
 
         &__item {
             &-title {
+                overflow: hidden;
                 width: 100%;
                 max-width: var(--rt-multi-selector-options-item-title-max-width);
-                white-space: nowrap;
-                overflow: hidden;
                 text-overflow: ellipsis;
+                white-space: nowrap;
             }
 
             &--separated {
@@ -172,38 +172,38 @@ $multi-selector: (
 
         &__loader {
             display: flex;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
         }
     }
 
     .rtui-multi-selector-placeholder {
         display: flex;
+        flex: 1 1 100%;
         flex-direction: column;
-        justify-content: center;
         align-items: center;
-        flex: 1 1 100%;
-        gap: var(--rt-multi-selector-placeholder-gap);
+        justify-content: center;
         padding-right: var(--rt-multi-selector-placeholder-padding-right);
+        gap: var(--rt-multi-selector-placeholder-gap);
         overflow-y: auto;
 
         &__icon {
             width: var(--rt-multi-selector-placeholder-icon-size);
             height: var(--rt-multi-selector-placeholder-icon-size);
-            font-size: var(--rt-multi-selector-placeholder-icon-size);
             color: var(--rt-multi-selector-placeholder-icon-color);
+            font-size: var(--rt-multi-selector-placeholder-icon-size);
         }
 
         &__title {
-            font-size: var(--rt-multi-selector-placeholder-title-font-size);
             color: var(--rt-multi-selector-placeholder-title-color);
+            font-size: var(--rt-multi-selector-placeholder-title-font-size);
         }
     }
 
     .rtui-multi-selector-footer {
         display: flex;
-        justify-content: flex-end;
         align-items: center;
+        justify-content: flex-end;
         padding: var(--rt-multi-selector-footer-padding);
         gap: var(--rt-multi-selector-footer-gap);
 
@@ -212,9 +212,9 @@ $multi-selector: (
         }
 
         &__nav-action {
-            text-decoration: none;
-            font-size: var(--rt-multi-selector-footer-nav-action-font-size);
             color: var(--rt-multi-selector-footer-nav-action-color);
+            font-size: var(--rt-multi-selector-footer-nav-action-font-size);
+            text-decoration: none;
 
             &:hover {
                 color: var(--rt-multi-selector-footer-nav-action-hover-color);

package/src/lib/ui-kit/dynamic-selectors/components/placeholder/rtui-dynamic-selector-placeholder.component.scss

@@ -9,15 +9,15 @@ $dynamic-selector-placeholder: (
     ),
     icon: (
         size: 4rem,
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
     ),
     icon-warn: (
-        color: var(--clr-orange-70),
+        color: var(--rt-icon-accent-warning),
     ),
     description: (
         font-size: 1rem,
         line-height: 1.25rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
 );
 
@@ -28,11 +28,10 @@ $dynamic-selector-placeholder: (
         }
     }
 
+    display: flex;
     width: var(--rt-dynamic-selector-placeholder-host-width);
     height: var(--rt-dynamic-selector-placeholder-host-height);
     min-height: var(--rt-dynamic-selector-placeholder-host-min-height);
-
-    display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -42,8 +41,8 @@ $dynamic-selector-placeholder: (
         &__icon {
             width: var(--rt-dynamic-selector-placeholder-icon-size);
             height: var(--rt-dynamic-selector-placeholder-icon-size);
-            font-size: var(--rt-dynamic-selector-placeholder-icon-size);
             color: var(--rt-dynamic-selector-placeholder-icon-color);
+            font-size: var(--rt-dynamic-selector-placeholder-icon-size);
 
             &--warn {
                 color: var(--rt-dynamic-selector-placeholder-icon-warn-color);
@@ -51,9 +50,9 @@ $dynamic-selector-placeholder: (
         }
 
         &__description {
+            color: var(--rt-dynamic-selector-placeholder-description-color);
             font-size: var(--rt-dynamic-selector-placeholder-description-font-size);
             line-height: var(--rt-dynamic-selector-placeholder-description-line-height);
-            color: var(--rt-dynamic-selector-placeholder-description-color);
         }
     }
 }

package/src/lib/ui-kit/dynamic-selectors/components/selected-list/rtui-dynamic-selector-selected-list.component.scss

@@ -27,9 +27,9 @@
 }
 
 .cdk-drag-preview {
-    border: none;
     box-sizing: border-box;
+    border: none;
     border-radius: var(--rt-dynamic-selector-item-border-radius);
-    box-shadow: var(--rt-dynamic-selector-item-drag-preview-box-shadow);
     background: var(--mat-option-selected-state-layer-color);
+    box-shadow: var(--rt-dynamic-selector-item-drag-preview-box-shadow);
 }

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

@@ -12,7 +12,7 @@ $file-upload: (
         align-items: center,
         gap: 1rem,
         padding: 1rem,
-        border: 2px dashed var(--clr-black-20),
+        border: 2px dashed var(--rt-border-neutral-default),
         border-radius: 1rem,
     ),
     host-dragged: (
@@ -20,11 +20,11 @@ $file-upload: (
     ),
     icon: (
         size: 2rem,
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
     title: (
         font-size: 1rem,
-        color: var(--clr-text),
+        color: var(--rt-text-base-primary),
     ),
 );
 
@@ -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

@@ -4,12 +4,12 @@
 $modal: (
     title: (
         font-size: 1.25rem,
-        color: var(--clr-txt),
+        color: var(--rt-text-base-primary),
         font-weight: 400,
     ),
     content: (
         padding: 1rem 1.5rem,
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
         font-size: 0.8rem,
         text-align: center,
         word-wrap: break-word,
@@ -27,13 +27,13 @@ $modal: (
     ),
     text-highlited: (
         font-weight: 600,
-        color: var(--clr-black-100),
+        color: var(--rt-text-base-strong),
     ),
     text-warn: (
         display: inline,
         font-size: 1rem,
         font-weight: 600,
-        color: var(--clr-red-100),
+        color: var(--rt-text-accent-danger),
     ),
 );
 
@@ -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

@@ -7,32 +7,30 @@ $scrollable: (
         width: 100%,
         display: flex,
         flex-direction: column,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
     header: (
         padding: 0.5rem 1rem,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
     content: (
         display: flex,
         flex-direction: column,
         flex-grow: 1,
         padding: 1rem,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
     footer: (
         padding: 1rem,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
 );
 
 :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 {