@keenmate/pure-css 1.0.0-rc02 → 1.0.0-rc04

package/CHANGELOG.md

@@ -3,6 +3,137 @@
 All notable changes to `@keenmate/pure-css` are documented here. Format based on
 [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [1.0.0-rc04] — 2026-08-26 [PUBLISHED]
+
+### Changed (BREAKING)
+
+- **pure-css now ships only the BASE token contract — component tokens moved to
+  the consumer that owns the components.** pure-css is a *foundation*: its
+  bundles (`pure-css.css`, `base.css`) now emit only the ~46 base `--pc-*` tokens
+  its own CSS consumes or exposes as universal theming primitives (surfaces,
+  text, accent, links, border, the semantic role identities + their utility text
+  colours, the theme palette slots, the radius scale). The ~165 **component**
+  tokens (`--pc-btn-*`, `--pc-card-*`, `--pc-table-*`, `--pc-alert-*`, badges,
+  tooltips, panels, command palette, multiselect, sentiment scale, form spacing,
+  the derived contextual surfaces, admin layout chrome) are no longer emitted by
+  the foundation. They are pure-admin's contract.
+  - `output-pc-css-variables` is now base-only. The component tokens are emitted
+    by the new **`output-pc-component-variables`** mixin (+ the existing
+    `output-pc-alert-variables-{light,dark}`), which pure-css still *defines*
+    (they read the shared `$`-variable vocabulary in `variables/*`, so they must
+    be authored where that vocabulary is in scope) but does **not** call from its
+    own bundle. Consumers that ship the components — pure-admin core, every
+    theme — opt in by `@include output-pc-component-variables` alongside
+    `output-pc-css-variables`.
+  - **Theme authors / anyone calling the emit mixins must add
+    `@include output-pc-component-variables;`** (after `output-pc-css-variables`)
+    or lose every component token. Consumers of the *compiled* theme/core CSS are
+    unaffected — the emitted token set is identical, just split across two mixins.
+- **Every emitted CSS variable de-branded from `--pa-*` to `--pc-*`.** pure-css is
+  a *foundation*, but it still emitted its entire runtime custom-property surface
+  under pure-admin's `pa` brand. The full `--pa-*` set (~210 vars: `--pa-accent`,
+  `--pa-text-color-*`, `--pa-card-bg`, `--pa-border-*`, the contextual /alert sets,
+  `--pa-color-1..9` + `-text`, the new `--pc-*` form-spacing family already shipped
+  this cut, etc.) is renamed to `--pc-*`. This completes the same de-branding the
+  grid/mode classes started above — nothing pure-admin-branded remains in the
+  foundation's output.
+  - **The emit mixins move too:** `output-pa-css-variables` → `output-pc-css-variables`,
+    `output-pa-alert-variables-light` / `-dark` → `output-pc-alert-variables-*`.
+    (`output-base-css-variables` is unchanged — `--base-*` is a separate, neutral
+    web-component contract and stays.)
+  - **Untouched:** `--base-*` (web-component bridge), `--page-loader-*` (pre-FOUC
+    loader), and the `.pa-color-{name}` colour-variant **class** (a class, not a
+    `--pa-` variable).
+  - **Migration:** a boundary-aware replace of the string `--pa-` → `--pc-` across
+    markup, stylesheets, inline `style="--pa-…"`, JS `getPropertyValue`/`setProperty`
+    calls, and every theme's `:root` / dark-mode `--pa-*` override block. Safe
+    because the leading `--` + trailing `-` can't match `--base-*` or `--page-loader-*`.
+    pure-admin, its demo, all 16 themes, and the svelte/keen wrappers migrate in
+    lockstep with this release.
+- **Grid classes renamed from the consumer-branded `pa-` to the foundation's own
+  `pc-` prefix.** `.pa-row` → `.pc-row`, `.pa-col*` → `.pc-col*` (all percentage /
+  fraction / responsive / `--grow`/`--shrink`/`--no-padding` variants),
+  `.pa-offset*` → `.pc-offset*`, `.pa-cq` → `.pc-cq`, `.pa-hide*` → `.pc-hide*`,
+  `.pa-show*` → `.pc-show*`. The grid is a pure-css *foundation* primitive, so it
+  should not carry pure-admin's (`pa`) brand — this de-couples it. **No dual-emit:**
+  the old `pa-*` grid classes are gone. Consumers must migrate markup
+  (`class="pa-col-1-2"` → `class="pc-col-1-2"`) — a boundary-aware find/replace
+  (careful: `pa-col` is a substring of `pa-color-*`, which must NOT be touched).
+  pure-admin, its demo, and the svelte/keen wrappers are migrated in lockstep.
+- **Light/dark mode scope classes renamed `.pa-mode-*` → `.pc-mode-*`.**
+  The light/dark scopes the foundation emits its variables against (and that apps
+  toggle on `<body>`) are foundation-owned, so they move to the `pc-` prefix too.
+  `output-pc-css-variables` now emits at `:root, .pc-mode-light, .pc-mode-dark`.
+  Consumers toggling the class in JS (`classList.add('pc-mode-dark')`) and themes'
+  dark-mode blocks migrate in lockstep. (Safe replace: the string `pa-mode-` →
+  `pc-mode-`; `pa-modal` is untouched since `mode` ≠ `moda`.)
+
+### Added
+
+- **Sizing utilities consolidated into the foundation.** The universal sizing/flex
+  utilities that had been left in pure-admin now live here, so a standalone
+  pure-css page has the full set: viewport heights `h-full` / `h-screen` /
+  `min-h-full` / `min-h-screen` / `max-h-full` / `max-h-screen`, and the
+  Tailwind-style flex shorthands `flex-1` / `flex-auto` / `flex-initial` /
+  `flex-none` / `flex-grow` / `flex-shrink` (alongside the existing
+  `flex-grow-0/1`, `flex-shrink-0/1`). pure-css already owned the width/height %
+  + rem scales (`w-*`/`h-*`, `wr-*`/`hr-*`) and the full min/max families
+  (`minw-*`/`maxh-*`/`minwr-*`/`maxhr-*`/…); pure-admin's duplicate rem-height
+  `h-Nx`/`min-h-Nx`/`max-h-Nx` set (byte-identical to `hr-N`/`minhr-N`/`maxhr-N`)
+  is retired in favour of the foundation's `hr-`/`wr-` naming (`r` = rem).
+- **Complete form-spacing contract as runtime CSS variables, under a pure-css-owned
+  `--pc-` namespace.** `output-pc-css-variables` now emits the full anatomy of a
+  form's spacing at `:root`, so every consumer (pure-admin, keen-docs,
+  keen-pure-admin) shares one contract instead of re-declaring `var()` chains or
+  being stuck with compile-time-only margins:
+  - Vertical rhythm: `--pc-label-gap` (label → control), `--pc-help-gap`
+    (control → help/error), `--pc-field-gap` (field → field),
+    `--pc-form-actions-offset` (last field → actions row).
+  - Inline gaps: `--pc-form-gap` (shared + label↔inline-icon), `--pc-choice-gap`
+    (between options), `--pc-choice-inner-gap` (control↔label), `--pc-form-actions-gap`
+    (between buttons), `--pc-field-horizontal-gap` (horizontal label col↔input col).
+
+  The inline "gap" family chains to `--pc-form-gap` (one knob moves them all);
+  every var is also overridable on its own scope. These are the first
+  foundation-owned runtime vars to use `--pc-` rather than the legacy
+  consumer-branded `--pa-` prefix — new foundation tokens should follow suit.
+
+### Changed
+
+- **Renamed the misleading `$form-scale` token to `$form-gap`.** It reads like an
+  input-sizing multiplier but is only ever consumed as a `gap:` value — the small
+  gap between adjacent form bits (a label and its inline icon, footer action
+  buttons, checkbox/radio group options). `$form-scale` is kept as a `!default`
+  alias of `$form-gap`, so existing overrides keep working; it will be retired in
+  a major. (pure-admin reads the gap through `var(--pc-form-gap, …)`, so it is
+  also runtime-tunable.)
+
+## [1.0.0-rc03] — 2026-08-21 [PUBLISHED]
+
+### Changed
+
+- **BREAKING — renamed the top-bar region tokens from `header` to `navbar`.** The
+  foundation's top-region tokens named the bar as a *component block* rather than a
+  layout region, which read as misleading once pure-admin's navbar component dropped its
+  legacy `pa-header__*` block naming. Renamed:
+  - SCSS variables: `$header-height` → `$navbar-height`, `$header-bg` → `$navbar-bg`,
+    `$header-border-color` → `$navbar-border-color`, `$header-text` → `$navbar-text`,
+    `$header-text-secondary` → `$navbar-text-secondary`,
+    `$header-profile-name-color` → `$navbar-profile-name-color`,
+    `$z-index-header` → `$z-index-navbar`.
+  - CSS variables: `--pa-header-bg` → `--pa-navbar-bg`,
+    `--pa-header-border-color` → `--pa-navbar-border-color`,
+    `--pa-header-text` → `--pa-navbar-text`,
+    `--pa-header-text-secondary` → `--pa-navbar-text-secondary`,
+    `--pa-header-profile-name-color` → `--pa-navbar-profile-name-color`.
+  - `$footer-height` still mirrors the bar height (now `$navbar-height`); component-header
+    tokens (`$card-header-*`, `$table-header-*`) are unaffected.
+
+### Removed
+
+- **Dead `$header-brand-padding-left` variable.** Superseded by the navbar's flex `gap`;
+  no live rule consumed it (only a stale comment referenced it).
+
 ## [1.0.0-rc02] — 2026-08-05 [PUBLISHED]
 
 ### Added

