ng-hub-ui-ds 22.1.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.es.md +349 -0
  3. package/README.md +352 -0
  4. package/package.json +44 -0
  5. package/styles/tokens/hub-tokens.css +736 -0
  6. package/styles/tokens/hub-tokens.scss +777 -0
package/styles/tokens/hub-tokens.css ADDED
@@ -0,0 +1,736 @@
1
+ @charset "UTF-8";
2
+ /**
3
+ * hub-tokens.scss
4
+ *
5
+ * Central design token file for ng-hub-ui.
6
+ * Defines all `ref` (primitive) and `sys` (semantic) CSS custom properties.
7
+ *
8
+ * Layer structure:
9
+ * Layer 1 — ref : Raw values — colors, spacing, radii, typography, etc.
10
+ * Base — container : Inheritable base scope bridging sys to containers/slots.
11
+ * Layer 2 — sys : Semantic assignments — surfaces, text, borders, states.
12
+ *
13
+ * Semantic colors (CSS-variable-first):
14
+ * A theme sets only ONE accent per variant (--hub-sys-color-{variant}).
15
+ * The role family — `-subtle`, `-border-subtle`, `-emphasis` (and `-dark`,
16
+ * a back-compat alias of `-emphasis`) — is derived ONCE in :root with
17
+ * color-mix(), against the contextual --hub-sys-surface-page and
18
+ * --hub-sys-color-ink. Because the derivations reference live CSS variables,
19
+ * overriding a single accent — even on a subtree — recomputes the whole
20
+ * family at runtime, with no recompilation and no per-theme boilerplate.
21
+ *
22
+ * Theming:
23
+ * Light values are defined on :root and [data-theme='light'].
24
+ * Dark overrides are defined on [data-theme='dark'].
25
+ * All components consume sys tokens only. Changing a sys token value here
26
+ * cascades immediately to every component that references it.
27
+ *
28
+ * Usage:
29
+ * Import this file once, at the root of the application (e.g. styles.scss):
30
+ * @import 'styles/tokens/hub-tokens';
31
+ *
32
+ * Then override any token for a custom theme:
33
+ * :root { --hub-sys-color-primary: #7c3aed; }
34
+ */
35
+ /* ============================================================
36
+ LAYER 1 — ref
37
+ Primitive, context-free values. Never reference sys here.
38
+ ============================================================ */
39
+ :root {
40
+ /* ----------------------------------------------------------
41
+ Colors — white and black
42
+ ---------------------------------------------------------- */
43
+ --hub-ref-color-white: #ffffff;
44
+ --hub-ref-color-black: #000000;
45
+ /* ----------------------------------------------------------
46
+ Colors — gray scale
47
+ ---------------------------------------------------------- */
48
+ --hub-ref-color-gray-100: #f8f9fa;
49
+ --hub-ref-color-gray-200: #e9ecef;
50
+ --hub-ref-color-gray-300: #dee2e6;
51
+ --hub-ref-color-gray-400: #ced4da;
52
+ --hub-ref-color-gray-500: #adb5bd;
53
+ --hub-ref-color-gray-600: #6c757d;
54
+ --hub-ref-color-gray-700: #495057;
55
+ --hub-ref-color-gray-800: #343a40;
56
+ --hub-ref-color-gray-900: #212529;
57
+ /* ----------------------------------------------------------
58
+ Colors — blue palette (primary)
59
+ ---------------------------------------------------------- */
60
+ --hub-ref-color-blue-100: #cfe2ff;
61
+ --hub-ref-color-blue-200: #9ec5fe;
62
+ --hub-ref-color-blue-300: #6ea8fe;
63
+ --hub-ref-color-blue-400: #3d8bfd;
64
+ --hub-ref-color-blue-500: #0d6efd;
65
+ --hub-ref-color-blue-600: #0a58ca;
66
+ --hub-ref-color-blue-700: #084298;
67
+ --hub-ref-color-blue-800: #052c65;
68
+ --hub-ref-color-blue-900: #031633;
69
+ /* ----------------------------------------------------------
70
+ Colors — green palette (success)
71
+ ---------------------------------------------------------- */
72
+ --hub-ref-color-green-100: #d1e7dd;
73
+ --hub-ref-color-green-200: #a3cfbb;
74
+ --hub-ref-color-green-300: #75b798;
75
+ --hub-ref-color-green-400: #479f76;
76
+ --hub-ref-color-green-500: #198754;
77
+ --hub-ref-color-green-600: #146c43;
78
+ --hub-ref-color-green-700: #0f5132;
79
+ --hub-ref-color-green-800: #0a3622;
80
+ --hub-ref-color-green-900: #051b11;
81
+ /* ----------------------------------------------------------
82
+ Colors — red palette (danger)
83
+ ---------------------------------------------------------- */
84
+ --hub-ref-color-red-100: #f8d7da;
85
+ --hub-ref-color-red-200: #f1aeb5;
86
+ --hub-ref-color-red-300: #ea868f;
87
+ --hub-ref-color-red-400: #e35d6a;
88
+ --hub-ref-color-red-500: #dc3545;
89
+ --hub-ref-color-red-600: #b02a37;
90
+ --hub-ref-color-red-700: #842029;
91
+ --hub-ref-color-red-800: #58151c;
92
+ --hub-ref-color-red-900: #2c0b0e;
93
+ /* ----------------------------------------------------------
94
+ Colors — yellow palette (warning)
95
+ ---------------------------------------------------------- */
96
+ --hub-ref-color-yellow-100: #fff3cd;
97
+ --hub-ref-color-yellow-200: #ffe69c;
98
+ --hub-ref-color-yellow-300: #ffda6a;
99
+ --hub-ref-color-yellow-400: #ffcd39;
100
+ --hub-ref-color-yellow-500: #ffc107;
101
+ --hub-ref-color-yellow-600: #cc9a06;
102
+ --hub-ref-color-yellow-700: #997404;
103
+ --hub-ref-color-yellow-800: #664d03;
104
+ --hub-ref-color-yellow-900: #332701;
105
+ /* ----------------------------------------------------------
106
+ Colors — cyan palette (info)
107
+ ---------------------------------------------------------- */
108
+ --hub-ref-color-cyan-100: #cff4fc;
109
+ --hub-ref-color-cyan-200: #9eeaf9;
110
+ --hub-ref-color-cyan-300: #6edff6;
111
+ --hub-ref-color-cyan-400: #3dd5f3;
112
+ --hub-ref-color-cyan-500: #0dcaf0;
113
+ --hub-ref-color-cyan-600: #0aa2c0;
114
+ --hub-ref-color-cyan-700: #087990;
115
+ --hub-ref-color-cyan-800: #055160;
116
+ --hub-ref-color-cyan-900: #032830;
117
+ /* ----------------------------------------------------------
118
+ Surfaces (ref-level aliases for common backgrounds)
119
+ ---------------------------------------------------------- */
120
+ --hub-ref-surface-1: #ffffff;
121
+ --hub-ref-surface-2: #f8f9fa;
122
+ /* ----------------------------------------------------------
123
+ Spacing scale
124
+ ---------------------------------------------------------- */
125
+ --hub-ref-space-0: 0;
126
+ --hub-ref-space-1: 0.25rem;
127
+ --hub-ref-space-2: 0.5rem;
128
+ --hub-ref-space-3: 1rem;
129
+ --hub-ref-space-4: 1.5rem;
130
+ --hub-ref-space-5: 3rem;
131
+ /* ----------------------------------------------------------
132
+ Border radius
133
+ ---------------------------------------------------------- */
134
+ --hub-ref-radius-none: 0;
135
+ --hub-ref-radius-sm: 0.25rem;
136
+ --hub-ref-radius-md: 0.375rem;
137
+ --hub-ref-radius-lg: 0.5rem;
138
+ --hub-ref-radius-pill: 50rem;
139
+ /* ----------------------------------------------------------
140
+ Border width
141
+ ---------------------------------------------------------- */
142
+ --hub-ref-border-width: 1px;
143
+ /* ----------------------------------------------------------
144
+ Typography
145
+ ---------------------------------------------------------- */
146
+ --hub-ref-font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
147
+ --hub-ref-font-family-display: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
148
+ --hub-ref-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
149
+ --hub-ref-font-size-base: 1rem;
150
+ --hub-ref-font-size-xs: 0.75rem;
151
+ --hub-ref-font-size-sm: 0.875rem;
152
+ --hub-ref-font-size-lg: 1.25rem;
153
+ --hub-ref-font-weight-light: 300;
154
+ --hub-ref-font-weight-base: 400;
155
+ --hub-ref-font-weight-medium: 500;
156
+ --hub-ref-font-weight-semibold: 600;
157
+ --hub-ref-font-weight-bold: 700;
158
+ --hub-ref-line-height-base: 1.5;
159
+ --hub-ref-line-height-sm: 1.25;
160
+ --hub-ref-line-height-lg: 2;
161
+ /* ----------------------------------------------------------
162
+ Icons
163
+ ---------------------------------------------------------- */
164
+ --hub-ref-icon-size: 1em;
165
+ }
166
+
167
+ /* ============================================================
168
+ BASE — container
169
+ Cross-cutting inheritable base scope: a re-base hook layer that
170
+ bridges sys tokens to concrete containers/slots. Components read
171
+ these as the default for their outer container chrome (surface,
172
+ border, padding, typography). Because they are live CSS variables
173
+ with real defaults, overriding ONE container token on a subtree
174
+ re-bases every descendant container that reads it — no recompile.
175
+ ============================================================ */
176
+ :root {
177
+ /* Typography */
178
+ --hub-container-font-family: var(--hub-ref-font-family-base);
179
+ --hub-container-font-size: var(--hub-ref-font-size-base);
180
+ --hub-container-font-weight: var(--hub-ref-font-weight-base);
181
+ --hub-container-font-style: normal;
182
+ --hub-container-text-color: var(--hub-sys-text-primary);
183
+ --hub-container-text-align: start;
184
+ --hub-container-text-decoration: none;
185
+ --hub-container-text-transform: none;
186
+ /* Visual */
187
+ --hub-container-bg: var(--hub-sys-surface-page);
188
+ --hub-container-border-color: var(--hub-sys-border-color-default);
189
+ --hub-container-border-style: solid;
190
+ --hub-container-border-width: var(--hub-ref-border-width);
191
+ --hub-container-border-radius: var(--hub-ref-radius-md);
192
+ /* Layout — real spacing defaults (re-basable per subtree) */
193
+ --hub-container-width: 100%;
194
+ --hub-container-margin-x: 0;
195
+ --hub-container-margin-y: 0;
196
+ --hub-container-padding-x: var(--hub-ref-space-3);
197
+ --hub-container-padding-y: var(--hub-ref-space-3);
198
+ --hub-container-flex-direction: row;
199
+ --hub-container-flex-wrap: nowrap;
200
+ --hub-container-justify-content: flex-start;
201
+ --hub-container-align-items: stretch;
202
+ --hub-container-row-gap: var(--hub-ref-space-2);
203
+ --hub-container-column-gap: var(--hub-ref-space-2);
204
+ }
205
+
206
+ /* ============================================================
207
+ Semantic color generation (CSS-variable-first)
208
+ A theme sets only ONE accent per variant (--hub-sys-color-{v}).
209
+ The role family (-subtle, -border-subtle, -emphasis, -dark) is
210
+ derived ONCE in :root with color-mix(), against the contextual
211
+ --hub-sys-surface-page and --hub-sys-color-ink. Because the
212
+ derivations reference the live CSS variables, overriding a single
213
+ accent — even on a subtree — recomputes the whole family at
214
+ runtime, with zero recompilation and no per-theme boilerplate.
215
+
216
+ -subtle = 12% accent over surface (tinted background)
217
+ -border-subtle = 35% accent over surface (hairline border)
218
+ -emphasis = 80% accent over ink (text / strong)
219
+ -dark = alias of -emphasis (back-compat)
220
+ ============================================================ */
221
+ /* ============================================================
222
+ LAYER 2 — sys (light theme / default)
223
+ Semantic assignments — reference ref tokens as fallbacks.
224
+ ============================================================ */
225
+ :root,
226
+ [data-theme=light] {
227
+ /* ----------------------------------------------------------
228
+ Brand / action colors
229
+ ---------------------------------------------------------- */
230
+ --hub-sys-color-primary: var(--hub-ref-color-blue-500, #0d6efd);
231
+ --hub-sys-color-success: var(--hub-ref-color-green-500, #198754);
232
+ --hub-sys-color-danger: var(--hub-ref-color-red-500, #dc3545);
233
+ --hub-sys-color-warning: var(--hub-ref-color-yellow-500, #ffc107);
234
+ --hub-sys-color-info: var(--hub-ref-color-cyan-500, #0dcaf0);
235
+ --hub-sys-color-primary-subtle: color-mix(
236
+ in srgb,
237
+ var(--hub-sys-color-primary) 12%,
238
+ var(--hub-sys-surface-page, #fff)
239
+ );
240
+ --hub-sys-color-primary-border-subtle: color-mix(
241
+ in srgb,
242
+ var(--hub-sys-color-primary) 35%,
243
+ var(--hub-sys-surface-page, #fff)
244
+ );
245
+ --hub-sys-color-primary-emphasis: color-mix(
246
+ in srgb,
247
+ var(--hub-sys-color-primary) 80%,
248
+ var(--hub-sys-color-ink, #212529)
249
+ );
250
+ --hub-sys-color-primary-dark: var(--hub-sys-color-primary-emphasis);
251
+ --hub-sys-color-success-subtle: color-mix(
252
+ in srgb,
253
+ var(--hub-sys-color-success) 12%,
254
+ var(--hub-sys-surface-page, #fff)
255
+ );
256
+ --hub-sys-color-success-border-subtle: color-mix(
257
+ in srgb,
258
+ var(--hub-sys-color-success) 35%,
259
+ var(--hub-sys-surface-page, #fff)
260
+ );
261
+ --hub-sys-color-success-emphasis: color-mix(
262
+ in srgb,
263
+ var(--hub-sys-color-success) 80%,
264
+ var(--hub-sys-color-ink, #212529)
265
+ );
266
+ --hub-sys-color-success-dark: var(--hub-sys-color-success-emphasis);
267
+ --hub-sys-color-danger-subtle: color-mix(
268
+ in srgb,
269
+ var(--hub-sys-color-danger) 12%,
270
+ var(--hub-sys-surface-page, #fff)
271
+ );
272
+ --hub-sys-color-danger-border-subtle: color-mix(
273
+ in srgb,
274
+ var(--hub-sys-color-danger) 35%,
275
+ var(--hub-sys-surface-page, #fff)
276
+ );
277
+ --hub-sys-color-danger-emphasis: color-mix(
278
+ in srgb,
279
+ var(--hub-sys-color-danger) 80%,
280
+ var(--hub-sys-color-ink, #212529)
281
+ );
282
+ --hub-sys-color-danger-dark: var(--hub-sys-color-danger-emphasis);
283
+ --hub-sys-color-warning-subtle: color-mix(
284
+ in srgb,
285
+ var(--hub-sys-color-warning) 12%,
286
+ var(--hub-sys-surface-page, #fff)
287
+ );
288
+ --hub-sys-color-warning-border-subtle: color-mix(
289
+ in srgb,
290
+ var(--hub-sys-color-warning) 35%,
291
+ var(--hub-sys-surface-page, #fff)
292
+ );
293
+ --hub-sys-color-warning-emphasis: color-mix(
294
+ in srgb,
295
+ var(--hub-sys-color-warning) 80%,
296
+ var(--hub-sys-color-ink, #212529)
297
+ );
298
+ --hub-sys-color-warning-dark: var(--hub-sys-color-warning-emphasis);
299
+ --hub-sys-color-info-subtle: color-mix(
300
+ in srgb,
301
+ var(--hub-sys-color-info) 12%,
302
+ var(--hub-sys-surface-page, #fff)
303
+ );
304
+ --hub-sys-color-info-border-subtle: color-mix(
305
+ in srgb,
306
+ var(--hub-sys-color-info) 35%,
307
+ var(--hub-sys-surface-page, #fff)
308
+ );
309
+ --hub-sys-color-info-emphasis: color-mix(
310
+ in srgb,
311
+ var(--hub-sys-color-info) 80%,
312
+ var(--hub-sys-color-ink, #212529)
313
+ );
314
+ --hub-sys-color-info-dark: var(--hub-sys-color-info-emphasis);
315
+ --hub-sys-color-ink: var(--hub-ref-color-gray-900, #212529);
316
+ --hub-sys-color-secondary: var(--hub-ref-color-gray-600, #6c757d);
317
+ --hub-sys-color-light: var(--hub-ref-color-gray-100, #f8f9fa);
318
+ --hub-sys-color-dark: var(--hub-ref-color-gray-900, #212529);
319
+ /* ----------------------------------------------------------
320
+ Expressive gradient — theme-aware accent used by the home
321
+ page (gradient headlines, glows, mesh background blobs).
322
+ Every theme overrides the three stops; the composed
323
+ gradient resolves at usage time, so it re-colors itself
324
+ automatically when data-theme changes.
325
+ ---------------------------------------------------------- */
326
+ --hub-sys-gradient-1: #7c3aed;
327
+ --hub-sys-gradient-2: #db2777;
328
+ --hub-sys-gradient-3: #d97706;
329
+ --hub-sys-gradient-accent: linear-gradient(
330
+ 135deg,
331
+ var(--hub-sys-gradient-1) 0%,
332
+ var(--hub-sys-gradient-2) 50%,
333
+ var(--hub-sys-gradient-3) 100%
334
+ );
335
+ /* ----------------------------------------------------------
336
+ Surfaces
337
+ ---------------------------------------------------------- */
338
+ --hub-sys-surface-page: var(--hub-ref-surface-1, #ffffff);
339
+ --hub-sys-surface-elevated: var(--hub-ref-surface-2, #f8f9fa);
340
+ --hub-sys-color-surface-default: var(--hub-sys-surface-page, #ffffff);
341
+ --hub-sys-color-surface-subtle: var(--hub-sys-surface-elevated, #f8f9fa);
342
+ /* ----------------------------------------------------------
343
+ Text
344
+ ---------------------------------------------------------- */
345
+ --hub-sys-text-primary: var(--hub-ref-color-gray-900, #212529);
346
+ --hub-sys-text-muted: var(--hub-ref-color-gray-600, #6c757d);
347
+ --hub-sys-color-text-subtle: var(--hub-sys-text-muted, #6c757d);
348
+ --hub-sys-link-color: var(--hub-sys-color-primary, #0d6efd);
349
+ --hub-sys-link-hover-color: var(--hub-ref-color-blue-600, #0a58ca);
350
+ /* ----------------------------------------------------------
351
+ Borders
352
+ ---------------------------------------------------------- */
353
+ --hub-sys-border-color-default: var(--hub-ref-color-gray-300, #dee2e6);
354
+ --hub-sys-color-border-subtle: var(--hub-sys-border-color-default, #dee2e6);
355
+ /* ----------------------------------------------------------
356
+ Shadows
357
+ ---------------------------------------------------------- */
358
+ --hub-sys-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
359
+ --hub-sys-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
360
+ --hub-sys-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
361
+ --hub-sys-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
362
+ --hub-sys-shadow-none: none;
363
+ --hub-sys-shadow-md: var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
364
+ /* ----------------------------------------------------------
365
+ Radius
366
+ ---------------------------------------------------------- */
367
+ --hub-sys-radius-none: var(--hub-ref-radius-none, 0);
368
+ --hub-sys-radius-sm: var(--hub-ref-radius-sm, 0.25rem);
369
+ --hub-sys-radius-md: var(--hub-ref-radius-md, 0.375rem);
370
+ --hub-sys-radius-lg: var(--hub-ref-radius-lg, 0.5rem);
371
+ --hub-sys-radius-pill: var(--hub-ref-radius-pill, 9999px);
372
+ /* ----------------------------------------------------------
373
+ Focus ring
374
+ ---------------------------------------------------------- */
375
+ --hub-sys-focus-ring-width: 0.25rem;
376
+ --hub-sys-focus-ring-color: rgba(13, 110, 253, 0.25);
377
+ --hub-sys-focus-ring-offset: 2px;
378
+ /* ----------------------------------------------------------
379
+ Accessibility
380
+ ---------------------------------------------------------- */
381
+ --hub-sys-hit-area-min-size: 44px;
382
+ --hub-sys-text-contrast-min: 4.5;
383
+ /* ----------------------------------------------------------
384
+ Z-index layers
385
+ ---------------------------------------------------------- */
386
+ --hub-sys-zindex-dropdown: 1000;
387
+ --hub-sys-zindex-sticky: 1020;
388
+ --hub-sys-zindex-fixed: 1030;
389
+ --hub-sys-zindex-modal-backdrop: 1050;
390
+ --hub-sys-zindex-modal: 1055;
391
+ --hub-sys-zindex-popover: 1070;
392
+ --hub-sys-zindex-tooltip: 1080;
393
+ --hub-sys-zindex-toast: 1090;
394
+ /* ----------------------------------------------------------
395
+ Breakpoints
396
+ Note: CSS custom properties cannot be used inside @media rules.
397
+ These are provided as reference values only (e.g. for JS).
398
+ ---------------------------------------------------------- */
399
+ --hub-sys-breakpoint-xs: 0;
400
+ --hub-sys-breakpoint-sm: 576px;
401
+ --hub-sys-breakpoint-md: 768px;
402
+ --hub-sys-breakpoint-lg: 992px;
403
+ --hub-sys-breakpoint-xl: 1200px;
404
+ --hub-sys-breakpoint-xxl: 1400px;
405
+ /* ----------------------------------------------------------
406
+ Opacity
407
+ ---------------------------------------------------------- */
408
+ --hub-sys-opacity-0: 0;
409
+ --hub-sys-opacity-25: 0.25;
410
+ --hub-sys-opacity-50: 0.5;
411
+ --hub-sys-opacity-75: 0.75;
412
+ --hub-sys-opacity-100: 1;
413
+ --hub-sys-opacity-disabled: 0.65;
414
+ /* ----------------------------------------------------------
415
+ Interactive state overlays
416
+ ---------------------------------------------------------- */
417
+ --hub-sys-state-hover-bg: rgba(0, 0, 0, 0.075);
418
+ --hub-sys-state-active-bg: rgba(0, 0, 0, 0.1);
419
+ --hub-sys-state-striped-bg: rgba(0, 0, 0, 0.05);
420
+ /* ----------------------------------------------------------
421
+ Transitions
422
+ ---------------------------------------------------------- */
423
+ --hub-sys-transition-fast: all 0.15s ease-in-out;
424
+ --hub-sys-transition-base: all 0.2s ease-in-out;
425
+ --hub-sys-transition-slow: all 0.3s ease-in-out;
426
+ --hub-sys-transition-fade: opacity 0.15s linear;
427
+ --hub-sys-transition-collapse: height 0.35s ease;
428
+ --hub-sys-transition-duration-base: 260ms;
429
+ --hub-sys-transition-timing-function-base: ease;
430
+ }
431
+
432
+ /* ============================================================
433
+ Bootstrap bridge variables
434
+ Maps Bootstrap variables into hub sys tokens.
435
+ ============================================================ */
436
+ :root,
437
+ [data-theme=base],
438
+ [data-theme=light],
439
+ [data-theme=bootstrap],
440
+ [data-theme=dark],
441
+ [data-theme=sunset],
442
+ [data-theme=forest],
443
+ [data-theme=mono] {
444
+ --hub-sys-color-primary: var(--bs-primary, #0d6efd);
445
+ --hub-sys-color-primary-dark: var(--bs-primary-text-emphasis, #0a58ca);
446
+ --hub-sys-color-secondary: var(--bs-secondary, #6c757d);
447
+ --hub-sys-color-success: var(--bs-success, #198754);
448
+ --hub-sys-color-danger: var(--bs-danger, #dc3545);
449
+ --hub-sys-color-warning: var(--bs-warning, #ffc107);
450
+ --hub-sys-color-info: var(--bs-info, #0dcaf0);
451
+ --hub-sys-color-dark: var(--bs-dark, #212529);
452
+ --hub-sys-surface-elevated: var(--bs-light, #f8f9fa);
453
+ --hub-sys-border-color-default: var(--bs-border-color, #dee2e6);
454
+ --hub-sys-surface-page: var(--bs-body-bg, #ffffff);
455
+ --hub-sys-text-primary: var(--bs-body-color, #212529);
456
+ }
457
+
458
+ /* ============================================================
459
+ LAYER 2 — sys (base alias)
460
+ Base is equivalent to light theme and works as explicit default.
461
+ ============================================================ */
462
+ [data-theme=base] {
463
+ --hub-sys-color-primary: var(--hub-ref-color-blue-500, #0d6efd);
464
+ --hub-sys-color-success: var(--hub-ref-color-green-500, #198754);
465
+ --hub-sys-color-danger: var(--hub-ref-color-red-500, #dc3545);
466
+ --hub-sys-color-warning: var(--hub-ref-color-yellow-500, #ffc107);
467
+ --hub-sys-color-info: var(--hub-ref-color-cyan-500, #0dcaf0);
468
+ --hub-sys-color-secondary: var(--hub-ref-color-gray-600, #6c757d);
469
+ --hub-sys-color-dark: var(--hub-ref-color-gray-900, #212529);
470
+ --hub-sys-surface-page: var(--hub-ref-surface-1, #ffffff);
471
+ --hub-sys-surface-elevated: var(--hub-ref-surface-2, #f8f9fa);
472
+ --hub-sys-text-primary: var(--hub-ref-color-gray-900, #212529);
473
+ --hub-sys-text-muted: var(--hub-ref-color-gray-600, #6c757d);
474
+ --hub-sys-border-color-default: var(--hub-ref-color-gray-300, #dee2e6);
475
+ --hub-sys-state-hover-bg: rgba(0, 0, 0, 0.075);
476
+ --hub-sys-state-active-bg: rgba(0, 0, 0, 0.1);
477
+ --hub-sys-state-striped-bg: rgba(0, 0, 0, 0.05);
478
+ }
479
+
480
+ /* ============================================================
481
+ LAYER 2 — sys (bootstrap-aligned)
482
+ Preserves classic Bootstrap palette and spacing feel.
483
+ ============================================================ */
484
+ [data-theme=bootstrap] {
485
+ --hub-sys-color-primary: var(--bs-primary, #0d6efd);
486
+ --hub-sys-color-success: var(--bs-success, #198754);
487
+ --hub-sys-color-danger: var(--bs-danger, #dc3545);
488
+ --hub-sys-color-warning: var(--bs-warning, #ffc107);
489
+ --hub-sys-color-info: var(--bs-info, #0dcaf0);
490
+ --hub-sys-color-secondary: var(--bs-secondary, #6c757d);
491
+ --hub-sys-color-dark: var(--bs-dark, #212529);
492
+ --hub-sys-surface-page: var(--bs-body-bg, #ffffff);
493
+ --hub-sys-surface-elevated: var(--bs-light, #f8f9fa);
494
+ --hub-sys-text-primary: var(--bs-body-color, #212529);
495
+ --hub-sys-text-muted: var(--bs-secondary-color, #6c757d);
496
+ --hub-sys-link-color: var(--bs-link-color, #0d6efd);
497
+ --hub-sys-link-hover-color: var(--bs-link-hover-color, #0a58ca);
498
+ --hub-sys-border-color-default: var(--bs-border-color, #dee2e6);
499
+ --hub-sys-shadow-sm: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
500
+ --hub-sys-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
501
+ --hub-sys-shadow-lg: var(--bs-box-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
502
+ --hub-sys-focus-ring-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
503
+ --hub-sys-state-hover-bg: rgba(0, 0, 0, 0.075);
504
+ --hub-sys-state-active-bg: rgba(0, 0, 0, 0.1);
505
+ --hub-sys-state-striped-bg: rgba(0, 0, 0, 0.05);
506
+ /* Expressive gradient — classic Bootstrap indigo→blue→cyan */
507
+ --hub-sys-gradient-1: #6610f2;
508
+ --hub-sys-gradient-2: #0d6efd;
509
+ --hub-sys-gradient-3: #087990;
510
+ }
511
+
512
+ /* ============================================================
513
+ LAYER 2 — sys (dark theme overrides)
514
+ Only redefine tokens that change between light and dark.
515
+ ============================================================ */
516
+ [data-theme=dark] {
517
+ /* ----------------------------------------------------------
518
+ Brand / action colors — dark variants
519
+ Light ink flips -emphasis toward white on dark surfaces.
520
+ ---------------------------------------------------------- */
521
+ --hub-sys-color-primary: var(--hub-ref-color-blue-300, #6ea8fe);
522
+ --hub-sys-color-success: var(--hub-ref-color-green-300, #75b798);
523
+ --hub-sys-color-danger: var(--hub-ref-color-red-300, #ea868f);
524
+ --hub-sys-color-warning: var(--hub-ref-color-yellow-300, #ffda6a);
525
+ --hub-sys-color-info: var(--hub-ref-color-cyan-300, #6edff6);
526
+ --hub-sys-color-ink: var(--hub-ref-color-gray-100, #f8f9fa);
527
+ /* ----------------------------------------------------------
528
+ Expressive gradient — brighter stops for dark surfaces
529
+ ---------------------------------------------------------- */
530
+ --hub-sys-gradient-1: #a78bfa;
531
+ --hub-sys-gradient-2: #f472b6;
532
+ --hub-sys-gradient-3: #fbbf24;
533
+ /* ----------------------------------------------------------
534
+ Surfaces
535
+ ---------------------------------------------------------- */
536
+ --hub-sys-surface-page: #121212;
537
+ --hub-sys-surface-elevated: #1e1e1e;
538
+ /* ----------------------------------------------------------
539
+ Text
540
+ ---------------------------------------------------------- */
541
+ --hub-sys-text-primary: var(--hub-ref-color-gray-100, #f8f9fa);
542
+ --hub-sys-text-muted: var(--hub-ref-color-gray-500, #adb5bd);
543
+ --hub-sys-link-color: var(--hub-ref-color-blue-300, #6ea8fe);
544
+ --hub-sys-link-hover-color: var(--hub-ref-color-blue-200, #9ec5fe);
545
+ /* ----------------------------------------------------------
546
+ Borders
547
+ ---------------------------------------------------------- */
548
+ --hub-sys-border-color-default: var(--hub-ref-color-gray-800, #343a40);
549
+ /* ----------------------------------------------------------
550
+ Shadows — stronger on dark backgrounds
551
+ ---------------------------------------------------------- */
552
+ --hub-sys-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
553
+ --hub-sys-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
554
+ --hub-sys-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.3);
555
+ --hub-sys-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);
556
+ /* ----------------------------------------------------------
557
+ Focus ring
558
+ ---------------------------------------------------------- */
559
+ --hub-sys-focus-ring-color: rgba(110, 168, 254, 0.35);
560
+ /* ----------------------------------------------------------
561
+ Interactive state overlays — lighter on dark
562
+ ---------------------------------------------------------- */
563
+ --hub-sys-state-hover-bg: rgba(255, 255, 255, 0.075);
564
+ --hub-sys-state-active-bg: rgba(255, 255, 255, 0.1);
565
+ --hub-sys-state-striped-bg: rgba(255, 255, 255, 0.05);
566
+ }
567
+
568
+ /* ============================================================
569
+ LAYER 2 — sys (sunset theme)
570
+ Warm, high-contrast palette for a branded editorial look.
571
+ ============================================================ */
572
+ [data-theme=sunset] {
573
+ --hub-sys-color-primary: #ea580c;
574
+ --hub-sys-color-success: #16a34a;
575
+ --hub-sys-color-danger: #dc2626;
576
+ --hub-sys-color-warning: #f59e0b;
577
+ --hub-sys-color-info: #0284c7;
578
+ --hub-sys-color-secondary: #9a3412;
579
+ --hub-sys-color-dark: #431407;
580
+ --hub-sys-surface-page: #fff7ed;
581
+ --hub-sys-surface-elevated: #ffedd5;
582
+ --hub-sys-text-primary: #7c2d12;
583
+ --hub-sys-text-muted: #9a3412;
584
+ --hub-sys-link-color: #c2410c;
585
+ --hub-sys-link-hover-color: #9a3412;
586
+ --hub-sys-border-color-default: #fdba74;
587
+ --hub-sys-shadow-sm: 0 0.125rem 0.25rem rgba(124, 45, 18, 0.16);
588
+ --hub-sys-shadow: 0 0.5rem 1rem rgba(124, 45, 18, 0.18);
589
+ --hub-sys-shadow-lg: 0 1rem 3rem rgba(124, 45, 18, 0.24);
590
+ --hub-sys-focus-ring-color: rgba(234, 88, 12, 0.22);
591
+ --hub-sys-state-hover-bg: rgba(251, 146, 60, 0.18);
592
+ --hub-sys-state-active-bg: rgba(251, 146, 60, 0.25);
593
+ --hub-sys-state-striped-bg: rgba(251, 146, 60, 0.12);
594
+ /* Expressive gradient — warm sunset orange→rose→amber */
595
+ --hub-sys-gradient-1: #ea580c;
596
+ --hub-sys-gradient-2: #e11d48;
597
+ --hub-sys-gradient-3: #b45309;
598
+ }
599
+
600
+ /* ============================================================
601
+ LAYER 2 — sys (forest theme)
602
+ Green palette oriented to dashboard/data contexts.
603
+ ============================================================ */
604
+ [data-theme=forest] {
605
+ --hub-sys-color-primary: #15803d;
606
+ --hub-sys-color-success: #22c55e;
607
+ --hub-sys-color-danger: #b91c1c;
608
+ --hub-sys-color-warning: #ca8a04;
609
+ --hub-sys-color-info: #0f766e;
610
+ --hub-sys-color-secondary: #3f6212;
611
+ --hub-sys-color-dark: #052e16;
612
+ --hub-sys-surface-page: #f0fdf4;
613
+ --hub-sys-surface-elevated: #dcfce7;
614
+ --hub-sys-text-primary: #14532d;
615
+ --hub-sys-text-muted: #3f6212;
616
+ --hub-sys-link-color: #166534;
617
+ --hub-sys-link-hover-color: #14532d;
618
+ --hub-sys-border-color-default: #86efac;
619
+ --hub-sys-shadow-sm: 0 0.125rem 0.25rem rgba(20, 83, 45, 0.16);
620
+ --hub-sys-shadow: 0 0.5rem 1rem rgba(20, 83, 45, 0.18);
621
+ --hub-sys-shadow-lg: 0 1rem 3rem rgba(20, 83, 45, 0.24);
622
+ --hub-sys-focus-ring-color: rgba(21, 128, 61, 0.22);
623
+ --hub-sys-state-hover-bg: rgba(22, 163, 74, 0.15);
624
+ --hub-sys-state-active-bg: rgba(22, 163, 74, 0.22);
625
+ --hub-sys-state-striped-bg: rgba(22, 163, 74, 0.1);
626
+ /* Expressive gradient — forest green→lime→teal */
627
+ --hub-sys-gradient-1: #15803d;
628
+ --hub-sys-gradient-2: #4d7c0f;
629
+ --hub-sys-gradient-3: #0f766e;
630
+ }
631
+
632
+ /* ============================================================
633
+ LAYER 2 — sys (mono theme)
634
+ Minimal monochrome palette for neutral demos and screenshots.
635
+ ============================================================ */
636
+ [data-theme=mono] {
637
+ --hub-sys-color-primary: #1f2937;
638
+ --hub-sys-color-success: #374151;
639
+ --hub-sys-color-danger: #4b5563;
640
+ --hub-sys-color-warning: #6b7280;
641
+ --hub-sys-color-info: #4b5563;
642
+ --hub-sys-color-secondary: #4b5563;
643
+ --hub-sys-color-dark: #111827;
644
+ --hub-sys-surface-page: #f9fafb;
645
+ --hub-sys-surface-elevated: #f3f4f6;
646
+ --hub-sys-text-primary: #111827;
647
+ --hub-sys-text-muted: #4b5563;
648
+ --hub-sys-link-color: #1f2937;
649
+ --hub-sys-link-hover-color: #111827;
650
+ --hub-sys-border-color-default: #d1d5db;
651
+ --hub-sys-shadow-sm: 0 0.125rem 0.25rem rgba(17, 24, 39, 0.1);
652
+ --hub-sys-shadow: 0 0.5rem 1rem rgba(17, 24, 39, 0.12);
653
+ --hub-sys-shadow-lg: 0 1rem 3rem rgba(17, 24, 39, 0.16);
654
+ --hub-sys-focus-ring-color: rgba(31, 41, 55, 0.18);
655
+ --hub-sys-state-hover-bg: rgba(17, 24, 39, 0.08);
656
+ --hub-sys-state-active-bg: rgba(17, 24, 39, 0.14);
657
+ --hub-sys-state-striped-bg: rgba(17, 24, 39, 0.05);
658
+ /* Expressive gradient — monochrome ink ramp */
659
+ --hub-sys-gradient-1: #111827;
660
+ --hub-sys-gradient-2: #374151;
661
+ --hub-sys-gradient-3: #6b7280;
662
+ }
663
+
664
+ /* ============================================================
665
+ LAYER 2 — sys (terminal theme)
666
+ Green-phosphor CRT terminal aesthetic: monospace typography,
667
+ square corners, near-black surfaces and a glowing green palette.
668
+ The immersive layer (scanlines, glow, code blocks and overrides
669
+ for the documentation chrome) lives in styles/themes/terminal.scss.
670
+ Note: terminal is intentionally excluded from the Bootstrap bridge
671
+ block above, so its tokens and --bs-* overrides take full control.
672
+ ============================================================ */
673
+ [data-theme=terminal] {
674
+ /* ----------------------------------------------------------
675
+ Square everything — terminals have no rounded corners
676
+ ---------------------------------------------------------- */
677
+ --hub-ref-radius-none: 0;
678
+ --hub-ref-radius-sm: 0;
679
+ --hub-ref-radius-md: 0;
680
+ --hub-ref-radius-lg: 0;
681
+ --hub-ref-radius-pill: 0;
682
+ /* ----------------------------------------------------------
683
+ Monospace typography everywhere
684
+ ---------------------------------------------------------- */
685
+ --hub-ref-font-family-base: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
686
+ --hub-ref-font-family-display: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
687
+ /* ----------------------------------------------------------
688
+ Brand / action colors — phosphor green + amber/cyan/red
689
+ ---------------------------------------------------------- */
690
+ --hub-sys-color-primary: #4af07a;
691
+ --hub-sys-color-success: #4af07a;
692
+ --hub-sys-color-danger: #ff6b63;
693
+ --hub-sys-color-warning: #ffb454;
694
+ --hub-sys-color-info: #56e1e6;
695
+ --hub-sys-color-ink: #d8ffe4;
696
+ --hub-sys-color-secondary: #2f9d56;
697
+ --hub-sys-color-light: #0e150e;
698
+ --hub-sys-color-dark: #050805;
699
+ /* ----------------------------------------------------------
700
+ Surfaces — near-black green-tinted
701
+ ---------------------------------------------------------- */
702
+ --hub-sys-surface-page: #0a0e0a;
703
+ --hub-sys-surface-elevated: #0e150e;
704
+ /* ----------------------------------------------------------
705
+ Text — green phosphor, cyan links
706
+ ---------------------------------------------------------- */
707
+ --hub-sys-text-primary: #66f08f;
708
+ --hub-sys-text-muted: #3f9e63;
709
+ --hub-sys-link-color: #56e1e6;
710
+ --hub-sys-link-hover-color: #8dffb0;
711
+ /* ----------------------------------------------------------
712
+ Borders
713
+ ---------------------------------------------------------- */
714
+ --hub-sys-border-color-default: #205c39;
715
+ /* ----------------------------------------------------------
716
+ Shadows — green glow instead of drop shadow
717
+ ---------------------------------------------------------- */
718
+ --hub-sys-shadow-sm: 0 0 0.5rem rgba(74, 240, 122, 0.12);
719
+ --hub-sys-shadow: 0 0 1rem rgba(74, 240, 122, 0.16);
720
+ --hub-sys-shadow-lg: 0 0 2rem rgba(74, 240, 122, 0.22);
721
+ --hub-sys-shadow-inset: inset 0 0 0.5rem rgba(0, 0, 0, 0.6);
722
+ /* ----------------------------------------------------------
723
+ Focus ring
724
+ ---------------------------------------------------------- */
725
+ --hub-sys-focus-ring-color: rgba(74, 240, 122, 0.4);
726
+ /* ----------------------------------------------------------
727
+ Interactive state overlays
728
+ ---------------------------------------------------------- */
729
+ --hub-sys-state-hover-bg: rgba(74, 240, 122, 0.1);
730
+ --hub-sys-state-active-bg: rgba(74, 240, 122, 0.16);
731
+ --hub-sys-state-striped-bg: rgba(74, 240, 122, 0.05);
732
+ /* Expressive gradient — phosphor green→cyan→amber */
733
+ --hub-sys-gradient-1: #4af07a;
734
+ --hub-sys-gradient-2: #56e1e6;
735
+ --hub-sys-gradient-3: #ffb454;
736
+ }