@keenmate/pure-css 1.0.2 → 1.0.3
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 +34 -0
- package/README.md +6 -4
- package/dist/css/base.css +7 -0
- package/dist/css/pure-css.css +12 -7
- package/package.json +1 -1
- package/src/scss/_base-css-variables.scss +15 -0
- package/src/scss/_sidebar.scss +11 -7
- package/src/scss/variables/_base.scss +12 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,40 @@
|
|
|
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.3] — 2026-09-16 [PUBLISHED]
|
|
7
|
+
|
|
8
|
+
### Added
|
|
9
|
+
|
|
10
|
+
- **Three affordance icon tokens: `--base-icon-settings`, `--base-icon-bell`,
|
|
11
|
+
`--base-icon-user`.** Mask-friendly Lucide glyphs (`settings` = cog / gear;
|
|
12
|
+
`bell` = notification bell; `user` = person / profile), added to
|
|
13
|
+
`variables/_base.scss` and emitted from `output-base-css-variables` (both
|
|
14
|
+
`base.css` and the `pure-css.css` bundle carry them). For preferences/config,
|
|
15
|
+
notification, and profile affordances; consumed by pure-admin's
|
|
16
|
+
`--pa-icon-settings` / `--pa-icon-bell` / `--pa-icon-user`. Mirrors the
|
|
17
|
+
canonical `@keenmate/base-css-variables` contract (parity guard green).
|
|
18
|
+
- **Four status / severity icon tokens: `--base-icon-info`,
|
|
19
|
+
`--base-icon-success`, `--base-icon-warning`, `--base-icon-danger`.**
|
|
20
|
+
Mask-friendly Lucide glyphs (info = circle-i, success = circle-check,
|
|
21
|
+
warning = triangle-alert, danger = circle-x), added to `variables/_base.scss`
|
|
22
|
+
and emitted from `output-base-css-variables` (both `base.css` and the
|
|
23
|
+
`pure-css.css` bundle carry them). One shared family so every severity surface
|
|
24
|
+
shows the same mark; consumed by pure-admin's `--pa-icon-info` / `-success` /
|
|
25
|
+
`-warning` / `-danger`. Mirrors the canonical `@keenmate/base-css-variables`
|
|
26
|
+
contract (parity guard green).
|
|
27
|
+
|
|
28
|
+
### Changed
|
|
29
|
+
|
|
30
|
+
- **The sidebar search icon (`.pc-sidebar__search-icon`) is now a masked
|
|
31
|
+
`--base-icon-search` glyph instead of a `🔍` text emoji.** Painted in
|
|
32
|
+
`currentColor` via `mask` (same technique as `.pc-sidebar__chevron`), so it
|
|
33
|
+
renders identically across platforms/fonts and re-skins from the shared
|
|
34
|
+
`--base-icon-search` knob — matching pure-admin's `.pa-icon--search` and the
|
|
35
|
+
navbar search. `font-size: 0` collapses any legacy `🔍` still in markup so it
|
|
36
|
+
never double-renders; consumers can drop the emoji from the button
|
|
37
|
+
(`<button class="pc-sidebar__search-icon">`). The literal Lucide glyph remains
|
|
38
|
+
the standalone fallback when `base.css` is absent.
|
|
39
|
+
|
|
6
40
|
## [1.0.2] — 2026-09-15 [PUBLISHED]
|
|
7
41
|
|
|
8
42
|
### Added
|
package/README.md
CHANGED
|
@@ -12,13 +12,15 @@ It's the shared layer the whole Keenmate stack agrees on:
|
|
|
12
12
|
top of it, and every Keenmate web/Svelte component reads its colours from the same `--base-*`
|
|
13
13
|
variables.
|
|
14
14
|
|
|
15
|
-
## What's New in 1.0.
|
|
15
|
+
## What's New in 1.0.3
|
|
16
16
|
|
|
17
|
-
- **Icons —
|
|
17
|
+
- **Icons — seven more glyphs join the `--base-*` contract: config/notification/profile plus the full status family** — three affordance marks and a shared severity family, so every consumer paints them from one theme knob. `--base-icon-settings` (a cog), `--base-icon-bell` (a notification bell) and `--base-icon-user` (a person) cover the preferences / notifications / profile trio, while `--base-icon-info` (circle-i), `--base-icon-success` (circle-check), `--base-icon-warning` (triangle-alert) and `--base-icon-danger` (circle-x) form one severity family so every alert, toast and badge shows the same mark. All are mask-friendly Lucide glyphs authored in `variables/_base.scss` and emitted from `output-base-css-variables`, so both the standalone `base.css` and the `pure-css.css` bundle carry them; they mirror the canonical `@keenmate/base-css-variables` contract (parity guard green) and back pure-admin's `--pa-icon-settings` / `-bell` / `-user` / `-info` / `-success` / `-warning` / `-danger`. Consume via `mask: var(--base-icon-info); background: currentColor`.
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
- **Sidebar search — the magnifier is now a themeable masked glyph, not a 🔍 emoji** — `.pc-sidebar__search-icon` previously rendered a literal 🔍 text emoji, which varied by platform and font and couldn't be re-skinned. It's now painted in `currentColor` via `mask: var(--base-icon-search)` — the same technique as `.pc-sidebar__chevron` — so it renders identically everywhere and re-skins from the shared `--base-icon-search` knob, matching the navbar search and pure-admin's `.pa-icon--search`. `font-size: 0` collapses any legacy 🔍 still in markup so it never double-renders, letting consumers drop the emoji from `<button class="pc-sidebar__search-icon">`; the literal Lucide glyph stays the standalone fallback when `base.css` is absent.
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
## What's New in 1.0.2
|
|
22
|
+
|
|
23
|
+
- **Icons — `copy`, `ellipsis`, `save` and `refresh` glyphs join the shared `--base-*` contract** — four more mask-friendly Lucide glyphs so every consumer paints the same actions from one theme knob. `--base-icon-copy` (two overlapping sheets) is copy-to-clipboard, `--base-icon-ellipsis` (three dots) is the "more / overflow" mark — its vertical `⋮` variant is the *same glyph rotated 90°* (the rotate-one-glyph discipline already used for `chevron`), so there's no separate token to maintain — `--base-icon-save` (a floppy disk) is persist / commit, and `--base-icon-refresh` (two curved arrows, Lucide `refresh-cw`) is reload / re-fetch, sitting alongside `search` and `filter` in the utility-icon row (consumers typically spin it with a CSS animation while a fetch is in flight). The action trio completes the affordance set pure-admin migrated off Font Awesome: its `--pa-icon-copy` / `-ellipsis` / `-save` already routed through these `--base-icon-*` names with inline fallbacks, so they become fully theme-overridable with zero pure-admin change. All are authored in `variables/_base.scss` and emitted from `output-base-css-variables`, so both the standalone `base.css` and the `pure-css.css` bundle carry them; consume via `mask: var(--base-icon-copy); background: currentColor`.
|
|
22
24
|
|
|
23
25
|
## Why
|
|
24
26
|
|
package/dist/css/base.css
CHANGED
|
@@ -143,6 +143,13 @@
|
|
|
143
143
|
--base-icon-copy: 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%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22 ry=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E");
|
|
144
144
|
--base-icon-ellipsis: 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=%2212%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%2219%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%225%22 cy=%2212%22 r=%221%22/%3E%3C/svg%3E");
|
|
145
145
|
--base-icon-save: 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=%22M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z%22/%3E%3Cpath d=%22M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7%22/%3E%3Cpath d=%22M7 3v4a1 1 0 0 0 1 1h7%22/%3E%3C/svg%3E");
|
|
146
|
+
--base-icon-settings: 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.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E");
|
|
147
|
+
--base-icon-bell: 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=%22M10.268 21a2 2 0 0 0 3.464 0%22/%3E%3Cpath d=%22M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326%22/%3E%3C/svg%3E");
|
|
148
|
+
--base-icon-user: 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=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E");
|
|
149
|
+
--base-icon-info: 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=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E");
|
|
150
|
+
--base-icon-success: 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=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m16 9-5.5 5.5L8 12%22/%3E%3C/svg%3E");
|
|
151
|
+
--base-icon-warning: 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=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E");
|
|
152
|
+
--base-icon-danger: 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=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m15 9-6 6%22/%3E%3Cpath d=%22m9 9 6 6%22/%3E%3C/svg%3E");
|
|
146
153
|
--base-color-1: #f59e0b;
|
|
147
154
|
--base-color-2: #ec4899;
|
|
148
155
|
--base-color-3: #10b981;
|
package/dist/css/pure-css.css
CHANGED
|
@@ -2463,17 +2463,15 @@ body.loaded .pc-sidebar__search {
|
|
|
2463
2463
|
width: 2.4rem;
|
|
2464
2464
|
min-width: 2.4rem;
|
|
2465
2465
|
height: 2.4rem;
|
|
2466
|
-
display: flex;
|
|
2467
|
-
align-items: center;
|
|
2468
|
-
justify-content: center;
|
|
2469
2466
|
flex-shrink: 0;
|
|
2470
2467
|
padding: 0;
|
|
2471
2468
|
border: none;
|
|
2472
|
-
background: transparent;
|
|
2473
|
-
color: inherit;
|
|
2474
|
-
font-size: 1.6rem;
|
|
2475
|
-
line-height: 1;
|
|
2476
2469
|
cursor: pointer;
|
|
2470
|
+
color: inherit;
|
|
2471
|
+
font-size: 0;
|
|
2472
|
+
background-color: currentColor;
|
|
2473
|
+
-webkit-mask: var(--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")) center/1.6rem no-repeat;
|
|
2474
|
+
mask: var(--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")) center/1.6rem no-repeat;
|
|
2477
2475
|
}
|
|
2478
2476
|
.pc-sidebar__search--input .pc-sidebar__search-field {
|
|
2479
2477
|
flex: 1;
|
|
@@ -6087,6 +6085,13 @@ body.pc-layout--sticky .pc-layout__inner {
|
|
|
6087
6085
|
--base-icon-copy: 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%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22 ry=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E");
|
|
6088
6086
|
--base-icon-ellipsis: 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=%2212%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%2219%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%225%22 cy=%2212%22 r=%221%22/%3E%3C/svg%3E");
|
|
6089
6087
|
--base-icon-save: 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=%22M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z%22/%3E%3Cpath d=%22M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7%22/%3E%3Cpath d=%22M7 3v4a1 1 0 0 0 1 1h7%22/%3E%3C/svg%3E");
|
|
6088
|
+
--base-icon-settings: 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.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E");
|
|
6089
|
+
--base-icon-bell: 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=%22M10.268 21a2 2 0 0 0 3.464 0%22/%3E%3Cpath d=%22M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326%22/%3E%3C/svg%3E");
|
|
6090
|
+
--base-icon-user: 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=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E");
|
|
6091
|
+
--base-icon-info: 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=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E");
|
|
6092
|
+
--base-icon-success: 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=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m16 9-5.5 5.5L8 12%22/%3E%3C/svg%3E");
|
|
6093
|
+
--base-icon-warning: 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=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E");
|
|
6094
|
+
--base-icon-danger: 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=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m15 9-6 6%22/%3E%3Cpath d=%22m9 9 6 6%22/%3E%3C/svg%3E");
|
|
6090
6095
|
--base-color-1: #f59e0b;
|
|
6091
6096
|
--base-color-2: #ec4899;
|
|
6092
6097
|
--base-color-3: #10b981;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keenmate/pure-css",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "The Keenmate CSS foundation — --base-* theming contract, PureCSS grid and utility classes. Extracted from pure-admin-core so docs sites, standalone pages and every web/svelte component share one theming layer.",
|
|
5
5
|
"style": "dist/css/pure-css.css",
|
|
6
6
|
"exports": {
|
|
@@ -237,6 +237,21 @@
|
|
|
237
237
|
--base-icon-copy: #{$base-icon-copy};
|
|
238
238
|
--base-icon-ellipsis: #{$base-icon-ellipsis};
|
|
239
239
|
--base-icon-save: #{$base-icon-save};
|
|
240
|
+
// settings = cog / gear. Consumed by pure-admin's --pa-icon-settings.
|
|
241
|
+
--base-icon-settings: #{$base-icon-settings};
|
|
242
|
+
// bell = notification bell. Consumed by pure-admin's --pa-icon-bell.
|
|
243
|
+
--base-icon-bell: #{$base-icon-bell};
|
|
244
|
+
// user = person. Consumed by pure-admin's --pa-icon-user.
|
|
245
|
+
--base-icon-user: #{$base-icon-user};
|
|
246
|
+
|
|
247
|
+
// === Status / severity icons — shared toast/alert/callout/notification set ===
|
|
248
|
+
// info = circle-i, success = circle-check, warning = triangle-alert,
|
|
249
|
+
// danger = circle-x. Consumed by pure-admin's --pa-icon-info / -success /
|
|
250
|
+
// -warning / -danger so every severity surface shows the same mark.
|
|
251
|
+
--base-icon-info: #{$base-icon-info};
|
|
252
|
+
--base-icon-success: #{$base-icon-success};
|
|
253
|
+
--base-icon-warning: #{$base-icon-warning};
|
|
254
|
+
--base-icon-danger: #{$base-icon-danger};
|
|
240
255
|
|
|
241
256
|
// === Theme palette slots (1–9) + paired contrast text (WS7.6) ===
|
|
242
257
|
// Promoted into the --base-* contract so the branded/data-viz palette is
|
package/src/scss/_sidebar.scss
CHANGED
|
@@ -262,17 +262,21 @@ body.pc-layout--sticky .pc-layout__sidebar {
|
|
|
262
262
|
width: $sidebar-icon-size;
|
|
263
263
|
min-width: $sidebar-icon-size;
|
|
264
264
|
height: $sidebar-icon-size;
|
|
265
|
-
display: flex;
|
|
266
|
-
align-items: center;
|
|
267
|
-
justify-content: center;
|
|
268
265
|
flex-shrink: 0;
|
|
269
266
|
padding: 0;
|
|
270
267
|
border: none;
|
|
271
|
-
background: transparent;
|
|
272
|
-
color: inherit;
|
|
273
|
-
font-size: $font-size-base;
|
|
274
|
-
line-height: 1; // prevent emoji baseline shift, matching __icon
|
|
275
268
|
cursor: pointer;
|
|
269
|
+
color: inherit;
|
|
270
|
+
// Masked magnifier painted in currentColor — was a 🔍 text emoji, which
|
|
271
|
+
// rendered inconsistently across platforms/fonts (the same reason the
|
|
272
|
+
// sidebar chevron is masked above). Reads the shared --base-icon-search
|
|
273
|
+
// so it matches pure-admin's .pa-icon--search and the navbar search;
|
|
274
|
+
// #{$base-icon-search} is the standalone literal fallback. font-size:0
|
|
275
|
+
// collapses any legacy 🔍 still in markup so it never double-renders.
|
|
276
|
+
font-size: 0;
|
|
277
|
+
background-color: currentColor;
|
|
278
|
+
-webkit-mask: var(--base-icon-search, #{$base-icon-search}) center / #{$font-size-base} no-repeat;
|
|
279
|
+
mask: var(--base-icon-search, #{$base-icon-search}) center / #{$font-size-base} no-repeat;
|
|
276
280
|
}
|
|
277
281
|
|
|
278
282
|
.pc-sidebar__search-field {
|
|
@@ -377,6 +377,18 @@ $base-icon-indeterminate: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.
|
|
|
377
377
|
$base-icon-copy: 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%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22 ry=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E") !default;
|
|
378
378
|
$base-icon-ellipsis: 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=%2212%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%2219%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%225%22 cy=%2212%22 r=%221%22/%3E%3C/svg%3E") !default;
|
|
379
379
|
$base-icon-save: 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=%22M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z%22/%3E%3Cpath d=%22M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7%22/%3E%3Cpath d=%22M7 3v4a1 1 0 0 0 1 1h7%22/%3E%3C/svg%3E") !default;
|
|
380
|
+
// settings = cog / gear (Lucide settings): preferences / config affordance.
|
|
381
|
+
$base-icon-settings: 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.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E") !default;
|
|
382
|
+
// bell = notification bell (Lucide bell): the navbar bell button glyph.
|
|
383
|
+
$base-icon-bell: 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=%22M10.268 21a2 2 0 0 0 3.464 0%22/%3E%3Cpath d=%22M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326%22/%3E%3C/svg%3E") !default;
|
|
384
|
+
// user = person (Lucide user): profile trigger button / avatar placeholder.
|
|
385
|
+
$base-icon-user: 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=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E") !default;
|
|
386
|
+
// Status / severity icons (shared toast/alert/callout/notification set): info =
|
|
387
|
+
// circle-i, success = circle-check, warning = triangle-alert, danger = circle-x.
|
|
388
|
+
$base-icon-info: 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=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E") !default;
|
|
389
|
+
$base-icon-success: 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=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m16 9-5.5 5.5L8 12%22/%3E%3C/svg%3E") !default;
|
|
390
|
+
$base-icon-warning: 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=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E") !default;
|
|
391
|
+
$base-icon-danger: 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=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m15 9-6 6%22/%3E%3Cpath d=%22m9 9 6 6%22/%3E%3C/svg%3E") !default;
|
|
380
392
|
|
|
381
393
|
// =============================================================================
|
|
382
394
|
// ALERT COLOR DERIVATION PARAMETERS
|