@ojiepermana/angular 0.1.0 → 21.0.0

package/theme/styles/index.css

@@ -1,8 +1,32 @@
-@import './tokens/foundation.css';
-@import './tokens/semantic.css';
-@import './modes/dark.css';
-@import './presets/colors/index.css';
-@import './presets/styles/index.css';
-@import './roles/index.css';
-@import './utilities/index.css';
-@import './adapters/material-ui/index.css';
+/**
+ * @ojiepermana/angular/theme — root stylesheet.
+ *
+ * Usage — import once in the consumer app, **before** Tailwind:
+ *
+ *   @import '@ojiepermana/angular/theme/styles';
+ *   @import 'tailwindcss';
+ *   @import '@ojiepermana/angular/theme/tailwind/theme.css';
+ *
+ * Includes cascade layers, independent mode/color/style tokens, shared
+ * semantic tokens, and an Angular Material bridge so `mat-*` components
+ * inherit the active theme automatically.
+ */
+@import './themes/library/_layers.css';
+
+/* Layer 1: mode variants. */
+@import './themes/mode/index.css';
+
+/* Layer 2: color variants. */
+@import './themes/library/color/index.css';
+
+/* Layer 3: style variants. */
+@import './themes/library/style/index.css';
+
+/* Shared semantic and library tokens. */
+@import './themes/library/_tokens.css';
+
+/* Angular Material M3 bridge. */
+@import './themes/library/_material-overrides.css';
+
+/* Global component-facing styles. */
+@import './themes/library/_components.css';

package/theme/styles/themes/brand/etos/color.css

@@ -0,0 +1,21 @@
+/**
+ * Etos brand color layer.
+ */
+@layer tokens {
+  [theme-brand='etos'] {
+    --primary: 211 95% 29%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 211 95% 96%;
+    --accent-foreground: 211 95% 22%;
+    --secondary: 211 24% 95%;
+    --secondary-foreground: 211 75% 24%;
+    --ring: 211 95% 29%;
+  }
+
+  [data-mode='dark'][theme-brand='etos'] {
+    --accent: 211 58% 18%;
+    --accent-foreground: 211 90% 84%;
+    --secondary: 211 24% 18%;
+    --secondary-foreground: 211 82% 84%;
+  }
+}

package/theme/styles/themes/brand/etos/style.css

@@ -0,0 +1,50 @@
+/**
+ * Etos mirrors the baseline style layer.
+ */
+@layer tokens {
+  [theme-brand='etos'] {
+    --theme-radius-base: 0.5rem;
+    --theme-radius-sm: calc(var(--theme-radius-base) - 2px);
+    --theme-radius-md: var(--theme-radius-base);
+    --theme-radius-lg: calc(var(--theme-radius-base) + 4px);
+
+    --radius: var(--theme-radius-base);
+    --radius-sm: var(--theme-radius-sm);
+    --radius-md: var(--theme-radius-md);
+    --radius-lg: var(--theme-radius-lg);
+
+    --border-width: 1px;
+
+    --theme-shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
+    --theme-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1);
+    --theme-shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+    --theme-shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.1);
+
+    --shadow-sm: var(--theme-shadow-sm);
+    --shadow: var(--theme-shadow);
+    --shadow-md: var(--theme-shadow-md);
+    --shadow-lg: var(--theme-shadow-lg);
+
+    --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+    --font-sans: var(--theme-font-sans);
+    --font-mono: var(--theme-font-mono);
+    --font-weight-bold: 600;
+    --theme-text-scale: 1;
+    --nav-font-family: var(--font-sans);
+    --nav-text-size: var(--text-base);
+    --nav-text-line-height: var(--text-base--line-height);
+    --nav-heading-font-family: var(--font-sans);
+    --nav-heading-size: var(--text-sm);
+    --nav-heading-line-height: var(--text-sm--line-height);
+    --nav-heading-weight: 600;
+    --nav-heading-letter-spacing: 0.12em;
+    --nav-badge-font-family: var(--font-sans);
+    --nav-badge-size: var(--text-sm);
+    --nav-badge-line-height: var(--text-sm--line-height);
+    --nav-badge-weight: 500;
+    --letter-spacing: 0;
+    --space-unit: 0.25rem;
+  }
+}

package/theme/styles/themes/library/_components.css

