@ojiepermana/angular-theme 22.0.36 → 22.0.41

package/layout/README.md

@@ -1,6 +1,6 @@
 # @ojiepermana/angular-theme/layout
 
-Primitive layout projection untuk menyusun shell UI dengan satu root `Layout`, satu variant layout (`vertical`, `horizontal`, `empty`, atau `fluid`), slot `layout-nav`, dan area `LayoutContent` yang menjadi scroll container utama.
+Primitive layout projection untuk menyusun shell UI dengan satu root `Layout`, satu variant layout (`vertical`, `horizontal`, `empty`, atau `fluid`), slot `LayoutNavigation`, dan area `LayoutContent` yang menjadi scroll container utama.
 
 README ini mendokumentasikan seluruh API publik yang diekspor oleh package agar consumer bisa memahami kontrak komponen, type, service, dan perilaku layout tanpa perlu membaca source code.
 
@@ -65,17 +65,17 @@ Struktur yang direkomendasikan adalah sebagai berikut.
 
 ```html
 <Layout>
-  <LayoutVertical | layout-horizontal | layout-empty | layout-fluid>
+  <LayoutVertical | LayoutHorizontal | LayoutEmpty | LayoutFluid>
     <LayoutNavigation>...</LayoutNavigation>
     <LayoutContent>...</LayoutContent>
-  </layout-vertical | layout-horizontal | layout-empty | layout-fluid>
+  </LayoutVertical | LayoutHorizontal | LayoutEmpty | LayoutFluid>
 </Layout>
 ```
 
 Aturan penggunaannya:
 
 - Gunakan tepat satu variant layout di dalam `Layout`.
-- Untuk layout `vertical` dan `horizontal`, urutan child yang umum adalah `layout-nav` lalu `LayoutContent`.
+- Untuk layout `vertical` dan `horizontal`, urutan child yang umum adalah `LayoutNavigation` lalu `LayoutContent`.
 - Untuk layout `empty`, biasanya cukup `LayoutContent`.
 - Untuk layout `fluid`, child dapat berupa konten page tunggal yang ingin dipusatkan terhadap frame.
 - `LayoutContent` adalah area yang memiliki `overflow-auto`, jadi konten utama sebaiknya ditempatkan di sana.
@@ -194,13 +194,14 @@ Selector: `Layout`
 
 Inputs:
 
-| Input               | Type                       | Default  | Deskripsi                                                                                                                                                             |
-| ------------------- | -------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `surface`           | `LayoutSurface`            | `'flat'` | Menentukan fallback background root layout. Jika local storage `layout-surface` berisi nilai valid, nilai storage yang dipakai.                                       |
-| `appearance`        | `LayoutAppearance or null` | `null`   | API template untuk menentukan fallback appearance frame. Jika input ini kosong, primitive mencoba alias `layout-appearance`, lalu fallback efektif akhirnya `flat`.   |
-| `layout-appearance` | `LayoutAppearance or null` | `null`   | Alias simetris dengan `nav-appearance` pada navigation (kosakata sama `flat \| border-rail`). Memberi `appearance` yang sama ke shell & nav membuat keduanya seragam. |
-| `width`             | `LayoutWidth`              | `'full'` | Menentukan fallback padding outer dan perilaku container frame. Jika local storage `layout-width` berisi nilai valid, nilai storage yang dipakai.                     |
-| `class`             | `string`                   | `''`     | Menambahkan class pada host `Layout`.                                                                                                                                 |
+| Input               | Type                       | Default  | Deskripsi                                                                                                                                                                                   |
+| ------------------- | -------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `surface`           | `LayoutSurface`            | `'flat'` | Menentukan fallback background root layout. Jika local storage `layout-surface` berisi nilai valid, nilai storage yang dipakai.                                                             |
+| `appearance`        | `LayoutAppearance or null` | `null`   | API template untuk menentukan fallback appearance frame. Jika input ini kosong, primitive mencoba alias `layout-appearance`, lalu fallback efektif akhirnya `flat`.                         |
+| `layout-appearance` | `LayoutAppearance or null` | `null`   | Alias simetris dengan `nav-appearance` pada navigation (kosakata sama `flat \| border-rail`). Memberi `appearance` yang sama ke shell & nav membuat keduanya seragam.                       |
+| `width`             | `LayoutWidth`              | `'full'` | Menentukan fallback padding outer dan perilaku container frame. Jika local storage `layout-width` berisi nilai valid, nilai storage yang dipakai.                                           |
+| `layout-type`       | `LayoutType or null`       | `null`   | Override eksplisit type aktif (`vertical \| horizontal \| empty \| fluid`). Jika di-set, menjadi sumber kebenaran type dan menimpa variant `Layout*`. Jika `null`, variant yang menetapkan. |
+| `class`             | `string`                   | `''`     | Menambahkan class pada host `Layout`.                                                                                                                                                       |
 
 Behavior:
 
