@ngxsmk/theme 1.3.2 → 3.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.
Files changed (30) hide show
  1. package/README.md +13 -1
  2. package/esm2022/lib/css.mjs +128 -30
  3. package/esm2022/lib/ionic-provider.mjs +30 -0
  4. package/esm2022/lib/theme-injector.service.mjs +92 -0
  5. package/esm2022/lib/theme.service.mjs +19 -20
  6. package/esm2022/lib/token-adapter.mjs +185 -0
  7. package/esm2022/lib/tokens.mjs +25 -2
  8. package/esm2022/public-api.mjs +4 -1
  9. package/fesm2022/ngxsmk-theme.mjs +466 -49
  10. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  11. package/lib/css.d.ts.map +1 -1
  12. package/lib/ionic-provider.d.ts +18 -0
  13. package/lib/ionic-provider.d.ts.map +1 -0
  14. package/lib/theme-injector.service.d.ts +37 -0
  15. package/lib/theme-injector.service.d.ts.map +1 -0
  16. package/lib/theme.service.d.ts +12 -6
  17. package/lib/theme.service.d.ts.map +1 -1
  18. package/lib/token-adapter.d.ts +28 -0
  19. package/lib/token-adapter.d.ts.map +1 -0
  20. package/lib/tokens.d.ts +13 -0
  21. package/lib/tokens.d.ts.map +1 -1
  22. package/package.json +34 -14
  23. package/public-api.d.ts +3 -0
  24. package/public-api.d.ts.map +1 -1
  25. package/styles/ngxsmk.css +77 -1
  26. package/styles/ngxsmk.emerald.css +77 -1
  27. package/styles/ngxsmk.neutral.css +77 -1
  28. package/styles/ngxsmk.rose.css +77 -1
  29. package/styles/ngxsmk.violet.css +77 -1
  30. package/tailwind-v4.css +234 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ngxsmk/theme",
3
- "version": "1.3.2",
3
+ "version": "3.0.0",
4
4
  "description": "Runtime theming and design-token engine for @ngxsmk/core with light/dark modes and preset palettes.",
5
5
  "keywords": [
6
6
  "angular",
@@ -9,7 +9,9 @@
9
9
  "design-tokens",
10
10
  "css-variables",
11
11
  "dark-mode",
12
- "themes"
12
+ "themes",
13
+ "tailwind",
14
+ "tailwindcss"
13
15
  ],
14
16
  "license": "MIT",
15
17
  "repository": {
@@ -23,7 +25,16 @@
23
25
  },
24
26
  "peerDependencies": {
25
27
  "@angular/common": ">=17.3.0",
26
- "@angular/core": ">=17.3.0"
28
+ "@angular/core": ">=17.3.0",
29
+ "@ionic/angular": ">=7.0.0 || >=8.0.0"
30
+ },
31
+ "peerDependenciesMeta": {
32
+ "tailwindcss": {
33
+ "optional": true
34
+ },
35
+ "@ionic/angular": {
36
+ "optional": true
37
+ }
27
38
  },
28
39
  "dependencies": {
29
40
  "tslib": "^2.3.0"
@@ -31,20 +42,29 @@
31
42
  "sideEffects": [
32
43
  "**/*.css"
33
44
  ],
34
- "publishConfig": {
35
- "access": "public"
36
- },
37
- "module": "fesm2022/ngxsmk-theme.mjs",
38
- "typings": "index.d.ts",
39
45
  "exports": {
40
- "./package.json": {
41
- "default": "./package.json"
42
- },
43
46
  ".": {
44
47
  "types": "./index.d.ts",
48
+ "default": "./fesm2022/ngxsmk-theme.mjs",
45
49
  "esm2022": "./esm2022/ngxsmk-theme.mjs",
46
- "esm": "./esm2022/ngxsmk-theme.mjs",
47
- "default": "./fesm2022/ngxsmk-theme.mjs"
50
+ "esm": "./esm2022/ngxsmk-theme.mjs"
51
+ },
52
+ "./tailwind": {
53
+ "types": "./tailwind/index.d.ts",
54
+ "default": "./tailwind/index.js"
55
+ },
56
+ "./tailwind/v3": {
57
+ "types": "./tailwind/preset-v3.d.ts",
58
+ "default": "./tailwind/preset-v3.js"
59
+ },
60
+ "./tailwind/v4.css": "./tailwind-v4.css",
61
+ "./package.json": {
62
+ "default": "./package.json"
48
63
  }
49
- }
64
+ },
65
+ "publishConfig": {
66
+ "access": "public"
67
+ },
68
+ "module": "fesm2022/ngxsmk-theme.mjs",
69
+ "typings": "index.d.ts"
50
70
  }
package/public-api.d.ts CHANGED
@@ -5,4 +5,7 @@ export * from './lib/define-config';
5
5
  export * from './lib/css';
6
6
  export * from './lib/presets';
7
7
  export * from './lib/theme.service';
8
+ export * from './lib/theme-injector.service';
9
+ export * from './lib/token-adapter';
10
+ export * from './lib/ionic-provider';
8
11
  //# sourceMappingURL=public-api.d.ts.map