@@ -0,0 +1,63 @@
+/**
+ * Global component-facing styles that should react to the active theme.
+ */
+@layer base {
+  html,
+  body {
+    min-height: 100%;
+  }
+
+  html {
+    background: hsl(var(--background));
+  }
+
+  body {
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+    letter-spacing: var(--letter-spacing);
+    transition:
+      background-color 0.2s ease,
+      color 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+  }
+
+  ::selection {
+    background: hsl(var(--primary) / 0.24);
+    color: hsl(var(--foreground));
+  }
+}
+
+@layer components {
+  .ui-nav-text {
+    font-family: var(--nav-font-family, var(--font-sans));
+    font-size: var(--nav-text-size, var(--text-base));
+    line-height: var(--nav-text-line-height, var(--text-base--line-height));
+  }
+
+  .ui-nav-heading {
+    font-family: var(--nav-heading-font-family, var(--nav-font-family, var(--font-sans)));
+    font-size: var(--nav-heading-size, var(--text-sm));
+    line-height: var(--nav-heading-line-height, var(--text-sm--line-height));
+    font-weight: var(--nav-heading-weight, 600);
+    letter-spacing: var(--nav-heading-letter-spacing, 0.12em);
+    text-transform: uppercase;
+  }
+
+  .ui-nav-badge {
+    font-family: var(--nav-badge-font-family, var(--nav-font-family, var(--font-sans)));
+    font-size: var(--nav-badge-size, var(--text-sm));
+    line-height: var(--nav-badge-line-height, var(--text-sm--line-height));
+    font-weight: var(--nav-badge-weight, 500);
+  }
+}

package/theme/styles/themes/library/_layers.css

@@ -0,0 +1,15 @@
+/**
+ * @ojiepermana/angular cascade layers.
+ *
+ * Order (low → high precedence):
+ *   reset      – normalize defaults
+ *   base       – foundational library styles
+ *   mat-mdc    – Angular Material auto-injects here
+ *   tokens     – shadcn CSS variables (must override mat-mdc)
+ *   components – component-specific overrides (overlay panelClass, etc.)
+ *   utilities  – Tailwind utility classes (always wins)
+ *
+ * Consumers MUST import this file at the very top of their global stylesheet
+ * so every rule authored later inherits the correct order.
+ */
+@layer reset, base, mat-mdc, tokens, components, utilities;

package/theme/styles/themes/library/_material-overrides.css

@@ -0,0 +1,254 @@
+/**
+ * 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/themes/library/_tokens.css

@@ -0,0 +1,54 @@
+/**
+ * Semantic and shared tokens.
+ * Feedback colors stay independent from the color layer.
+ */
+@layer tokens {
+  :root {
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
+
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 10%;
+
+    --info: 217 91% 60%;
+    --info-foreground: 0 0% 100%;
+
+    --chart-1: 217 91% 60%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 271 81% 56%;
+    --chart-4: 38 92% 50%;
+    --chart-5: 355 78% 56%;
+
+    --sidebar-background: var(--card);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--accent);
+    --sidebar-accent-foreground: var(--accent-foreground);
+    --sidebar-border: var(--border);
+    --sidebar-ring: var(--ring);
+  }
+
+  [data-mode='dark'] {
+    --destructive: 0 62% 45%;
+    --destructive-foreground: 0 0% 95%;
+
+    --success: 142 60% 40%;
+    --success-foreground: 0 0% 95%;
+
+    --warning: 38 80% 45%;
+    --warning-foreground: 0 0% 10%;
+
+    --info: 217 80% 55%;
+    --info-foreground: 0 0% 95%;
+
+    --chart-1: 217 91% 68%;
+    --chart-2: 173 62% 48%;
+    --chart-3: 271 85% 70%;
+    --chart-4: 38 96% 62%;
+    --chart-5: 355 82% 68%;
+  }
+}

package/theme/styles/themes/library/color/amber.css

@@ -0,0 +1,18 @@
+@layer tokens {
+  [data-color='amber'] {
+    --primary: 38 92% 50%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 38 92% 95%;
+    --accent-foreground: 38 92% 30%;
+    --secondary: 38 30% 95%;
+    --secondary-foreground: 38 92% 30%;
+    --ring: 38 92% 50%;
+  }
+
+  [data-mode='dark'][data-color='amber'] {
+    --accent: 38 50% 18%;
+    --accent-foreground: 38 92% 75%;
+    --secondary: 38 30% 18%;
+    --secondary-foreground: 38 92% 75%;
+  }
+}

package/theme/styles/themes/library/color/blue.css

@@ -0,0 +1,23 @@
+/**
+ * Blue is the default color layer.
+ */
+@layer tokens {
+  :root,
+  [data-color='blue'] {
+    --primary: 217 91% 60%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 217 91% 95%;
+    --accent-foreground: 217 91% 30%;
+    --secondary: 217 30% 95%;
+    --secondary-foreground: 217 91% 30%;
+    --ring: 217 91% 60%;
+  }
+
+  :root[data-mode='dark']:not([data-color]),
+  [data-mode='dark'][data-color='blue'] {
+    --accent: 217 50% 18%;
+    --accent-foreground: 217 91% 80%;
+    --secondary: 217 30% 18%;
+    --secondary-foreground: 217 91% 80%;
+  }
+}

