@ojiepermana/angular 22.0.1 → 22.0.27

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

@@ -1,229 +0,0 @@
-/**
- * Angular Material tabs overrides.
- *
- * MatTabGroup and MatTabNav keep their ARIA tabs behavior, keyboard handling,
- * pagination, and ink bar logic while the header adopts local theme tokens.
- */
-@layer tokens {
-  :root,
-  [data-style='default'] {
-    --mat-tab-container-height: 2.25rem;
-    --mat-tab-divider-color: transparent;
-    --mat-tab-divider-height: 0;
-    --mat-tab-active-indicator-color: hsl(var(--primary));
-    --mat-tab-active-indicator-height: 0;
-    --mat-tab-active-indicator-shape: var(--radius-sm);
-    --mat-tab-active-label-text-color: hsl(var(--foreground));
-    --mat-tab-active-hover-label-text-color: hsl(var(--foreground));
-    --mat-tab-active-focus-label-text-color: hsl(var(--foreground));
-    --mat-tab-active-hover-indicator-color: hsl(var(--primary));
-    --mat-tab-active-focus-indicator-color: hsl(var(--primary));
-    --mat-tab-inactive-label-text-color: hsl(var(--muted-foreground));
-    --mat-tab-inactive-hover-label-text-color: hsl(var(--foreground));
-    --mat-tab-inactive-focus-label-text-color: hsl(var(--foreground));
-    --mat-tab-active-ripple-color: hsl(var(--foreground));
-    --mat-tab-inactive-ripple-color: hsl(var(--foreground));
-    --mat-tab-disabled-ripple-color: hsl(var(--muted-foreground));
-    --mat-tab-pagination-icon-color: hsl(var(--muted-foreground));
-    --mat-tab-label-text-font: var(--font-sans);
-    --mat-tab-label-text-line-height: 1.25rem;
-    --mat-tab-label-text-size: 0.875rem;
-    --mat-tab-label-text-tracking: 0;
-    --mat-tab-label-text-weight: 500;
-
-    --ui-mat-tabs-list-background: hsl(var(--muted));
-    --ui-mat-tabs-list-border-color: transparent;
-    --ui-mat-tabs-list-border-width: 0;
-    --ui-mat-tabs-list-padding: 0.25rem;
-    --ui-mat-tabs-list-radius: var(--radius-md);
-    --ui-mat-tabs-trigger-radius: var(--radius-sm);
-    --ui-mat-tabs-trigger-active-background: hsl(var(--background));
-    --ui-mat-tabs-trigger-active-shadow: var(--shadow-sm);
-    --ui-mat-tabs-trigger-hover-background: hsl(var(--accent) / 0.62);
-    --ui-mat-tabs-trigger-focus-ring-color: hsl(var(--ring));
-    --ui-mat-tabs-content-gap: 1rem;
-    --ui-mat-tabs-line-divider-color: hsl(var(--border));
-  }
-
-  [data-style='sharp'] {
-    --ui-mat-tabs-list-radius: 0;
-    --ui-mat-tabs-trigger-radius: 0;
-    --ui-mat-tabs-trigger-active-shadow: none;
-    --ui-mat-tabs-trigger-hover-background: hsl(var(--muted));
-  }
-
-  [data-style='brutal'] {
-    --mat-tab-active-indicator-height: 0;
-    --ui-mat-tabs-list-background: hsl(var(--background));
-    --ui-mat-tabs-list-border-color: hsl(var(--foreground));
-    --ui-mat-tabs-list-border-width: var(--border-width);
-    --ui-mat-tabs-list-radius: 0;
-    --ui-mat-tabs-trigger-radius: 0;
-    --ui-mat-tabs-trigger-active-background: hsl(var(--primary));
-    --ui-mat-tabs-trigger-active-shadow: var(--shadow-lg);
-    --ui-mat-tabs-trigger-hover-background: hsl(var(--primary) / 0.14);
-    --ui-mat-tabs-line-divider-color: hsl(var(--foreground));
-  }
-
-  [data-style='soft'] {
-    --ui-mat-tabs-list-background: hsl(var(--accent) / 0.48);
-    --ui-mat-tabs-list-radius: var(--radius-lg);
-    --ui-mat-tabs-trigger-radius: var(--radius-md);
-    --ui-mat-tabs-trigger-active-background: hsl(var(--popover));
-    --ui-mat-tabs-trigger-hover-background: hsl(var(--accent) / 0.72);
-  }
-}
-
-@layer components {
-  .mat-mdc-tab-group,
-  .mat-mdc-tab-nav-bar {
-    @apply text-foreground;
-  }
-
-  .mat-mdc-tab-header,
-  .mat-mdc-tab-nav-bar {
-    @apply border bg-muted p-1;
-
-    border-color: var(--ui-mat-tabs-list-border-color);
-    border-width: var(--ui-mat-tabs-list-border-width);
-    border-radius: var(--ui-mat-tabs-list-radius);
-    background-color: var(--ui-mat-tabs-list-background);
-    padding: var(--ui-mat-tabs-list-padding);
-  }
-
-  .mat-mdc-tab-header {
-    border-bottom-width: var(--ui-mat-tabs-list-border-width);
-  }
-
-  .mat-mdc-tab-label-container {
-    @apply border-0;
-  }
-
-  .mat-mdc-tab-labels {
-    @apply gap-1;
-  }
-
-  .mat-mdc-tab,
-  .mat-mdc-tab-link {
-    @apply min-w-0 px-3 text-sm font-medium transition-colors;
-
-    min-width: 0 !important;
-    height: var(--mat-tab-container-height);
-    --mat-focus-indicator-border-radius: var(--ui-mat-tabs-trigger-radius);
-    border-radius: var(--ui-mat-tabs-trigger-radius);
-    opacity: 1 !important;
-  }
-
-  .mat-mdc-tab .mdc-tab__ripple,
-  .mat-mdc-tab-link .mdc-tab__ripple,
-  .mat-mdc-tab .mat-mdc-tab-ripple,
-  .mat-mdc-tab-link .mat-mdc-tab-ripple {
-    @apply overflow-hidden;
-
-    border-radius: inherit;
-  }
-
-  .mat-mdc-tab .mdc-tab__ripple::before,
-  .mat-mdc-tab-link .mdc-tab__ripple::before {
-    border-radius: inherit;
-  }
-
-  .mat-mdc-tab .mdc-tab__content,
-  .mat-mdc-tab-link .mdc-tab__content {
-    @apply min-w-0 gap-2;
-  }
-
-  .mat-mdc-tab .mdc-tab__text-label,
-  .mat-mdc-tab-link .mdc-tab__text-label {
-    @apply min-w-0 truncate;
-  }
-
-  .mat-mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled):hover,
-  .mat-mdc-tab-link:not(.mdc-tab--active):not(.mat-mdc-tab-disabled):hover {
-    background-color: var(--ui-mat-tabs-trigger-hover-background) !important;
-  }
-
-  .mat-mdc-tab.mdc-tab--active,
-  .mat-mdc-tab-link.mdc-tab--active {
-    background-color: var(--ui-mat-tabs-trigger-active-background) !important;
-    box-shadow: var(--ui-mat-tabs-trigger-active-shadow);
-  }
-
-  [data-style='brutal'] .mat-mdc-tab.mdc-tab--active,
-  [data-style='brutal'] .mat-mdc-tab-link.mdc-tab--active {
-    --mat-tab-active-label-text-color: hsl(var(--primary-foreground));
-    --mat-tab-active-hover-label-text-color: hsl(var(--primary-foreground));
-    --mat-tab-active-focus-label-text-color: hsl(var(--primary-foreground));
-  }
-
-  .mat-mdc-tab:focus-visible,
-  .mat-mdc-tab-link:focus-visible {
-    outline: 2px solid var(--ui-mat-tabs-trigger-focus-ring-color);
-    outline-offset: 2px;
-  }
-
-  .mat-mdc-tab.mat-mdc-tab-disabled,
-  .mat-mdc-tab-link.mat-mdc-tab-disabled {
-    @apply pointer-events-none opacity-50;
-  }
-
-  .mat-mdc-tab-group:not(.ui-mat-tabs-line) .mdc-tab-indicator,
-  .mat-mdc-tab-nav-bar:not(.ui-mat-tabs-line) .mdc-tab-indicator {
-    display: none;
-  }
-
-  .ui-mat-tabs-line.mat-mdc-tab-group,
-  .ui-mat-tabs-line.mat-mdc-tab-nav-bar {
-    --mat-tab-container-height: 2.75rem;
-    --mat-tab-active-indicator-height: 2px;
-    --mat-tab-divider-color: var(--ui-mat-tabs-line-divider-color);
-    --mat-tab-divider-height: var(--border-width);
-    --ui-mat-tabs-list-background: transparent;
-    --ui-mat-tabs-list-border-color: var(--ui-mat-tabs-line-divider-color);
-    --ui-mat-tabs-list-border-width: 0 0 var(--border-width);
-    --ui-mat-tabs-list-padding: 0;
-    --ui-mat-tabs-list-radius: 0;
-    --ui-mat-tabs-trigger-active-background: transparent;
-    --ui-mat-tabs-trigger-active-shadow: none;
-  }
-
-  .ui-mat-tabs-line .mat-mdc-tab-header,
-  .mat-mdc-tab-nav-bar.ui-mat-tabs-line {
-    @apply rounded-none border-x-0 border-t-0 bg-transparent p-0;
-  }
-
-  .ui-mat-tabs-line .mat-mdc-tab,
-  .mat-mdc-tab-nav-bar.ui-mat-tabs-line .mat-mdc-tab-link {
-    @apply rounded-none px-4;
-  }
-
-  .mat-mdc-tab-body-wrapper {
-    margin-top: var(--ui-mat-tabs-content-gap);
-  }
-
-  .mat-mdc-tab-body-content {
-    @apply text-sm text-muted-foreground;
-
-    line-height: 1.5rem;
-    outline: none;
-  }
-
-  .mat-mdc-tab-body-content:focus-visible {
-    outline: 2px solid var(--ui-mat-tabs-trigger-focus-ring-color);
-    outline-offset: 2px;
-  }
-
-  .mat-mdc-tab-header-pagination {
-    @apply rounded-sm text-muted-foreground transition-colors;
-
-    min-width: 2rem;
-  }
-
-  .mat-mdc-tab-header-pagination:hover {
-    @apply bg-accent text-accent-foreground;
-  }
-
-  .mat-mdc-tab-header-pagination-disabled {
-    @apply opacity-40;
-  }
-}

