@keenmate/pure-css 1.0.0-rc08 → 1.0.0
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 +50 -0
- package/README.md +213 -184
- package/dist/css/base.css +3 -0
- package/dist/css/pure-css.css +11 -8
- package/package.json +1 -1
- package/src/scss/_base-css-variables.scss +17 -0
- package/src/scss/_fit-flyout.scss +1 -1
- package/src/scss/_navbar-elements.scss +4 -4
- package/src/scss/_resize-handle.scss +1 -1
- package/src/scss/_sidebar.scss +443 -443
- package/src/scss/variables/_base.scss +382 -368
|
@@ -1,368 +1,382 @@
|
|
|
1
|
-
// ============================================================================
|
|
2
|
-
// BASE VARIABLES - Single Source of Truth for Theming
|
|
3
|
-
// ============================================================================
|
|
4
|
-
// These $base-* SCSS variables are the PRIMARY source for all theme colors.
|
|
5
|
-
// Framework variables in _colors.scss, _typography.scss, etc. DERIVE from these.
|
|
6
|
-
// Web components consume these via --base-* CSS custom properties.
|
|
7
|
-
//
|
|
8
|
-
// To create a theme: Override these variables, everything else auto-derives.
|
|
9
|
-
// ============================================================================
|
|
10
|
-
|
|
11
|
-
@use 'sass:color';
|
|
12
|
-
|
|
13
|
-
// =============================================================================
|
|
14
|
-
// ACCENT COLORS
|
|
15
|
-
// Primary brand/interactive color and its variants
|
|
16
|
-
// =============================================================================
|
|
17
|
-
|
|
18
|
-
// Default theme = pure-admin Corporate (sky-blue). Matches the canonical
|
|
19
|
-
// --base-* contract in @keenmate/base-css-variables; a theme overrides these.
|
|
20
|
-
$base-accent-color: #0ea5e9 !default;
|
|
21
|
-
$base-accent-color-hover: #0284c7 !default;
|
|
22
|
-
$base-accent-color-active: #0369a1 !default;
|
|
23
|
-
$base-accent-color-light: rgba($base-accent-color, 0.05) !default;
|
|
24
|
-
$base-accent-color-light-hover: rgba($base-accent-color, 0.08) !default;
|
|
25
|
-
|
|
26
|
-
// =============================================================================
|
|
27
|
-
// TEXT COLORS
|
|
28
|
-
// Hierarchical text colors for different emphasis levels
|
|
29
|
-
// =============================================================================
|
|
30
|
-
|
|
31
|
-
$base-text-color-1: #334155 !default; // Primary text (strongest) — Corporate slate-700
|
|
32
|
-
$base-text-color-2: #64748b !default; // Secondary text (muted) — slate-500
|
|
33
|
-
$base-text-color-3: #94a3b8 !default; // Tertiary text (lighter) — slate-400
|
|
34
|
-
$base-text-color-4: #cbd5e1 !default; // Quaternary text (lightest) — slate-300
|
|
35
|
-
$base-text-color-on-accent: #ffffff !default; // Text on accent backgrounds
|
|
36
|
-
|
|
37
|
-
// =============================================================================
|
|
38
|
-
// BACKGROUND COLORS
|
|
39
|
-
// Semantic background colors for different purposes
|
|
40
|
-
// =============================================================================
|
|
41
|
-
|
|
42
|
-
// SURFACE ELEVATION LADDER (static container backgrounds — one axis).
|
|
43
|
-
// Keep this axis separate from the interaction-STATE tokens below (hover/
|
|
44
|
-
// active/disabled) and from --base-border-color (dividers).
|
|
45
|
-
$base-main-bg: #ffffff !default; // Content surface (cards, modals, body) — the reference rung
|
|
46
|
-
$base-page-bg: #f8f9fa !default; // Canvas/backdrop the content sits on
|
|
47
|
-
// Recessed / inset surface — the "sunken" rung BELOW main: code blocks, wells,
|
|
48
|
-
// inset panels, pills, tiles. NOT a hover state (see $base-hover-bg) and NOT a
|
|
49
|
-
// divider (see $base-border-color); one crisp job. Raised chrome (headers,
|
|
50
|
-
// striped rows) uses $base-elevated-bg instead.
|
|
51
|
-
$base-subtle-bg: #e9ecef !default;
|
|
52
|
-
$base-inverse-bg: #2c3e50 !default; // Inverse background (tooltips, dark elements)
|
|
53
|
-
$base-overlay-bg: rgba(0, 0, 0, 0.5) !default; // Modal/overlay background
|
|
54
|
-
$base-shadow-color: rgba(0, 0, 0, 0.15) !default; // Shadow color for elevation
|
|
55
|
-
// Elevated surface (header rows, striped rows, popovers/toolbars). Defaults to
|
|
56
|
-
// the page background so the default theme's header appearance is unchanged, but
|
|
57
|
-
// themes can override it independently to create a distinct raised tone.
|
|
58
|
-
// Defaults to the page bg so it tracks a theme's canvas (dark themes stay dark);
|
|
59
|
-
// Corporate overrides it to slate-100 (#f1f5f9) for a distinct header tint.
|
|
60
|
-
$base-elevated-bg: $base-page-bg !default;
|
|
61
|
-
// Text on inverse/dark surfaces (web-component bridge: --base-text-inverted).
|
|
62
|
-
$base-text-inverted: #ffffff !default;
|
|
63
|
-
|
|
64
|
-
// Interaction-STATE backgrounds (a separate axis from the elevation ladder).
|
|
65
|
-
// These default to (derive from) $base-subtle-bg so unthemed hovers stay
|
|
66
|
-
// sensible, but they are their OWN tokens: override them to decouple hover/
|
|
67
|
-
// active from the recessed-surface tone. Components read --pc-hover-bg /
|
|
68
|
-
// --pc-active-bg for :hover/:active fills — never --pc-subtle-bg.
|
|
69
|
-
$base-hover-bg: $base-subtle-bg !default; // Hover state background
|
|
70
|
-
$base-active-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default; // Active/pressed state
|
|
71
|
-
// Disabled element background. Given its OWN lower-contrast default (an inert,
|
|
72
|
-
// near-page tone) so it no longer collides with $base-hover-bg/$base-subtle-bg —
|
|
73
|
-
// distinct purpose, distinct value. (WS7.3)
|
|
74
|
-
$base-disabled-bg: #f1f3f5 !default;
|
|
75
|
-
|
|
76
|
-
// =============================================================================
|
|
77
|
-
// BORDER COLORS
|
|
78
|
-
// Border colors and shorthand
|
|
79
|
-
// =============================================================================
|
|
80
|
-
|
|
81
|
-
// Shared border width — the single knob the border shorthands compose from, so
|
|
82
|
-
// a theme can retune stroke weight in one place (web-component bridge:
|
|
83
|
-
// --base-border-width). (WS7.1)
|
|
84
|
-
$base-border-width: 1px !default;
|
|
85
|
-
$base-border-color: #e2e8f0 !default; // Corporate slate-200
|
|
86
|
-
$base-border: $base-border-width solid $base-border-color !default;
|
|
87
|
-
// Checkbox/radio border (web-component bridge: --base-checkbox-border-color).
|
|
88
|
-
$base-checkbox-border-color: $base-border-color !default;
|
|
89
|
-
|
|
90
|
-
// =============================================================================
|
|
91
|
-
// INPUT FIELDS
|
|
92
|
-
// Input field styling and states
|
|
93
|
-
// =============================================================================
|
|
94
|
-
|
|
95
|
-
$base-input-bg: $base-main-bg !default;
|
|
96
|
-
$base-input-color: #334155 !default; // Corporate slate-700
|
|
97
|
-
// Input border as a colour (single source) + the 1px shorthand web components
|
|
98
|
-
// read via --base-input-border. Now equals --base-border-color (both Corporate
|
|
99
|
-
// slate-200 #e2e8f0).
|
|
100
|
-
$base-input-border-color: #e2e8f0 !default; // = border-color (Corporate slate-200)
|
|
101
|
-
$base-input-border: 1px solid $base-input-border-color !default;
|
|
102
|
-
$base-input-border-hover: 1px solid $base-accent-color !default; // Corporate: accent on hover
|
|
103
|
-
$base-input-border-focus: 1px solid $base-accent-color !default;
|
|
104
|
-
$base-input-placeholder-color: $base-text-color-4 !default;
|
|
105
|
-
$base-input-bg-disabled: rgba($base-input-bg, 0.5) !default;
|
|
106
|
-
// Inline clear ("×") affordance inside inputs (web-component bridge:
|
|
107
|
-
// --base-input-clear-color / --base-input-clear-bg-hover).
|
|
108
|
-
$base-input-clear-color: $base-text-color-3 !default;
|
|
109
|
-
$base-input-clear-bg-hover: $base-hover-bg !default;
|
|
110
|
-
|
|
111
|
-
// Input size heights (unitless multipliers for x10px base)
|
|
112
|
-
// Neutral heights (Corporate bumps these +0.3 itself for its wider font — that's a
|
|
113
|
-
// theme ergonomic tweak, not base identity, so the foundation default stays neutral).
|
|
114
|
-
$base-input-size-xs-height: 3.1 !default; // 31px
|
|
115
|
-
$base-input-size-sm-height: 3.3 !default; // 33px
|
|
116
|
-
$base-input-size-md-height: 3.5 !default; // 35px
|
|
117
|
-
$base-input-size-lg-height: 3.8 !default; // 38px
|
|
118
|
-
$base-input-size-xl-height: 4.1 !default; // 41px
|
|
119
|
-
|
|
120
|
-
// =============================================================================
|
|
121
|
-
// DROPDOWN / POPOVER
|
|
122
|
-
// Floating element styling
|
|
123
|
-
// =============================================================================
|
|
124
|
-
|
|
125
|
-
$base-dropdown-bg: $base-main-bg !default;
|
|
126
|
-
$base-dropdown-border: 1px solid $base-border-color !default;
|
|
127
|
-
$base-dropdown-box-shadow: 0 8px 16px $base-shadow-color !default;
|
|
128
|
-
|
|
129
|
-
// =============================================================================
|
|
130
|
-
// TOOLTIP
|
|
131
|
-
// Tooltip styling
|
|
132
|
-
// =============================================================================
|
|
133
|
-
|
|
134
|
-
$base-tooltip-bg: $base-inverse-bg !default;
|
|
135
|
-
$base-tooltip-text-color: #ffffff !default;
|
|
136
|
-
|
|
137
|
-
// =============================================================================
|
|
138
|
-
// CONTEXTUAL COLORS - SUCCESS
|
|
139
|
-
// Success/positive semantic colors
|
|
140
|
-
// =============================================================================
|
|
141
|
-
|
|
142
|
-
$base-success-color: #10b981 !default; // Corporate emerald-500 — also --
|
|
143
|
-
$base-success-bg: $base-success-color !default; // Solid role fill (web-component bridge: --base-success-bg)
|
|
144
|
-
$base-success-color-hover: #059669 !default; // Corporate emerald-600
|
|
145
|
-
$base-success-bg-light: rgba($base-success-color, 0.1) !default;
|
|
146
|
-
$base-success-bg-subtle: rgba($base-success-color, 0.08) !default;
|
|
147
|
-
$base-success-border: rgba($base-success-color, 0.2) !default;
|
|
148
|
-
$base-success-text: #155724 !default;
|
|
149
|
-
$base-success-text-light: #d4edda !default;
|
|
150
|
-
$base-text-on-success: #ffffff !default;
|
|
151
|
-
|
|
152
|
-
// =============================================================================
|
|
153
|
-
// CONTEXTUAL COLORS - DANGER
|
|
154
|
-
// Danger/error semantic colors
|
|
155
|
-
// =============================================================================
|
|
156
|
-
|
|
157
|
-
$base-danger-color: #ef4444 !default; // Tailwind red-500 — aligns with --
|
|
158
|
-
$base-danger-bg: $base-danger-color !default; // Solid role fill (web-component bridge: --base-danger-bg)
|
|
159
|
-
$base-danger-color-hover: #dc2626 !default; // Corporate red-600
|
|
160
|
-
$base-danger-bg-light: rgba($base-danger-color, 0.1) !default;
|
|
161
|
-
$base-danger-bg-subtle: rgba($base-danger-color, 0.08) !default;
|
|
162
|
-
$base-danger-border: rgba($base-danger-color, 0.2) !default;
|
|
163
|
-
$base-danger-text: #721c24 !default;
|
|
164
|
-
$base-danger-text-light: #f8d7da !default;
|
|
165
|
-
$base-text-on-danger: #ffffff !default;
|
|
166
|
-
|
|
167
|
-
// =============================================================================
|
|
168
|
-
// CONTEXTUAL COLORS - WARNING
|
|
169
|
-
// Warning semantic colors
|
|
170
|
-
// =============================================================================
|
|
171
|
-
|
|
172
|
-
$base-warning-color: #f59e0b !default; // Corporate amber-500 — also the off-target axis in KPI components
|
|
173
|
-
$base-warning-bg: $base-warning-color !default; // Solid role fill (web-component bridge: --base-warning-bg)
|
|
174
|
-
$base-warning-color-hover: #d97706 !default; // Corporate amber-600
|
|
175
|
-
$base-warning-bg-light: rgba($base-warning-color, 0.1) !default;
|
|
176
|
-
$base-warning-bg-subtle: rgba($base-warning-color, 0.08) !default;
|
|
177
|
-
$base-warning-border: rgba($base-warning-color, 0.2) !default;
|
|
178
|
-
$base-warning-text: #856404 !default;
|
|
179
|
-
$base-warning-text-light: #fff3cd !default;
|
|
180
|
-
$base-text-on-warning: #ffffff !default; // Corporate uses white on amber
|
|
181
|
-
|
|
182
|
-
// =============================================================================
|
|
183
|
-
// CONTEXTUAL COLORS - INFO
|
|
184
|
-
// Info semantic colors
|
|
185
|
-
// =============================================================================
|
|
186
|
-
|
|
187
|
-
$base-info-color: #06b6d4 !default; // Corporate cyan-500
|
|
188
|
-
$base-info-bg: $base-info-color !default; // Solid role fill — role symmetry with success/danger/warning (WS7.4)
|
|
189
|
-
$base-info-color-hover: #0891b2 !default; // Corporate cyan-600
|
|
190
|
-
$base-info-bg-light: rgba($base-info-color, 0.1) !default;
|
|
191
|
-
$base-info-bg-subtle: rgba($base-info-color, 0.08) !default;
|
|
192
|
-
$base-info-border: rgba($base-info-color, 0.2) !default;
|
|
193
|
-
$base-info-text: #0c5460 !default;
|
|
194
|
-
$base-info-text-light: #d1ecf1 !default;
|
|
195
|
-
$base-text-on-info: #ffffff !default;
|
|
196
|
-
|
|
197
|
-
// =============================================================================
|
|
198
|
-
// SECONDARY ROLE
|
|
199
|
-
// Neutral/secondary role, promoted into the base contract so themes can retune
|
|
200
|
-
// it like any other role instead of it being a hardcoded grey in _colors.scss.
|
|
201
|
-
// (WS7.5) Fill + hover + text-on-fill; the derived $btn-secondary-*/$secondary-*
|
|
202
|
-
// vocabulary in _colors.scss now traces to these.
|
|
203
|
-
// =============================================================================
|
|
204
|
-
|
|
205
|
-
$base-secondary-color: #6c757d !default;
|
|
206
|
-
$base-secondary-color-hover: #545b62 !default;
|
|
207
|
-
$base-text-on-secondary: #ffffff !default;
|
|
208
|
-
|
|
209
|
-
// =============================================================================
|
|
210
|
-
// SENTIMENT SCALE — 5-step direction-of-change
|
|
211
|
-
// Used by KPI / data-display components to indicate movement direction.
|
|
212
|
-
// `--
|
|
213
|
-
// outlier shades (`very-positive` / `very-negative`) are explicit darker
|
|
214
|
-
// stops since they're not derivable cleanly via color.adjust.
|
|
215
|
-
// =============================================================================
|
|
216
|
-
|
|
217
|
-
$base-very-positive: #16a34a !default; // Tailwind green-600 — outlier positive
|
|
218
|
-
$base-very-negative: #dc2626 !default; // Tailwind red-600 — outlier negative
|
|
219
|
-
$base-neutral: #9ca3af !default; // Tailwind gray-400 — "no meaningful change"
|
|
220
|
-
|
|
221
|
-
// =============================================================================
|
|
222
|
-
// THEME PALETTE SLOTS (1–9) + paired contrast text
|
|
223
|
-
// Arbitrary branded / data-viz slots. These are the SOURCE for $color-1..9
|
|
224
|
-
// (variables/_colors.scss derives `$color-N: $base-color-N`) and the emitted
|
|
225
|
-
// --base-color-N / --pc-color-N, so the palette follows the same $base-* → $X
|
|
226
|
-
// chain as every other token. Default = Corporate palette.
|
|
227
|
-
// =============================================================================
|
|
228
|
-
|
|
229
|
-
$base-color-1: #f59e0b !default; // Amber
|
|
230
|
-
$base-color-2: #ec4899 !default; // Pink
|
|
231
|
-
$base-color-3: #10b981 !default; // Emerald
|
|
232
|
-
$base-color-4: #0ea5e9 !default; // Sky blue
|
|
233
|
-
$base-color-5: #8b5cf6 !default; // Violet
|
|
234
|
-
$base-color-6: #6366f1 !default; // Indigo
|
|
235
|
-
$base-color-7: #64748b !default; // Slate
|
|
236
|
-
$base-color-8: #0284c7 !default; // Corporate blue
|
|
237
|
-
$base-color-9: #334155 !default; // Dark slate
|
|
238
|
-
$base-color-1-text: #1a1a1a !default; // dark on amber
|
|
239
|
-
$base-color-2-text: #ffffff !default;
|
|
240
|
-
$base-color-3-text: #ffffff !default;
|
|
241
|
-
$base-color-4-text: #ffffff !default;
|
|
242
|
-
$base-color-5-text: #ffffff !default;
|
|
243
|
-
$base-color-6-text: #ffffff !default;
|
|
244
|
-
$base-color-7-text: #ffffff !default;
|
|
245
|
-
$base-color-8-text: #ffffff !default;
|
|
246
|
-
$base-color-9-text: #ffffff !default;
|
|
247
|
-
|
|
248
|
-
// =============================================================================
|
|
249
|
-
// INTERACTIVE STATES
|
|
250
|
-
// Generic interaction feedback colors
|
|
251
|
-
// =============================================================================
|
|
252
|
-
|
|
253
|
-
$base-hover-overlay: rgba(0, 0, 0, 0.04) !default;
|
|
254
|
-
$base-active-overlay: rgba(0, 0, 0, 0.08) !default;
|
|
255
|
-
$base-focus-ring-color: $base-accent-color !default;
|
|
256
|
-
$base-focus-ring-width: 3px !default;
|
|
257
|
-
|
|
258
|
-
// =============================================================================
|
|
259
|
-
// TYPOGRAPHY
|
|
260
|
-
// Font families, sizes, weights, and line heights
|
|
261
|
-
// =============================================================================
|
|
262
|
-
|
|
263
|
-
$base-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
|
|
264
|
-
$base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
|
|
265
|
-
|
|
266
|
-
// Font sizes (unitless multipliers for x10px base)
|
|
267
|
-
$base-font-size-2xs: 1.0 !default; // 10px
|
|
268
|
-
$base-font-size-xs: 1.2 !default; // 12px
|
|
269
|
-
$base-font-size-sm: 1.4 !default; // 14px
|
|
270
|
-
$base-font-size-base: 1.6 !default; // 16px
|
|
271
|
-
$base-font-size-lg: 1.8 !default; // 18px
|
|
272
|
-
$base-font-size-xl: 2.0 !default; // 20px
|
|
273
|
-
$base-font-size-2xl: 2.4 !default; // 24px
|
|
274
|
-
|
|
275
|
-
// Font weights
|
|
276
|
-
$base-font-weight-normal: 400 !default;
|
|
277
|
-
$base-font-weight-medium: 500 !default;
|
|
278
|
-
$base-font-weight-semibold: 600 !default;
|
|
279
|
-
$base-font-weight-bold: 700 !default;
|
|
280
|
-
|
|
281
|
-
// Line heights
|
|
282
|
-
$base-line-height-tight: 1.25 !default;
|
|
283
|
-
$base-line-height-normal: 1.5 !default;
|
|
284
|
-
$base-line-height-relaxed: 1.75 !default;
|
|
285
|
-
|
|
286
|
-
// =============================================================================
|
|
287
|
-
// BORDER RADIUS
|
|
288
|
-
// Border radius sizes (unitless multipliers for x10px base)
|
|
289
|
-
// =============================================================================
|
|
290
|
-
|
|
291
|
-
$base-border-radius-sm: 0.4 !default; // 4px
|
|
292
|
-
$base-border-radius-md: 0.6 !default; // 6px
|
|
293
|
-
$base-border-radius-lg: 0.8 !default; // 8px
|
|
294
|
-
|
|
295
|
-
// Rem base for web components (bridge: --base-rem). They size themselves as
|
|
296
|
-
// `calc(<unitless-multiplier> * var(--base-rem, 10px))`. pure-css pins
|
|
297
|
-
// `html { font-size: 10px }` (reboot), so `1rem` tracks that base adaptively.
|
|
298
|
-
$base-rem: 1rem !default;
|
|
299
|
-
|
|
300
|
-
// $command-palette-input-height moved to pure-admin-core (variables/
|
|
301
|
-
// _components.scss) — a niche component dimension, not a foundation primitive.
|
|
302
|
-
|
|
303
|
-
// =============================================================================
|
|
304
|
-
// ICONS
|
|
305
|
-
// Mask-friendly SVG glyphs for the shared UI affordances, so every consumer
|
|
306
|
-
// (pure-css shell, pure-admin components, the web/svelte components) can render
|
|
307
|
-
// the SAME toggle/close marks and a theme can swap the icon set in ONE place.
|
|
308
|
-
// Rendered via `mask` + `background: currentColor`, so the glyph inherits text
|
|
309
|
-
// colour and needs no fill/stroke theming. Values are percent-encoded data-URIs
|
|
310
|
-
// (no raw `#`, so Sass never mistakes it for interpolation). Defaults are Lucide.
|
|
311
|
-
// - chevron: thin STROKED angle bracket, DIRECTIONAL/rotatable — expanders,
|
|
312
|
-
// nav, submenus ("more this way"). Resting glyph points RIGHT
|
|
313
|
-
// (LTR); consumers rotate it 90deg to point down when open. This
|
|
314
|
-
// is the ROTATE-one-glyph disclosure model (cf. expand/collapse).
|
|
315
|
-
// - caret-up /
|
|
316
|
-
// caret-down: small SOLID triangles, STATIC — the dropdown/select affordance
|
|
317
|
-
// (down = "a menu opens below") and its sort-direction / upward-
|
|
318
|
-
// dropdown counterpart (up). A component SWAPS up/down; a caret
|
|
319
|
-
// never rotates (that's the chevron's job).
|
|
320
|
-
// - close: the ✕ — dismiss a transient SURFACE (dialog, panel, popover,
|
|
321
|
-
// toast). NOT the same as remove / delete below.
|
|
322
|
-
// - clear: clear-a-FIELD ✕ — distinct purpose, same glyph; follows
|
|
323
|
-
// --base-icon-close at runtime (override alone to diverge).
|
|
324
|
-
// - remove: take an ITEM out of a collection (chip / tag / selected row) —
|
|
325
|
-
// non-destructive, reversible. ✕ glyph, follows close (own knob).
|
|
326
|
-
// - expand/collapse: the +/− pair for the SWAP-two-glyphs disclosure model
|
|
327
|
-
// (tree nodes, accordions) — distinct from `chevron`, the
|
|
328
|
-
// ROTATE-one-glyph model. Shows `expand` (+) collapsed, `collapse`
|
|
329
|
-
// (−) open, swapping on state (no rotation). Lucide plus / minus.
|
|
330
|
-
//
|
|
331
|
-
// Action icons — CRUD verbs with distinct glyphs so they read as actions, NOT as
|
|
332
|
-
// dismiss/disclosure affordances:
|
|
333
|
-
// - add: + — create / insert (row, tag, item). Same + shape as `expand`
|
|
334
|
-
// but an INDEPENDENT knob (create ≠ disclosure).
|
|
335
|
-
// - edit: pencil — modify.
|
|
336
|
-
// - delete: trash can — DESTROY permanently (destructive). Deliberately a
|
|
337
|
-
// bin, not an ✕, so it never reads like close / remove.
|
|
338
|
-
//
|
|
339
|
-
// Utility:
|
|
340
|
-
// - search: magnifying glass — search inputs, filter fields, command palette.
|
|
341
|
-
//
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
//
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
//
|
|
351
|
-
|
|
352
|
-
$base-icon-
|
|
353
|
-
$base-icon-
|
|
354
|
-
|
|
355
|
-
$base-icon-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
//
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
$
|
|
365
|
-
$
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
$
|
|
1
|
+
// ============================================================================
|
|
2
|
+
// BASE VARIABLES - Single Source of Truth for Theming
|
|
3
|
+
// ============================================================================
|
|
4
|
+
// These $base-* SCSS variables are the PRIMARY source for all theme colors.
|
|
5
|
+
// Framework variables in _colors.scss, _typography.scss, etc. DERIVE from these.
|
|
6
|
+
// Web components consume these via --base-* CSS custom properties.
|
|
7
|
+
//
|
|
8
|
+
// To create a theme: Override these variables, everything else auto-derives.
|
|
9
|
+
// ============================================================================
|
|
10
|
+
|
|
11
|
+
@use 'sass:color';
|
|
12
|
+
|
|
13
|
+
// =============================================================================
|
|
14
|
+
// ACCENT COLORS
|
|
15
|
+
// Primary brand/interactive color and its variants
|
|
16
|
+
// =============================================================================
|
|
17
|
+
|
|
18
|
+
// Default theme = pure-admin Corporate (sky-blue). Matches the canonical
|
|
19
|
+
// --base-* contract in @keenmate/base-css-variables; a theme overrides these.
|
|
20
|
+
$base-accent-color: #0ea5e9 !default;
|
|
21
|
+
$base-accent-color-hover: #0284c7 !default;
|
|
22
|
+
$base-accent-color-active: #0369a1 !default;
|
|
23
|
+
$base-accent-color-light: rgba($base-accent-color, 0.05) !default;
|
|
24
|
+
$base-accent-color-light-hover: rgba($base-accent-color, 0.08) !default;
|
|
25
|
+
|
|
26
|
+
// =============================================================================
|
|
27
|
+
// TEXT COLORS
|
|
28
|
+
// Hierarchical text colors for different emphasis levels
|
|
29
|
+
// =============================================================================
|
|
30
|
+
|
|
31
|
+
$base-text-color-1: #334155 !default; // Primary text (strongest) — Corporate slate-700
|
|
32
|
+
$base-text-color-2: #64748b !default; // Secondary text (muted) — slate-500
|
|
33
|
+
$base-text-color-3: #94a3b8 !default; // Tertiary text (lighter) — slate-400
|
|
34
|
+
$base-text-color-4: #cbd5e1 !default; // Quaternary text (lightest) — slate-300
|
|
35
|
+
$base-text-color-on-accent: #ffffff !default; // Text on accent backgrounds
|
|
36
|
+
|
|
37
|
+
// =============================================================================
|
|
38
|
+
// BACKGROUND COLORS
|
|
39
|
+
// Semantic background colors for different purposes
|
|
40
|
+
// =============================================================================
|
|
41
|
+
|
|
42
|
+
// SURFACE ELEVATION LADDER (static container backgrounds — one axis).
|
|
43
|
+
// Keep this axis separate from the interaction-STATE tokens below (hover/
|
|
44
|
+
// active/disabled) and from --base-border-color (dividers).
|
|
45
|
+
$base-main-bg: #ffffff !default; // Content surface (cards, modals, body) — the reference rung
|
|
46
|
+
$base-page-bg: #f8f9fa !default; // Canvas/backdrop the content sits on
|
|
47
|
+
// Recessed / inset surface — the "sunken" rung BELOW main: code blocks, wells,
|
|
48
|
+
// inset panels, pills, tiles. NOT a hover state (see $base-hover-bg) and NOT a
|
|
49
|
+
// divider (see $base-border-color); one crisp job. Raised chrome (headers,
|
|
50
|
+
// striped rows) uses $base-elevated-bg instead.
|
|
51
|
+
$base-subtle-bg: #e9ecef !default;
|
|
52
|
+
$base-inverse-bg: #2c3e50 !default; // Inverse background (tooltips, dark elements)
|
|
53
|
+
$base-overlay-bg: rgba(0, 0, 0, 0.5) !default; // Modal/overlay background
|
|
54
|
+
$base-shadow-color: rgba(0, 0, 0, 0.15) !default; // Shadow color for elevation
|
|
55
|
+
// Elevated surface (header rows, striped rows, popovers/toolbars). Defaults to
|
|
56
|
+
// the page background so the default theme's header appearance is unchanged, but
|
|
57
|
+
// themes can override it independently to create a distinct raised tone.
|
|
58
|
+
// Defaults to the page bg so it tracks a theme's canvas (dark themes stay dark);
|
|
59
|
+
// Corporate overrides it to slate-100 (#f1f5f9) for a distinct header tint.
|
|
60
|
+
$base-elevated-bg: $base-page-bg !default;
|
|
61
|
+
// Text on inverse/dark surfaces (web-component bridge: --base-text-inverted).
|
|
62
|
+
$base-text-inverted: #ffffff !default;
|
|
63
|
+
|
|
64
|
+
// Interaction-STATE backgrounds (a separate axis from the elevation ladder).
|
|
65
|
+
// These default to (derive from) $base-subtle-bg so unthemed hovers stay
|
|
66
|
+
// sensible, but they are their OWN tokens: override them to decouple hover/
|
|
67
|
+
// active from the recessed-surface tone. Components read --pc-hover-bg /
|
|
68
|
+
// --pc-active-bg for :hover/:active fills — never --pc-subtle-bg.
|
|
69
|
+
$base-hover-bg: $base-subtle-bg !default; // Hover state background
|
|
70
|
+
$base-active-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default; // Active/pressed state
|
|
71
|
+
// Disabled element background. Given its OWN lower-contrast default (an inert,
|
|
72
|
+
// near-page tone) so it no longer collides with $base-hover-bg/$base-subtle-bg —
|
|
73
|
+
// distinct purpose, distinct value. (WS7.3)
|
|
74
|
+
$base-disabled-bg: #f1f3f5 !default;
|
|
75
|
+
|
|
76
|
+
// =============================================================================
|
|
77
|
+
// BORDER COLORS
|
|
78
|
+
// Border colors and shorthand
|
|
79
|
+
// =============================================================================
|
|
80
|
+
|
|
81
|
+
// Shared border width — the single knob the border shorthands compose from, so
|
|
82
|
+
// a theme can retune stroke weight in one place (web-component bridge:
|
|
83
|
+
// --base-border-width). (WS7.1)
|
|
84
|
+
$base-border-width: 1px !default;
|
|
85
|
+
$base-border-color: #e2e8f0 !default; // Corporate slate-200
|
|
86
|
+
$base-border: $base-border-width solid $base-border-color !default;
|
|
87
|
+
// Checkbox/radio border (web-component bridge: --base-checkbox-border-color).
|
|
88
|
+
$base-checkbox-border-color: $base-border-color !default;
|
|
89
|
+
|
|
90
|
+
// =============================================================================
|
|
91
|
+
// INPUT FIELDS
|
|
92
|
+
// Input field styling and states
|
|
93
|
+
// =============================================================================
|
|
94
|
+
|
|
95
|
+
$base-input-bg: $base-main-bg !default;
|
|
96
|
+
$base-input-color: #334155 !default; // Corporate slate-700
|
|
97
|
+
// Input border as a colour (single source) + the 1px shorthand web components
|
|
98
|
+
// read via --base-input-border. Now equals --base-border-color (both Corporate
|
|
99
|
+
// slate-200 #e2e8f0).
|
|
100
|
+
$base-input-border-color: #e2e8f0 !default; // = border-color (Corporate slate-200)
|
|
101
|
+
$base-input-border: 1px solid $base-input-border-color !default;
|
|
102
|
+
$base-input-border-hover: 1px solid $base-accent-color !default; // Corporate: accent on hover
|
|
103
|
+
$base-input-border-focus: 1px solid $base-accent-color !default;
|
|
104
|
+
$base-input-placeholder-color: $base-text-color-4 !default;
|
|
105
|
+
$base-input-bg-disabled: rgba($base-input-bg, 0.5) !default;
|
|
106
|
+
// Inline clear ("×") affordance inside inputs (web-component bridge:
|
|
107
|
+
// --base-input-clear-color / --base-input-clear-bg-hover).
|
|
108
|
+
$base-input-clear-color: $base-text-color-3 !default;
|
|
109
|
+
$base-input-clear-bg-hover: $base-hover-bg !default;
|
|
110
|
+
|
|
111
|
+
// Input size heights (unitless multipliers for x10px base)
|
|
112
|
+
// Neutral heights (Corporate bumps these +0.3 itself for its wider font — that's a
|
|
113
|
+
// theme ergonomic tweak, not base identity, so the foundation default stays neutral).
|
|
114
|
+
$base-input-size-xs-height: 3.1 !default; // 31px
|
|
115
|
+
$base-input-size-sm-height: 3.3 !default; // 33px
|
|
116
|
+
$base-input-size-md-height: 3.5 !default; // 35px
|
|
117
|
+
$base-input-size-lg-height: 3.8 !default; // 38px
|
|
118
|
+
$base-input-size-xl-height: 4.1 !default; // 41px
|
|
119
|
+
|
|
120
|
+
// =============================================================================
|
|
121
|
+
// DROPDOWN / POPOVER
|
|
122
|
+
// Floating element styling
|
|
123
|
+
// =============================================================================
|
|
124
|
+
|
|
125
|
+
$base-dropdown-bg: $base-main-bg !default;
|
|
126
|
+
$base-dropdown-border: 1px solid $base-border-color !default;
|
|
127
|
+
$base-dropdown-box-shadow: 0 8px 16px $base-shadow-color !default;
|
|
128
|
+
|
|
129
|
+
// =============================================================================
|
|
130
|
+
// TOOLTIP
|
|
131
|
+
// Tooltip styling
|
|
132
|
+
// =============================================================================
|
|
133
|
+
|
|
134
|
+
$base-tooltip-bg: $base-inverse-bg !default;
|
|
135
|
+
$base-tooltip-text-color: #ffffff !default;
|
|
136
|
+
|
|
137
|
+
// =============================================================================
|
|
138
|
+
// CONTEXTUAL COLORS - SUCCESS
|
|
139
|
+
// Success/positive semantic colors
|
|
140
|
+
// =============================================================================
|
|
141
|
+
|
|
142
|
+
$base-success-color: #10b981 !default; // Corporate emerald-500 — also --pa-positive in the sentiment scale
|
|
143
|
+
$base-success-bg: $base-success-color !default; // Solid role fill (web-component bridge: --base-success-bg)
|
|
144
|
+
$base-success-color-hover: #059669 !default; // Corporate emerald-600
|
|
145
|
+
$base-success-bg-light: rgba($base-success-color, 0.1) !default;
|
|
146
|
+
$base-success-bg-subtle: rgba($base-success-color, 0.08) !default;
|
|
147
|
+
$base-success-border: rgba($base-success-color, 0.2) !default;
|
|
148
|
+
$base-success-text: #155724 !default;
|
|
149
|
+
$base-success-text-light: #d4edda !default;
|
|
150
|
+
$base-text-on-success: #ffffff !default;
|
|
151
|
+
|
|
152
|
+
// =============================================================================
|
|
153
|
+
// CONTEXTUAL COLORS - DANGER
|
|
154
|
+
// Danger/error semantic colors
|
|
155
|
+
// =============================================================================
|
|
156
|
+
|
|
157
|
+
$base-danger-color: #ef4444 !default; // Tailwind red-500 — aligns with --pa-negative in the sentiment scale
|
|
158
|
+
$base-danger-bg: $base-danger-color !default; // Solid role fill (web-component bridge: --base-danger-bg)
|
|
159
|
+
$base-danger-color-hover: #dc2626 !default; // Corporate red-600
|
|
160
|
+
$base-danger-bg-light: rgba($base-danger-color, 0.1) !default;
|
|
161
|
+
$base-danger-bg-subtle: rgba($base-danger-color, 0.08) !default;
|
|
162
|
+
$base-danger-border: rgba($base-danger-color, 0.2) !default;
|
|
163
|
+
$base-danger-text: #721c24 !default;
|
|
164
|
+
$base-danger-text-light: #f8d7da !default;
|
|
165
|
+
$base-text-on-danger: #ffffff !default;
|
|
166
|
+
|
|
167
|
+
// =============================================================================
|
|
168
|
+
// CONTEXTUAL COLORS - WARNING
|
|
169
|
+
// Warning semantic colors
|
|
170
|
+
// =============================================================================
|
|
171
|
+
|
|
172
|
+
$base-warning-color: #f59e0b !default; // Corporate amber-500 — also the off-target axis in KPI components
|
|
173
|
+
$base-warning-bg: $base-warning-color !default; // Solid role fill (web-component bridge: --base-warning-bg)
|
|
174
|
+
$base-warning-color-hover: #d97706 !default; // Corporate amber-600
|
|
175
|
+
$base-warning-bg-light: rgba($base-warning-color, 0.1) !default;
|
|
176
|
+
$base-warning-bg-subtle: rgba($base-warning-color, 0.08) !default;
|
|
177
|
+
$base-warning-border: rgba($base-warning-color, 0.2) !default;
|
|
178
|
+
$base-warning-text: #856404 !default;
|
|
179
|
+
$base-warning-text-light: #fff3cd !default;
|
|
180
|
+
$base-text-on-warning: #ffffff !default; // Corporate uses white on amber
|
|
181
|
+
|
|
182
|
+
// =============================================================================
|
|
183
|
+
// CONTEXTUAL COLORS - INFO
|
|
184
|
+
// Info semantic colors
|
|
185
|
+
// =============================================================================
|
|
186
|
+
|
|
187
|
+
$base-info-color: #06b6d4 !default; // Corporate cyan-500
|
|
188
|
+
$base-info-bg: $base-info-color !default; // Solid role fill — role symmetry with success/danger/warning (WS7.4)
|
|
189
|
+
$base-info-color-hover: #0891b2 !default; // Corporate cyan-600
|
|
190
|
+
$base-info-bg-light: rgba($base-info-color, 0.1) !default;
|
|
191
|
+
$base-info-bg-subtle: rgba($base-info-color, 0.08) !default;
|
|
192
|
+
$base-info-border: rgba($base-info-color, 0.2) !default;
|
|
193
|
+
$base-info-text: #0c5460 !default;
|
|
194
|
+
$base-info-text-light: #d1ecf1 !default;
|
|
195
|
+
$base-text-on-info: #ffffff !default;
|
|
196
|
+
|
|
197
|
+
// =============================================================================
|
|
198
|
+
// SECONDARY ROLE
|
|
199
|
+
// Neutral/secondary role, promoted into the base contract so themes can retune
|
|
200
|
+
// it like any other role instead of it being a hardcoded grey in _colors.scss.
|
|
201
|
+
// (WS7.5) Fill + hover + text-on-fill; the derived $btn-secondary-*/$secondary-*
|
|
202
|
+
// vocabulary in _colors.scss now traces to these.
|
|
203
|
+
// =============================================================================
|
|
204
|
+
|
|
205
|
+
$base-secondary-color: #6c757d !default;
|
|
206
|
+
$base-secondary-color-hover: #545b62 !default;
|
|
207
|
+
$base-text-on-secondary: #ffffff !default;
|
|
208
|
+
|
|
209
|
+
// =============================================================================
|
|
210
|
+
// SENTIMENT SCALE — 5-step direction-of-change
|
|
211
|
+
// Used by KPI / data-display components to indicate movement direction.
|
|
212
|
+
// `--pa-positive` and `--pa-negative` alias the role colours above; the
|
|
213
|
+
// outlier shades (`very-positive` / `very-negative`) are explicit darker
|
|
214
|
+
// stops since they're not derivable cleanly via color.adjust.
|
|
215
|
+
// =============================================================================
|
|
216
|
+
|
|
217
|
+
$base-very-positive: #16a34a !default; // Tailwind green-600 — outlier positive
|
|
218
|
+
$base-very-negative: #dc2626 !default; // Tailwind red-600 — outlier negative
|
|
219
|
+
$base-neutral: #9ca3af !default; // Tailwind gray-400 — "no meaningful change"
|
|
220
|
+
|
|
221
|
+
// =============================================================================
|
|
222
|
+
// THEME PALETTE SLOTS (1–9) + paired contrast text
|
|
223
|
+
// Arbitrary branded / data-viz slots. These are the SOURCE for $color-1..9
|
|
224
|
+
// (variables/_colors.scss derives `$color-N: $base-color-N`) and the emitted
|
|
225
|
+
// --base-color-N / --pc-color-N, so the palette follows the same $base-* → $X
|
|
226
|
+
// chain as every other token. Default = Corporate palette.
|
|
227
|
+
// =============================================================================
|
|
228
|
+
|
|
229
|
+
$base-color-1: #f59e0b !default; // Amber
|
|
230
|
+
$base-color-2: #ec4899 !default; // Pink
|
|
231
|
+
$base-color-3: #10b981 !default; // Emerald
|
|
232
|
+
$base-color-4: #0ea5e9 !default; // Sky blue
|
|
233
|
+
$base-color-5: #8b5cf6 !default; // Violet
|
|
234
|
+
$base-color-6: #6366f1 !default; // Indigo
|
|
235
|
+
$base-color-7: #64748b !default; // Slate
|
|
236
|
+
$base-color-8: #0284c7 !default; // Corporate blue
|
|
237
|
+
$base-color-9: #334155 !default; // Dark slate
|
|
238
|
+
$base-color-1-text: #1a1a1a !default; // dark on amber
|
|
239
|
+
$base-color-2-text: #ffffff !default;
|
|
240
|
+
$base-color-3-text: #ffffff !default;
|
|
241
|
+
$base-color-4-text: #ffffff !default;
|
|
242
|
+
$base-color-5-text: #ffffff !default;
|
|
243
|
+
$base-color-6-text: #ffffff !default;
|
|
244
|
+
$base-color-7-text: #ffffff !default;
|
|
245
|
+
$base-color-8-text: #ffffff !default;
|
|
246
|
+
$base-color-9-text: #ffffff !default;
|
|
247
|
+
|
|
248
|
+
// =============================================================================
|
|
249
|
+
// INTERACTIVE STATES
|
|
250
|
+
// Generic interaction feedback colors
|
|
251
|
+
// =============================================================================
|
|
252
|
+
|
|
253
|
+
$base-hover-overlay: rgba(0, 0, 0, 0.04) !default;
|
|
254
|
+
$base-active-overlay: rgba(0, 0, 0, 0.08) !default;
|
|
255
|
+
$base-focus-ring-color: $base-accent-color !default;
|
|
256
|
+
$base-focus-ring-width: 3px !default;
|
|
257
|
+
|
|
258
|
+
// =============================================================================
|
|
259
|
+
// TYPOGRAPHY
|
|
260
|
+
// Font families, sizes, weights, and line heights
|
|
261
|
+
// =============================================================================
|
|
262
|
+
|
|
263
|
+
$base-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
|
|
264
|
+
$base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
|
|
265
|
+
|
|
266
|
+
// Font sizes (unitless multipliers for x10px base)
|
|
267
|
+
$base-font-size-2xs: 1.0 !default; // 10px
|
|
268
|
+
$base-font-size-xs: 1.2 !default; // 12px
|
|
269
|
+
$base-font-size-sm: 1.4 !default; // 14px
|
|
270
|
+
$base-font-size-base: 1.6 !default; // 16px
|
|
271
|
+
$base-font-size-lg: 1.8 !default; // 18px
|
|
272
|
+
$base-font-size-xl: 2.0 !default; // 20px
|
|
273
|
+
$base-font-size-2xl: 2.4 !default; // 24px
|
|
274
|
+
|
|
275
|
+
// Font weights
|
|
276
|
+
$base-font-weight-normal: 400 !default;
|
|
277
|
+
$base-font-weight-medium: 500 !default;
|
|
278
|
+
$base-font-weight-semibold: 600 !default;
|
|
279
|
+
$base-font-weight-bold: 700 !default;
|
|
280
|
+
|
|
281
|
+
// Line heights
|
|
282
|
+
$base-line-height-tight: 1.25 !default;
|
|
283
|
+
$base-line-height-normal: 1.5 !default;
|
|
284
|
+
$base-line-height-relaxed: 1.75 !default;
|
|
285
|
+
|
|
286
|
+
// =============================================================================
|
|
287
|
+
// BORDER RADIUS
|
|
288
|
+
// Border radius sizes (unitless multipliers for x10px base)
|
|
289
|
+
// =============================================================================
|
|
290
|
+
|
|
291
|
+
$base-border-radius-sm: 0.4 !default; // 4px
|
|
292
|
+
$base-border-radius-md: 0.6 !default; // 6px
|
|
293
|
+
$base-border-radius-lg: 0.8 !default; // 8px
|
|
294
|
+
|
|
295
|
+
// Rem base for web components (bridge: --base-rem). They size themselves as
|
|
296
|
+
// `calc(<unitless-multiplier> * var(--base-rem, 10px))`. pure-css pins
|
|
297
|
+
// `html { font-size: 10px }` (reboot), so `1rem` tracks that base adaptively.
|
|
298
|
+
$base-rem: 1rem !default;
|
|
299
|
+
|
|
300
|
+
// $command-palette-input-height moved to pure-admin-core (variables/
|
|
301
|
+
// _components.scss) — a niche component dimension, not a foundation primitive.
|
|
302
|
+
|
|
303
|
+
// =============================================================================
|
|
304
|
+
// ICONS
|
|
305
|
+
// Mask-friendly SVG glyphs for the shared UI affordances, so every consumer
|
|
306
|
+
// (pure-css shell, pure-admin components, the web/svelte components) can render
|
|
307
|
+
// the SAME toggle/close marks and a theme can swap the icon set in ONE place.
|
|
308
|
+
// Rendered via `mask` + `background: currentColor`, so the glyph inherits text
|
|
309
|
+
// colour and needs no fill/stroke theming. Values are percent-encoded data-URIs
|
|
310
|
+
// (no raw `#`, so Sass never mistakes it for interpolation). Defaults are Lucide.
|
|
311
|
+
// - chevron: thin STROKED angle bracket, DIRECTIONAL/rotatable — expanders,
|
|
312
|
+
// nav, submenus ("more this way"). Resting glyph points RIGHT
|
|
313
|
+
// (LTR); consumers rotate it 90deg to point down when open. This
|
|
314
|
+
// is the ROTATE-one-glyph disclosure model (cf. expand/collapse).
|
|
315
|
+
// - caret-up /
|
|
316
|
+
// caret-down: small SOLID triangles, STATIC — the dropdown/select affordance
|
|
317
|
+
// (down = "a menu opens below") and its sort-direction / upward-
|
|
318
|
+
// dropdown counterpart (up). A component SWAPS up/down; a caret
|
|
319
|
+
// never rotates (that's the chevron's job).
|
|
320
|
+
// - close: the ✕ — dismiss a transient SURFACE (dialog, panel, popover,
|
|
321
|
+
// toast). NOT the same as remove / delete below.
|
|
322
|
+
// - clear: clear-a-FIELD ✕ — distinct purpose, same glyph; follows
|
|
323
|
+
// --base-icon-close at runtime (override alone to diverge).
|
|
324
|
+
// - remove: take an ITEM out of a collection (chip / tag / selected row) —
|
|
325
|
+
// non-destructive, reversible. ✕ glyph, follows close (own knob).
|
|
326
|
+
// - expand/collapse: the +/− pair for the SWAP-two-glyphs disclosure model
|
|
327
|
+
// (tree nodes, accordions) — distinct from `chevron`, the
|
|
328
|
+
// ROTATE-one-glyph model. Shows `expand` (+) collapsed, `collapse`
|
|
329
|
+
// (−) open, swapping on state (no rotation). Lucide plus / minus.
|
|
330
|
+
//
|
|
331
|
+
// Action icons — CRUD verbs with distinct glyphs so they read as actions, NOT as
|
|
332
|
+
// dismiss/disclosure affordances:
|
|
333
|
+
// - add: + — create / insert (row, tag, item). Same + shape as `expand`
|
|
334
|
+
// but an INDEPENDENT knob (create ≠ disclosure).
|
|
335
|
+
// - edit: pencil — modify.
|
|
336
|
+
// - delete: trash can — DESTROY permanently (destructive). Deliberately a
|
|
337
|
+
// bin, not an ✕, so it never reads like close / remove.
|
|
338
|
+
//
|
|
339
|
+
// Utility:
|
|
340
|
+
// - search: magnifying glass — search inputs, filter fields, command palette.
|
|
341
|
+
// - filter: funnel — narrow a list/table by criteria (filter toggles, faceted
|
|
342
|
+
// search). Distinct from `search` (find by text) — read as "refine".
|
|
343
|
+
//
|
|
344
|
+
// Selection — the checkbox / tree-node state pair (shared by web-multiselect,
|
|
345
|
+
// web-treeview, checkboxes — one tick everywhere):
|
|
346
|
+
// - check: the ✓ — SELECTED. Checkbox checked, selected option/row/node.
|
|
347
|
+
// - indeterminate: the − — PARTIALLY selected (tri-state: a parent whose children
|
|
348
|
+
// are a mix). Shares the minus shape with `collapse` but is an
|
|
349
|
+
// INDEPENDENT knob — selection ≠ disclosure (cf. add vs expand).
|
|
350
|
+
// =============================================================================
|
|
351
|
+
|
|
352
|
+
$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") !default;
|
|
353
|
+
$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") !default;
|
|
354
|
+
$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") !default;
|
|
355
|
+
$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") !default;
|
|
356
|
+
// expand = "+" (shown when collapsed, invites expand); collapse = "−" (shown when open).
|
|
357
|
+
$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") !default;
|
|
358
|
+
$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") !default;
|
|
359
|
+
// Action icons (CRUD). `add` shares the + shape with `expand` but is its own knob.
|
|
360
|
+
$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") !default;
|
|
361
|
+
$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") !default;
|
|
362
|
+
$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") !default;
|
|
363
|
+
// Utility: magnifying glass (Lucide search) + funnel (Lucide filter).
|
|
364
|
+
$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") !default;
|
|
365
|
+
$base-icon-filter: 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%3Cpolygon points=%2222 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3%22/%3E%3C/svg%3E") !default;
|
|
366
|
+
// Selection: check = ✓ (Lucide check), indeterminate = − (Lucide minus). indeterminate
|
|
367
|
+
// shares the minus shape with `collapse` but is its own knob (selection ≠ disclosure).
|
|
368
|
+
$base-icon-check: 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=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E") !default;
|
|
369
|
+
$base-icon-indeterminate: 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") !default;
|
|
370
|
+
|
|
371
|
+
// =============================================================================
|
|
372
|
+
// ALERT COLOR DERIVATION PARAMETERS
|
|
373
|
+
// Used by color-mix() mixins to derive alert colors from semantic base colors
|
|
374
|
+
// Themes can override these to customize alert appearance
|
|
375
|
+
// =============================================================================
|
|
376
|
+
|
|
377
|
+
$alert-bg-opacity-light: 15 !default; // Light mode: subtle bg (%)
|
|
378
|
+
$alert-bg-opacity-dark: 45 !default; // Dark mode: punchy, vibrant bg (%)
|
|
379
|
+
$alert-border-opacity-light: 30 !default; // Light mode border (%)
|
|
380
|
+
$alert-border-opacity-dark: 70 !default; // Dark mode border - more visible (%)
|
|
381
|
+
$alert-text-mix-light: 60% !default; // Mix with black for dark text
|
|
382
|
+
$alert-text-mix-dark: 80% !default; // Mix with white for light text
|