@ojiepermana/angular 21.3.4 → 22.0.27

package/theme/styles/integrations/material.css

@@ -1,254 +0,0 @@
-/**
- * Maps the 3-layer theme tokens into Angular Material system and MDC tokens.
- */
-@layer tokens {
-  :root {
-    --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-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);
-
-    --mdc-filled-button-container-color: hsl(var(--primary));
-    --mdc-filled-button-label-text-color: hsl(var(--primary-foreground));
-    --mdc-filled-button-container-shape: var(--radius-sm);
-
-    --mdc-outlined-button-outline-color: hsl(var(--border));
-    --mdc-outlined-button-label-text-color: hsl(var(--foreground));
-    --mdc-outlined-button-container-shape: var(--radius-sm);
-
-    --mdc-text-button-label-text-color: hsl(var(--foreground));
-
-    --mat-text-button-hover-state-layer-opacity: 0.08;
-    --mat-filled-button-hover-state-layer-opacity: 0.08;
-
-    --mdc-fab-container-color: hsl(var(--primary));
-    --mdc-fab-container-shape: var(--radius-md);
-    --mat-fab-foreground-color: hsl(var(--primary-foreground));
-
-    --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-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));
-
-    --mat-option-label-text-color: hsl(var(--foreground));
-    --mat-option-selected-state-label-text-color: hsl(var(--primary));
-    --mat-option-hover-state-layer-color: hsl(var(--accent));
-
-    --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-switch-selected-track-color: hsl(var(--primary));
-    --mdc-switch-selected-handle-color: hsl(var(--primary-foreground));
-    --mdc-switch-unselected-track-color: hsl(var(--muted));
-    --mdc-switch-unselected-handle-color: hsl(var(--background));
-
-    --mdc-slider-active-track-color: hsl(var(--primary));
-    --mdc-slider-inactive-track-color: hsl(var(--muted));
-    --mdc-slider-handle-color: hsl(var(--primary));
-
-    --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);
-
-    --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));
-
-    --mdc-tab-indicator-active-indicator-color: hsl(var(--primary));
-    --mat-tab-header-active-label-text-color: hsl(var(--foreground));
-    --mat-tab-header-inactive-label-text-color: hsl(var(--muted-foreground));
-    --mat-tab-header-active-ripple-color: hsl(var(--primary) / 0.1);
-
-    --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));
-
-    --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 {
-  [data-style='brutal'] .mat-mdc-raised-button,
-  [data-style='brutal'] .mat-mdc-unelevated-button,
-  [data-style='brutal'] .mat-mdc-outlined-button,
-  [data-style='brutal'] .mat-mdc-fab,
-  [data-style='brutal'] .mat-mdc-mini-fab {
-    box-shadow: var(--shadow) !important;
-    border: var(--border-width) solid hsl(var(--foreground));
-  }
-
-  [data-style='brutal'] .mat-mdc-raised-button:hover,
-  [data-style='brutal'] .mat-mdc-unelevated-button:hover,
-  [data-style='brutal'] .mat-mdc-outlined-button:hover,
-  [data-style='brutal'] .mat-mdc-fab:hover,
-  [data-style='brutal'] .mat-mdc-mini-fab:hover {
-    box-shadow: var(--shadow-md) !important;
-  }
-
-  [data-style='brutal'] .mat-mdc-raised-button:active,
-  [data-style='brutal'] .mat-mdc-unelevated-button:active,
-  [data-style='brutal'] .mat-mdc-outlined-button:active,
-  [data-style='brutal'] .mat-mdc-fab:active,
-  [data-style='brutal'] .mat-mdc-mini-fab:active {
-    transform: translate(2px, 2px);
-    box-shadow: none !important;
-  }
-
-  [data-style='brutal'] .mat-mdc-card,
-  [data-style='brutal'] .mat-mdc-dialog-container .mdc-dialog__surface,
-  [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-dialog-container .mdc-dialog__surface,
-  [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-dialog-container .mdc-dialog__surface,
-  [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%;
-  }
-}

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

@@ -1,31 +0,0 @@
-@layer tokens {
-  [data-color='blue'] {
-    --primary: 216 100% 58%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 216 100% 96%;
-    --accent-foreground: 221 97% 53%;
-    --secondary: 216 30% 96%;
-    --secondary-foreground: 221 97% 53%;
-    --ring: 216 100% 58%;
-    --theme-chart-1: 216 100% 58%;
-    --theme-chart-2: 202 100% 41%;
-    --theme-chart-3: 241 100% 69%;
-    --theme-chart-4: 192 100% 36%;
-    --theme-chart-5: 261 100% 66%;
-  }
-
-  [data-mode='dark'][data-color='blue'] {
-    --primary: 216 100% 58%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 216 50% 18%;
-    --accent-foreground: 212 100% 66%;
-    --secondary: 216 30% 18%;
-    --secondary-foreground: 212 100% 66%;
-    --ring: 216 100% 58%;
-    --theme-chart-1: 212 100% 66%;
-    --theme-chart-2: 196 100% 50%;
-    --theme-chart-3: 230 100% 82%;
-    --theme-chart-4: 188 100% 48%;
-    --theme-chart-5: 257 100% 76%;
-  }
-}

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

@@ -1,31 +0,0 @@
-@layer tokens {
-  [data-color='cyan'] {
-    --primary: 192 100% 36%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 192 100% 96%;
-    --accent-foreground: 192 100% 36%;
-    --secondary: 192 30% 96%;
-    --secondary-foreground: 192 100% 36%;
-    --ring: 192 100% 36%;
-    --theme-chart-1: 192 100% 36%;
-    --theme-chart-2: 202 100% 41%;
-    --theme-chart-3: 175 100% 29%;
-    --theme-chart-4: 216 100% 58%;
-    --theme-chart-5: 160 100% 30%;
-  }
-
-  [data-mode='dark'][data-color='cyan'] {
-    --primary: 192 100% 36%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 192 50% 18%;
-    --accent-foreground: 188 100% 48%;
-    --secondary: 192 30% 18%;
-    --secondary-foreground: 188 100% 48%;
-    --ring: 192 100% 36%;
-    --theme-chart-1: 188 100% 48%;
-    --theme-chart-2: 196 100% 50%;
-    --theme-chart-3: 173 100% 42%;
-    --theme-chart-4: 212 100% 66%;
-    --theme-chart-5: 161 100% 42%;
-  }
-}

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

@@ -1,31 +0,0 @@
-@layer tokens {
-  [data-color='emerald'] {
-    --primary: 160 100% 30%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 160 100% 96%;
-    --accent-foreground: 160 100% 30%;
-    --secondary: 160 30% 96%;
-    --secondary-foreground: 160 100% 30%;
-    --ring: 160 100% 30%;
-    --theme-chart-1: 160 100% 30%;
-    --theme-chart-2: 175 100% 29%;
-    --theme-chart-3: 142 100% 33%;
-    --theme-chart-4: 192 100% 36%;
-    --theme-chart-5: 80 100% 45%;
-  }
-
-  [data-mode='dark'][data-color='emerald'] {
-    --primary: 160 100% 30%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 160 50% 18%;
-    --accent-foreground: 161 100% 42%;
-    --secondary: 160 30% 18%;
-    --secondary-foreground: 161 100% 42%;
-    --ring: 160 100% 30%;
-    --theme-chart-1: 161 100% 42%;
-    --theme-chart-2: 173 100% 42%;
-    --theme-chart-3: 150 96% 45%;
-    --theme-chart-4: 188 100% 48%;
-    --theme-chart-5: 80 100% 45%;
-  }
-}

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

@@ -1,31 +0,0 @@
-@layer tokens {
-  [data-color='fuchsia'] {
-    --primary: 294 100% 44%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 294 100% 96%;
-    --accent-foreground: 294 100% 44%;
-    --secondary: 294 30% 96%;
-    --secondary-foreground: 294 100% 44%;
-    --ring: 294 100% 44%;
-    --theme-chart-1: 294 100% 44%;
-    --theme-chart-2: 329 100% 45%;
-    --theme-chart-3: 273 100% 64%;
-    --theme-chart-4: 345 100% 56%;
-    --theme-chart-5: 261 100% 66%;
-  }
-
-  [data-mode='dark'][data-color='fuchsia'] {
-    --primary: 294 100% 44%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 294 50% 18%;
-    --accent-foreground: 293 100% 71%;
-    --secondary: 294 30% 18%;
-    --secondary-foreground: 293 100% 71%;
-    --ring: 294 100% 44%;
-    --theme-chart-1: 293 100% 71%;
-    --theme-chart-2: 327 95% 69%;
-    --theme-chart-3: 271 100% 85%;
-    --theme-chart-4: 350 100% 69%;
-    --theme-chart-5: 257 100% 76%;
-  }
-}

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

@@ -1,31 +0,0 @@
-@layer tokens {
-  [data-color='green'] {
-    --primary: 142 100% 33%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 142 100% 96%;
-    --accent-foreground: 142 100% 33%;
-    --secondary: 142 30% 96%;
-    --secondary-foreground: 142 100% 33%;
-    --ring: 142 100% 33%;
-    --theme-chart-1: 142 100% 33%;
-    --theme-chart-2: 160 100% 30%;
-    --theme-chart-3: 80 100% 45%;
-    --theme-chart-4: 175 100% 29%;
-    --theme-chart-5: 47 100% 50%;
-  }
-
-  [data-mode='dark'][data-color='green'] {
-    --primary: 142 100% 33%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 142 50% 18%;
-    --accent-foreground: 150 96% 45%;
-    --secondary: 142 30% 18%;
-    --secondary-foreground: 150 96% 45%;
-    --ring: 142 100% 33%;
-    --theme-chart-1: 150 96% 45%;
-    --theme-chart-2: 161 100% 42%;
-    --theme-chart-3: 80 100% 45%;
-    --theme-chart-4: 173 100% 42%;
-    --theme-chart-5: 47 100% 50%;
-  }
-}

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

@@ -1,22 +0,0 @@
-/**
- * Layer 2: color.
- * Imports every color variant in a stable order.
- */
-@import './base.css';
-@import './red.css';
-@import './orange.css';
-@import './amber.css';
-@import './yellow.css';
-@import './lime.css';
-@import './green.css';
-@import './emerald.css';
-@import './teal.css';
-@import './cyan.css';
-@import './sky.css';
-@import './blue.css';
-@import './indigo.css';
-@import './violet.css';
-@import './purple.css';
-@import './fuchsia.css';
-@import './pink.css';
-@import './rose.css';

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

@@ -1,31 +0,0 @@
-@layer tokens {
-  [data-color='indigo'] {
-    --primary: 241 100% 69%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 241 100% 96%;
-    --accent-foreground: 247 92% 60%;
-    --secondary: 241 30% 96%;
-    --secondary-foreground: 247 92% 60%;
-    --ring: 241 100% 69%;
-    --theme-chart-1: 241 100% 69%;
-    --theme-chart-2: 261 100% 66%;
-    --theme-chart-3: 216 100% 58%;
-    --theme-chart-4: 273 100% 64%;
-    --theme-chart-5: 202 100% 41%;
-  }
-
-  [data-mode='dark'][data-color='indigo'] {
-    --primary: 241 100% 69%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 241 50% 18%;
-    --accent-foreground: 230 100% 82%;
-    --secondary: 241 30% 18%;
-    --secondary-foreground: 230 100% 82%;
-    --ring: 241 100% 69%;
-    --theme-chart-1: 230 100% 82%;
-    --theme-chart-2: 257 100% 76%;
-    --theme-chart-3: 212 100% 66%;
-    --theme-chart-4: 271 100% 85%;
-    --theme-chart-5: 196 100% 50%;
-  }
-}

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

@@ -1,31 +0,0 @@
-@layer tokens {
-  [data-color='lime'] {
-    --primary: 80 100% 45%;
-    --primary-foreground: 87 71% 19%;
-    --accent: 80 100% 96%;
-    --accent-foreground: 86 100% 32%;
-    --secondary: 80 30% 96%;
-    --secondary-foreground: 86 100% 32%;
-    --ring: 80 100% 45%;
-    --theme-chart-1: 80 100% 45%;
-    --theme-chart-2: 142 100% 33%;
-    --theme-chart-3: 47 100% 50%;
-    --theme-chart-4: 160 100% 30%;
-    --theme-chart-5: 44 100% 50%;
-  }
-
-  [data-mode='dark'][data-color='lime'] {
-    --primary: 80 100% 45%;
-    --primary-foreground: 89 89% 10%;
-    --accent: 80 50% 18%;
-    --accent-foreground: 80 100% 45%;
-    --secondary: 80 30% 18%;
-    --secondary-foreground: 80 100% 45%;
-    --ring: 80 100% 45%;
-    --theme-chart-1: 80 100% 45%;
-    --theme-chart-2: 150 96% 45%;
-    --theme-chart-3: 47 100% 50%;
-    --theme-chart-4: 161 100% 42%;
-    --theme-chart-5: 44 100% 50%;
-  }
-}