@rt-tools/ui-kit 0.0.16 → 0.0.20

package/src/styles/components/_form.scss

@@ -3,30 +3,28 @@
 
 // FORM
 .c-form {
-    width: 100%;
-
     display: flex;
+    width: 100%;
+    flex: 1 1 100%;
     flex-direction: column;
-    justify-content: flex-start;
     align-items: flex-start;
-    flex: 1 1 100%;
+    justify-content: flex-start;
 
     &__title {
         font-size: 1.5rem;
-        line-height: 1.1;
         font-weight: 600;
+        line-height: 1.1;
     }
 
     &__title-descr {
         margin-top: 0.75rem;
+        color: var(--rt-text-base-secondary);
         font-size: 1rem;
-        color: var(--clr-black-60);
     }
 
     &__item {
-        width: 100%;
-
         display: flex;
+        width: 100%;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
@@ -38,18 +36,15 @@
 
     &__controls {
         position: relative;
-        width: 100%;
-
         display: flex;
+        width: 100%;
         flex-direction: column;
-
         margin-top: 2rem;
     }
 
     &__control-item {
-        width: 100%;
-
         display: flex;
+        width: 100%;
         align-items: center;
         justify-content: flex-start;
 

package/src/styles/components/_material-bridge.scss

@@ -0,0 +1,30 @@
+/// Material bridge — the single global touch-point between rt-tools and Angular Material.
+///
+/// Rule: every GLOBAL override of Material internals (--mat-* / --mdc-* vars, .mat-* / .cdk-* selectors
+/// that is not scoped to a component's own DOM) lives here, so a Material upgrade is reviewed in one file.
+///
+/// Scoped piercings stay next to their component (they target Material nodes inside the component's
+/// own template) — current inventory, revisit on every Angular Material major:
+///   - snack-bar:            styles/components/_snackbar.scss (panelClass .snack-bar-*: --mat-snack-bar-*, --mdc-snackbar-*)
+///   - table:                styles/components/_table.scss (consumes --mat-form-field-filled-container-color)
+///   - checkbox:             styles/components/_checkbox.scss (consumes --mat-button-text-label-text-color)
+///   - dynamic-selectors:    styles/components/_dynamic-selectors.scss (+ ::ng-deep .mat-mdc-form-field-* in
+///                           multi-selector-popup / selected-list component scss)
+///   - side-menu:            menu-sub-item component scss (::ng-deep .mat-expansion-*)
+///   - modal:                modal.component.scss (::ng-deep .mat-icon)
+///   - spinner:              spinner.component.scss (::ng-deep circle of mat-spinner SVG)
+///   - aside:                aside-panel.component.scss (.mat-mdc-tab-header, .mat-badge-content — encapsulation: None)
+///   - toolbar:              toolbar.component.scss (--mat-tab-*, --mdc-secondary-navigation-tab-*)
+
+/* Keep CDK overlays (aside drawer, selector popups, modals) above app chrome.
+   Moved from aside-panel.component.scss — applies app-wide by design. */
+.cdk-overlay-container,
+.cdk-overlay-pane {
+    z-index: 9999;
+}
+
+/* Mat tab groups stretch to their container (aside tabs rely on it).
+   Moved from aside-panel.component.scss. */
+.mat-mdc-tab-group {
+    width: 100%;
+}

package/src/styles/components/_rtui_button.scss

@@ -5,7 +5,7 @@ $rtui-button: (
         width: auto,
         bg: transparent,
         border: 0,
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
         display: inline-flex,
         font-size: 0,
         gap: 0,
@@ -14,109 +14,109 @@ $rtui-button: (
         shadow-blur: 8px,
     ),
     accent: (
-        border: 1px solid var(--clr-blue-100),
-        color: var(--clr-white-100),
-        bg: var(--clr-blue-60),
-        hover-bg: var(--clr-blue-40),
-        active-shadow: var(--clr-blue-40),
+        border: 1px solid var(--rt-color-blue-100),
+        color: var(--rt-text-static-light),
+        bg: var(--rt-color-blue-60),
+        hover-bg: var(--rt-color-blue-40),
+        active-shadow: var(--rt-color-blue-40),
     ),
     accent-outline: (
-        border: 1px solid var(--clr-blue-100),
-        bg: var(--clr-blue-20),
-        color: var(--clr-blue-100),
-        hover-border: 1px solid var(--clr-blue-80),
-        hover-bg: var(--clr-white-100),
-        active-shadow: var(--clr-blue-40),
+        border: 1px solid var(--rt-color-blue-100),
+        bg: var(--rt-color-blue-20),
+        color: var(--rt-text-accent-info),
+        hover-border: 1px solid var(--rt-color-blue-80),
+        hover-bg: var(--rt-bg-base-base),
+        active-shadow: var(--rt-color-blue-40),
     ),
     accent-light: (
-        color: var(--clr-blue-100),
-        bg: var(--clr-blue-40),
-        hover-color: var(--clr-blue-80),
-        hover-bg: var(--clr-blue-20),
-        active-shadow: var(--clr-blue-40),
+        color: var(--rt-text-accent-info),
+        bg: var(--rt-color-blue-40),
+        hover-color: var(--rt-text-accent-info-soft),
+        hover-bg: var(--rt-color-blue-20),
+        active-shadow: var(--rt-color-blue-40),
     ),
     success: (
-        border: 1px solid var(--clr-green-100),
-        color: var(--clr-white-100),
-        bg: var(--clr-green-80),
-        hover-bg: var(--clr-green-60),
-        active-shadow: var(--clr-green-40),
+        border: 1px solid var(--rt-color-green-100),
+        color: var(--rt-text-static-light),
+        bg: var(--rt-bg-accent-success-solid),
+        hover-bg: var(--rt-color-green-60),
+        active-shadow: var(--rt-color-green-40),
     ),
     success-outline: (
-        border: 1px solid var(--clr-green-100),
-        bg: var(--clr-green-20),
-        color: var(--clr-green-100),
-        hover-border: 1px solid var(--clr-green-80),
-        hover-bg: var(--clr-white-100),
-        active-shadow: var(--clr-green-40),
+        border: 1px solid var(--rt-color-green-100),
+        bg: var(--rt-color-green-20),
+        color: var(--rt-text-accent-success),
+        hover-border: 1px solid var(--rt-color-green-80),
+        hover-bg: var(--rt-bg-base-base),
+        active-shadow: var(--rt-color-green-40),
     ),
     success-light: (
-        color: var(--clr-green-100),
-        bg: var(--clr-green-20),
-        hover-color: var(--clr-green-80),
-        hover-bg: var(--clr-green-10),
-        active-shadow: var(--clr-green-40),
+        color: var(--rt-text-accent-success),
+        bg: var(--rt-color-green-20),
+        hover-color: var(--rt-text-accent-success-soft),
+        hover-bg: var(--rt-bg-accent-success-subtle),
+        active-shadow: var(--rt-color-green-40),
     ),
     secondary: (
-        border: 1px solid var(--clr-black-60),
-        color: var(--clr-white-100),
-        bg: var(--clr-black-60),
-        hover-bg: var(--clr-black-40),
-        active-shadow: var(--clr-black-40),
+        border: 1px solid var(--rt-border-neutral-emphasis),
+        color: var(--rt-text-static-light),
+        bg: var(--rt-bg-base-emphasis),
+        hover-bg: var(--rt-bg-base-emphasis-soft),
+        active-shadow: var(--rt-bg-base-emphasis-soft),
     ),
     secondary-outline: (
-        border: 1px solid var(--clr-black-60),
-        bg: var(--clr-black-20),
-        color: var(--clr-black-60),
-        hover-bg: var(--clr-white-100),
-        active-shadow: var(--clr-black-40),
+        border: 1px solid var(--rt-border-neutral-emphasis),
+        bg: var(--rt-bg-base-strong),
+        color: var(--rt-text-base-secondary),
+        hover-bg: var(--rt-bg-base-base),
+        active-shadow: var(--rt-bg-base-emphasis-soft),
     ),
     secondary-light: (
-        color: var(--clr-black-80),
-        bg: var(--clr-black-40),
-        hover-color: var(--clr-black-60),
-        hover-bg: var(--clr-black-20),
-        active-shadow: var(--clr-black-40),
+        color: var(--rt-text-base-soft),
+        bg: var(--rt-bg-base-emphasis-soft),
+        hover-color: var(--rt-text-base-secondary),
+        hover-bg: var(--rt-bg-base-strong),
+        active-shadow: var(--rt-bg-base-emphasis-soft),
     ),
     error: (
-        border: 1px solid var(--clr-red-100),
-        color: var(--clr-white-100),
-        bg: var(--clr-red-80),
-        hover-bg: var(--clr-red-60),
-        active-shadow: var(--clr-red-40),
+        border: 1px solid var(--rt-border-accent-danger),
+        color: var(--rt-text-static-light),
+        bg: var(--rt-color-red-80),
+        hover-bg: var(--rt-color-red-60),
+        active-shadow: var(--rt-color-red-40),
     ),
     error-outline: (
-        border: 1px solid var(--clr-red-100),
-        bg: var(--clr-red-10),
-        color: var(--clr-red-100),
-        hover-bg: var(--clr-white-100),
-        active-shadow: var(--clr-red-40),
+        border: 1px solid var(--rt-border-accent-danger),
+        bg: var(--rt-bg-accent-danger-subtle),
+        color: var(--rt-text-accent-danger),
+        hover-bg: var(--rt-bg-base-base),
+        active-shadow: var(--rt-color-red-40),
     ),
     error-light: (
-        color: var(--clr-red-100),
-        bg: var(--clr-red-40),
-        hover-bg: var(--clr-red-10),
-        active-shadow: var(--clr-red-40),
+        color: var(--rt-text-accent-danger),
+        bg: var(--rt-color-red-40),
+        hover-bg: var(--rt-bg-accent-danger-subtle),
+        active-shadow: var(--rt-color-red-40),
     ),
     warning: (
-        border: 1px solid var(--clr-orange-100),
-        color: var(--clr-white-100),
-        bg: var(--clr-orange-80),
-        hover-bg: var(--clr-orange-60),
-        active-shadow: var(--clr-orange-40),
+        border: 1px solid var(--rt-color-orange-100),
+        color: var(--rt-text-static-light),
+        bg: var(--rt-bg-accent-warning-solid),
+        hover-bg: var(--rt-color-orange-60),
+        active-shadow: var(--rt-color-orange-40),
     ),
     warning-outline: (
-        border: 1px solid var(--clr-orange-100),
-        bg: var(--clr-orange-10),
-        color: var(--clr-orange-100),
-        hover-bg: var(--clr-white-100),
-        active-shadow: var(--clr-orange-40),
+        border: 1px solid var(--rt-color-orange-100),
+        bg: var(--rt-color-orange-10),
+        color: var(--rt-text-accent-warning),
+        hover-bg: var(--rt-bg-base-base),
+        active-shadow: var(--rt-color-orange-40),
     ),
     warning-light: (
-        color: var(--clr-orange-100),
-        bg: var(--clr-orange-10),
-        hover-bg: var(--clr-orange-5),
-        active-shadow: var(--clr-orange-40),
+        color: var(--rt-text-accent-warning),
+        bg: var(--rt-color-orange-10),
+        hover-bg: var(--rt-color-orange-5),
+        active-shadow: var(--rt-color-orange-40),
     ),
     size-sm: (
         gap: 4px,
@@ -171,34 +171,34 @@ $rtui-button: (
     --shadow: var(--rt-rtui-btn-base-shadow);
     --shadow-blur: var(--rt-rtui-btn-base-shadow-blur);
 
+    display: var(--display);
     width: var(--width);
     align-items: center;
-    background-color: var(--bg);
+    justify-content: center;
+    padding: var(--padding);
     border: var(--border);
     border-radius: 6px;
+    background-color: var(--bg);
     box-shadow: var(--shadow);
     color: var(--color);
     cursor: pointer;
-    display: var(--display);
     font-size: var(--font-size);
     font-weight: 600;
     gap: var(--gap);
-    justify-content: center;
     line-height: 1;
-    padding: var(--padding);
+    text-decoration: none;
     transition:
         background-color 0.15s linear,
         color 0.15s linear,
         box-shadow 0.15s linear,
         border-color 0.15s linear;
-    text-decoration: none;
 
     &:focus {
         outline: none;
     }
 
     &:focus-visible {
-        outline: 2px dashed var(--clr-blue-40);
+        outline: 2px dashed var(--rt-border-focus);
         outline-offset: 2px;
     }
 

package/src/styles/components/_snackbar.scss

@@ -2,43 +2,43 @@
 
 $snack-bar: (
     default: (
-        background-color: var(--clr-black-80),
+        background-color: var(--rt-bg-base-inverse-soft),
     ),
     success: (
-        background-color: var(--clr-green-80),
+        background-color: var(--rt-bg-accent-success-solid),
     ),
     success-text: (
-        color: var(--clr-white-100),
+        color: var(--rt-text-base-inverse),
     ),
     success-action: (
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
     ),
     success-close-button: (
-        color: var(--clr-white-100),
+        color: var(--rt-text-base-inverse),
     ),
     warning: (
-        background-color: var(--clr-orange-80),
+        background-color: var(--rt-bg-accent-warning-solid),
     ),
     warning-text: (
-        color: var(--clr-white-100),
+        color: var(--rt-text-base-inverse),
     ),
     warning-action: (
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
     ),
     warning-close-button: (
-        color: var(--clr-white-100),
+        color: var(--rt-text-base-inverse),
     ),
     danger: (
-        background-color: var(--clr-red-100),
+        background-color: var(--rt-bg-accent-danger-solid),
     ),
     danger-text: (
-        color: var(--clr-white-100),
+        color: var(--rt-text-base-inverse),
     ),
     danger-action: (
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
     ),
     danger-close-button: (
-        color: var(--clr-white-100),
+        color: var(--rt-text-base-inverse),
     ),
 );
 
@@ -50,7 +50,7 @@ $snack-bar: (
     }
 
     --mat-snack-bar-container-color: var(--rt-snack-bar-default-background-color);
-    --mdc-snackbar-supporting-text-color: var(--clr-white-100);
+    --mdc-snackbar-supporting-text-color: var(--rt-text-base-inverse);
     --mdc-snackbar-container-shape: 0.5rem;
 }
 

package/src/styles/components/_table.scss

@@ -7,7 +7,7 @@ $table: (
         background-color: var(--mat-form-field-filled-container-color),
     ),
     header-row-last-child: (
-        border-bottom: var(--rt-table-header-cell-wrapper-border-width) solid var(--clr-black-20),
+        border-bottom: var(--rt-table-header-cell-wrapper-border-width) solid var(--rt-border-neutral-default),
     ),
     body: (
         font-size: 0.875rem,
@@ -15,26 +15,26 @@ $table: (
     ),
     row: (
         height: 3rem,
-        color: var(--clr-txt),
-        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-black-20),
+        color: var(--rt-text-base-primary),
+        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--rt-border-neutral-default),
         background-color: transparent,
     ),
     row-hover: (
-        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-blue-100),
+        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--rt-border-accent-info),
         transition: 0.2s,
     ),
     row-active: (
-        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-blue-100),
+        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--rt-border-accent-info),
     ),
     header-cell-wrapper: (
         padding: 0.625rem,
-        text-color: var(--clr-txt),
+        text-color: var(--rt-text-base-primary),
         font-size: 1rem,
         font-weight: 500,
         text-align: left,
         line-height: 1.2,
-        border-right: var(--rt-table-header-cell-wrapper-border-width) solid var(--clr-black-40),
-        background-color: var(--clr-white-100),
+        border-right: var(--rt-table-header-cell-wrapper-border-width) solid var(--rt-border-neutral-strong),
+        background-color: var(--rt-bg-base-base),
     ),
     header-filterable-cell-wrapper: (
         padding: 0.25rem 0.5rem,
@@ -49,7 +49,7 @@ $table: (
         z-index: 1,
     ),
     actions-container: (
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
 );
 
@@ -63,24 +63,20 @@ $table: (
     // initial table container scrollbar styles
     --rt-table-container-content-scrollbar-vertical-width: 0;
     --rt-table-container-content-scrollbar-horizontal-height: 12px;
-
     --rt-table-row-border-bottom-width: 1px;
     --rt-table-header-cell-wrapper-border-width: 1px;
 }
 
 // TABLE
 .c-table {
+    overflow: scroll;
     width: 100%;
-
     border-collapse: collapse;
 
-    overflow-x: scroll;
-    overflow-y: scroll;
-
     thead {
         position: sticky;
-        top: 0;
         z-index: var(--rt-table-header-z-index);
+        top: 0;
         font-size: var(--rt-table-header-font-size);
 
         tr {
@@ -89,15 +85,15 @@ $table: (
             }
 
             th {
-                background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--clr-white-100) 50%);
+                background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--rt-bg-base-base) 50%);
 
-                &:not(.c-table__cell--filterable):not(.c-table__cell--empty) {
+                &:not(.c-table__cell--filterable, .c-table__cell--empty) {
                     background-color: var(--rt-table-header-background-color);
                 }
 
                 &:hover {
-                    &:not(.c-table__cell--selectable):not(.c-table__cell--filterable) {
-                        background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--clr-white-100) 30%);
+                    &:not(.c-table__cell--selectable, .c-table__cell--filterable) {
+                        background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--rt-bg-base-base) 30%);
                     }
                 }
             }