package/README.md

@@ -1,47 +1,49 @@
 # @keenmate/pure-css
 
-The KeenMate CSS **foundation** — the `--base-*` theming contract, the flexbox grid (`.pa-row` / `.pa-col`), and the
+The KeenMate CSS **foundation** — the `--base-*` theming contract, the flexbox grid (`.pc-row` / `.pc-col`), and the
 utility classes — extracted from [`@keenmate/pure-admin-core`](https://github.com/KeenMate/pure-admin)
 so it can be consumed on its own.
 
-## What's New in 1.0.0-rc02
-
-- **Reboot layer — the 10px base is now built in.** pure-css ships
-  `html { font-size: 10px }` (plus a `box-sizing` reset and neutral base element
-  styling) via the new `reboot.scss`, included in the `pure-css.css` bundle and
-  available standalone as `reboot.css` / the `./reboot` export. Every pure-css
-  rem value assumes a 10px root, so previously a standalone consumer rendered
-  everything 1.6× too large until they added the base themselves — now it just
-  works out of the box.
-- **Themed scrollbars, foundation-wide.** The global thin-scrollbar styling
-  (`scrollbars.scss`, coloured from the `--pa-*` cascade) moved out of
-  pure-admin-core, so a standalone pure-css page gets the same scrollbars as a
-  full admin app. In the bundle, or cherry-pick `scrollbars.css` / `./scrollbars`.
-
-## What's New in 1.0.0-rc01
-
-- **The KeenMate CSS foundation, now standalone.** The `--base-*` theming
-  contract, the PureCSS grid, and the utility classes — extracted from
-  `@keenmate/pure-admin-core` so a docs site, marketing page, or component host
-  can use the foundation without the 40+ admin components.
-- **One theming layer everyone shares.** `--base-*` is the single source of
-  truth; `pure-admin-core`, its `--pa-*` component variables, and every KeenMate
-  web/Svelte component derive from it via fallback chains — so one block of
-  `--base-*` overrides re-themes all of them at once.
-- **Link targets.** `pure-css.css` (everything) or cherry-pick `base.css`
-  (variables only), `reboot.css` (reset + 10px base), `scrollbars.css`,
-  `grid.css`, `utilities.css`.
-- **The native `.pa-row` / `.pa-col` grid** — flexbox columns in 5% percentage
-  increments plus intuitive fractions (`.pa-col-1-3`, `.pa-col-2-3`, …), with
-  container-query responsive variants (`.pa-col-md-*`) and RTL-aware gutters.
-  (This replaces the legacy PureCSS `.pure-g` / `.pure-u-*` grid, which
-  pure-admin had already stopped using.)
-- **New `.gap-*` / `.gap-x-*` / `.gap-y-*` utilities** on the same spacing scale
-  as the margin/padding helpers — the one spacing family core lacked.
-- **Self-sufficient border/rounded utilities.** `.border` / `.rounded` consume
-  the emitted `--pa-border-*` variables, so `base.css` + `utilities.css` render
-  correct borders and radii standalone — no host stylesheet required.
-- **`dist/` is committed** — vendor the built CSS with no Sass toolchain.
+## What's New in 1.0.0-rc04
+
+- **pure-css is now strictly a base — it emits only the base token contract
+  (BREAKING).** `base.css` / `pure-css.css` ship the ~46 base `--pc-*` tokens the
+  foundation actually uses or exposes as universal primitives; the ~165 component
+  tokens (buttons, cards, tables, alerts, panels, …) are pure-admin's contract,
+  emitted by the new `output-pc-component-variables` mixin. If you author themes
+  or call the emit mixins, add `@include output-pc-component-variables;` after
+  `output-pc-css-variables`. Consumers of compiled CSS are unaffected.
+- **The foundation namespace is fully de-branded from `pa` to `pc` (BREAKING).**
+  pure-css was carved out of pure-admin, so it still carried pure-admin's `pa`
+  brand in its public surface. That's gone:
+  - **Grid + mode classes:** `.pa-row` / `.pa-col*` / `.pa-offset*` / `.pa-cq` /
+    `.pa-hide*` / `.pa-show*` → `.pc-*`; `.pa-mode-light` / `.pa-mode-dark` →
+    `.pc-mode-*`.
+  - **Every emitted CSS variable:** the whole `--pa-*` runtime surface (~210
+    custom properties) → `--pc-*` (`--pa-accent` → `--pc-accent`, `--pa-card-bg`
+    → `--pc-card-bg`, `--pa-color-1..9` → `--pc-color-1..9`, …). `--base-*`
+    (web-component bridge) and `--page-loader-*` are unchanged.
+  - **The emit mixins:** `output-pa-css-variables` → `output-pc-css-variables`,
+    `output-pa-alert-variables-light/dark` → `output-pc-alert-variables-*`.
+  Consumers migrate markup, `var()` reads, inline `style="--pa-…"`, and theme
+  `:root` blocks in lockstep — a boundary-aware find/replace of the string
+  `--pa-` → `--pc-` (safe: it can't touch `--base-*`, `--page-loader-*`, or the
+  `.pa-color-{name}` variant **class**).
+- **Sizing utilities consolidated into the foundation.** The universal
+  viewport-height utilities (`h-full` / `h-screen` / `min-h-full` /
+  `min-h-screen` / `max-h-full` / `max-h-screen`) and the Tailwind-style flex
+  shorthands (`flex-1` / `flex-auto` / `flex-initial` / `flex-none` /
+  `flex-grow` / `flex-shrink`) now ship from pure-css, so a standalone page gets
+  the complete set without borrowing anything from pure-admin. pure-admin's
+  duplicate rem-height `h-Nx` / `min-h-Nx` / `max-h-Nx` classes are retired in
+  favour of the foundation's `hr-` / `wr-` naming (`r` = rem).
+- **Complete form-spacing contract as runtime `--pc-*` variables** and the
+  `$form-scale` → `$form-gap` rename (see CHANGELOG).
+
+## What's New in 1.0.0-rc03
+
+- **Theming contract — top-bar region tokens renamed from `header` to `navbar` (BREAKING).** The foundation's top-region tokens named the bar as a *component block* (`header`) rather than the layout region it actually is, which read as misleading once pure-admin's navbar component dropped its legacy `pa-header__*` block naming. Every top-bar token is renamed on both sides of the cascade: the `$header-*` SCSS source variables (`$header-height` → `$navbar-height`, `$header-bg` → `$navbar-bg`, `$header-border-color`, `$header-text`, `$header-text-secondary`, `$header-profile-name-color`, and `$z-index-header` → `$z-index-navbar`) and the emitted `--pa-header-*` custom properties (`--pa-navbar-bg`, `--pa-navbar-border-color`, `--pa-navbar-text`, `--pa-navbar-text-secondary`, `--pa-navbar-profile-name-color`). Consumers reading the old names must update — `$footer-height` still mirrors the bar height (now `$navbar-height`), and the component-header tokens (`$card-header-*`, `$table-header-*`) are deliberately untouched since those *are* component blocks.
+- **Removed the dead `$header-brand-padding-left` variable.** It was superseded by the navbar's flex `gap`; no live rule consumed it — only a stale comment still referenced it — so it's gone from the source of truth.
 
 ## Why
 
@@ -54,7 +56,7 @@ that the components, the admin framework, and everything else all agree on.
 ```
 @keenmate/pure-css              @keenmate/pure-admin-core
   ├─ --base-* variables    ◀────  imports pure-css, adds
-  ├─ .pa-row / .pa-col grid       the component library
+  ├─ .pc-row / .pc-col grid       the component library
   └─ utility classes
         ▲
         └── docs sites, portals, component hosts consume the built CSS directly
@@ -96,14 +98,14 @@ $base-page-bg: #0b1020;
 | Artifact | Contents | When to link |
 | --- | --- | --- |
 | `dist/css/pure-css.css` | everything below, in one file | the common case |
-| `dist/css/base.css` | only `:root { --base-*; --pa-*; }` | you just need the theming contract (e.g. to theme embedded web components) or a base for a theme override |
-| `dist/css/grid.css` | `.pa-row` / `.pa-col-*` (percentage + fraction columns, container-query responsive) | layout only |
+| `dist/css/base.css` | only `:root { --base-*; --pc-*; }` | you just need the theming contract (e.g. to theme embedded web components) or a base for a theme override |
+| `dist/css/grid.css` | `.pc-row` / `.pc-col-*` (percentage + fraction columns, container-query responsive) | layout only |
 | `dist/css/utilities.css` | spacing / flex / display / width-height utilities (`.m-4`, `.d-flex`, `.w-50`, …) | utilities only |
 
 ### The `--base-*` contract
 
 `--base-*` is the **single source of truth for theming**. Framework colors, component variables
-(`--pa-*`) and web/svelte components all derive from it via fallback chains
+(`--pc-*`) and web/svelte components all derive from it via fallback chains
 (`--ms-accent-color: var(--base-accent-color, #3b82f6)`). Categories: accent, text, background,
 border, input, dropdown, tooltip, contextual (success/danger/warning/info), interactive states,
 typography, border-radius. The full list is `src/scss/variables/_base.scss`.

package/dist/css/base.css

@@ -1,11 +1,11 @@
 :root,
-.pa-mode-light,
-.pa-mode-dark {
-  --pa-text-strong: color-mix(in srgb, var(--pa-text-color-1) 85%, transparent);
-  --pa-text-secondary: color-mix(in srgb, var(--pa-text-color-1) 70%, transparent);
-  --pa-text-tertiary: color-mix(in srgb, var(--pa-text-color-1) 55%, transparent);
-  --pa-surface-hover: color-mix(in srgb, var(--pa-text-color-1) 4%, transparent);
-  --pa-surface-track: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
+.pc-mode-light,
+.pc-mode-dark {
+  --pc-text-strong: color-mix(in srgb, var(--pc-text-color-1) 85%, transparent);
+  --pc-text-secondary: color-mix(in srgb, var(--pc-text-color-1) 70%, transparent);
+  --pc-text-tertiary: color-mix(in srgb, var(--pc-text-color-1) 55%, transparent);
+  --pc-surface-hover: color-mix(in srgb, var(--pc-text-color-1) 4%, transparent);
+  --pc-surface-track: color-mix(in srgb, var(--pc-text-color-1) 12%, transparent);
 }
 
 :root {
@@ -104,201 +104,45 @@
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
   color-scheme: light;
-  --pa-main-bg: #f8f9fa;
-  --pa-page-bg: #f8f9fa;
-  --pa-subtle-bg: #ffffff;
-  --pa-text-color-1: #2c3e50;
-  --pa-text-color-2: #6c757d;
-  --pa-accent: #007bff;
-  --pa-accent-hover: rgba(0, 123, 255, 0.12);
-  --pa-accent-light: color-mix(in srgb, var(--pa-accent) 5%, transparent);
-  --pa-link-color: var(--pa-accent);
-  --pa-link-color-hover: color-mix(in srgb, var(--pa-link-color), currentColor 50%);
-  --pa-link-color-visited: var(--pa-link-color);
-  --pa-border-color: var(--base-border-color, #e1e5e9);
-  --pa-success: #22c55e;
-  --pa-warning: #f97316;
-  --pa-danger: #ef4444;
-  --pa-info: #17a2b8;
-  --pa-very-positive: #16a34a;
-  --pa-positive: var(--pa-success);
-  --pa-neutral: #9ca3af;
-  --pa-negative: var(--pa-danger);
-  --pa-very-negative: #dc2626;
-  --pa-chart-trendline-height: 3rem;
-  --pa-chart-trendline-stroke: 2.1;
-  --pa-detail-bg: rgba(15, 17, 21, 0.97);
-  --pa-detail-text: #ffffff;
-  --pa-detail-row-label: rgba(255, 255, 255, 0.75);
-  --pa-detail-title: rgba(255, 255, 255, 0.55);
-  --pa-detail-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, 0.55);
-  --pa-header-bg: #ffffff;
-  --pa-header-border-color: #e1e5e9;
-  --pa-header-text: #2c3e50;
-  --pa-header-text-secondary: #6c757d;
-  --pa-header-profile-name-color: #2c3e50;
-  --pa-sidebar-bg: #f8f9fa;
-  --pa-sidebar-text: #2c3e50;
-  --pa-sidebar-text-secondary: #6c757d;
-  --pa-sidebar-submenu-bg: #e9ecef;
-  --pa-sidebar-submenu-hover-bg: rgb(85.5830753354%, 87.5490196078%, 89.5149638803%);
-  --pa-sidebar-submenu-active-bg: rgb(79.7936016512%, 82.5490196078%, 85.3044375645%);
-  --pa-sidebar-submenu-active-text: #2c3e50;
-  --pa-footer-bg: #ffffff;
-  --pa-footer-border-color: #e1e5e9;
-  --pa-btn-primary-bg: #007bff;
-  --pa-btn-primary-bg-hover: rgb(20%, 58.5882352941%, 100%);
-  --pa-btn-primary-bg-light: color-mix(in srgb, var(--pa-btn-primary-bg) 5%, transparent);
-  --pa-btn-primary-text: #ffffff;
-  --pa-btn-secondary-bg: #6c757d;
-  --pa-btn-secondary-bg-hover: #545b62;
-  --pa-btn-secondary-text: #ffffff;
-  --pa-btn-secondary-outline-color: var(--pa-btn-secondary-bg);
-  --pa-btn-success-bg: var(--pa-success);
-  --pa-btn-success-bg-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
-  --pa-btn-success-text: #ffffff;
-  --pa-btn-danger-bg: var(--pa-danger);
-  --pa-btn-danger-bg-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
-  --pa-btn-danger-text: #ffffff;
-  --pa-btn-warning-bg: var(--pa-warning);
-  --pa-btn-warning-bg-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
-  --pa-btn-warning-text: #212529;
-  --pa-btn-info-bg: var(--pa-info);
-  --pa-btn-info-bg-hover: rgb(6.7973856209%, 47.8772378517%, 54.3790849673%);
-  --pa-btn-info-text: #ffffff;
-  --pa-btn-light-bg: #f8f9fa;
-  --pa-btn-light-bg-hover: #e9ecef;
-  --pa-btn-light-text: #2c3e50;
-  --pa-btn-dark-bg: #343a40;
-  --pa-btn-dark-bg-hover: #1d2124;
-  --pa-btn-dark-text: #ffffff;
-  --pa-success-bg: var(--pa-success);
-  --pa-success-bg-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
-  --pa-success-bg-light: color-mix(in srgb, var(--pa-success) 10%, transparent);
-  --pa-success-bg-subtle: color-mix(in srgb, var(--pa-success) 8%, transparent);
-  --pa-success-border: color-mix(in srgb, var(--pa-success) 20%, transparent);
-  --pa-success-text: #155724;
-  --pa-success-text-light: #d4edda;
-  --pa-danger-bg: var(--pa-danger);
-  --pa-danger-bg-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
-  --pa-danger-bg-light: color-mix(in srgb, var(--pa-danger) 10%, transparent);
-  --pa-danger-bg-subtle: color-mix(in srgb, var(--pa-danger) 8%, transparent);
-  --pa-danger-border: color-mix(in srgb, var(--pa-danger) 20%, transparent);
-  --pa-danger-text: #721c24;
-  --pa-danger-text-light: #f8d7da;
-  --pa-warning-bg: var(--pa-warning);
-  --pa-warning-bg-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
-  --pa-warning-bg-light: color-mix(in srgb, var(--pa-warning) 10%, transparent);
-  --pa-warning-bg-subtle: color-mix(in srgb, var(--pa-warning) 8%, transparent);
-  --pa-warning-border: color-mix(in srgb, var(--pa-warning) 20%, transparent);
-  --pa-warning-text: #856404;
-  --pa-warning-text-light: #fff3cd;
-  --pa-info-bg: var(--pa-info);
-  --pa-info-bg-hover: rgb(6.7973856209%, 47.8772378517%, 54.3790849673%);
-  --pa-info-bg-light: color-mix(in srgb, var(--pa-info) 10%, transparent);
-  --pa-info-bg-subtle: color-mix(in srgb, var(--pa-info) 8%, transparent);
-  --pa-info-border: color-mix(in srgb, var(--pa-info) 20%, transparent);
-  --pa-info-text: #0c5460;
-  --pa-info-text-light: #d1ecf1;
-  --pa-card-bg: #ffffff;
-  --pa-card-header-bg: #f8f9fa;
-  --pa-card-footer-bg: #ffffff;
-  --pa-card-tabs-bg: #f8f9fa;
-  --pa-input-bg: #ffffff;
-  --pa-input-border: #ced4da;
-  --pa-input-text: #495057;
-  --pa-input-focus-border-color: #007bff;
-  --pa-select-focus-border-color: #007bff;
-  --pa-textarea-focus-border-color: #007bff;
-  --pa-checkbox-border-color: #e1e5e9;
-  --pa-checkbox-border-color-hover: #007bff;
-  --pa-checkbox-border-color-checked: #007bff;
-  --pa-checkbox-bg: #ffffff;
-  --pa-checkbox-bg-checked: #007bff;
-  --pa-checkbox-bg-indeterminate: #007bff;
-  --pa-checkbox-checkmark-color: white;
-  --pa-checkbox-focus-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-  --pa-input-group-prepend-bg: #6c757d;
-  --pa-input-group-prepend-text: #6c757d;
-  --pa-input-group-append-bg: #6c757d;
-  --pa-input-group-append-text: #6c757d;
-  --pa-table-bg: #ffffff;
-  --pa-table-header-bg: #f8f9fa;
-  --pa-table-stripe: #f8f9fa;
-  --pa-table-hover-bg: #f8f9fa;
-  --pa-table-hover-accent-color: #007bff;
-  --pa-modal-overlay-bg: rgba(0, 0, 0, 0.5);
-  --pa-modal-content-bg: #ffffff;
-  --pa-badge-success-bg: #d4edda;
-  --pa-badge-success-text: #155724;
-  --pa-badge-warning-bg: #fff3cd;
-  --pa-badge-warning-text: #856404;
-  --pa-badge-info-bg: #d1ecf1;
-  --pa-badge-info-text: #0c5460;
-  --pa-badge-danger-bg: #f8d7da;
-  --pa-badge-danger-text: #721c24;
-  --pa-composite-badge-icon-bg: #6c757d;
-  --pa-composite-badge-label-bg: #e9ecef;
-  --pa-composite-badge-label-text: #2c3e50;
-  --pa-composite-badge-label-hover-bg: #e9ecef;
-  --pa-tooltip-bg: #2c3e50;
-  --pa-tooltip-text: #ffffff;
-  --pa-popover-content-bg: #ffffff;
-  --pa-popover-text-light: #ffffff;
-  --pa-popover-text-dark: #000000;
-  --pa-loader-overlay-bg: rgba(255, 255, 255, 0.8);
-  --pa-profile-overlay-bg: rgba(0, 0, 0, 0.3);
-  --pa-detail-panel-overlay-bg: rgba(0, 0, 0, 0.3);
-  --pa-detail-panel-selected-bg: rgba(0, 123, 255, 0.08);
-  --pa-detail-panel-z-index: 4500;
-  --pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.5);
-  --pa-command-palette-item-hover-bg: rgba(0, 123, 255, 0.05);
-  --pa-command-palette-item-active-bg: rgba(0, 123, 255, 0.1);
-  --pa-command-palette-highlight-bg: rgba(0, 123, 255, 0.2);
-  --pa-command-palette-highlight-text: #007bff;
-  --pa-command-palette-key-bg: #ffffff;
-  --pa-command-palette-key-text: #2c3e50;
-  --pa-command-palette-key-font-size: 1.2rem;
-  --pa-command-palette-key-font-weight: 600;
-  --pa-multiselect-dropdown-bg: #ffffff;
-  --pa-multiselect-dropdown-border: #e1e5e9;
-  --pa-multiselect-dropdown-text: #2c3e50;
-  --pa-multiselect-hint-bg: #f8f9fa;
-  --pa-multiselect-hint-border: #e1e5e9;
-  --pa-multiselect-option-hover-bg: #f8f9fa;
-  --pa-multiselect-pill-bg: rgba(0, 123, 255, 0.05);
-  --pa-multiselect-pill-border: #007bff;
-  --pa-color-1: transparent;
-  --pa-color-2: transparent;
-  --pa-color-3: transparent;
-  --pa-color-4: transparent;
-  --pa-color-5: transparent;
-  --pa-color-6: transparent;
-  --pa-color-7: transparent;
-  --pa-color-8: transparent;
-  --pa-color-9: transparent;
-  --pa-color-1-text: #ffffff;
-  --pa-color-2-text: #ffffff;
-  --pa-color-3-text: #ffffff;
-  --pa-color-4-text: #ffffff;
-  --pa-color-5-text: #ffffff;
-  --pa-color-6-text: #ffffff;
-  --pa-color-7-text: #ffffff;
-  --pa-color-8-text: #ffffff;
-  --pa-color-9-text: #ffffff;
-  --pa-border-radius-sm: 2px;
-  --pa-border-radius: 4px;
-  --pa-border-radius-lg: 8px;
-  --pa-alert-success-text: color-mix(in srgb, var(--pa-success-bg) 60%, black);
-  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) 15%, transparent);
-  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) 30%, transparent);
-  --pa-alert-danger-text: color-mix(in srgb, var(--pa-danger-bg) 60%, black);
-  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) 15%, transparent);
-  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) 30%, transparent);
-  --pa-alert-warning-text: color-mix(in srgb, var(--pa-warning-bg) 60%, black);
-  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) 15%, transparent);
-  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) 30%, transparent);
-  --pa-alert-info-text: color-mix(in srgb, var(--pa-info-bg) 60%, black);
-  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) 15%, transparent);
-  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) 30%, transparent);
+  --pc-main-bg: #f8f9fa;
+  --pc-page-bg: #f8f9fa;
+  --pc-subtle-bg: #ffffff;
+  --pc-text-color-1: #2c3e50;
+  --pc-text-color-2: #6c757d;
+  --pc-accent: #007bff;
+  --pc-accent-hover: rgba(0, 123, 255, 0.12);
+  --pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
+  --pc-link-color: var(--pc-accent);
+  --pc-link-color-hover: color-mix(in srgb, var(--pc-link-color), currentColor 50%);
+  --pc-link-color-visited: var(--pc-link-color);
+  --pc-border-color: var(--base-border-color, #e1e5e9);
+  --pc-success: #22c55e;
+  --pc-warning: #f97316;
+  --pc-danger: #ef4444;
+  --pc-info: #17a2b8;
+  --pc-success-text: #155724;
+  --pc-danger-text: #721c24;
+  --pc-warning-text: #856404;
+  --pc-info-text: #0c5460;
+  --pc-color-1: transparent;
+  --pc-color-2: transparent;
+  --pc-color-3: transparent;
+  --pc-color-4: transparent;
+  --pc-color-5: transparent;
+  --pc-color-6: transparent;
+  --pc-color-7: transparent;
+  --pc-color-8: transparent;
+  --pc-color-9: transparent;
+  --pc-color-1-text: #ffffff;
+  --pc-color-2-text: #ffffff;
+  --pc-color-3-text: #ffffff;
+  --pc-color-4-text: #ffffff;
+  --pc-color-5-text: #ffffff;
+  --pc-color-6-text: #ffffff;
+  --pc-color-7-text: #ffffff;
+  --pc-color-8-text: #ffffff;
+  --pc-color-9-text: #ffffff;
+  --pc-border-radius-sm: 2px;
+  --pc-border-radius: 4px;
+  --pc-border-radius-lg: 8px;
 }