package/public-api.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../packages/theme/src/public-api.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC"}
1
+ {"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../packages/theme/src/public-api.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
package/styles/ngxsmk.css CHANGED
@@ -34,7 +34,7 @@
34
34
  --ngxsmk-color-neutral-900: #18181A;
35
35
  --ngxsmk-color-neutral-950: #111112;
36
36
  --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
37
- --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
37
+ --ngxsmk-font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
38
38
  --ngxsmk-radius-base: 0.5rem;
39
39
  --ngxsmk-control-height: 2.5rem;
40
40
  --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
@@ -43,6 +43,11 @@
43
43
  --ngxsmk-press-scale: scale(0.98);
44
44
  --ngxsmk-focus-ring: var(--ngxsmk-shadow-focus);
45
45
  --ngxsmk-focus-ring-error: 0 0 0 2px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent), 0 0 0 4px color-mix(in srgb, var(--ngxsmk-color-error) 45%, transparent);
46
+ --ngxsmk-safe-area-top: env(safe-area-inset-top, 0px);
47
+ --ngxsmk-safe-area-bottom: env(safe-area-inset-bottom, 0px);
48
+ --ngxsmk-safe-area-left: env(safe-area-inset-left, 0px);
49
+ --ngxsmk-safe-area-right: env(safe-area-inset-right, 0px);
50
+ --ngxsmk-touch-target-min: 44px;
46
51
  --ngxsmk-button-bg: var(--ngxsmk-color-primary);
47
52
  --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
48
53
  --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
@@ -67,6 +72,43 @@
67
72
  --ngxsmk-switch-thumb-size: 0.875rem;
68
73
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
69
74
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
75
+ --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
76
+ --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
77
+ --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
78
+ --ngxsmk-spreadsheet-border: var(--ngxsmk-color-outline);
79
+ --ngxsmk-spreadsheet-grid-color: var(--ngxsmk-color-outline-variant);
80
+ --ngxsmk-spreadsheet-hover-bg: var(--ngxsmk-color-surface-hover);
81
+ --ngxsmk-spreadsheet-selected-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent);
82
+ --ngxsmk-spreadsheet-active-border: var(--ngxsmk-color-primary);
83
+ --ngxsmk-spreadsheet-font: var(--ngxsmk-font-sans);
84
+ --ngxsmk-spreadsheet-font-mono: var(--ngxsmk-font-mono);
85
+ --ngxsmk-spreadsheet-row-height: 2.25rem;
86
+ --ngxsmk-spreadsheet-header-height: 2.5rem;
87
+ --ngxsmk-spreadsheet-cell-padding: 6px 10px;
88
+ --ngxsmk-spreadsheet-cell-font-size: var(--ngxsmk-text-body-sm-size);
89
+ --ngxsmk-spreadsheet-scrollbar-size: 8px;
90
+ --ngxsmk-spreadsheet-shadow: var(--ngxsmk-shadow-sm);
91
+ --ngxsmk-spreadsheet-radius: var(--ngxsmk-radius-lg);
92
+ --ngxsmk-spreadsheet-edit-bg: var(--ngxsmk-color-surface);
93
+ --ngxsmk-spreadsheet-edit-border: var(--ngxsmk-color-primary);
94
+ --ngxsmk-spreadsheet-row-hover-bg: var(--ngxsmk-color-surface-hover);
95
+ --ngxsmk-spreadsheet-col-hover-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent);
96
+ --ngxsmk-spreadsheet-frozen-shadow: 2px 0 4px rgba(0,0,0,0.08);
97
+ --ngxsmk-spreadsheet-selection-range: color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent);
98
+ --ngxsmk-input-group-bg: var(--ngxsmk-color-surface);
99
+ --ngxsmk-input-group-border: var(--ngxsmk-color-outline-strong);
100
+ --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
101
+ --ngxsmk-input-group-shadow: none;
102
+ --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
103
+ --ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
104
+ --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
105
+ --ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
106
+ --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
107
+ --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
108
+ --ngxsmk-input-group-height: 2.5rem;
109
+ --ngxsmk-input-group-padding: 0.75rem;
110
+ --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
111
+ --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
70
112
  --ngxsmk-control-height-sm: 2rem;
71
113
  --ngxsmk-control-height-md: 2.5rem;
72
114
  --ngxsmk-control-height-lg: 3rem;
@@ -79,6 +121,14 @@
79
121
  --ngxsmk-tracking-tight: -0.02em;
80
122
  --ngxsmk-tracking-normal: 0;
81
123
  --ngxsmk-tracking-wide: 0.08em;
124
+ --ngxsmk-font-weight-regular: 400;
125
+ --ngxsmk-font-weight-medium: 500;
126
+ --ngxsmk-font-weight-semibold: 600;
127
+ --ngxsmk-font-weight-bold: 700;
128
+ --ngxsmk-leading-none: 1;
129
+ --ngxsmk-leading-tight: 1.25;
130
+ --ngxsmk-leading-normal: 1.5;
131
+ --ngxsmk-leading-relaxed: 1.625;
82
132
  --ngxsmk-space-0: 0px;
83
133
  --ngxsmk-space-1: 0.25rem;
84
134
  --ngxsmk-space-2: 0.5rem;
