@rt-tools/ui-kit 0.0.19 → 0.0.20

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';

package/styles/tokens.css

@@ -1,24 +1,26 @@
+@charset "UTF-8";
 /* Material Theme */
 /* Base */
 /* Device Definitions */
 /* Fonts */
-/* Colors */
+/* Button palette seeds (static — fed to sass color.scale() for hover/active states) */
 /* Components */
 /* ============================== Tier 1: primitives ============================== */
+/* ------------------------------ Accent-role ramps (indirection layer) ------------------------------ */
 /* ============================== Tier 2: semantic ============================== */
 /* ============================== Foundations (mode-independent) ============================== */
 /* ============================== Emission ============================== */
 :root {
   color-scheme: light;
   /* --- Tier 1: primitives --- */
-  --rt-color-neutral-0: #ffffff;
+  --rt-color-neutral-0: #fff;
   --rt-color-neutral-5: #f5f6f8;
   --rt-color-neutral-10: #f3f3f3;
-  --rt-color-neutral-15: #eeeeee;
+  --rt-color-neutral-15: #eee;
   --rt-color-neutral-20: #e8e8e8;
   --rt-color-neutral-25: #e0e0e0;
   --rt-color-neutral-30: #d1d1d1;
-  --rt-color-neutral-35: #cccccc;
+  --rt-color-neutral-35: #ccc;
   --rt-color-neutral-40: #a3a3a3;
   --rt-color-neutral-60: #747474;
   --rt-color-neutral-80: #323033;
@@ -127,41 +129,59 @@
   --rt-color-light-a80: rgba(255, 255, 255, 0.8);
   --rt-color-dark-a90: rgba(24, 24, 24, 0.9);
   --rt-color-light-a90: rgba(255, 255, 255, 0.9);
+  --rt-color-primary-20: var(--mat-sys-primary-container, #eaedfc);
+  --rt-color-primary-40: #b3ceef;
+  --rt-color-primary-60: var(--mat-sys-primary, #6d96e8);
+  --rt-color-primary-100: var(--mat-sys-primary, #4284d7);
+  --rt-color-info-20: #eaedfc;
+  --rt-color-info-80: #4285f4;
+  --rt-color-info-100: #4284d7;
+  --rt-color-success-10: #e5f8f4;
+  --rt-color-success-80: #21b18e;
+  --rt-color-success-100: #01af8d;
+  --rt-color-warning-10: #e8cbbf;
+  --rt-color-warning-80: #ee7a34;
+  --rt-color-warning-100: #ef7128;
+  --rt-color-danger-10: var(--mat-sys-error-container, #fdedee);
+  --rt-color-danger-60: #e88487;
+  --rt-color-danger-100: var(--mat-sys-error, #eb5055);
+  --rt-color-brand-20: var(--mat-sys-primary, #e8e8e8);
+  --rt-color-brand-100: var(--mat-sys-primary, #0d1c2b);
   /* --- Tier 2: semantic --- */
-  --rt-bg-base-base: var(--mat-sys-surface, light-dark(#ffffff, #1c1b1e));
-  --rt-bg-base-elevated: var(--mat-sys-surface-container, light-dark(#ffffff, #2a292d));
+  --rt-bg-base-base: var(--mat-sys-surface, light-dark(#fff, #1c1b1e));
+  --rt-bg-base-elevated: var(--mat-sys-surface-container, light-dark(#fff, #2a292d));
   --rt-bg-base-subtle: light-dark(#f5f6f8, #232226);
   --rt-bg-base-hover: light-dark(#f3f3f3, rgba(255, 255, 255, 0.06));
-  --rt-bg-base-active: light-dark(#eeeeee, rgba(255, 255, 255, 0.1));
+  --rt-bg-base-active: light-dark(#eee, rgba(255, 255, 255, 0.1));
   --rt-bg-base-strong: light-dark(#e0e0e0, #3f3e43);
   --rt-bg-base-emphasis: light-dark(#747474, #a3a3a3);
   --rt-bg-base-emphasis-soft: light-dark(#a3a3a3, #747474);
   --rt-bg-base-inverse: var(--mat-sys-inverse-surface, light-dark(#181818, #f3f3f3));
-  --rt-bg-base-inverse-soft: light-dark(#323033, #eeeeee);
+  --rt-bg-base-inverse-soft: light-dark(#323033, #eee);
   --rt-bg-base-overlay: light-dark(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.6));
-  --rt-bg-static-light: #ffffff;
+  --rt-bg-static-light: #fff;
   --rt-bg-static-dark: #181818;
   --rt-bg-static-none: transparent;
-  --rt-bg-accent-primary-subtle: var(--mat-sys-primary-container, light-dark(#eaedfc, color-mix(in srgb, #4284d7 18%, #1c1b1e)));
-  --rt-bg-accent-primary-solid: var(--mat-sys-primary, light-dark(#4284d7, #4284d7));
-  --rt-bg-accent-primary-hover: light-dark(color-mix(in srgb, #4284d7 90%, #000000), color-mix(in srgb, #4284d7 90%, #ffffff));
-  --rt-bg-accent-primary-disabled: color-mix(in srgb, #4284d7 38%, transparent);
-  --rt-bg-accent-success-subtle: light-dark(#e5f8f4, color-mix(in srgb, #01af8d 18%, #1c1b1e));
-  --rt-bg-accent-success-solid: #21b18e;
-  --rt-bg-accent-success-hover: light-dark(color-mix(in srgb, #21b18e 90%, #000000), color-mix(in srgb, #21b18e 90%, #ffffff));
-  --rt-bg-accent-success-disabled: color-mix(in srgb, #21b18e 38%, transparent);
-  --rt-bg-accent-warning-subtle: light-dark(#e8cbbf, color-mix(in srgb, #ef7128 18%, #1c1b1e));
-  --rt-bg-accent-warning-solid: #ee7a34;
-  --rt-bg-accent-warning-hover: light-dark(color-mix(in srgb, #ee7a34 90%, #000000), color-mix(in srgb, #ee7a34 90%, #ffffff));
-  --rt-bg-accent-warning-disabled: color-mix(in srgb, #ee7a34 38%, transparent);
-  --rt-bg-accent-danger-subtle: var(--mat-sys-error-container, light-dark(#fdedee, color-mix(in srgb, #eb5055 18%, #1c1b1e)));
-  --rt-bg-accent-danger-solid: var(--mat-sys-error, light-dark(#eb5055, #eb5055));
-  --rt-bg-accent-danger-hover: light-dark(color-mix(in srgb, #eb5055 90%, #000000), color-mix(in srgb, #eb5055 90%, #ffffff));
-  --rt-bg-accent-danger-disabled: color-mix(in srgb, #eb5055 38%, transparent);
-  --rt-bg-accent-info-subtle: light-dark(#eaedfc, color-mix(in srgb, #4284d7 18%, #1c1b1e));
-  --rt-bg-accent-info-solid: #4284d7;
-  --rt-bg-accent-info-hover: light-dark(color-mix(in srgb, #4284d7 90%, #000000), color-mix(in srgb, #4284d7 90%, #ffffff));
-  --rt-bg-accent-info-disabled: color-mix(in srgb, #4284d7 38%, transparent);
+  --rt-bg-accent-primary-subtle: light-dark(var(--rt-color-primary-20), color-mix(in srgb, var(--rt-color-primary-100) 18%, #1c1b1e));
+  --rt-bg-accent-primary-solid: var(--rt-color-primary-100);
+  --rt-bg-accent-primary-hover: light-dark(color-mix(in srgb, var(--rt-color-primary-100) 90%, #000), color-mix(in srgb, var(--rt-color-primary-100) 90%, #fff));
+  --rt-bg-accent-primary-disabled: color-mix(in srgb, var(--rt-color-primary-100) 38%, transparent);
+  --rt-bg-accent-success-subtle: light-dark(var(--rt-color-success-10), color-mix(in srgb, var(--rt-color-success-100) 18%, #1c1b1e));
+  --rt-bg-accent-success-solid: var(--rt-color-success-80);
+  --rt-bg-accent-success-hover: light-dark(color-mix(in srgb, var(--rt-color-success-80) 90%, #000), color-mix(in srgb, var(--rt-color-success-80) 90%, #fff));
+  --rt-bg-accent-success-disabled: color-mix(in srgb, var(--rt-color-success-80) 38%, transparent);
+  --rt-bg-accent-warning-subtle: light-dark(var(--rt-color-warning-10), color-mix(in srgb, var(--rt-color-warning-100) 18%, #1c1b1e));
+  --rt-bg-accent-warning-solid: var(--rt-color-warning-80);
+  --rt-bg-accent-warning-hover: light-dark(color-mix(in srgb, var(--rt-color-warning-80) 90%, #000), color-mix(in srgb, var(--rt-color-warning-80) 90%, #fff));
+  --rt-bg-accent-warning-disabled: color-mix(in srgb, var(--rt-color-warning-80) 38%, transparent);
+  --rt-bg-accent-danger-subtle: light-dark(var(--rt-color-danger-10), color-mix(in srgb, var(--rt-color-danger-100) 18%, #1c1b1e));
+  --rt-bg-accent-danger-solid: var(--rt-color-danger-100);
+  --rt-bg-accent-danger-hover: light-dark(color-mix(in srgb, var(--rt-color-danger-100) 90%, #000), color-mix(in srgb, var(--rt-color-danger-100) 90%, #fff));
+  --rt-bg-accent-danger-disabled: color-mix(in srgb, var(--rt-color-danger-100) 38%, transparent);
+  --rt-bg-accent-info-subtle: light-dark(var(--rt-color-info-20), color-mix(in srgb, var(--rt-color-info-100) 18%, #1c1b1e));
+  --rt-bg-accent-info-solid: var(--rt-color-info-100);
+  --rt-bg-accent-info-hover: light-dark(color-mix(in srgb, var(--rt-color-info-100) 90%, #000), color-mix(in srgb, var(--rt-color-info-100) 90%, #fff));
+  --rt-bg-accent-info-disabled: color-mix(in srgb, var(--rt-color-info-100) 38%, transparent);
   --rt-bg-accent-neutral-subtle: light-dark(#f3f3f3, rgba(255, 255, 255, 0.06));
   --rt-bg-accent-neutral-solid: light-dark(#747474, #a3a3a3);
   --rt-bg-accent-neutral-hover: light-dark(#a3a3a3, #747474);
@@ -171,48 +191,48 @@
   --rt-text-base-soft: light-dark(#323033, #e0e0e0);
   --rt-text-base-secondary: var(--mat-sys-on-surface-variant, light-dark(#747474, #a3a3a3));
   --rt-text-base-disabled: light-dark(#a3a3a3, #747474);
-  --rt-text-base-inverse: var(--mat-sys-inverse-on-surface, light-dark(#ffffff, #181818));
-  --rt-text-static-light: #ffffff;
+  --rt-text-base-inverse: var(--mat-sys-inverse-on-surface, light-dark(#fff, #181818));
+  --rt-text-static-light: #fff;
   --rt-text-static-dark: #181818;
-  --rt-text-accent-brand: var(--mat-sys-primary, light-dark(#0d1c2b, #e8e8e8));
-  --rt-text-accent-primary: var(--mat-sys-primary, light-dark(#4284d7, #6d96e8));
-  --rt-text-accent-success: #01af8d;
-  --rt-text-accent-success-soft: #21b18e;
-  --rt-text-accent-warning: #ef7128;
-  --rt-text-accent-warning-soft: #ee7a34;
-  --rt-text-accent-danger: var(--mat-sys-error, light-dark(#eb5055, #eb5055));
-  --rt-text-accent-danger-soft: #e88487;
-  --rt-text-accent-info: #4284d7;
-  --rt-text-accent-info-soft: #4285f4;
+  --rt-text-accent-brand: light-dark(var(--rt-color-brand-100), var(--rt-color-brand-20));
+  --rt-text-accent-primary: light-dark(var(--rt-color-primary-100), var(--rt-color-primary-60));
+  --rt-text-accent-success: var(--rt-color-success-100);
+  --rt-text-accent-success-soft: var(--rt-color-success-80);
+  --rt-text-accent-warning: var(--rt-color-warning-100);
+  --rt-text-accent-warning-soft: var(--rt-color-warning-80);
+  --rt-text-accent-danger: var(--rt-color-danger-100);
+  --rt-text-accent-danger-soft: var(--rt-color-danger-60);
+  --rt-text-accent-info: var(--rt-color-info-100);
+  --rt-text-accent-info-soft: var(--rt-color-info-80);
   --rt-icon-neutral-default: light-dark(#323033, #e0e0e0);
   --rt-icon-neutral-soft: light-dark(#747474, #a3a3a3);
   --rt-icon-neutral-disabled: light-dark(#a3a3a3, #747474);
-  --rt-icon-neutral-inverse: light-dark(#ffffff, #181818);
-  --rt-icon-static-light: #ffffff;
+  --rt-icon-neutral-inverse: light-dark(#fff, #181818);
+  --rt-icon-static-light: #fff;
   --rt-icon-static-dark: #181818;
-  --rt-icon-accent-brand: var(--mat-sys-primary, light-dark(#0d1c2b, #e8e8e8));
-  --rt-icon-accent-primary: var(--mat-sys-primary, light-dark(#4284d7, #6d96e8));
-  --rt-icon-accent-success: #01af8d;
-  --rt-icon-accent-warning: #ef7128;
-  --rt-icon-accent-danger: var(--mat-sys-error, light-dark(#eb5055, #eb5055));
-  --rt-icon-accent-info: #4284d7;
+  --rt-icon-accent-brand: light-dark(var(--rt-color-brand-100), var(--rt-color-brand-20));
+  --rt-icon-accent-primary: light-dark(var(--rt-color-primary-100), var(--rt-color-primary-60));
+  --rt-icon-accent-success: var(--rt-color-success-100);
+  --rt-icon-accent-warning: var(--rt-color-warning-100);
+  --rt-icon-accent-danger: var(--rt-color-danger-100);
+  --rt-icon-accent-info: var(--rt-color-info-100);
   --rt-border-neutral-subtle: light-dark(#e8e8e8, #2e2d31);
   --rt-border-neutral-default: var(--mat-sys-outline-variant, light-dark(#e0e0e0, #3f3e43));
   --rt-border-neutral-medium: light-dark(#d1d1d1, #4a494e);
-  --rt-border-neutral-divider: light-dark(#cccccc, #4a494e);
+  --rt-border-neutral-divider: light-dark(#ccc, #4a494e);
   --rt-border-neutral-strong: var(--mat-sys-outline, light-dark(#a3a3a3, #5c5b60));
   --rt-border-neutral-emphasis: light-dark(#747474, #a3a3a3);
-  --rt-border-accent-primary: var(--mat-sys-primary, light-dark(#4284d7, #6d96e8));
-  --rt-border-accent-success: #01af8d;
-  --rt-border-accent-warning: #ef7128;
-  --rt-border-accent-danger: var(--mat-sys-error, light-dark(#eb5055, #eb5055));
-  --rt-border-accent-danger-soft: #e88487;
-  --rt-border-accent-info: #4284d7;
-  --rt-border-focus: light-dark(#b3ceef, #6d96e8);
+  --rt-border-accent-primary: light-dark(var(--rt-color-primary-100), var(--rt-color-primary-60));
+  --rt-border-accent-success: var(--rt-color-success-100);
+  --rt-border-accent-warning: var(--rt-color-warning-100);
+  --rt-border-accent-danger: var(--rt-color-danger-100);
+  --rt-border-accent-danger-soft: var(--rt-color-danger-60);
+  --rt-border-accent-info: var(--rt-color-info-100);
+  --rt-border-focus: light-dark(var(--rt-color-primary-40), var(--rt-color-primary-60));
   --rt-control-track: light-dark(#e8e8e8, #4a494e);
-  --rt-control-thumb: light-dark(#ffffff, #eeeeee);
+  --rt-control-thumb: light-dark(#fff, #eee);
   --rt-control-checked: light-dark(#323033, #e0e0e0);
-  --rt-scrollbar-thumb: light-dark(#cccccc, #4a494e);
+  --rt-scrollbar-thumb: light-dark(#ccc, #4a494e);
   --rt-scrollbar-thumb-hover: light-dark(#a3a3a3, #5c5b60);
   --rt-shadow-color: light-dark(#747474, rgba(0, 0, 0, 0.6));
   /* --- Foundations --- */
@@ -263,48 +283,6 @@
   --rt-breakpoint-md: 960px;
   --rt-breakpoint-lg: 1280px;
   --rt-breakpoint-xl: 1920px;
-  /* --- Deprecated aliases (legacy --clr-*; remove after consumers migrate) --- */
-  --clr-white-100: var(--rt-color-neutral-0);
-  --clr-gray-5: var(--rt-color-neutral-5);
-  --clr-gray-10: var(--rt-color-neutral-20);
-  --clr-gray-15: var(--rt-color-neutral-30);
-  --clr-gray-20: var(--rt-color-neutral-35);
-  --clr-black-10: var(--rt-color-neutral-10);
-  --clr-black-15: var(--rt-color-neutral-15);
-  --clr-black-20: var(--rt-color-neutral-25);
-  --clr-black-30: #b2cbca;
-  --clr-black-40: var(--rt-color-neutral-40);
-  --clr-black-60: var(--rt-color-neutral-60);
-  --clr-black-80: var(--rt-color-neutral-80);
-  --clr-black-100: var(--rt-color-neutral-100);
-  --clr-red-10: var(--rt-color-red-10);
-  --clr-red-20: var(--rt-color-red-20);
-  --clr-red-40: var(--rt-color-red-40);
-  --clr-red-60: var(--rt-color-red-60);
-  --clr-red-80: var(--rt-color-red-80);
-  --clr-red-100: var(--rt-color-red-100);
-  --clr-orange-5: var(--rt-color-orange-5);
-  --clr-orange-10: var(--rt-color-orange-10);
-  --clr-orange-20: var(--rt-color-orange-20);
-  --clr-orange-40: var(--rt-color-orange-40);
-  --clr-orange-60: var(--rt-color-orange-60);
-  --clr-orange-70: var(--rt-color-orange-70);
-  --clr-orange-80: var(--rt-color-orange-80);
-  --clr-orange-100: var(--rt-color-orange-100);
-  --clr-blue-20: var(--rt-color-blue-20);
-  --clr-blue-40: var(--rt-color-blue-40);
-  --clr-blue-60: var(--rt-color-blue-60);
-  --clr-blue-80: var(--rt-color-blue-80);
-  --clr-blue-100: var(--rt-color-blue-100);
-  --clr-green-10: var(--rt-color-green-10);
-  --clr-green-20: var(--rt-color-green-20);
-  --clr-green-40: var(--rt-color-green-40);
-  --clr-green-60: var(--rt-color-green-60);
-  --clr-green-80: var(--rt-color-green-80);
-  --clr-green-100: var(--rt-color-green-100);
-  --clr-txt: var(--rt-text-base-primary);
-  --clr-base-accent: var(--rt-color-brand);
-  --clr-white-rgb: 255, 255, 255;
 }
 
 /* Theme switching: global class + nested local contexts (GMT data-theme analogue) */

package/types/rt-tools-ui-kit.d.ts

@@ -1600,23 +1600,71 @@ declare const RT_THEME_STORAGE_KEY: string;
 declare const RT_DARK_CLASS: string;
 declare const RT_THEME_AUTO_CLASS: string;
 declare const RT_THEME_ATTRIBUTE: string;
+/**
+ * Accent roles whose `--rt-color-{role}-{0..100}` indirection rows a custom
+ * color scheme may override. The semantic accent tier
+ * (`--rt-bg/text/icon/border-accent-*`) derives entirely from these rows.
+ */
+declare enum RT_ACCENT_ROLE_ENUM {
+    PRIMARY = "primary",
+    INFO = "info",
+    SUCCESS = "success",
+    WARNING = "warning",
+    DANGER = "danger",
+    BRAND = "brand"
+}
+type RtAccentRole = `${RT_ACCENT_ROLE_ENUM}`;
+/**
+ * A brand palette: per accent role, a tonal ramp mapping tone step (0–100)
+ * to a CSS color. One ramp serves both light and dark (the mode picks the tone).
+ * Partial ramps are allowed — unset tones keep the rt-tools defaults.
+ *
+ * @example
+ * const teal: RtColorSchemeRamp = {
+ *     primary: { 20: '#b3e3e1', 40: '#5cb8b5', 60: '#1a9d99', 100: '#008582' },
+ *     brand:   { 20: '#e8e8e8', 100: '#008582' },
+ * };
+ */
+type RtColorSchemeRamp = Partial<Record<RtAccentRole, Record<number, string>>>;
+/** `'default'`/`null` clears the active scheme (back to the rt-tools palette). */
+declare const RT_DEFAULT_SCHEME: string;
+declare const RT_COLOR_SCHEME_STORAGE_KEY: string;
+declare const RT_SCHEME_ATTRIBUTE: string;
 
 /**
- * Global theme switcher for the rt-tools design tokens.
+ * Global theme + color-scheme switcher for the rt-tools design tokens.
  *
- * Applies `.rt-dark` / `.rt-theme-auto` to `<html>`; all semantic tokens
- * (`--rt-*`) adapt through `color-scheme` + `light-dark()`.
- * The chosen theme is persisted to localStorage (`rt-theme` key).
+ * **Theme** (`light`/`dark`/`auto`): applies `.rt-dark` / `.rt-theme-auto` to
+ * `<html>`; semantic tokens (`--rt-*`) adapt through `color-scheme` + `light-dark()`.
+ * Persisted to localStorage (`rt-theme`). `auto` follows the OS preference.
  *
- * `auto` follows the OS preference (`prefers-color-scheme`).
+ * **Color scheme** (brand palette): toggles `data-rt-scheme="<name>"` on `<html>`,
+ * which activates a `[data-rt-scheme]` block (emitted by the `rt.color-scheme` Sass
+ * mixin or injected at runtime via {@link registerColorScheme}). It overrides only
+ * the accent-role rows `--rt-color-{role}-{N}`, so the whole accent layer recolors
+ * while semantic token names stay stable. Orthogonal to light/dark; persisted to
+ * localStorage (`rt-color-scheme`).
  */
 declare class RtThemeService {
     #private;
     readonly theme: Signal<RtThemeType>;
+    readonly colorScheme: Signal<string | null>;
     constructor();
     setTheme(theme: RtThemeType): void;
     /** Toggles between light and dark (auto resolves to its opposite visual state). */
     toggle(): void;
+    /**
+     * Activates a registered color scheme by name, or clears it with `null`/`'default'`.
+     * Orthogonal to the light/dark theme; persisted to localStorage.
+     */
+    setColorScheme(name: string | null): void;
+    /**
+     * Injects (or replaces) a color scheme's `[data-rt-scheme]` block at runtime —
+     * the JS twin of the `rt.color-scheme` Sass mixin. Browser-only (no-op on server;
+     * for SSR/brand-critical schemes prefer the Sass path). Does not activate the
+     * scheme — call {@link setColorScheme} afterwards.
+     */
+    registerColorScheme(name: string, ramp: RtColorSchemeRamp): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtThemeService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<RtThemeService>;
 }
@@ -1641,5 +1689,5 @@ declare class RtThemeDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<RtThemeDirective, "[rtTheme]", never, { "rtTheme": { "alias": "rtTheme"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, IAside, IModal, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, IRtActionBar, IRtSnackBar, ISideMenu, ITable, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_DARK_CLASS, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_ENUM, RT_THEME_STORAGE_KEY, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
-export type { AsideButtonsType, AsidePositions, ButtonAppearanceType, ButtonColorType, ButtonSizeType, IImageUploadFormat, IInfoBadgeSizeType, IRtuiTable, Icon, IconSideType, InfoBadgeType, MenuItemTrigger, ModalWindowSizeType, NameValueType, RtThemeType, Select, ToggleSizeType };
+export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, IAside, IModal, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, IRtActionBar, IRtSnackBar, ISideMenu, ITable, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_ACCENT_ROLE_ENUM, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_ENUM, RT_THEME_STORAGE_KEY, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
+export type { AsideButtonsType, AsidePositions, ButtonAppearanceType, ButtonColorType, ButtonSizeType, IImageUploadFormat, IInfoBadgeSizeType, IRtuiTable, Icon, IconSideType, InfoBadgeType, MenuItemTrigger, ModalWindowSizeType, NameValueType, RtAccentRole, RtColorSchemeRamp, RtThemeType, Select, ToggleSizeType };