@rt-tools/ui-kit 0.0.19 → 0.0.21

package/src/styles/base/_tokens.scss

@@ -31,11 +31,11 @@ $use-material: true !default;
 @function t($light, $dark: null, $mat: null) {
     $v: $light;
 
-    @if $dark != null {
+    @if $dark {
         $v: light-dark(#{$light}, #{$dark});
     }
 
-    @if $mat != null and $use-material {
+    @if $mat and $use-material {
         @return var(--mat-sys-#{$mat}, #{$v});
     }
 
@@ -46,14 +46,14 @@ $use-material: true !default;
 
 // Unified neutral scale (sorted by lightness, sourced from the legacy white/gray/black families)
 $neutral: (
-    0: #ffffff,
+    0: #fff,
     5: #f5f6f8,
     10: #f3f3f3,
-    15: #eeeeee,
+    15: #eee,
     20: #e8e8e8,
     25: #e0e0e0,
     30: #d1d1d1,
-    35: #cccccc,
+    35: #ccc,
     40: #a3a3a3,
     60: #747474,
     80: #323033,
@@ -105,103 +105,158 @@ $hue-base: (
     'green': #01af8d,
     'brand': #0d1c2b,
 );
-
 $opacity-steps: (5, 10, 20, 30, 40, 50, 60, 70, 80, 90);
 $overlay-steps: (5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90);
 
+/* ------------------------------ Accent-role ramps (indirection layer) ------------------------------ */
+// The semantic accent tier references ONLY these `--rt-color-{role}-{0..100}` rows — never raw hues.
+// A custom color scheme overrides just these rows (see `_color-scheme.scss`) and the entire
+// accent layer (bg/text/icon/border + hover/subtle/disabled/focus derivations) recolors with Δ0 effort.
+// ---
+// Defaults reproduce the historical own-palette byte-for-byte. Tones that previously mapped to a
+// Material system color carry the `--mat-sys-*` fallback INSIDE the tone (`t(..., null, $mat)`), so:
+//   - default render honors Material (as before);
+//   - a scheme override replaces the tone with a raw value → the scheme wins over Material.
+// `brand` is navy in light (100) / near-white in dark (20); both carry mat-sys-primary because the
+// original text/icon-accent-brand mapped to --mat-sys-primary.
+$accent-roles: (
+    'primary': (
+        20: t(#eaedfc, null, primary-container),
+        40: #b3ceef,
+        60: t(#6d96e8, null, primary),
+        100: t(#4284d7, null, primary),
+    ),
+    'info': (
+        20: #eaedfc,
+        80: #4285f4,
+        100: #4284d7,
+    ),
+    'success': (
+        10: #e5f8f4,
+        80: #21b18e,
+        100: #01af8d,
+    ),
+    'warning': (
+        10: #e8cbbf,
+        80: #ee7a34,
+        100: #ef7128,
+    ),
+    'danger': (
+        10: t(#fdedee, null, error-container),
+        60: #e88487,
+        100: t(#eb5055, null, error),
+    ),
+    'brand': (
+        20: t(#e8e8e8, null, primary),
+        100: t(#0d1c2b, null, primary),
+    ),
+);
+
 /* ============================== Tier 2: semantic ============================== */
 // NOTE: function calls in this map are evaluated when the module loads,
 // honoring a `with ($use-material: ...)` configuration.
 
 $semantic: (
-    /* ---- bg / base (adaptive) ---- */ bg-base-base: t(#ffffff, #1c1b1e, surface),
-    bg-base-elevated: t(#ffffff, #2a292d, surface-container),
+    /* ---- bg / base (adaptive) ---- */ bg-base-base: t(#fff, #1c1b1e, surface),
+    bg-base-elevated: t(#fff, #2a292d, surface-container),
     bg-base-subtle: t(#f5f6f8, #232226),
-    bg-base-hover: t(#f3f3f3, rgba(255, 255, 255, 0.06)),
-    bg-base-active: t(#eeeeee, rgba(255, 255, 255, 0.1)),
+    bg-base-hover: t(#f3f3f3, rgb(255 255 255 / 6%)),
+    bg-base-active: t(#eee, rgb(255 255 255 / 10%)),
     bg-base-strong: t(#e0e0e0, #3f3e43),
     bg-base-emphasis: t(#747474, #a3a3a3),
     bg-base-emphasis-soft: t(#a3a3a3, #747474),
     bg-base-inverse: t(#181818, #f3f3f3, inverse-surface),
-    bg-base-inverse-soft: t(#323033, #eeeeee),
-    bg-base-overlay: t(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.6)),
-    /* ---- bg / static ---- */ bg-static-light: #ffffff,
+    bg-base-inverse-soft: t(#323033, #eee),
+    bg-base-overlay: t(rgb(0 0 0 / 32%), rgb(0 0 0 / 60%)),
+    /* ---- bg / static ---- */ bg-static-light: #fff,
     bg-static-dark: #181818,
     bg-static-none: transparent,
-    /* ---- bg / accent: {subtle, solid, hover, disabled} (simplified GMT scale) ---- */
-    bg-accent-primary-subtle: t(#eaedfc, color-mix(in srgb, #4284d7 18%, #1c1b1e), primary-container),
-    bg-accent-primary-solid: t(#4284d7, #4284d7, primary),
-    bg-accent-primary-hover: t(color-mix(in srgb, #4284d7 90%, #000000), color-mix(in srgb, #4284d7 90%, #ffffff)),
-    bg-accent-primary-disabled: color-mix(in srgb, #4284d7 38%, transparent),
-    bg-accent-success-subtle: t(#e5f8f4, color-mix(in srgb, #01af8d 18%, #1c1b1e)),
-    bg-accent-success-solid: #21b18e,
-    bg-accent-success-hover: t(color-mix(in srgb, #21b18e 90%, #000000), color-mix(in srgb, #21b18e 90%, #ffffff)),
-    bg-accent-success-disabled: color-mix(in srgb, #21b18e 38%, transparent),
-    bg-accent-warning-subtle: t(#e8cbbf, color-mix(in srgb, #ef7128 18%, #1c1b1e)),
-    bg-accent-warning-solid: #ee7a34,
-    bg-accent-warning-hover: t(color-mix(in srgb, #ee7a34 90%, #000000), color-mix(in srgb, #ee7a34 90%, #ffffff)),
-    bg-accent-warning-disabled: color-mix(in srgb, #ee7a34 38%, transparent),
-    bg-accent-danger-subtle: t(#fdedee, color-mix(in srgb, #eb5055 18%, #1c1b1e), error-container),
-    bg-accent-danger-solid: t(#eb5055, #eb5055, error),
-    bg-accent-danger-hover: t(color-mix(in srgb, #eb5055 90%, #000000), color-mix(in srgb, #eb5055 90%, #ffffff)),
-    bg-accent-danger-disabled: color-mix(in srgb, #eb5055 38%, transparent),
-    bg-accent-info-subtle: t(#eaedfc, color-mix(in srgb, #4284d7 18%, #1c1b1e)),
-    bg-accent-info-solid: #4284d7,
-    bg-accent-info-hover: t(color-mix(in srgb, #4284d7 90%, #000000), color-mix(in srgb, #4284d7 90%, #ffffff)),
-    bg-accent-info-disabled: color-mix(in srgb, #4284d7 38%, transparent),
-    bg-accent-neutral-subtle: t(#f3f3f3, rgba(255, 255, 255, 0.06)),
+    /* ---- bg / accent: {subtle, solid, hover, disabled} — driven by --rt-color-{role}-{N} ---- */
+    bg-accent-primary-subtle: t(var(--rt-color-primary-20), color-mix(in srgb, var(--rt-color-primary-100) 18%, #1c1b1e)),
+    bg-accent-primary-solid: var(--rt-color-primary-100),
+    bg-accent-primary-hover: t(
+            color-mix(in srgb, var(--rt-color-primary-100) 90%, #000),
+            color-mix(in srgb, var(--rt-color-primary-100) 90%, #fff)
+        ),
+    bg-accent-primary-disabled: color-mix(in srgb, var(--rt-color-primary-100) 38%, transparent),
+    bg-accent-success-subtle: t(var(--rt-color-success-10), color-mix(in srgb, var(--rt-color-success-100) 18%, #1c1b1e)),
+    bg-accent-success-solid: var(--rt-color-success-80),
+    bg-accent-success-hover: t(
+            color-mix(in srgb, var(--rt-color-success-80) 90%, #000),
+            color-mix(in srgb, var(--rt-color-success-80) 90%, #fff)
+        ),
+    bg-accent-success-disabled: color-mix(in srgb, var(--rt-color-success-80) 38%, transparent),
+    bg-accent-warning-subtle: t(var(--rt-color-warning-10), color-mix(in srgb, var(--rt-color-warning-100) 18%, #1c1b1e)),
+    bg-accent-warning-solid: var(--rt-color-warning-80),
+    bg-accent-warning-hover: t(
+            color-mix(in srgb, var(--rt-color-warning-80) 90%, #000),
+            color-mix(in srgb, var(--rt-color-warning-80) 90%, #fff)
+        ),
+    bg-accent-warning-disabled: color-mix(in srgb, var(--rt-color-warning-80) 38%, transparent),
+    bg-accent-danger-subtle: t(var(--rt-color-danger-10), color-mix(in srgb, var(--rt-color-danger-100) 18%, #1c1b1e)),
+    bg-accent-danger-solid: var(--rt-color-danger-100),
+    bg-accent-danger-hover: t(
+            color-mix(in srgb, var(--rt-color-danger-100) 90%, #000),
+            color-mix(in srgb, var(--rt-color-danger-100) 90%, #fff)
+        ),
+    bg-accent-danger-disabled: color-mix(in srgb, var(--rt-color-danger-100) 38%, transparent),
+    bg-accent-info-subtle: t(var(--rt-color-info-20), color-mix(in srgb, var(--rt-color-info-100) 18%, #1c1b1e)),
+    bg-accent-info-solid: var(--rt-color-info-100),
+    bg-accent-info-hover: t(color-mix(in srgb, var(--rt-color-info-100) 90%, #000), color-mix(in srgb, var(--rt-color-info-100) 90%, #fff)),
+    bg-accent-info-disabled: color-mix(in srgb, var(--rt-color-info-100) 38%, transparent),
+    bg-accent-neutral-subtle: t(#f3f3f3, rgb(255 255 255 / 6%)),
     bg-accent-neutral-solid: t(#747474, #a3a3a3),
     bg-accent-neutral-hover: t(#a3a3a3, #747474),
-    bg-accent-neutral-disabled: t(rgba(116, 116, 116, 0.38), rgba(163, 163, 163, 0.38)),
-    /* ---- text / base (adaptive) ---- */ text-base-primary: t(rgba(0, 0, 0, 0.87), rgba(255, 255, 255, 0.87), on-surface),
+    bg-accent-neutral-disabled: t(rgb(116 116 116 / 38%), rgb(163 163 163 / 38%)),
+    /* ---- text / base (adaptive) ---- */ text-base-primary: t(rgb(0 0 0 / 87%), rgb(255 255 255 / 87%), on-surface),
     text-base-strong: t(#181818, #f3f3f3),
     text-base-soft: t(#323033, #e0e0e0),
     text-base-secondary: t(#747474, #a3a3a3, on-surface-variant),
     text-base-disabled: t(#a3a3a3, #747474),
-    text-base-inverse: t(#ffffff, #181818, inverse-on-surface),
-    /* ---- text / static ---- */ text-static-light: #ffffff,
+    text-base-inverse: t(#fff, #181818, inverse-on-surface),
+    /* ---- text / static ---- */ text-static-light: #fff,
     text-static-dark: #181818,
-    /* ---- text / accent ---- */ text-accent-brand: t(#0d1c2b, #e8e8e8, primary),
-    text-accent-primary: t(#4284d7, #6d96e8, primary),
-    text-accent-success: #01af8d,
-    text-accent-success-soft: #21b18e,
-    text-accent-warning: #ef7128,
-    text-accent-warning-soft: #ee7a34,
-    text-accent-danger: t(#eb5055, #eb5055, error),
-    text-accent-danger-soft: #e88487,
-    text-accent-info: #4284d7,
-    text-accent-info-soft: #4285f4,
+    /* ---- text / accent ---- */ text-accent-brand: t(var(--rt-color-brand-100), var(--rt-color-brand-20)),
+    text-accent-primary: t(var(--rt-color-primary-100), var(--rt-color-primary-60)),
+    text-accent-success: var(--rt-color-success-100),
+    text-accent-success-soft: var(--rt-color-success-80),
+    text-accent-warning: var(--rt-color-warning-100),
+    text-accent-warning-soft: var(--rt-color-warning-80),
+    text-accent-danger: var(--rt-color-danger-100),
+    text-accent-danger-soft: var(--rt-color-danger-60),
+    text-accent-info: var(--rt-color-info-100),
+    text-accent-info-soft: var(--rt-color-info-80),
     /* ---- icon / neutral (adaptive) ---- */ icon-neutral-default: t(#323033, #e0e0e0),
     icon-neutral-soft: t(#747474, #a3a3a3),
     icon-neutral-disabled: t(#a3a3a3, #747474),
-    icon-neutral-inverse: t(#ffffff, #181818),
-    /* ---- icon / static ---- */ icon-static-light: #ffffff,
+    icon-neutral-inverse: t(#fff, #181818),
+    /* ---- icon / static ---- */ icon-static-light: #fff,
     icon-static-dark: #181818,
-    /* ---- icon / accent ---- */ icon-accent-brand: t(#0d1c2b, #e8e8e8, primary),
-    icon-accent-primary: t(#4284d7, #6d96e8, primary),
-    icon-accent-success: #01af8d,
-    icon-accent-warning: #ef7128,
-    icon-accent-danger: t(#eb5055, #eb5055, error),
-    icon-accent-info: #4284d7,
+    /* ---- icon / accent ---- */ icon-accent-brand: t(var(--rt-color-brand-100), var(--rt-color-brand-20)),
+    icon-accent-primary: t(var(--rt-color-primary-100), var(--rt-color-primary-60)),
+    icon-accent-success: var(--rt-color-success-100),
+    icon-accent-warning: var(--rt-color-warning-100),
+    icon-accent-danger: var(--rt-color-danger-100),
+    icon-accent-info: var(--rt-color-info-100),
     /* ---- border / neutral (adaptive) ---- */ border-neutral-subtle: t(#e8e8e8, #2e2d31),
     border-neutral-default: t(#e0e0e0, #3f3e43, outline-variant),
     border-neutral-medium: t(#d1d1d1, #4a494e),
-    border-neutral-divider: t(#cccccc, #4a494e),
+    border-neutral-divider: t(#ccc, #4a494e),
     border-neutral-strong: t(#a3a3a3, #5c5b60, outline),
     border-neutral-emphasis: t(#747474, #a3a3a3),
-    /* ---- border / accent ---- */ border-accent-primary: t(#4284d7, #6d96e8, primary),
-    border-accent-success: #01af8d,
-    border-accent-warning: #ef7128,
-    border-accent-danger: t(#eb5055, #eb5055, error),
-    border-accent-danger-soft: #e88487,
-    border-accent-info: #4284d7,
-    border-focus: t(#b3ceef, #6d96e8),
+    /* ---- border / accent ---- */ border-accent-primary: t(var(--rt-color-primary-100), var(--rt-color-primary-60)),
+    border-accent-success: var(--rt-color-success-100),
+    border-accent-warning: var(--rt-color-warning-100),
+    border-accent-danger: var(--rt-color-danger-100),
+    border-accent-danger-soft: var(--rt-color-danger-60),
+    border-accent-info: var(--rt-color-info-100),
+    border-focus: t(var(--rt-color-primary-40), var(--rt-color-primary-60)),
     /* ---- form controls (rt extension) ---- */ control-track: t(#e8e8e8, #4a494e),
-    control-thumb: t(#ffffff, #eeeeee),
+    control-thumb: t(#fff, #eee),
     control-checked: t(#323033, #e0e0e0),
-    /* ---- misc ---- */ scrollbar-thumb: t(#cccccc, #4a494e),
+    /* ---- misc ---- */ scrollbar-thumb: t(#ccc, #4a494e),
     scrollbar-thumb-hover: t(#a3a3a3, #5c5b60),
-    shadow-color: t(#747474, rgba(0, 0, 0, 0.6))
+    shadow-color: t(#747474, rgb(0 0 0 / 60%))
 );
 
 /* ============================== Foundations (mode-independent) ============================== */
@@ -222,7 +277,6 @@ $spacing: (
     56: 3.5rem,
     64: 4rem,
 );
-
 $radius: (
     xs: 0.25rem,
     sm: 0.5rem,
@@ -232,7 +286,6 @@ $radius: (
     2xl: 2rem,
     full: 624.9375rem,
 );
-
 $font-size: (
     xs: 0.75rem,
     sm: 0.875rem,
@@ -240,32 +293,28 @@ $font-size: (
     lg: 1.25rem,
     xl: 1.5rem,
 );
-
 $font-weight: (
     regular: 400,
     medium: 500,
     semibold: 600,
     bold: 700,
 );
-
 $shadow: (
     sm: (
-        0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.12),
+        0 0.0625rem 0.25rem 0 rgb(0 0 0 / 12%),
     ),
     md: (
-        0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.14),
+        0 0.25rem 0.5rem 0 rgb(0 0 0 / 14%),
     ),
     lg: (
         0 0.5rem 1rem 0 var(--rt-shadow-color),
     ),
 );
-
 $transition: (
     fast: 0.15s ease-in-out,
     base: 0.25s ease-in-out,
     slow: 0.4s ease-in-out,
 );
-
 $z-index: (
     dropdown: 1000,
     sticky: 1020,
@@ -315,6 +364,13 @@ $breakpoint: (
         --rt-color-light-a#{$a}: rgba(255, 255, 255, #{calc($a / 100)});
     }
 
+    // accent-role ramps (indirection layer) — overridable per color scheme
+    @each $role, $tones in $accent-roles {
+        @each $step, $value in $tones {
+            --rt-color-#{$role}-#{$step}: #{$value};
+        }
+    }
+
     /* --- Tier 2: semantic --- */
     @each $token, $value in $semantic {
         --rt-#{$token}: #{$value};
@@ -324,50 +380,34 @@ $breakpoint: (
     @each $token, $value in $spacing {
         --rt-spacing-#{$token}: #{$value};
     }
+
     @each $token, $value in $radius {
         --rt-radius-#{$token}: #{$value};
     }
+
     @each $token, $value in $font-size {
         --rt-font-size-#{$token}: #{$value};
     }
+
     @each $token, $value in $font-weight {
         --rt-font-weight-#{$token}: #{$value};
     }
+
     @each $token, $value in $shadow {
         --rt-shadow-#{$token}: #{$value};
     }
+
     @each $token, $value in $transition {
         --rt-transition-#{$token}: #{$value};
     }
+
     @each $token, $value in $z-index {
         --rt-z-index-#{$token}: #{$value};
     }
+
     @each $token, $value in $breakpoint {
         --rt-breakpoint-#{$token}: #{$value};
     }
-
-    /* --- 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; // palette outlier, kept verbatim
-    --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);
-    @each $hue, $steps in $hues {
-        @each $step, $value in $steps {
-            --clr-#{$hue}-#{$step}: var(--rt-color-#{$hue}-#{$step});
-        }
-    }
-    --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/src/styles/base/_variables.scss

@@ -1,11 +1,8 @@
 /* Material Theme */
 $main-theme: light;
-
-$styles-clr-prefix: 'clr';
 $styles-prefix: 'rt';
 
 /* Base */
-$avalon-color: var(--clr-avalon);
 $base-accent: var(--rt-text-accent-brand);
 
 /* Device Definitions */
@@ -21,14 +18,11 @@ $base-font-weight: 400;
 $base-font-size: 1rem;
 $base-text-color: var(--rt-text-base-primary);
 
-/* Colors */
-$clr-red-100: #eb5055;
-$clr-red-10: #fdedee;
-
-$clr-green-80: #00b894;
-$clr-green-10: #e5f8f4;
+/* Button palette seeds (static — fed to sass color.scale() for hover/active states) */
+$btn-danger: #eb5055;
+$btn-danger-soft: #fdedee;
+$btn-success: #00b894; // outlier: not on the --rt-color-green scale
+$btn-success-soft: #e5f8f4;
 
 /* Components */
-$side-panel-dynamic-clr: var(--rt-text-accent-brand);
-$pagination-dynamic-clr: var(--rt-text-accent-brand);
 $text-highlight-color: #0077bf;

package/src/styles/color-scheme.spec.ts

@@ -0,0 +1,236 @@
+import * as path from 'path';
+import * as sass from 'sass';
+
+/**
+ * Build-time guarantees for the custom color-scheme mechanism:
+ *   1. Δ0 — moving the accent tier onto the `--rt-color-{role}-{N}` indirection
+ *      keeps every accent semantic token byte-for-byte identical (own palette).
+ *   2. The `rt.color-scheme` Sass mixin emits a scoped `[data-rt-scheme]` block.
+ *   3. Input validation rejects unknown roles / out-of-range tones.
+ *   4. The teal case: a custom teal ramp drives `--rt-bg-accent-primary-solid` to teal.
+ */
+
+const STYLES_DIR: string = __dirname;
+
+/** Frozen resolved (own-palette) values of every accent token BEFORE the indirection refactor. */
+const BASELINE: Record<string, string> = {
+    '--rt-bg-accent-primary-subtle': 'light-dark(#eaedfc, color-mix(in srgb, #4284d7 18%, #1c1b1e))',
+    '--rt-bg-accent-primary-solid': '#4284d7',
+    '--rt-bg-accent-primary-hover': 'light-dark(color-mix(in srgb, #4284d7 90%, #000), color-mix(in srgb, #4284d7 90%, #fff))',
+    '--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%, #000), color-mix(in srgb, #21b18e 90%, #fff))',
+    '--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%, #000), color-mix(in srgb, #ee7a34 90%, #fff))',
+    '--rt-bg-accent-warning-disabled': 'color-mix(in srgb, #ee7a34 38%, transparent)',
+    '--rt-bg-accent-danger-subtle': 'light-dark(#fdedee, color-mix(in srgb, #eb5055 18%, #1c1b1e))',
+    '--rt-bg-accent-danger-solid': '#eb5055',
+    '--rt-bg-accent-danger-hover': 'light-dark(color-mix(in srgb, #eb5055 90%, #000), color-mix(in srgb, #eb5055 90%, #fff))',
+    '--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%, #000), color-mix(in srgb, #4284d7 90%, #fff))',
+    '--rt-bg-accent-info-disabled': 'color-mix(in srgb, #4284d7 38%, transparent)',
+    '--rt-text-accent-brand': 'light-dark(#0d1c2b, #e8e8e8)',
+    '--rt-text-accent-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': '#eb5055',
+    '--rt-text-accent-danger-soft': '#e88487',
+    '--rt-text-accent-info': '#4284d7',
+    '--rt-text-accent-info-soft': '#4285f4',
+    '--rt-icon-accent-brand': 'light-dark(#0d1c2b, #e8e8e8)',
+    '--rt-icon-accent-primary': 'light-dark(#4284d7, #6d96e8)',
+    '--rt-icon-accent-success': '#01af8d',
+    '--rt-icon-accent-warning': '#ef7128',
+    '--rt-icon-accent-danger': '#eb5055',
+    '--rt-icon-accent-info': '#4284d7',
+    '--rt-border-accent-primary': 'light-dark(#4284d7, #6d96e8)',
+    '--rt-border-accent-success': '#01af8d',
+    '--rt-border-accent-warning': '#ef7128',
+    '--rt-border-accent-danger': '#eb5055',
+    '--rt-border-accent-danger-soft': '#e88487',
+    '--rt-border-accent-info': '#4284d7',
+    '--rt-border-focus': 'light-dark(#b3ceef, #6d96e8)',
+};
+
+/** Resolve `var(--mat-sys-X, FALLBACK)` to its fallback (own-palette, no Material configured). */
+function stripMat(input: string): string {
+    let value: string = input;
+    let index: number = value.indexOf('var(--mat-sys-');
+
+    while (index >= 0) {
+        let depth: number = 0;
+        let j: number = index + 4;
+
+        for (; j < value.length; j++) {
+            if (value[j] === '(') {
+                depth++;
+            } else if (value[j] === ')') {
+                if (depth === 0) {
+                    break;
+                }
+                depth--;
+            }
+        }
+
+        const inner: string = value.slice(index + 4, j);
+        const comma: number = inner.indexOf(',');
+        value = value.slice(0, index) + inner.slice(comma + 1).trim() + value.slice(j + 1);
+        index = value.indexOf('var(--mat-sys-');
+    }
+
+    return value;
+}
+
+/** Collapse `light-dark(X, X)` to `X` (identical branches render the same in both modes). */
+function normalize(input: string): string {
+    let value: string = input.replace(/\s+/g, ' ').trim();
+    let prev: string = '';
+
+    while (value !== prev) {
+        prev = value;
+        value = value.replace(/light-dark\(\s*([^,()]+?)\s*,\s*\1\s*\)/g, '$1');
+    }
+
+    return value.replace(/\s+/g, ' ').trim();
+}
+
+/** Extract `--name: value;` declarations matching a name pattern from compiled CSS. */
+function extractDeclarations(css: string, namePattern: string): Record<string, string> {
+    const out: Record<string, string> = {};
+    const re: RegExp = new RegExp(`(${namePattern}):\\s*([^;]+);`, 'g');
+    let match: RegExpExecArray | null = re.exec(css);
+
+    while (match !== null) {
+        out[match[1]] = match[2].trim();
+        match = re.exec(css);
+    }
+
+    return out;
+}
+
+function compileTokens(): string {
+    return sass.compile(path.join(STYLES_DIR, 'tokens.scss')).css;
+}
+
+function compileWithMixin(body: string): sass.CompileResult {
+    return sass.compileString(`@use 'main' as rt;\n${body}`, { loadPaths: [STYLES_DIR] });
+}
+
+describe('rt-tools color schemes', () => {
+    describe('Δ0 regression — accent indirection keeps the own palette byte-for-byte', () => {
+        it('every accent semantic token resolves to its pre-refactor value', () => {
+            const css: string = compileTokens();
+            const ramp: Record<string, string> = extractDeclarations(css, '--rt-color-(?:primary|info|success|warning|danger|brand)-\\d+');
+            const semantic: Record<string, string> = extractDeclarations(
+                css,
+                '--rt-(?:bg|text|icon|border)-accent[\\w-]*|--rt-border-focus'
+            );
+
+            const resolveRamp: (value: string) => string = (value: string): string => {
+                let resolved: string = value;
+                let prev: string = '';
+
+                while (resolved !== prev) {
+                    prev = resolved;
+                    for (const key of Object.keys(ramp)) {
+                        resolved = resolved.split(`var(${key})`).join(stripMat(ramp[key]));
+                    }
+                }
+
+                return normalize(stripMat(resolved));
+            };
+
+            for (const token of Object.keys(BASELINE)) {
+                expect(semantic[token]).toBeDefined();
+                expect(resolveRamp(semantic[token])).toBe(BASELINE[token]);
+            }
+        });
+    });
+
+    describe('Material hybrid — default honors --mat-sys-*, a scheme overrides it', () => {
+        it('default ramp tones carry the --mat-sys-* fallback where the original token did', () => {
+            const ramp: Record<string, string> = extractDeclarations(
+                compileTokens(),
+                '--rt-color-(?:primary|info|success|warning|danger|brand)-\\d+'
+            );
+
+            // tones that mapped to a Material system color carry the fallback (default honors Material)
+            expect(ramp['--rt-color-primary-100']).toBe('var(--mat-sys-primary, #4284d7)');
+            expect(ramp['--rt-color-primary-20']).toBe('var(--mat-sys-primary-container, #eaedfc)');
+            expect(ramp['--rt-color-danger-100']).toBe('var(--mat-sys-error, #eb5055)');
+            expect(ramp['--rt-color-brand-100']).toBe('var(--mat-sys-primary, #0d1c2b)');
+
+            // roles with no Material mapping stay raw — and a scheme overriding ANY tone with a raw
+            // value drops the fallback entirely, so the scheme wins over an active Material theme.
+            expect(ramp['--rt-color-info-100']).toBe('#4284d7');
+            expect(ramp['--rt-color-success-100']).toBe('#01af8d');
+            expect(ramp['--rt-color-warning-100']).toBe('#ef7128');
+        });
+    });
+
+    describe('dark mode — a scheme drives both modes via distinct ramp tones', () => {
+        it('accent tokens pick tone-100 in light and tone-60 in dark (scheme controls each)', () => {
+            const semantic: Record<string, string> = extractDeclarations(
+                compileTokens(),
+                '--rt-text-accent-primary|--rt-border-accent-primary|--rt-icon-accent-primary'
+            );
+
+            // light-dark(primary-100, primary-60): the kit fixes WHICH tone per mode; the scheme
+            // supplies the VALUE of each tone → a scheme can set a different dark tone (tone-60) than light.
+            for (const token of Object.keys(semantic)) {
+                expect(semantic[token]).toContain('var(--rt-color-primary-100)');
+                expect(semantic[token]).toContain('var(--rt-color-primary-60)');
+                expect(semantic[token].indexOf('primary-100')).toBeLessThan(semantic[token].indexOf('primary-60'));
+            }
+        });
+    });
+
+    describe('rt.color-scheme mixin', () => {
+        it('emits a scoped [data-rt-scheme] block with only raw role rows', () => {
+            const css: string = compileWithMixin(
+                '@include rt.color-scheme("teal", (primary: (20: #b3e3e1, 100: #008582), brand: (100: #008582)));'
+            ).css;
+
+            const block: string = css.slice(css.indexOf('[data-rt-scheme=teal]'));
+
+            expect(block).toContain('[data-rt-scheme=teal]');
+            expect(block).toContain('--rt-color-primary-100: #008582');
+            expect(block).toContain('--rt-color-primary-20: #b3e3e1');
+            expect(block).toContain('--rt-color-brand-100: #008582');
+            // schemes never duplicate the semantic derivation layer
+            expect(block).not.toContain('--rt-bg-accent-primary-solid:');
+        });
+
+        it('rejects an unknown role', () => {
+            expect(() => compileWithMixin('@include rt.color-scheme("x", (foo: (100: #000000)));')).toThrow(/unknown role/i);
+        });
+
+        it('rejects an out-of-range tone', () => {
+            expect(() => compileWithMixin('@include rt.color-scheme("x", (primary: (150: #000000)));')).toThrow(/integer 0–100/i);
+        });
+
+        it('rejects an empty role map', () => {
+            expect(() => compileWithMixin('@include rt.color-scheme("x", ());')).toThrow(/non-empty map/i);
+        });
+    });
+
+    describe('teal reference case', () => {
+        it('a teal primary ramp recolors --rt-bg-accent-primary-solid to teal', () => {
+            const css: string = compileWithMixin(
+                '@include rt.color-scheme("teal", (primary: (20: #b3e3e1, 40: #5cb8b5, 60: #1a9d99, 100: #008582)));'
+            ).css;
+
+            const scheme: Record<string, string> = extractDeclarations(css, '--rt-color-primary-\\d+');
+            // bg-accent-primary-solid === var(--rt-color-primary-100); under the teal scheme that is #008582
+            expect(scheme['--rt-color-primary-100']).toBe('#008582');
+            expect(normalize(stripMat(css.match(/--rt-bg-accent-primary-solid:\s*([^;]+);/)![1]))).toBe('var(--rt-color-primary-100)');
+        });
+    });
+});