package/theme/styles/integrations/material.css

@@ -1,264 +0,0 @@
-@import './material/autocomplete.css';
-@import './material/button.css';
-@import './material/dialog.css';
-@import './material/select.css';
-@import './material/slide-toggle.css';
-@import './material/slider.css';
-@import './material/tabs.css';
-
-/**
- * Angular Material bridge for the 3-layer theme tokens.
- *
- * Keep this file as the public Material index. Component-specific overrides
- * live in ./material/*.css so each Material component can be maintained in a
- * small file while consumers keep importing one stylesheet.
- */
-@layer tokens {
-  :root {
-    /* Material system colors. */
-    --mat-sys-primary: hsl(var(--primary));
-    --mat-sys-on-primary: hsl(var(--primary-foreground));
-    --mat-sys-primary-container: hsl(var(--accent));
-    --mat-sys-on-primary-container: hsl(var(--accent-foreground));
-
-    --mat-sys-secondary: hsl(var(--secondary));
-    --mat-sys-on-secondary: hsl(var(--secondary-foreground));
-    --mat-sys-secondary-container: hsl(var(--secondary));
-    --mat-sys-on-secondary-container: hsl(var(--secondary-foreground));
-
-    --mat-sys-tertiary: hsl(var(--accent));
-    --mat-sys-on-tertiary: hsl(var(--accent-foreground));
-
-    --mat-sys-error: hsl(var(--destructive));
-    --mat-sys-on-error: hsl(var(--destructive-foreground));
-    --mat-sys-error-container: hsl(var(--destructive));
-    --mat-sys-on-error-container: hsl(var(--destructive-foreground));
-
-    --mat-sys-background: hsl(var(--background));
-    --mat-sys-on-background: hsl(var(--foreground));
-    --mat-sys-surface: hsl(var(--card));
-    --mat-sys-surface-dim: hsl(var(--muted));
-    --mat-sys-surface-bright: hsl(var(--card));
-    --mat-sys-surface-container-lowest: hsl(var(--background));
-    --mat-sys-surface-container-low: hsl(var(--card));
-    --mat-sys-surface-container: hsl(var(--muted));
-    --mat-sys-surface-container-high: hsl(var(--muted));
-    --mat-sys-surface-container-highest: hsl(var(--accent));
-    --mat-sys-on-surface: hsl(var(--foreground));
-    --mat-sys-on-surface-variant: hsl(var(--muted-foreground));
-
-    --mat-sys-outline: hsl(var(--border));
-    --mat-sys-outline-variant: hsl(var(--border) / 0.72);
-
-    --mat-sys-inverse-surface: hsl(var(--foreground));
-    --mat-sys-inverse-on-surface: hsl(var(--background));
-    --mat-sys-inverse-primary: hsl(var(--primary-foreground));
-
-    --mat-sys-shadow: hsl(var(--foreground) / 0.14);
-    --mat-sys-scrim: hsl(var(--foreground) / 0.5);
-
-    --mat-sys-hover-state-layer-opacity: 0.08;
-    --mat-sys-focus-state-layer-opacity: 0.12;
-    --mat-sys-pressed-state-layer-opacity: 0.12;
-    --mat-sys-dragged-state-layer-opacity: 0.16;
-
-    /* Shape and elevation inherit from the active style axis. */
-    --mat-sys-corner-none: 0;
-    --mat-sys-corner-extra-small: var(--radius-sm);
-    --mat-sys-corner-extra-small-top: var(--radius-sm) var(--radius-sm) 0 0;
-    --mat-sys-corner-small: var(--radius-sm);
-    --mat-sys-corner-medium: var(--radius-md);
-    --mat-sys-corner-large: var(--radius-lg);
-    --mat-sys-corner-large-top: var(--radius-lg) var(--radius-lg) 0 0;
-    --mat-sys-corner-extra-large: calc(var(--radius-lg) + 0.375rem);
-    --mat-sys-corner-extra-large-top: calc(var(--radius-lg) + 0.375rem) calc(var(--radius-lg) + 0.375rem) 0 0;
-    --mat-sys-corner-full: 9999px;
-
-    --mat-sys-level0: none;
-    --mat-sys-level1: var(--shadow-sm);
-    --mat-sys-level2: var(--shadow);
-    --mat-sys-level3: var(--shadow-md);
-    --mat-sys-level4: var(--shadow-lg);
-    --mat-sys-level5: var(--shadow-lg);
-
-    /* Cards and dialogs. */
-    --mdc-elevated-card-container-color: hsl(var(--card));
-    --mdc-elevated-card-container-shape: var(--radius-md);
-    --mdc-elevated-card-container-elevation: var(--shadow);
-
-    --mdc-outlined-card-container-color: hsl(var(--card));
-    --mdc-outlined-card-outline-color: hsl(var(--border));
-    --mdc-outlined-card-container-shape: var(--radius-md);
-
-    --mdc-dialog-container-color: hsl(var(--popover));
-    --mdc-dialog-container-shape: var(--radius-lg);
-    --mdc-dialog-subhead-color: hsl(var(--popover-foreground));
-    --mdc-dialog-supporting-text-color: hsl(var(--muted-foreground));
-
-    /* Text fields and select surfaces. */
-    --mdc-outlined-text-field-outline-color: hsl(var(--border));
-    --mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));
-    --mdc-outlined-text-field-hover-outline-color: hsl(var(--foreground) / 0.3);
-    --mdc-outlined-text-field-label-text-color: hsl(var(--muted-foreground));
-    --mdc-outlined-text-field-input-text-color: hsl(var(--foreground));
-    --mdc-outlined-text-field-caret-color: hsl(var(--primary));
-    --mdc-outlined-text-field-container-shape: var(--radius-sm);
-
-    --mdc-filled-text-field-container-color: hsl(var(--muted));
-    --mdc-filled-text-field-label-text-color: hsl(var(--muted-foreground));
-    --mdc-filled-text-field-input-text-color: hsl(var(--foreground));
-
-    --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));
-
-    /* Option rows shared by select and autocomplete. Component files may scope these further. */
-    --mat-option-label-text-color: hsl(var(--foreground));
-    --mat-option-label-text-font: var(--font-sans);
-    --mat-option-label-text-line-height: 1.25rem;
-    --mat-option-label-text-size: 0.875rem;
-    --mat-option-label-text-tracking: 0;
-    --mat-option-label-text-weight: 400;
-    --mat-option-selected-state-label-text-color: hsl(var(--primary));
-    --mat-option-hover-state-layer-color: hsl(var(--accent));
-    --mat-option-focus-state-layer-color: hsl(var(--accent));
-    --mat-option-selected-state-layer-color: hsl(var(--accent));
-
-    /* Selection controls. */
-    --mdc-checkbox-selected-icon-color: hsl(var(--primary));
-    --mdc-checkbox-selected-hover-icon-color: hsl(var(--primary));
-    --mdc-checkbox-selected-focus-icon-color: hsl(var(--primary));
-    --mdc-checkbox-selected-checkmark-color: hsl(var(--primary-foreground));
-    --mdc-checkbox-unselected-icon-color: hsl(var(--muted-foreground));
-
-    --mdc-radio-selected-icon-color: hsl(var(--primary));
-    --mdc-radio-selected-hover-icon-color: hsl(var(--primary));
-    --mdc-radio-unselected-icon-color: hsl(var(--muted-foreground));
-
-    --mdc-chip-elevated-container-color: hsl(var(--secondary));
-    --mdc-chip-label-text-color: hsl(var(--secondary-foreground));
-    --mdc-chip-container-shape-radius: var(--radius-sm);
-
-    /* Navigation and overlays. */
-    --mdc-snackbar-container-color: hsl(var(--foreground));
-    --mdc-snackbar-supporting-text-color: hsl(var(--background));
-    --mdc-snackbar-container-shape: var(--radius-md);
-
-    --mat-menu-container-color: hsl(var(--popover));
-    --mat-menu-item-label-text-color: hsl(var(--popover-foreground));
-    --mat-menu-container-shape: var(--radius-md);
-
-    --mdc-toolbar-container-color: hsl(var(--background));
-    --mdc-toolbar-title-text-color: hsl(var(--foreground));
-
-    --mat-sidenav-container-background-color: hsl(var(--background));
-    --mat-sidenav-content-background-color: hsl(var(--background));
-    --mat-sidenav-container-text-color: hsl(var(--foreground));
-    --mat-sidenav-container-divider-color: hsl(var(--border));
-
-    --mdc-list-list-item-label-text-color: hsl(var(--foreground));
-    --mdc-list-list-item-supporting-text-color: hsl(var(--muted-foreground));
-    --mdc-list-list-item-hover-state-layer-color: hsl(var(--accent));
-
-    --mdc-plain-tooltip-container-color: hsl(var(--foreground));
-    --mdc-plain-tooltip-supporting-text-color: hsl(var(--background));
-
-    /* Data display and progress. */
-    --mdc-linear-progress-active-indicator-color: hsl(var(--primary));
-    --mdc-linear-progress-track-color: hsl(var(--muted));
-    --mdc-circular-progress-active-indicator-color: hsl(var(--primary));
-
-    --mat-divider-color: hsl(var(--border));
-    --mat-ripple-color: hsl(var(--foreground) / 0.1);
-
-    --mat-table-background-color: hsl(var(--card));
-    --mat-table-header-headline-color: hsl(var(--foreground));
-    --mat-table-row-item-label-text-color: hsl(var(--foreground));
-    --mat-table-row-item-outline-color: hsl(var(--border));
-
-    --mat-paginator-container-background-color: hsl(var(--card));
-    --mat-paginator-container-text-color: hsl(var(--muted-foreground));
-    --mat-paginator-enabled-icon-color: hsl(var(--foreground));
-
-    --mat-sort-header-arrow-color: hsl(var(--muted-foreground));
-
-    --mat-expansion-container-background-color: hsl(var(--card));
-    --mat-expansion-container-text-color: hsl(var(--foreground));
-    --mat-expansion-header-text-color: hsl(var(--foreground));
-    --mat-expansion-header-description-color: hsl(var(--muted-foreground));
-
-    --mat-stepper-container-color: hsl(var(--background));
-    --mat-stepper-header-selected-state-icon-background-color: hsl(var(--primary));
-    --mat-stepper-header-selected-state-icon-foreground-color: hsl(var(--primary-foreground));
-
-    --mat-badge-background-color: hsl(var(--primary));
-    --mat-badge-text-color: hsl(var(--primary-foreground));
-
-    --mat-datepicker-calendar-container-background-color: hsl(var(--popover));
-    --mat-datepicker-calendar-container-text-color: hsl(var(--popover-foreground));
-    --mat-datepicker-calendar-date-selected-state-background-color: hsl(var(--primary));
-    --mat-datepicker-calendar-date-selected-state-text-color: hsl(var(--primary-foreground));
-    --mat-datepicker-calendar-date-today-outline-color: hsl(var(--ring));
-  }
-}
-
-@layer components {
-  .mat-mdc-snack-bar-container.ui-toast-panel {
-    --mdc-snackbar-container-color: hsl(var(--background));
-    --mdc-snackbar-supporting-text-color: hsl(var(--foreground));
-    --mat-snack-bar-button-color: hsl(var(--foreground));
-  }
-
-  .mat-mdc-snack-bar-container.ui-toast-panel .mdc-snackbar__surface {
-    @apply border border-border;
-  }
-
-  .mat-mdc-snack-bar-container.ui-toast-panel .mdc-snackbar__label {
-    white-space: pre-line;
-  }
-
-  .mat-mdc-snack-bar-container.ui-toast-success {
-    --mdc-snackbar-container-color: hsl(var(--primary));
-    --mdc-snackbar-supporting-text-color: hsl(var(--primary-foreground));
-    --mat-snack-bar-button-color: hsl(var(--primary-foreground));
-  }
-
-  .mat-mdc-snack-bar-container.ui-toast-destructive {
-    --mdc-snackbar-container-color: hsl(var(--destructive));
-    --mdc-snackbar-supporting-text-color: hsl(var(--destructive-foreground));
-    --mat-snack-bar-button-color: hsl(var(--destructive-foreground));
-  }
-
-  .mat-mdc-snack-bar-container.ui-toast-info {
-    --mdc-snackbar-container-color: hsl(var(--info));
-    --mdc-snackbar-supporting-text-color: hsl(var(--info-foreground));
-    --mat-snack-bar-button-color: hsl(var(--info-foreground));
-  }
-
-  .mat-mdc-snack-bar-container.ui-toast-warning {
-    --mdc-snackbar-container-color: hsl(var(--warning));
-    --mdc-snackbar-supporting-text-color: hsl(var(--warning-foreground));
-    --mat-snack-bar-button-color: hsl(var(--warning-foreground));
-  }
-
-  [data-style='brutal'] .mat-mdc-card,
-  [data-style='brutal'] .mat-mdc-snack-bar-container .mdc-snackbar__surface {
-    box-shadow: var(--shadow-lg) !important;
-    border: var(--border-width) solid hsl(var(--foreground));
-  }
-
-  [data-style='soft'] .mat-mdc-card,
-  [data-style='soft'] .mat-mdc-snack-bar-container .mdc-snackbar__surface {
-    box-shadow: var(--shadow-lg) !important;
-  }
-
-  [data-style='sharp'] .mat-mdc-card,
-  [data-style='sharp'] .mat-mdc-raised-button,
-  [data-style='sharp'] .mat-mdc-unelevated-button,
-  [data-style='sharp'] .mat-mdc-fab,
-  [data-style='sharp'] .mat-mdc-mini-fab,
-  [data-style='sharp'] .mat-mdc-snack-bar-container .mdc-snackbar__surface {
-    box-shadow: none !important;
-  }
-}