@@ -193,12 +243,17 @@
193
243
  --ngxsmk-color-on-surface: #0A1317;
194
244
  --ngxsmk-color-surface-variant: #E4E9EE;
195
245
  --ngxsmk-color-on-surface-variant: #4E606F;
246
+ --ngxsmk-color-surface-muted: #F1F4F7;
247
+ --ngxsmk-color-surface-elevated: #FFFFFF;
248
+ --ngxsmk-color-surface-overlay: #FFFFFF;
249
+ --ngxsmk-color-on-surface-muted: #778593;
196
250
  --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
197
251
  --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
198
252
  --ngxsmk-color-surface-container: #FFFFFF;
199
253
  --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
200
254
  --ngxsmk-color-outline-strong: #CCD3DB;
201
255
  --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
256
+ --ngxsmk-color-outline-subtle: rgb(5 54 89 / 0.05);
202
257
  --ngxsmk-color-surface-1: #FFFFFF;
203
258
  --ngxsmk-color-surface-2: #F1F4F7;
204
259
  --ngxsmk-color-surface-3: #E4E9EE;
@@ -207,6 +262,14 @@
207
262
  --ngxsmk-color-ring: #059669;
208
263
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
264
  --ngxsmk-shadow-focus: 0 0 0 2px #DEF1E7, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
265
+ --ngxsmk-chart-1: #2A78D6;
266
+ --ngxsmk-chart-2: #1BAF7A;
267
+ --ngxsmk-chart-3: #EDA100;
268
+ --ngxsmk-chart-4: #008300;
269
+ --ngxsmk-chart-5: #4A3AA7;
270
+ --ngxsmk-chart-6: #E34948;
271
+ --ngxsmk-chart-7: #E87BA4;
272
+ --ngxsmk-chart-8: #EB6834;
210
273
  --ngxsmk-color-tertiary: #008DBA;
211
274
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
275
  --ngxsmk-color-tertiary-container: #DDEEF7;
@@ -249,12 +312,17 @@
249
312
  --ngxsmk-color-on-surface: #DFE2E5;
250
313
  --ngxsmk-color-surface-variant: #28292C;
251
314
  --ngxsmk-color-on-surface-variant: #AAAFB5;
315
+ --ngxsmk-color-surface-muted: #141416;
316
+ --ngxsmk-color-surface-elevated: #28292C;
317
+ --ngxsmk-color-surface-overlay: #2F3136;
318
+ --ngxsmk-color-on-surface-muted: #777C85;
252
319
  --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
253
320
  --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
254
321
  --ngxsmk-color-surface-container: #28292C;
255
322
  --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
256
323
  --ngxsmk-color-outline-strong: #494D53;
257
324
  --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
325
+ --ngxsmk-color-outline-subtle: rgb(242 244 246 / 0.05);
258
326
  --ngxsmk-color-surface-1: #1F1F22;
259
327
  --ngxsmk-color-surface-2: #2A333B;
260
328
  --ngxsmk-color-surface-3: #3A4650;
@@ -263,6 +331,14 @@
263
331
  --ngxsmk-color-ring: #45A77F;
264
332
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
333
  --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #45A77F 25%, transparent), 0 0 0 4px color-mix(in srgb, #45A77F 45%, transparent);
334
+ --ngxsmk-chart-1: #3987E5;
335
+ --ngxsmk-chart-2: #199E70;
336
+ --ngxsmk-chart-3: #C98500;
337
+ --ngxsmk-chart-4: #008300;
338
+ --ngxsmk-chart-5: #9085E9;
339
+ --ngxsmk-chart-6: #E66767;
340
+ --ngxsmk-chart-7: #D55181;
341
+ --ngxsmk-chart-8: #D95926;
266
342
  --ngxsmk-color-tertiary: #419EC6;
267
343
  --ngxsmk-color-on-tertiary: #001021;
268
344
  --ngxsmk-color-tertiary-container: #002742;
package/styles/ngxsmk.emerald.css CHANGED
@@ -34,7 +34,7 @@
34
34
  --ngxsmk-color-neutral-900: #18181A;
35
35
  --ngxsmk-color-neutral-950: #111112;
36
36
  --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
37
- --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
37
+ --ngxsmk-font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
38
38
  --ngxsmk-radius-base: 0.5rem;
39
39
  --ngxsmk-control-height: 2.5rem;
40
40
  --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
@@ -43,6 +43,11 @@
43
43
  --ngxsmk-press-scale: scale(0.98);
44
44
  --ngxsmk-focus-ring: var(--ngxsmk-shadow-focus);
45
45
  --ngxsmk-focus-ring-error: 0 0 0 2px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent), 0 0 0 4px color-mix(in srgb, var(--ngxsmk-color-error) 45%, transparent);
46
+ --ngxsmk-safe-area-top: env(safe-area-inset-top, 0px);
47
+ --ngxsmk-safe-area-bottom: env(safe-area-inset-bottom, 0px);
48
+ --ngxsmk-safe-area-left: env(safe-area-inset-left, 0px);
49
+ --ngxsmk-safe-area-right: env(safe-area-inset-right, 0px);
50
+ --ngxsmk-touch-target-min: 44px;
46
51
  --ngxsmk-button-bg: var(--ngxsmk-color-primary);
