@ngstarter-ui/components 1.0.45 → 1.0.47
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/README.md +212 -0
- package/ai/component-registry.json +11 -19
- package/fesm2022/ngstarter-ui-components-core.mjs +567 -5
- package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-paginator.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-paginator.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_tokens.scss +223 -303
- package/styles/themes/modern.scss +174 -181
- package/types/ngstarter-ui-components-core.d.ts +9 -3
- package/styles/themes/enterprise.scss +0 -82
package/styles/_tokens.scss
CHANGED
|
@@ -23,26 +23,27 @@
|
|
|
23
23
|
--ngs-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
|
|
24
24
|
--ngs-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.18);
|
|
25
25
|
|
|
26
|
-
--ngs-color-primary: #036fe3;
|
|
26
|
+
--ngs-color-primary-seed: #036fe3;
|
|
27
|
+
--ngs-color-primary: var(--ngs-color-primary-seed);
|
|
27
28
|
--ngs-color-on-primary: #ffffff;
|
|
28
|
-
--ngs-color-primary-container: #
|
|
29
|
-
--ngs-color-on-primary-container: #
|
|
30
|
-
--ngs-color-secondary: #
|
|
29
|
+
--ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 84%);
|
|
30
|
+
--ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 64%);
|
|
31
|
+
--ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #334155 70%);
|
|
31
32
|
--ngs-color-on-secondary: #ffffff;
|
|
32
|
-
--ngs-color-secondary-container: #
|
|
33
|
-
--ngs-color-on-secondary-container: #
|
|
34
|
-
--ngs-color-tertiary: #
|
|
33
|
+
--ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 88%);
|
|
34
|
+
--ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 68%);
|
|
35
|
+
--ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #db2777 45%);
|
|
35
36
|
--ngs-color-on-tertiary: #ffffff;
|
|
36
|
-
--ngs-color-tertiary-container: #
|
|
37
|
-
--ngs-color-on-tertiary-container: #
|
|
37
|
+
--ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 86%);
|
|
38
|
+
--ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 64%);
|
|
38
39
|
--ngs-color-danger: #ef4444;
|
|
39
40
|
--ngs-color-on-danger: #ffffff;
|
|
40
41
|
--ngs-color-danger-container: #fee2e2;
|
|
41
42
|
--ngs-color-on-danger-container: #7f1d1d;
|
|
42
|
-
--ngs-color-info: #
|
|
43
|
+
--ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 35%);
|
|
43
44
|
--ngs-color-on-info: #ffffff;
|
|
44
|
-
--ngs-color-info-container: #
|
|
45
|
-
--ngs-color-on-info-container: #
|
|
45
|
+
--ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
|
|
46
|
+
--ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 64%);
|
|
46
47
|
--ngs-color-success: #22c55e;
|
|
47
48
|
--ngs-color-on-success: #ffffff;
|
|
48
49
|
--ngs-color-success-container: #dcfce7;
|
|
@@ -52,35 +53,35 @@
|
|
|
52
53
|
--ngs-color-warning-container: #fef3c7;
|
|
53
54
|
--ngs-color-on-warning-container: #78350f;
|
|
54
55
|
|
|
55
|
-
--ngs-color-background: #ffffff;
|
|
56
|
+
--ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 99%);
|
|
56
57
|
--ngs-color-on-background: #0f172a;
|
|
57
|
-
--ngs-color-surface: #
|
|
58
|
+
--ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 98%);
|
|
58
59
|
--ngs-color-surface-bright: #ffffff;
|
|
59
60
|
--ngs-color-on-surface: #0f172a;
|
|
60
|
-
--ngs-color-on-surface-variant: #64748b;
|
|
61
|
-
--ngs-color-neutral-50: #f8fafc;
|
|
62
|
-
--ngs-color-neutral-100: #f1f5f9;
|
|
63
|
-
--ngs-color-neutral-200: #e2e8f0;
|
|
64
|
-
--ngs-color-neutral-300: #cbd5e1;
|
|
65
|
-
--ngs-color-neutral-400: #94a3b8;
|
|
66
|
-
--ngs-color-neutral-500: #64748b;
|
|
67
|
-
--ngs-color-neutral-600: #475569;
|
|
68
|
-
--ngs-color-neutral-650: #405064;
|
|
69
|
-
--ngs-color-neutral-700: #334155;
|
|
70
|
-
--ngs-color-neutral-800: #1e293b;
|
|
71
|
-
--ngs-color-neutral-900: #0f172a;
|
|
72
|
-
--ngs-color-neutral-950: #020617;
|
|
61
|
+
--ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #64748b 88%);
|
|
62
|
+
--ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #f8fafc 98%);
|
|
63
|
+
--ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #f1f5f9 96%);
|
|
64
|
+
--ngs-color-neutral-200: color-mix(in srgb, var(--ngs-color-primary-seed), #e2e8f0 94%);
|
|
65
|
+
--ngs-color-neutral-300: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 92%);
|
|
66
|
+
--ngs-color-neutral-400: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 90%);
|
|
67
|
+
--ngs-color-neutral-500: color-mix(in srgb, var(--ngs-color-primary-seed), #64748b 88%);
|
|
68
|
+
--ngs-color-neutral-600: color-mix(in srgb, var(--ngs-color-primary-seed), #475569 86%);
|
|
69
|
+
--ngs-color-neutral-650: color-mix(in srgb, var(--ngs-color-primary-seed), #405064 84%);
|
|
70
|
+
--ngs-color-neutral-700: color-mix(in srgb, var(--ngs-color-primary-seed), #334155 82%);
|
|
71
|
+
--ngs-color-neutral-800: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 80%);
|
|
72
|
+
--ngs-color-neutral-900: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 78%);
|
|
73
|
+
--ngs-color-neutral-950: color-mix(in srgb, var(--ngs-color-primary-seed), #020617 76%);
|
|
73
74
|
--ngs-color-neutral: var(--ngs-color-neutral-500);
|
|
74
75
|
--ngs-color-black: #000000;
|
|
75
76
|
--ngs-color-white: #ffffff;
|
|
76
77
|
--ngs-color-surface-container-lowest: #ffffff;
|
|
77
|
-
--ngs-color-surface-container-low: #
|
|
78
|
-
--ngs-color-surface-container: #
|
|
79
|
-
--ngs-color-surface-container-high: #
|
|
80
|
-
--ngs-color-surface-container-highest: #
|
|
81
|
-
--ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary), #
|
|
82
|
-
--ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary), #
|
|
83
|
-
--ngs-color-border: var(--ngs-color-
|
|
78
|
+
--ngs-color-surface-container-low: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 97%);
|
|
79
|
+
--ngs-color-surface-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 94%);
|
|
80
|
+
--ngs-color-surface-container-high: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 88%);
|
|
81
|
+
--ngs-color-surface-container-highest: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 80%);
|
|
82
|
+
--ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary-seed), #64748b 82%);
|
|
83
|
+
--ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 90%);
|
|
84
|
+
--ngs-color-border: color-mix(in srgb, var(--ngs-color-primary-seed), #e2e8f0 92%);
|
|
84
85
|
--ngs-color-faint: var(--ngs-color-surface-container);
|
|
85
86
|
--ngs-color-subtle: var(--ngs-color-surface-container-high);
|
|
86
87
|
--ngs-color-muted: var(--ngs-color-surface-container-highest);
|
|
@@ -291,18 +292,18 @@
|
|
|
291
292
|
@media (prefers-color-scheme: dark) {
|
|
292
293
|
:root:not([data-ngs-color-scheme='light']) {
|
|
293
294
|
color-scheme: dark;
|
|
294
|
-
--ngs-color-primary: #
|
|
295
|
+
--ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 32%);
|
|
295
296
|
--ngs-color-on-primary: #ffffff;
|
|
296
|
-
--ngs-color-primary-container: #
|
|
297
|
-
--ngs-color-on-primary-container: #
|
|
298
|
-
--ngs-color-secondary: #
|
|
297
|
+
--ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
|
|
298
|
+
--ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 84%);
|
|
299
|
+
--ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 64%);
|
|
299
300
|
--ngs-color-on-secondary: #0f172a;
|
|
300
|
-
--ngs-color-secondary-container: #
|
|
301
|
-
--ngs-color-on-secondary-container: #
|
|
302
|
-
--ngs-color-tertiary: #
|
|
301
|
+
--ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 66%);
|
|
302
|
+
--ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 82%);
|
|
303
|
+
--ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 48%);
|
|
303
304
|
--ngs-color-on-tertiary: #0c4a6e;
|
|
304
|
-
--ngs-color-tertiary-container: #
|
|
305
|
-
--ngs-color-on-tertiary-container: #
|
|
305
|
+
--ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
|
|
306
|
+
--ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 84%);
|
|
306
307
|
--ngs-color-danger: #f87171;
|
|
307
308
|
--ngs-color-on-danger: #450a0a;
|
|
308
309
|
--ngs-color-danger-container: #7f1d1d;
|
|
@@ -311,10 +312,10 @@
|
|
|
311
312
|
--ngs-color-danger-container-low: color-mix(in srgb, var(--ngs-color-danger), #000000 88%);
|
|
312
313
|
--ngs-color-danger-container-high: color-mix(in srgb, var(--ngs-color-danger), #000000 80%);
|
|
313
314
|
--ngs-color-danger-container-highest: color-mix(in srgb, var(--ngs-color-danger), #000000 76%);
|
|
314
|
-
--ngs-color-info: #
|
|
315
|
+
--ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 52%);
|
|
315
316
|
--ngs-color-on-info: #1e3a8a;
|
|
316
|
-
--ngs-color-info-container: #
|
|
317
|
-
--ngs-color-on-info-container: #
|
|
317
|
+
--ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
|
|
318
|
+
--ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 84%);
|
|
318
319
|
--ngs-color-success: #4ade80;
|
|
319
320
|
--ngs-color-on-success: #064e3b;
|
|
320
321
|
--ngs-color-success-container: #064e3b;
|
|
@@ -323,31 +324,32 @@
|
|
|
323
324
|
--ngs-color-on-warning: #78350f;
|
|
324
325
|
--ngs-color-warning-container: #78350f;
|
|
325
326
|
--ngs-color-on-warning-container: #fef3c7;
|
|
326
|
-
--ngs-color-background: #0f172a;
|
|
327
|
+
--ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 96%);
|
|
327
328
|
--ngs-color-on-background: #f8fafc;
|
|
328
|
-
--ngs-color-surface: #0f172a;
|
|
329
|
-
--ngs-color-surface-bright: #1e293b;
|
|
329
|
+
--ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
|
|
330
|
+
--ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 90%);
|
|
330
331
|
--ngs-color-on-surface: #f8fafc;
|
|
331
|
-
--ngs-color-on-surface-variant: #94a3b8;
|
|
332
|
-
--ngs-color-neutral-50: #020617;
|
|
333
|
-
--ngs-color-neutral-100: #0f172a;
|
|
334
|
-
--ngs-color-neutral-200: #1e293b;
|
|
335
|
-
--ngs-color-neutral-300: #334155;
|
|
336
|
-
--ngs-color-neutral-400: #475569;
|
|
337
|
-
--ngs-color-neutral-500: #64748b;
|
|
338
|
-
--ngs-color-neutral-600: #94a3b8;
|
|
339
|
-
--ngs-color-neutral-650: #a2afc0;
|
|
340
|
-
--ngs-color-neutral-700: #cbd5e1;
|
|
341
|
-
--ngs-color-neutral-800: #e2e8f0;
|
|
342
|
-
--ngs-color-neutral-900: #f1f5f9;
|
|
343
|
-
--ngs-color-neutral-950: #f8fafc;
|
|
344
|
-
--ngs-color-surface-container-lowest: #020617;
|
|
345
|
-
--ngs-color-surface-container-low: #0f172a;
|
|
346
|
-
--ngs-color-surface-container: #1e293b;
|
|
347
|
-
--ngs-color-surface-container-high: #334155;
|
|
348
|
-
--ngs-color-surface-container-highest: #475569;
|
|
349
|
-
--ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary), #
|
|
350
|
-
--ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary), #
|
|
332
|
+
--ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 86%);
|
|
333
|
+
--ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #020617 96%);
|
|
334
|
+
--ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
|
|
335
|
+
--ngs-color-neutral-200: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 92%);
|
|
336
|
+
--ngs-color-neutral-300: color-mix(in srgb, var(--ngs-color-primary-seed), #334155 90%);
|
|
337
|
+
--ngs-color-neutral-400: color-mix(in srgb, var(--ngs-color-primary-seed), #475569 88%);
|
|
338
|
+
--ngs-color-neutral-500: color-mix(in srgb, var(--ngs-color-primary-seed), #64748b 86%);
|
|
339
|
+
--ngs-color-neutral-600: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 84%);
|
|
340
|
+
--ngs-color-neutral-650: color-mix(in srgb, var(--ngs-color-primary-seed), #a2afc0 82%);
|
|
341
|
+
--ngs-color-neutral-700: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 80%);
|
|
342
|
+
--ngs-color-neutral-800: color-mix(in srgb, var(--ngs-color-primary-seed), #e2e8f0 78%);
|
|
343
|
+
--ngs-color-neutral-900: color-mix(in srgb, var(--ngs-color-primary-seed), #f1f5f9 76%);
|
|
344
|
+
--ngs-color-neutral-950: color-mix(in srgb, var(--ngs-color-primary-seed), #f8fafc 74%);
|
|
345
|
+
--ngs-color-surface-container-lowest: color-mix(in srgb, var(--ngs-color-primary-seed), #020617 96%);
|
|
346
|
+
--ngs-color-surface-container-low: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
|
|
347
|
+
--ngs-color-surface-container: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 92%);
|
|
348
|
+
--ngs-color-surface-container-high: color-mix(in srgb, var(--ngs-color-primary-seed), #334155 90%);
|
|
349
|
+
--ngs-color-surface-container-highest: color-mix(in srgb, var(--ngs-color-primary-seed), #475569 88%);
|
|
350
|
+
--ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 82%);
|
|
351
|
+
--ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #334155 90%);
|
|
352
|
+
--ngs-color-border: color-mix(in srgb, var(--ngs-color-primary-seed), #26324a 92%);
|
|
351
353
|
--ngs-color-faint: var(--ngs-color-surface-container-low);
|
|
352
354
|
--ngs-color-subtle: var(--ngs-color-surface-container);
|
|
353
355
|
--ngs-color-muted: var(--ngs-color-surface-container-high);
|
|
@@ -359,18 +361,18 @@
|
|
|
359
361
|
.dark,
|
|
360
362
|
[data-ngs-color-scheme='dark'] {
|
|
361
363
|
color-scheme: dark;
|
|
362
|
-
--ngs-color-primary: #
|
|
364
|
+
--ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 32%);
|
|
363
365
|
--ngs-color-on-primary: #ffffff;
|
|
364
|
-
--ngs-color-primary-container: #
|
|
365
|
-
--ngs-color-on-primary-container: #
|
|
366
|
-
--ngs-color-secondary: #
|
|
366
|
+
--ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
|
|
367
|
+
--ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 84%);
|
|
368
|
+
--ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 64%);
|
|
367
369
|
--ngs-color-on-secondary: #0f172a;
|
|
368
|
-
--ngs-color-secondary-container: #
|
|
369
|
-
--ngs-color-on-secondary-container: #
|
|
370
|
-
--ngs-color-tertiary: #
|
|
370
|
+
--ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 66%);
|
|
371
|
+
--ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 82%);
|
|
372
|
+
--ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 48%);
|
|
371
373
|
--ngs-color-on-tertiary: #0c4a6e;
|
|
372
|
-
--ngs-color-tertiary-container: #
|
|
373
|
-
--ngs-color-on-tertiary-container: #
|
|
374
|
+
--ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
|
|
375
|
+
--ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 84%);
|
|
374
376
|
--ngs-color-danger: #f87171;
|
|
375
377
|
--ngs-color-on-danger: #450a0a;
|
|
376
378
|
--ngs-color-danger-container: #7f1d1d;
|
|
@@ -379,10 +381,10 @@
|
|
|
379
381
|
--ngs-color-danger-container-low: color-mix(in srgb, var(--ngs-color-danger), #000000 88%);
|
|
380
382
|
--ngs-color-danger-container-high: color-mix(in srgb, var(--ngs-color-danger), #000000 80%);
|
|
381
383
|
--ngs-color-danger-container-highest: color-mix(in srgb, var(--ngs-color-danger), #000000 76%);
|
|
382
|
-
--ngs-color-info: #
|
|
384
|
+
--ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 52%);
|
|
383
385
|
--ngs-color-on-info: #1e3a8a;
|
|
384
|
-
--ngs-color-info-container: #
|
|
385
|
-
--ngs-color-on-info-container: #
|
|
386
|
+
--ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
|
|
387
|
+
--ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 84%);
|
|
386
388
|
--ngs-color-success: #4ade80;
|
|
387
389
|
--ngs-color-on-success: #064e3b;
|
|
388
390
|
--ngs-color-success-container: #064e3b;
|
|
@@ -391,31 +393,32 @@
|
|
|
391
393
|
--ngs-color-on-warning: #78350f;
|
|
392
394
|
--ngs-color-warning-container: #78350f;
|
|
393
395
|
--ngs-color-on-warning-container: #fef3c7;
|
|
394
|
-
--ngs-color-background: #0f172a;
|
|
396
|
+
--ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 96%);
|
|
395
397
|
--ngs-color-on-background: #f8fafc;
|
|
396
|
-
--ngs-color-surface: #0f172a;
|
|
397
|
-
--ngs-color-surface-bright: #1e293b;
|
|
398
|
+
--ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
|
|
399
|
+
--ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 90%);
|
|
398
400
|
--ngs-color-on-surface: #f8fafc;
|
|
399
|
-
--ngs-color-on-surface-variant: #94a3b8;
|
|
400
|
-
--ngs-color-neutral-50: #020617;
|
|
401
|
-
--ngs-color-neutral-100: #0f172a;
|
|
402
|
-
--ngs-color-neutral-200: #1e293b;
|
|
403
|
-
--ngs-color-neutral-300: #334155;
|
|
404
|
-
--ngs-color-neutral-400: #475569;
|
|
405
|
-
--ngs-color-neutral-500: #64748b;
|
|
406
|
-
--ngs-color-neutral-600: #94a3b8;
|
|
407
|
-
--ngs-color-neutral-650: #a2afc0;
|
|
408
|
-
--ngs-color-neutral-700: #cbd5e1;
|
|
409
|
-
--ngs-color-neutral-800: #e2e8f0;
|
|
410
|
-
--ngs-color-neutral-900: #f1f5f9;
|
|
411
|
-
--ngs-color-neutral-950: #f8fafc;
|
|
412
|
-
--ngs-color-surface-container-lowest: #020617;
|
|
413
|
-
--ngs-color-surface-container-low: #0f172a;
|
|
414
|
-
--ngs-color-surface-container: #1e293b;
|
|
415
|
-
--ngs-color-surface-container-high: #334155;
|
|
416
|
-
--ngs-color-surface-container-highest: #475569;
|
|
417
|
-
--ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary), #
|
|
418
|
-
--ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary), #
|
|
401
|
+
--ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 86%);
|
|
402
|
+
--ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #020617 96%);
|
|
403
|
+
--ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
|
|
404
|
+
--ngs-color-neutral-200: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 92%);
|
|
405
|
+
--ngs-color-neutral-300: color-mix(in srgb, var(--ngs-color-primary-seed), #334155 90%);
|
|
406
|
+
--ngs-color-neutral-400: color-mix(in srgb, var(--ngs-color-primary-seed), #475569 88%);
|
|
407
|
+
--ngs-color-neutral-500: color-mix(in srgb, var(--ngs-color-primary-seed), #64748b 86%);
|
|
408
|
+
--ngs-color-neutral-600: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 84%);
|
|
409
|
+
--ngs-color-neutral-650: color-mix(in srgb, var(--ngs-color-primary-seed), #a2afc0 82%);
|
|
410
|
+
--ngs-color-neutral-700: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 80%);
|
|
411
|
+
--ngs-color-neutral-800: color-mix(in srgb, var(--ngs-color-primary-seed), #e2e8f0 78%);
|
|
412
|
+
--ngs-color-neutral-900: color-mix(in srgb, var(--ngs-color-primary-seed), #f1f5f9 76%);
|
|
413
|
+
--ngs-color-neutral-950: color-mix(in srgb, var(--ngs-color-primary-seed), #f8fafc 74%);
|
|
414
|
+
--ngs-color-surface-container-lowest: color-mix(in srgb, var(--ngs-color-primary-seed), #020617 96%);
|
|
415
|
+
--ngs-color-surface-container-low: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
|
|
416
|
+
--ngs-color-surface-container: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 92%);
|
|
417
|
+
--ngs-color-surface-container-high: color-mix(in srgb, var(--ngs-color-primary-seed), #334155 90%);
|
|
418
|
+
--ngs-color-surface-container-highest: color-mix(in srgb, var(--ngs-color-primary-seed), #475569 88%);
|
|
419
|
+
--ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 82%);
|
|
420
|
+
--ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #334155 90%);
|
|
421
|
+
--ngs-color-border: color-mix(in srgb, var(--ngs-color-primary-seed), #26324a 92%);
|
|
419
422
|
--ngs-color-faint: var(--ngs-color-surface-container-low);
|
|
420
423
|
--ngs-color-subtle: var(--ngs-color-surface-container);
|
|
421
424
|
--ngs-color-muted: var(--ngs-color-surface-container-high);
|
|
@@ -423,81 +426,6 @@
|
|
|
423
426
|
--ngs-color-strong: color-mix(in srgb, var(--ngs-color-primary), #ffffff 20%);
|
|
424
427
|
}
|
|
425
428
|
|
|
426
|
-
[data-ngs-theme='enterprise']:not([data-ngs-color-scheme='dark']):not(.dark) {
|
|
427
|
-
color-scheme: light;
|
|
428
|
-
|
|
429
|
-
--ngs-font-family-base: Inter, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
430
|
-
--ngs-color-primary: #036fe3;
|
|
431
|
-
--ngs-color-on-primary: #ffffff;
|
|
432
|
-
--ngs-color-primary-container: #d6eaff;
|
|
433
|
-
--ngs-color-on-primary-container: #001a36;
|
|
434
|
-
--ngs-color-secondary: #21805a;
|
|
435
|
-
--ngs-color-on-secondary: #ffffff;
|
|
436
|
-
--ngs-color-secondary-container: #e8f6ef;
|
|
437
|
-
--ngs-color-on-secondary-container: #0d3f2b;
|
|
438
|
-
--ngs-color-background: #f0eff4;
|
|
439
|
-
--ngs-color-on-background: #1d1e2a;
|
|
440
|
-
--ngs-color-surface: #ffffff;
|
|
441
|
-
--ngs-color-on-surface: #20212d;
|
|
442
|
-
--ngs-color-on-surface-variant: #747684;
|
|
443
|
-
--ngs-color-surface-container-lowest: #ffffff;
|
|
444
|
-
--ngs-color-surface-container-low: #fafafd;
|
|
445
|
-
--ngs-color-surface-container: #f5f4f8;
|
|
446
|
-
--ngs-color-surface-container-high: #eeeef5;
|
|
447
|
-
--ngs-color-surface-container-highest: #e7e6ef;
|
|
448
|
-
--ngs-color-border: rgba(35, 36, 49, 0.1);
|
|
449
|
-
--ngs-color-outline: rgba(35, 36, 49, 0.18);
|
|
450
|
-
--ngs-color-outline-variant: rgba(35, 36, 49, 0.1);
|
|
451
|
-
--ngs-color-danger: #c93c3c;
|
|
452
|
-
|
|
453
|
-
--ngs-button-height: 2.625rem;
|
|
454
|
-
--ngs-button-padding-x: 0.875rem;
|
|
455
|
-
--ngs-button-font-size: 0.875rem;
|
|
456
|
-
--ngs-button-font-weight: 650;
|
|
457
|
-
--ngs-button-radius: 0.5rem;
|
|
458
|
-
--ngs-button-outlined-border: var(--corporate-border);
|
|
459
|
-
--ngs-button-outlined-color: var(--corporate-text);
|
|
460
|
-
--ngs-button-tonal-bg: #f4f2fb;
|
|
461
|
-
--ngs-button-tonal-color: var(--corporate-text);
|
|
462
|
-
|
|
463
|
-
--ngs-nav-badge-size: 1.35rem;
|
|
464
|
-
--ngs-nav-badge-padding: 0 0.4rem;
|
|
465
|
-
--ngs-nav-items-gap: 0.28rem;
|
|
466
|
-
--ngs-nav-item-height: 2.35rem;
|
|
467
|
-
--ngs-nav-item-padding: 0 0.625rem;
|
|
468
|
-
--ngs-nav-item-gap: 0.625rem;
|
|
469
|
-
--ngs-nav-item-radius: 0.5rem;
|
|
470
|
-
--ngs-nav-item-font-size: 0.94rem;
|
|
471
|
-
--ngs-nav-item-font-weight: 400;
|
|
472
|
-
--ngs-nav-item-color: #59677e;
|
|
473
|
-
--ngs-nav-item-hover-color: #20212d;
|
|
474
|
-
--ngs-nav-item-active-color: #036fe3;
|
|
475
|
-
--ngs-nav-item-hover-bg: #ffffff;
|
|
476
|
-
--ngs-nav-item-active-bg: #ffffff;
|
|
477
|
-
--ngs-nav-item-icon-width: 1.25rem;
|
|
478
|
-
--ngs-nav-item-icon-color: #6d7d97;
|
|
479
|
-
--ngs-nav-item-hover-icon-color: #59677e;
|
|
480
|
-
--ngs-nav-item-active-icon-color: #036fe3;
|
|
481
|
-
|
|
482
|
-
--corporate-stage-bg: #ffffff;
|
|
483
|
-
--corporate-shell-bg: #ffffff;
|
|
484
|
-
--corporate-sidebar-bg: #f5f5f7;
|
|
485
|
-
--corporate-panel-bg: #ffffff;
|
|
486
|
-
--corporate-input-bg: #e8e6ed;
|
|
487
|
-
--corporate-muted: #858793;
|
|
488
|
-
--corporate-soft: #f6f5f9;
|
|
489
|
-
--corporate-border: rgba(34, 35, 48, 0.085);
|
|
490
|
-
--corporate-border-strong: rgba(34, 35, 48, 0.14);
|
|
491
|
-
--corporate-text: #20212d;
|
|
492
|
-
--corporate-primary: #036fe3;
|
|
493
|
-
--corporate-primary-soft: #d6eaff;
|
|
494
|
-
--corporate-green: #25a765;
|
|
495
|
-
--corporate-blue: #2d87f0;
|
|
496
|
-
--corporate-orange: #ec6d28;
|
|
497
|
-
--corporate-gold: #f1bd28;
|
|
498
|
-
--corporate-shadow: 0 24px 65px rgba(59, 56, 75, 0.18);
|
|
499
|
-
}
|
|
500
|
-
|
|
501
429
|
[data-ngs-theme='modern']:not([data-ngs-color-scheme='dark']):not(.dark) {
|
|
502
430
|
--ngs-font-family-base: "Inter", "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
503
431
|
--ngs-radius-xs: 0.5rem;
|
|
@@ -509,26 +437,27 @@
|
|
|
509
437
|
--ngs-shadow-md: 0 16px 42px rgba(39, 52, 105, 0.14);
|
|
510
438
|
--ngs-shadow-lg: 0 28px 70px rgba(39, 52, 105, 0.20);
|
|
511
439
|
|
|
512
|
-
--ngs-color-primary: #4f46e5;
|
|
440
|
+
--ngs-color-primary-seed: #4f46e5;
|
|
441
|
+
--ngs-color-primary: var(--ngs-color-primary-seed);
|
|
513
442
|
--ngs-color-on-primary: #ffffff;
|
|
514
|
-
--ngs-color-primary-container: #
|
|
515
|
-
--ngs-color-on-primary-container: #
|
|
516
|
-
--ngs-color-secondary: #0f766e;
|
|
443
|
+
--ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
|
|
444
|
+
--ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 62%);
|
|
445
|
+
--ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #0f766e 58%);
|
|
517
446
|
--ngs-color-on-secondary: #ffffff;
|
|
518
|
-
--ngs-color-secondary-container: #
|
|
519
|
-
--ngs-color-on-secondary-container: #
|
|
520
|
-
--ngs-color-tertiary: #db2777;
|
|
447
|
+
--ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 84%);
|
|
448
|
+
--ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 68%);
|
|
449
|
+
--ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #db2777 50%);
|
|
521
450
|
--ngs-color-on-tertiary: #ffffff;
|
|
522
|
-
--ngs-color-tertiary-container: #
|
|
523
|
-
--ngs-color-on-tertiary-container: #
|
|
451
|
+
--ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 86%);
|
|
452
|
+
--ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 62%);
|
|
524
453
|
--ngs-color-danger: #e11d48;
|
|
525
454
|
--ngs-color-on-danger: #ffffff;
|
|
526
455
|
--ngs-color-danger-container: #ffe4e6;
|
|
527
456
|
--ngs-color-on-danger-container: #9f1239;
|
|
528
|
-
--ngs-color-info: #2563eb;
|
|
457
|
+
--ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 40%);
|
|
529
458
|
--ngs-color-on-info: #ffffff;
|
|
530
|
-
--ngs-color-info-container: #
|
|
531
|
-
--ngs-color-on-info-container: #
|
|
459
|
+
--ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
|
|
460
|
+
--ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 62%);
|
|
532
461
|
--ngs-color-success: #059669;
|
|
533
462
|
--ngs-color-on-success: #ffffff;
|
|
534
463
|
--ngs-color-success-container: #d1fae5;
|
|
@@ -537,42 +466,42 @@
|
|
|
537
466
|
--ngs-color-on-warning: #ffffff;
|
|
538
467
|
--ngs-color-warning-container: #fef3c7;
|
|
539
468
|
--ngs-color-on-warning-container: #92400e;
|
|
540
|
-
--ngs-color-background: #f7f8ff;
|
|
469
|
+
--ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #f7f8ff 98%);
|
|
541
470
|
--ngs-color-on-background: #172033;
|
|
542
|
-
--ngs-color-surface: #f9fbff;
|
|
471
|
+
--ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #f9fbff 98%);
|
|
543
472
|
--ngs-color-surface-bright: #ffffff;
|
|
544
473
|
--ngs-color-on-surface: #172033;
|
|
545
|
-
--ngs-color-on-surface-variant: #667085;
|
|
546
|
-
--ngs-color-neutral-50: #fafbff;
|
|
547
|
-
--ngs-color-neutral-100: #f3f5fb;
|
|
548
|
-
--ngs-color-neutral-200: #e8ecf6;
|
|
549
|
-
--ngs-color-neutral-300: #d7deee;
|
|
550
|
-
--ngs-color-neutral-400: #a9b4cc;
|
|
551
|
-
--ngs-color-neutral-500: #74809a;
|
|
552
|
-
--ngs-color-neutral-600: #566176;
|
|
553
|
-
--ngs-color-neutral-650: #495466;
|
|
554
|
-
--ngs-color-neutral-700: #384254;
|
|
555
|
-
--ngs-color-neutral-800: #20283a;
|
|
556
|
-
--ngs-color-neutral-900: #111827;
|
|
557
|
-
--ngs-color-neutral-950: #070b15;
|
|
474
|
+
--ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #667085 88%);
|
|
475
|
+
--ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #fafbff 98%);
|
|
476
|
+
--ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #f3f5fb 96%);
|
|
477
|
+
--ngs-color-neutral-200: color-mix(in srgb, var(--ngs-color-primary-seed), #e8ecf6 94%);
|
|
478
|
+
--ngs-color-neutral-300: color-mix(in srgb, var(--ngs-color-primary-seed), #d7deee 92%);
|
|
479
|
+
--ngs-color-neutral-400: color-mix(in srgb, var(--ngs-color-primary-seed), #a9b4cc 90%);
|
|
480
|
+
--ngs-color-neutral-500: color-mix(in srgb, var(--ngs-color-primary-seed), #74809a 88%);
|
|
481
|
+
--ngs-color-neutral-600: color-mix(in srgb, var(--ngs-color-primary-seed), #566176 86%);
|
|
482
|
+
--ngs-color-neutral-650: color-mix(in srgb, var(--ngs-color-primary-seed), #495466 84%);
|
|
483
|
+
--ngs-color-neutral-700: color-mix(in srgb, var(--ngs-color-primary-seed), #384254 82%);
|
|
484
|
+
--ngs-color-neutral-800: color-mix(in srgb, var(--ngs-color-primary-seed), #20283a 80%);
|
|
485
|
+
--ngs-color-neutral-900: color-mix(in srgb, var(--ngs-color-primary-seed), #111827 78%);
|
|
486
|
+
--ngs-color-neutral-950: color-mix(in srgb, var(--ngs-color-primary-seed), #070b15 76%);
|
|
558
487
|
--ngs-color-surface-container-lowest: #ffffff;
|
|
559
|
-
--ngs-color-surface-container-low:
|
|
560
|
-
--ngs-color-surface-container:
|
|
561
|
-
--ngs-color-surface-container-high:
|
|
562
|
-
--ngs-color-surface-container-highest:
|
|
563
|
-
--ngs-color-outline: #8c96b3;
|
|
564
|
-
--ngs-color-outline-variant: #d7deee;
|
|
565
|
-
--ngs-color-border: #e1e7f4;
|
|
566
|
-
--ngs-color-faint:
|
|
567
|
-
--ngs-color-subtle:
|
|
568
|
-
--ngs-color-muted:
|
|
569
|
-
--ngs-color-emphasis:
|
|
570
|
-
--ngs-color-strong:
|
|
488
|
+
--ngs-color-surface-container-low: var(--ngs-color-neutral-50);
|
|
489
|
+
--ngs-color-surface-container: var(--ngs-color-neutral-100);
|
|
490
|
+
--ngs-color-surface-container-high: var(--ngs-color-neutral-200);
|
|
491
|
+
--ngs-color-surface-container-highest: var(--ngs-color-neutral-300);
|
|
492
|
+
--ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary-seed), #8c96b3 82%);
|
|
493
|
+
--ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #d7deee 90%);
|
|
494
|
+
--ngs-color-border: color-mix(in srgb, var(--ngs-color-primary-seed), #e1e7f4 92%);
|
|
495
|
+
--ngs-color-faint: var(--ngs-color-surface-container);
|
|
496
|
+
--ngs-color-subtle: var(--ngs-color-surface-container-high);
|
|
497
|
+
--ngs-color-muted: var(--ngs-color-surface-container-highest);
|
|
498
|
+
--ngs-color-emphasis: var(--ngs-color-neutral-400);
|
|
499
|
+
--ngs-color-strong: var(--ngs-color-neutral-600);
|
|
571
500
|
|
|
572
|
-
--ngs-state-hover-bg: linear-gradient(135deg,
|
|
573
|
-
--ngs-state-active-bg: linear-gradient(135deg,
|
|
574
|
-
--ngs-state-selected-bg: linear-gradient(135deg,
|
|
575
|
-
--ngs-state-selected-color:
|
|
501
|
+
--ngs-state-hover-bg: linear-gradient(135deg, color-mix(in srgb, var(--ngs-color-primary), transparent 92%), color-mix(in srgb, var(--ngs-color-secondary), transparent 92%));
|
|
502
|
+
--ngs-state-active-bg: linear-gradient(135deg, color-mix(in srgb, var(--ngs-color-primary), transparent 87%), color-mix(in srgb, var(--ngs-color-secondary), transparent 88%));
|
|
503
|
+
--ngs-state-selected-bg: linear-gradient(135deg, var(--ngs-color-primary-container), var(--ngs-color-secondary-container));
|
|
504
|
+
--ngs-state-selected-color: var(--ngs-color-primary);
|
|
576
505
|
--ngs-state-focus-ring: var(--ngs-field-border-focus-color);
|
|
577
506
|
--ngs-state-disabled-bg: #edf1f8;
|
|
578
507
|
--ngs-state-disabled-color: #9aa6c0;
|
|
@@ -581,29 +510,26 @@
|
|
|
581
510
|
--ngs-control-height-sm: calc(2.25rem + var(--ngs-density-scale) * 1px);
|
|
582
511
|
--ngs-control-height-md: calc(3rem + var(--ngs-density-scale) * 1px);
|
|
583
512
|
--ngs-control-height-lg: calc(3.5rem + var(--ngs-density-scale) * 1px);
|
|
584
|
-
--ngs-control-padding-x: --spacing(5);
|
|
585
513
|
--ngs-control-gap: --spacing(2.5);
|
|
586
514
|
--ngs-control-radius: var(--ngs-radius-xl);
|
|
587
515
|
--ngs-icon-size: --spacing(6);
|
|
588
516
|
--ngs-button-font-size: 0.9375rem;
|
|
589
|
-
--ngs-button-
|
|
590
|
-
--ngs-button-tonal-
|
|
591
|
-
--ngs-button-
|
|
592
|
-
--ngs-button-outlined-border: #c7d2fe;
|
|
517
|
+
--ngs-button-tonal-bg: linear-gradient(135deg, var(--ngs-color-primary-container), var(--ngs-color-secondary-container));
|
|
518
|
+
--ngs-button-tonal-color: var(--ngs-color-on-primary-container);
|
|
519
|
+
--ngs-button-outlined-border: var(--ngs-color-outline-variant);
|
|
593
520
|
--ngs-field-bg: rgba(255, 255, 255, 0.92);
|
|
594
521
|
--ngs-field-disabled-bg: #edf1f8;
|
|
595
|
-
--ngs-field-border-color:
|
|
596
|
-
--ngs-field-border-focus-color:
|
|
522
|
+
--ngs-field-border-color: var(--ngs-color-outline-variant);
|
|
523
|
+
--ngs-field-border-focus-color: var(--ngs-color-primary);
|
|
597
524
|
--ngs-field-radius: var(--ngs-radius-lg);
|
|
598
525
|
--ngs-field-font-size: 0.9375rem;
|
|
599
526
|
--ngs-field-container-height: 3.125rem;
|
|
600
527
|
--ngs-field-infix-height: 3.125rem;
|
|
601
|
-
--ngs-field-
|
|
602
|
-
--ngs-field-filled-bg: #f3f5ff;
|
|
528
|
+
--ngs-field-filled-bg: var(--ngs-color-surface-container);
|
|
603
529
|
--ngs-dropdown-bg: rgba(255, 255, 255, 0.98);
|
|
604
530
|
--ngs-dropdown-shadow: 0 20px 52px rgba(39, 52, 105, 0.18);
|
|
605
531
|
--ngs-dropdown-radius: var(--ngs-radius-xl);
|
|
606
|
-
--ngs-dropdown-border: 1px solid
|
|
532
|
+
--ngs-dropdown-border: 1px solid var(--ngs-color-border);
|
|
607
533
|
--ngs-dropdown-height: 2.625rem;
|
|
608
534
|
--ngs-dialog-radius: 1.75rem;
|
|
609
535
|
--ngs-dialog-shadow: 0 34px 86px rgba(39, 52, 105, 0.24);
|
|
@@ -611,62 +537,56 @@
|
|
|
611
537
|
--ngs-overlay-backdrop-blur: 8px;
|
|
612
538
|
|
|
613
539
|
--ngs-table-bg: #ffffff;
|
|
614
|
-
--ngs-table-header-bg: linear-gradient(135deg,
|
|
540
|
+
--ngs-table-header-bg: linear-gradient(135deg, var(--ngs-color-surface-container), var(--ngs-color-secondary-container));
|
|
615
541
|
--ngs-table-row-bg: #ffffff;
|
|
616
|
-
--ngs-table-border-color:
|
|
542
|
+
--ngs-table-border-color: var(--ngs-color-border);
|
|
617
543
|
--ngs-table-row-height: calc(3.5rem + var(--ngs-density-scale) * 1px);
|
|
618
544
|
--ngs-table-header-row-height: calc(3.25rem + var(--ngs-density-scale) * 1px);
|
|
619
|
-
--ngs-table-cell-padding: --spacing(2) --spacing(5);
|
|
620
545
|
--ngs-table-cell-font-size: 0.9375rem;
|
|
621
546
|
--ngs-table-header-cell-font-size: 0.75rem;
|
|
622
|
-
--ngs-table-header-cell-font-weight: 800;
|
|
623
547
|
|
|
624
548
|
--ngs-nav-item-height: var(--ngs-dropdown-height);
|
|
625
549
|
--ngs-nav-items-gap: --spacing(1.5);
|
|
626
|
-
--ngs-nav-item-padding: 0 --spacing(4);
|
|
627
550
|
--ngs-nav-item-radius: var(--ngs-radius-full);
|
|
628
551
|
--ngs-nav-item-font-size: 0.9375rem;
|
|
629
|
-
--ngs-nav-item-font-weight: 700;
|
|
630
552
|
--ngs-nav-item-color: #566176;
|
|
631
553
|
--ngs-nav-item-hover-color: #172033;
|
|
632
|
-
--ngs-nav-item-active-color:
|
|
633
|
-
--ngs-nav-item-hover-bg:
|
|
634
|
-
--ngs-nav-item-active-bg:
|
|
554
|
+
--ngs-nav-item-active-color: var(--ngs-color-primary);
|
|
555
|
+
--ngs-nav-item-hover-bg: var(--ngs-state-hover-bg);
|
|
556
|
+
--ngs-nav-item-active-bg: var(--ngs-state-selected-bg);
|
|
635
557
|
--ngs-nav-item-icon-color: #74809a;
|
|
636
|
-
--ngs-nav-item-hover-icon-color:
|
|
637
|
-
--ngs-nav-item-active-icon-color:
|
|
558
|
+
--ngs-nav-item-hover-icon-color: var(--ngs-color-primary);
|
|
559
|
+
--ngs-nav-item-active-icon-color: var(--ngs-color-primary);
|
|
638
560
|
--ngs-nav-item-icon-font-size: 1.375rem;
|
|
639
561
|
--ngs-nav-heading-font-size: 0.75rem;
|
|
640
|
-
--ngs-nav-heading-font-weight: 800;
|
|
641
562
|
--ngs-nav-heading-margin-top: --spacing(7);
|
|
642
563
|
--ngs-nav-heading-margin-bottom: --spacing(2);
|
|
643
564
|
--ngs-nav-divider-margin: --spacing(6) 0;
|
|
644
|
-
--ngs-nav-nested-item-margin: 0 0 0 52px;
|
|
645
|
-
--ngs-sidebar-width: var(--ngs-sidenav-width, 18.5rem);
|
|
646
565
|
}
|
|
647
566
|
|
|
648
567
|
.dark[data-ngs-theme='modern'],
|
|
649
568
|
[data-ngs-theme='modern'][data-ngs-color-scheme='dark'] {
|
|
650
|
-
--ngs-color-primary: #
|
|
569
|
+
--ngs-color-primary-seed: #4f46e5;
|
|
570
|
+
--ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 42%);
|
|
651
571
|
--ngs-color-on-primary: #111827;
|
|
652
|
-
--ngs-color-primary-container: #
|
|
653
|
-
--ngs-color-on-primary-container: #
|
|
654
|
-
--ngs-color-secondary: #5eead4;
|
|
572
|
+
--ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
|
|
573
|
+
--ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
|
|
574
|
+
--ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #5eead4 58%);
|
|
655
575
|
--ngs-color-on-secondary: #042f2e;
|
|
656
|
-
--ngs-color-secondary-container: #
|
|
657
|
-
--ngs-color-on-secondary-container: #
|
|
658
|
-
--ngs-color-tertiary: #f9a8d4;
|
|
576
|
+
--ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 62%);
|
|
577
|
+
--ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 82%);
|
|
578
|
+
--ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 50%);
|
|
659
579
|
--ngs-color-on-tertiary: #500724;
|
|
660
|
-
--ngs-color-tertiary-container: #
|
|
661
|
-
--ngs-color-on-tertiary-container: #
|
|
580
|
+
--ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
|
|
581
|
+
--ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 84%);
|
|
662
582
|
--ngs-color-danger: #fb7185;
|
|
663
583
|
--ngs-color-on-danger: #4c0519;
|
|
664
584
|
--ngs-color-danger-container: #9f1239;
|
|
665
585
|
--ngs-color-on-danger-container: #ffe4e6;
|
|
666
|
-
--ngs-color-info: #93c5fd;
|
|
586
|
+
--ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 46%);
|
|
667
587
|
--ngs-color-on-info: #0f1e46;
|
|
668
|
-
--ngs-color-info-container: #
|
|
669
|
-
--ngs-color-on-info-container: #
|
|
588
|
+
--ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
|
|
589
|
+
--ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 84%);
|
|
670
590
|
--ngs-color-success: #6ee7b7;
|
|
671
591
|
--ngs-color-on-success: #042f2e;
|
|
672
592
|
--ngs-color-success-container: #047857;
|
|
@@ -675,70 +595,70 @@
|
|
|
675
595
|
--ngs-color-on-warning: #451a03;
|
|
676
596
|
--ngs-color-warning-container: #92400e;
|
|
677
597
|
--ngs-color-on-warning-container: #fef3c7;
|
|
678
|
-
--ngs-color-background: #090d1a;
|
|
598
|
+
--ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
|
|
679
599
|
--ngs-color-on-background: #eef2ff;
|
|
680
|
-
--ngs-color-surface: #11162a;
|
|
681
|
-
--ngs-color-surface-bright: #1b2138;
|
|
600
|
+
--ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
|
|
601
|
+
--ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 90%);
|
|
682
602
|
--ngs-color-on-surface: #eef2ff;
|
|
683
|
-
--ngs-color-on-surface-variant: #b6c0d6;
|
|
684
|
-
--ngs-color-neutral-50: #090d1a;
|
|
685
|
-
--ngs-color-neutral-100: #11162a;
|
|
686
|
-
--ngs-color-neutral-200: #1b2138;
|
|
687
|
-
--ngs-color-neutral-300: #28304a;
|
|
688
|
-
--ngs-color-neutral-400: #3c4664;
|
|
689
|
-
--ngs-color-neutral-500: #697491;
|
|
690
|
-
--ngs-color-neutral-600: #8d98b5;
|
|
691
|
-
--ngs-color-neutral-650: #a3aec7;
|
|
692
|
-
--ngs-color-neutral-700: #b6c0d6;
|
|
693
|
-
--ngs-color-neutral-800: #d5dcf0;
|
|
694
|
-
--ngs-color-neutral-900: #eef2ff;
|
|
603
|
+
--ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 86%);
|
|
604
|
+
--ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
|
|
605
|
+
--ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
|
|
606
|
+
--ngs-color-neutral-200: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 92%);
|
|
607
|
+
--ngs-color-neutral-300: color-mix(in srgb, var(--ngs-color-primary-seed), #28304a 90%);
|
|
608
|
+
--ngs-color-neutral-400: color-mix(in srgb, var(--ngs-color-primary-seed), #3c4664 88%);
|
|
609
|
+
--ngs-color-neutral-500: color-mix(in srgb, var(--ngs-color-primary-seed), #697491 86%);
|
|
610
|
+
--ngs-color-neutral-600: color-mix(in srgb, var(--ngs-color-primary-seed), #8d98b5 84%);
|
|
611
|
+
--ngs-color-neutral-650: color-mix(in srgb, var(--ngs-color-primary-seed), #a3aec7 82%);
|
|
612
|
+
--ngs-color-neutral-700: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 80%);
|
|
613
|
+
--ngs-color-neutral-800: color-mix(in srgb, var(--ngs-color-primary-seed), #d5dcf0 78%);
|
|
614
|
+
--ngs-color-neutral-900: color-mix(in srgb, var(--ngs-color-primary-seed), #eef2ff 76%);
|
|
695
615
|
--ngs-color-neutral-950: #ffffff;
|
|
696
|
-
--ngs-color-surface-container-lowest:
|
|
697
|
-
--ngs-color-surface-container-low:
|
|
698
|
-
--ngs-color-surface-container:
|
|
699
|
-
--ngs-color-surface-container-high:
|
|
700
|
-
--ngs-color-surface-container-highest:
|
|
701
|
-
--ngs-color-outline: #8d98b5;
|
|
702
|
-
--ngs-color-outline-variant: #3c4664;
|
|
703
|
-
--ngs-color-border: #28304a;
|
|
704
|
-
--ngs-color-faint:
|
|
705
|
-
--ngs-color-subtle:
|
|
706
|
-
--ngs-color-muted:
|
|
707
|
-
--ngs-color-emphasis:
|
|
708
|
-
--ngs-color-strong:
|
|
709
|
-
--ngs-state-hover-bg: linear-gradient(135deg,
|
|
710
|
-
--ngs-state-active-bg: linear-gradient(135deg,
|
|
711
|
-
--ngs-state-selected-bg: linear-gradient(135deg,
|
|
616
|
+
--ngs-color-surface-container-lowest: var(--ngs-color-neutral-50);
|
|
617
|
+
--ngs-color-surface-container-low: var(--ngs-color-neutral-100);
|
|
618
|
+
--ngs-color-surface-container: var(--ngs-color-neutral-200);
|
|
619
|
+
--ngs-color-surface-container-high: var(--ngs-color-neutral-300);
|
|
620
|
+
--ngs-color-surface-container-highest: var(--ngs-color-neutral-400);
|
|
621
|
+
--ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary-seed), #8d98b5 82%);
|
|
622
|
+
--ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #3c4664 90%);
|
|
623
|
+
--ngs-color-border: color-mix(in srgb, var(--ngs-color-primary-seed), #28304a 92%);
|
|
624
|
+
--ngs-color-faint: var(--ngs-color-surface-container-low);
|
|
625
|
+
--ngs-color-subtle: var(--ngs-color-surface-container);
|
|
626
|
+
--ngs-color-muted: var(--ngs-color-surface-container-high);
|
|
627
|
+
--ngs-color-emphasis: var(--ngs-color-neutral-600);
|
|
628
|
+
--ngs-color-strong: var(--ngs-color-neutral-800);
|
|
629
|
+
--ngs-state-hover-bg: linear-gradient(135deg, color-mix(in srgb, var(--ngs-color-primary), transparent 88%), color-mix(in srgb, var(--ngs-color-secondary), transparent 90%));
|
|
630
|
+
--ngs-state-active-bg: linear-gradient(135deg, color-mix(in srgb, var(--ngs-color-primary), transparent 82%), color-mix(in srgb, var(--ngs-color-secondary), transparent 84%));
|
|
631
|
+
--ngs-state-selected-bg: linear-gradient(135deg, var(--ngs-color-primary-container), var(--ngs-color-secondary-container));
|
|
712
632
|
--ngs-state-selected-color: #eef2ff;
|
|
713
633
|
--ngs-state-focus-ring: var(--ngs-field-border-focus-color);
|
|
714
634
|
--ngs-state-disabled-bg: #1b2138;
|
|
715
635
|
--ngs-state-disabled-color: #697491;
|
|
716
636
|
--ngs-state-disabled-border: #28304a;
|
|
717
|
-
--ngs-button-tonal-bg:
|
|
637
|
+
--ngs-button-tonal-bg: var(--ngs-state-selected-bg);
|
|
718
638
|
--ngs-button-tonal-color: #eef2ff;
|
|
719
|
-
--ngs-button-outlined-border:
|
|
639
|
+
--ngs-button-outlined-border: var(--ngs-color-outline-variant);
|
|
720
640
|
--ngs-field-bg: rgba(17, 22, 42, 0.92);
|
|
721
641
|
--ngs-field-disabled-bg: #1b2138;
|
|
722
|
-
--ngs-field-border-color:
|
|
723
|
-
--ngs-field-border-focus-color:
|
|
724
|
-
--ngs-field-filled-bg:
|
|
642
|
+
--ngs-field-border-color: var(--ngs-color-outline-variant);
|
|
643
|
+
--ngs-field-border-focus-color: var(--ngs-color-primary);
|
|
644
|
+
--ngs-field-filled-bg: var(--ngs-color-surface-container);
|
|
725
645
|
--ngs-dropdown-bg: rgba(17, 22, 42, 0.98);
|
|
726
646
|
--ngs-dropdown-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
|
|
727
|
-
--ngs-dropdown-border: 1px solid
|
|
647
|
+
--ngs-dropdown-border: 1px solid var(--ngs-color-border);
|
|
728
648
|
--ngs-dialog-shadow: 0 34px 86px rgba(0, 0, 0, 0.52);
|
|
729
649
|
--ngs-overlay-backdrop-bg: rgba(2, 6, 23, 0.62);
|
|
730
|
-
--ngs-table-bg:
|
|
731
|
-
--ngs-table-header-bg: linear-gradient(135deg,
|
|
732
|
-
--ngs-table-row-bg:
|
|
733
|
-
--ngs-table-border-color:
|
|
650
|
+
--ngs-table-bg: var(--ngs-color-surface);
|
|
651
|
+
--ngs-table-header-bg: linear-gradient(135deg, var(--ngs-color-surface-container), var(--ngs-color-secondary-container));
|
|
652
|
+
--ngs-table-row-bg: var(--ngs-color-surface);
|
|
653
|
+
--ngs-table-border-color: var(--ngs-color-border);
|
|
734
654
|
--ngs-nav-item-color: #b6c0d6;
|
|
735
655
|
--ngs-nav-item-hover-color: #eef2ff;
|
|
736
656
|
--ngs-nav-item-active-color: #eef2ff;
|
|
737
|
-
--ngs-nav-item-hover-bg:
|
|
738
|
-
--ngs-nav-item-active-bg:
|
|
657
|
+
--ngs-nav-item-hover-bg: var(--ngs-state-hover-bg);
|
|
658
|
+
--ngs-nav-item-active-bg: var(--ngs-state-selected-bg);
|
|
739
659
|
--ngs-nav-item-icon-color: #8d98b5;
|
|
740
|
-
--ngs-nav-item-hover-icon-color:
|
|
741
|
-
--ngs-nav-item-active-icon-color:
|
|
660
|
+
--ngs-nav-item-hover-icon-color: var(--ngs-color-primary);
|
|
661
|
+
--ngs-nav-item-active-icon-color: var(--ngs-color-secondary);
|
|
742
662
|
}
|
|
743
663
|
|
|
744
664
|
[data-ngs-radius='none'] { --ngs-control-radius: var(--ngs-radius-none); --ngs-dialog-radius: var(--ngs-radius-none); --ngs-nav-item-radius: var(--ngs-radius-none); --ngs-menu-item-radius: var(--ngs-radius-none); }
|