@@ -208,7 +209,7 @@ Behavior:
 - Jika input manual kosong, primitive mendaftarkan default `surface`, `appearance`, dan `width` ke `LayoutService` hanya saat local storage belum memiliki nilai valid.
 - Nilai visual final selalu dibaca kembali dari `LayoutService`, sehingga child primitive tetap membaca state yang sama selama instance aktif.
 - Menambahkan atribut host `data-surface`, `data-layout-appearance`, `data-layout-width`, dan `data-layout-type`.
-- Root tidak menyediakan input `type`. Type aktif dikendalikan oleh variant layout yang dirender sebagai override in-memory, atau oleh consumer melalui `LayoutService.registerDefaults({ type })` sebelum template mengevaluasi `layout.type()`.
+- Root menyediakan input opsional `layout-type`. Bila di-set, input ini menjadi sumber kebenaran type aktif dan menimpa variant layout yang dirender (override in-memory tanpa menulis `localStorage`). Bila `null`, type aktif dikendalikan oleh variant layout yang dirender, atau oleh consumer melalui `LayoutService.registerDefaults({ type })` sebelum template mengevaluasi `layout.type()`.
 - Selalu merender frame border.
 - Jika `appearance="border-rail"`, root menambah rail dekoratif di empat sudut frame, rail inset horizontal, dan rail vertikal sekunder di luar sisi kiri-kanan frame sehingga frame terlihat seperti memiliki double rail.
 - Jika `width="container"`, frame dipusatkan mulai breakpoint `lg` dengan container behavior.
@@ -266,20 +267,21 @@ Behavior:
 
 - Mengatur `LayoutService.type` menjadi `'empty'` hanya untuk state aktif dan tidak menulis `localStorage`.
 - Menyediakan wrapper penuh untuk satu area konten.
-- `layout-nav` akan tersembunyi jika tetap dirender di mode ini.
+- `LayoutNavigation` akan tersembunyi jika tetap dirender di mode ini.
 
 ### `LayoutNavigationComponent`
 
 Wrapper untuk slot navigasi.
 
-Selector: `layout-nav`
+Selector: `LayoutNavigation`
 
 Inputs:
 
-| Input       | Type     | Default               | Deskripsi                                        |
-| ----------- | -------- | --------------------- | ------------------------------------------------ |
-| `ariaLabel` | `string` | `'Layout navigation'` | Label aksesibilitas untuk landmark `navigation`. |
-| `class`     | `string` | `''`                  | Menambahkan class pada host `layout-nav`.        |
+| Input        | Type             | Default               | Deskripsi                                                                                                                                  |
+| ------------ | ---------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `ariaLabel`  | `string`         | `'Layout navigation'` | Label aksesibilitas untuk landmark `navigation`.                                                                                           |
+| `railOffset` | `string \| null` | `null`                | Override offset rail vertikal nav (mode `vertical + border-rail`). Jika `null`, mengikuti preview rail offset dari nav yang diproyeksikan. |
+| `class`      | `string`         | `''`                  | Menambahkan class pada host `LayoutNavigation`.                                                                                            |
 
 Behavior:
 
@@ -293,7 +295,7 @@ Behavior:
 Catatan penggunaan:
 
 - Untuk mode `border-rail`, jangan tambahkan `border-r` manual pada konten nav bila yang diinginkan adalah rail bawaan primitive.
-- Styling visual isi nav sebaiknya ditempatkan pada elemen child di dalam `layout-nav`, bukan dengan mengandalkan border host.
+- Styling visual isi nav sebaiknya ditempatkan pada elemen child di dalam `LayoutNavigation`, bukan dengan mengandalkan border host.
 
 ### `LayoutContentComponent`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-theme",
-  "version": "22.0.36",
+  "version": "22.0.41",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -13,8 +13,8 @@
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@ojiepermana/angular-navigation": "^22.0.36",
-    "@ojiepermana/angular-component": "^22.0.36",
+    "@ojiepermana/angular-navigation": "^22.0.41",
+    "@ojiepermana/angular-component": "^22.0.41",
     "rxjs": ">=7.8.0"
   },
   "dependencies": {

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

@@ -12,7 +12,9 @@ export const appConfig = {
       mode: 'light',
       color: 'base', // accent: base, red…rose, brand
       neutral: 'base', // gray family: base, slate, gray, zinc, …
-      brand: '221 83% 53%', // warna brand consumer (HSL triplet)
+      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 })
     }),
   ],
 };