@@ -105,18 +101,17 @@ $table: (
     }
 
     tbody {
-        font-size: var(--rt-table-body-font-size);
         background-color: var(--rt-table-body-background-color);
+        font-size: var(--rt-table-body-font-size);
     }
 }
 
 // ROW
 .c-table__row {
     height: var(--rt-table-row-height);
-    color: var(--rt-table-row-color);
     border-bottom: var(--rt-table-row-border-bottom);
     background-color: var(--rt-table-row-background-color);
-
+    color: var(--rt-table-row-color);
     transform: translate(0);
 
     &--active {
@@ -139,20 +134,17 @@ $table: (
 
 // CELL
 th.c-table__cell {
+    position: relative;
     width: fit-content;
     height: 100%;
-
-    position: relative;
-
-    pointer-events: none;
-
     padding: var(--rt-table-header-cell-wrapper-padding);
+    background-color: var(--rt-table-header-cell-wrapper-background-color);
     color: var(--rt-table-header-cell-wrapper-text-color);
     font-size: var(--rt-table-header-cell-wrapper-font-size);
     font-weight: var(--rt-table-header-cell-wrapper-font-weight);
-    text-align: var(--rt-table-header-cell-wrapper-text-align);
     line-height: var(--rt-table-header-cell-wrapper-line-height);
-    background-color: var(--rt-table-header-cell-wrapper-background-color);
+    pointer-events: none;
+    text-align: var(--rt-table-header-cell-wrapper-text-align);
 
     &--sortable,
     &--selectable,
@@ -164,14 +156,14 @@ th.c-table__cell {
         padding: var(--rt-table-header-filterable-cell-wrapper-padding);
     }
 
-    &:not(:last-child):not(&--selectable):not(&--empty) {
-        &::after {
-            content: '';
+    &:not(:last-child, &--selectable, &--empty) {
+        &:after {
             position: absolute;
-            right: 0;
             top: 25%;
+            right: 0;
             height: 50%;
             border-right: var(--rt-table-header-cell-wrapper-border-right);
+            content: '';
             pointer-events: none;
         }
     }
@@ -180,41 +172,32 @@ th.c-table__cell {
 td.c-table__cell {
     width: fit-content;
     height: 100%;
-
     padding: var(--rt-table-base-cell-wrapper-padding);
 }
 
 // ROW ACTIONS
 .c-table-actions {
-    width: 100%;
-    height: var(--rt-table-row-height);
-
     position: absolute;
-    right: 0;
-    top: 0;
     z-index: var(--rt-table-actions-z-index);
-
+    top: 0;
+    right: 0;
     display: flex;
-    justify-content: flex-end;
+    width: 100%;
+    height: var(--rt-table-row-height);
     align-items: center;
-
+    justify-content: flex-end;
     pointer-events: none;
 
     &__container {
         position: sticky;
-
         right: 0;
+        display: flex;
+        overflow: hidden;
         width: fit-content;
         height: calc(var(--rt-table-row-height) - var(--rt-table-row-border-bottom-width) - var(--rt-table-row-border-bottom-width));
-
-        display: flex;
-        justify-content: flex-end;
         align-items: center;
-        gap: 0.25rem;
+        justify-content: flex-end;
         padding: 0 0.25rem 0 1.25rem;
-
-        overflow: hidden;
-
         background: linear-gradient(
             to right,
             transparent 0%,
@@ -223,6 +206,7 @@ td.c-table__cell {
             var(--rt-table-actions-container-background-color) 20%,
             var(--rt-table-actions-container-background-color) 100%
         );
+        gap: 0.25rem;
         pointer-events: none;
     }
 

package/src/styles/main.scss

@@ -2,6 +2,11 @@
 @forward 'base/variables' as vars-*;
 @forward 'base/mixin' as mixins-*;
 @forward 'base/base';
+@forward 'base/tokens' as tokens-*;
+@forward 'base/color-scheme'; // public: rt.color-scheme($name, $roles)
+
+// Material bridge — single home for global Material overrides
+@forward 'components/material-bridge';
 
 // Components
 @forward 'components/form';

package/src/styles/tokens.scss

@@ -0,0 +1,5 @@
+// Standalone design-token entry.
+// Compiled to dist/ui-kit/styles/tokens.css for consumers without a sass pipeline:
+//   @import 'rt-tools/styles/tokens.css';
+// SCSS consumers should @use 'rt-tools/src/styles/main' instead (mixins + component styles included).
+@use './base/tokens';