@keenmate/pure-css 1.0.0-rc07 → 1.0.0-rc09

package/README.md

@@ -4,19 +4,19 @@ The KeenMate CSS **foundation** — the `--base-*` theming contract, the flexbox
 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-rc07
+## What's New in 1.0.0-rc09
 
-- **Theming — one runtime knob re-themes pure-admin components and the web components together** — before rc07 the same visual token was produced twice and independently: pure-admin's `--pc-*` component tokens were baked as compile-time literals, while the KeenMate web components read `--base-*` live, so they agreed only by coincidence and diverged the instant a theme retuned `--base-*` at runtime (every dark-mode toggle does exactly this at `.pc-mode-dark`). ~40 themed `--pc-*` tokens in `_base-css-variables.scss` (buttons, cards, inputs, checkbox, input groups, tables, modal, tooltip/popover, command palette, multiselect) were rewritten from `#{$…}` literals to the guiding-rule form `var(--base-x, #{$fallback})`. The `#{$fallback}` preserves today's compiled value so light-mode output is byte-for-byte unchanged, but each token now follows any runtime `--base-*` override — the same knob the web components already read.
-- **App shell — navbar/sidebar/footer surfaces stay a distinct brand colour, deliberately not `--base-*`-derived** — the shell's surface + text tokens (`--pc-navbar-*`, `--pc-sidebar-*`, `--pc-footer-*`) are emitted as plain `#{$…}` literals, *not* `var(--base-main-bg, …)`. A theme sets the shell's brand (e.g. a yellow navbar) independently of the `--base-*` card/page palette, and since `--base-main-bg` is always emitted, deriving the navbar from it would let the base palette win and erase the brand. Standalone (`base.css`-only) rendering still works because the shell CSS resolves `var(--pc-navbar-bg, var(--base-main-bg))` — the `--base-*` floor applies only when no `--pc-*` is emitted (the rc06 contract), never as a runtime override of it.
-- **Theming — gap `--base-*` tokens the web components read but pure-css never emitted** — several `--base-*` vars the components already consumed were falling through to hardcoded component defaults because pure-css didn't emit them, so they couldn't be themed. rc07 emits them: `--base-text-inverted`, `--base-checkbox-border-color`, `--base-input-border-color` (+ the `--base-input-border` shorthand), `--base-input-clear-color` / `--base-input-clear-bg-hover`, the solid role fills `--base-success-bg` / `--base-danger-bg` / `--base-warning-bg`, and `--base-rem`.
-- **Surfaces — `--pc-main-bg` / `--pc-subtle-bg` naming realigned with the `--base-*` model** — `--pc-main-bg` is now the **white surface** and `--pc-subtle-bg` the **muted grey**, matching `--base-main-bg` / `--base-subtle-bg`; previously the two were inverted (`--pc-main-bg` *was* the grey canvas). pure-css's own canvas usages (reboot `body`, `.pc-layout`, scrollbars) were repointed `--pc-main-bg` → `--pc-page-bg` so the page canvas stays grey. **Downstream code reading `--pc-main-bg` / `--pc-subtle-bg` must re-check intent** — see pure-admin-core rc19.
-- **Fixed — input borders finally track the theme** — `$input-border` was a hardcoded `#ced4da` (its own comment wrongly claimed it came from base); it's reconnected to `$base-input-border-color`. Also a semantic surface reconciliation so pure-admin and the web components resolve the *same* base token per surface (card/table headers + striped rows → `--base-elevated-bg`, dropdown/popover → `--base-dropdown-bg`, hover → `--base-hover-bg`).
-- **Fixed — sidebar search box alignment + collapsed-rail gating** — the search input's inline padding was rebalanced (`0 $spacing-base 0 $spacing-sm`) so its magnifier lines up with the nav-row icons below it, and the collapsed-rail rules that strip the search down to the submit icon were re-scoped from `.pc-layout__sidebar--icon-collapse` to `.sidebar-hidden .pc-layout__sidebar--icon-collapse` — the mode class stays on the element while the rail is expanded, so the unscoped rules were stripping the search frame in the expanded state too.
+- **Namespace hygiene — the app shell no longer reaches into pure-admin's token namespace** — the KeenMate ecosystem is aligning its custom-property prefixes with its class prefixes: `--pc-*` / `.pc-*` belong to the pure-css foundation + app shell, `--pa-*` / `.pa-*` belong to pure-admin components. As part of that rename, pure-css's shell had a handful of incidental references to *component* tokens — `var(--pc-card-bg, …)` in the fit-flyout / navbar dropdown / resize-handle, `var(--pc-input-bg, …)` in the sidebar search, and `var(--pc-icon-chevron, …)` on the sidebar/navbar chevrons. Since those tokens are moving to `--pa-*` (pure-admin's namespace) and the foundation must not depend on pure-admin, each now reads its `--base-*` foundation value directly. Rendered output is byte-for-byte unchanged — every dropped tier already resolved to the same `--base-*` fallback.
 
-## What's New in 1.0.0-rc06
+## What's New in 1.0.0-rc08
 
-- **The app shell renders standalone — no `--pc-*` component setup required** — rc05 moved the shell into the foundation, but its CSS referenced component tokens (`--pc-navbar-bg`, `--pc-sidebar-*`, `--pc-card-bg`, …) that pure-css doesn't emit, so linking `base.css` / `pure-css.css` alone gave an unstyled navbar/sidebar (keen-docs hit this). Every such reference now falls back to a `--base-*` var that pure-css *does* emit — `var(--pc-navbar-bg, var(--base-main-bg))` and friends, 40 in all, each traced from the token's real derivation. That's a clean two-tier contract: link the base vars and the shell just works out of the box; set the `--pc-*` token only when you want to fine-tune a piece independently. Also fixed two dangling refs in the fit flyout (`--pc-accent-color` → `--pc-accent`, plus a `--base-hover-bg` tier for `--pc-hover-bg`).
-- **One border-radius scale across the whole ecosystem** — pure-css shipped two disconnected radius systems: the `--base-border-radius-sm/md/lg` multipliers every web/svelte component reads (e.g. web-multiselect), and its own `--pc-border-radius*` as hardcoded 2/4/8px literals that ignored the base layer — so a `<keen-web-multiselect>` and a pure-css `.rounded` element rounded differently on the same theme, and a runtime `--base-border-radius-*` override moved the components but not pure-css's own elements. The `--pc-border-radius*` tokens now derive from `--base-border-radius-*` (`calc(var(--base-border-radius-md, 0.6) * 1rem)`), so radii match the components and one override re-rounds everything together. Rendered corners change slightly: small 2px→4px, medium 4px→6px, large unchanged.
+- **Foundation-only — the `--pc-*` component layer moved to `@keenmate/pure-admin-core` (breaking)** — pure-css no longer ships `variables/_components.scss` or the component emit mixins (`output-pc-component-variables`, `output-pc-component-mode-variables`, `output-pc-alert-variables-{light,dark}`) — the whole buttons / cards / tables / modals / alerts / badges / command-palette / multiselect vocabulary. pure-css is now a true foundation: the `--base-*` bridge plus the base `--pc-*` tokens (surfaces, text, accent, links, border, role identities, palette slots, radius). SCSS consumers that `@include`d the component mixins must take them from pure-admin-core ≥ 2.9.0-rc20; consumers of the compiled `dist/css/*` are unaffected.
+- **Icons — a shared, themeable `--base-icon-*` contract (13 tokens)** — `chevron`, `caret-down`/`-up`, `close`, `clear`, `remove`, `expand`, `collapse`, `add`, `edit`, `delete`, `search` (Lucide defaults), emitted as percent-encoded SVG data-URIs painted via `mask` + `background: currentColor`. One override re-skins the shell, pure-admin components, and the web components together; the shell's sidebar/navbar chevrons are now SVG masks instead of a `›` text glyph. Two disclosure models are documented — chevron *rotates one glyph*, expand/collapse *swaps two*.
+- **Contract — a coherent, fully-named `--base-*` token API (WS7)** — added `--base-border-width`, the `--base-primary-*` accent aliases, `--base-secondary-*`, the `--base-text-on-<role>` set, `--base-info-bg` for role symmetry, the `--base-color-1..9` (+`-text`) brand palette aliased by `--pc-color-N`, and the non-colour scales `--base-space-*`, `--base-shadow-{sm,md,lg}`, `--base-duration-*` + `--base-ease-*`, and `--base-z-*`. `--base-disabled-bg` got its own value (`#f1f3f5`) instead of colliding with the hover surface.
+- **Surfaces — hover/active split off the recessed surface** — new `--pc-hover-bg` / `--pc-active-bg` base tokens let component hover/active states read a dedicated interaction-state axis rather than borrowing the recessed `--base-subtle-bg`, which read as *raised* in several dark themes.
+- **Theme — default palette rebased onto pure-admin Corporate** — `$base-*` defaults now track Corporate (accent `#0ea5e9`, slate text/surfaces, emerald/red/amber/cyan roles), with the palette sourced from `$base-color-1..9`. This changes pure-css's *un-themed* default look; themed apps are unaffected since every theme sets its own `--base-*`.
+- **Shadow DOM — a new `component-reset` entry** — `./component-reset` (`dist/css/component-reset.css`) is the counterpart to `reboot` for web components: a `:host` box-sizing + inherited-typography reset pinned to `--base-*` so a host page can't bleed into a component's shadow root. No `rem` base — pair it with `base`. Brings the build to 7 artifacts.
+- **Internal — `@keenmate/base-css-variables` is now the canonical `--base-*` parent** — pure-css mirrors its token list into `$base-*` SCSS, and `scripts/check-base-parity.mjs` fails the build if the emitted names drift from the contract. New tokens are authored in base-css-variables first, then mirrored here.
 
 ## Why
 
@@ -72,6 +72,7 @@ $base-page-bg: #0b1020;
 | --- | --- | --- |
 | `dist/css/pure-css.css` | everything below, in one file | the common case |
 | `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/component-reset.css` | a `:host` reset (box-sizing + inherited typography pinned to `--base-*`) — the Shadow-DOM counterpart to reboot | building a web component: adopt it into the shadow root (e.g. `import '@keenmate/pure-css/component-reset?inline'`) so the host page can't bleed styles in; pair with `base` |
 | `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 |
 
@@ -103,7 +104,35 @@ the styling stands on its own and the JS only adds the interactive behaviour.
 (`--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`.
+typography, border-radius, spacing/shadow/motion/z-index scales, and icons. The full list is
+`src/scss/variables/_base.scss`.
+
+#### Icons
+
+`--base-icon-*` are mask-friendly SVG glyphs (Lucide defaults) for the shared UI affordances, so the
+pure-css shell, pure-admin components, and the web/svelte components render the **same** marks and a
+theme re-skins them in one place. Each is consumed via `mask: var(--base-icon-x); background:
+currentColor`, so the glyph inherits text colour — override a token with any mask-friendly `url()` to
+swap the icon set.
+
+| Token | Glyph | Use |
+| --- | --- | --- |
+| `--base-icon-chevron` | stroked angle `›` | expanders / nav — **rotate-one-glyph** disclosure (points right, rotate 90° when open) |
+| `--base-icon-caret-down` / `--base-icon-caret-up` | solid triangles `▾` / `▴` | static dropdown / `<select>` affordance (down) and sort-direction / upward-dropdown counterpart (up) — a caret never rotates |
+| `--base-icon-close` | `✕` | dismiss a transient **surface** (dialog, panel, popover, toast) |
+| `--base-icon-clear` | `✕` | clear a **field** — distinct purpose, same glyph; **follows** `--base-icon-close`, override alone to diverge |
+| `--base-icon-remove` | `✕` | take an **item** out of a collection (chip / tag / row) — non-destructive; follows `--base-icon-close` |
+| `--base-icon-expand` / `--base-icon-collapse` | `+` / `−` | **swap-two-glyphs** disclosure (tree nodes, accordions): show `+` when collapsed, `−` when open |
+| `--base-icon-add` / `--base-icon-edit` / `--base-icon-delete` | `+` / pencil / trash | **CRUD action** verbs — create / modify / **destroy** (delete is a trash can, *not* an ✕, so it reads as destructive) |
+| `--base-icon-search` | magnifying glass | search inputs, filter fields, command palette |
+
+Two intentional distinctions:
+
+- **Disclosure models:** **chevron rotates one glyph** (sidebar, multiselect), while **expand/collapse swaps
+  two glyphs** (trees, accordions) — a component never rotates a `+` into a `−`.
+- **✕ vs trash:** `close` / `clear` / `remove` are three *dismiss* purposes that share the ✕ glyph (and
+  cascade off `--base-icon-close`), while `delete` is a separate *destructive* action drawn as a trash can.
+  `add` shares the `+` shape with `expand` but is an independent knob (create ≠ disclosure).
 
 ## Theming
 

package/dist/css/base.css

@@ -9,16 +9,25 @@
 }
 
 :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-accent-color: #0ea5e9;
+  --base-accent-color-hover: #0284c7;
+  --base-accent-color-active: #0369a1;
+  --base-accent-color-light: rgba(14, 165, 233, 0.05);
+  --base-accent-color-light-hover: rgba(14, 165, 233, 0.08);
+  --base-primary-color: var(--base-accent-color, #0ea5e9);
+  --base-primary-color-hover: var(--base-accent-color-hover, #0284c7);
+  --base-primary-color-active: var(--base-accent-color-active, #0369a1);
+  --base-primary-color-light: var(--base-accent-color-light, rgba(14, 165, 233, 0.05));
+  --base-primary-color-light-hover: var(--base-accent-color-light-hover, rgba(14, 165, 233, 0.08));
+  --base-secondary-color: #6c757d;
+  --base-secondary-color-hover: #545b62;
+  --base-text-color-1: #334155;
+  --base-text-color-2: #64748b;
+  --base-text-color-3: #94a3b8;
+  --base-text-color-4: #cbd5e1;
   --base-text-color-on-accent: #ffffff;
+  --base-text-on-primary: var(--base-text-color-on-accent, #ffffff);
+  --base-text-on-secondary: #ffffff;
   --base-main-bg: #ffffff;
   --base-page-bg: #f8f9fa;
   --base-subtle-bg: #e9ecef;
@@ -27,21 +36,22 @@
   --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-disabled-bg: #f1f3f5;
   --base-elevated-bg: #f8f9fa;
   --base-text-inverted: #ffffff;
-  --base-border-color: #e1e5e9;
-  --base-border: 1px solid #e1e5e9;
-  --base-checkbox-border-color: #e1e5e9;
+  --base-border-width: 1px;
+  --base-border-color: #e2e8f0;
+  --base-border: 1px solid #e2e8f0;
+  --base-checkbox-border-color: #e2e8f0;
   --base-input-bg: #ffffff;
-  --base-input-color: #495057;
-  --base-input-border: 1px solid #ced4da;
-  --base-input-border-color: #ced4da;
-  --base-input-border-hover: 1px solid #b8bfc6;
-  --base-input-border-focus: 1px solid #007bff;
-  --base-input-placeholder-color: #a3b1bf;
+  --base-input-color: #334155;
+  --base-input-border: 1px solid #e2e8f0;
+  --base-input-border-color: #e2e8f0;
+  --base-input-border-hover: 1px solid #0ea5e9;
+  --base-input-border-focus: 1px solid #0ea5e9;
+  --base-input-placeholder-color: #cbd5e1;
   --base-input-bg-disabled: rgba(255, 255, 255, 0.5);
-  --base-input-clear-color: #7a8a99;
+  --base-input-clear-color: #94a3b8;
   --base-input-clear-bg-hover: #e9ecef;
   --base-input-size-xs-height: 3.1;
   --base-input-size-sm-height: 3.3;
@@ -49,49 +59,50 @@
   --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-border: 1px solid #e2e8f0;
   --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
   --base-tooltip-bg: #2c3e50;
   --base-tooltip-text-color: #ffffff;
   --base-tooltip-color: #ffffff;
-  --base-success-color: #22c55e;
-  --base-success-bg: #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-color: #10b981;
+  --base-success-bg: #10b981;
+  --base-success-color-hover: #059669;
+  --base-success-bg-light: rgba(16, 185, 129, 0.1);
+  --base-success-bg-subtle: rgba(16, 185, 129, 0.08);
+  --base-success-border: rgba(16, 185, 129, 0.2);
   --base-success-text: #155724;
   --base-success-text-light: #d4edda;
   --base-text-on-success: #ffffff;
   --base-danger-color: #ef4444;
   --base-danger-bg: #ef4444;
-  --base-danger-color-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
+  --base-danger-color-hover: #dc2626;
   --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-bg: #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-color: #f59e0b;
+  --base-warning-bg: #f59e0b;
+  --base-warning-color-hover: #d97706;
+  --base-warning-bg-light: rgba(245, 158, 11, 0.1);
+  --base-warning-bg-subtle: rgba(245, 158, 11, 0.08);
+  --base-warning-border: rgba(245, 158, 11, 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-text-on-warning: #ffffff;
+  --base-info-color: #06b6d4;
+  --base-info-bg: #06b6d4;
+  --base-info-color-hover: #0891b2;
+  --base-info-bg-light: rgba(6, 182, 212, 0.1);
+  --base-info-bg-subtle: rgba(6, 182, 212, 0.08);
+  --base-info-border: rgba(6, 182, 212, 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-color: #0ea5e9;
   --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;
@@ -113,45 +124,100 @@
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
   --base-rem: 1rem;
+  --base-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 18 6-6-6-6%22/%3E%3C/svg%3E");
+  --base-icon-caret-down: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 15 6 9h12z%22/%3E%3C/svg%3E");
+  --base-icon-caret-up: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 9 6 15h12z%22/%3E%3C/svg%3E");
+  --base-icon-close: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E");
+  --base-icon-clear: var(--base-icon-close, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E"));
+  --base-icon-remove: var(--base-icon-close, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E"));
+  --base-icon-expand: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M12 5v14%22/%3E%3C/svg%3E");
+  --base-icon-collapse: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3C/svg%3E");
+  --base-icon-add: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M12 5v14%22/%3E%3C/svg%3E");
+  --base-icon-edit: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z%22/%3E%3C/svg%3E");
+  --base-icon-delete: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h18%22/%3E%3Cpath d=%22M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2%22/%3E%3Cpath d=%22M10 11v6%22/%3E%3Cpath d=%22M14 11v6%22/%3E%3C/svg%3E");
+  --base-icon-search: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E");
+  --base-color-1: #f59e0b;
+  --base-color-2: #ec4899;
+  --base-color-3: #10b981;
+  --base-color-4: #0ea5e9;
+  --base-color-5: #8b5cf6;
+  --base-color-6: #6366f1;
+  --base-color-7: #64748b;
+  --base-color-8: #0284c7;
+  --base-color-9: #334155;
+  --base-color-1-text: #1a1a1a;
+  --base-color-2-text: #ffffff;
+  --base-color-3-text: #ffffff;
+  --base-color-4-text: #ffffff;
+  --base-color-5-text: #ffffff;
+  --base-color-6-text: #ffffff;
+  --base-color-7-text: #ffffff;
+  --base-color-8-text: #ffffff;
+  --base-color-9-text: #ffffff;
+  --base-space-xs: 0.4;
+  --base-space-sm: 0.8;
+  --base-space-md: 1.2;
+  --base-space-base: 1.6;
+  --base-space-lg: 2.4;
+  --base-space-xl: 3.2;
+  --base-space-2xl: 4.8;
+  --base-shadow-sm: 0 1px 3px var(--base-shadow-color);
+  --base-shadow-md: 0 2px 8px var(--base-shadow-color);
+  --base-shadow-lg: 0 4px 12px var(--base-shadow-color);
+  --base-duration-fast: 0.1s;
+  --base-duration-normal: 0.15s;
+  --base-duration-medium: 0.25s;
+  --base-duration-slow: 0.3s;
+  --base-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --base-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --base-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --base-z-dropdown: 7500;
+  --base-z-modal-backdrop: 6000;
+  --base-z-modal: 7000;
+  --base-z-popover: 7600;
+  --base-z-toast: 8000;
+  --base-z-tooltip: 9000;
   color-scheme: light;
   --pc-main-bg: #ffffff;
   --pc-page-bg: var(--base-page-bg, #f8f9fa);
   --pc-subtle-bg: #e9ecef;
-  --pc-text-color-1: var(--base-text-color-1, #2c3e50);
-  --pc-text-color-2: var(--base-text-color-2, #6c757d);
-  --pc-accent: var(--base-accent-color, #007bff);
-  --pc-accent-hover: rgba(0, 123, 255, 0.12);
+  --pc-hover-bg: var(--base-hover-bg, #e9ecef);
+  --pc-active-bg: var(--base-active-bg, rgb(85.5830753354%, 87.5490196078%, 89.5149638803%));
+  --pc-text-color-1: var(--base-text-color-1, #334155);
+  --pc-text-color-2: var(--base-text-color-2, #64748b);
+  --pc-accent: var(--base-accent-color, #0ea5e9);
+  --pc-accent-hover: rgba(14, 165, 233, 0.08);
   --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-border-color: var(--base-border-color, #e2e8f0);
+  --pc-success: #10b981;
+  --pc-warning: #f59e0b;
   --pc-danger: #ef4444;
-  --pc-info: #17a2b8;
+  --pc-info: #06b6d4;
   --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-color-1: var(--base-color-1, #f59e0b);
+  --pc-color-2: var(--base-color-2, #ec4899);
+  --pc-color-3: var(--base-color-3, #10b981);
+  --pc-color-4: var(--base-color-4, #0ea5e9);
+  --pc-color-5: var(--base-color-5, #8b5cf6);
+  --pc-color-6: var(--base-color-6, #6366f1);
+  --pc-color-7: var(--base-color-7, #64748b);
+  --pc-color-8: var(--base-color-8, #0284c7);
+  --pc-color-9: var(--base-color-9, #334155);
+  --pc-color-1-text: var(--base-color-1-text, #1a1a1a);
+  --pc-color-2-text: var(--base-color-2-text, #ffffff);
+  --pc-color-3-text: var(--base-color-3-text, #ffffff);
+  --pc-color-4-text: var(--base-color-4-text, #ffffff);
+  --pc-color-5-text: var(--base-color-5-text, #ffffff);
+  --pc-color-6-text: var(--base-color-6-text, #ffffff);
+  --pc-color-7-text: var(--base-color-7-text, #ffffff);
+  --pc-color-8-text: var(--base-color-8-text, #ffffff);
+  --pc-color-9-text: var(--base-color-9-text, #ffffff);
   --pc-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * 1rem);
   --pc-border-radius: calc(var(--base-border-radius-md, 0.6) * 1rem);
   --pc-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * 1rem);

package/dist/css/component-reset.css

@@ -0,0 +1,27 @@
+:host {
+  box-sizing: border-box;
+  color: var(--base-text-color-1);
+  font-family: var(--base-font-family);
+  font-size: medium;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1.5;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-align: start;
+  text-indent: 0;
+  text-transform: none;
+  text-shadow: none;
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: normal;
+  writing-mode: horizontal-tb;
+  accent-color: auto;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}