@rt-tools/ui-kit 0.0.16 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit",
-  "version": "0.0.16",
+  "version": "0.0.20",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/ui-kit/action-bar/components/bar/rtui-action-bar.component.scss

@@ -2,15 +2,15 @@
 @use '../../../../../styles/base/variables' as vars;
 
 .rtui-action-bar {
-    width: var(--rt-action-bar-bar-width);
     display: flex;
+    width: var(--rt-action-bar-bar-width);
     align-items: center;
-    gap: var(--rt-action-bar-bar-gap);
     padding: var(--rt-action-bar-bar-padding);
     border-radius: var(--rt-action-bar-bar-border-radius);
-    color: var(--rt-action-bar-bar-color);
     background-color: var(--rt-action-bar-bar-background-color);
     box-shadow: var(--rt-action-bar-bar-box-shadow);
+    color: var(--rt-action-bar-bar-color);
+    gap: var(--rt-action-bar-bar-gap);
 
     &__counter {
         font-size: var(--rt-action-bar-counter-font-size);
@@ -24,14 +24,14 @@
 
     &__action {
         display: flex;
-        justify-content: center;
         align-items: center;
-        gap: var(--rt-action-bar-action-gap);
-        font-size: var(--rt-action-bar-action-font-size);
-        font-weight: var(--rt-action-bar-action-font-weight);
+        justify-content: center;
         padding: var(--rt-action-bar-action-padding);
         border-radius: var(--rt-action-bar-action-border-radius);
         cursor: pointer;
+        font-size: var(--rt-action-bar-action-font-size);
+        font-weight: var(--rt-action-bar-action-font-weight);
+        gap: var(--rt-action-bar-action-gap);
 
         &:hover {
             background-color: var(--rt-action-bar-action-hover-background-color);
@@ -39,8 +39,8 @@
     }
 
     &__close-button {
-        cursor: pointer;
         margin-left: auto;
+        cursor: pointer;
 
         svg {
             transition: transform 0.2s ease;
@@ -52,16 +52,16 @@
     }
 
     @include mixins.media-breakpoint-down(vars.$device-md) {
-        gap: var(--rt-action-bar-bar-mobile-gap);
         padding: var(--rt-action-bar-bar-mobile-padding);
+        gap: var(--rt-action-bar-bar-mobile-gap);
 
         &__actions {
             gap: var(--rt-action-bar-actions-mobile-gap);
         }
 
         &__action {
-            gap: var(--rt-action-bar-action-mobile-gap);
             padding: var(--rt-action-bar-action-mobile-padding);
+            gap: var(--rt-action-bar-action-mobile-gap);
         }
     }
 }
@@ -69,23 +69,23 @@
 .rtui-action-bar-action-menu {
     display: flex;
     flex-direction: column;
-    gap: var(--rt-action-bar-action-menu-gap);
     padding: var(--rt-action-bar-action-menu-padding);
     border-radius: var(--rt-action-bar-action-border-radius);
-    color: var(--rt-action-bar-action-menu-color);
     background-color: var(--rt-action-bar-action-menu-background-color);
     box-shadow: var(--rt-action-bar-action-menu-box-shadow);
+    color: var(--rt-action-bar-action-menu-color);
+    gap: var(--rt-action-bar-action-menu-gap);
 
     &__action {
         display: flex;
-        justify-content: center;
         align-items: center;
-        gap: var(--rt-action-bar-action-menu-action-gap);
+        justify-content: center;
         padding: var(--rt-action-bar-action-menu-action-padding);
-        font-size: var(--rt-action-bar-action-menu-action-font-size);
-        font-weight: var(--rt-action-bar-action-menu-action-font-weight);
         border-radius: var(--rt-action-bar-action-menu-action-border-radius);
         cursor: pointer;
+        font-size: var(--rt-action-bar-action-menu-action-font-size);
+        font-weight: var(--rt-action-bar-action-menu-action-font-weight);
+        gap: var(--rt-action-bar-action-menu-action-gap);
 
         &:hover {
             background-color: var(--rt-action-bar-action-menu-action-hover-background-color);
@@ -93,12 +93,12 @@
     }
 
     @include mixins.media-breakpoint-down(vars.$device-md) {
-        gap: var(--rt-action-bar-action-menu-action-mobile-gap);
         padding: var(--rt-action-bar-action-menu-action-mobile-padding);
+        gap: var(--rt-action-bar-action-menu-action-mobile-gap);
 
         &__action {
-            gap: var(--rt-action-bar-action-menu-action-mobile-gap);
             padding: var(--rt-action-bar-action-menu-action-mobile-padding);
+            gap: var(--rt-action-bar-action-menu-action-mobile-gap);
         }
     }
 }

package/src/lib/ui-kit/action-bar/components/container/rtui-action-bar-container.component.scss

@@ -1,12 +1,10 @@
 :host {
-    width: var(--rt-action-bar-container-width);
     position: fixed;
-    top: var(--rt-action-bar-container-top);
-    bottom: var(--rt-action-bar-container-bottom);
-    left: var(--rt-action-bar-container-left);
-    right: var(--rt-action-bar-container-right);
+    z-index: var(--rt-action-bar-container-z-index);
     display: flex;
-    justify-content: center;
+    width: var(--rt-action-bar-container-width);
     align-items: center;
-    z-index: var(--rt-action-bar-container-z-index);
+    justify-content: center;
+    inset: var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom)
+        var(--rt-action-bar-container-left);
 }

package/src/lib/ui-kit/aside/components/container/aside-container.component.scss

@@ -3,6 +3,7 @@
         --rt-scrollable-header-padding: 0;
         --rt-scrollable-content-padding: 0;
         --rt-scrollable-footer-padding: 0;
+
         // TODO: fix styles affect x-scroll
         --rt-scrollable-content-flex-direction: row;
 

package/src/lib/ui-kit/aside/components/error-notification/aside-error-box.component.scss

@@ -4,28 +4,28 @@
 
     .aside-error-box {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
         width: 100%;
         height: var(--rt-aside-error-box-height);
+        align-items: center;
+        justify-content: space-between;
         padding: var(--rt-aside-error-box-padding);
-        margin: var(--rt-aside-error-box-margin);
         border: var(--rt-aside-error-box-border);
         border-radius: var(--rt-aside-error-box-border-radius);
+        margin: var(--rt-aside-error-box-margin);
 
         &__title {
-            font-size: var(--rt-aside-error-box-title-font-size);
             color: var(--rt-aside-error-box-title-font-color);
+            font-size: var(--rt-aside-error-box-title-font-size);
         }
 
         .aside-error-box-button {
             &__icon {
-                margin-right: 0.5rem;
+                margin-right: var(--rt-spacing-8);
             }
 
             &__title {
-                font-size: var(--rt-aside-error-box-button-font-size);
                 color: var(--rt-aside-error-box-button-font-color);
+                font-size: var(--rt-aside-error-box-button-font-size);
             }
 
             &.--complete {

package/src/lib/ui-kit/aside/components/panel/aside-panel.component.scss

@@ -4,8 +4,8 @@
 $aside: (
     host: (
         width: 33.75rem,
-        box-shadow: 0 0 1rem 0 rgba(#000, 0.1),
-        background-color: var(--clr-white-100),
+        box-shadow: 0 0 1rem 0 var(--rt-color-dark-a10),
+        background-color: var(--rt-bg-base-base),
     ),
     header: (
         padding: 2rem,
@@ -24,12 +24,12 @@ $aside: (
     header-description: (
         font-size: 1rem,
         margin-bottom: 0.25rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     header-addition: (
         font-size: 1rem,
         margin-top: 0.25rem,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
     ),
     header-actions: (
         margin-left: 1rem,
@@ -45,7 +45,7 @@ $aside: (
     ),
     footer: (
         padding: 2rem,
-        margin-left-betwen-buttons: 1rem,
+        margin-left-between-buttons: 1rem,
     ),
     footer-mobile: (
         padding: 1rem,
@@ -54,16 +54,16 @@ $aside: (
         height: 2rem,
         padding: 0.5rem,
         margin: 2rem 0 2rem 0,
-        border: 1px solid var(--clr-red-60),
+        border: 1px solid var(--rt-border-accent-danger-soft),
         border-radius: 0.375rem,
     ),
     error-box-title: (
         font-size: 1rem,
-        font-color: var(--clr-red-60),
+        font-color: var(--rt-text-accent-danger-soft),
     ),
     error-box-button: (
         font-size: 1rem,
-        font-color: var(--clr-black-100),
+        font-color: var(--rt-text-base-strong),
     ),
     tab-indicator: (
         width: 6rem,
@@ -72,26 +72,23 @@ $aside: (
         color: var(--mdc-filled-button-container-color),
     ),
     tab-badge-incorrect: (
-        color: var(--clr-red-100),
+        color: var(--rt-text-accent-danger),
     ),
 );
 
+// NOTE: emitted at :root on purpose (ViewEncapsulation.None): consumers override
+// these vars from ancestor scopes (e.g. a consumer's `.dark-mode { --rt-aside-host-background-color: … }`).
+// Emitting at :host would set values on the element itself and silently win over
+// inherited overrides — do not "fix" this to :host.
 :root {
     @each $element, $elements in $aside {
         @each $style-token, $value in $elements {
             #{mixins.generateCssVar('aside', #{$element}, #{$style-token})}: #{$value};
         }
     }
-}
 
-.cdk-overlay-container,
-.cdk-overlay-pane {
-    z-index: 9999;
-}
-
-// TAB GROUP
-.mat-mdc-tab-group {
-    width: 100%;
+    // @deprecated — typo kept as alias for backward compatibility; use *-between-* instead.
+    --rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons);
 }
 
 // BADGE
@@ -100,8 +97,8 @@ $aside: (
 }
 
 .title-badge {
-    margin-left: 0.25rem;
     top: -0.5rem;
+    margin-left: var(--rt-spacing-4);
 }
 
 .icon-badge,
@@ -121,12 +118,11 @@ $aside: (
 // ASIDE
 .c-aside {
     position: relative;
+    width: var(--rt-aside-host-width);
     height: 100vh;
     max-height: 100vh;
-    width: var(--rt-aside-host-width);
-
-    box-shadow: var(--rt-aside-host-box-shadow);
     background-color: var(--rt-aside-host-background-color);
+    box-shadow: var(--rt-aside-host-box-shadow);
 
     // TAB GROUP
     .mdc-tab-indicator__content.mdc-tab-indicator__content--underline {
@@ -147,38 +143,38 @@ $aside: (
     }
 
     .c-aside-title {
-        height: 100%;
-        width: 100%;
         display: flex;
+        width: 100%;
+        height: 100%;
         flex-direction: column;
-        justify-content: center;
         align-items: flex-start;
+        justify-content: center;
 
         &__descr {
             margin-bottom: var(--rt-aside-header-description-margin-bottom);
-            font-size: var(--rt-aside-header-description-font-size);
             color: var(--rt-aside-header-description-color);
+            font-size: var(--rt-aside-header-description-font-size);
         }
 
         &__txt {
             font-size: var(--rt-aside-header-title-font-size);
-            line-height: var(--rt-aside-header-title-line-height);
             font-weight: var(--rt-aside-header-title-font-weight);
+            line-height: var(--rt-aside-header-title-line-height);
         }
 
         &__addition {
             margin-top: var(--rt-aside-header-addition-margin-top);
-            font-size: var(--rt-aside-header-addition-font-size);
             color: var(--rt-aside-header-addition-color);
+            font-size: var(--rt-aside-header-addition-font-size);
         }
 
         &__descr,
         &__txt,
         &__addition {
-            width: 100%;
-            white-space: nowrap;
             overflow: hidden;
+            width: 100%;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
 
@@ -196,22 +192,20 @@ $aside: (
 } // c-aside-header
 
 .c-aside-content {
-    height: 100%;
-    width: 100%;
-
     display: flex;
+    width: 100%;
+    height: 100%;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-
     padding: var(--rt-aside-content-padding);
 
     // Change mat tab group styles
     .mat-mdc-tab-header {
-        top: 0;
-        z-index: 1000;
         position: sticky;
-        background: var(--clr-white-100);
+        z-index: 1000;
+        top: 0;
+        background: var(--rt-bg-base-base);
     }
 
     @include mixins.media-breakpoint-down(vars.$device-xs) {
@@ -222,9 +216,8 @@ $aside: (
 // ASIDE FOOTER
 .c-aside-footer {
     display: flex;
-    justify-content: flex-end;
     align-items: center;
-
+    justify-content: flex-end;
     padding: var(--rt-aside-footer-padding);
 
     .c-aside-footer-btn {
@@ -234,7 +227,7 @@ $aside: (
     }
 
     .c-aside-footer-btn + .c-aside-footer-btn {
-        margin-left: var(--rt-aside-footer-margin-left-betwen-buttons);
+        margin-left: var(--rt-aside-footer-margin-left-between-buttons);
     }
 
     @include mixins.media-breakpoint-down(vars.$device-xs) {

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

@@ -1,4 +1,4 @@
 :host {
-    height: 100%;
     width: 100%;
+    height: 100%;
 }

package/src/lib/ui-kit/buttons/icon-round/rtui-round-icon-button.component.scss

@@ -20,14 +20,14 @@ $round-icon-button: (
     }
 
     .round-icon-button {
+        z-index: var(--rt-round-icon-button-host-z-index);
         display: flex;
-        justify-content: center;
-        align-items: center;
         width: var(--rt-round-icon-button-host-size);
         height: var(--rt-round-icon-button-host-size);
+        align-items: center;
+        justify-content: center;
         padding: var(--rt-round-icon-button-host-padding);
-        z-index: var(--rt-round-icon-button-host-z-index);
-        border-radius: 50%;
+        border-radius: var(--rt-radius-full);
         cursor: pointer;
 
         &__icon {

package/src/lib/ui-kit/buttons/multi-button/rtui-multi-button.component.scss

@@ -6,7 +6,7 @@ $rtui-multibutton: (
         flex-flow: row wrap,
         radius: 8px,
         padding: 4px,
-        background-color: var(--clr-black-10),
+        background-color: var(--rt-bg-base-hover),
     ),
     action-base: (
         padding: 4px 8px,
@@ -14,21 +14,21 @@ $rtui-multibutton: (
         border: 0,
         font-size: 12px,
         font-weight: 600,
-        color: var(--clr-black-60),
+        color: var(--rt-text-base-secondary),
         background-color: transparent,
         transition: 'background-color 0.15s, color 0.15s',
         cursor: pointer,
     ),
     action-hover: (
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
     ),
     action-active: (
-        color: var(--clr-black-80),
-        background-color: var(--clr-black-20),
+        color: var(--rt-text-base-soft),
+        background-color: var(--rt-bg-base-strong),
         cursor: default,
     ),
     action-focus-visible: (
-        outline: 2px dashed var(--clr-blue-40),
+        outline: 2px dashed var(--rt-border-focus),
         outline-offset: -2px,
     ),
     action-disabled: (
@@ -48,24 +48,24 @@ $rtui-multibutton: (
     .rtui-multibutton-actions {
         display: var(--rt-rtui-multibutton-base-display);
         flex-flow: var(--rt-rtui-multibutton-base-flex-flow);
-        border-radius: var(--rt-rtui-multibutton-base-radius);
         padding: var(--rt-rtui-multibutton-base-padding);
+        border-radius: var(--rt-rtui-multibutton-base-radius);
         background-color: var(--rt-rtui-multibutton-base-background-color);
 
         &__action {
             padding: var(--rt-rtui-multibutton-action-base-padding);
-            border-radius: var(--rt-rtui-multibutton-action-base-radius);
             border: var(--rt-rtui-multibutton-action-base-border);
+            border-radius: var(--rt-rtui-multibutton-action-base-radius);
+            background-color: var(--rt-rtui-multibutton-action-base-background-color);
+            color: var(--rt-rtui-multibutton-action-base-color);
+            cursor: var(--rt-rtui-multibutton-action-base-cursor);
             font-size: var(--rt-rtui-multibutton-action-base-font-size);
             font-weight: var(--rt-rtui-multibutton-action-base-font-weight);
-            color: var(--rt-rtui-multibutton-action-base-color);
-            background-color: var(--rt-rtui-multibutton-action-base-background-color);
             transition: var(--rt-rtui-multibutton-action-base-transition);
-            cursor: var(--rt-rtui-multibutton-action-base-cursor);
 
             &--active {
-                color: var(--rt-rtui-multibutton-action-active-color);
                 background-color: var(--rt-rtui-multibutton-action-active-background-color);
+                color: var(--rt-rtui-multibutton-action-active-color);
                 cursor: var(--rt-rtui-multibutton-action-active-cursor);
             }
 
@@ -83,9 +83,9 @@ $rtui-multibutton: (
             }
 
             &:disabled {
-                pointer-events: var(--rt-rtui-multibutton-action-disabled-pointer-events);
                 cursor: var(--rt-rtui-multibutton-action-disabled-cursor);
                 opacity: var(--rt-rtui-multibutton-action-disabled-opacity);
+                pointer-events: var(--rt-rtui-multibutton-action-disabled-pointer-events);
             }
         }
     }

package/src/lib/ui-kit/checkbox/rtui-checkbox.component.scss

@@ -5,22 +5,22 @@
     gap: var(--rt-checkbox-container-gap);
 
     &__input {
-        @include mixins.visually-hidden();
+        @include mixins.visually-hidden;
     }
 
     &__box {
         display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
         width: var(--rt-checkbox-box-width);
         height: var(--rt-checkbox-box-height);
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
         border: var(--rt-checkbox-box-border);
         border-radius: var(--rt-checkbox-box-border-radius);
-        color: var(--rt-checkbox-box-inactive-color);
         background-color: var(--rt-checkbox-box-background-color);
-        transition: border-color 0.15s linear;
+        color: var(--rt-checkbox-box-inactive-color);
         cursor: pointer;
+        transition: border-color 0.15s linear;
 
         svg {
             opacity: 0;
@@ -30,8 +30,8 @@
 
     &__input:checked + &__box,
     &__input:indeterminate + &__box {
-        color: var(--rt-checkbox-box-active-color);
         border-color: var(--rt-checkbox-box-active-color);
+        color: var(--rt-checkbox-box-active-color);
 
         svg {
             opacity: 1;
@@ -39,8 +39,8 @@
     }
 
     &__input:disabled + &__box {
-        color: var(--clr-black-40);
-        border-color: var(--clr-black-40);
+        border-color: var(--rt-border-neutral-strong);
+        color: var(--rt-text-base-disabled);
         cursor: default;
     }
 
@@ -54,15 +54,15 @@
     }
 
     &__label {
+        color: var(--rt-checkbox-label-color);
         font-size: var(--rt-checkbox-label-font-size);
         font-weight: var(--rt-checkbox-label-font-weight);
-        color: var(--rt-checkbox-label-color);
     }
 
     &__description {
         margin-top: var(--rt-checkbox-description-margin-top);
+        color: var(--rt-checkbox-description-color);
         font-size: var(--rt-checkbox-description-font-size);
         font-weight: var(--rt-checkbox-description-font-weight);
-        color: var(--rt-checkbox-description-color);
     }
 }

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

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

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

@@ -16,7 +16,7 @@ $dynamic-selector-list-actions: (
         size: 1.125rem,
     ),
     item-active: (
-        color: var(--clr-red-100),
+        color: var(--rt-text-accent-danger),
     ),
 );
 
@@ -29,14 +29,14 @@ $dynamic-selector-list-actions: (
 
     display: flex;
     align-items: center;
-    margin-left: auto;
     padding-right: var(--rt-dynamic-selector-list-actions-host-padding-right);
+    margin-left: auto;
 
     .rtui-dynamic-selector-list-actions {
         display: flex;
         align-items: center;
-        margin-left: auto;
         padding-right: var(--rt-dynamic-selector-list-actions-padding-right);
+        margin-left: auto;
 
         &__control {
             padding: var(--rt-dynamic-selector-list-actions-control-padding);

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

@@ -1,7 +1,7 @@
 :host {
-    height: 100%;
-    width: 100%;
     display: flex;
-    flex-direction: column;
     overflow: hidden;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
 }