@ojiepermana/angular 21.3.4 → 22.0.1

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

@@ -0,0 +1,152 @@
+/**
+ * Angular Material dialog overrides.
+ *
+ * The dialog keeps MatDialog focus management, ARIA roles, and overlay
+ * behavior while the surface follows the local shadcn-like theme tokens.
+ */
+@layer tokens {
+  :root,
+  [data-style='default'] {
+    --mat-dialog-container-color: hsl(var(--popover));
+    --mat-dialog-container-shape: var(--radius-lg);
+    --mat-dialog-container-elevation-shadow: var(--shadow-lg);
+    --mat-dialog-container-max-width: min(calc(100vw - 2rem), 32rem);
+    --mat-dialog-container-small-max-width: calc(100vw - 2rem);
+    --mat-dialog-container-min-width: 0;
+    --mat-dialog-actions-alignment: flex-end;
+    --mat-dialog-actions-padding: 1rem 1.5rem 1.5rem;
+    --mat-dialog-content-padding: 0 1.5rem 1.5rem;
+    --mat-dialog-headline-padding: 1.5rem 1.5rem 0.5rem;
+    --mat-dialog-with-actions-content-padding: 0 1.5rem 0.25rem;
+    --mat-dialog-subhead-color: hsl(var(--popover-foreground));
+    --mat-dialog-supporting-text-color: hsl(var(--muted-foreground));
+    --mat-dialog-subhead-font: var(--font-sans);
+    --mat-dialog-subhead-line-height: 1.75rem;
+    --mat-dialog-subhead-size: 1.125rem;
+    --mat-dialog-subhead-tracking: 0;
+    --mat-dialog-subhead-weight: 600;
+    --mat-dialog-supporting-text-font: var(--font-sans);
+    --mat-dialog-supporting-text-line-height: 1.5rem;
+    --mat-dialog-supporting-text-size: 0.875rem;
+    --mat-dialog-supporting-text-tracking: 0;
+    --mat-dialog-supporting-text-weight: 400;
+
+    --ui-mat-dialog-backdrop-background: hsl(var(--foreground) / 0.5);
+    --ui-mat-dialog-border-color: hsl(var(--border));
+    --ui-mat-dialog-border-width: var(--border-width);
+    --ui-mat-dialog-actions-border-color: transparent;
+    --ui-mat-dialog-focus-ring-color: hsl(var(--ring));
+  }
+
+  [data-style='sharp'] {
+    --mat-dialog-container-shape: 0;
+    --mat-dialog-container-elevation-shadow: none;
+    --ui-mat-dialog-backdrop-background: hsl(var(--foreground) / 0.42);
+  }
+
+  [data-style='brutal'] {
+    --mat-dialog-container-shape: 0;
+    --mat-dialog-container-elevation-shadow: var(--shadow-lg);
+    --ui-mat-dialog-backdrop-background: hsl(var(--foreground) / 0.36);
+    --ui-mat-dialog-border-color: hsl(var(--foreground));
+    --ui-mat-dialog-border-width: var(--border-width);
+  }
+
+  [data-style='soft'] {
+    --mat-dialog-container-shape: calc(var(--radius-lg) + 0.375rem);
+    --mat-dialog-container-elevation-shadow: var(--shadow-lg);
+    --ui-mat-dialog-backdrop-background: hsl(var(--foreground) / 0.32);
+    --ui-mat-dialog-border-color: hsl(var(--border) / 0.72);
+  }
+}
+
+@layer components {
+  .cdk-overlay-backdrop.cdk-overlay-dark-backdrop {
+    background-color: var(--ui-mat-dialog-backdrop-background);
+  }
+
+  .cdk-overlay-pane.mat-mdc-dialog-panel {
+    @apply box-border;
+  }
+
+  .cdk-overlay-pane.mat-mdc-dialog-panel.ui-mat-dialog-wide {
+    --mat-dialog-container-max-width: min(calc(100vw - 2rem), 42rem);
+  }
+
+  .cdk-overlay-pane.mat-mdc-dialog-panel.ui-mat-dialog-compact {
+    --mat-dialog-container-max-width: min(calc(100vw - 2rem), 26rem);
+  }
+
+  .cdk-overlay-pane.mat-mdc-dialog-panel.ui-mat-dialog-alert {
+    --ui-mat-dialog-border-color: hsl(var(--destructive) / 0.42);
+  }
+
+  .mat-mdc-dialog-container {
+    @apply text-popover-foreground;
+  }
+
+  .mat-mdc-dialog-container .mat-mdc-dialog-surface {
+    @apply border bg-popover text-popover-foreground;
+
+    border-color: var(--ui-mat-dialog-border-color) !important;
+    border-width: var(--ui-mat-dialog-border-width) !important;
+    border-radius: var(--mat-dialog-container-shape) !important;
+    background-color: var(--mat-dialog-container-color) !important;
+    box-shadow: var(--mat-dialog-container-elevation-shadow) !important;
+  }
+
+  .mat-mdc-dialog-container .mat-mdc-dialog-surface:focus-visible {
+    outline: 2px solid var(--ui-mat-dialog-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  .mat-mdc-dialog-container .mat-mdc-dialog-title {
+    @apply m-0 text-lg font-semibold text-popover-foreground;
+
+    letter-spacing: 0;
+  }
+
+  .mat-mdc-dialog-container .mat-mdc-dialog-title::before {
+    display: none;
+  }
+
+  .mat-mdc-dialog-container .mat-mdc-dialog-content {
+    @apply text-sm text-muted-foreground;
+
+    line-height: 1.5rem;
+  }
+
+  .mat-mdc-dialog-container .mat-mdc-dialog-content p + p {
+    @apply mt-3;
+  }
+
+  .mat-mdc-dialog-container .mat-mdc-dialog-actions {
+    @apply gap-2;
+
+    min-height: auto;
+    border-top-color: var(--ui-mat-dialog-actions-border-color);
+  }
+
+  .mat-mdc-dialog-container .mat-mdc-dialog-actions .mat-mdc-button-base + .mat-mdc-button-base,
+  .mat-mdc-dialog-container .mat-mdc-dialog-actions .mat-button-base + .mat-button-base {
+    margin-left: 0;
+  }
+
+  [data-style='brutal'] .mat-mdc-dialog-container .mat-mdc-dialog-surface {
+    @apply border-2;
+  }
+
+  [data-style='sharp'] .mat-mdc-dialog-container .mat-mdc-dialog-surface {
+    @apply shadow-none;
+  }
+
+  @media (max-width: 640px) {
+    .mat-mdc-dialog-container .mat-mdc-dialog-actions {
+      @apply flex-col-reverse items-stretch;
+    }
+
+    .mat-mdc-dialog-container .mat-mdc-dialog-actions button {
+      @apply w-full;
+    }
+  }
+}

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

@@ -0,0 +1,175 @@
+/**
+ * Angular Material select overrides.
+ *
+ * Global Material tokens handle typography and colors; this file tightens the
+ * trigger, overlay panel, and option rows into the local shadcn-like surface.
+ */
+@layer tokens {
+  :root,
+  [data-style='default'] {
+    --mat-select-container-elevation-shadow: var(--shadow-md);
+    --mat-select-panel-background-color: hsl(var(--popover));
+    --mat-select-enabled-trigger-text-color: hsl(var(--foreground));
+    --mat-select-placeholder-text-color: hsl(var(--muted-foreground));
+    --mat-select-enabled-arrow-color: hsl(var(--muted-foreground));
+    --mat-select-focused-arrow-color: hsl(var(--ring));
+
+    --ui-mat-select-border-color: hsl(var(--border));
+    --ui-mat-select-border-width: var(--border-width);
+    --ui-mat-select-active-border-color: hsl(var(--ring));
+    --ui-mat-select-panel-radius: var(--radius-md);
+    --ui-mat-select-option-radius: 0;
+    --ui-mat-select-option-min-height: 2.25rem;
+    --ui-mat-select-option-padding-x: 0.5rem;
+    --ui-mat-select-option-gap: 0.5rem;
+    --ui-mat-select-hover-background: hsl(var(--accent) / 0.72);
+    --ui-mat-select-focus-background: hsl(var(--accent));
+    --ui-mat-select-selected-background: hsl(var(--accent));
+    --ui-mat-select-selected-foreground: hsl(var(--accent-foreground));
+  }
+
+  [data-style='sharp'] {
+    --mat-select-container-elevation-shadow: none;
+    --ui-mat-select-panel-radius: 0;
+    --ui-mat-select-hover-background: hsl(var(--muted));
+    --ui-mat-select-focus-background: hsl(var(--muted));
+    --ui-mat-select-selected-background: hsl(var(--muted));
+  }
+
+  [data-style='brutal'] {
+    --mat-select-container-elevation-shadow: var(--shadow-lg);
+    --mat-select-enabled-arrow-color: hsl(var(--foreground));
+    --mat-select-focused-arrow-color: hsl(var(--foreground));
+
+    --ui-mat-select-border-color: hsl(var(--foreground));
+    --ui-mat-select-active-border-color: hsl(var(--foreground));
+    --ui-mat-select-panel-radius: 0;
+    --ui-mat-select-hover-background: hsl(var(--primary) / 0.14);
+    --ui-mat-select-focus-background: hsl(var(--primary));
+    --ui-mat-select-selected-background: hsl(var(--primary));
+    --ui-mat-select-selected-foreground: hsl(var(--primary-foreground));
+  }
+
+  [data-style='soft'] {
+    --mat-select-container-elevation-shadow: var(--shadow-lg);
+    --ui-mat-select-border-color: hsl(var(--border) / 0.72);
+    --ui-mat-select-active-border-color: hsl(var(--ring) / 0.8);
+    --ui-mat-select-panel-radius: var(--radius-lg);
+    --ui-mat-select-hover-background: hsl(var(--accent) / 0.6);
+    --ui-mat-select-focus-background: hsl(var(--accent) / 0.82);
+    --ui-mat-select-selected-background: hsl(var(--accent) / 0.82);
+  }
+}
+
+@layer components {
+  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mat-mdc-text-field-wrapper {
+    @apply relative z-10;
+  }
+
+  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mdc-notched-outline__leading,
+  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mdc-notched-outline__notch,
+  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mdc-notched-outline__trailing {
+    @apply border-ring;
+
+    border-color: var(--ui-mat-select-active-border-color) !important;
+    border-width: var(--ui-mat-select-border-width) !important;
+  }
+
+  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mdc-notched-outline__leading {
+    @apply rounded-bl-none;
+
+    border-bottom-color: var(--ui-mat-select-border-color) !important;
+    border-bottom-left-radius: 0 !important;
+  }
+
+  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mdc-notched-outline__trailing {
+    @apply rounded-br-none;
+
+    border-bottom-color: var(--ui-mat-select-border-color) !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  .mat-mdc-select-trigger {
+    @apply min-w-0 gap-2;
+  }
+
+  .mat-mdc-select-value,
+  .mat-mdc-select-value-text,
+  .mat-mdc-select-min-line {
+    @apply min-w-0 truncate;
+  }
+
+  .mat-mdc-select-arrow-wrapper {
+    @apply transition-transform;
+  }
+
+  .cdk-overlay-pane div.mat-mdc-select-panel {
+    --mat-option-label-text-color: hsl(var(--popover-foreground));
+    --mat-option-hover-state-layer-color: var(--ui-mat-select-hover-background);
+    --mat-option-focus-state-layer-color: var(--ui-mat-select-focus-background);
+    --mat-option-selected-state-layer-color: var(--ui-mat-select-selected-background);
+    --mat-option-selected-state-label-text-color: var(--ui-mat-select-selected-foreground);
+
+    @apply border p-1 text-foreground;
+
+    border-color: var(--ui-mat-select-border-color) !important;
+    border-width: var(--ui-mat-select-border-width) !important;
+    border-radius: var(--ui-mat-select-panel-radius) !important;
+    background-color: var(--mat-select-panel-background-color) !important;
+    box-shadow: var(--mat-select-container-elevation-shadow) !important;
+  }
+
+  .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
+    @apply rounded-t-none border-ring;
+
+    margin-top: calc(var(--ui-mat-select-border-width) * -1);
+    border-color: var(--ui-mat-select-active-border-color) !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+
+  .cdk-overlay-pane.mat-mdc-select-panel-above div.mat-mdc-select-panel {
+    @apply rounded-b-none border-ring;
+
+    margin-bottom: calc(var(--ui-mat-select-border-width) * -1);
+    border-color: var(--ui-mat-select-active-border-color) !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  .cdk-overlay-pane div.mat-mdc-select-panel .mat-mdc-option.mdc-list-item {
+    @apply min-h-9 px-2 text-sm transition-colors;
+
+    min-height: var(--ui-mat-select-option-min-height);
+    border-radius: var(--ui-mat-select-option-radius);
+    gap: var(--ui-mat-select-option-gap);
+    padding-inline: var(--ui-mat-select-option-padding-x);
+  }
+
+  .cdk-overlay-pane div.mat-mdc-select-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-select-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),
+  .cdk-overlay-pane div.mat-mdc-select-panel .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
+    color: var(--ui-mat-select-selected-foreground);
+  }
+
+  .cdk-overlay-pane div.mat-mdc-select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
+    color: var(--ui-mat-select-selected-foreground);
+  }
+
+  .cdk-overlay-pane div.mat-mdc-select-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-select-panel {
+    @apply border-2;
+  }
+
+  [data-style='sharp'] .cdk-overlay-pane div.mat-mdc-select-panel {
+    @apply shadow-none;
+  }
+}

package/theme/styles/integrations/material/slide-toggle.css

@@ -0,0 +1,234 @@
+/**
+ * Angular Material slide-toggle overrides.
+ *
+ * MatSlideToggle keeps its button-based switch semantics, form integration,
+ * label projection, and keyboard handling while the visible switch follows
+ * local theme tokens.
+ */
+@layer tokens {
+  :root,
+  [data-style='default'] {
+    --ui-mat-slide-toggle-track-border-color: hsl(var(--border));
+    --ui-mat-slide-toggle-track-border-width: var(--border-width);
+    --ui-mat-slide-toggle-track-radius: 9999px;
+    --ui-mat-slide-toggle-handle-radius: 9999px;
+    --ui-mat-slide-toggle-focus-outline-color: hsl(var(--ring));
+
+    --mat-slide-toggle-track-width: 2.25rem;
+    --mat-slide-toggle-track-height: 1.25rem;
+    --mat-slide-toggle-track-shape: var(--ui-mat-slide-toggle-track-radius);
+    --mat-slide-toggle-track-outline-color: var(--ui-mat-slide-toggle-track-border-color);
+    --mat-slide-toggle-track-outline-width: var(--ui-mat-slide-toggle-track-border-width);
+    --mat-slide-toggle-selected-track-outline-color: transparent;
+    --mat-slide-toggle-selected-track-outline-width: var(--ui-mat-slide-toggle-track-border-width);
+    --mat-slide-toggle-disabled-unselected-track-outline-color: hsl(var(--border) / 0.72);
+    --mat-slide-toggle-disabled-unselected-track-outline-width: var(--ui-mat-slide-toggle-track-border-width);
+
+    --mat-slide-toggle-handle-width: 1rem;
+    --mat-slide-toggle-handle-height: 1rem;
+    --mat-slide-toggle-handle-shape: var(--ui-mat-slide-toggle-handle-radius);
+    --mat-slide-toggle-selected-handle-size: 1rem;
+    --mat-slide-toggle-unselected-handle-size: 1rem;
+    --mat-slide-toggle-with-icon-handle-size: 1rem;
+    --mat-slide-toggle-pressed-handle-size: 1.125rem;
+    --mat-slide-toggle-selected-handle-horizontal-margin: 0;
+    --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0;
+    --mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0;
+    --mat-slide-toggle-unselected-handle-horizontal-margin: 0;
+    --mat-slide-toggle-unselected-with-icon-handle-horizontal-margin: 0;
+    --mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0;
+    --mat-slide-toggle-handle-elevation-shadow: 0 1px 2px hsl(var(--foreground) / 0.14);
+    --mat-slide-toggle-disabled-handle-elevation-shadow: none;
+
+    --mat-slide-toggle-selected-track-color: hsl(var(--primary));
+    --mat-slide-toggle-selected-hover-track-color: hsl(var(--primary));
+    --mat-slide-toggle-selected-focus-track-color: hsl(var(--primary));
+    --mat-slide-toggle-selected-pressed-track-color: hsl(var(--primary));
+    --mat-slide-toggle-selected-handle-color: hsl(var(--primary-foreground));
+    --mat-slide-toggle-selected-hover-handle-color: hsl(var(--primary-foreground));
+    --mat-slide-toggle-selected-focus-handle-color: hsl(var(--primary-foreground));
+    --mat-slide-toggle-selected-pressed-handle-color: hsl(var(--primary-foreground));
+
+    --mat-slide-toggle-unselected-track-color: hsl(var(--input));
+    --mat-slide-toggle-unselected-hover-track-color: hsl(var(--input));
+    --mat-slide-toggle-unselected-focus-track-color: hsl(var(--input));
+    --mat-slide-toggle-unselected-pressed-track-color: hsl(var(--input));
+    --mat-slide-toggle-unselected-handle-color: hsl(var(--background));
+    --mat-slide-toggle-unselected-hover-handle-color: hsl(var(--background));
+    --mat-slide-toggle-unselected-focus-handle-color: hsl(var(--background));
+    --mat-slide-toggle-unselected-pressed-handle-color: hsl(var(--background));
+    --mat-slide-toggle-handle-surface-color: hsl(var(--background));
+
+    --mat-slide-toggle-selected-icon-color: transparent;
+    --mat-slide-toggle-disabled-selected-icon-color: transparent;
+    --mat-slide-toggle-unselected-icon-color: transparent;
+    --mat-slide-toggle-disabled-unselected-icon-color: transparent;
+    --mat-slide-toggle-selected-icon-size: 0;
+    --mat-slide-toggle-unselected-icon-size: 0;
+
+    --mat-slide-toggle-selected-hover-state-layer-color: hsl(var(--primary));
+    --mat-slide-toggle-selected-focus-state-layer-color: hsl(var(--ring));
+    --mat-slide-toggle-selected-pressed-state-layer-color: hsl(var(--primary));
+    --mat-slide-toggle-selected-hover-state-layer-opacity: 0.12;
+    --mat-slide-toggle-selected-focus-state-layer-opacity: 0.18;
+    --mat-slide-toggle-selected-pressed-state-layer-opacity: 0.18;
+    --mat-slide-toggle-unselected-hover-state-layer-color: hsl(var(--foreground));
+    --mat-slide-toggle-unselected-focus-state-layer-color: hsl(var(--ring));
+    --mat-slide-toggle-unselected-pressed-state-layer-color: hsl(var(--foreground));
+    --mat-slide-toggle-unselected-hover-state-layer-opacity: 0.1;
+    --mat-slide-toggle-unselected-focus-state-layer-opacity: 0.18;
+    --mat-slide-toggle-unselected-pressed-state-layer-opacity: 0.14;
+    --mat-slide-toggle-state-layer-size: 2rem;
+    --mat-slide-toggle-touch-target-display: block;
+    --mat-slide-toggle-touch-target-size: 2.75rem;
+
+    --mat-slide-toggle-disabled-track-opacity: 1;
+    --mat-slide-toggle-disabled-handle-opacity: 0.55;
+    --mat-slide-toggle-disabled-selected-handle-opacity: 0.55;
+    --mat-slide-toggle-disabled-unselected-handle-opacity: 0.55;
+    --mat-slide-toggle-disabled-selected-track-color: hsl(var(--muted));
+    --mat-slide-toggle-disabled-unselected-track-color: hsl(var(--muted));
+    --mat-slide-toggle-disabled-selected-handle-color: hsl(var(--muted-foreground));
+    --mat-slide-toggle-disabled-unselected-handle-color: hsl(var(--muted-foreground));
+    --mat-slide-toggle-disabled-label-text-color: hsl(var(--muted-foreground));
+
+    --mat-slide-toggle-label-text-color: hsl(var(--foreground));
+    --mat-slide-toggle-label-text-font: var(--font-sans);
+    --mat-slide-toggle-label-text-line-height: 1.25rem;
+    --mat-slide-toggle-label-text-size: 0.875rem;
+    --mat-slide-toggle-label-text-tracking: 0;
+    --mat-slide-toggle-label-text-weight: 500;
+  }
+
+  [data-style='sharp'] {
+    --ui-mat-slide-toggle-track-radius: 0;
+    --ui-mat-slide-toggle-handle-radius: 0;
+
+    --mat-slide-toggle-track-shape: 0;
+    --mat-slide-toggle-handle-shape: 0;
+    --mat-slide-toggle-handle-elevation-shadow: none;
+  }
+
+  [data-style='brutal'] {
+    --ui-mat-slide-toggle-track-border-color: hsl(var(--foreground));
+    --ui-mat-slide-toggle-track-border-width: var(--border-width);
+    --ui-mat-slide-toggle-track-radius: 0;
+    --ui-mat-slide-toggle-handle-radius: 0;
+    --ui-mat-slide-toggle-focus-outline-color: hsl(var(--foreground));
+
+    --mat-slide-toggle-selected-track-color: hsl(var(--foreground));
+    --mat-slide-toggle-selected-hover-track-color: hsl(var(--foreground));
+    --mat-slide-toggle-selected-focus-track-color: hsl(var(--foreground));
+    --mat-slide-toggle-selected-pressed-track-color: hsl(var(--foreground));
+    --mat-slide-toggle-track-shape: 0;
+    --mat-slide-toggle-handle-shape: 0;
+    --mat-slide-toggle-selected-handle-color: hsl(var(--background));
+    --mat-slide-toggle-selected-hover-handle-color: hsl(var(--primary));
+    --mat-slide-toggle-selected-focus-handle-color: hsl(var(--primary));
+    --mat-slide-toggle-selected-pressed-handle-color: hsl(var(--primary));
+    --mat-slide-toggle-unselected-track-color: hsl(var(--background));
+    --mat-slide-toggle-unselected-hover-track-color: hsl(var(--background));
+    --mat-slide-toggle-unselected-focus-track-color: hsl(var(--background));
+    --mat-slide-toggle-unselected-pressed-track-color: hsl(var(--background));
+    --mat-slide-toggle-unselected-handle-color: hsl(var(--foreground));
+    --mat-slide-toggle-unselected-hover-handle-color: hsl(var(--foreground));
+    --mat-slide-toggle-unselected-focus-handle-color: hsl(var(--foreground));
+    --mat-slide-toggle-unselected-pressed-handle-color: hsl(var(--foreground));
+    --mat-slide-toggle-handle-elevation-shadow: var(--shadow-sm);
+    --mat-slide-toggle-selected-hover-state-layer-color: hsl(var(--foreground));
+    --mat-slide-toggle-unselected-hover-state-layer-color: hsl(var(--foreground));
+  }
+
+  [data-style='soft'] {
+    --ui-mat-slide-toggle-track-border-color: hsl(var(--border) / 0.7);
+
+    --mat-slide-toggle-track-width: 2.5rem;
+    --mat-slide-toggle-track-height: 1.375rem;
+    --mat-slide-toggle-handle-width: 1.125rem;
+    --mat-slide-toggle-handle-height: 1.125rem;
+    --mat-slide-toggle-selected-handle-size: 1.125rem;
+    --mat-slide-toggle-unselected-handle-size: 1.125rem;
+    --mat-slide-toggle-with-icon-handle-size: 1.125rem;
+    --mat-slide-toggle-pressed-handle-size: 1.25rem;
+    --mat-slide-toggle-unselected-track-color: hsl(var(--accent) / 0.72);
+    --mat-slide-toggle-unselected-hover-track-color: hsl(var(--accent) / 0.82);
+    --mat-slide-toggle-handle-elevation-shadow: 0 2px 6px hsl(var(--foreground) / 0.14);
+  }
+}
+
+@layer components {
+  .mat-mdc-slide-toggle {
+    @apply inline-flex align-middle text-foreground;
+  }
+
+  .mat-mdc-slide-toggle .mat-internal-form-field {
+    @apply inline-flex items-center gap-2;
+  }
+
+  .mat-mdc-slide-toggle .mdc-switch {
+    @apply shrink-0 transition-transform;
+  }
+
+  .mat-mdc-slide-toggle .mdc-switch:enabled:hover,
+  .mat-mdc-slide-toggle.mat-mdc-slide-toggle-focused .mdc-switch:enabled {
+    transform: translateY(-1px);
+  }
+
+  .mat-mdc-slide-toggle .mdc-switch:focus-visible {
+    outline: 2px solid var(--ui-mat-slide-toggle-focus-outline-color);
+    outline-offset: 3px;
+  }
+
+  .mat-mdc-slide-toggle .mdc-switch__track {
+    @apply transition-colors;
+  }
+
+  .mat-mdc-slide-toggle .mdc-switch__handle::before,
+  .mat-mdc-slide-toggle .mdc-switch__handle::after,
+  .mat-mdc-slide-toggle .mdc-switch__shadow {
+    border-radius: inherit;
+  }
+
+  .mat-mdc-slide-toggle .mdc-switch__ripple,
+  .mat-mdc-slide-toggle .mat-mdc-slide-toggle-ripple,
+  .mat-mdc-slide-toggle .mdc-switch__ripple::after,
+  .mat-mdc-slide-toggle .mat-focus-indicator::before {
+    border-radius: var(--ui-mat-slide-toggle-handle-radius);
+  }
+
+  .mat-mdc-slide-toggle .mdc-label {
+    @apply cursor-pointer p-0 text-sm font-medium;
+  }
+
+  .mat-mdc-slide-toggle.mat-mdc-slide-toggle-disabled-interactive,
+  .mat-mdc-slide-toggle:has(.mdc-switch--disabled) {
+    @apply opacity-70;
+  }
+
+  .mat-mdc-slide-toggle[aria-invalid='true'] {
+    --ui-mat-slide-toggle-track-border-color: hsl(var(--destructive) / 0.7);
+    --ui-mat-slide-toggle-focus-outline-color: hsl(var(--destructive));
+    --mat-slide-toggle-selected-track-color: hsl(var(--destructive));
+    --mat-slide-toggle-selected-hover-track-color: hsl(var(--destructive));
+    --mat-slide-toggle-selected-focus-track-color: hsl(var(--destructive));
+    --mat-slide-toggle-selected-pressed-track-color: hsl(var(--destructive));
+    --mat-slide-toggle-selected-handle-color: hsl(var(--destructive-foreground));
+    --mat-slide-toggle-selected-hover-handle-color: hsl(var(--destructive-foreground));
+    --mat-slide-toggle-selected-focus-handle-color: hsl(var(--destructive-foreground));
+    --mat-slide-toggle-selected-pressed-handle-color: hsl(var(--destructive-foreground));
+    --mat-slide-toggle-unselected-track-color: hsl(var(--destructive) / 0.16);
+    --mat-slide-toggle-unselected-hover-track-color: hsl(var(--destructive) / 0.2);
+    --mat-slide-toggle-unselected-focus-track-color: hsl(var(--destructive) / 0.2);
+    --mat-slide-toggle-unselected-pressed-track-color: hsl(var(--destructive) / 0.24);
+    --mat-slide-toggle-unselected-handle-color: hsl(var(--destructive));
+    --mat-slide-toggle-unselected-hover-handle-color: hsl(var(--destructive));
+    --mat-slide-toggle-unselected-focus-handle-color: hsl(var(--destructive));
+    --mat-slide-toggle-unselected-pressed-handle-color: hsl(var(--destructive));
+    --mat-slide-toggle-label-text-color: hsl(var(--destructive));
+  }
+
+  [data-style='sharp'] .mat-mdc-slide-toggle .mdc-switch:enabled:hover,
+  [data-style='sharp'] .mat-mdc-slide-toggle.mat-mdc-slide-toggle-focused .mdc-switch:enabled {
+    transform: none;
+  }
+}