47
52
  --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
48
53
  --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
@@ -67,6 +72,43 @@
67
72
  --ngxsmk-switch-thumb-size: 0.875rem;
68
73
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
69
74
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
75
+ --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
76
+ --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
77
+ --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
78
+ --ngxsmk-spreadsheet-border: var(--ngxsmk-color-outline);
79
+ --ngxsmk-spreadsheet-grid-color: var(--ngxsmk-color-outline-variant);
80
+ --ngxsmk-spreadsheet-hover-bg: var(--ngxsmk-color-surface-hover);
81
+ --ngxsmk-spreadsheet-selected-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent);
82
+ --ngxsmk-spreadsheet-active-border: var(--ngxsmk-color-primary);
83
+ --ngxsmk-spreadsheet-font: var(--ngxsmk-font-sans);
84
+ --ngxsmk-spreadsheet-font-mono: var(--ngxsmk-font-mono);
85
+ --ngxsmk-spreadsheet-row-height: 2.25rem;
86
+ --ngxsmk-spreadsheet-header-height: 2.5rem;
87
+ --ngxsmk-spreadsheet-cell-padding: 6px 10px;
88
+ --ngxsmk-spreadsheet-cell-font-size: var(--ngxsmk-text-body-sm-size);
89
+ --ngxsmk-spreadsheet-scrollbar-size: 8px;
90
+ --ngxsmk-spreadsheet-shadow: var(--ngxsmk-shadow-sm);
91
+ --ngxsmk-spreadsheet-radius: var(--ngxsmk-radius-lg);
92
+ --ngxsmk-spreadsheet-edit-bg: var(--ngxsmk-color-surface);
93
+ --ngxsmk-spreadsheet-edit-border: var(--ngxsmk-color-primary);
94
+ --ngxsmk-spreadsheet-row-hover-bg: var(--ngxsmk-color-surface-hover);
95
+ --ngxsmk-spreadsheet-col-hover-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent);
96
+ --ngxsmk-spreadsheet-frozen-shadow: 2px 0 4px rgba(0,0,0,0.08);
97
+ --ngxsmk-spreadsheet-selection-range: color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent);
98
+ --ngxsmk-input-group-bg: var(--ngxsmk-color-surface);
99
+ --ngxsmk-input-group-border: var(--ngxsmk-color-outline-strong);
100
+ --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
101
+ --ngxsmk-input-group-shadow: none;
102
+ --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
103
+ --ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
104
+ --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
105
+ --ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
106
+ --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
107
+ --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
108
+ --ngxsmk-input-group-height: 2.5rem;
109
+ --ngxsmk-input-group-padding: 0.75rem;
110
+ --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
111
+ --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
70
112
  --ngxsmk-control-height-sm: 2rem;
71
113
  --ngxsmk-control-height-md: 2.5rem;
72
114
  --ngxsmk-control-height-lg: 3rem;
@@ -79,6 +121,14 @@
79
121
  --ngxsmk-tracking-tight: -0.02em;
80
122
  --ngxsmk-tracking-normal: 0;
81
123
  --ngxsmk-tracking-wide: 0.08em;
124
+ --ngxsmk-font-weight-regular: 400;
125
+ --ngxsmk-font-weight-medium: 500;
126
+ --ngxsmk-font-weight-semibold: 600;
127
+ --ngxsmk-font-weight-bold: 700;
128
+ --ngxsmk-leading-none: 1;
129
+ --ngxsmk-leading-tight: 1.25;
130
+ --ngxsmk-leading-normal: 1.5;
131
+ --ngxsmk-leading-relaxed: 1.625;
82
132
  --ngxsmk-space-0: 0px;
83
133
  --ngxsmk-space-1: 0.25rem;
84
134
  --ngxsmk-space-2: 0.5rem;
@@ -193,12 +243,17 @@
193
243
  --ngxsmk-color-on-surface: #0A1317;
194
244
  --ngxsmk-color-surface-variant: #E4E9EE;
195
245
  --ngxsmk-color-on-surface-variant: #4E606F;
246
+ --ngxsmk-color-surface-muted: #F1F4F7;
247
+ --ngxsmk-color-surface-elevated: #FFFFFF;
248
+ --ngxsmk-color-surface-overlay: #FFFFFF;
249
+ --ngxsmk-color-on-surface-muted: #778593;
196
250
  --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
197
251
  --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
198
252
  --ngxsmk-color-surface-container: #FFFFFF;
199
253
  --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
200
254
  --ngxsmk-color-outline-strong: #CCD3DB;
201
255
  --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
256
+ --ngxsmk-color-outline-subtle: rgb(5 54 89 / 0.05);
202
257
  --ngxsmk-color-surface-1: #FFFFFF;
203
258
  --ngxsmk-color-surface-2: #F1F4F7;
204
259
  --ngxsmk-color-surface-3: #E4E9EE;
@@ -207,6 +262,14 @@
207
262
  --ngxsmk-color-ring: #059669;
208
263
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
264
  --ngxsmk-shadow-focus: 0 0 0 2px #DEF1E7, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
