@rt-tools/ui-kit 0.0.19 → 0.0.20

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

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

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

@@ -1,25 +1,22 @@
 :host {
-    z-index: 10000;
     position: absolute;
-
+    z-index: 10000;
+    display: flex;
     width: 100%;
     height: 100%;
-
-    display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 
     .c-spinner {
         &__container {
+            display: flex;
             width: 100%;
             height: 100%;
-
-            display: flex;
             align-items: center;
             justify-content: center;
 
             &--bgr-color {
-                background-color: rgba(#f5f6f8, 0.85);
+                background-color: color-mix(in srgb, var(--rt-bg-base-subtle) 85%, transparent);
             }
         }
 
@@ -35,14 +32,14 @@
             }
 
             &--bgr-color {
+                // Component-local elevation token for the spinner's circular backdrop.
+                --rt-spinner-backdrop-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
+
                 width: 3rem;
                 height: 3rem;
-
+                border-radius: var(--rt-radius-full);
                 background: var(--rt-bg-base-base);
-                border-radius: 50%;
-                box-shadow:
-                    0 1px 3px rgba(0, 0, 0, 0.12),
-                    0 1px 2px rgba(0, 0, 0, 0.24);
+                box-shadow: var(--rt-spinner-backdrop-shadow);
             }
         }
     }

package/src/lib/ui-kit/table/components/clear-search-button/rtui-clear-button.component.scss