package/theme/styles/integrations/tailwind.css

@@ -1,114 +0,0 @@
-/**
- * Tailwind v4 theme mapping for @ojiepermana/angular/theme.
- *
- * Requires Tailwind CSS ^4.3.0.
- *
- * Usage (styles.css):
- *   @import '@ojiepermana/angular/theme/styles';
- *   @import 'tailwindcss';
- *   @import '@ojiepermana/angular/theme/tailwind/theme.css';
- *
- * Maps the 3-layer HSL CSS variables onto Tailwind v4 design tokens so
- * utilities like `bg-primary`, `text-foreground`, `rounded-md`, and
- * `shadow-lg` resolve to the active theme automatically.
- */
-@custom-variant dark (&:where([data-mode='dark'], [data-mode='dark'] *, .dark, .dark *));
-
-@theme inline {
-  --color-brand: hsl(var(--brand) / 0.7);
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-  --color-background: hsl(var(--background));
-  --color-surface: hsl(var(--surface, var(--muted)));
-  --color-surface-foreground: hsl(var(--surface-foreground, var(--foreground)));
-  --color-foreground: hsl(var(--foreground));
-
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-
-  --color-success: hsl(var(--success));
-  --color-success-foreground: hsl(var(--success-foreground));
-
-  --color-warning: hsl(var(--warning));
-  --color-warning-foreground: hsl(var(--warning-foreground));
-
-  --color-info: hsl(var(--info));
-  --color-info-foreground: hsl(var(--info-foreground));
-
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-
-  --color-chart-1: hsl(var(--chart-1));
-  --color-chart-2: hsl(var(--chart-2));
-  --color-chart-3: hsl(var(--chart-3));
-  --color-chart-4: hsl(var(--chart-4));
-  --color-chart-5: hsl(var(--chart-5));
-
-  --color-sidebar: hsl(var(--sidebar-background));
-  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
-  --color-sidebar-primary: hsl(var(--sidebar-primary));
-  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
-  --color-sidebar-accent: hsl(var(--sidebar-accent));
-  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
-  --color-sidebar-border: hsl(var(--sidebar-border));
-  --color-sidebar-ring: hsl(var(--sidebar-ring));
-
-  --radius: var(--theme-radius-md);
-  --radius-xs: var(--theme-radius-xs);
-  --radius-sm: var(--theme-radius-sm);
-  --radius-md: var(--theme-radius-md);
-  --radius-lg: var(--theme-radius-lg);
-  --radius-xl: calc(var(--theme-radius-lg) + 0.375rem);
-
-  --shadow-sm: var(--theme-shadow-sm);
-  --shadow: var(--theme-shadow);
-  --shadow-md: var(--theme-shadow-md);
-  --shadow-lg: var(--theme-shadow-lg);
-  --shadow-xl: var(--theme-shadow-lg);
-
-  --text-xs: calc(0.75rem * var(--theme-text-scale));
-  --text-xs--line-height: calc(1 / 0.75);
-  --text-sm: calc(0.875rem * var(--theme-text-scale));
-  --text-sm--line-height: calc(1.25 / 0.875);
-  --text-base: calc(1rem * var(--theme-text-scale));
-  --text-base--line-height: calc(1.5 / 1);
-  --text-lg: calc(1.125rem * var(--theme-text-scale));
-  --text-lg--line-height: calc(1.75 / 1.125);
-  --text-xl: calc(1.25rem * var(--theme-text-scale));
-  --text-xl--line-height: calc(1.75 / 1.25);
-  --text-2xl: calc(1.5rem * var(--theme-text-scale));
-  --text-2xl--line-height: calc(2 / 1.5);
-  --text-3xl: calc(1.875rem * var(--theme-text-scale));
-  --text-3xl--line-height: calc(2.25 / 1.875);
-  --text-4xl: calc(2.25rem * var(--theme-text-scale));
-  --text-4xl--line-height: calc(2.5 / 2.25);
-  --text-5xl: calc(3rem * var(--theme-text-scale));
-  --text-5xl--line-height: 1;
-  --text-6xl: calc(3.75rem * var(--theme-text-scale));
-  --text-6xl--line-height: 1;
-  --text-7xl: calc(4.5rem * var(--theme-text-scale));
-  --text-7xl--line-height: 1;
-  --text-8xl: calc(6rem * var(--theme-text-scale));
-  --text-8xl--line-height: 1;
-  --text-9xl: calc(8rem * var(--theme-text-scale));
-  --text-9xl--line-height: 1;
-
-  --font-sans: var(--theme-font-sans);
-  --font-mono: var(--theme-font-mono);
-}

