npm - @rt-tools/ui-kit - Versions diffs - 0.0.16 → 0.0.20 - Mend

@rt-tools/ui-kit 0.0.16 → 0.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/src/styles/base/_color-scheme.scss ADDED Viewed

@@ -0,0 +1,86 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+@use './tokens' as tokens;
+/// ============================================================================
+/// Custom color schemes (brand palettes)
+/// ============================================================================
+///
+/// A color scheme overrides ONLY the accent-role indirection rows
+/// `--rt-color-{role}-{0..100}` (see `_tokens.scss`). The whole semantic accent
+/// tier (`--rt-bg/text/icon/border-accent-*`, hover/subtle/disabled, `--rt-border-focus`)
+/// re-derives from those rows — so a brand recolors with Δ0 effort and the
+/// component contract (semantic token names) stays untouched.
+///
+/// The emitted block is scoped to `[data-rt-scheme="<name>"]`, which the runtime
+/// (`RtThemeService.setColorScheme`) toggles on `<html>`. Because the scheme sets
+/// raw values, it overrides the default rows that carry the `--mat-sys-*` fallback
+/// → the scheme wins over an active Material theme.
+///
+/// Usage:
+///   @use '@rt-tools/ui-kit/src/styles/main' as rt;   // or the package's scss entry
+///   @include rt.color-scheme('teal', (
+///       primary: (20: #b3e3e1, 40: #5cb8b5, 60: #1a9d99, 100: #008582),
+///       brand:   (20: #e8e8e8, 100: #008582),
+///   ));
+///
+/// One tonal ramp per role serves both light and dark (M3-style): the mode picks
+/// the tone via `light-dark()` inside the semantic tier — schemes never duplicate
+/// that logic. `$modes` is accepted for forward-compatibility but a single ramp
+/// already covers every mode.
+/// Roles a scheme may override, with their valid tone steps (from the default ramps).
+$known-roles: tokens.$accent-roles;
+/// Validate a single role/ramp pair; @error with an actionable message on bad input.
+@function _validate-role($name, $role, $ramp) {
+    @if not map.has-key($known-roles, $role) {
+        @error 'rt.color-scheme("#{$name}"): unknown role "#{$role}". Allowed roles: #{map.keys($known-roles)}.';
+    }
+    @if meta.type-of($ramp) != 'map' {
+        @error 'rt.color-scheme("#{$name}"): role "#{$role}" must be a map of (tone: color), got #{meta.type-of($ramp)}.';
+    }
+    @each $step, $value in $ramp {
+        @if meta.type-of($step) != 'number' or not _is-integer-step($step) {
+            @error 'rt.color-scheme("#{$name}"): role "#{$role}" tone "#{$step}" must be an integer 0–100.';
+        }
+    }
+    @return true;
+}
+/// Tone steps must be integers within 0–100.
+@function _is-integer-step($step) {
+    @return $step >= 0 and $step <= 100 and ($step % 1 == 0);
+}
+/// Emit a named color scheme as a `[data-rt-scheme]` block (only raw `--rt-color-{role}-{N}` rows).
+///
+/// @param {String} $name   Scheme name, matched by `data-rt-scheme="<name>"`.
+/// @param {Map}    $roles  Map of `role: (tone: color, …)`. Roles ⊆ #{map.keys($known-roles)}.
+/// @param {List}   $modes  Reserved for forward-compat; one ramp already serves all modes.
+@mixin color-scheme($name, $roles, $modes: (light, dark)) {
+    @if meta.type-of($name) != 'string' {
+        @error 'rt.color-scheme: $name must be a string, got #{meta.type-of($name)}.';
+    }
+    @if meta.type-of($roles) != 'map' or list.length(map.keys($roles)) == 0 {
+        @error 'rt.color-scheme("#{$name}"): $roles must be a non-empty map of (role: ramp).';
+    }
+    @each $role, $ramp in $roles {
+        $ok: _validate-role($name, $role, $ramp);
+    }
+    // `:root[...]` (0,2,0) outranks the default `:root` rows (0,1,0) regardless of source order.
+    :root[data-rt-scheme='#{$name}'] {
+        @each $role, $ramp in $roles {
+            @each $step, $value in $ramp {
+                --rt-color-#{$role}-#{$step}: #{$value};
+            }
+        }
+    }
+}

package/src/styles/base/_mixin.scss CHANGED Viewed

@@ -1,12 +1,7 @@
+@use 'sass:color';
 @use 'sass:math';
 @use './variables' as vars;