265
+ --ngxsmk-chart-1: #2A78D6;
266
+ --ngxsmk-chart-2: #1BAF7A;
267
+ --ngxsmk-chart-3: #EDA100;
268
+ --ngxsmk-chart-4: #008300;
269
+ --ngxsmk-chart-5: #4A3AA7;
270
+ --ngxsmk-chart-6: #E34948;
271
+ --ngxsmk-chart-7: #E87BA4;
272
+ --ngxsmk-chart-8: #EB6834;
210
273
  --ngxsmk-color-tertiary: #008DBA;
211
274
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
275
  --ngxsmk-color-tertiary-container: #DDEEF7;
@@ -249,12 +312,17 @@
249
312
  --ngxsmk-color-on-surface: #DFE2E5;
250
313
  --ngxsmk-color-surface-variant: #28292C;
251
314
  --ngxsmk-color-on-surface-variant: #AAAFB5;
315
+ --ngxsmk-color-surface-muted: #141416;
316
+ --ngxsmk-color-surface-elevated: #28292C;
317
+ --ngxsmk-color-surface-overlay: #2F3136;
318
+ --ngxsmk-color-on-surface-muted: #777C85;
252
319
  --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
253
320
  --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
254
321
  --ngxsmk-color-surface-container: #28292C;
255
322
  --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
256
323
  --ngxsmk-color-outline-strong: #494D53;
257
324
  --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
325
+ --ngxsmk-color-outline-subtle: rgb(242 244 246 / 0.05);
258
326
  --ngxsmk-color-surface-1: #1F1F22;
259
327
  --ngxsmk-color-surface-2: #2A333B;
260
328
  --ngxsmk-color-surface-3: #3A4650;
@@ -263,6 +331,14 @@
263
331
  --ngxsmk-color-ring: #45A77F;
264
332
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
333
  --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #45A77F 25%, transparent), 0 0 0 4px color-mix(in srgb, #45A77F 45%, transparent);
334
+ --ngxsmk-chart-1: #3987E5;
335
+ --ngxsmk-chart-2: #199E70;
336
+ --ngxsmk-chart-3: #C98500;
337
+ --ngxsmk-chart-4: #008300;
338
+ --ngxsmk-chart-5: #9085E9;
339
+ --ngxsmk-chart-6: #E66767;
340
+ --ngxsmk-chart-7: #D55181;
341
+ --ngxsmk-chart-8: #D95926;
266
342
  --ngxsmk-color-tertiary: #419EC6;
267
343
  --ngxsmk-color-on-tertiary: #001021;
268
344
  --ngxsmk-color-tertiary-container: #002742;
package/styles/ngxsmk.neutral.css CHANGED
@@ -34,7 +34,7 @@
34
34
  --ngxsmk-color-neutral-900: #18181A;
35
35
  --ngxsmk-color-neutral-950: #111112;
36
36
  --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
37
- --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
37
+ --ngxsmk-font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
38
38
  --ngxsmk-radius-base: 0.5rem;
39
39
  --ngxsmk-control-height: 2.5rem;
40
40
  --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
@@ -43,6 +43,11 @@
43
43
  --ngxsmk-press-scale: scale(0.98);
44
44
  --ngxsmk-focus-ring: var(--ngxsmk-shadow-focus);
45
45
  --ngxsmk-focus-ring-error: 0 0 0 2px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent), 0 0 0 4px color-mix(in srgb, var(--ngxsmk-color-error) 45%, transparent);
46
+ --ngxsmk-safe-area-top: env(safe-area-inset-top, 0px);
47
+ --ngxsmk-safe-area-bottom: env(safe-area-inset-bottom, 0px);
48
+ --ngxsmk-safe-area-left: env(safe-area-inset-left, 0px);
49
+ --ngxsmk-safe-area-right: env(safe-area-inset-right, 0px);
50
+ --ngxsmk-touch-target-min: 44px;
46
51
  --ngxsmk-button-bg: var(--ngxsmk-color-primary);
47
52
  --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
48
53
  --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
@@ -67,6 +72,43 @@
67
72
  --ngxsmk-switch-thumb-size: 0.875rem;
