@keenmate/pure-css 1.0.0-rc01

package/CHANGELOG.md

@@ -0,0 +1,49 @@
+# Changelog
+
+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-rc01] — 2026-08-04
+
+Initial extraction of the CSS foundation out of `@keenmate/pure-admin-core`.
+
+### Fixed
+
+- **Border/rounded utilities now resolve (were inert).** `.border` / `.border-{top,right,bottom,left}`
+  and `.rounded` / `.rounded-{lg,top,…}` referenced bare `--border-color` / `--border-radius`
+  variables the framework never emits — so they fell back to a `currentColor` border and no radius
+  (a latent bug inherited from pure-admin-core). Repointed them at the emitted `--pa-border-color` /
+  `--pa-border-radius(-lg)` (themed from `--base-*`). Now `base.css` + `utilities.css` are
+  **self-sufficient** — the border/radius utilities work standalone, no host shim.
+- **`--pa-border-color` is now a live reference** — emitted as `var(--base-border-color, <literal>)`
+  instead of a baked literal (it's a pure pass-through, no derivation lost). So it — and the `.border`
+  utilities that read it — follow a **runtime** `--base-border-color` override (a theme or dark-mode
+  class toggling it at `:root`/`.pa-mode-dark`), not just build-time themes.
+
+### Added
+
+- **`--base-*` theming contract** — `src/scss/variables/*` (the `$base-*` source of truth plus the
+  derived typography/spacing/colors/layout/system/components modules) and
+  `_base-css-variables.scss` (the mixin emitting `--base-*` and derived `--pa-*` custom properties).
+- **Native flexbox grid** — `_pa-grid.scss` (`.pa-row` / `.pa-col`: percentage columns in 5%
+  increments, intuitive fractions, container-query responsive variants, offsets, visibility helpers),
+  relocated from pure-admin-core's `core-components/_grid.scss`. Replaces the legacy PureCSS
+  `.pure-g` / `.pure-u-*` grid, which pure-admin had already stopped using — so pure-css ships the
+  grid consumers actually use, not the deprecated one.
+- **Utilities** — `utilities.scss` (spacing / flex / display / width-height classes) plus the generic
+  `.font-family-system/-sans/-serif/-mono` classes from `_fonts.scss` (core keeps `_fonts.scss`
+  standalone; here it `@use`s into utilities so all foundation utilities ship together). Adds
+  `.gap-*` / `.gap-x-*` / `.gap-y-*` (flex/grid gap, same `$spacers` scale) — the one spacing family
+  core lacked, needed to express flex layouts with utilities.
+- **Build entries & artifacts** — `pure-css.scss` (full bundle), `base.scss` (variables only),
+  `grid.scss` (grid only), and the existing `utilities.scss`, compiled to
+  `dist/css/{pure-css,base,grid,utilities}.css`. `dist/` is committed for toolchain-free vendoring.
+- Package tooling: `package.json` (`@keenmate/pure-css`, `exports` for `.`/`./base`/`./grid`/
+  `./utilities`/`./scss`), `Makefile`, `README`, this changelog.
+
+### Notes
+
+- **pure-admin-core consumes this package** as its single source for the foundation (thin
+  `@import`/`@forward` shims for the variables, `--base-*`/`--pa-*` emit mixins, utilities, and the
+  grid). The two no longer carry duplicate copies, so compiled `--base-*` values and grid output
+  match core's `dist/css/main.css` exactly.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Pure Admin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,138 @@
+# @keenmate/pure-css
+
+The KeenMate CSS **foundation** — the `--base-*` theming contract, the flexbox grid (`.pa-row` / `.pa-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-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.
+- **Four link targets.** `pure-css.css` (everything) or cherry-pick `base.css`
+  (variables only), `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.
+
+## Why
+
+Any surface that isn't a full admin app — a docs site, a marketing page, a standalone widget host —
+wants the *foundation* (variables + grid + utilities) without pure-admin-core's 40+ components. And
+every KeenMate web component (`<web-multiselect>`, …) and Svelte component already reads its colors
+from the `--base-*` custom properties. Shipping those from one small package means one theming layer
+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
+  └─ utility classes
+        ▲
+        └── docs sites, portals, component hosts consume the built CSS directly
+```
+
+## Installation
+
+```bash
+npm install @keenmate/pure-css
+```
+
+## Quick Start
+
+**Prebuilt CSS (simplest):**
+
+```html
+<link rel="stylesheet" href="node_modules/@keenmate/pure-css/dist/css/pure-css.css">
+```
+
+or cherry-pick:
+
+```html
+<link rel="stylesheet" href="…/pure-css/dist/css/base.css">   <!-- variables only -->
+<link rel="stylesheet" href="…/pure-css/dist/css/grid.css">   <!-- + grid          -->
+```
+
+**SCSS (customize before compiling):**
+
+```scss
+// Override the source of truth; everything re-derives.
+$base-accent-color: #4f46e5;
+$base-page-bg: #0b1020;
+
+@use '@keenmate/pure-css/scss/pure-css';
+```
+
+## What's in it
+
+| 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/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
+(`--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`.
+
+## Theming
+
+A **theme** is nothing but a set of `--base-*` values. The lightest possible theme is a stylesheet
+that redeclares them, loaded *after* `base.css`:
+
+```css
+:root {
+  --base-accent-color: #4f46e5;
+  --base-page-bg: #f6f8fb;
+  --base-text-color-1: #1a2233;
+}
+```
+
+Because pure-admin-core, the components and any consumer all read the same variables, that one block
+re-themes all of them at once. This is the same model as
+[`@keenmate/pure-admin-themes`](https://github.com/KeenMate/pure-admin-themes), so the same CLI and
+publishing infrastructure applies.
+
+## Build
+
+```bash
+make install   # sass
+make build     # src/scss -> dist/css (bundle + base + grid + utilities)
+make sizes     # show artifact sizes
+```
+
+`dist/` is committed so consumers can vendor the built CSS without a Sass toolchain.
+
+## Provenance
+
+The SCSS is the foundation extracted from `pure-admin-core`'s `src/scss` — the `variables/` modules,
+`_base-css-variables.scss`, `utilities.scss`, `_fonts.scss`, and the native grid (`_pa-grid.scss`,
+formerly core's `core-components/_grid.scss`). **pure-admin-core now consumes this package** as its
+single source for the foundation (thin `@import`/`@forward` shims), so the two no longer drift —
+core's compiled `--base-*` values and grid output match pure-css exactly.
+
+One intentional difference: `utilities.scss` here `@use`s `_fonts.scss` so the generic
+`.font-family-*` classes ship with the other utilities, whereas core keeps `_fonts.scss` standalone.
+`_rtl-helpers.scss` and the component layer stay in core.
+
+## License
+
+MIT © KeenMate. The grid is derived from [Pure](https://purecss.io/) (Yahoo!, BSD).

package/dist/css/base.css

@@ -0,0 +1,304 @@
+: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);
+}
+
+:root {
+  --base-accent-color: #007bff;
+  --base-accent-color-hover: rgb(20%, 58.5882352941%, 100%);
+  --base-accent-color-active: rgb(40%, 68.9411764706%, 100%);
+  --base-accent-color-light: rgba(0, 123, 255, 0.05);
+  --base-accent-color-light-hover: rgba(0, 123, 255, 0.12);
+  --base-text-color-1: #2c3e50;
+  --base-text-color-2: #6c757d;
+  --base-text-color-3: #7a8a99;
+  --base-text-color-4: #a3b1bf;
+  --base-text-color-on-accent: #ffffff;
+  --base-main-bg: #ffffff;
+  --base-page-bg: #f8f9fa;
+  --base-subtle-bg: #e9ecef;
+  --base-inverse-bg: #2c3e50;
+  --base-overlay-bg: rgba(0, 0, 0, 0.5);
+  --base-shadow-color: rgba(0, 0, 0, 0.15);
+  --base-hover-bg: #e9ecef;
+  --base-active-bg: rgb(85.5830753354%, 87.5490196078%, 89.5149638803%);
+  --base-disabled-bg: #e9ecef;
+  --base-elevated-bg: #f5f5f5;
+  --base-border-color: #e1e5e9;
+  --base-border: 1px solid #e1e5e9;
+  --base-input-bg: #ffffff;
+  --base-input-color: #495057;
+  --base-input-border: 1px solid #ced4da;
+  --base-input-border-hover: 1px solid #b8bfc6;
+  --base-input-border-focus: 1px solid #007bff;
+  --base-input-placeholder-color: #a3b1bf;
+  --base-input-bg-disabled: rgba(255, 255, 255, 0.5);
+  --base-input-size-xs-height: 3.1;
+  --base-input-size-sm-height: 3.3;
+  --base-input-size-md-height: 3.5;
+  --base-input-size-lg-height: 3.8;
+  --base-input-size-xl-height: 4.1;
+  --base-dropdown-bg: #ffffff;
+  --base-dropdown-border: 1px solid #e1e5e9;
+  --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  --base-tooltip-bg: #2c3e50;
+  --base-tooltip-text-color: #ffffff;
+  --base-success-color: #22c55e;
+  --base-success-color-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
+  --base-success-bg-light: rgba(34, 197, 94, 0.1);
+  --base-success-bg-subtle: rgba(34, 197, 94, 0.08);
+  --base-success-border: rgba(34, 197, 94, 0.2);
+  --base-success-text: #155724;
+  --base-success-text-light: #d4edda;
+  --base-text-on-success: #ffffff;
+  --base-danger-color: #ef4444;
+  --base-danger-color-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
+  --base-danger-bg-light: rgba(239, 68, 68, 0.1);
+  --base-danger-bg-subtle: rgba(239, 68, 68, 0.08);
+  --base-danger-border: rgba(239, 68, 68, 0.2);
+  --base-danger-text: #721c24;
+  --base-danger-text-light: #f8d7da;
+  --base-text-on-danger: #ffffff;
+  --base-warning-color: #f97316;
+  --base-warning-color-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
+  --base-warning-bg-light: rgba(249, 115, 22, 0.1);
+  --base-warning-bg-subtle: rgba(249, 115, 22, 0.08);
+  --base-warning-border: rgba(249, 115, 22, 0.2);
+  --base-warning-text: #856404;
+  --base-warning-text-light: #fff3cd;
+  --base-text-on-warning: #212529;
+  --base-info-color: #17a2b8;
+  --base-info-color-hover: rgb(6.7973856209%, 47.8772378517%, 54.3790849673%);
+  --base-info-bg-light: rgba(23, 162, 184, 0.1);
+  --base-info-bg-subtle: rgba(23, 162, 184, 0.08);
+  --base-info-border: rgba(23, 162, 184, 0.2);
+  --base-info-text: #0c5460;
+  --base-info-text-light: #d1ecf1;
+  --base-text-on-info: #ffffff;
+  --base-hover-overlay: rgba(0, 0, 0, 0.04);
+  --base-active-overlay: rgba(0, 0, 0, 0.08);
+  --base-focus-ring-color: #007bff;
+  --base-focus-ring-width: 3px;
+  --base-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+  --base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+  --base-font-size-2xs: 1;
+  --base-font-size-xs: 1.2;
+  --base-font-size-sm: 1.4;
+  --base-font-size-base: 1.6;
+  --base-font-size-lg: 1.8;
+  --base-font-size-xl: 2;
+  --base-font-size-2xl: 2.4;
+  --base-font-weight-normal: 400;
+  --base-font-weight-medium: 500;
+  --base-font-weight-semibold: 600;
+  --base-font-weight-bold: 700;
+  --base-line-height-tight: 1.25;
+  --base-line-height-normal: 1.5;
+  --base-line-height-relaxed: 1.75;
+  --base-border-radius-sm: 0.4;
+  --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);
+}