@@ -23,10 +25,16 @@ export const appConfig = {
 - `mode` mem-bootstrap `ThemeModeService` dan default mode 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'`. Bisa diubah runtime via `setBrand()`, persist di storage.
+  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-brand`) menang atas default.
+- Pilihan yang dipersist (`theme-color` / `theme-neutral` / `theme-radius` / `theme-space` /
+  `theme-brand`) menang atas default.
 
 ## Default Behavior
 

package/styles/css/base/theme.css

@@ -19,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);
@@ -82,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);
@@ -157,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%;
 
@@ -187,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%;
   }
 }
 
@@ -238,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);
@@ -273,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/base/tokens.css

@@ -7,39 +7,44 @@
     --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%;
+
+    /* 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: 240 6% 10%;
+    --primary: 0 0% 10%;
     --primary-foreground: 0 0% 100%;
-    --accent: 210 30% 95%;
-    --accent-foreground: 222 20% 14%;
-    --secondary: 210 24% 95%;
-    --secondary-foreground: 222 20% 18%;
-    --ring: 222 18% 16%;
+    --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: 240 6% 10%;
+    --brand: 0 0% 10%;
     --brand-foreground: 0 0% 100%;
 
     --radius-base: 0.625rem;
@@ -53,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);
@@ -114,36 +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%;
 
-    --card: 211 34% 11%;
-    --card-foreground: 210 40% 96%;
+    --popover: 0 0% 11%;
+    --popover-foreground: 0 0% 96%;
 
-    --popover: 211 34% 11%;
-    --popover-foreground: 210 40% 96%;
+    --muted: 0 0% 18%;
+    --muted-foreground: 0 0% 70%;
 
-    --muted: 211 22% 18%;
-    --muted-foreground: 211 18% 70%;
+    --border: 0 0% 24%;
+    --input: 0 0% 24%;
 
-    --border: 211 24% 24%;
-    --input: 211 24% 24%;
+    /* Surface-grid line for the base neutral (dark). See light block. */
+    --layout-grid-line: 0 0% 24%;
 
     /* Base accent inverts: near-white primary on dark. */
     --primary: 0 0% 98%;
-    --primary-foreground: 222 20% 12%;
-    --accent: 211 40% 16%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 0 0% 16%;
     --accent-foreground: 0 0% 98%;
-    --secondary: 211 24% 18%;
+    --secondary: 0 0% 18%;
     --secondary-foreground: 0 0% 96%;
     --ring: 0 0% 85%;
 
     --brand: 0 0% 98%;
-    --brand-foreground: 222 20% 12%;
+    --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

@@ -15,6 +15,7 @@
     --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%;
@@ -38,6 +39,7 @@
     --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%;

package/styles/css/color/blue.css

@@ -15,6 +15,7 @@
     --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%;
@@ -38,6 +39,7 @@
     --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%;

package/styles/css/color/cyan.css

@@ -15,6 +15,7 @@
     --muted-foreground: 191 17% 40%;
     --border: 191 26% 87%;
     --input: 191 26% 87%;
+    --layout-grid-line: 191 26% 82%;
     --primary: 191 85% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 191 51% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 191 17% 64%;
     --border: 191 21% 18%;
     --input: 191 21% 18%;
+    --layout-grid-line: 191 21% 23%;
     --primary: 191 85% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 191 43% 18%;

package/styles/css/color/emerald.css

@@ -15,6 +15,7 @@
     --muted-foreground: 160 16% 40%;
     --border: 160 23% 87%;
     --input: 160 23% 87%;
+    --layout-grid-line: 160 23% 82%;
     --primary: 160 78% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 160 47% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 160 16% 64%;
     --border: 160 20% 18%;
     --input: 160 20% 18%;
+    --layout-grid-line: 160 20% 23%;
     --primary: 160 78% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 160 39% 18%;

package/styles/css/color/fuchsia.css

@@ -15,6 +15,7 @@
     --muted-foreground: 292 16% 40%;
     --border: 292 24% 87%;
     --input: 292 24% 87%;
+    --layout-grid-line: 292 24% 82%;
     --primary: 292 80% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 292 48% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 292 16% 64%;
     --border: 292 20% 18%;
     --input: 292 20% 18%;
+    --layout-grid-line: 292 20% 23%;
     --primary: 292 80% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 292 40% 18%;

package/styles/css/color/green.css

@@ -15,6 +15,7 @@
     --muted-foreground: 142 14% 40%;
     --border: 142 21% 87%;
     --input: 142 21% 87%;
+    --layout-grid-line: 142 21% 82%;
     --primary: 142 69% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 142 41% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 142 14% 64%;
     --border: 142 17% 18%;
     --input: 142 17% 18%;
+    --layout-grid-line: 142 17% 23%;
     --primary: 142 69% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 142 35% 18%;