@rt-tools/ui-kit 0.0.24 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

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

@@ -6,7 +6,8 @@
     display: block;
     width: 100%;
 
-    .rtui-button {
+    .rtui-button,
+    .rtui-button-material {
         width: 100%;
     }
 }
@@ -103,11 +104,11 @@
 
     /* ===================== pill ===================== */
     &--type-pill {
-        gap: 0.375rem;
         border-radius: 1.5rem;
         background-color: var(--mat-sys-surface-container-high);
         color: var(--mat-sys-on-surface-variant);
         font-weight: 500;
+        gap: 0.375rem;
 
         &:hover:not(:disabled) {
             background-color: var(--mat-sys-surface-container-highest);
@@ -245,72 +246,36 @@
             background-color: var(--rt-bg-base-hover);
         }
     }
+}
 
-    /* ===================== design: material =====================
-       Classic Material (M3) look, opted in per instance ([design]="'material'")
-       or app-wide via the RT_UI_CONFIG provider. Renders the pill as an M3
-       filled button; `appearance-text` renders as an M3 text button. Variants
-       map onto the Material theme: `danger` -> error, everything else -> primary
-       (M3 has no success/warning roles). These rules come after the custom-look
-       blocks on purpose: equal-or-higher specificity wins by source order. */
-    &--type-pill.rtui-button--design-material {
-        min-height: 2.5rem;
-        padding: 0 var(--mat-button-filled-horizontal-padding, 1.5rem);
-        border-radius: var(--mat-sys-corner-full, 1.25rem);
-        background-color: var(--mat-sys-primary);
-        color: var(--mat-sys-on-primary);
-        font-size: var(--mat-sys-label-large-size, 0.875rem);
-        font-weight: var(--mat-sys-label-large-weight, 500);
-
-        &:hover:not(:disabled) {
-            background-color: color-mix(in srgb, var(--mat-sys-primary) 92%, var(--mat-sys-on-primary));
-        }
-
-        &:active:not(:disabled) {
-            background-color: color-mix(in srgb, var(--mat-sys-primary) 84%, var(--mat-sys-on-primary));
-        }
-    }
-
-    &--type-pill.rtui-button--design-material.rtui-button--variant-danger {
-        background-color: var(--mat-sys-error);
-        color: var(--mat-sys-on-error);
-
-        &:hover:not(:disabled) {
-            background-color: color-mix(in srgb, var(--mat-sys-error) 92%, var(--mat-sys-on-error));
-        }
-
-        &:active:not(:disabled) {
-            background-color: color-mix(in srgb, var(--mat-sys-error) 84%, var(--mat-sys-on-error));
-        }
-    }
-
-    &--type-pill.rtui-button--design-material.rtui-button--appearance-text {
-        min-height: 2.5rem;
-        padding: 0 var(--mat-button-text-horizontal-padding, 0.75rem);
-        background-color: transparent;
-        color: var(--mat-sys-primary);
-        font-size: var(--mat-sys-label-large-size, 0.875rem);
-        font-weight: var(--mat-sys-label-large-weight, 500);
-
-        &:hover:not(:disabled) {
-            background-color: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
-        }
-
-        &:active:not(:disabled) {
-            background-color: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
-        }
+/* ===================== design: material =====================
+   Under `design: 'material'` the pill renders a NATIVE Material button (see the
+   template) whose look is fully owned by the Material theme. The only styling
+   the library adds is the variant mapping: `danger` re-points the button's own
+   theme tokens at the M3 error role (M3 has no success/warning roles, so every
+   other variant keeps the theme primary). */
+.rtui-button-material {
+    rtui-spinner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 
-    &--type-pill.rtui-button--design-material.rtui-button--variant-danger.rtui-button--appearance-text {
-        background-color: transparent;
-        color: var(--mat-sys-error);
-
-        &:hover:not(:disabled) {
-            background-color: color-mix(in srgb, var(--mat-sys-error) 8%, transparent);
-        }
-
-        &:active:not(:disabled) {
-            background-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);
-        }
+    &--danger {
+        --mat-button-filled-container-color: var(--mat-sys-error);
+        --mat-button-filled-label-text-color: var(--mat-sys-on-error);
+        --mat-button-filled-state-layer-color: var(--mat-sys-on-error);
+        --mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);
+        --mat-button-outlined-label-text-color: var(--mat-sys-error);
+        --mat-button-outlined-outline-color: var(--mat-sys-error);
+        --mat-button-outlined-state-layer-color: var(--mat-sys-error);
+        --mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);
+        --mat-button-text-label-text-color: var(--mat-sys-error);
+        --mat-button-text-state-layer-color: var(--mat-sys-error);
+        --mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);
+        --mat-button-tonal-container-color: var(--mat-sys-error-container);
+        --mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);
+        --mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);
+        --mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent);
     }
 }

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

@@ -10,6 +10,7 @@ import { OverlayRef, ComponentType, ConnectedPosition, CdkOverlayOrigin } from '
 import { ComponentType as ComponentType$1 } from '@angular/cdk/portal';
 import { HttpErrorResponse } from '@angular/common/http';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { MatButtonAppearance } from '@angular/material/button';
 import * as i1 from '@angular/material/tooltip';
 import { TooltipPosition } from '@angular/material/tooltip';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
@@ -327,8 +328,9 @@ declare const RT_SCHEME_ATTRIBUTE: string;
 /**
  * Design system a control renders with:
  * - `'custom'` — the rt-tools look (design tokens, pill shapes). The default.
- * - `'material'` — the classic Material (M3) look, for apps that have not migrated
- *   their visual language yet or need to match surrounding Material controls.
+ * - `'material'` — the control renders a NATIVE Angular Material component
+ *   (e.g. the button pill becomes a real `matButton`), for apps that have not
+ *   migrated their visual language yet or need to match surrounding Material controls.
  */
 type RtUiDesign = 'material' | 'custom';
 declare namespace IRtUiConfig {
@@ -413,6 +415,8 @@ declare class RtuiButtonComponent {
     protected readonly resolvedSize: Signal<IRtuiButton.Size>;
     protected readonly resolvedRadius: Signal<IRtuiButton.Radius>;
     protected readonly resolvedAppearance: Signal<IRtuiButton.Appearance | undefined>;
+    /** Native Material button appearance the pill renders with under `design: 'material'`. */
+    protected readonly materialAppearance: Signal<MatButtonAppearance>;
     protected readonly resolvedIconSize: Signal<RtuiIconSizeType>;
     protected readonly spinnerSize: Signal<number>;
     protected readonly modifiers: Signal<Record<string, boolean>>;