@rt-tools/ui-kit 0.0.19 → 0.0.21

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

@@ -9,10 +9,11 @@ import { MatDrawer } from '@angular/material/sidenav';
 import { OverlayRef, ComponentType, ConnectedPosition, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { ComponentType as ComponentType$1 } from '@angular/cdk/portal';
 import { HttpErrorResponse } from '@angular/common/http';
-import { MatFormFieldAppearance } from '@angular/material/form-field';
-import { PageModel, SortModel, FilterOperatorType, FilterModel, FILTER_OPERATOR_TYPE_ENUM, POSITION_ENUM, OSTypes } from '@rt-tools/utils';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import * as i1 from '@angular/material/tooltip';
 import { TooltipPosition } from '@angular/material/tooltip';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { PageModel, SortModel, FilterOperatorType, FilterModel, FILTER_OPERATOR_TYPE_ENUM, POSITION_ENUM, OSTypes } from '@rt-tools/utils';
 import { AnimationPlayer, AnimationTriggerMetadata } from '@angular/animations';
 import { MatSnackBarConfig, MatSnackBarRef } from '@angular/material/snack-bar';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
@@ -282,39 +283,52 @@ declare class RtuiAsideContainerComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<RtuiAsideContainerComponent, "rtui-aside-container", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "isMobile": { "alias": "isMobile"; "required": true; "isSignal": true; }; "isSubmitButtonDisabled": { "alias": "isSubmitButtonDisabled"; "required": true; "isSignal": true; }; "isFooterShown": { "alias": "isFooterShown"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "isRequestErrorShown": { "alias": "isRequestErrorShown"; "required": false; "isSignal": true; }; "headerActionsButtons": { "alias": "headerActionsButtons"; "required": false; "isSignal": true; }; "requestError": { "alias": "requestError"; "required": false; "isSignal": true; }; "submitButtonTitle": { "alias": "submitButtonTitle"; "required": false; "isSignal": true; }; "cancelButtonTitle": { "alias": "cancelButtonTitle"; "required": false; "isSignal": true; }; "submitButtonTooltip": { "alias": "submitButtonTooltip"; "required": false; "isSignal": true; }; }, { "submitAction": "submitAction"; "cancelAction": "cancelAction"; "headerAction": "headerAction"; }, ["headerTpl"], ["*"], true, never>;
 }
 