package/theme/styles/variants/color/amber.css

@@ -1,31 +0,0 @@
-@layer tokens {
-  [data-color='amber'] {
-    --primary: 44 100% 50%;
-    --primary-foreground: 21 97% 14%;
-    --accent: 44 100% 96%;
-    --accent-foreground: 30 100% 44%;
-    --secondary: 44 30% 96%;
-    --secondary-foreground: 30 100% 44%;
-    --ring: 44 100% 50%;
-    --theme-chart-1: 44 100% 50%;
-    --theme-chart-2: 25 100% 50%;
-    --theme-chart-3: 47 100% 50%;
-    --theme-chart-4: 80 100% 45%;
-    --theme-chart-5: 357 96% 58%;
-  }
-
-  [data-mode='dark'][data-color='amber'] {
-    --primary: 44 100% 50%;
-    --primary-foreground: 21 97% 14%;
-    --accent: 44 50% 18%;
-    --accent-foreground: 44 100% 50%;
-    --secondary: 44 30% 18%;
-    --secondary-foreground: 44 100% 50%;
-    --ring: 44 100% 50%;
-    --theme-chart-1: 44 100% 50%;
-    --theme-chart-2: 32 100% 51%;
-    --theme-chart-3: 47 100% 50%;
-    --theme-chart-4: 80 100% 45%;
-    --theme-chart-5: 359 100% 70%;
-  }
-}

