@ojiepermana/angular 21.3.3 → 22.0.1

package/theme/styles/integrations/material/autocomplete.css

@@ -0,0 +1,178 @@
+/**
+ * Angular Material autocomplete overrides.
+ *
+ * The public API remains CSS-only: Material tokens do the broad work, while
+ * the component selectors below tighten the overlay into a shadcn-like popover.
+ */
+@layer tokens {
+  :root,
+  [data-style='default'] {
+    --mat-autocomplete-background-color: hsl(var(--popover));
+    --mat-autocomplete-container-shape: var(--radius-md);
+    --mat-autocomplete-container-elevation-shadow: var(--shadow-md);
+
+    --ui-mat-autocomplete-border-color: hsl(var(--border));
+    --ui-mat-autocomplete-border-width: var(--border-width);
+    --ui-mat-autocomplete-active-border-color: hsl(var(--ring));
+    --ui-mat-autocomplete-option-radius: 0;
+    --ui-mat-autocomplete-option-min-height: 2.25rem;
+    --ui-mat-autocomplete-option-padding-x: 0.5rem;
+    --ui-mat-autocomplete-option-gap: 0.5rem;
+    --ui-mat-autocomplete-hover-background: hsl(var(--accent) / 0.72);
+    --ui-mat-autocomplete-active-background: hsl(var(--accent));
+    --ui-mat-autocomplete-active-foreground: hsl(var(--accent-foreground));
+    --ui-mat-autocomplete-selected-background: hsl(var(--accent));
+    --ui-mat-autocomplete-selected-foreground: hsl(var(--accent-foreground));
+  }
+
+  [data-style='sharp'] {
+    --mat-autocomplete-container-shape: 0;
+    --mat-autocomplete-container-elevation-shadow: none;
+    --ui-mat-autocomplete-option-radius: 0;
+    --ui-mat-autocomplete-hover-background: hsl(var(--muted));
+    --ui-mat-autocomplete-active-background: hsl(var(--muted));
+    --ui-mat-autocomplete-selected-background: hsl(var(--muted));
+  }
+
+  [data-style='brutal'] {
+    --mat-autocomplete-container-shape: 0;
+    --mat-autocomplete-container-elevation-shadow: var(--shadow-lg);
+    --ui-mat-autocomplete-border-color: hsl(var(--foreground));
+    --ui-mat-autocomplete-border-width: var(--border-width);
+    --ui-mat-autocomplete-active-border-color: hsl(var(--foreground));
+    --ui-mat-autocomplete-option-radius: 0;
+    --ui-mat-autocomplete-hover-background: hsl(var(--primary) / 0.14);
+    --ui-mat-autocomplete-active-background: hsl(var(--primary));
+    --ui-mat-autocomplete-active-foreground: hsl(var(--primary-foreground));
+    --ui-mat-autocomplete-selected-background: hsl(var(--primary));
+    --ui-mat-autocomplete-selected-foreground: hsl(var(--primary-foreground));
+  }
+
+  [data-style='soft'] {
+    --mat-autocomplete-container-shape: var(--radius-lg);
+    --mat-autocomplete-container-elevation-shadow: var(--shadow-lg);
+    --ui-mat-autocomplete-border-color: hsl(var(--border) / 0.72);
+    --ui-mat-autocomplete-active-border-color: hsl(var(--ring) / 0.8);
+    --ui-mat-autocomplete-option-radius: 0;
+    --ui-mat-autocomplete-hover-background: hsl(var(--accent) / 0.6);
+    --ui-mat-autocomplete-active-background: hsl(var(--accent) / 0.82);
+    --ui-mat-autocomplete-selected-background: hsl(var(--accent) / 0.82);
+  }
+}
+
+@layer components {
+  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mat-mdc-text-field-wrapper {
+    @apply relative z-10;
+  }
+
+  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mdc-notched-outline__leading,
+  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mdc-notched-outline__notch,
+  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mdc-notched-outline__trailing {
+    @apply border-ring;
+
+    border-color: var(--ui-mat-autocomplete-active-border-color) !important;
+    border-width: var(--ui-mat-autocomplete-border-width) !important;
+  }
+
+  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mdc-notched-outline__leading {
+    @apply rounded-bl-none;
+
+    border-bottom-color: var(--ui-mat-autocomplete-border-color) !important;
+    border-bottom-left-radius: 0 !important;
+  }
+
+  .mat-mdc-form-field:has(.mat-mdc-autocomplete-trigger[aria-expanded='true']) .mdc-notched-outline__trailing {
+    @apply rounded-br-none;
+
+    border-bottom-color: var(--ui-mat-autocomplete-border-color) !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  .ui-mat-autocomplete-trigger[aria-expanded='true'] {
+    @apply rounded-b-none border-ring;
+
+    border-color: var(--ui-mat-autocomplete-active-border-color) !important;
+    border-bottom-color: var(--ui-mat-autocomplete-border-color) !important;
+    border-width: var(--ui-mat-autocomplete-border-width) !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    box-shadow: none !important;
+  }
+
+  .cdk-overlay-pane div.mat-mdc-autocomplete-panel {
+    --mat-option-label-text-color: hsl(var(--popover-foreground));
+    --mat-option-hover-state-layer-color: var(--ui-mat-autocomplete-hover-background);
+    --mat-option-focus-state-layer-color: var(--ui-mat-autocomplete-active-background);
+    --mat-option-selected-state-layer-color: var(--ui-mat-autocomplete-selected-background);
+    --mat-option-selected-state-label-text-color: var(--ui-mat-autocomplete-selected-foreground);
+
+    @apply border p-1 text-foreground;
+
+    border-color: var(--ui-mat-autocomplete-border-color) !important;
+    border-width: var(--ui-mat-autocomplete-border-width) !important;
+    border-radius: var(--mat-autocomplete-container-shape) !important;
+    background-color: var(--mat-autocomplete-background-color) !important;
+    box-shadow: var(--mat-autocomplete-container-elevation-shadow) !important;
+  }
+
+  .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel,
+  .mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel {
+    border-radius: var(--mat-autocomplete-container-shape) !important;
+  }
+
+  .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible {
+    @apply rounded-t-none border-ring;
+
+    margin-top: calc(var(--ui-mat-autocomplete-border-width) * -1);
+    border-color: var(--ui-mat-autocomplete-active-border-color) !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+
+  .mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible {
+    @apply rounded-b-none border-ring;
+
+    margin-bottom: calc(var(--ui-mat-autocomplete-border-width) * -1);
+    border-color: var(--ui-mat-autocomplete-active-border-color) !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  .cdk-overlay-pane div.mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item {
+    @apply min-h-9 px-2 text-sm transition-colors;
+
+    min-height: var(--ui-mat-autocomplete-option-min-height);
+    border-radius: var(--ui-mat-autocomplete-option-radius);
+    gap: var(--ui-mat-autocomplete-option-gap);
+    padding-inline: var(--ui-mat-autocomplete-option-padding-x);
+  }
+
+  .cdk-overlay-pane div.mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text {
+    @apply flex min-w-0 items-center gap-2 truncate;
+  }
+
+  .cdk-overlay-pane div.mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),
+  .cdk-overlay-pane div.mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
+    color: var(--ui-mat-autocomplete-active-foreground);
+  }
+
+  .cdk-overlay-pane
+    div.mat-mdc-autocomplete-panel
+    .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
+    color: var(--ui-mat-autocomplete-selected-foreground);
+  }
+
+  .cdk-overlay-pane div.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label {
+    @apply min-h-8 px-2 text-xs font-semibold uppercase text-muted-foreground;
+
+    letter-spacing: 0.08em;
+  }
+
+  [data-style='brutal'] .cdk-overlay-pane div.mat-mdc-autocomplete-panel {
+    @apply border-2;
+  }
+
+  [data-style='sharp'] .cdk-overlay-pane div.mat-mdc-autocomplete-panel {
+    @apply shadow-none;
+  }
+}