@@ -24,23 +24,23 @@ $clear-button: (
 
     .rtui-clear-button {
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
+        padding: var(--rt-clear-button-host-padding);
         border: none;
-        border-radius: 50%;
+        border-radius: var(--rt-radius-full);
         margin: var(--rt-clear-button-host-margin);
-        padding: var(--rt-clear-button-host-padding);
         background-color: var(--rt-clear-button-host-background-color);
 
         &--invisible {
-            @include mixins.visually-hidden();
+            @include mixins.visually-hidden;
         }
 
         &__icon {
             width: var(--rt-clear-button-icon-size);
             height: var(--rt-clear-button-icon-size);
-            font-size: var(--rt-clear-button-icon-size);
             color: var(--rt-clear-button-icon-color);
+            font-size: var(--rt-clear-button-icon-size);
 
             &:hover {
                 color: var(--rt-clear-button-icon-hover-color);

package/src/lib/ui-kit/table/components/pagination-view/rtui-pagination.component.scss

@@ -48,9 +48,9 @@ $pagination: (
 );
 
 :host {
+    display: flex;
     width: fit-content;
     height: 100%;
-    display: flex;
 
     @each $element, $elements in $pagination {
         @each $style-token, $value in $elements {
@@ -60,21 +60,19 @@ $pagination: (
 
     .pagination-container {
         position: relative;
-
         display: flex;
-        justify-content: flex-start;
         align-items: center;
-        gap: var(--rt-table-pagination-container-gap);
-
+        justify-content: flex-start;
         color: var(--rt-table-pagination-container-color);
         font-size: var(--rt-table-pagination-container-font-size);
         font-weight: var(--rt-table-pagination-container-font-weight);
+        gap: var(--rt-table-pagination-container-gap);
         line-height: var(--rt-table-pagination-container-line-height);
 
         &--clipped {
             flex-direction: column;
-            justify-content: center;
             align-items: flex-start;
+            justify-content: center;
             gap: var(--rt-table-pagination-container-mobile-gap);
         }
 
@@ -85,26 +83,23 @@ $pagination: (
 
         .paging {
             display: flex;
-            justify-content: center;
             align-items: center;
-            gap: var(--rt-table-pagination-paging-gap);
+            justify-content: center;
             margin: var(--rt-table-pagination-container-margin);
+            gap: var(--rt-table-pagination-paging-gap);
 
             &--clipped {
                 margin: var(--rt-table-pagination-paging-mobile-margin);
             }
 
             &__item {
+                position: relative;
                 display: flex;
-                justify-content: center;
                 align-items: center;
-
-                position: relative;
-
+                justify-content: center;
                 padding: var(--rt-table-pagination-paging-item-padding);
                 border: var(--rt-table-pagination-paging-item-border);
                 border-radius: var(--rt-table-pagination-paging-item-border-radius);
-
                 background-color: transparent;
                 cursor: default;
                 pointer-events: none;
@@ -119,13 +114,13 @@ $pagination: (
                 }
 
                 &:hover:not(.divider) {
-                    color: var(--rt-table-pagination-paging-item-hover-color);
                     background-color: var(--rt-table-pagination-paging-item-hover-background-color);
+                    color: var(--rt-table-pagination-paging-item-hover-color);
                 }
 
                 &--active {
-                    color: var(--rt-table-pagination-paging-item-active-color);
                     background-color: var(--rt-table-pagination-paging-item-active-background-color);
+                    color: var(--rt-table-pagination-paging-item-active-color);
                 }
 
                 &--enabled {
@@ -138,9 +133,9 @@ $pagination: (
                 }
 
                 &--divider {
+                    border: none;
                     cursor: default;
                     pointer-events: none;
-                    border: none;
                 }
             }
         }
@@ -148,10 +143,10 @@ $pagination: (
         .page-size-toggle {
             display: flex;
             flex-direction: row;
-            justify-content: center;
             align-items: center;
-            gap: var(--rt-table-pagination-size-toggle-gap);
+            justify-content: center;
             margin: var(--rt-table-pagination-container-margin);
+            gap: var(--rt-table-pagination-size-toggle-gap);
 
             &--clipped {
                 margin: var(--rt-table-pagination-size-toggle-selector-mobile-margin);
@@ -165,14 +160,11 @@ $pagination: (
                 width: auto;
                 min-width: var(--rt-table-pagination-size-toggle-selector-min-width);
                 height: var(--rt-table-pagination-size-toggle-selector-height);
-
                 border: var(--rt-table-pagination-paging-item-border);
                 border-radius: var(--rt-table-pagination-paging-item-border-radius);
-
                 background-color: transparent;
-                cursor: pointer;
-
                 color: var(--rt-table-pagination-container-color);
+                cursor: pointer;
                 font-size: var(--rt-table-pagination-container-font-size);
                 font-weight: var(--rt-table-pagination-container-font-weight);
                 line-height: var(--rt-table-pagination-container-line-height);

package/src/lib/ui-kit/table/components/table-base-cell/table-base-cell.component.scss

@@ -26,15 +26,13 @@ $base-cell: (
 );
 
 :host {
-    height: 100%;
-    width: 100%;
-
+    position: relative;
     display: flex;
+    width: 100%;
+    height: 100%;
     align-items: center;
     gap: var(--rt-table-base-cell-host-gap);
 
-    position: relative;
-
     @each $element, $elements in $base-cell {
         @each $style-token, $value in $elements {
             #{mixins.generateCssVar('table-base-cell', #{$element}, #{$style-token})}: #{$value};
@@ -49,16 +47,16 @@ $base-cell: (
         }
 
         &__title {
-            width: 100%;
             display: table;
+            width: 100%;
             table-layout: fixed;
 
             &-text {
+                overflow: hidden;
                 width: 100%;
                 padding: var(--rt-table-base-cell-title-padding);
-                white-space: nowrap;
-                overflow: hidden;
                 text-overflow: ellipsis;
+                white-space: nowrap;
             }
 
             &--align {
@@ -90,14 +88,15 @@ $base-cell: (
 
         &__copy-button {
             position: absolute;
-            visibility: hidden;
             padding: var(--rt-table-base-cell-copy-button-padding);
             background-color: var(--rt-table-base-cell-copy-button-background-color);
+            visibility: hidden;
 
             &--position {
                 &--left {
                     left: var(--rt-table-base-cell-copy-button-position-left);
                 }
+
                 &--right {
                     right: var(--rt-table-base-cell-copy-button-position-right);
                 }

package/src/lib/ui-kit/table/components/table-config-aside/rt-table-config-aside.component.scss

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

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

@@ -44,24 +44,26 @@ $table-container: (
 );
 
 :host {
-    width: 100%;
     position: relative;
     display: flex;
     overflow: hidden;
+    width: 100%;
 
     // initial table container scrollbar styles
     ::-webkit-scrollbar-track:hover {
         border: 1px solid var(--rt-border-neutral-subtle);
     }
+
     ::-webkit-scrollbar-thumb {
-        background: var(--rt-scrollbar-thumb);
         border: 3px solid transparent;
-        border-radius: 6px;
+        border-radius: var(--rt-radius-sm);
+        background: var(--rt-scrollbar-thumb);
         background-clip: content-box;
     }
+
     ::-webkit-scrollbar-thumb:hover {
-        background: var(--rt-scrollbar-thumb-hover);
         border: 2px solid transparent;
+        background: var(--rt-scrollbar-thumb-hover);
         background-clip: content-box;
     }
 
@@ -94,10 +96,10 @@ $table-container: (
     .table-container {
         &__selectors {
             display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            flex-grow: 1;
             width: 100%;
+            flex-grow: 1;
+            align-items: center;
+            justify-content: flex-start;
             margin: var(--rt-table-container-selectors-margin);
             gap: var(--rt-table-container-toolbar-actions-gap);
 
@@ -110,16 +112,16 @@ $table-container: (
             }
 
             &-counter {
-                font-size: var(--rt-table-container-selector-counter-font-size);
                 color: var(--rt-table-container-selector-counter-color);
+                font-size: var(--rt-table-container-selector-counter-font-size);
             }
         }
 
         &__toolbar {
-            width: 100%;
             display: flex;
-            justify-content: flex-end;
+            width: 100%;
             align-items: center;
+            justify-content: flex-end;
 
             &-actions {
                 display: flex;
@@ -143,9 +145,9 @@ $table-container: (
         }
 
         &__content {
+            overflow: auto;
             width: 100%;
             flex-grow: 1;
-            overflow: auto;
             padding: var(--rt-table-container-content-padding);
 
             &::-webkit-scrollbar {
@@ -155,12 +157,12 @@ $table-container: (
         }
 
         &__placeholder {
+            display: flex;
             width: var(--rt-table-container-placeholder-width);
             height: var(--rt-table-container-placeholder-height);
-            display: flex;
             flex-direction: column;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
             gap: var(--rt-table-container-placeholder-gap);
 
             &-icon {
@@ -203,8 +205,8 @@ $table-container: (
 
                 &-search {
                     width: 100%;
-                    grid-row: 1;
                     justify-content: center;
+                    grid-row: 1;
                 }
             }
         }

package/src/lib/ui-kit/table/components/table-header-cell/table-header-cell.component.scss

@@ -21,8 +21,8 @@ $header-cell: (
 
 :host {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     cursor: pointer;
 
     @each $element, $elements in $header-cell {
@@ -38,8 +38,8 @@ $header-cell: (
     }
 
     .header-cell-label {
-        flex-grow: 1;
         display: flex;
+        flex-grow: 1;
         align-items: center;
         gap: var(--rt-table-header-cell-label-gap);
 
@@ -64,9 +64,9 @@ $header-cell: (
         }
 
         &__text {
-            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         &__suffix {
@@ -85,10 +85,9 @@ $header-cell: (
     .header-cell-icons {
         display: flex;
         flex-direction: column;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         margin: var(--rt-table-header-cell-icon-margin);
-
         visibility: hidden;
 
         &--active {
@@ -98,12 +97,12 @@ $header-cell: (
         &__icon {
             width: 0;
             height: 0;
-            border-left: 3px solid transparent;
             border-right: 3px solid transparent;
             border-bottom: 5.2px solid var(--rt-table-header-cell-icon-color);
+            border-left: 3px solid transparent;
 
             &--second {
-                margin-top: 2px;
+                margin-top: var(--rt-spacing-2);
                 transform: scaleY(-1);
             }
 

package/src/lib/ui-kit/table/components/table-header-filter-cell/table-header-filter-cell.component.scss

@@ -1,9 +1,9 @@
 :host {
-    width: 100%;
     display: flex;
-    justify-content: flex-start;
+    width: 100%;
     align-items: center;
-    gap: 0.5rem;
+    justify-content: flex-start;
+    gap: var(--rt-spacing-8);
 
     .table-header-cell-filter-input {
         width: 100%;

package/src/lib/ui-kit/table/dynamic-list.component.scss

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

package/src/lib/ui-kit/table/stories/dynamic-list/test-dynamic-list.component.scss

@@ -1,7 +1,7 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
     margin: -1rem;
 

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

@@ -1,16 +1,16 @@
 :host {
+    position: relative;
+    display: flex;
+    overflow: hidden;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
     margin: -1rem;
-    position: relative;
-    overflow: hidden;
 
     .pagination {
-        width: 100%;
         position: absolute;
         top: 0;
         left: 0;
+        width: 100%;
     }
 }

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

@@ -1,7 +1,7 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
     margin: -1rem;
 }

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

@@ -13,7 +13,7 @@ $toggle: (
     toggle: (
         border-radius: 6.25rem,
         background-color: var(--rt-bg-base-subtle),
-        box-shadow: inset 0 0 0.125rem 0.0625rem rgba(0, 0, 0, 0.05),
+        box-shadow: inset 0 0 0.125rem 0.0625rem rgb(0 0 0 / 5%),
     ),
     toggle-check: (
         box-shadow: inset 0 0 0 1.25rem var(--rt-control-checked),
@@ -21,7 +21,7 @@ $toggle: (
     toggle-switch: (
         border-radius: 2.25rem,
         background-color: var(--rt-control-thumb),
-        box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2),
+        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 20%),
     ),
     toggle-track: (
         background-color: var(--rt-control-track),
@@ -79,12 +79,12 @@ $toggle: (
 
         .rtui-toggle {
             position: relative;
+            overflow: hidden;
             width: 3.125rem;
             min-width: 3.125rem;
             height: 1.875rem;
             border-radius: var(--rt-toggle-toggle-border-radius);
             background-color: var(--rt-toggle-toggle-background-color);
-            overflow: hidden;
             box-shadow: var(--rt-toggle-toggle-box-shadow);
             cursor: pointer;
 
@@ -103,36 +103,30 @@ $toggle: (
                     right: 0.125rem;
                     left: 1.375rem;
                     transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-                    transition-property: left, right;
                     transition-delay: 0.05s, 0s;
+                    transition-property: left, right;
                 }
             }
 
             &__switch {
                 position: absolute;
-                left: 0.125rem;
-                top: 0.125rem;
-                bottom: 0.125rem;
-                right: 1.375rem;
-                background-color: var(--rt-toggle-toggle-switch-background-color);
-                border-radius: var(--rt-toggle-toggle-switch-border-radius);
                 z-index: 1;
+                border-radius: var(--rt-toggle-toggle-switch-border-radius);
+                background-color: var(--rt-toggle-toggle-switch-background-color);
+                box-shadow: var(--rt-toggle-toggle-switch-box-shadow);
+                inset: 0.125rem 1.375rem 0.125rem 0.125rem;
                 transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-                transition-property: left, right;
                 transition-delay: 0s, 0.05s;
-                box-shadow: var(--rt-toggle-toggle-switch-box-shadow);
+                transition-property: left, right;
             }
 
             &__track {
                 position: absolute;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-                background-color: var(--rt-toggle-toggle-track-background-color);
-                border-radius: var(--rt-toggle-toggle-track-border-radius);
                 border: var(--rt-toggle-toggle-track-border);
+                border-radius: var(--rt-toggle-toggle-track-border-radius);
+                background-color: var(--rt-toggle-toggle-track-background-color);
+                inset: 0;
+                transition: 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
             }
 
             // modify
@@ -148,8 +142,8 @@ $toggle: (
                 }
 
                 .rtui-toggle__check:checked ~ .rtui-toggle__switch {
-                    left: 1.625rem;
                     right: 0.125rem;
+                    left: 1.625rem;
                 }
             }
 
@@ -165,8 +159,8 @@ $toggle: (
                 }
 
                 .rtui-toggle__check:checked ~ .rtui-toggle__switch {
-                    left: 0.75rem;
                     right: 0.125rem;
+                    left: 0.75rem;
                 }
             }
         }

package/src/lib/ui-kit/toggle/stories/component/test-toggle.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/toolbar/toolbar.component.scss

@@ -40,9 +40,8 @@ $toolbar: (
         --mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);
         --mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);
 
-        min-height: var(--rt-toolbar-body-mobile-height);
         height: var(--rt-toolbar-body-mobile-height);
-
+        min-height: var(--rt-toolbar-body-mobile-height);
         padding: var(--rt-toolbar-body-padding);
         background-color: transparent;
 
@@ -61,25 +60,21 @@ $toolbar: (
 
         .bars {
             position: relative;
-
             display: flex;
             width: 100%;
             height: 100%;
-
+            border-bottom: var(--rt-toolbar-bars-border-bottom-width) var(--rt-toolbar-bars-border-bottom-style)
+                var(--rt-toolbar-bars-border-bottom-color);
             background-color: var(--rt-toolbar-body-background-color);
 
-            border-bottom-style: var(--rt-toolbar-bars-border-bottom-style);
-            border-bottom-width: var(--rt-toolbar-bars-border-bottom-width);
-            border-bottom-color: var(--rt-toolbar-bars-border-bottom-color);
-
             &__bar {
                 &--left {
                     width: var(--rt-toolbar-bars-left-width);
                 }
 
                 &--center {
-                    width: var(--rt-toolbar-bars-center-width);
                     overflow: hidden;
+                    width: var(--rt-toolbar-bars-center-width);
                 }
 
                 &--right {
@@ -89,8 +84,8 @@ $toolbar: (
                 &--left,
                 &--center,
                 &--right {
-                    height: 100%;
                     display: flex;
+                    height: 100%;
                     align-items: center;
                 }
             }