@ojiepermana/angular-theme 22.0.35 → 22.0.41

package/page/README.md

@@ -21,22 +21,48 @@ Dokumentasi ini mengikuti API publik terbaru dari `@ojiepermana/angular-theme/pa
 
 ### `Page`
 
-| Input       | Type                                | Default     | Keterangan                                                                                              |
-| ----------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------- |
-| `variant`   | `'stacked' \| 'side'`               | `'stacked'` | Menentukan struktur utama page shell.                                                                   |
-| `scroll`    | `'content' \| 'Page'`               | `'content'` | Menentukan apakah body slot scroll sendiri atau seluruh root `Page` scroll bersama.                     |
-| `height`    | `'auto' \| 'fix'`                   | `'auto'`    | Mengontrol tinggi `PageHeader` dan `PageFooter`.                                                        |
-| `position`  | `'left' \| 'right'`                 | `'left'`    | Posisi default untuk `PageSide` jika side tidak memberi override sendiri.                               |
-| `sideMode`  | `'sticky' \| 'drawer' \| 'overlay'` | `'sticky'`  | Mode default untuk `PageSide` jika side tidak memberi override sendiri.                                 |
-| `sideWidth` | `string`                            | `'16rem'`   | Lebar default side rail; dipakai juga untuk drawer dan overlay.                                         |
-| `sideOpen`  | `boolean \| null`                   | `null`      | Saat `null`, state side tidak dikontrol dari parent. Saat `true/false`, komponen masuk controlled mode. |
-| `class`     | `string`                            | `''`        | Class tambahan pada host `Page`.                                                                        |
+| Input        | Type                                | Default     | Keterangan                                                                                                          |
+| ------------ | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------- |
+| `variant`    | `'stacked' \| 'side'`               | `'stacked'` | Menentukan struktur utama page shell.                                                                               |
+| `scroll`     | `'content' \| 'page'`               | `'content'` | Menentukan apakah body slot scroll sendiri atau seluruh root `Page` scroll bersama.                                 |
+| `height`     | `'auto' \| 'fix'`                   | `'auto'`    | Mengontrol tinggi `PageHeader` dan `PageFooter`.                                                                    |
+| `appearance` | `'flat' \| 'border-rail'`           | `'flat'`    | Appearance visual yang dibagi dengan layout/navigation; menyeragamkan border header/footer (`border-rail` = 1.5px). |
+| `position`   | `'left' \| 'right'`                 | `'left'`    | Posisi default untuk `PageSide` jika side tidak memberi override sendiri.                                           |
+| `sideMode`   | `'sticky' \| 'drawer' \| 'overlay'` | `'sticky'`  | Mode default untuk `PageSide` jika side tidak memberi override sendiri.                                             |
+| `sideWidth`  | `string`                            | `'16rem'`   | Lebar default side rail; dipakai juga untuk drawer dan overlay.                                                     |
+| `sideOpen`   | `boolean \| null`                   | `null`      | Saat `null`, state side tidak dikontrol dari parent. Saat `true/false`, komponen masuk controlled mode.             |
+| `class`      | `string`                            | `''`        | Class tambahan pada host `Page`.                                                                                    |
 
 | Output           | Payload   | Keterangan                                                                                   |
 | ---------------- | --------- | -------------------------------------------------------------------------------------------- |
 | `sideOpenChange` | `boolean` | Emit setiap ada permintaan buka/tutup side, baik dari toggle, backdrop, maupun tombol `Esc`. |
 
-`Page` juga menambahkan atribut host `data-page-variant`, `data-page-height`, `data-page-scroll`, `data-page-position`, `data-page-side-mode`, dan `data-page-side-open` untuk styling atau inspeksi.
+`Page` juga menambahkan atribut host `data-page-variant`, `data-page-height`, `data-page-scroll`, `data-page-appearance`, `data-page-position`, `data-page-side-mode`, dan `data-page-side-open` untuk styling atau inspeksi.
+
+### Apps launcher (layout `empty`)
+
+Saat `Page` dirender di dalam layout `empty`, sebuah tombol icon-only tanpa border (ikon `apps`) muncul **otomatis** di pojok kanan-atas dan membuka **main navigation** (`id="main"`) sebagai flyout. Penempatannya menyesuaikan struktur `Page`:
+
+- Ada `PageHeader` → tombol menyatu di kanan header.
+- Tanpa `PageHeader` (mis. hanya `PageDashboard`) → tombol mengambang di atas konten.
+
+Tombol hanya muncul ketika layout aktif `empty` dan nav target punya data. Di layout lain (`vertical`/`horizontal`/`fluid`) tombol tidak dirender karena navigasi utama sudah terlihat.
+
+| Input          | Type      | Default             | Keterangan                                                   |
+| -------------- | --------- | ------------------- | ------------------------------------------------------------ |
+| `appsLauncher` | `boolean` | `true`              | Aktif/nonaktifkan apps-launcher pada layout `empty`.         |
+| `appsNavId`    | `string`  | `'main'`            | Id navigasi yang disurface oleh apps-launcher.               |
+| `appsIcon`     | `string`  | `'apps'`            | Nama ikon Material untuk tombol.                             |
+| `appsLabel`    | `string`  | `'Open navigation'` | Label/aria-label tombol icon-only (untuk aksesibilitas AXE). |
+
+```html
+<!-- Dashboard tanpa header: tombol apps mengambang di kanan-atas saat layout empty. -->
+<Page variant="stacked">
+  <PageDashboard>
+    <p>Konten dashboard.</p>
+  </PageDashboard>
+</Page>
+```
 
 ## Slot API
 
@@ -63,7 +89,7 @@ Dokumentasi ini mengikuti API publik terbaru dari `@ojiepermana/angular-theme/pa
 
 | Input / Output | Type      | Default              | Keterangan                                                  |
 | -------------- | --------- | -------------------- | ----------------------------------------------------------- |