package/theme/styles/variants/color/base.css

@@ -1,36 +0,0 @@
-/**
- * Base is the default Flux color layer.
- */
-@layer tokens {
-  :root,
-  [data-color='base'] {
-    --primary: 240 4% 16%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 240 5% 96%;
-    --accent-foreground: 240 4% 16%;
-    --secondary: 240 5% 96%;
-    --secondary-foreground: 240 4% 16%;
-    --ring: 240 4% 16%;
-    --theme-chart-1: 240 4% 16%;
-    --theme-chart-2: 216 100% 58%;
-    --theme-chart-3: 160 100% 30%;
-    --theme-chart-4: 44 100% 50%;
-    --theme-chart-5: 345 100% 56%;
-  }
-
-  :root[data-mode='dark']:not([data-color]),
-  [data-mode='dark'][data-color='base'] {
-    --primary: 0 0% 100%;
-    --primary-foreground: 240 4% 16%;
-    --accent: 240 4% 16%;
-    --accent-foreground: 0 0% 100%;
-    --secondary: 240 5% 20%;
-    --secondary-foreground: 0 0% 100%;
-    --ring: 0 0% 100%;
-    --theme-chart-1: 0 0% 100%;
-    --theme-chart-2: 212 100% 66%;
-    --theme-chart-3: 161 100% 42%;
-    --theme-chart-4: 44 100% 50%;
-    --theme-chart-5: 350 100% 69%;
-  }
-}