68
73
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
69
74
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
75
+ --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
76
+ --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
77
+ --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
78
+ --ngxsmk-spreadsheet-border: var(--ngxsmk-color-outline);
79
+ --ngxsmk-spreadsheet-grid-color: var(--ngxsmk-color-outline-variant);
80
+ --ngxsmk-spreadsheet-hover-bg: var(--ngxsmk-color-surface-hover);
81
+ --ngxsmk-spreadsheet-selected-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent);
82
+ --ngxsmk-spreadsheet-active-border: var(--ngxsmk-color-primary);
83
+ --ngxsmk-spreadsheet-font: var(--ngxsmk-font-sans);
84
+ --ngxsmk-spreadsheet-font-mono: var(--ngxsmk-font-mono);
85
+ --ngxsmk-spreadsheet-row-height: 2.25rem;
86
+ --ngxsmk-spreadsheet-header-height: 2.5rem;
87
+ --ngxsmk-spreadsheet-cell-padding: 6px 10px;
88
+ --ngxsmk-spreadsheet-cell-font-size: var(--ngxsmk-text-body-sm-size);
89
+ --ngxsmk-spreadsheet-scrollbar-size: 8px;
90
+ --ngxsmk-spreadsheet-shadow: var(--ngxsmk-shadow-sm);
91
+ --ngxsmk-spreadsheet-radius: var(--ngxsmk-radius-lg);
92
+ --ngxsmk-spreadsheet-edit-bg: var(--ngxsmk-color-surface);
93
+ --ngxsmk-spreadsheet-edit-border: var(--ngxsmk-color-primary);
94
+ --ngxsmk-spreadsheet-row-hover-bg: var(--ngxsmk-color-surface-hover);
95
+ --ngxsmk-spreadsheet-col-hover-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent);
96
+ --ngxsmk-spreadsheet-frozen-shadow: 2px 0 4px rgba(0,0,0,0.08);
97
+ --ngxsmk-spreadsheet-selection-range: color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent);
98
+ --ngxsmk-input-group-bg: var(--ngxsmk-color-surface);
99
+ --ngxsmk-input-group-border: var(--ngxsmk-color-outline-strong);
100
+ --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
101
+ --ngxsmk-input-group-shadow: none;
102
+ --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
103
+ --ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
104
+ --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
105
+ --ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
106
+ --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
107
+ --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
108
+ --ngxsmk-input-group-height: 2.5rem;
109
+ --ngxsmk-input-group-padding: 0.75rem;
110
+ --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
111
+ --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
70
112
  --ngxsmk-control-height-sm: 2rem;
71
113
  --ngxsmk-control-height-md: 2.5rem;
72
114
  --ngxsmk-control-height-lg: 3rem;
@@ -79,6 +121,14 @@
79
121
  --ngxsmk-tracking-tight: -0.02em;
80
122
  --ngxsmk-tracking-normal: 0;
81
123
  --ngxsmk-tracking-wide: 0.08em;
124
+ --ngxsmk-font-weight-regular: 400;
125
+ --ngxsmk-font-weight-medium: 500;
126
+ --ngxsmk-font-weight-semibold: 600;
127
+ --ngxsmk-font-weight-bold: 700;
128
+ --ngxsmk-leading-none: 1;
129
+ --ngxsmk-leading-tight: 1.25;
130
+ --ngxsmk-leading-normal: 1.5;
131
+ --ngxsmk-leading-relaxed: 1.625;
82
132
  --ngxsmk-space-0: 0px;
83
133
  --ngxsmk-space-1: 0.25rem;
84
134
  --ngxsmk-space-2: 0.5rem;
@@ -193,12 +243,17 @@
193
243
  --ngxsmk-color-on-surface: #0A1317;
194
244
  --ngxsmk-color-surface-variant: #E4E9EE;
195
245
  --ngxsmk-color-on-surface-variant: #4E606F;
246
+ --ngxsmk-color-surface-muted: #F1F4F7;
247
+ --ngxsmk-color-surface-elevated: #FFFFFF;
248
+ --ngxsmk-color-surface-overlay: #FFFFFF;
249
+ --ngxsmk-color-on-surface-muted: #778593;
196
250
  --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
197
251
  --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
198
252
  --ngxsmk-color-surface-container: #FFFFFF;
199
253
  --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
200
254
  --ngxsmk-color-outline-strong: #CCD3DB;
201
255
  --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
256
+ --ngxsmk-color-outline-subtle: rgb(5 54 89 / 0.05);
202
257
  --ngxsmk-color-surface-1: #FFFFFF;
203
258
  --ngxsmk-color-surface-2: #F1F4F7;
204
259
  --ngxsmk-color-surface-3: #E4E9EE;
@@ -207,6 +262,14 @@
207
262
  --ngxsmk-color-ring: #18181B;
208
263
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
264
  --ngxsmk-shadow-focus: 0 0 0 2px #F4F4F5, 0 0 0 4px color-mix(in srgb, #18181B 45%, transparent);
265
+ --ngxsmk-chart-1: #2A78D6;
266
+ --ngxsmk-chart-2: #1BAF7A;
267
+ --ngxsmk-chart-3: #EDA100;
268
+ --ngxsmk-chart-4: #008300;
269
+ --ngxsmk-chart-5: #4A3AA7;
270
+ --ngxsmk-chart-6: #E34948;
271
+ --ngxsmk-chart-7: #E87BA4;
272
+ --ngxsmk-chart-8: #EB6834;
210
273
  --ngxsmk-color-tertiary: #787375;
211
274
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
275
  --ngxsmk-color-tertiary-container: #ECEBEB;
@@ -249,12 +312,17 @@
249
312
  --ngxsmk-color-on-surface: #DFE2E5;
250
313
  --ngxsmk-color-surface-variant: #28292C;
251
314
  --ngxsmk-color-on-surface-variant: #AAAFB5;
315
+ --ngxsmk-color-surface-muted: #141416;
316
+ --ngxsmk-color-surface-elevated: #28292C;
317
+ --ngxsmk-color-surface-overlay: #2F3136;
318
+ --ngxsmk-color-on-surface-muted: #777C85;
252
319
  --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
253
320
  --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
254
321
  --ngxsmk-color-surface-container: #28292C;
255
322
  --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
256
323
  --ngxsmk-color-outline-strong: #494D53;