-| `ariaLabel`    | `string`  | `'Toggle Page side'` | Label aksesibilitas untuk tombol toggle.                    |
+| `ariaLabel`    | `string`  | `'Toggle page side'` | Label aksesibilitas untuk tombol toggle.                    |
 | `class`        | `string`  | `''`                 | Class tambahan pada host toggle.                            |
 | `toggled`      | `boolean` | -                    | Emit nilai open state terbaru setelah tombol toggle diklik. |
 
@@ -75,7 +101,7 @@ Dokumentasi ini mengikuti API publik terbaru dari `@ojiepermana/angular-theme/pa
 ## Scroll Modes
 
 - `content` (default): `PageContent` atau `PageDashboard` menjadi area scroll. Pada variant `side`, `PageSide` dan body slot yang dipakai sama-sama stretch ke parent dan masing-masing punya scroll sendiri.
-- `Page`: seluruh isi `Page` menjadi area scroll. Header, content, footer, dan pada variant `side` juga `PageSide` akan mengikuti tinggi content induk tanpa scroll internal.
+- `page`: seluruh isi `Page` menjadi area scroll. Header, content, footer, dan pada variant `side` juga `PageSide` akan mengikuti tinggi content induk tanpa scroll internal.
 
 ## Height Modes
 
@@ -86,7 +112,7 @@ Dalam mode `fix`, pastikan isi header/footer memang dirancang sebagai rail ringk
 
 ## Behavior Summary
 
-| Variant   | `scroll="content"`                                                                                            | `scroll="Page"`                                                               |
+| Variant   | `scroll="content"`                                                                                            | `scroll="page"`                                                               |
 | --------- | ------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
 | `stacked` | `PageContent` atau `PageDashboard` stretch ke tinggi yang tersedia dan menjadi area scroll                    | seluruh `Page` scroll bersama; header, content, footer ikut satu kanvas       |
 | `side`    | `PageSide` dan body slot (`PageContent`/`PageDashboard`) sama-sama stretch ke parent dan punya scroll sendiri | `PageSide` dan body slot mengikuti tinggi content induk tanpa scroll internal |
@@ -126,6 +152,18 @@ Saat memakai `height="fix"`, slot berikut tidak boleh melebihi tinggi tetap yang
 
 ### Stacked dashboard surface
 
+`PageDashboard` berdiri sendiri — tidak memerlukan `PageHeader` maupun `PageFooter`. Gunakan slot ini ketika area utama secara semantik adalah dashboard atau board analitik.
+
+```html
+<Page variant="stacked">
+  <PageDashboard>
+    <p>Gunakan slot ini ketika area utama secara semantik adalah dashboard atau board analitik.</p>
+  </PageDashboard>
+</Page>
+```
+
+`PageHeader` dan `PageFooter` tetap opsional bila memang dibutuhkan:
+
 ```html
 <Page variant="stacked">
   <PageHeader>
