@keenmate/pure-css 1.0.0-rc03 → 1.0.0-rc05
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +195 -0
- package/README.md +69 -23
- package/dist/css/base.css +48 -204
- package/dist/css/grid.css +364 -364
- package/dist/css/pure-css.css +1726 -612
- package/dist/css/reboot.css +5 -5
- package/dist/css/scrollbars.css +9 -9
- package/dist/css/utilities.css +78 -30
- package/package.json +18 -3
- package/src/js/container-breakpoint.js +308 -0
- package/src/js/fit.js +890 -0
- package/src/js/navbar-dropdown.js +164 -0
- package/src/js/pure-css.js +305 -0
- package/src/js/sidebar-resize.js +210 -0
- package/src/scss/_base-css-variables.scss +360 -385
- package/src/scss/_fit-flyout.scss +76 -0
- package/src/scss/_fonts.scss +36 -36
- package/src/scss/_layout-container.scss +168 -0
- package/src/scss/_layout-responsive.scss +181 -0
- package/src/scss/_navbar-elements.scss +419 -0
- package/src/scss/_navbar.scss +120 -0
- package/src/scss/_pa-grid.scss +43 -43
- package/src/scss/_resize-handle.scss +76 -0
- package/src/scss/_sidebar-states.scss +243 -0
- package/src/scss/_sidebar.scss +420 -0
- package/src/scss/base.scss +2 -3
- package/src/scss/grid.scss +1 -1
- package/src/scss/pure-css.scss +20 -5
- package/src/scss/reboot.scss +5 -5
- package/src/scss/scrollbars.scss +10 -10
- package/src/scss/utilities.scss +791 -758
- package/src/scss/variables/_base.scss +232 -232
- package/src/scss/variables/_components.scss +840 -835
- package/src/scss/variables/_layout.scss +62 -62
- package/src/scss/variables/_system.scss +1 -1
- package/src/scss/variables/_typography.scss +37 -37
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,201 @@
|
|
|
3
3
|
All notable changes to `@keenmate/pure-css` are documented here. Format based on
|
|
4
4
|
[Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
|
5
5
|
|
|
6
|
+
## [1.0.0-rc05] — 2026-08-27 [PUBLISHED]
|
|
7
|
+
|
|
8
|
+
### Added
|
|
9
|
+
|
|
10
|
+
- **The app shell moves into the foundation — navbar, sidebar, and layout
|
|
11
|
+
container.** pure-css was variables + grid + utilities; rc05 also relocates the
|
|
12
|
+
structural app-shell layer out of pure-admin-core, so a standalone page (docs
|
|
13
|
+
site, portal) gets the same navbar/sidebar/layout chrome as a full pure-admin
|
|
14
|
+
app without pulling in the component library. Seven new partials, all `@use`d
|
|
15
|
+
into the `pure-css.css` **bundle only** (base.css / grid.css / utilities.css
|
|
16
|
+
untouched; no new standalone artifact):
|
|
17
|
+
- `_navbar.scss` + `_navbar-elements.scss` — the fixed navbar (`.pc-navbar`
|
|
18
|
+
with `__inner`/`__start`/`__center`/`__end` regions) and its elements (burger
|
|
19
|
+
menu, brand wordmark `.pc-app-header`, nav menu `.pc-navmenu`, page title
|
|
20
|
+
`.pc-page-header`, profile button, theme switcher).
|
|
21
|
+
- `_sidebar.scss` + `_sidebar-states.scss` — the sidebar nav with nested
|
|
22
|
+
submenus (`.pc-sidebar`, `.pc-layout__sidebar`, drag-to-resize
|
|
23
|
+
`.pc-sidebar-resize`) and its hidden / icon-collapse / expanded states.
|
|
24
|
+
- `_layout-container.scss` — the layout wrapper (`.pc-layout` with
|
|
25
|
+
`__inner`/`__main`/`__content`/`__footer` and the `.pc-footer__*` regions),
|
|
26
|
+
including sticky/scroll content modes. Emitting `.pc-layout__main` here also
|
|
27
|
+
gives the grid's container-query responsive columns (`.pc-col-md-*`) their
|
|
28
|
+
documented automatic containment context in the same bundle (the
|
|
29
|
+
`_pa-grid.scss` note is corrected from the pre-rc04 `.pa-layout__main` to
|
|
30
|
+
`.pc-layout__main`).
|
|
31
|
+
- `_layout-responsive.scss` — the mobile/tablet media queries for the shell.
|
|
32
|
+
- `_resize-handle.scss` — a mixin-only partial (emits nothing on its own)
|
|
33
|
+
providing the shared grab-knob look `@use`d by the sidebar resize handle and
|
|
34
|
+
splitter gutters.
|
|
35
|
+
- `_fit-flyout.scss` — the Fit engine's floating-menu sink
|
|
36
|
+
(`.pc-fit-flyout__*`): a `•••` trigger + a `<body>`-parented panel that
|
|
37
|
+
`fit.js` fills on demand when slots relocate out of the row.
|
|
38
|
+
|
|
39
|
+
pure-admin-core keeps same-named partials that now just `@forward` these, so the
|
|
40
|
+
shell is single-sourced in the foundation and the two can't drift.
|
|
41
|
+
|
|
42
|
+
- **The shell's behaviour ships too — a dependency-free JS runtime (`src/js/`).**
|
|
43
|
+
The shell is no longer styling-only: the foundation now carries the vanilla-JS
|
|
44
|
+
runtime that drives it, so pure-css is no longer a CSS-only package. Shipped
|
|
45
|
+
**as source** (no build step) via a new `./js` export (and `./js/*` for
|
|
46
|
+
individual engines); `files` gains `src/js/`.
|
|
47
|
+
- `pure-css.js` installs the `window.pureCss` namespace — a tiny event bus,
|
|
48
|
+
live viewport / OS-colour-scheme / capability-first device sources, overlay
|
|
49
|
+
primitives (scroll-lock, keyboard-inset), an open-menu registry, a shared
|
|
50
|
+
`config` baseline (single-sourced from SCSS via `--pc-*` vars), and
|
|
51
|
+
`components.initAll(scope)`. Load-order-safe and stands alone when pure-admin
|
|
52
|
+
is absent; `pure-admin.js` adopts the same buses by reference on top.
|
|
53
|
+
- `fit.js` — the Fit engine (`data-pc-fit` = hide / steps / relocate). It
|
|
54
|
+
**absorbs the former `navbar-collapse.js`** (progressive nav folding via
|
|
55
|
+
`data-pc-fit-nav`, sinking items to the sidebar or a generated "More" menu),
|
|
56
|
+
so that separate file no longer exists.
|
|
57
|
+
- `navbar-dropdown.js` (tap-toggle nav dropdowns/submenus),
|
|
58
|
+
`sidebar-resize.js` (drag-to-resize the sidebar), and
|
|
59
|
+
`container-breakpoint.js` (container-query breakpoint driver).
|
|
60
|
+
|
|
61
|
+
Shell CSS is authored no-JS-safe, so styling degrades gracefully rather than
|
|
62
|
+
breaking when the runtime isn't loaded.
|
|
63
|
+
|
|
64
|
+
### Fixed
|
|
65
|
+
|
|
66
|
+
- **Migrated the dead `data-pa-nav-collapse` hook to `data-pc-fit-nav`.** The
|
|
67
|
+
relocated nav-collapse CSS keyed on the pre-rc04 `pa-`-branded
|
|
68
|
+
`[data-pa-nav-collapse]` attribute driven by the old `navbar-collapse.js`;
|
|
69
|
+
since that engine is now merged into `fit.js` (which reads `data-pc-fit-nav`),
|
|
70
|
+
the selectors in `_navbar-elements.scss` / `_layout-responsive.scss` were stale
|
|
71
|
+
and matched nothing. Repointed at `[data-pc-fit-nav]` and corrected the
|
|
72
|
+
companion comments (`navbar-collapse.js` → `fit.js`). Also de-branded the fit
|
|
73
|
+
hide-class `.pa-fit-hidden` → `.pc-fit-hidden`.
|
|
74
|
+
|
|
75
|
+
### Internal
|
|
76
|
+
|
|
77
|
+
- **GitHub Actions release workflow (`.github/workflows/release.yml`).** On a `v*.*.*`
|
|
78
|
+
tag push, builds the CSS (`npm ci` + `npm run build`) and publishes a GitHub Release
|
|
79
|
+
with a `pure-css-<version>.zip` (bundling `dist/`, `src/scss/`, `README.md`,
|
|
80
|
+
`CHANGELOG.md`, `LICENSE` — the same set as the package `files`, so the zip is a
|
|
81
|
+
toolchain-free drop-in for consumers who don't use npm) plus a `.sha256` checksum.
|
|
82
|
+
Auto-generated release notes; tags containing `-` (rc) publish as a pre-release.
|
|
83
|
+
Mirrors pure-admin-core's release workflow, adapted for this single-package repo.
|
|
84
|
+
- **Exhaustive, data-driven utilities e2e coverage.** Rewrote `e2e/utilities.spec.ts`
|
|
85
|
+
from a handful of spot-checks into a hard value assertion for 655 of the 664 shipped
|
|
86
|
+
utility classes (the 9 `auto` sizing classes — `m-auto` + per-side, `w-auto`, `h-auto` —
|
|
87
|
+
are layout-resolved and covered behaviourally instead). Each family measures every one
|
|
88
|
+
of its classes' computed styles in a single in-browser pass, then diffs in Node so a
|
|
89
|
+
failure lists exactly which classes are off; the expectations independently encode the
|
|
90
|
+
10px-rem contract and the documented scales rather than reading them back from the CSS,
|
|
91
|
+
so a failure means the compiled output disagrees with the contract or the contract
|
|
92
|
+
regressed. Renamed the fixture `test/utilities.html` → `test/utilities-scale.html` with
|
|
93
|
+
definite-size `#w-parent` / `#h-parent` containers so percentage widths/heights resolve
|
|
94
|
+
to known px. Test-only — no change to shipped CSS.
|
|
95
|
+
|
|
96
|
+
## [1.0.0-rc04] — 2026-08-26 [PUBLISHED]
|
|
97
|
+
|
|
98
|
+
### Changed (BREAKING)
|
|
99
|
+
|
|
100
|
+
- **pure-css now ships only the BASE token contract — component tokens moved to
|
|
101
|
+
the consumer that owns the components.** pure-css is a *foundation*: its
|
|
102
|
+
bundles (`pure-css.css`, `base.css`) now emit only the ~46 base `--pc-*` tokens
|
|
103
|
+
its own CSS consumes or exposes as universal theming primitives (surfaces,
|
|
104
|
+
text, accent, links, border, the semantic role identities + their utility text
|
|
105
|
+
colours, the theme palette slots, the radius scale). The ~165 **component**
|
|
106
|
+
tokens (`--pc-btn-*`, `--pc-card-*`, `--pc-table-*`, `--pc-alert-*`, badges,
|
|
107
|
+
tooltips, panels, command palette, multiselect, sentiment scale, form spacing,
|
|
108
|
+
the derived contextual surfaces, admin layout chrome) are no longer emitted by
|
|
109
|
+
the foundation. They are pure-admin's contract.
|
|
110
|
+
- `output-pc-css-variables` is now base-only. The component tokens are emitted
|
|
111
|
+
by the new **`output-pc-component-variables`** mixin (+ the existing
|
|
112
|
+
`output-pc-alert-variables-{light,dark}`), which pure-css still *defines*
|
|
113
|
+
(they read the shared `$`-variable vocabulary in `variables/*`, so they must
|
|
114
|
+
be authored where that vocabulary is in scope) but does **not** call from its
|
|
115
|
+
own bundle. Consumers that ship the components — pure-admin core, every
|
|
116
|
+
theme — opt in by `@include output-pc-component-variables` alongside
|
|
117
|
+
`output-pc-css-variables`.
|
|
118
|
+
- **Theme authors / anyone calling the emit mixins must add
|
|
119
|
+
`@include output-pc-component-variables;`** (after `output-pc-css-variables`)
|
|
120
|
+
or lose every component token. Consumers of the *compiled* theme/core CSS are
|
|
121
|
+
unaffected — the emitted token set is identical, just split across two mixins.
|
|
122
|
+
- **Every emitted CSS variable de-branded from `--pa-*` to `--pc-*`.** pure-css is
|
|
123
|
+
a *foundation*, but it still emitted its entire runtime custom-property surface
|
|
124
|
+
under pure-admin's `pa` brand. The full `--pa-*` set (~210 vars: `--pa-accent`,
|
|
125
|
+
`--pa-text-color-*`, `--pa-card-bg`, `--pa-border-*`, the contextual /alert sets,
|
|
126
|
+
`--pa-color-1..9` + `-text`, the new `--pc-*` form-spacing family already shipped
|
|
127
|
+
this cut, etc.) is renamed to `--pc-*`. This completes the same de-branding the
|
|
128
|
+
grid/mode classes started above — nothing pure-admin-branded remains in the
|
|
129
|
+
foundation's output.
|
|
130
|
+
- **The emit mixins move too:** `output-pa-css-variables` → `output-pc-css-variables`,
|
|
131
|
+
`output-pa-alert-variables-light` / `-dark` → `output-pc-alert-variables-*`.
|
|
132
|
+
(`output-base-css-variables` is unchanged — `--base-*` is a separate, neutral
|
|
133
|
+
web-component contract and stays.)
|
|
134
|
+
- **Untouched:** `--base-*` (web-component bridge), `--page-loader-*` (pre-FOUC
|
|
135
|
+
loader), and the `.pa-color-{name}` colour-variant **class** (a class, not a
|
|
136
|
+
`--pa-` variable).
|
|
137
|
+
- **Migration:** a boundary-aware replace of the string `--pa-` → `--pc-` across
|
|
138
|
+
markup, stylesheets, inline `style="--pa-…"`, JS `getPropertyValue`/`setProperty`
|
|
139
|
+
calls, and every theme's `:root` / dark-mode `--pa-*` override block. Safe
|
|
140
|
+
because the leading `--` + trailing `-` can't match `--base-*` or `--page-loader-*`.
|
|
141
|
+
pure-admin, its demo, all 16 themes, and the svelte/keen wrappers migrate in
|
|
142
|
+
lockstep with this release.
|
|
143
|
+
- **Grid classes renamed from the consumer-branded `pa-` to the foundation's own
|
|
144
|
+
`pc-` prefix.** `.pa-row` → `.pc-row`, `.pa-col*` → `.pc-col*` (all percentage /
|
|
145
|
+
fraction / responsive / `--grow`/`--shrink`/`--no-padding` variants),
|
|
146
|
+
`.pa-offset*` → `.pc-offset*`, `.pa-cq` → `.pc-cq`, `.pa-hide*` → `.pc-hide*`,
|
|
147
|
+
`.pa-show*` → `.pc-show*`. The grid is a pure-css *foundation* primitive, so it
|
|
148
|
+
should not carry pure-admin's (`pa`) brand — this de-couples it. **No dual-emit:**
|
|
149
|
+
the old `pa-*` grid classes are gone. Consumers must migrate markup
|
|
150
|
+
(`class="pa-col-1-2"` → `class="pc-col-1-2"`) — a boundary-aware find/replace
|
|
151
|
+
(careful: `pa-col` is a substring of `pa-color-*`, which must NOT be touched).
|
|
152
|
+
pure-admin, its demo, and the svelte/keen wrappers are migrated in lockstep.
|
|
153
|
+
- **Light/dark mode scope classes renamed `.pa-mode-*` → `.pc-mode-*`.**
|
|
154
|
+
The light/dark scopes the foundation emits its variables against (and that apps
|
|
155
|
+
toggle on `<body>`) are foundation-owned, so they move to the `pc-` prefix too.
|
|
156
|
+
`output-pc-css-variables` now emits at `:root, .pc-mode-light, .pc-mode-dark`.
|
|
157
|
+
Consumers toggling the class in JS (`classList.add('pc-mode-dark')`) and themes'
|
|
158
|
+
dark-mode blocks migrate in lockstep. (Safe replace: the string `pa-mode-` →
|
|
159
|
+
`pc-mode-`; `pa-modal` is untouched since `mode` ≠ `moda`.)
|
|
160
|
+
|
|
161
|
+
### Added
|
|
162
|
+
|
|
163
|
+
- **Sizing utilities consolidated into the foundation.** The universal sizing/flex
|
|
164
|
+
utilities that had been left in pure-admin now live here, so a standalone
|
|
165
|
+
pure-css page has the full set: viewport heights `h-full` / `h-screen` /
|
|
166
|
+
`min-h-full` / `min-h-screen` / `max-h-full` / `max-h-screen`, and the
|
|
167
|
+
Tailwind-style flex shorthands `flex-1` / `flex-auto` / `flex-initial` /
|
|
168
|
+
`flex-none` / `flex-grow` / `flex-shrink` (alongside the existing
|
|
169
|
+
`flex-grow-0/1`, `flex-shrink-0/1`). pure-css already owned the width/height %
|
|
170
|
+
+ rem scales (`w-*`/`h-*`, `wr-*`/`hr-*`) and the full min/max families
|
|
171
|
+
(`minw-*`/`maxh-*`/`minwr-*`/`maxhr-*`/…); pure-admin's duplicate rem-height
|
|
172
|
+
`h-Nx`/`min-h-Nx`/`max-h-Nx` set (byte-identical to `hr-N`/`minhr-N`/`maxhr-N`)
|
|
173
|
+
is retired in favour of the foundation's `hr-`/`wr-` naming (`r` = rem).
|
|
174
|
+
- **Complete form-spacing contract as runtime CSS variables, under a pure-css-owned
|
|
175
|
+
`--pc-` namespace.** `output-pc-css-variables` now emits the full anatomy of a
|
|
176
|
+
form's spacing at `:root`, so every consumer (pure-admin, keen-docs,
|
|
177
|
+
keen-pure-admin) shares one contract instead of re-declaring `var()` chains or
|
|
178
|
+
being stuck with compile-time-only margins:
|
|
179
|
+
- Vertical rhythm: `--pc-label-gap` (label → control), `--pc-help-gap`
|
|
180
|
+
(control → help/error), `--pc-field-gap` (field → field),
|
|
181
|
+
`--pc-form-actions-offset` (last field → actions row).
|
|
182
|
+
- Inline gaps: `--pc-form-gap` (shared + label↔inline-icon), `--pc-choice-gap`
|
|
183
|
+
(between options), `--pc-choice-inner-gap` (control↔label), `--pc-form-actions-gap`
|
|
184
|
+
(between buttons), `--pc-field-horizontal-gap` (horizontal label col↔input col).
|
|
185
|
+
|
|
186
|
+
The inline "gap" family chains to `--pc-form-gap` (one knob moves them all);
|
|
187
|
+
every var is also overridable on its own scope. These are the first
|
|
188
|
+
foundation-owned runtime vars to use `--pc-` rather than the legacy
|
|
189
|
+
consumer-branded `--pa-` prefix — new foundation tokens should follow suit.
|
|
190
|
+
|
|
191
|
+
### Changed
|
|
192
|
+
|
|
193
|
+
- **Renamed the misleading `$form-scale` token to `$form-gap`.** It reads like an
|
|
194
|
+
input-sizing multiplier but is only ever consumed as a `gap:` value — the small
|
|
195
|
+
gap between adjacent form bits (a label and its inline icon, footer action
|
|
196
|
+
buttons, checkbox/radio group options). `$form-scale` is kept as a `!default`
|
|
197
|
+
alias of `$form-gap`, so existing overrides keep working; it will be retired in
|
|
198
|
+
a major. (pure-admin reads the gap through `var(--pc-form-gap, …)`, so it is
|
|
199
|
+
also runtime-tunable.)
|
|
200
|
+
|
|
6
201
|
## [1.0.0-rc03] — 2026-08-21 [PUBLISHED]
|
|
7
202
|
|
|
8
203
|
### Changed
|
package/README.md
CHANGED
|
@@ -1,27 +1,51 @@
|
|
|
1
1
|
# @keenmate/pure-css
|
|
2
2
|
|
|
3
|
-
The KeenMate CSS **foundation** — the `--base-*` theming contract, the flexbox grid (`.
|
|
3
|
+
The KeenMate CSS **foundation** — the `--base-*` theming contract, the flexbox grid (`.pc-row` / `.pc-col`), and the
|
|
4
4
|
utility classes — extracted from [`@keenmate/pure-admin-core`](https://github.com/KeenMate/pure-admin)
|
|
5
5
|
so it can be consumed on its own.
|
|
6
6
|
|
|
7
|
-
## What's New in 1.0.0-
|
|
8
|
-
|
|
9
|
-
- **
|
|
10
|
-
- **
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
7
|
+
## What's New in 1.0.0-rc05
|
|
8
|
+
|
|
9
|
+
- **App shell — the navbar, sidebar, and layout container join the foundation** — pure-css has been variables + grid + utilities since the extraction; rc05 relocates the structural *app-shell* layer out of `@keenmate/pure-admin-core`, so a standalone page gets the same navbar/sidebar/layout chrome as a full admin app without pulling in the 40+ component library. Eight new partials (`_navbar.scss`, `_navbar-elements.scss`, `_sidebar.scss`, `_sidebar-states.scss`, `_layout-container.scss`, `_layout-responsive.scss`, `_resize-handle.scss`, `_fit-flyout.scss`) `@use` into the `pure-css.css` bundle — `base.css`, `grid.css` and `utilities.css` are untouched and there's no new CSS artifact. The emitted surface is `pc-`-branded like the rest of the foundation: the fixed navbar (`.pc-navbar` + `__start`/`__center`/`__end`, burger, brand `.pc-app-header`, `.pc-navmenu`, profile button, theme switcher), the nested sidebar with hidden/icon-collapse/expanded states and a drag-to-resize handle (`.pc-sidebar`, `.pc-layout__sidebar`, `.pc-sidebar-resize`), and the layout wrapper (`.pc-layout` + `__main`/`__content`/`__footer`) with mobile/tablet media queries. pure-admin-core now `@forward`s same-named partials instead of owning copies, so the shell is single-sourced here and can't drift.
|
|
10
|
+
- **The shell now brings its own behaviour — pure-css is no longer CSS-only** — the shell's JavaScript ships with the foundation as a small, dependency-free runtime under `src/js/`, exposed as source (no build step) via a new `./js` export. `pure-css.js` installs `window.pureCss` — an event bus, live viewport / OS-colour-scheme / capability-first device sources, overlay primitives (scroll-lock, keyboard-inset), an open-menu registry, a shared `config` baseline single-sourced from the SCSS via `--pc-*` vars, and `components.initAll(scope)` — and the shell engines hang off it: `fit.js` (the `data-pc-fit` fit engine, which also absorbed the former `navbar-collapse.js` progressive nav-folding via `data-pc-fit-nav`, so that file no longer exists), `navbar-dropdown.js`, `sidebar-resize.js`, and `container-breakpoint.js`. The runtime is load-order-safe and stands alone when pure-admin is absent; the shell CSS is authored no-JS-safe, so styling degrades gracefully rather than breaking when the runtime isn't loaded.
|
|
11
|
+
- **The grid's automatic responsive context now ships in the same bundle** — `_pa-grid.scss`'s container-query responsive columns (`.pc-col-md-*`, …) need a containment-context ancestor, documented as `.pc-layout__main`. That selector previously lived only in pure-admin-core, so the note was aspirational for a standalone pure-css page; with `_layout-container.scss` relocated into the bundle, `.pc-layout__main` is emitted here and the responsive variants get their context out of the box (the stale comment still read `.pa-layout__main` from before the rc04 de-brand — corrected to `.pc-layout__main`).
|
|
12
|
+
- **Toolchain-free zip distribution via GitHub Releases** — a new `.github/workflows/release.yml` builds the CSS on every `v*.*.*` tag push and publishes a GitHub Release carrying `pure-css-<version>.zip` (the same file set as the npm package — `dist/`, `src/scss/`, `README.md`, `CHANGELOG.md`, `LICENSE`) plus a `.sha256` checksum, so consumers who don't use npm can vendor the built foundation as a drop-in. rc tags (those containing `-`) publish as GitHub pre-releases. Mirrors pure-admin-core's release workflow, adapted for this single-package repo.
|
|
13
|
+
|
|
14
|
+
## What's New in 1.0.0-rc04
|
|
15
|
+
|
|
16
|
+
- **pure-css is now strictly a base — it emits only the base token contract
|
|
17
|
+
(BREAKING).** `base.css` / `pure-css.css` ship the ~46 base `--pc-*` tokens the
|
|
18
|
+
foundation actually uses or exposes as universal primitives; the ~165 component
|
|
19
|
+
tokens (buttons, cards, tables, alerts, panels, …) are pure-admin's contract,
|
|
20
|
+
emitted by the new `output-pc-component-variables` mixin. If you author themes
|
|
21
|
+
or call the emit mixins, add `@include output-pc-component-variables;` after
|
|
22
|
+
`output-pc-css-variables`. Consumers of compiled CSS are unaffected.
|
|
23
|
+
- **The foundation namespace is fully de-branded from `pa` to `pc` (BREAKING).**
|
|
24
|
+
pure-css was carved out of pure-admin, so it still carried pure-admin's `pa`
|
|
25
|
+
brand in its public surface. That's gone:
|
|
26
|
+
- **Grid + mode classes:** `.pa-row` / `.pa-col*` / `.pa-offset*` / `.pa-cq` /
|
|
27
|
+
`.pa-hide*` / `.pa-show*` → `.pc-*`; `.pa-mode-light` / `.pa-mode-dark` →
|
|
28
|
+
`.pc-mode-*`.
|
|
29
|
+
- **Every emitted CSS variable:** the whole `--pa-*` runtime surface (~210
|
|
30
|
+
custom properties) → `--pc-*` (`--pa-accent` → `--pc-accent`, `--pa-card-bg`
|
|
31
|
+
→ `--pc-card-bg`, `--pa-color-1..9` → `--pc-color-1..9`, …). `--base-*`
|
|
32
|
+
(web-component bridge) and `--page-loader-*` are unchanged.
|
|
33
|
+
- **The emit mixins:** `output-pa-css-variables` → `output-pc-css-variables`,
|
|
34
|
+
`output-pa-alert-variables-light/dark` → `output-pc-alert-variables-*`.
|
|
35
|
+
Consumers migrate markup, `var()` reads, inline `style="--pa-…"`, and theme
|
|
36
|
+
`:root` blocks in lockstep — a boundary-aware find/replace of the string
|
|
37
|
+
`--pa-` → `--pc-` (safe: it can't touch `--base-*`, `--page-loader-*`, or the
|
|
38
|
+
`.pa-color-{name}` variant **class**).
|
|
39
|
+
- **Sizing utilities consolidated into the foundation.** The universal
|
|
40
|
+
viewport-height utilities (`h-full` / `h-screen` / `min-h-full` /
|
|
41
|
+
`min-h-screen` / `max-h-full` / `max-h-screen`) and the Tailwind-style flex
|
|
42
|
+
shorthands (`flex-1` / `flex-auto` / `flex-initial` / `flex-none` /
|
|
43
|
+
`flex-grow` / `flex-shrink`) now ship from pure-css, so a standalone page gets
|
|
44
|
+
the complete set without borrowing anything from pure-admin. pure-admin's
|
|
45
|
+
duplicate rem-height `h-Nx` / `min-h-Nx` / `max-h-Nx` classes are retired in
|
|
46
|
+
favour of the foundation's `hr-` / `wr-` naming (`r` = rem).
|
|
47
|
+
- **Complete form-spacing contract as runtime `--pc-*` variables** and the
|
|
48
|
+
`$form-scale` → `$form-gap` rename (see CHANGELOG).
|
|
25
49
|
|
|
26
50
|
## Why
|
|
27
51
|
|
|
@@ -34,7 +58,7 @@ that the components, the admin framework, and everything else all agree on.
|
|
|
34
58
|
```
|
|
35
59
|
@keenmate/pure-css @keenmate/pure-admin-core
|
|
36
60
|
├─ --base-* variables ◀──── imports pure-css, adds
|
|
37
|
-
├─ .
|
|
61
|
+
├─ .pc-row / .pc-col grid the component library
|
|
38
62
|
└─ utility classes
|
|
39
63
|
▲
|
|
40
64
|
└── docs sites, portals, component hosts consume the built CSS directly
|
|
@@ -76,14 +100,36 @@ $base-page-bg: #0b1020;
|
|
|
76
100
|
| Artifact | Contents | When to link |
|
|
77
101
|
| --- | --- | --- |
|
|
78
102
|
| `dist/css/pure-css.css` | everything below, in one file | the common case |
|
|
79
|
-
| `dist/css/base.css` | only `:root { --base-*; --
|
|
80
|
-
| `dist/css/grid.css` | `.
|
|
103
|
+
| `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 |
|
|
104
|
+
| `dist/css/grid.css` | `.pc-row` / `.pc-col-*` (percentage + fraction columns, container-query responsive) | layout only |
|
|
81
105
|
| `dist/css/utilities.css` | spacing / flex / display / width-height utilities (`.m-4`, `.d-flex`, `.w-50`, …) | utilities only |
|
|
82
106
|
|
|
107
|
+
The `pure-css.css` bundle also includes the **app shell** (navbar, sidebar,
|
|
108
|
+
layout container) — `base.css` / `grid.css` / `utilities.css` do not.
|
|
109
|
+
|
|
110
|
+
### The app-shell runtime (`./js`)
|
|
111
|
+
|
|
112
|
+
The shell's behaviour (nav fit/collapse, dropdowns, drag-to-resize, container
|
|
113
|
+
breakpoints) ships as dependency-free source JS via the `./js` export — no
|
|
114
|
+
bundler required, drop it in with a `<script>` and call `initAll`:
|
|
115
|
+
|
|
116
|
+
```html
|
|
117
|
+
<link rel="stylesheet" href="node_modules/@keenmate/pure-css/dist/css/pure-css.css">
|
|
118
|
+
<script src="node_modules/@keenmate/pure-css/src/js/pure-css.js"></script>
|
|
119
|
+
<script src="node_modules/@keenmate/pure-css/src/js/fit.js"></script>
|
|
120
|
+
<script src="node_modules/@keenmate/pure-css/src/js/navbar-dropdown.js"></script>
|
|
121
|
+
<script src="node_modules/@keenmate/pure-css/src/js/sidebar-resize.js"></script>
|
|
122
|
+
<script>window.pureCss.components.initAll(document);</script>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
`window.pureCss` also exposes an event bus and live `viewport` / `colorScheme` /
|
|
126
|
+
`device` sources. The runtime is optional — shell CSS is authored no-JS-safe, so
|
|
127
|
+
the styling stands on its own and the JS only adds the interactive behaviour.
|
|
128
|
+
|
|
83
129
|
### The `--base-*` contract
|
|
84
130
|
|
|
85
131
|
`--base-*` is the **single source of truth for theming**. Framework colors, component variables
|
|
86
|
-
(`--
|
|
132
|
+
(`--pc-*`) and web/svelte components all derive from it via fallback chains
|
|
87
133
|
(`--ms-accent-color: var(--base-accent-color, #3b82f6)`). Categories: accent, text, background,
|
|
88
134
|
border, input, dropdown, tooltip, contextual (success/danger/warning/info), interactive states,
|
|
89
135
|
typography, border-radius. The full list is `src/scss/variables/_base.scss`.
|
package/dist/css/base.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
:root,
|
|
2
|
-
.
|
|
3
|
-
.
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
2
|
+
.pc-mode-light,
|
|
3
|
+
.pc-mode-dark {
|
|
4
|
+
--pc-text-strong: color-mix(in srgb, var(--pc-text-color-1) 85%, transparent);
|
|
5
|
+
--pc-text-secondary: color-mix(in srgb, var(--pc-text-color-1) 70%, transparent);
|
|
6
|
+
--pc-text-tertiary: color-mix(in srgb, var(--pc-text-color-1) 55%, transparent);
|
|
7
|
+
--pc-surface-hover: color-mix(in srgb, var(--pc-text-color-1) 4%, transparent);
|
|
8
|
+
--pc-surface-track: color-mix(in srgb, var(--pc-text-color-1) 12%, transparent);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
:root {
|
|
@@ -104,201 +104,45 @@
|
|
|
104
104
|
--base-border-radius-md: 0.6;
|
|
105
105
|
--base-border-radius-lg: 0.8;
|
|
106
106
|
color-scheme: light;
|
|
107
|
-
--
|
|
108
|
-
--
|
|
109
|
-
--
|
|
110
|
-
--
|
|
111
|
-
--
|
|
112
|
-
--
|
|
113
|
-
--
|
|
114
|
-
--
|
|
115
|
-
--
|
|
116
|
-
--
|
|
117
|
-
--
|
|
118
|
-
--
|
|
119
|
-
--
|
|
120
|
-
--
|
|
121
|
-
--
|
|
122
|
-
--
|
|
123
|
-
--
|
|
124
|
-
--
|
|
125
|
-
--
|
|
126
|
-
--
|
|
127
|
-
--
|
|
128
|
-
--
|
|
129
|
-
--
|
|
130
|
-
--
|
|
131
|
-
--
|
|
132
|
-
--
|
|
133
|
-
--
|
|
134
|
-
--
|
|
135
|
-
--
|
|
136
|
-
--
|
|
137
|
-
--
|
|
138
|
-
--
|
|
139
|
-
--
|
|
140
|
-
--
|
|
141
|
-
--
|
|
142
|
-
--
|
|
143
|
-
--
|
|
144
|
-
--
|
|
145
|
-
--
|
|
146
|
-
--
|
|
147
|
-
--
|
|
148
|
-
--pa-footer-border-color: #e1e5e9;
|
|
149
|
-
--pa-btn-primary-bg: #007bff;
|
|
150
|
-
--pa-btn-primary-bg-hover: rgb(20%, 58.5882352941%, 100%);
|
|
151
|
-
--pa-btn-primary-bg-light: color-mix(in srgb, var(--pa-btn-primary-bg) 5%, transparent);
|
|
152
|
-
--pa-btn-primary-text: #ffffff;
|
|
153
|
-
--pa-btn-secondary-bg: #6c757d;
|
|
154
|
-
--pa-btn-secondary-bg-hover: #545b62;
|
|
155
|
-
--pa-btn-secondary-text: #ffffff;
|
|
156
|
-
--pa-btn-secondary-outline-color: var(--pa-btn-secondary-bg);
|
|
157
|
-
--pa-btn-success-bg: var(--pa-success);
|
|
158
|
-
--pa-btn-success-bg-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
|
|
159
|
-
--pa-btn-success-text: #ffffff;
|
|
160
|
-
--pa-btn-danger-bg: var(--pa-danger);
|
|
161
|
-
--pa-btn-danger-bg-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
|
|
162
|
-
--pa-btn-danger-text: #ffffff;
|
|
163
|
-
--pa-btn-warning-bg: var(--pa-warning);
|
|
164
|
-
--pa-btn-warning-bg-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
|
|
165
|
-
--pa-btn-warning-text: #212529;
|
|
166
|
-
--pa-btn-info-bg: var(--pa-info);
|
|
167
|
-
--pa-btn-info-bg-hover: rgb(6.7973856209%, 47.8772378517%, 54.3790849673%);
|
|
168
|
-
--pa-btn-info-text: #ffffff;
|
|
169
|
-
--pa-btn-light-bg: #f8f9fa;
|
|
170
|
-
--pa-btn-light-bg-hover: #e9ecef;
|
|
171
|
-
--pa-btn-light-text: #2c3e50;
|
|
172
|
-
--pa-btn-dark-bg: #343a40;
|
|
173
|
-
--pa-btn-dark-bg-hover: #1d2124;
|
|
174
|
-
--pa-btn-dark-text: #ffffff;
|
|
175
|
-
--pa-success-bg: var(--pa-success);
|
|
176
|
-
--pa-success-bg-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
|
|
177
|
-
--pa-success-bg-light: color-mix(in srgb, var(--pa-success) 10%, transparent);
|
|
178
|
-
--pa-success-bg-subtle: color-mix(in srgb, var(--pa-success) 8%, transparent);
|
|
179
|
-
--pa-success-border: color-mix(in srgb, var(--pa-success) 20%, transparent);
|
|
180
|
-
--pa-success-text: #155724;
|
|
181
|
-
--pa-success-text-light: #d4edda;
|
|
182
|
-
--pa-danger-bg: var(--pa-danger);
|
|
183
|
-
--pa-danger-bg-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
|
|
184
|
-
--pa-danger-bg-light: color-mix(in srgb, var(--pa-danger) 10%, transparent);
|
|
185
|
-
--pa-danger-bg-subtle: color-mix(in srgb, var(--pa-danger) 8%, transparent);
|
|
186
|
-
--pa-danger-border: color-mix(in srgb, var(--pa-danger) 20%, transparent);
|
|
187
|
-
--pa-danger-text: #721c24;
|
|
188
|
-
--pa-danger-text-light: #f8d7da;
|
|
189
|
-
--pa-warning-bg: var(--pa-warning);
|
|
190
|
-
--pa-warning-bg-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
|
|
191
|
-
--pa-warning-bg-light: color-mix(in srgb, var(--pa-warning) 10%, transparent);
|
|
192
|
-
--pa-warning-bg-subtle: color-mix(in srgb, var(--pa-warning) 8%, transparent);
|
|
193
|
-
--pa-warning-border: color-mix(in srgb, var(--pa-warning) 20%, transparent);
|
|
194
|
-
--pa-warning-text: #856404;
|
|
195
|
-
--pa-warning-text-light: #fff3cd;
|
|
196
|
-
--pa-info-bg: var(--pa-info);
|
|
197
|
-
--pa-info-bg-hover: rgb(6.7973856209%, 47.8772378517%, 54.3790849673%);
|
|
198
|
-
--pa-info-bg-light: color-mix(in srgb, var(--pa-info) 10%, transparent);
|
|
199
|
-
--pa-info-bg-subtle: color-mix(in srgb, var(--pa-info) 8%, transparent);
|
|
200
|
-
--pa-info-border: color-mix(in srgb, var(--pa-info) 20%, transparent);
|
|
201
|
-
--pa-info-text: #0c5460;
|
|
202
|
-
--pa-info-text-light: #d1ecf1;
|
|
203
|
-
--pa-card-bg: #ffffff;
|
|
204
|
-
--pa-card-header-bg: #f8f9fa;
|
|
205
|
-
--pa-card-footer-bg: #ffffff;
|
|
206
|
-
--pa-card-tabs-bg: #f8f9fa;
|
|
207
|
-
--pa-input-bg: #ffffff;
|
|
208
|
-
--pa-input-border: #ced4da;
|
|
209
|
-
--pa-input-text: #495057;
|
|
210
|
-
--pa-input-focus-border-color: #007bff;
|
|
211
|
-
--pa-select-focus-border-color: #007bff;
|
|
212
|
-
--pa-textarea-focus-border-color: #007bff;
|
|
213
|
-
--pa-checkbox-border-color: #e1e5e9;
|
|
214
|
-
--pa-checkbox-border-color-hover: #007bff;
|
|
215
|
-
--pa-checkbox-border-color-checked: #007bff;
|
|
216
|
-
--pa-checkbox-bg: #ffffff;
|
|
217
|
-
--pa-checkbox-bg-checked: #007bff;
|
|
218
|
-
--pa-checkbox-bg-indeterminate: #007bff;
|
|
219
|
-
--pa-checkbox-checkmark-color: white;
|
|
220
|
-
--pa-checkbox-focus-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
|
221
|
-
--pa-input-group-prepend-bg: #6c757d;
|
|
222
|
-
--pa-input-group-prepend-text: #6c757d;
|
|
223
|
-
--pa-input-group-append-bg: #6c757d;
|
|
224
|
-
--pa-input-group-append-text: #6c757d;
|
|
225
|
-
--pa-table-bg: #ffffff;
|
|
226
|
-
--pa-table-header-bg: #f8f9fa;
|
|
227
|
-
--pa-table-stripe: #f8f9fa;
|
|
228
|
-
--pa-table-hover-bg: #f8f9fa;
|
|
229
|
-
--pa-table-hover-accent-color: #007bff;
|
|
230
|
-
--pa-modal-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
231
|
-
--pa-modal-content-bg: #ffffff;
|
|
232
|
-
--pa-badge-success-bg: #d4edda;
|
|
233
|
-
--pa-badge-success-text: #155724;
|
|
234
|
-
--pa-badge-warning-bg: #fff3cd;
|
|
235
|
-
--pa-badge-warning-text: #856404;
|
|
236
|
-
--pa-badge-info-bg: #d1ecf1;
|
|
237
|
-
--pa-badge-info-text: #0c5460;
|
|
238
|
-
--pa-badge-danger-bg: #f8d7da;
|
|
239
|
-
--pa-badge-danger-text: #721c24;
|
|
240
|
-
--pa-composite-badge-icon-bg: #6c757d;
|
|
241
|
-
--pa-composite-badge-label-bg: #e9ecef;
|
|
242
|
-
--pa-composite-badge-label-text: #2c3e50;
|
|
243
|
-
--pa-composite-badge-label-hover-bg: #e9ecef;
|
|
244
|
-
--pa-tooltip-bg: #2c3e50;
|
|
245
|
-
--pa-tooltip-text: #ffffff;
|
|
246
|
-
--pa-popover-content-bg: #ffffff;
|
|
247
|
-
--pa-popover-text-light: #ffffff;
|
|
248
|
-
--pa-popover-text-dark: #000000;
|
|
249
|
-
--pa-loader-overlay-bg: rgba(255, 255, 255, 0.8);
|
|
250
|
-
--pa-profile-overlay-bg: rgba(0, 0, 0, 0.3);
|
|
251
|
-
--pa-detail-panel-overlay-bg: rgba(0, 0, 0, 0.3);
|
|
252
|
-
--pa-detail-panel-selected-bg: rgba(0, 123, 255, 0.08);
|
|
253
|
-
--pa-detail-panel-z-index: 4500;
|
|
254
|
-
--pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.5);
|
|
255
|
-
--pa-command-palette-item-hover-bg: rgba(0, 123, 255, 0.05);
|
|
256
|
-
--pa-command-palette-item-active-bg: rgba(0, 123, 255, 0.1);
|
|
257
|
-
--pa-command-palette-highlight-bg: rgba(0, 123, 255, 0.2);
|
|
258
|
-
--pa-command-palette-highlight-text: #007bff;
|
|
259
|
-
--pa-command-palette-key-bg: #ffffff;
|
|
260
|
-
--pa-command-palette-key-text: #2c3e50;
|
|
261
|
-
--pa-command-palette-key-font-size: 1.2rem;
|
|
262
|
-
--pa-command-palette-key-font-weight: 600;
|
|
263
|
-
--pa-multiselect-dropdown-bg: #ffffff;
|
|
264
|
-
--pa-multiselect-dropdown-border: #e1e5e9;
|
|
265
|
-
--pa-multiselect-dropdown-text: #2c3e50;
|
|
266
|
-
--pa-multiselect-hint-bg: #f8f9fa;
|
|
267
|
-
--pa-multiselect-hint-border: #e1e5e9;
|
|
268
|
-
--pa-multiselect-option-hover-bg: #f8f9fa;
|
|
269
|
-
--pa-multiselect-pill-bg: rgba(0, 123, 255, 0.05);
|
|
270
|
-
--pa-multiselect-pill-border: #007bff;
|
|
271
|
-
--pa-color-1: transparent;
|
|
272
|
-
--pa-color-2: transparent;
|
|
273
|
-
--pa-color-3: transparent;
|
|
274
|
-
--pa-color-4: transparent;
|
|
275
|
-
--pa-color-5: transparent;
|
|
276
|
-
--pa-color-6: transparent;
|
|
277
|
-
--pa-color-7: transparent;
|
|
278
|
-
--pa-color-8: transparent;
|
|
279
|
-
--pa-color-9: transparent;
|
|
280
|
-
--pa-color-1-text: #ffffff;
|
|
281
|
-
--pa-color-2-text: #ffffff;
|
|
282
|
-
--pa-color-3-text: #ffffff;
|
|
283
|
-
--pa-color-4-text: #ffffff;
|
|
284
|
-
--pa-color-5-text: #ffffff;
|
|
285
|
-
--pa-color-6-text: #ffffff;
|
|
286
|
-
--pa-color-7-text: #ffffff;
|
|
287
|
-
--pa-color-8-text: #ffffff;
|
|
288
|
-
--pa-color-9-text: #ffffff;
|
|
289
|
-
--pa-border-radius-sm: 2px;
|
|
290
|
-
--pa-border-radius: 4px;
|
|
291
|
-
--pa-border-radius-lg: 8px;
|
|
292
|
-
--pa-alert-success-text: color-mix(in srgb, var(--pa-success-bg) 60%, black);
|
|
293
|
-
--pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) 15%, transparent);
|
|
294
|
-
--pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) 30%, transparent);
|
|
295
|
-
--pa-alert-danger-text: color-mix(in srgb, var(--pa-danger-bg) 60%, black);
|
|
296
|
-
--pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) 15%, transparent);
|
|
297
|
-
--pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) 30%, transparent);
|
|
298
|
-
--pa-alert-warning-text: color-mix(in srgb, var(--pa-warning-bg) 60%, black);
|
|
299
|
-
--pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) 15%, transparent);
|
|
300
|
-
--pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) 30%, transparent);
|
|
301
|
-
--pa-alert-info-text: color-mix(in srgb, var(--pa-info-bg) 60%, black);
|
|
302
|
-
--pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) 15%, transparent);
|
|
303
|
-
--pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) 30%, transparent);
|
|
107
|
+
--pc-main-bg: #f8f9fa;
|
|
108
|
+
--pc-page-bg: #f8f9fa;
|
|
109
|
+
--pc-subtle-bg: #ffffff;
|
|
110
|
+
--pc-text-color-1: #2c3e50;
|
|
111
|
+
--pc-text-color-2: #6c757d;
|
|
112
|
+
--pc-accent: #007bff;
|
|
113
|
+
--pc-accent-hover: rgba(0, 123, 255, 0.12);
|
|
114
|
+
--pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
|
|
115
|
+
--pc-link-color: var(--pc-accent);
|
|
116
|
+
--pc-link-color-hover: color-mix(in srgb, var(--pc-link-color), currentColor 50%);
|
|
117
|
+
--pc-link-color-visited: var(--pc-link-color);
|
|
118
|
+
--pc-border-color: var(--base-border-color, #e1e5e9);
|
|
119
|
+
--pc-success: #22c55e;
|
|
120
|
+
--pc-warning: #f97316;
|
|
121
|
+
--pc-danger: #ef4444;
|
|
122
|
+
--pc-info: #17a2b8;
|
|
123
|
+
--pc-success-text: #155724;
|
|
124
|
+
--pc-danger-text: #721c24;
|
|
125
|
+
--pc-warning-text: #856404;
|
|
126
|
+
--pc-info-text: #0c5460;
|
|
127
|
+
--pc-color-1: transparent;
|
|
128
|
+
--pc-color-2: transparent;
|
|
129
|
+
--pc-color-3: transparent;
|
|
130
|
+
--pc-color-4: transparent;
|
|
131
|
+
--pc-color-5: transparent;
|
|
132
|
+
--pc-color-6: transparent;
|
|
133
|
+
--pc-color-7: transparent;
|
|
134
|
+
--pc-color-8: transparent;
|
|
135
|
+
--pc-color-9: transparent;
|
|
136
|
+
--pc-color-1-text: #ffffff;
|
|
137
|
+
--pc-color-2-text: #ffffff;
|
|
138
|
+
--pc-color-3-text: #ffffff;
|
|
139
|
+
--pc-color-4-text: #ffffff;
|
|
140
|
+
--pc-color-5-text: #ffffff;
|
|
141
|
+
--pc-color-6-text: #ffffff;
|
|
142
|
+
--pc-color-7-text: #ffffff;
|
|
143
|
+
--pc-color-8-text: #ffffff;
|
|
144
|
+
--pc-color-9-text: #ffffff;
|
|
145
|
+
--pc-border-radius-sm: 2px;
|
|
146
|
+
--pc-border-radius: 4px;
|
|
147
|
+
--pc-border-radius-lg: 8px;
|
|
304
148
|
}
|