-// css clr var generator
-// #{generateCssVar(red, 100)}: #eb5055;
-@function generateCssClrVar($color, $saturate) {
-    @return --#{vars.$styles-clr-prefix}-#{$color}-#{$saturate};
-}
 // css var generator
 // #{generateCssVar(table-base-cell, suffix-icon, size)}: 1rem;
 @function generateCssVar($component-name, $element, $style-token) {
@@ -16,9 +11,9 @@
 // convert hex to rgb values
 // #{convert-hex-to-rgb-values(#ab2727)}: 171, 39, 39;
 @function convert-hex-to-rgb-values($hex) {
-    $r: red($hex);
-    $g: green($hex);
-    $b: blue($hex);
+    $r: color.channel($hex, 'red', $space: rgb);
+    $g: color.channel($hex, 'green', $space: rgb);
+    $b: color.channel($hex, 'blue', $space: rgb);
     @return $r + ', ' + $g + ', ' + $b;
 }
@@ -26,6 +21,7 @@
 // px to rem
 // font-size: rem(16);
 $browser-context: 16;
 @function rem($valueRem, $context: $browser-context) {
     @return #{math.div($valueRem, $context)}rem;
 }
@@ -47,20 +43,21 @@ $browser-context: 16;
 @mixin flex-column-center {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 }
 @mixin visually-hidden {
     position: absolute;
+    overflow: hidden;
     width: 1px;
     height: 1px;
-    margin: -1px;
-    border: 0;
     padding: 0;
-    white-space: nowrap;
-    clip-path: inset(100%);
+    border: 0;
+    margin: -1px;
+    /* stylelint-disable-next-line property-no-deprecated -- legacy-browser leg of the visually-hidden pattern */
     clip: rect(0 0 0 0);
-    overflow: hidden;
+    clip-path: inset(100%);
     pointer-events: none;
+    white-space: nowrap;
 }

package/src/styles/base/_tokens.scss ADDED Viewed

@@ -0,0 +1,426 @@
+@use './variables' as vars;
+/// ============================================================================
+/// rt-tools Design Tokens v2
+/// ============================================================================
+///
+/// Two tiers + component tier, GMT-style:
+///   Tier 1  primitives  --rt-color-*                      raw values. NEVER use directly in components.
+///   Tier 2  semantic    --rt-{bg,text,icon,border}-*      role-based, adaptive via light-dark().
+///   Tier 3  component   --rt-<component>-<el>-<token>     per-component SCSS maps; must reference Tier 2
+///                                                         (raw primitives allowed only for intentionally
+///                                                         chromatic values, e.g. color-variant buttons).
+///
+/// Theming: light is the default. `.rt-dark` on <html>/<body> switches globally;
+/// `data-rt-theme="dark|light"` creates a nested local theme context on any element.
+/// Both work through `color-scheme` + light-dark() — no duplicated override blocks.
+///
+/// Angular Material hybrid: when the consuming app configures a Material theme
+/// (--mat-sys-* present), semantic tokens resolve to Material system colors;
+/// otherwise the own-palette fallback applies. Opt out at build time:
+///   @use 'rt-tools/src/styles/main' with ($tokens-use-material: false);
+///
+/// Rules (enforced by convention + review):
+///   - no HEX values in component SCSS;
+///   - components reference semantic tokens, semantic references primitives;
+///   - never skip the semantic tier.
+$use-material: true !default;
+/// Wrap a light/dark pair into light-dark(), optionally behind a --mat-sys-* fallback chain.
+@function t($light, $dark: null, $mat: null) {
+    $v: $light;
+    @if $dark {
+        $v: light-dark(#{$light}, #{$dark});
+    }
+    @if $mat and $use-material {
+        @return var(--mat-sys-#{$mat}, #{$v});
+    }
+    @return $v;
+}
+/* ============================== Tier 1: primitives ============================== */
+// Unified neutral scale (sorted by lightness, sourced from the legacy white/gray/black families)
+$neutral: (
+    0: #fff,
+    5: #f5f6f8,
+    10: #f3f3f3,
+    15: #eee,
+    20: #e8e8e8,
+    25: #e0e0e0,
+    30: #d1d1d1,
+    35: #ccc,
+    40: #a3a3a3,
+    60: #747474,
+    80: #323033,
+    100: #181818,
+);
+// Chromatic hues (steps preserved from the legacy palette)
+$hues: (
+    'red': (
+        10: #fdedee,
+        20: #efc0c1,
+        40: #f7b9bb,
+        60: #e88487,
+        80: #df6064,
+        100: #eb5055,
+    ),
+    'orange': (
+        5: #f6e4d9,
+        10: #e8cbbf,
+        20: #e1ba9e,
+        40: #e4a985,
+        60: #f1a05d,
+        70: #f2994a,
+        80: #ee7a34,
+        100: #ef7128,
+    ),
+    'blue': (
+        20: #eaedfc,
+        40: #b3ceef,
+        60: #6d96e8,
+        80: #4285f4,
+        100: #4284d7,
+    ),
+    'green': (
+        10: #e5f8f4,
+        20: #baf4e0,
+        40: #5dbfbc,
+        60: #46c4c0,
+        80: #21b18e,
+        100: #01af8d,
+    ),
+);
+// Base value per hue + brand
+$hue-base: (
+    'red': #eb5055,
+    'orange': #ef7128,
+    'blue': #4284d7,
+    '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(#fff, #1c1b1e, surface),
+    bg-base-elevated: t(#fff, #2a292d, surface-container),
+    bg-base-subtle: t(#f5f6f8, #232226),
+    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, #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} — 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(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(#fff, #181818, inverse-on-surface),
+    /* ---- text / static ---- */ text-static-light: #fff,
+    text-static-dark: #181818,
+    /* ---- 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(#fff, #181818),
+    /* ---- icon / static ---- */ icon-static-light: #fff,
+    icon-static-dark: #181818,
+    /* ---- 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(#ccc, #4a494e),
+    border-neutral-strong: t(#a3a3a3, #5c5b60, outline),
+    border-neutral-emphasis: t(#747474, #a3a3a3),
+    /* ---- 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(#fff, #eee),
+    control-checked: t(#323033, #e0e0e0),
+    /* ---- misc ---- */ scrollbar-thumb: t(#ccc, #4a494e),
+    scrollbar-thumb-hover: t(#a3a3a3, #5c5b60),
+    shadow-color: t(#747474, rgb(0 0 0 / 60%))
+);
+/* ============================== Foundations (mode-independent) ============================== */
+$spacing: (
+    0: 0,
+    2: 0.125rem,
+    4: 0.25rem,
+    6: 0.375rem,
+    8: 0.5rem,
+    12: 0.75rem,
+    16: 1rem,
+    20: 1.25rem,
+    24: 1.5rem,
+    32: 2rem,
+    40: 2.5rem,
+    48: 3rem,
+    56: 3.5rem,
+    64: 4rem,
+);
+$radius: (
+    xs: 0.25rem,
+    sm: 0.5rem,
+    md: 0.75rem,
+    lg: 1rem,
+    xl: 1.5rem,
+    2xl: 2rem,
+    full: 624.9375rem,
+);
+$font-size: (
+    xs: 0.75rem,
+    sm: 0.875rem,
+    md: 1rem,
+    lg: 1.25rem,
+    xl: 1.5rem,
+);
+$font-weight: (
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+);
+$shadow: (
+    sm: (
+        0 0.0625rem 0.25rem 0 rgb(0 0 0 / 12%),
+    ),
+    md: (
+        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,
+    overlay: 1040,
+    modal: 1060,
+    popover: 1080,
+    tooltip: 1100,
+);
+// informational only — media queries cannot read CSS vars, use vars.$device-* in SCSS
+$breakpoint: (
+    xs: vars.$device-xs,
+    sm: vars.$device-sm,
+    md: vars.$device-md,
+    lg: vars.$device-lg,
+    xl: vars.$device-xl,
+);
+/* ============================== Emission ============================== */
+:root {
+    color-scheme: light;
+    /* --- Tier 1: primitives --- */
+    @each $step, $value in $neutral {
+        --rt-color-neutral-#{$step}: #{$value};
+    }
+    @each $hue, $steps in $hues {
+        @each $step, $value in $steps {
+            --rt-color-#{$hue}-#{$step}: #{$value};
+        }
+    }
+    @each $hue, $value in $hue-base {
+        --rt-color-#{$hue}: #{$value};
+        // opacity scales via color-mix
+        @each $a in $opacity-steps {
+            --rt-color-#{$hue}-a#{$a}: color-mix(in srgb, #{$value} #{$a + '%'}, transparent);
+        }
+    }
+    // overlay scales (on-light darkens, on-dark lightens)
+    @each $a in $overlay-steps {
+        --rt-color-dark-a#{$a}: rgba(24, 24, 24, #{calc($a / 100)});
+        --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};
+    }
+    /* --- Foundations --- */
+    @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};
+    }
+}
+/* Theme switching: global class + nested local contexts (GMT data-theme analogue) */
+.rt-dark,
+[data-rt-theme='dark'] {
+    color-scheme: dark;
+}
+[data-rt-theme='light'] {
+    color-scheme: light;
+}
+/* 'auto' follows prefers-color-scheme */
+.rt-theme-auto {
+    color-scheme: light dark;
+}

package/src/styles/base/_variables.scss CHANGED Viewed

@@ -1,12 +1,9 @@
 /* Material Theme */
 $main-theme: light;
-$styles-clr-prefix: 'clr';
 $styles-prefix: 'rt';
 /* Base */
-$avalon-color: var(--clr-avalon);
-$base-accent: var(--clr-base-accent);
+$base-accent: var(--rt-text-accent-brand);
 /* Device Definitions */
 $device-xl: 1920px; // 120rem
@@ -19,16 +16,13 @@ $device-xs: 600px; // 37.5rem
 $base-fonts: var(--font-default);
 $base-font-weight: 400;
 $base-font-size: 1rem;
-$base-text-color: var(--clr-txt);
-/* Colors */
-$clr-red-100: #eb5055;
-$clr-red-10: #fdedee;
+$base-text-color: var(--rt-text-base-primary);
-$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(--clr-base-accent);
-$pagination-dynamic-clr: var(--clr-base-accent);
 $text-highlight-color: #0077bf;