257
324
  --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
325
+ --ngxsmk-color-outline-subtle: rgb(242 244 246 / 0.05);
258
326
  --ngxsmk-color-surface-1: #1F1F22;
259
327
  --ngxsmk-color-surface-2: #2A333B;
260
328
  --ngxsmk-color-surface-3: #3A4650;
@@ -263,6 +331,14 @@
263
331
  --ngxsmk-color-ring: #D4D4D8;
264
332
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
333
  --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #A1A1AA 25%, transparent), 0 0 0 4px color-mix(in srgb, #A1A1AA 45%, transparent);
334
+ --ngxsmk-chart-1: #3987E5;
335
+ --ngxsmk-chart-2: #199E70;
336
+ --ngxsmk-chart-3: #C98500;
337
+ --ngxsmk-chart-4: #008300;
338
+ --ngxsmk-chart-5: #9085E9;
339
+ --ngxsmk-chart-6: #E66767;
340
+ --ngxsmk-chart-7: #D55181;
341
+ --ngxsmk-chart-8: #D95926;
266
342
  --ngxsmk-color-tertiary: #959193;
267
343
  --ngxsmk-color-on-tertiary: #0E0D0E;
268
344
  --ngxsmk-color-tertiary-container: #1B1719;
package/styles/ngxsmk.rose.css CHANGED
@@ -34,7 +34,7 @@
34
34
  --ngxsmk-color-neutral-900: #18181A;
35
35
  --ngxsmk-color-neutral-950: #111112;
36
36
  --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
37
- --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
37
+ --ngxsmk-font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
38
38
  --ngxsmk-radius-base: 0.5rem;
39
39
  --ngxsmk-control-height: 2.5rem;
40
40
  --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
@@ -43,6 +43,11 @@
43
43
  --ngxsmk-press-scale: scale(0.98);
44
44
  --ngxsmk-focus-ring: var(--ngxsmk-shadow-focus);
45
45
  --ngxsmk-focus-ring-error: 0 0 0 2px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent), 0 0 0 4px color-mix(in srgb, var(--ngxsmk-color-error) 45%, transparent);
46
+ --ngxsmk-safe-area-top: env(safe-area-inset-top, 0px);
47
+ --ngxsmk-safe-area-bottom: env(safe-area-inset-bottom, 0px);
48
+ --ngxsmk-safe-area-left: env(safe-area-inset-left, 0px);
49
+ --ngxsmk-safe-area-right: env(safe-area-inset-right, 0px);
50
+ --ngxsmk-touch-target-min: 44px;
46
51
  --ngxsmk-button-bg: var(--ngxsmk-color-primary);
47
52
  --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
48
53
  --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
@@ -67,6 +72,43 @@
67
72
  --ngxsmk-switch-thumb-size: 0.875rem;
68
73
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
69
74
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
75
+ --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
76
+ --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
77
+ --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
78
+ --ngxsmk-spreadsheet-border: var(--ngxsmk-color-outline);
79
+ --ngxsmk-spreadsheet-grid-color: var(--ngxsmk-color-outline-variant);
80
+ --ngxsmk-spreadsheet-hover-bg: var(--ngxsmk-color-surface-hover);
81
+ --ngxsmk-spreadsheet-selected-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent);
82
+ --ngxsmk-spreadsheet-active-border: var(--ngxsmk-color-primary);
83
+ --ngxsmk-spreadsheet-font: var(--ngxsmk-font-sans);
84
+ --ngxsmk-spreadsheet-font-mono: var(--ngxsmk-font-mono);
85
+ --ngxsmk-spreadsheet-row-height: 2.25rem;
86
+ --ngxsmk-spreadsheet-header-height: 2.5rem;
87
+ --ngxsmk-spreadsheet-cell-padding: 6px 10px;
88
+ --ngxsmk-spreadsheet-cell-font-size: var(--ngxsmk-text-body-sm-size);
89
+ --ngxsmk-spreadsheet-scrollbar-size: 8px;
90
+ --ngxsmk-spreadsheet-shadow: var(--ngxsmk-shadow-sm);
91
+ --ngxsmk-spreadsheet-radius: var(--ngxsmk-radius-lg);
92
+ --ngxsmk-spreadsheet-edit-bg: var(--ngxsmk-color-surface);
93
+ --ngxsmk-spreadsheet-edit-border: var(--ngxsmk-color-primary);
94
+ --ngxsmk-spreadsheet-row-hover-bg: var(--ngxsmk-color-surface-hover);
95
+ --ngxsmk-spreadsheet-col-hover-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent);
96
+ --ngxsmk-spreadsheet-frozen-shadow: 2px 0 4px rgba(0,0,0,0.08);
97
+ --ngxsmk-spreadsheet-selection-range: color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent);
98
+ --ngxsmk-input-group-bg: var(--ngxsmk-color-surface);
99
+ --ngxsmk-input-group-border: var(--ngxsmk-color-outline-strong);
100
+ --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
101
+ --ngxsmk-input-group-shadow: none;
102
+ --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
103
+ --ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
104
+ --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
105
+ --ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
106
+ --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
107
+ --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
108
+ --ngxsmk-input-group-height: 2.5rem;
109
+ --ngxsmk-input-group-padding: 0.75rem;
110
+ --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
111
+ --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
70
112
  --ngxsmk-control-height-sm: 2rem;
