@rt-tools/ui-kit 0.0.16 → 0.0.20

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)');
+        });
+    });
+});

package/src/styles/components/_action-bar.scss

@@ -15,9 +15,9 @@ $action-bar: (
         gap: 0.75rem,
         padding: 0.5rem 1rem,
         border-radius: 0.5rem,
-        color: var(--clr-white-100),
-        background-color: var(--clr-black-100),
-        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
+        color: var(--rt-text-base-inverse),
+        background-color: var(--rt-bg-base-inverse),
+        box-shadow: 0 0.5rem 1rem 0 var(--rt-shadow-color),
     ),
     bar-mobile: (
         gap: 0.5rem,
@@ -45,15 +45,15 @@ $action-bar: (
         padding: 0.325rem 0.5rem,
     ),
     action-hover: (
-        background-color: var(--clr-black-80),
+        background-color: var(--rt-bg-base-inverse-soft),
     ),
     action-menu: (
         gap: 0.5rem,
         padding: 0.5rem,
         border-radius: 0.5rem,
-        color: var(--clr-black-100),
-        background-color: var(--clr-white-100),
-        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
+        color: var(--rt-text-base-strong),
+        background-color: var(--rt-bg-base-base),
+        box-shadow: 0 0.5rem 1rem 0 var(--rt-shadow-color),
     ),
     action-menu-mobile: (
         gap: 0.25rem,
@@ -71,7 +71,7 @@ $action-bar: (
         padding: 0.325rem 0.5rem,
     ),
     action-menu-action-hover: (
-        background-color: var(--clr-black-40),
+        background-color: var(--rt-bg-base-emphasis-soft),
     ),
 );
 

package/src/styles/components/_button.scss

@@ -1,105 +1,113 @@
+/// @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;
 
 $button: (
     base: (
-        color: var(--clr-black-100),
+        color: var(--rt-color-neutral-100),
         font-family: var(--font-default),
     ),
     fab: (
-        color: var(--clr-black-60),
+        color: var(--rt-color-neutral-60),
     ),
     fab-hover: (
-        color: var(--clr-black-100),
+        color: var(--rt-color-neutral-100),
     ),
     text-hover: (
-        background: var(--clr-black-15),
+        background: var(--rt-color-neutral-15),
     ),
     text-focus: (
-        background: var(--clr-black-20),
+        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(--clr-black-60),
+        color: var(--rt-color-neutral-60),
     ),
     text-base-hover: (
-        color: var(--clr-black-100),
+        color: var(--rt-color-neutral-100),
     ),
     text-gray: (
-        color: var(--clr-black-60),
+        color: var(--rt-color-neutral-60),
     ),
     text-gray-hover: (
-        color: var(--clr-blue-60),
+        color: var(--rt-color-blue-60),
     ),
     text-blue: (
-        color: var(--clr-blue-100),
+        color: var(--rt-color-blue-100),
     ),
     text-blue-hover: (
-        color: var(--clr-black-100),
+        color: var(--rt-color-neutral-100),
     ),
     fill-base: (
-        background-color: var(--clr-black-100),
-        color: var(--clr-white-100),
+        background-color: var(--rt-color-neutral-100),
+        color: var(--rt-color-neutral-0),
     ),
     fill-blue: (
-        background-color: var(--clr-blue-10),
-        color: var(--clr-blue-100),
+        background-color: var(--rt-color-blue-20),
+        color: var(--rt-color-blue-100),
     ),
     fill-gray: (
-        background-color: var(--clr-gray-5),
-        color: var(--clr-black-40),
+        background-color: var(--rt-color-neutral-5),
+        color: var(--rt-color-neutral-40),
     ),
     fill-black: (
-        background-color: var(--clr-black-100),
-        color: var(--clr-white-100),
+        background-color: var(--rt-color-neutral-100),
+        color: var(--rt-color-neutral-0),
     ),
     fill-green: (
-        border: 1px solid color.scale(vars.$clr-green-80, $lightness: -10%),
-        color: var(--clr-white-100),
-        background-color: var(--clr-green-80),
+        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%),
-        color: var(--clr-green-100),
-        background-color: var(--clr-green-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%),
-        color: var(--clr-white-100),
-        background-color: vars.$clr-red-100,
+        border: 1px solid color.scale(vars.$btn-danger, $lightness: -10%),
+        color: var(--rt-color-neutral-0),
+        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%),
-        color: var(--clr-red-100),
-        background-color: var(--clr-red-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(--clr-blue-40),
+        border: 1px solid var(--rt-color-blue-40),
     ),
     outline-blue: (
-        color: var(--clr-blue-100),
+        color: var(--rt-color-blue-100),
     ),
     outline-base: (
-        color: var(--clr-black-100),
+        color: var(--rt-color-neutral-100),
     ),
     disabled: (
-        background-color: var(--clr-gray-5),
-        color: var(--clr-black-40),
+        background-color: var(--rt-color-neutral-5),
+        color: var(--rt-color-neutral-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/_checkbox.scss

@@ -8,26 +8,26 @@ $checkbox: (
     box: (
         width: 1rem,
         height: 1rem,
-        border: 0.125rem solid var(--clr-black-40),
+        border: 0.125rem solid var(--rt-border-neutral-strong),
         border-radius: 0.25rem,
-        background-color: var(--clr-white-100),
+        background-color: var(--rt-bg-base-base),
     ),
     box-active: (
         color: var(--mat-button-text-label-text-color),
     ),
     box-inactive: (
-        color: var(--clr-black-40),
+        color: var(--rt-text-base-disabled),
     ),
     label: (
         font-size: 1rem,
         font-weight: 500,
-        color: var(--clr-black-80),
+        color: var(--rt-text-base-soft),
     ),
     description: (
         margin-top: 0.125rem,
         font-size: 0.75rem,
         font-weight: 500,
-        color: var(--clr-black-40),
+        color: var(--rt-text-base-disabled),
     ),
 );
 

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

@@ -13,12 +13,12 @@ $dynamic-selector: (
     ),
     item-mover: (
         padding: 0 0.25rem 0 0,
-        border-right: 1px solid var(--clr-black-30),
+        border-right: 1px solid var(--rt-border-neutral-divider),
         margin-right: 0.75rem,
     ),
     item-control: (
         padding: 0 0.25rem 0 0.25rem,
-        border-right: 1px solid var(--clr-black-30),
+        border-right: 1px solid var(--rt-border-neutral-divider),
         gap: 0.5rem,
     ),
     item-control-last-child: (
@@ -26,13 +26,13 @@ $dynamic-selector: (
         border-right: none,
     ),
     item-control-button-active: (
-        color: var(--clr-red-100),
+        color: var(--rt-text-accent-danger),
     ),
     item-control-icon: (
         size: 1.125rem,
     ),
     item-drag-preview: (
-        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
+        box-shadow: 0 0.5rem 1rem 0 var(--rt-shadow-color),
     ),
 );
 
@@ -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);