@@ -133,7 +171,7 @@ Saat memakai `height="fix"`, slot berikut tidak boleh melebihi tinggi tetap yang
   </PageHeader>
 
   <PageDashboard>
-    <p>Gunakan slot ini ketika area utama secara semantik adalah dashboard atau board analitik.</p>
+    <p>Dashboard dengan header dan footer eksplisit.</p>
   </PageDashboard>
 
   <PageFooter>

package/styles/README.md

@@ -1,6 +1,7 @@
 # Theme
 
-`@ojiepermana/angular-theme/styles` menyediakan provider untuk mode, season, dan preload aset tema global.
+`@ojiepermana/angular-theme/styles` menyediakan provider untuk mode, warna (accent +
+neutral, gaya FluxUI), brand color, dan preload aset tema global.
 
 ```ts
 import { provideUiTheme } from '@ojiepermana/angular-theme/styles';
@@ -9,7 +10,11 @@ export const appConfig = {
   providers: [
     provideUiTheme({
       mode: 'light',
-      season: 'base',
+      color: 'base', // accent: base, red…rose, brand
+      neutral: 'base', // gray family: base, slate, gray, zinc, …
+      radius: 'md', // corner radius: none, sm, md, lg, xl, full
+      space: 'normal', // spacing density: compact, normal, relaxed, spacious
+      brand: '221 83% 53%', // warna brand consumer (HSL triplet, atau { color, foreground })
     }),
   ],
 };
@@ -18,8 +23,18 @@ export const appConfig = {
 ## API Notes
 
 - `mode` mem-bootstrap `ThemeModeService` dan default mode yang disimpan di storage.
-- `season` mem-bootstrap `ThemeSeasonService` dan default season yang disimpan di storage.
+- `color` mem-bootstrap `ThemeColorService`; accent palette awal (`<html theme-color>`).
+- `neutral` keluarga neutral awal (`<html theme-neutral>`); berkomposisi dengan accent.
+- `radius` mem-bootstrap `ThemeRadiusService`; preset corner radius awal (`<html theme-radius>`).
+  Menggerakkan knob `--radius-base` sehingga seluruh skala `--radius-*` dan utility `rounded-*` ikut.
+- `space` mem-bootstrap `ThemeSpaceService`; preset spacing density awal (`<html theme-space>`).
+  Menggerakkan knob `--spacing-base` sehingga setiap utility `p-*`/`m-*`/`gap-*`/`w-*`/`h-*` ikut.
+- `brand` mem-bootstrap `ThemeBrandService`; set `--brand` / utility `bg-brand` dan preset
+  accent `theme-color='brand'`. Menerima string HSL triplet atau `{ color, foreground }`.
+  Bisa diubah runtime via `setBrand()`, persist di storage.
 - `icons.materialSymbols` mengontrol preload stylesheet Material Symbols pada bootstrap aplikasi.
+- Pilihan yang dipersist (`theme-color` / `theme-neutral` / `theme-radius` / `theme-space` /
+  `theme-brand`) menang atas default.
 
 ## Default Behavior
 

package/styles/css/{seasonal/base → base}/tailwind.css

@@ -6,7 +6,7 @@
  * Usage (styles.css):
  *   @import '@ojiepermana/angular-theme/theme.css';
  *   @import 'tailwindcss';
- *   @import '@ojiepermana/angular-theme/styles/css/seasonal/base/tailwind.css';
+ *   @import '@ojiepermana/angular-theme/styles/css/base/tailwind.css';
  *
  * Maps the 3-layer HSL CSS variables onto Tailwind v4 design tokens so
  * utilities like `bg-primary`, `text-foreground`, `rounded-md`, and
@@ -27,6 +27,9 @@
   --color-primary: hsl(var(--primary));
   --color-primary-foreground: hsl(var(--primary-foreground));
 
+  --color-brand: hsl(var(--brand));
+  --color-brand-foreground: hsl(var(--brand-foreground));
+
   --color-secondary: hsl(var(--secondary));
   --color-secondary-foreground: hsl(var(--secondary-foreground));
 
@@ -123,6 +126,11 @@
   --leading-relaxed: var(--line-height-relaxed);
   --leading-loose: var(--line-height-loose);
 
+  /* Global spacing unit — Tailwind derives every padding, margin, gap, width and
+   * height utility from this. Wired to --spacing-base so the theme-space density
+   * axis rescales all spacing at runtime (default 0.25rem = unchanged). */
+  --spacing: var(--spacing-base);
+
   --spacing-control-xs: var(--control-height-xs);
   --spacing-control-sm: var(--control-height-sm);
   --spacing-control-md: var(--control-height-md);
@@ -138,7 +146,3 @@
   --font-sans: var(--theme-font-sans);
   --font-mono: var(--theme-font-mono);
 }
-
-@utility rounded-base {
-  border-radius: var(--rounded-base);
-}

package/styles/css/{seasonal/base → base}/theme.css

@@ -5,9 +5,8 @@
 
 @layer tokens {
   :root {
-    --radius-base: var(--theme-radius-base, 0.625rem);
+    --radius-base: 0.625rem;
     --radius-none: 0px;
-    --rounded-base: var(--radius-none);
     --scrollbar-size: 0.5rem;
     --scrollbar-radius: 9999px;
     --scrollbar-track: var(--primary) / var(--opacity-10);
@@ -20,7 +19,7 @@
 
     --border-width-base: 1px;
 
-    --shadow-base: 0 1px 2px hsl(240 10% 3.9% / 0.08);
+    --shadow-base: 0 1px 2px hsl(0 0% 3.9% / 0.08);
 
     --duration-base: 200ms;
     --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
@@ -83,10 +82,10 @@
      * re-emitted by the Tailwind @theme mapping as var(--theme-shadow-*) in the
      * later `theme` layer, so pointing either alias back at --shadow-* would
      * create a var() cycle that invalidates the whole chain. */
-    --shadow-xs-base: 0 1px 1px hsl(240 10% 3.9% / 0.05);
-    --shadow-md-base: 0 4px 6px hsl(240 10% 3.9% / 0.08);
-    --shadow-lg-base: 0 10px 15px hsl(240 10% 3.9% / 0.1);
-    --shadow-xl-base: 0 20px 25px hsl(240 10% 3.9% / 0.12);
+    --shadow-xs-base: 0 1px 1px hsl(0 0% 3.9% / 0.05);
+    --shadow-md-base: 0 4px 6px hsl(0 0% 3.9% / 0.08);
+    --shadow-lg-base: 0 10px 15px hsl(0 0% 3.9% / 0.1);
+    --shadow-xl-base: 0 20px 25px hsl(0 0% 3.9% / 0.12);
     --shadow-xs: var(--shadow-xs-base);
     --shadow-sm: var(--shadow-base);
     --shadow-md: var(--shadow-md-base);
@@ -158,12 +157,15 @@
     --timeline-indicator-rose: 349 89% 60%;
     --timeline-indicator-rose-foreground: 0 0% 100%;
 
-    --layout-grid-line: var(--border);
+    /* --layout-grid-line is defined per-mode in base/tokens.css and per-neutral
+     * by the generated theme-neutral CSS, so the surface grid keeps constant
+     * contrast across every neutral — not just base. Opacity is the global
+     * subtlety knob shared by all grid surfaces (grid / honeycome / line-*). */
     --layout-grid-line-opacity: 0.18;
     --layout-grid-dot-opacity: 0.22;
 
-    --overlay-backdrop: 240 10% 3.9% / 0.5;
-    --overlay-backdrop-strong: 240 10% 3.9% / 0.4;
+    --overlay-backdrop: 0 0% 3.9% / 0.5;
+    --overlay-backdrop-strong: 0 0% 3.9% / 0.4;
 
     --editor-highlight: 48 96% 80%;
 
@@ -177,10 +179,6 @@
      * @theme mapping re-emits --shadow-*: var(--theme-shadow-*), so an alias
      * back to --shadow-* forms a var() cycle. */
     --theme-shadow-xs: var(--shadow-xs-base);
-    --theme-radius-xs: var(--radius-xs);
-    --theme-radius-sm: var(--radius-sm);
-    --theme-radius-md: var(--radius-base);
-    --theme-radius-lg: var(--radius-xl);
     --border-width: var(--border-width-base);
     --theme-shadow-sm: var(--shadow-base);
     --theme-shadow: var(--shadow-base);
@@ -192,40 +190,10 @@
   :root,
   [data-mode='light'] {
     color-scheme: light;
-
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
   }
 
   [data-mode='dark'] {
     color-scheme: dark;
-
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
   }
 }
 
@@ -243,11 +211,17 @@
     --info: 217 91% 60%;
     --info-foreground: 0 0% 100%;
 
+    /*
+     * Chart series palette. --chart-1 follows the selected accent (--primary)
+     * so the primary series always reflects the picked theme color; --chart-2..5
+     * mirror the shadcn/ui chart palette for distinguishable supporting series.
+     * Each stays overridable per-theme via the --theme-chart-* hook.
+     */
     --chart-1: var(--theme-chart-1, var(--primary));
-    --chart-2: var(--theme-chart-2, var(--accent-foreground));
-    --chart-3: var(--theme-chart-3, 271 81% 56%);
-    --chart-4: var(--theme-chart-4, 38 92% 50%);
-    --chart-5: var(--theme-chart-5, 355 78% 56%);
+    --chart-2: var(--theme-chart-2, 173 58% 39%);
+    --chart-3: var(--theme-chart-3, 197 37% 24%);
+    --chart-4: var(--theme-chart-4, 43 74% 66%);
+    --chart-5: var(--theme-chart-5, 27 87% 67%);
 
     --sidebar: var(--card);
     --sidebar-background: var(--sidebar);
@@ -278,10 +252,11 @@
 
     --editor-highlight: 48 70% 30%;
 
+    /* Chart palette (dark) — --chart-1 follows --primary; rest track shadcn/ui. */
     --chart-1: var(--theme-chart-1, var(--primary));
-    --chart-2: var(--theme-chart-2, var(--accent-foreground));
-    --chart-3: var(--theme-chart-3, 271 85% 70%);
-    --chart-4: var(--theme-chart-4, 38 96% 62%);
-    --chart-5: var(--theme-chart-5, 355 82% 68%);
+    --chart-2: var(--theme-chart-2, 160 60% 45%);
+    --chart-3: var(--theme-chart-3, 30 80% 55%);
+    --chart-4: var(--theme-chart-4, 280 65% 60%);
+    --chart-5: var(--theme-chart-5, 340 75% 55%);
   }
 }

package/styles/css/{seasonal/base → base}/tokens.css

@@ -7,41 +7,49 @@
     --highlight-border-alpha: 0.7;
     --highlight-background-alpha: 0.7;
 
-    --background: 210 38% 98%;
+    --background: 0 0% 98%;
     --surface: 0 0% 89.8%;
-    --surface-foreground: 211 56% 12%;
-    --foreground: 211 56% 12%;
+    --surface-foreground: 0 0% 12%;
+    --foreground: 0 0% 12%;
 
     --card: 0 0% 100%;
-    --card-foreground: 211 56% 12%;
+    --card-foreground: 0 0% 12%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 211 56% 12%;
+    --popover-foreground: 0 0% 12%;
 
-    --muted: 211 34% 94%;
-    --muted-foreground: 211 24% 38%;
+    --muted: 0 0% 94%;
+    --muted-foreground: 0 0% 38%;
 
-    --border: 211 28% 82%;
-    --input: 211 28% 82%;
+    --border: 0 0% 82%;
+    --input: 0 0% 82%;
 
-    --primary: 211 95% 29%;
+    /* Surface-grid line for the base neutral. Explicit (not var(--border)) so the
+     * grid keeps the same ~16-point lightness gap vs --background that every
+     * generated neutral targets — base is no longer a special case. */
+    --layout-grid-line: 0 0% 82%;
+
+    /* Base accent = near-black neutral (FluxUI "base"); inverts to near-white in
+     * dark mode (see :root[data-mode='dark'] below). Accent palettes
+     * (theme-color) override these at higher specificity. */
+    --primary: 0 0% 10%;
     --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%;
+    --accent: 0 0% 95%;
+    --accent-foreground: 0 0% 14%;
+    --secondary: 0 0% 95%;
+    --secondary-foreground: 0 0% 18%;
+    --ring: 0 0% 16%;
+
+    /* Brand identity color — set by the consumer via ThemeBrandService
+     * (provideUiTheme({ brand }) or setBrand()). Concrete (not var(--primary))
+     * so the theme-color='brand' preset never forms a var() cycle. Defaults to
+     * the base accent and inverts in dark mode. */
+    --brand: 0 0% 10%;
+    --brand-foreground: 0 0% 100%;
 
     --radius-base: 0.625rem;
     --radius: var(--radius-base);
 
-    /* Deprecated: use the --radius-* tokens directly. */
-    --theme-radius-base: var(--radius-base);
-    --theme-radius-xs: var(--radius-xs);
-    --theme-radius-sm: var(--radius-sm);
-    --theme-radius-md: var(--radius-base);
-    --theme-radius-lg: var(--radius-base);
-
     --border-width-base: 1px;
     --border-width: var(--border-width-base);
 
@@ -50,17 +58,17 @@
      * --shadow-* — the Tailwind @theme mapping re-emits
      * --shadow-*: var(--theme-shadow-*) in the later `theme` layer, which
      * turns that into a var() cycle and invalidates both tokens. */
-    --shadow-base: 0 1px 0 0 hsl(211 95% 12% / 0.08);
-    --shadow-md-base: 0 8px 18px -14px hsl(211 95% 12% / 0.24);
-    --shadow-lg-base: 0 18px 36px -28px hsl(211 95% 12% / 0.34);
-    --shadow-xl-base: 0 24px 48px -36px hsl(211 95% 12% / 0.4);
+    --shadow-base: 0 1px 0 0 hsl(0 0% 12% / 0.08);
+    --shadow-md-base: 0 8px 18px -14px hsl(0 0% 12% / 0.24);
+    --shadow-lg-base: 0 18px 36px -28px hsl(0 0% 12% / 0.34);
+    --shadow-xl-base: 0 24px 48px -36px hsl(0 0% 12% / 0.4);
     --shadow-sm: var(--shadow-base);
     --shadow-md: var(--shadow-md-base);
     --shadow-lg: var(--shadow-lg-base);
     --shadow-xl: var(--shadow-xl-base);
 
     --theme-shadow-sm: var(--shadow-base);
-    --theme-shadow: 0 2px 4px -2px hsl(211 95% 12% / 0.14);
+    --theme-shadow: 0 2px 4px -2px hsl(0 0% 12% / 0.14);
     --theme-shadow-md: var(--shadow-md-base);
     --theme-shadow-lg: var(--shadow-lg-base);
     --theme-shadow-xl: var(--shadow-xl-base);
@@ -111,29 +119,39 @@
     --highlight-border-alpha: 0.45;
     --highlight-background-alpha: 0.55;
 
-    --background: 211 38% 9%;
-    --surface: 211 22% 18%;
-    --surface-foreground: 210 40% 96%;
-    --foreground: 210 40% 96%;
+    --background: 0 0% 9%;
+    --surface: 0 0% 18%;
+    --surface-foreground: 0 0% 96%;
+    --foreground: 0 0% 96%;
+
+    --card: 0 0% 11%;
+    --card-foreground: 0 0% 96%;
+
+    --popover: 0 0% 11%;
+    --popover-foreground: 0 0% 96%;
 
-    --card: 211 34% 11%;
-    --card-foreground: 210 40% 96%;
+    --muted: 0 0% 18%;
+    --muted-foreground: 0 0% 70%;
 
-    --popover: 211 34% 11%;
-    --popover-foreground: 210 40% 96%;
+    --border: 0 0% 24%;
+    --input: 0 0% 24%;
 
-    --muted: 211 22% 18%;
-    --muted-foreground: 211 18% 70%;
+    /* Surface-grid line for the base neutral (dark). See light block. */
+    --layout-grid-line: 0 0% 24%;
 
-    --border: 211 24% 24%;
-    --input: 211 24% 24%;
+    /* Base accent inverts: near-white primary on dark. */
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 0 0% 16%;
+    --accent-foreground: 0 0% 98%;
+    --secondary: 0 0% 18%;
+    --secondary-foreground: 0 0% 96%;
+    --ring: 0 0% 85%;
 
-    --accent: 211 58% 18%;
-    --accent-foreground: 211 90% 84%;
-    --secondary: 211 24% 18%;
-    --secondary-foreground: 211 82% 84%;
+    --brand: 0 0% 98%;
+    --brand-foreground: 0 0% 12%;
 
-    --shadow-base: 0 1px 0 0 hsl(210 40% 96% / 0.08);
+    --shadow-base: 0 1px 0 0 hsl(0 0% 96% / 0.08);
     --shadow-sm: var(--shadow-base);
     --theme-shadow-sm: var(--shadow-base);
 

package/styles/css/color/amber.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: amber. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='amber'][data-mode='light'] {
+    --background: 38 28% 98%;
+    --foreground: 38 31% 16%;
+    --surface: 38 32% 95%;
+    --surface-foreground: 38 31% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 38 31% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 38 31% 16%;
+    --muted: 38 28% 95%;
+    --muted-foreground: 38 18% 40%;
+    --border: 38 28% 87%;
+    --input: 38 28% 87%;
+    --layout-grid-line: 38 28% 82%;
+    --primary: 38 92% 48%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 38 55% 94%;
+    --accent-foreground: 38 92% 32%;
+    --secondary: 38 37% 93%;
+    --secondary-foreground: 38 92% 28%;
+    --ring: 38 92% 48%;
+    --highlight: 38 92% 64%;
+  }
+
+  html[theme-color='amber'][data-mode='dark'] {
+    --background: 38 28% 8%;
+    --foreground: 38 14% 96%;
+    --surface: 38 23% 12%;
+    --surface-foreground: 38 14% 96%;
+    --card: 38 28% 9%;
+    --card-foreground: 38 14% 96%;
+    --popover: 38 28% 9%;
+    --popover-foreground: 38 14% 96%;
+    --muted: 38 23% 16%;
+    --muted-foreground: 38 18% 64%;
+    --border: 38 23% 18%;
+    --input: 38 23% 18%;
+    --layout-grid-line: 38 23% 23%;
+    --primary: 38 92% 58%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 38 46% 18%;
+    --accent-foreground: 38 74% 80%;
+    --secondary: 38 37% 18%;
+    --secondary-foreground: 38 64% 82%;
+    --ring: 38 92% 58%;
+    --highlight: 38 92% 58%;
+  }
+}

package/styles/css/color/blue.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: blue. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='blue'][data-mode='light'] {
+    --background: 221 25% 98%;
+    --foreground: 221 29% 16%;
+    --surface: 221 29% 95%;
+    --surface-foreground: 221 29% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 221 29% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 221 29% 16%;
+    --muted: 221 25% 95%;
+    --muted-foreground: 221 17% 40%;
+    --border: 221 25% 87%;
+    --input: 221 25% 87%;
+    --layout-grid-line: 221 25% 82%;
+    --primary: 221 83% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 221 50% 94%;
+    --accent-foreground: 221 83% 32%;
+    --secondary: 221 33% 93%;
+    --secondary-foreground: 221 83% 28%;
+    --ring: 221 83% 48%;
+    --highlight: 221 83% 64%;
+  }
+
+  html[theme-color='blue'][data-mode='dark'] {
+    --background: 221 25% 8%;
+    --foreground: 221 12% 96%;
+    --surface: 221 21% 12%;
+    --surface-foreground: 221 12% 96%;
+    --card: 221 25% 9%;
+    --card-foreground: 221 12% 96%;
+    --popover: 221 25% 9%;
+    --popover-foreground: 221 12% 96%;
+    --muted: 221 21% 16%;
+    --muted-foreground: 221 17% 64%;
+    --border: 221 21% 18%;
+    --input: 221 21% 18%;
+    --layout-grid-line: 221 21% 23%;
+    --primary: 221 83% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 221 42% 18%;
+    --accent-foreground: 221 66% 80%;
+    --secondary: 221 33% 18%;
+    --secondary-foreground: 221 58% 82%;
+    --ring: 221 83% 58%;
+    --highlight: 221 83% 58%;
+  }
+}

package/styles/css/color/brand.css

@@ -0,0 +1,16 @@
+/**
+ * Accent theme: brand. Maps the chromatic accent tokens to the consumer's
+ * --brand / --brand-foreground (set by ThemeBrandService). Neutrals are left to
+ * the base/neutral axis. Hand-written — not emitted by the generated index.
+ */
+@layer tokens {
+  html[theme-color='brand'][data-mode='light'],
+  html[theme-color='brand'][data-mode='dark'] {
+    --primary: var(--brand);
+    --primary-foreground: var(--brand-foreground);
+    --ring: var(--brand);
+    --accent-foreground: var(--brand);
+    --secondary-foreground: var(--brand);
+    --highlight: var(--brand);
+  }
+}