-declare class RtuiRoundIconButtonComponent {
-    icon: InputSignal<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RtuiRoundIconButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtuiRoundIconButtonComponent, "rtui-round-icon-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+type RtuiIconSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '3xl';
+type RtuiIconThemeType = 'inherit' | 'primary' | 'primary-strong' | 'neutral' | 'disabled' | 'muted' | 'white' | 'danger' | 'success';
+declare class RtuiIconComponent {
+    #private;
+    protected readonly fontLoaded: Signal<boolean>;
+    protected readonly hostClasses: Signal<string>;
+    readonly size: InputSignal<RtuiIconSizeType>;
+    readonly theme: InputSignal<RtuiIconThemeType>;
+    readonly glyph: InputSignalWithTransform<string, unknown>;
+    readonly outlined: InputSignalWithTransform<boolean, BooleanInput>;
+    readonly rotate: InputSignalWithTransform<boolean, BooleanInput>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<RtuiIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtuiIconComponent, "rtui-icon", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "glyph": { "alias": "glyph"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "rotate": { "alias": "rotate"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.MatTooltip; inputs: { "matTooltip": "tooltip"; "matTooltipPosition": "tooltipPosition"; "matTooltipDisabled": "tooltipDisabled"; }; outputs: {}; }]>;
 }
 
-declare enum BUTTON_SIZE {
-    SMALL = "sm",
-    MEDIUM = "md",
-    LARGE = "lg",
-    FULL = "full"
-}
-type ButtonSizeType = BUTTON_SIZE.SMALL | BUTTON_SIZE.MEDIUM | BUTTON_SIZE.LARGE | BUTTON_SIZE.FULL;
-declare enum BUTTON_COLOR {
-    ACCENT = "accent",
-    SUCCESS = "success",
-    SECONDARY = "secondary",
-    ERROR = "error",
-    WARNING = "warning"
-}
-type ButtonColorType = BUTTON_COLOR.ACCENT | BUTTON_COLOR.SUCCESS | BUTTON_COLOR.ERROR | BUTTON_COLOR.WARNING | BUTTON_COLOR.SECONDARY;
-declare enum BUTTON_APPEARANCE {
-    OUTLINE = "outline",
-    LIGHT = "light"
+declare namespace IRtuiButton {
+    type Type = 'icon' | 'fab' | 'pill';
+    type Variant = 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'accent';
+    type Size = 'xs' | 'sm' | 'md' | 'lg';
+    type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+    type Appearance = 'solid' | 'outline' | 'light' | 'text';
+    type IconPosition = 'start' | 'end';
 }
-type ButtonAppearanceType = BUTTON_APPEARANCE.OUTLINE | BUTTON_APPEARANCE.LIGHT;
 declare class RtuiButtonComponent {
-    readonly size: InputSignal<ButtonSizeType>;
-    readonly color: InputSignal<ButtonColorType>;
-    readonly appearance: InputSignal<Nullable<ButtonAppearanceType>>;
-    readonly modifierClass: Signal<string>;
+    protected readonly resolvedIconSize: Signal<RtuiIconSizeType>;
+    protected readonly spinnerSize: Signal<number>;
+    protected readonly modifiers: Signal<Record<string, boolean>>;
+    readonly type: InputSignal<IRtuiButton.Type>;
+    readonly variant: InputSignal<IRtuiButton.Variant>;
+    readonly appearance: InputSignal<IRtuiButton.Appearance | undefined>;
+    readonly size: InputSignal<IRtuiButton.Size>;
+    readonly radius: InputSignal<IRtuiButton.Radius>;
+    readonly icon: InputSignalWithTransform<string, unknown>;
+    readonly iconPosition: InputSignal<IRtuiButton.IconPosition>;
+    readonly iconSize: InputSignal<RtuiIconSizeType | undefined>;
+    readonly text: InputSignalWithTransform<string, unknown>;
+    readonly loading: InputSignalWithTransform<boolean, BooleanInput>;
+    readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
+    readonly outlined: InputSignalWithTransform<boolean, BooleanInput>;
+    readonly fullWidth: InputSignalWithTransform<boolean, BooleanInput>;
+    readonly spinnerDiameter: InputSignal<number | undefined>;
+    readonly clicked: OutputEmitterRef<void>;
+    protected onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtuiButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RtuiButtonComponent, "a[rtui-btn], button[rtui-btn]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RtuiButtonComponent, "rtui-button", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "spinnerDiameter": { "alias": "spinnerDiameter"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, [{ directive: typeof i1.MatTooltip; inputs: { "matTooltip": "tooltip"; "matTooltipPosition": "tooltipPosition"; "matTooltipDisabled": "tooltipDisabled"; "matTooltipClass": "tooltipClass"; }; outputs: {}; }]>;
 }
 
 declare class RtuiMultiButtonComponent {
@@ -1600,23 +1614,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 +1703,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, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, IAside, IModal, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, IRtActionBar, IRtSnackBar, IRtuiButton, 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, RtuiIconComponent, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, 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, IImageUploadFormat, IInfoBadgeSizeType, IRtuiTable, Icon, IconSideType, InfoBadgeType, MenuItemTrigger, ModalWindowSizeType, NameValueType, RtAccentRole, RtColorSchemeRamp, RtThemeType, RtuiIconSizeType, RtuiIconThemeType, Select, ToggleSizeType };

package/src/lib/ui-kit/buttons/icon-round/rtui-round-icon-button.component.scss

@@ -1,44 +0,0 @@
-@use '../../../../styles/base/mixin' as mixins;
-
-$round-icon-button: (
-    host: (
-        size: 1.5rem,
-        padding: 0.25rem,
-        z-index: 1,
-        background-color: var(--mat-list-active-indicator-color),
-    ),
-    icon: (
-        size: 1.25rem,
-    ),
-);
-
-:host {
-    @each $element, $elements in $round-icon-button {
-        @each $style-token, $value in $elements {
-            #{mixins.generateCssVar('round-icon-button', #{$element}, #{$style-token})}: #{$value};
-        }
-    }
-
-    .round-icon-button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: var(--rt-round-icon-button-host-size);
-        height: var(--rt-round-icon-button-host-size);
-        padding: var(--rt-round-icon-button-host-padding);
-        z-index: var(--rt-round-icon-button-host-z-index);
-        border-radius: 50%;
-        cursor: pointer;
-
-        &__icon {
-            width: var(--rt-round-icon-button-icon-size);
-            height: var(--rt-round-icon-button-icon-size);
-            font-size: var(--rt-round-icon-button-icon-size);
-        }
-
-        &:hover {
-            background-color: var(--rt-round-icon-button-host-background-color);
-            box-shadow: var(--rt-button-box-shadow);
-        }
-    }
-}