71
113
  --ngxsmk-control-height-md: 2.5rem;
72
114
  --ngxsmk-control-height-lg: 3rem;
@@ -79,6 +121,14 @@
79
121
  --ngxsmk-tracking-tight: -0.02em;
80
122
  --ngxsmk-tracking-normal: 0;
81
123
  --ngxsmk-tracking-wide: 0.08em;
124
+ --ngxsmk-font-weight-regular: 400;
125
+ --ngxsmk-font-weight-medium: 500;
126
+ --ngxsmk-font-weight-semibold: 600;
127
+ --ngxsmk-font-weight-bold: 700;
128
+ --ngxsmk-leading-none: 1;
129
+ --ngxsmk-leading-tight: 1.25;
130
+ --ngxsmk-leading-normal: 1.5;
131
+ --ngxsmk-leading-relaxed: 1.625;
82
132
  --ngxsmk-space-0: 0px;
83
133
  --ngxsmk-space-1: 0.25rem;
84
134
  --ngxsmk-space-2: 0.5rem;
@@ -193,12 +243,17 @@
193
243
  --ngxsmk-color-on-surface: #0A1317;
194
244
  --ngxsmk-color-surface-variant: #E4E9EE;
195
245
  --ngxsmk-color-on-surface-variant: #4E606F;
246
+ --ngxsmk-color-surface-muted: #F1F4F7;
247
+ --ngxsmk-color-surface-elevated: #FFFFFF;
248
+ --ngxsmk-color-surface-overlay: #FFFFFF;
249
+ --ngxsmk-color-on-surface-muted: #778593;
196
250
  --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
197
251
  --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
198
252
  --ngxsmk-color-surface-container: #FFFFFF;
199
253
  --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
200
254
  --ngxsmk-color-outline-strong: #CCD3DB;
201
255
  --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
256
+ --ngxsmk-color-outline-subtle: rgb(5 54 89 / 0.05);
202
257
  --ngxsmk-color-surface-1: #FFFFFF;
203
258
  --ngxsmk-color-surface-2: #F1F4F7;
204
259
  --ngxsmk-color-surface-3: #E4E9EE;
@@ -207,6 +262,14 @@
207
262
  --ngxsmk-color-ring: #E11D48;
208
263
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
264
  --ngxsmk-shadow-focus: 0 0 0 2px #FFE1E1, 0 0 0 4px color-mix(in srgb, #E11D48 45%, transparent);
265
+ --ngxsmk-chart-1: #2A78D6;
266
+ --ngxsmk-chart-2: #1BAF7A;
267
+ --ngxsmk-chart-3: #EDA100;
268
+ --ngxsmk-chart-4: #008300;
269
+ --ngxsmk-chart-5: #4A3AA7;
270
+ --ngxsmk-chart-6: #E34948;
271
+ --ngxsmk-chart-7: #E87BA4;
272
+ --ngxsmk-chart-8: #EB6834;
210
273
  --ngxsmk-color-tertiary: #BB6400;
211
274
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
275
  --ngxsmk-color-tertiary-container: #FAE7DA;
@@ -249,12 +312,17 @@
249
312
  --ngxsmk-color-on-surface: #DFE2E5;
250
313
  --ngxsmk-color-surface-variant: #28292C;
251
314
  --ngxsmk-color-on-surface-variant: #AAAFB5;
315
+ --ngxsmk-color-surface-muted: #141416;
316
+ --ngxsmk-color-surface-elevated: #28292C;
317
+ --ngxsmk-color-surface-overlay: #2F3136;
318
+ --ngxsmk-color-on-surface-muted: #777C85;
252
319
  --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
253
320
  --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
254
321
  --ngxsmk-color-surface-container: #28292C;
255
322
  --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
256
323
  --ngxsmk-color-outline-strong: #494D53;
257
324
  --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
325
+ --ngxsmk-color-outline-subtle: rgb(242 244 246 / 0.05);
258
326
  --ngxsmk-color-surface-1: #1F1F22;
259
327
  --ngxsmk-color-surface-2: #2A333B;
260
328
  --ngxsmk-color-surface-3: #3A4650;
@@ -263,6 +331,14 @@
263
331
  --ngxsmk-color-ring: #F15265;
264
332
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
333
  --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #F15265 25%, transparent), 0 0 0 4px color-mix(in srgb, #F15265 45%, transparent);
334
+ --ngxsmk-chart-1: #3987E5;
335
+ --ngxsmk-chart-2: #199E70;
336
+ --ngxsmk-chart-3: #C98500;
337
+ --ngxsmk-chart-4: #008300;
338
+ --ngxsmk-chart-5: #9085E9;
339
+ --ngxsmk-chart-6: #E66767;
340
+ --ngxsmk-chart-7: #D55181;
341
+ --ngxsmk-chart-8: #D95926;
266
342
  --ngxsmk-color-tertiary: #CB7D3C;
267
343
  --ngxsmk-color-on-tertiary: #210200;
268
344
  --ngxsmk-color-tertiary-container: #420D00;