package/theme/styles/integrations/material/button.css

@@ -0,0 +1,468 @@
+/**
+ * Angular Material button overrides.
+ *
+ * Material buttons keep their native button and anchor semantics, keyboard
+ * behavior, ripple handling, and focus monitoring while the visible surfaces
+ * follow local theme tokens.
+ */
+@layer tokens {
+  :root,
+  [data-style='default'] {
+    --ui-mat-button-border-width: var(--border-width);
+    --ui-mat-button-outline-color: hsl(var(--border));
+    --ui-mat-button-focus-outline-color: hsl(var(--ring));
+    --ui-mat-button-shape: var(--radius-sm);
+    --ui-mat-button-icon-shape: var(--radius-md);
+    --ui-mat-button-fab-shape: var(--radius-lg);
+    --ui-mat-button-brutal-shadow: 2px 2px 0 0 hsl(var(--foreground));
+
+    --mat-button-text-container-height: 2.25rem;
+    --mat-button-filled-container-height: 2.25rem;
+    --mat-button-outlined-container-height: 2.25rem;
+    --mat-button-protected-container-height: 2.25rem;
+    --mat-button-tonal-container-height: 2.25rem;
+
+    --mat-button-text-container-shape: var(--ui-mat-button-shape);
+    --mat-button-filled-container-shape: var(--ui-mat-button-shape);
+    --mat-button-outlined-container-shape: var(--ui-mat-button-shape);
+    --mat-button-protected-container-shape: var(--ui-mat-button-shape);
+    --mat-button-tonal-container-shape: var(--ui-mat-button-shape);
+
+    --mat-button-text-horizontal-padding: 0.875rem;
+    --mat-button-text-with-icon-horizontal-padding: 1rem;
+    --mat-button-filled-horizontal-padding: 1rem;
+    --mat-button-outlined-horizontal-padding: 1rem;
+    --mat-button-protected-horizontal-padding: 1rem;
+    --mat-button-tonal-horizontal-padding: 1rem;
+
+    --mat-button-text-label-text-font: var(--font-sans);
+    --mat-button-text-label-text-size: 0.875rem;
+    --mat-button-text-label-text-tracking: 0;
+    --mat-button-text-label-text-transform: none;
+    --mat-button-text-label-text-weight: 500;
+    --mat-button-filled-label-text-font: var(--font-sans);
+    --mat-button-filled-label-text-size: 0.875rem;
+    --mat-button-filled-label-text-tracking: 0;
+    --mat-button-filled-label-text-transform: none;
+    --mat-button-filled-label-text-weight: 500;
+    --mat-button-outlined-label-text-font: var(--font-sans);
+    --mat-button-outlined-label-text-size: 0.875rem;
+    --mat-button-outlined-label-text-tracking: 0;
+    --mat-button-outlined-label-text-transform: none;
+    --mat-button-outlined-label-text-weight: 500;
+    --mat-button-protected-label-text-font: var(--font-sans);
+    --mat-button-protected-label-text-size: 0.875rem;
+    --mat-button-protected-label-text-tracking: 0;
+    --mat-button-protected-label-text-transform: none;
+    --mat-button-protected-label-text-weight: 500;
+    --mat-button-tonal-label-text-font: var(--font-sans);
+    --mat-button-tonal-label-text-size: 0.875rem;
+    --mat-button-tonal-label-text-tracking: 0;
+    --mat-button-tonal-label-text-transform: none;
+    --mat-button-tonal-label-text-weight: 500;
+
+    --mat-button-text-label-text-color: hsl(var(--foreground));
+    --mat-button-text-state-layer-color: hsl(var(--foreground));
+    --mat-button-text-ripple-color: hsl(var(--foreground) / 0.12);
+    --mat-button-text-hover-state-layer-opacity: 0.08;
+    --mat-button-text-focus-state-layer-opacity: 0.12;
+    --mat-button-text-pressed-state-layer-opacity: 0.14;
+    --mat-button-text-disabled-label-text-color: hsl(var(--muted-foreground));
+    --mat-button-text-disabled-state-layer-color: hsl(var(--muted-foreground));
+
+    --mat-button-filled-container-color: hsl(var(--primary));
+    --mat-button-filled-label-text-color: hsl(var(--primary-foreground));
+    --mat-button-filled-state-layer-color: hsl(var(--primary-foreground));
+    --mat-button-filled-ripple-color: hsl(var(--primary-foreground) / 0.16);
+    --mat-button-filled-hover-state-layer-opacity: 0.08;
+    --mat-button-filled-focus-state-layer-opacity: 0.12;
+    --mat-button-filled-pressed-state-layer-opacity: 0.14;
+    --mat-button-filled-disabled-container-color: hsl(var(--muted));
+    --mat-button-filled-disabled-label-text-color: hsl(var(--muted-foreground));
+    --mat-button-filled-disabled-state-layer-color: hsl(var(--muted-foreground));
+
+    --mat-button-outlined-label-text-color: hsl(var(--foreground));
+    --mat-button-outlined-outline-color: var(--ui-mat-button-outline-color);
+    --mat-button-outlined-outline-width: var(--ui-mat-button-border-width);
+    --mat-button-outlined-state-layer-color: hsl(var(--foreground));
+    --mat-button-outlined-ripple-color: hsl(var(--foreground) / 0.12);
+    --mat-button-outlined-hover-state-layer-opacity: 0.08;
+    --mat-button-outlined-focus-state-layer-opacity: 0.12;
+    --mat-button-outlined-pressed-state-layer-opacity: 0.14;
+    --mat-button-outlined-disabled-outline-color: hsl(var(--border) / 0.72);
+    --mat-button-outlined-disabled-label-text-color: hsl(var(--muted-foreground));
+    --mat-button-outlined-disabled-state-layer-color: hsl(var(--muted-foreground));
+
+    --mat-button-protected-container-color: hsl(var(--card));
+    --mat-button-protected-label-text-color: hsl(var(--foreground));
+    --mat-button-protected-state-layer-color: hsl(var(--foreground));
+    --mat-button-protected-ripple-color: hsl(var(--foreground) / 0.12);
+    --mat-button-protected-hover-state-layer-opacity: 0.08;
+    --mat-button-protected-focus-state-layer-opacity: 0.12;
+    --mat-button-protected-pressed-state-layer-opacity: 0.14;
+    --mat-button-protected-container-elevation-shadow: var(--shadow-sm);
+    --mat-button-protected-hover-container-elevation-shadow: var(--shadow);
+    --mat-button-protected-focus-container-elevation-shadow: var(--shadow);
+    --mat-button-protected-pressed-container-elevation-shadow: var(--shadow-sm);
+    --mat-button-protected-disabled-container-color: hsl(var(--muted));
+    --mat-button-protected-disabled-label-text-color: hsl(var(--muted-foreground));
+    --mat-button-protected-disabled-state-layer-color: hsl(var(--muted-foreground));
+    --mat-button-protected-disabled-container-elevation-shadow: none;
+
+    --mat-button-tonal-container-color: hsl(var(--secondary));
+    --mat-button-tonal-label-text-color: hsl(var(--secondary-foreground));
+    --mat-button-tonal-state-layer-color: hsl(var(--secondary-foreground));
+    --mat-button-tonal-ripple-color: hsl(var(--secondary-foreground) / 0.16);
+    --mat-button-tonal-hover-state-layer-opacity: 0.08;
+    --mat-button-tonal-focus-state-layer-opacity: 0.12;
+    --mat-button-tonal-pressed-state-layer-opacity: 0.14;
+    --mat-button-tonal-disabled-container-color: hsl(var(--muted));
+    --mat-button-tonal-disabled-label-text-color: hsl(var(--muted-foreground));
+    --mat-button-tonal-disabled-state-layer-color: hsl(var(--muted-foreground));
+
+    --mat-icon-button-icon-size: 1rem;
+    --mat-icon-button-container-shape: var(--ui-mat-button-icon-shape);
+    --mat-icon-button-state-layer-size: 2.25rem;
+    --mat-icon-button-touch-target-size: 2.25rem;
+    --mat-icon-button-touch-target-display: block;
+    --mat-icon-button-icon-color: hsl(var(--foreground));
+    --mat-icon-button-state-layer-color: hsl(var(--foreground));
+    --mat-icon-button-ripple-color: hsl(var(--foreground) / 0.12);
+    --mat-icon-button-hover-state-layer-opacity: 0.08;
+    --mat-icon-button-focus-state-layer-opacity: 0.12;
+    --mat-icon-button-pressed-state-layer-opacity: 0.14;
+    --mat-icon-button-disabled-icon-color: hsl(var(--muted-foreground));
+    --mat-icon-button-disabled-state-layer-color: hsl(var(--muted-foreground));
+
+    --mat-fab-container-color: hsl(var(--primary));
+    --mat-fab-foreground-color: hsl(var(--primary-foreground));
+    --mat-fab-state-layer-color: hsl(var(--primary-foreground));
+    --mat-fab-ripple-color: hsl(var(--primary-foreground) / 0.18);
+    --mat-fab-hover-state-layer-opacity: 0.08;
+    --mat-fab-focus-state-layer-opacity: 0.12;
+    --mat-fab-pressed-state-layer-opacity: 0.14;
+    --mat-fab-container-shape: var(--ui-mat-button-fab-shape);
+    --mat-fab-container-elevation-shadow: var(--shadow);
+    --mat-fab-hover-container-elevation-shadow: var(--shadow-md);
+    --mat-fab-focus-container-elevation-shadow: var(--shadow-md);
+    --mat-fab-pressed-container-elevation-shadow: var(--shadow);
+    --mat-fab-touch-target-size: 2.75rem;
+    --mat-fab-touch-target-display: block;
+    --mat-fab-disabled-state-container-color: hsl(var(--muted));
+    --mat-fab-disabled-state-foreground-color: hsl(var(--muted-foreground));
+    --mat-fab-disabled-state-layer-color: hsl(var(--muted-foreground));
+
+    --mat-fab-small-container-color: hsl(var(--secondary));
+    --mat-fab-small-foreground-color: hsl(var(--secondary-foreground));
+    --mat-fab-small-state-layer-color: hsl(var(--secondary-foreground));
+    --mat-fab-small-ripple-color: hsl(var(--secondary-foreground) / 0.18);
+    --mat-fab-small-hover-state-layer-opacity: 0.08;
+    --mat-fab-small-focus-state-layer-opacity: 0.12;
+    --mat-fab-small-pressed-state-layer-opacity: 0.14;
+    --mat-fab-small-container-shape: var(--ui-mat-button-icon-shape);
+    --mat-fab-small-container-elevation-shadow: var(--shadow-sm);
+    --mat-fab-small-hover-container-elevation-shadow: var(--shadow);
+    --mat-fab-small-focus-container-elevation-shadow: var(--shadow);
+    --mat-fab-small-pressed-container-elevation-shadow: var(--shadow-sm);
+    --mat-fab-small-touch-target-size: 2.25rem;
+    --mat-fab-small-touch-target-display: block;
+    --mat-fab-small-disabled-state-container-color: hsl(var(--muted));
+    --mat-fab-small-disabled-state-foreground-color: hsl(var(--muted-foreground));
+    --mat-fab-small-disabled-state-layer-color: hsl(var(--muted-foreground));
+
+    --mat-fab-extended-container-height: 2.75rem;
+    --mat-fab-extended-container-shape: var(--ui-mat-button-fab-shape);
+    --mat-fab-extended-container-elevation-shadow: var(--shadow);
+    --mat-fab-extended-hover-container-elevation-shadow: var(--shadow-md);
+    --mat-fab-extended-focus-container-elevation-shadow: var(--shadow-md);
+    --mat-fab-extended-pressed-container-elevation-shadow: var(--shadow);
+    --mat-fab-extended-label-text-font: var(--font-sans);
+    --mat-fab-extended-label-text-size: 0.875rem;
+    --mat-fab-extended-label-text-tracking: 0;
+    --mat-fab-extended-label-text-weight: 500;
+  }
+
+  [data-style='sharp'] {
+    --ui-mat-button-shape: 0;
+    --ui-mat-button-icon-shape: 0;
+    --ui-mat-button-fab-shape: 0;
+
+    --mat-button-text-container-shape: 0;
+    --mat-button-filled-container-shape: 0;
+    --mat-button-outlined-container-shape: 0;
+    --mat-button-protected-container-shape: 0;
+    --mat-button-tonal-container-shape: 0;
+    --mat-icon-button-container-shape: 0;
+    --mat-fab-container-shape: 0;
+    --mat-fab-small-container-shape: 0;
+    --mat-fab-extended-container-shape: 0;
+
+    --mat-button-protected-container-elevation-shadow: none;
+    --mat-button-protected-hover-container-elevation-shadow: none;
+    --mat-button-protected-focus-container-elevation-shadow: none;
+    --mat-button-protected-pressed-container-elevation-shadow: none;
+    --mat-fab-container-elevation-shadow: none;
+    --mat-fab-hover-container-elevation-shadow: none;
+    --mat-fab-focus-container-elevation-shadow: none;
+    --mat-fab-pressed-container-elevation-shadow: none;
+    --mat-fab-small-container-elevation-shadow: none;
+    --mat-fab-small-hover-container-elevation-shadow: none;
+    --mat-fab-small-focus-container-elevation-shadow: none;
+    --mat-fab-small-pressed-container-elevation-shadow: none;
+    --mat-fab-extended-container-elevation-shadow: none;
+    --mat-fab-extended-hover-container-elevation-shadow: none;
+    --mat-fab-extended-focus-container-elevation-shadow: none;
+    --mat-fab-extended-pressed-container-elevation-shadow: none;
+  }
+
+  [data-style='brutal'] {
+    --ui-mat-button-outline-color: hsl(var(--foreground));
+    --ui-mat-button-focus-outline-color: hsl(var(--foreground));
+    --ui-mat-button-shape: 0;
+    --ui-mat-button-icon-shape: 0;
+    --ui-mat-button-fab-shape: 0;
+
+    --mat-button-text-container-shape: 0;
+    --mat-button-filled-container-shape: 0;
+    --mat-button-outlined-container-shape: 0;
+    --mat-button-protected-container-shape: 0;
+    --mat-button-tonal-container-shape: 0;
+    --mat-icon-button-container-shape: 0;
+    --mat-fab-container-shape: 0;
+    --mat-fab-small-container-shape: 0;
+    --mat-fab-extended-container-shape: 0;
+
+    --mat-button-filled-container-color: hsl(var(--foreground));
+    --mat-button-filled-label-text-color: hsl(var(--background));
+    --mat-button-filled-state-layer-color: hsl(var(--background));
+    --mat-button-filled-ripple-color: hsl(var(--background) / 0.18);
+    --mat-button-protected-container-color: hsl(var(--background));
+    --mat-button-protected-label-text-color: hsl(var(--foreground));
+    --mat-button-protected-state-layer-color: hsl(var(--foreground));
+    --mat-button-protected-ripple-color: hsl(var(--foreground) / 0.12);
+    --mat-button-protected-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-button-protected-hover-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-button-protected-focus-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-button-protected-pressed-container-elevation-shadow: none;
+    --mat-button-tonal-container-color: hsl(var(--accent));
+    --mat-button-tonal-label-text-color: hsl(var(--accent-foreground));
+    --mat-button-tonal-state-layer-color: hsl(var(--accent-foreground));
+    --mat-icon-button-icon-color: hsl(var(--foreground));
+    --mat-icon-button-state-layer-color: hsl(var(--foreground));
+
+    --mat-fab-container-color: hsl(var(--foreground));
+    --mat-fab-foreground-color: hsl(var(--background));
+    --mat-fab-state-layer-color: hsl(var(--background));
+    --mat-fab-ripple-color: hsl(var(--background) / 0.18);
+    --mat-fab-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-fab-hover-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-fab-focus-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-fab-pressed-container-elevation-shadow: none;
+
+    --mat-fab-small-container-color: hsl(var(--background));
+    --mat-fab-small-foreground-color: hsl(var(--foreground));
+    --mat-fab-small-state-layer-color: hsl(var(--foreground));
+    --mat-fab-small-ripple-color: hsl(var(--foreground) / 0.18);
+    --mat-fab-small-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-fab-small-hover-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-fab-small-focus-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-fab-small-pressed-container-elevation-shadow: none;
+
+    --mat-fab-extended-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-fab-extended-hover-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-fab-extended-focus-container-elevation-shadow: var(--ui-mat-button-brutal-shadow);
+    --mat-fab-extended-pressed-container-elevation-shadow: none;
+  }
+
+  [data-style='soft'] {
+    --ui-mat-button-outline-color: hsl(var(--border) / 0.72);
+    --ui-mat-button-shape: var(--radius-md);
+    --ui-mat-button-icon-shape: var(--radius-lg);
+    --ui-mat-button-fab-shape: calc(var(--radius-lg) + 0.25rem);
+
+    --mat-button-text-container-shape: var(--radius-md);
+    --mat-button-filled-container-shape: var(--radius-md);
+    --mat-button-outlined-container-shape: var(--radius-md);
+    --mat-button-protected-container-shape: var(--radius-md);
+    --mat-button-tonal-container-shape: var(--radius-md);
+    --mat-icon-button-container-shape: var(--radius-lg);
+    --mat-fab-container-shape: calc(var(--radius-lg) + 0.25rem);
+    --mat-fab-small-container-shape: var(--radius-lg);
+    --mat-fab-extended-container-shape: calc(var(--radius-lg) + 0.25rem);
+
+    --mat-button-protected-container-color: hsl(var(--background));
+    --mat-button-protected-container-elevation-shadow: 0 10px 24px hsl(var(--foreground) / 0.08);
+    --mat-button-protected-hover-container-elevation-shadow: 0 14px 28px hsl(var(--foreground) / 0.1);
+    --mat-button-protected-focus-container-elevation-shadow: 0 14px 28px hsl(var(--foreground) / 0.1);
+    --mat-button-protected-pressed-container-elevation-shadow: 0 8px 18px hsl(var(--foreground) / 0.08);
+    --mat-button-tonal-container-color: hsl(var(--accent));
+    --mat-button-tonal-label-text-color: hsl(var(--accent-foreground));
+    --mat-button-tonal-state-layer-color: hsl(var(--accent-foreground));
+
+    --mat-fab-container-elevation-shadow: 0 12px 28px hsl(var(--foreground) / 0.14);
+    --mat-fab-hover-container-elevation-shadow: 0 16px 32px hsl(var(--foreground) / 0.16);
+    --mat-fab-focus-container-elevation-shadow: 0 16px 32px hsl(var(--foreground) / 0.16);
+    --mat-fab-pressed-container-elevation-shadow: 0 10px 20px hsl(var(--foreground) / 0.14);
+    --mat-fab-small-container-elevation-shadow: 0 8px 20px hsl(var(--foreground) / 0.1);
+    --mat-fab-small-hover-container-elevation-shadow: 0 12px 24px hsl(var(--foreground) / 0.12);
+    --mat-fab-small-focus-container-elevation-shadow: 0 12px 24px hsl(var(--foreground) / 0.12);
+    --mat-fab-small-pressed-container-elevation-shadow: 0 8px 18px hsl(var(--foreground) / 0.1);
+    --mat-fab-extended-container-elevation-shadow: 0 12px 28px hsl(var(--foreground) / 0.14);
+    --mat-fab-extended-hover-container-elevation-shadow: 0 16px 32px hsl(var(--foreground) / 0.16);
+    --mat-fab-extended-focus-container-elevation-shadow: 0 16px 32px hsl(var(--foreground) / 0.16);
+    --mat-fab-extended-pressed-container-elevation-shadow: 0 10px 20px hsl(var(--foreground) / 0.14);
+  }
+}
+
+@layer components {
+  .mat-mdc-button-base,
+  .mat-mdc-fab-base {
+    @apply align-middle transition-[transform,box-shadow,border-color,background-color,color];
+  }
+
+  .mat-mdc-button-base .mat-mdc-button-ripple,
+  .mat-mdc-button-base .mat-mdc-button-persistent-ripple,
+  .mat-mdc-button-base .mat-mdc-button-persistent-ripple::before,
+  .mat-mdc-button-base .mat-focus-indicator,
+  .mat-mdc-button-base .mat-focus-indicator::before,
+  .mat-mdc-fab-base .mat-mdc-button-ripple,
+  .mat-mdc-fab-base .mat-mdc-button-persistent-ripple,
+  .mat-mdc-fab-base .mat-mdc-button-persistent-ripple::before,
+  .mat-mdc-fab-base .mat-focus-indicator,
+  .mat-mdc-fab-base .mat-focus-indicator::before {
+    border-radius: inherit;
+  }
+
+  .mat-mdc-button-base:focus-visible > .mat-focus-indicator::before,
+  .mat-mdc-fab-base:focus-visible > .mat-focus-indicator::before {
+    outline: 2px solid var(--ui-mat-button-focus-outline-color);
+    outline-offset: 3px;
+  }
+
+  .mat-mdc-button-base:hover:not([disabled]):not(.mat-mdc-button-disabled),
+  .mat-mdc-fab-base:hover:not([disabled]):not(.mat-mdc-button-disabled) {
+    transform: translateY(-1px);
+  }
+
+  .mat-mdc-button-base .mat-icon,
+  .mat-mdc-fab-base .mat-icon {
+    @apply text-base;
+  }
+
+  button.mat-mdc-button,
+  a.mat-mdc-button,
+  button.mat-mdc-unelevated-button,
+  a.mat-mdc-unelevated-button,
+  button.mat-mdc-raised-button,
+  a.mat-mdc-raised-button,
+  button.mat-mdc-outlined-button,
+  a.mat-mdc-outlined-button,
+  button.mat-tonal-button,
+  a.mat-tonal-button,
+  button.mat-mdc-button .mdc-button__ripple,
+  a.mat-mdc-button .mdc-button__ripple,
+  button.mat-mdc-unelevated-button .mdc-button__ripple,
+  a.mat-mdc-unelevated-button .mdc-button__ripple,
+  button.mat-mdc-raised-button .mdc-button__ripple,
+  a.mat-mdc-raised-button .mdc-button__ripple,
+  button.mat-mdc-outlined-button .mdc-button__ripple,
+  a.mat-mdc-outlined-button .mdc-button__ripple,
+  button.mat-tonal-button .mdc-button__ripple,
+  a.mat-tonal-button .mdc-button__ripple {
+    border-radius: var(--ui-mat-button-shape);
+  }
+
+  button.mat-mdc-icon-button,
+  a.mat-mdc-icon-button,
+  button.mat-mdc-mini-fab,
+  a.mat-mdc-mini-fab {
+    border-radius: var(--ui-mat-button-icon-shape);
+  }
+
+  button.mat-mdc-fab,
+  a.mat-mdc-fab,
+  button.mat-mdc-extended-fab,
+  a.mat-mdc-extended-fab {
+    border-radius: var(--ui-mat-button-fab-shape);
+  }
+
+  button.mat-mdc-icon-button.mat-mdc-button-base,
+  a.mat-mdc-icon-button.mat-mdc-button-base {
+    width: var(--mat-icon-button-state-layer-size);
+    height: var(--mat-icon-button-state-layer-size);
+    padding: 0.625rem;
+  }
+
+  [data-style='default'] .mat-mdc-fab,
+  [data-style='sharp'] .mat-mdc-fab,
+  [data-style='brutal'] .mat-mdc-fab,
+  [data-style='soft'] .mat-mdc-fab {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+
+  [data-style='default'] .mat-mdc-mini-fab,
+  [data-style='sharp'] .mat-mdc-mini-fab,
+  [data-style='brutal'] .mat-mdc-mini-fab,
+  [data-style='soft'] .mat-mdc-mini-fab {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+
+  [data-style='default'] .mat-mdc-extended-fab,
+  [data-style='sharp'] .mat-mdc-extended-fab,
+  [data-style='brutal'] .mat-mdc-extended-fab,
+  [data-style='soft'] .mat-mdc-extended-fab {
+    @apply px-4;
+
+    height: var(--mat-fab-extended-container-height);
+    min-width: 0;
+  }
+
+  .mat-mdc-button[disabled],
+  .mat-mdc-unelevated-button[disabled],
+  .mat-mdc-raised-button[disabled],
+  .mat-mdc-outlined-button[disabled],
+  .mat-tonal-button[disabled],
+  .mat-mdc-button.mat-mdc-button-disabled,
+  .mat-mdc-unelevated-button.mat-mdc-button-disabled,
+  .mat-mdc-raised-button.mat-mdc-button-disabled,
+  .mat-mdc-outlined-button.mat-mdc-button-disabled,
+  .mat-tonal-button.mat-mdc-button-disabled,
+  .mat-mdc-icon-button[disabled],
+  .mat-mdc-icon-button.mat-mdc-button-disabled,
+  .mat-mdc-fab[disabled],
+  .mat-mdc-fab.mat-mdc-button-disabled,
+  .mat-mdc-mini-fab[disabled],
+  .mat-mdc-mini-fab.mat-mdc-button-disabled,
+  .mat-mdc-extended-fab[disabled],
+  .mat-mdc-extended-fab.mat-mdc-button-disabled {
+    @apply opacity-70;
+  }
+
+  [data-style='sharp'] .mat-mdc-button-base:hover:not([disabled]):not(.mat-mdc-button-disabled),
+  [data-style='sharp'] .mat-mdc-fab-base:hover:not([disabled]):not(.mat-mdc-button-disabled) {
+    transform: none;
+  }
+
+  [data-style='brutal'] .mat-mdc-unelevated-button,
+  [data-style='brutal'] .mat-mdc-raised-button,
+  [data-style='brutal'] .mat-mdc-outlined-button,
+  [data-style='brutal'] .mat-tonal-button,
+  [data-style='brutal'] .mat-mdc-fab,
+  [data-style='brutal'] .mat-mdc-mini-fab,
+  [data-style='brutal'] .mat-mdc-extended-fab {
+    box-shadow: var(--ui-mat-button-brutal-shadow);
+  }
+
+  [data-style='brutal'] .mat-mdc-unelevated-button:hover:not([disabled]):not(.mat-mdc-button-disabled),
+  [data-style='brutal'] .mat-mdc-raised-button:hover:not([disabled]):not(.mat-mdc-button-disabled),
+  [data-style='brutal'] .mat-mdc-outlined-button:hover:not([disabled]):not(.mat-mdc-button-disabled),
+  [data-style='brutal'] .mat-tonal-button:hover:not([disabled]):not(.mat-mdc-button-disabled),
+  [data-style='brutal'] .mat-mdc-fab:hover:not([disabled]):not(.mat-mdc-button-disabled),
+  [data-style='brutal'] .mat-mdc-mini-fab:hover:not([disabled]):not(.mat-mdc-button-disabled),
+  [data-style='brutal'] .mat-mdc-extended-fab:hover:not([disabled]):not(.mat-mdc-button-disabled) {
+    transform: translate(1px, 1px);
+    box-shadow: none;
+  }
+}