package/theme/styles/themes/library/color/green.css

@@ -0,0 +1,18 @@
+@layer tokens {
+  [data-color='green'] {
+    --primary: 142 71% 45%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 142 71% 95%;
+    --accent-foreground: 142 71% 25%;
+    --secondary: 142 30% 95%;
+    --secondary-foreground: 142 71% 25%;
+    --ring: 142 71% 45%;
+  }
+
+  [data-mode='dark'][data-color='green'] {
+    --accent: 142 50% 15%;
+    --accent-foreground: 142 71% 75%;
+    --secondary: 142 30% 15%;
+    --secondary-foreground: 142 71% 75%;
+  }
+}

package/theme/styles/themes/library/color/index.css

@@ -0,0 +1,9 @@
+/**
+ * Layer 2: color.
+ * Imports every color variant in a stable order.
+ */
+@import './blue.css';
+@import './red.css';
+@import './green.css';
+@import './purple.css';
+@import './amber.css';

package/theme/styles/themes/library/color/purple.css

@@ -0,0 +1,18 @@
+@layer tokens {
+  [data-color='purple'] {
+    --primary: 271 81% 56%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 271 81% 96%;
+    --accent-foreground: 271 81% 35%;
+    --secondary: 271 30% 95%;
+    --secondary-foreground: 271 81% 35%;
+    --ring: 271 81% 56%;
+  }
+
+  [data-mode='dark'][data-color='purple'] {
+    --accent: 271 50% 20%;
+    --accent-foreground: 271 81% 80%;
+    --secondary: 271 30% 20%;
+    --secondary-foreground: 271 81% 80%;
+  }
+}

package/theme/styles/themes/library/color/red.css

@@ -0,0 +1,18 @@
+@layer tokens {
+  [data-color='red'] {
+    --primary: 0 72% 51%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 0 84% 95%;
+    --accent-foreground: 0 72% 35%;
+    --secondary: 0 30% 95%;
+    --secondary-foreground: 0 72% 35%;
+    --ring: 0 72% 51%;
+  }
+
+  [data-mode='dark'][data-color='red'] {
+    --accent: 0 50% 20%;
+    --accent-foreground: 0 91% 80%;
+    --secondary: 0 30% 20%;
+    --secondary-foreground: 0 91% 80%;
+  }
+}

package/theme/styles/themes/library/style/brutal.css

@@ -0,0 +1,47 @@
+@layer tokens {
+  [data-style='brutal'] {
+    --theme-radius-base: 0;
+    --theme-radius-sm: 0;
+    --theme-radius-md: 0;
+    --theme-radius-lg: 0;
+
+    --radius: 0;
+    --radius-sm: 0;
+    --radius-md: 0;
+    --radius-lg: 0;
+
+    --border-width: 2px;
+
+    --theme-shadow-sm: 2px 2px 0 0 hsl(var(--foreground));
+    --theme-shadow: 4px 4px 0 0 hsl(var(--foreground));
+    --theme-shadow-md: 6px 6px 0 0 hsl(var(--foreground));
+    --theme-shadow-lg: 8px 8px 0 0 hsl(var(--foreground));
+
+    --shadow-sm: var(--theme-shadow-sm);
+    --shadow: var(--theme-shadow);
+    --shadow-md: var(--theme-shadow-md);
+    --shadow-lg: var(--theme-shadow-lg);
+
+    --theme-font-sans: 'JetBrains Mono', 'Courier New', monospace;
+    --theme-font-mono: 'JetBrains Mono', 'Courier New', monospace;
+
+    --font-sans: var(--theme-font-sans);
+    --font-mono: var(--theme-font-mono);
+    --font-weight-bold: 700;
+    --theme-text-scale: 1.08;
+    --nav-font-family: var(--font-sans);
+    --nav-text-size: var(--text-base);
+    --nav-text-line-height: var(--text-base--line-height);
+    --nav-heading-font-family: var(--font-mono);
+    --nav-heading-size: var(--text-sm);
+    --nav-heading-line-height: var(--text-sm--line-height);
+    --nav-heading-weight: 700;
+    --nav-heading-letter-spacing: 0.18em;
+    --nav-badge-font-family: var(--font-mono);
+    --nav-badge-size: var(--text-sm);
+    --nav-badge-line-height: var(--text-sm--line-height);
+    --nav-badge-weight: 700;
+    --letter-spacing: -0.01em;
+    --space-unit: 0.25rem;
+  }
+}