@rt-tools/ui-kit 0.0.19 → 0.0.21

package/src/styles/components/_button.scss

@@ -1,3 +1,10 @@
+/// @deprecated — legacy `.c-button` system. New code uses `.rtui-btn` (_rtui_button.scss);
+/// ~60% of this module duplicates it. Kept because consumers still apply `.c-button`
+/// classes AND override `--rt-button-*` vars directly (incl. dark mode) — rerouting these rules
+/// onto `--rt-rtui-btn-*` would silently kill those overrides. Removal plan (next major):
+/// map classes `--fill-green→success`, `--fill-red→error`, `--fill-blue→accent-light`,
+/// `--outline-*→*-outline`; `--txt-*`/`--fab` first need a text/icon appearance in .rtui-btn.
+/// See TOKENS.md "Buttons: legacy vs rtui".
 @use '../base/mixin' as mixins;
 @use '../base/variables' as vars;
 @use 'sass:color' as color;
@@ -20,7 +27,8 @@ $button: (
         background: var(--rt-color-neutral-25),
     ),
     text-active: (
-        background: var(--clr-black-30),
+        background: #b2cbca,
+        // palette outlier, no neutral-scale equivalent
     ),
     text-base: (
         color: var(--rt-color-neutral-60),
@@ -57,36 +65,36 @@ $button: (
         color: var(--rt-color-neutral-0),
     ),
     fill-green: (
-        border: 1px solid color.scale(vars.$clr-green-80, $lightness: -10%),
+        border: 1px solid color.scale(vars.$btn-success, $lightness: -10%),
         color: var(--rt-color-neutral-0),
         background-color: var(--rt-color-green-80),
     ),
     fill-green-hover: (
-        background-color: color.scale(vars.$clr-green-80, $lightness: -10%),
+        background-color: color.scale(vars.$btn-success, $lightness: -10%),
     ),
     fill-green-light: (
-        border-color: color.scale(vars.$clr-green-10, $lightness: -10%),
+        border-color: color.scale(vars.$btn-success-soft, $lightness: -10%),
         color: var(--rt-color-green-100),
         background-color: var(--rt-color-green-10),
     ),
     fill-green-light-hover: (
-        background-color: color.scale(vars.$clr-green-10, $lightness: -10%),
+        background-color: color.scale(vars.$btn-success-soft, $lightness: -10%),
     ),
     fill-red: (
-        border: 1px solid color.scale(vars.$clr-red-100, $lightness: -10%),
+        border: 1px solid color.scale(vars.$btn-danger, $lightness: -10%),
         color: var(--rt-color-neutral-0),
-        background-color: vars.$clr-red-100,
+        background-color: vars.$btn-danger,
     ),
     fill-red-hover: (
-        background-color: color.scale(vars.$clr-red-100, $lightness: -10%),
+        background-color: color.scale(vars.$btn-danger, $lightness: -10%),
     ),
     fill-red-light: (
-        border-color: color.scale(vars.$clr-red-10, $lightness: -10%),
+        border-color: color.scale(vars.$btn-danger-soft, $lightness: -10%),
         color: var(--rt-color-red-100),
         background-color: var(--rt-color-red-10),
     ),
     fill-red-light-hover: (
-        background-color: color.scale(vars.$clr-red-10, $lightness: -10%),
+        background-color: color.scale(vars.$btn-danger-soft, $lightness: -10%),
     ),
     outline: (
         border: 1px solid var(--rt-color-blue-40),
@@ -112,22 +120,22 @@ $button: (
 }
 
 button {
-    line-height: 1;
     cursor: pointer;
+    line-height: 1;
 }
 
 .c-button {
+    position: relative;
     display: inline-flex;
     align-items: center;
-    font-family: var(--rt-button-base-font-family);
-    line-height: 1;
-    position: relative;
     justify-content: center;
-    font-size: 1rem;
     color: var(--rt-button-base-color);
+    font-family: var(--rt-button-base-font-family);
+    font-size: 1rem;
+    line-height: 1;
     transition: all 0.15s linear;
 
-    //FAB
+    // FAB
     &[class*='--fab'] {
         border: 0;
         background-color: transparent;
@@ -149,8 +157,8 @@ button {
     // TEXT
     &[class*='--txt-'] {
         border: 0;
-        background-color: transparent;
         border-radius: 5px;
+        background-color: transparent;
 
         &:hover {
             background: var(--rt-button-text-hover-background);
@@ -239,9 +247,9 @@ button {
         &[class*='green'] {
             border: var(--rt-button-fill-green-border);
             border-radius: 2px;
-            color: var(--rt-button-fill-green-color);
-            box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
             background-color: var(--rt-button-fill-green-background-color);
+            box-shadow: 0 2px 4px rgb(24 24 24 / 10%);
+            color: var(--rt-button-fill-green-color);
 
             &:hover {
                 background-color: var(--rt-button-fill-green-hover-background-color);
@@ -249,8 +257,8 @@ button {
 
             &[class*='-light'] {
                 border-color: var(--rt-button-fill-green-light-border-color);
-                color: var(--rt-button-fill-green-light-color);
                 background-color: var(--rt-button-fill-green-light-background-color);
+                color: var(--rt-button-fill-green-light-color);
 
                 &:hover {
                     background-color: var(--rt-button-fill-green-light-hover-background-color);
@@ -261,9 +269,9 @@ button {
         &[class*='red'] {
             border: var(--rt-button-fill-red-border);
             border-radius: 2px;
-            color: var(--rt-button-fill-red-color);
-            box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
             background-color: var(--rt-button-fill-red-background-color);
+            box-shadow: 0 2px 4px rgb(24 24 24 / 10%);
+            color: var(--rt-button-fill-red-color);
 
             &:hover {
                 background-color: var(--rt-button-fill-red-hover-background-color);
@@ -271,8 +279,8 @@ button {
 
             &[class*='-light'] {
                 border-color: var(--rt-button-fill-red-light-border-color);
-                color: var(--rt-button-fill-red-light-color);
                 background-color: var(--rt-button-fill-red-light-background-color);
+                color: var(--rt-button-fill-red-light-color);
 
                 &:hover {
                     background-color: var(--rt-button-fill-red-light-hover-background-color);
@@ -348,7 +356,7 @@ button {
 
     // SHADOW
     &[class*='--shadow'] {
-        box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
+        box-shadow: 0 2px 4px rgb(24 24 24 / 10%);
     }
 
     // --shadow

package/src/styles/components/_dynamic-selectors.scss

@@ -46,15 +46,14 @@ $dynamic-selector: (
 
 .rtui-dynamic-selector {
     &__item {
-        height: var(--rt-dynamic-selector-item-height);
         display: flex;
-        justify-content: flex-start;
+        height: var(--rt-dynamic-selector-item-height);
         align-items: center;
-
-        background-color: var(--rt-dynamic-selector-item-background-color);
+        justify-content: flex-start;
+        padding: var(--rt-dynamic-selector-item-padding);
         border-radius: var(--rt-dynamic-selector-item-border-radius);
         margin-bottom: var(--rt-dynamic-selector-item-margin-bottom);
-        padding: var(--rt-dynamic-selector-item-padding);
+        background-color: var(--rt-dynamic-selector-item-background-color);
 
         &::-webkit-scrollbar {
             display: none;
@@ -66,17 +65,17 @@ $dynamic-selector: (
 
         &-mover {
             display: flex;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
             padding: var(--rt-dynamic-selector-item-mover-padding);
             border-right: var(--rt-dynamic-selector-item-mover-border-right);
             margin-right: var(--rt-dynamic-selector-item-mover-margin-right);
         }
 
         &-title {
-            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         &-input {
@@ -92,11 +91,11 @@ $dynamic-selector: (
 
         &-control {
             display: flex;
-            justify-content: center;
             align-items: center;
-            gap: var(--rt-dynamic-selector-item-control-gap);
+            justify-content: center;
             padding: var(--rt-dynamic-selector-item-control-padding);
             border-right: var(--rt-dynamic-selector-item-control-border-right);
+            gap: var(--rt-dynamic-selector-item-control-gap);
 
             &:last-child {
                 padding: var(--rt-dynamic-selector-item-control-last-child-padding);
@@ -105,8 +104,8 @@ $dynamic-selector: (
 
             &-button {
                 display: flex;
-                justify-content: center;
                 align-items: center;
+                justify-content: center;
 
                 .mat-icon {
                     width: var(--rt-dynamic-selector-item-control-icon-size);

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;
-        font-size: 1rem;
         color: var(--rt-text-base-secondary);
+        font-size: 1rem;
     }
 
     &__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

@@ -118,6 +118,36 @@ $rtui-button: (
         hover-bg: var(--rt-color-orange-5),
         active-shadow: var(--rt-color-orange-40),
     ),
+    accent-text: (
+        border: 0,
+        bg: transparent,
+        color: var(--rt-text-accent-info),
+        hover-bg: var(--rt-bg-base-hover),
+    ),
+    success-text: (
+        border: 0,
+        bg: transparent,
+        color: var(--rt-text-accent-success),
+        hover-bg: var(--rt-bg-base-hover),
+    ),
+    secondary-text: (
+        border: 0,
+        bg: transparent,
+        color: var(--rt-text-base-secondary),
+        hover-bg: var(--rt-bg-base-hover),
+    ),
+    error-text: (
+        border: 0,
+        bg: transparent,
+        color: var(--rt-text-accent-danger),
+        hover-bg: var(--rt-bg-base-hover),
+    ),
+    warning-text: (
+        border: 0,
+        bg: transparent,
+        color: var(--rt-text-accent-warning),
+        hover-bg: var(--rt-bg-base-hover),
+    ),
     size-sm: (
         gap: 4px,
         padding: 4px 8px,
@@ -171,27 +201,27 @@ $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;
@@ -424,6 +454,71 @@ $rtui-button: (
     }
 }
 
+/* text — transparent, borderless label with a subtle hover wash.
+   Shared box matches the legacy text-button (inline-text look). Compound
+   `.rtui-btn[...-text]` (0,2,0) outranks the size tokens (0,1,0) regardless of order. */
+.rtui-btn[class*='-text'] {
+    --font-size: 16px;
+    --gap: 8px;
+    --padding: 0 10px;
+
+    min-height: 30px;
+    border-radius: 5px;
+    font-weight: 400;
+}
+
+.rtui-btn-accent-text {
+    --border: var(--rt-rtui-btn-accent-text-border);
+    --bg: var(--rt-rtui-btn-accent-text-bg);
+    --color: var(--rt-rtui-btn-accent-text-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-accent-text-hover-bg);
+    }
+}
+
+.rtui-btn-success-text {
+    --border: var(--rt-rtui-btn-success-text-border);
+    --bg: var(--rt-rtui-btn-success-text-bg);
+    --color: var(--rt-rtui-btn-success-text-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-success-text-hover-bg);
+    }
+}
+
+/* secondary-text resolves its colour ON the element so the `--rt-text-base-secondary`
+   semantic (`--mat-sys-on-surface-variant` hybrid) lands where Material is in scope. */
+.rtui-btn-secondary-text {
+    --border: var(--rt-rtui-btn-secondary-text-border);
+    --bg: var(--rt-rtui-btn-secondary-text-bg);
+    --color: var(--mat-sys-on-surface-variant, var(--rt-rtui-btn-secondary-text-color));
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-secondary-text-hover-bg);
+    }
+}
+
+.rtui-btn-error-text {
+    --border: var(--rt-rtui-btn-error-text-border);
+    --bg: var(--rt-rtui-btn-error-text-bg);
+    --color: var(--rt-rtui-btn-error-text-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-error-text-hover-bg);
+    }
+}
+
+.rtui-btn-warning-text {
+    --border: var(--rt-rtui-btn-warning-text-border);
+    --bg: var(--rt-rtui-btn-warning-text-bg);
+    --color: var(--rt-rtui-btn-warning-text-color);
+
+    &:hover {
+        --bg: var(--rt-rtui-btn-warning-text-hover-bg);
+    }
+}
+
 /* size */
 .rtui-btn-sm {
     --gap: var(--rt-rtui-btn-size-sm-gap);

package/src/styles/components/_table.scss

@@ -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 {
@@ -91,12 +87,12 @@ $table: (
             th {
                 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) {
+                    &: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

@@ -3,6 +3,10 @@
 @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';