@ngxsmk/theme 1.3.1 → 2.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/color.mjs +73 -76
  3. package/esm2022/lib/css.mjs +112 -30
  4. package/esm2022/lib/theme-injector.service.mjs +81 -0
  5. package/esm2022/lib/theme.service.mjs +19 -20
  6. package/esm2022/lib/token-adapter.mjs +80 -0
  7. package/esm2022/lib/tokens.mjs +16 -2
  8. package/esm2022/public-api.mjs +3 -1
  9. package/fesm2022/ngxsmk-theme.mjs +370 -124
  10. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  11. package/lib/color.d.ts +9 -15
  12. package/lib/color.d.ts.map +1 -1
  13. package/lib/css.d.ts.map +1 -1
  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 +26 -0
  19. package/lib/token-adapter.d.ts.map +1 -0
  20. package/lib/tokens.d.ts +4 -0
  21. package/lib/tokens.d.ts.map +1 -1
  22. package/package.json +38 -13
  23. package/public-api.d.ts +2 -0
  24. package/public-api.d.ts.map +1 -1
  25. package/styles/ngxsmk.css +137 -76
  26. package/styles/ngxsmk.emerald.css +137 -76
  27. package/styles/ngxsmk.neutral.css +114 -53
  28. package/styles/ngxsmk.rose.css +137 -76
  29. package/styles/ngxsmk.violet.css +136 -75
  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.1",
3
+ "version": "2.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,33 +9,58 @@
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",
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "git+https://github.com/NGXSMK/ngxsmk-ui-kit.git",
20
+ "directory": "packages/theme"
21
+ },
22
+ "homepage": "https://ngxsmk.github.io/ngxsmk-ui-kit",
23
+ "bugs": {
24
+ "url": "https://github.com/NGXSMK/ngxsmk-ui-kit/issues"
25
+ },
15
26
  "peerDependencies": {
16
27
  "@angular/common": ">=17.3.0",
17
28
  "@angular/core": ">=17.3.0"
18
29
  },
30
+ "peerDependenciesMeta": {
31
+ "tailwindcss": {
32
+ "optional": true
33
+ }
34
+ },
19
35
  "dependencies": {
20
36
  "tslib": "^2.3.0"
21
37
  },
22
38
  "sideEffects": [
23
39
  "**/*.css"
24
40
  ],
25
- "publishConfig": {
26
- "access": "public"
27
- },
28
- "module": "fesm2022/ngxsmk-theme.mjs",
29
- "typings": "index.d.ts",
30
41
  "exports": {
31
- "./package.json": {
32
- "default": "./package.json"
33
- },
34
42
  ".": {
35
43
  "types": "./index.d.ts",
44
+ "default": "./fesm2022/ngxsmk-theme.mjs",
36
45
  "esm2022": "./esm2022/ngxsmk-theme.mjs",
37
- "esm": "./esm2022/ngxsmk-theme.mjs",
38
- "default": "./fesm2022/ngxsmk-theme.mjs"
46
+ "esm": "./esm2022/ngxsmk-theme.mjs"
47
+ },
48
+ "./tailwind": {
49
+ "types": "./tailwind/index.d.ts",
50
+ "default": "./tailwind/index.js"
51
+ },
52
+ "./tailwind/v3": {
53
+ "types": "./tailwind/preset-v3.d.ts",
54
+ "default": "./tailwind/preset-v3.js"
55
+ },
56
+ "./tailwind/v4.css": "./tailwind-v4.css",
57
+ "./package.json": {
58
+ "default": "./package.json"
39
59
  }
40
- }
60
+ },
61
+ "publishConfig": {
62
+ "access": "public"
63
+ },
64
+ "module": "fesm2022/ngxsmk-theme.mjs",
65
+ "typings": "index.d.ts"
41
66
  }
package/public-api.d.ts CHANGED
@@ -5,4 +5,6 @@ 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';
8
10
  //# 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"}
package/styles/ngxsmk.css CHANGED
@@ -1,27 +1,27 @@
1
1
  /* Generated by @ngxsmk/theme — do not edit by hand. */
2
2
  :root {
3
- --ngxsmk-color-brand-50: #F0FFFA;
4
- --ngxsmk-color-brand-100: #E1FEF5;
5
- --ngxsmk-color-brand-200: #BFFDEA;
6
- --ngxsmk-color-brand-300: #92FBDB;
7
- --ngxsmk-color-brand-400: #57F9C7;
8
- --ngxsmk-color-brand-500: #26F8B7;
9
- --ngxsmk-color-brand-600: #08EDA6;
10
- --ngxsmk-color-brand-700: #07C58A;
11
- --ngxsmk-color-brand-800: #059669;
12
- --ngxsmk-color-brand-900: #047B56;
13
- --ngxsmk-color-brand-950: #034F37;
14
- --ngxsmk-color-secondary-50: #F0F5FF;
15
- --ngxsmk-color-secondary-100: #E1EAFE;
16
- --ngxsmk-color-secondary-200: #BFD2FD;
17
- --ngxsmk-color-secondary-300: #92B3FB;
18
- --ngxsmk-color-secondary-400: #578AF9;
19
- --ngxsmk-color-secondary-500: #2667F8;
20
- --ngxsmk-color-secondary-600: #084FED;
21
- --ngxsmk-color-secondary-700: #0742C5;
22
- --ngxsmk-color-secondary-800: #053296;
23
- --ngxsmk-color-secondary-900: #04297B;
24
- --ngxsmk-color-secondary-950: #031A4F;
3
+ --ngxsmk-color-brand-50: #EEF8F3;
4
+ --ngxsmk-color-brand-100: #DEF1E7;
5
+ --ngxsmk-color-brand-200: #B7DFCB;
6
+ --ngxsmk-color-brand-300: #86C8A9;
7
+ --ngxsmk-color-brand-400: #45A77F;
8
+ --ngxsmk-color-brand-500: #059669;
9
+ --ngxsmk-color-brand-600: #007348;
10
+ --ngxsmk-color-brand-700: #005A34;
11
+ --ngxsmk-color-brand-800: #004222;
12
+ --ngxsmk-color-brand-900: #002E14;
13
+ --ngxsmk-color-brand-950: #001406;
14
+ --ngxsmk-color-secondary-50: #EEF7FB;
15
+ --ngxsmk-color-secondary-100: #DDEFF7;
16
+ --ngxsmk-color-secondary-200: #B5DBEC;
17
+ --ngxsmk-color-secondary-300: #83C2DC;
18
+ --ngxsmk-color-secondary-400: #419FC2;
19
+ --ngxsmk-color-secondary-500: #008EB6;
20
+ --ngxsmk-color-secondary-600: #00698F;
21
+ --ngxsmk-color-secondary-700: #005175;
22
+ --ngxsmk-color-secondary-800: #003B58;
23
+ --ngxsmk-color-secondary-900: #00273F;
24
+ --ngxsmk-color-secondary-950: #00111F;
25
25
  --ngxsmk-color-neutral-50: #F1F4F7;
26
26
  --ngxsmk-color-neutral-100: #E4E9EE;
27
27
  --ngxsmk-color-neutral-200: #CCD3DB;
@@ -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);
@@ -67,6 +67,43 @@
67
67
  --ngxsmk-switch-thumb-size: 0.875rem;
68
68
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
69
69
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
70
+ --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
71
+ --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
72
+ --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
73
+ --ngxsmk-spreadsheet-border: var(--ngxsmk-color-outline);
74
+ --ngxsmk-spreadsheet-grid-color: var(--ngxsmk-color-outline-variant);
75
+ --ngxsmk-spreadsheet-hover-bg: var(--ngxsmk-color-surface-hover);
76
+ --ngxsmk-spreadsheet-selected-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent);
77
+ --ngxsmk-spreadsheet-active-border: var(--ngxsmk-color-primary);
78
+ --ngxsmk-spreadsheet-font: var(--ngxsmk-font-sans);
79
+ --ngxsmk-spreadsheet-font-mono: var(--ngxsmk-font-mono);
80
+ --ngxsmk-spreadsheet-row-height: 2.25rem;
81
+ --ngxsmk-spreadsheet-header-height: 2.5rem;
82
+ --ngxsmk-spreadsheet-cell-padding: 6px 10px;
83
+ --ngxsmk-spreadsheet-cell-font-size: var(--ngxsmk-text-body-sm-size);
84
+ --ngxsmk-spreadsheet-scrollbar-size: 8px;
85
+ --ngxsmk-spreadsheet-shadow: var(--ngxsmk-shadow-sm);
86
+ --ngxsmk-spreadsheet-radius: var(--ngxsmk-radius-lg);
87
+ --ngxsmk-spreadsheet-edit-bg: var(--ngxsmk-color-surface);
88
+ --ngxsmk-spreadsheet-edit-border: var(--ngxsmk-color-primary);
89
+ --ngxsmk-spreadsheet-row-hover-bg: var(--ngxsmk-color-surface-hover);
90
+ --ngxsmk-spreadsheet-col-hover-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent);
91
+ --ngxsmk-spreadsheet-frozen-shadow: 2px 0 4px rgba(0,0,0,0.08);
92
+ --ngxsmk-spreadsheet-selection-range: color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent);
93
+ --ngxsmk-input-group-bg: var(--ngxsmk-color-surface);
94
+ --ngxsmk-input-group-border: var(--ngxsmk-color-outline-strong);
95
+ --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
96
+ --ngxsmk-input-group-shadow: none;
97
+ --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
98
+ --ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
99
+ --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
100
+ --ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
101
+ --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
102
+ --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
103
+ --ngxsmk-input-group-height: 2.5rem;
104
+ --ngxsmk-input-group-padding: 0.75rem;
105
+ --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
106
+ --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
70
107
  --ngxsmk-control-height-sm: 2rem;
71
108
  --ngxsmk-control-height-md: 2.5rem;
72
109
  --ngxsmk-control-height-lg: 3rem;
@@ -79,6 +116,14 @@
79
116
  --ngxsmk-tracking-tight: -0.02em;
80
117
  --ngxsmk-tracking-normal: 0;
81
118
  --ngxsmk-tracking-wide: 0.08em;
119
+ --ngxsmk-font-weight-regular: 400;
120
+ --ngxsmk-font-weight-medium: 500;
121
+ --ngxsmk-font-weight-semibold: 600;
122
+ --ngxsmk-font-weight-bold: 700;
123
+ --ngxsmk-leading-none: 1;
124
+ --ngxsmk-leading-tight: 1.25;
125
+ --ngxsmk-leading-normal: 1.5;
126
+ --ngxsmk-leading-relaxed: 1.625;
82
127
  --ngxsmk-space-0: 0px;
83
128
  --ngxsmk-space-1: 0.25rem;
84
129
  --ngxsmk-space-2: 0.5rem;
@@ -177,16 +222,16 @@
177
222
  color-scheme: light;
178
223
  --ngxsmk-color-primary: #059669;
179
224
  --ngxsmk-color-on-primary: #FFFFFF;
180
- --ngxsmk-color-primary-hover: #046F4D;
181
- --ngxsmk-color-primary-active: #035139;
182
- --ngxsmk-color-primary-container: #E1FEF5;
183
- --ngxsmk-color-on-primary-container: #047B56;
184
- --ngxsmk-color-secondary: #053296;
225
+ --ngxsmk-color-primary-hover: #000000;
226
+ --ngxsmk-color-primary-active: #000000;
227
+ --ngxsmk-color-primary-container: #DEF1E7;
228
+ --ngxsmk-color-on-primary-container: #002E14;
229
+ --ngxsmk-color-secondary: #008EB6;
185
230
  --ngxsmk-color-on-secondary: #FFFFFF;
186
- --ngxsmk-color-secondary-hover: #04256F;
187
- --ngxsmk-color-secondary-active: #031B51;
188
- --ngxsmk-color-secondary-container: #E1EAFE;
189
- --ngxsmk-color-on-secondary-container: #04297B;
231
+ --ngxsmk-color-secondary-hover: #000009;
232
+ --ngxsmk-color-secondary-active: #000009;
233
+ --ngxsmk-color-secondary-container: #DDEFF7;
234
+ --ngxsmk-color-on-secondary-container: #00273F;
190
235
  --ngxsmk-color-background: #F1F4F7;
191
236
  --ngxsmk-color-on-background: #0A1317;
192
237
  --ngxsmk-color-surface: #FFFFFF;
@@ -206,43 +251,51 @@
206
251
  --ngxsmk-color-surface-5: #A4B0BC;
207
252
  --ngxsmk-color-ring: #059669;
208
253
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
- --ngxsmk-shadow-focus: 0 0 0 2px #E1FEF5, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
210
- --ngxsmk-color-tertiary: #2659F8;
254
+ --ngxsmk-shadow-focus: 0 0 0 2px #DEF1E7, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
255
+ --ngxsmk-chart-1: #2A78D6;
256
+ --ngxsmk-chart-2: #1BAF7A;
257
+ --ngxsmk-chart-3: #EDA100;
258
+ --ngxsmk-chart-4: #008300;
259
+ --ngxsmk-chart-5: #4A3AA7;
260
+ --ngxsmk-chart-6: #E34948;
261
+ --ngxsmk-chart-7: #E87BA4;
262
+ --ngxsmk-chart-8: #EB6834;
263
+ --ngxsmk-color-tertiary: #008DBA;
211
264
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
- --ngxsmk-color-tertiary-container: #E1E8FE;
213
- --ngxsmk-color-on-tertiary-container: #04217B;
265
+ --ngxsmk-color-tertiary-container: #DDEEF7;
266
+ --ngxsmk-color-on-tertiary-container: #002742;
214
267
  --ngxsmk-color-success: #0D8626;
215
268
  --ngxsmk-color-on-success: #FFFFFF;
216
- --ngxsmk-color-success-container: #E3FCE8;
217
- --ngxsmk-color-on-success-container: #0D8626;
269
+ --ngxsmk-color-success-container: #DFF1DF;
270
+ --ngxsmk-color-on-success-container: #004300;
218
271
  --ngxsmk-color-warning: #E9AF08;
219
272
  --ngxsmk-color-on-warning: #FFFFFF;
220
- --ngxsmk-color-warning-container: #FEF7E1;
221
- --ngxsmk-color-on-warning-container: #9E7705;
273
+ --ngxsmk-color-warning-container: #F5EAD5;
274
+ --ngxsmk-color-on-warning-container: #522700;
222
275
  --ngxsmk-color-error: #E3193B;
223
276
  --ngxsmk-color-on-error: #FFFFFF;
224
- --ngxsmk-color-error-container: #FCE3E8;
225
- --ngxsmk-color-on-error-container: #931026;
277
+ --ngxsmk-color-error-container: #FFE1DF;
278
+ --ngxsmk-color-on-error-container: #780000;
226
279
  --ngxsmk-color-info: #2563EB;
227
280
  --ngxsmk-color-on-info: #FFFFFF;
228
- --ngxsmk-color-info-container: #E3EBFC;
229
- --ngxsmk-color-on-info-container: #0E3895;
281
+ --ngxsmk-color-info-container: #DDECFF;
282
+ --ngxsmk-color-on-info-container: #001E8D;
230
283
  }
231
284
 
232
285
  :root.dark, :root.dark body, .dark {
233
286
  color-scheme: dark;
234
- --ngxsmk-color-primary: #57F9C7;
287
+ --ngxsmk-color-primary: #45A77F;
235
288
  --ngxsmk-color-on-primary: #FFFFFF;
236
- --ngxsmk-color-primary-hover: #92FBDB;
237
- --ngxsmk-color-primary-active: #BFFDEA;
238
- --ngxsmk-color-primary-container: #047B56;
239
- --ngxsmk-color-on-primary-container: #E1FEF5;
240
- --ngxsmk-color-secondary: #578AF9;
289
+ --ngxsmk-color-primary-hover: #86C8A9;
290
+ --ngxsmk-color-primary-active: #B7DFCB;
291
+ --ngxsmk-color-primary-container: #002E14;
292
+ --ngxsmk-color-on-primary-container: #DEF1E7;
293
+ --ngxsmk-color-secondary: #419FC2;
241
294
  --ngxsmk-color-on-secondary: #FFFFFF;
242
- --ngxsmk-color-secondary-hover: #92B3FB;
243
- --ngxsmk-color-secondary-active: #BFD2FD;
244
- --ngxsmk-color-secondary-container: #04297B;
245
- --ngxsmk-color-on-secondary-container: #E1EAFE;
295
+ --ngxsmk-color-secondary-hover: #83C2DC;
296
+ --ngxsmk-color-secondary-active: #B5DBEC;
297
+ --ngxsmk-color-secondary-container: #00273F;
298
+ --ngxsmk-color-on-secondary-container: #DDEFF7;
246
299
  --ngxsmk-color-background: #111112;
247
300
  --ngxsmk-color-on-background: #DFE2E5;
248
301
  --ngxsmk-color-surface: #1F1F22;
@@ -260,29 +313,37 @@
260
313
  --ngxsmk-color-surface-3: #3A4650;
261
314
  --ngxsmk-color-surface-4: #4E606F;
262
315
  --ngxsmk-color-surface-5: #778593;
263
- --ngxsmk-color-ring: #57F9C7;
316
+ --ngxsmk-color-ring: #45A77F;
264
317
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
- --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #57F9C7 25%, transparent), 0 0 0 4px color-mix(in srgb, #57F9C7 45%, transparent);
266
- --ngxsmk-color-tertiary: #577EF9;
267
- --ngxsmk-color-on-tertiary: #03154F;
268
- --ngxsmk-color-tertiary-container: #04217B;
269
- --ngxsmk-color-on-tertiary-container: #E1E8FE;
270
- --ngxsmk-color-success: #61F07E;
271
- --ngxsmk-color-on-success: #074A15;
272
- --ngxsmk-color-success-container: #074A15;
273
- --ngxsmk-color-on-success-container: #99F5AC;
274
- --ngxsmk-color-warning: #F9D057;
275
- --ngxsmk-color-on-warning: #4F3B03;
276
- --ngxsmk-color-warning-container: #4F3B03;
277
- --ngxsmk-color-on-warning-container: #FBE093;
278
- --ngxsmk-color-error: #EE637A;
279
- --ngxsmk-color-on-error: #4A0813;
280
- --ngxsmk-color-error-container: #4A0813;
281
- --ngxsmk-color-on-error-container: #F49AA9;
282
- --ngxsmk-color-info: #608DF0;
283
- --ngxsmk-color-on-info: #071C4B;
284
- --ngxsmk-color-info-container: #071C4B;
285
- --ngxsmk-color-on-info-container: #98B5F6;
318
+ --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);
319
+ --ngxsmk-chart-1: #3987E5;
320
+ --ngxsmk-chart-2: #199E70;
321
+ --ngxsmk-chart-3: #C98500;
322
+ --ngxsmk-chart-4: #008300;
323
+ --ngxsmk-chart-5: #9085E9;
324
+ --ngxsmk-chart-6: #E66767;
325
+ --ngxsmk-chart-7: #D55181;
326
+ --ngxsmk-chart-8: #D95926;
327
+ --ngxsmk-color-tertiary: #419EC6;
328
+ --ngxsmk-color-on-tertiary: #001021;
329
+ --ngxsmk-color-tertiary-container: #002742;
330
+ --ngxsmk-color-on-tertiary-container: #DDEEF7;
331
+ --ngxsmk-color-success: #51A957;
332
+ --ngxsmk-color-on-success: #001500;
333
+ --ngxsmk-color-success-container: #001500;
334
+ --ngxsmk-color-on-success-container: #8CCA8D;
335
+ --ngxsmk-color-warning: #BA8900;
336
+ --ngxsmk-color-on-warning: #1C0700;
337
+ --ngxsmk-color-warning-container: #1C0700;
338
+ --ngxsmk-color-on-warning-container: #E9AF08;
339
+ --ngxsmk-color-error: #F3515A;
340
+ --ngxsmk-color-on-error: #2E0000;
341
+ --ngxsmk-color-error-container: #2E0000;
342
+ --ngxsmk-color-on-error-container: #FF8F8F;
343
+ --ngxsmk-color-info: #518BFF;
344
+ --ngxsmk-color-on-info: #000238;
345
+ --ngxsmk-color-info-container: #000238;
346
+ --ngxsmk-color-on-info-container: #88B6FF;
286
347
  }
287
348
 
288
349
  @media (prefers-reduced-motion: reduce) {
package/styles/ngxsmk.emerald.css CHANGED
@@ -1,27 +1,27 @@
1
1
  /* Generated by @ngxsmk/theme — do not edit by hand. */
2
2
  :root {
3
- --ngxsmk-color-brand-50: #F0FFFA;
4
- --ngxsmk-color-brand-100: #E1FEF5;
5
- --ngxsmk-color-brand-200: #BFFDEA;
6
- --ngxsmk-color-brand-300: #92FBDB;
7
- --ngxsmk-color-brand-400: #57F9C7;
8
- --ngxsmk-color-brand-500: #26F8B7;
9
- --ngxsmk-color-brand-600: #08EDA6;
10
- --ngxsmk-color-brand-700: #07C58A;
11
- --ngxsmk-color-brand-800: #059669;
12
- --ngxsmk-color-brand-900: #047B56;
13
- --ngxsmk-color-brand-950: #034F37;
14
- --ngxsmk-color-secondary-50: #F0F5FF;
15
- --ngxsmk-color-secondary-100: #E1EAFE;
16
- --ngxsmk-color-secondary-200: #BFD2FD;
17
- --ngxsmk-color-secondary-300: #92B3FB;
18
- --ngxsmk-color-secondary-400: #578AF9;
19
- --ngxsmk-color-secondary-500: #2667F8;
20
- --ngxsmk-color-secondary-600: #084FED;
21
- --ngxsmk-color-secondary-700: #0742C5;
22
- --ngxsmk-color-secondary-800: #053296;
23
- --ngxsmk-color-secondary-900: #04297B;
24
- --ngxsmk-color-secondary-950: #031A4F;
3
+ --ngxsmk-color-brand-50: #EEF8F3;
4
+ --ngxsmk-color-brand-100: #DEF1E7;
5
+ --ngxsmk-color-brand-200: #B7DFCB;
6
+ --ngxsmk-color-brand-300: #86C8A9;
7
+ --ngxsmk-color-brand-400: #45A77F;
8
+ --ngxsmk-color-brand-500: #059669;
9
+ --ngxsmk-color-brand-600: #007348;
10
+ --ngxsmk-color-brand-700: #005A34;
11
+ --ngxsmk-color-brand-800: #004222;
12
+ --ngxsmk-color-brand-900: #002E14;
13
+ --ngxsmk-color-brand-950: #001406;
14
+ --ngxsmk-color-secondary-50: #EEF7FB;
15
+ --ngxsmk-color-secondary-100: #DDEFF7;
16
+ --ngxsmk-color-secondary-200: #B5DBEC;
17
+ --ngxsmk-color-secondary-300: #83C2DC;
18
+ --ngxsmk-color-secondary-400: #419FC2;
19
+ --ngxsmk-color-secondary-500: #008EB6;
20
+ --ngxsmk-color-secondary-600: #00698F;
21
+ --ngxsmk-color-secondary-700: #005175;
22
+ --ngxsmk-color-secondary-800: #003B58;
23
+ --ngxsmk-color-secondary-900: #00273F;
24
+ --ngxsmk-color-secondary-950: #00111F;
25
25
  --ngxsmk-color-neutral-50: #F1F4F7;
26
26
  --ngxsmk-color-neutral-100: #E4E9EE;
27
27
  --ngxsmk-color-neutral-200: #CCD3DB;
@@ -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);
@@ -67,6 +67,43 @@
67
67
  --ngxsmk-switch-thumb-size: 0.875rem;
68
68
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
69
69
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
70
+ --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
71
+ --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
72
+ --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
73
+ --ngxsmk-spreadsheet-border: var(--ngxsmk-color-outline);
74
+ --ngxsmk-spreadsheet-grid-color: var(--ngxsmk-color-outline-variant);
75
+ --ngxsmk-spreadsheet-hover-bg: var(--ngxsmk-color-surface-hover);
76
+ --ngxsmk-spreadsheet-selected-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent);
77
+ --ngxsmk-spreadsheet-active-border: var(--ngxsmk-color-primary);
78
+ --ngxsmk-spreadsheet-font: var(--ngxsmk-font-sans);
79
+ --ngxsmk-spreadsheet-font-mono: var(--ngxsmk-font-mono);
80
+ --ngxsmk-spreadsheet-row-height: 2.25rem;
81
+ --ngxsmk-spreadsheet-header-height: 2.5rem;
82
+ --ngxsmk-spreadsheet-cell-padding: 6px 10px;
83
+ --ngxsmk-spreadsheet-cell-font-size: var(--ngxsmk-text-body-sm-size);
84
+ --ngxsmk-spreadsheet-scrollbar-size: 8px;
85
+ --ngxsmk-spreadsheet-shadow: var(--ngxsmk-shadow-sm);
86
+ --ngxsmk-spreadsheet-radius: var(--ngxsmk-radius-lg);
87
+ --ngxsmk-spreadsheet-edit-bg: var(--ngxsmk-color-surface);
88
+ --ngxsmk-spreadsheet-edit-border: var(--ngxsmk-color-primary);
89
+ --ngxsmk-spreadsheet-row-hover-bg: var(--ngxsmk-color-surface-hover);
90
+ --ngxsmk-spreadsheet-col-hover-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent);
91
+ --ngxsmk-spreadsheet-frozen-shadow: 2px 0 4px rgba(0,0,0,0.08);
92
+ --ngxsmk-spreadsheet-selection-range: color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent);
93
+ --ngxsmk-input-group-bg: var(--ngxsmk-color-surface);
94
+ --ngxsmk-input-group-border: var(--ngxsmk-color-outline-strong);
95
+ --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
96
+ --ngxsmk-input-group-shadow: none;
97
+ --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
98
+ --ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
99
+ --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
100
+ --ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
101
+ --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
102
+ --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
103
+ --ngxsmk-input-group-height: 2.5rem;
104
+ --ngxsmk-input-group-padding: 0.75rem;
105
+ --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
106
+ --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
70
107
  --ngxsmk-control-height-sm: 2rem;
71
108
  --ngxsmk-control-height-md: 2.5rem;
72
109
  --ngxsmk-control-height-lg: 3rem;
@@ -79,6 +116,14 @@
79
116
  --ngxsmk-tracking-tight: -0.02em;
80
117
  --ngxsmk-tracking-normal: 0;
81
118
  --ngxsmk-tracking-wide: 0.08em;
119
+ --ngxsmk-font-weight-regular: 400;
120
+ --ngxsmk-font-weight-medium: 500;
121
+ --ngxsmk-font-weight-semibold: 600;
122
+ --ngxsmk-font-weight-bold: 700;
123
+ --ngxsmk-leading-none: 1;
124
+ --ngxsmk-leading-tight: 1.25;
125
+ --ngxsmk-leading-normal: 1.5;
126
+ --ngxsmk-leading-relaxed: 1.625;
82
127
  --ngxsmk-space-0: 0px;
83
128
  --ngxsmk-space-1: 0.25rem;
84
129
  --ngxsmk-space-2: 0.5rem;
@@ -177,16 +222,16 @@
177
222
  color-scheme: light;
178
223
  --ngxsmk-color-primary: #059669;
179
224
  --ngxsmk-color-on-primary: #FFFFFF;
180
- --ngxsmk-color-primary-hover: #046F4D;
181
- --ngxsmk-color-primary-active: #035139;
182
- --ngxsmk-color-primary-container: #E1FEF5;
183
- --ngxsmk-color-on-primary-container: #047B56;
184
- --ngxsmk-color-secondary: #053296;
225
+ --ngxsmk-color-primary-hover: #000000;
226
+ --ngxsmk-color-primary-active: #000000;
227
+ --ngxsmk-color-primary-container: #DEF1E7;
228
+ --ngxsmk-color-on-primary-container: #002E14;
229
+ --ngxsmk-color-secondary: #008EB6;
185
230
  --ngxsmk-color-on-secondary: #FFFFFF;
186
- --ngxsmk-color-secondary-hover: #04256F;
187
- --ngxsmk-color-secondary-active: #031B51;
188
- --ngxsmk-color-secondary-container: #E1EAFE;
189
- --ngxsmk-color-on-secondary-container: #04297B;
231
+ --ngxsmk-color-secondary-hover: #000009;
232
+ --ngxsmk-color-secondary-active: #000009;
233
+ --ngxsmk-color-secondary-container: #DDEFF7;
234
+ --ngxsmk-color-on-secondary-container: #00273F;
190
235
  --ngxsmk-color-background: #F1F4F7;
191
236
  --ngxsmk-color-on-background: #0A1317;
192
237
  --ngxsmk-color-surface: #FFFFFF;
@@ -206,43 +251,51 @@
206
251
  --ngxsmk-color-surface-5: #A4B0BC;
207
252
  --ngxsmk-color-ring: #059669;
208
253
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
- --ngxsmk-shadow-focus: 0 0 0 2px #E1FEF5, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
210
- --ngxsmk-color-tertiary: #2659F8;
254
+ --ngxsmk-shadow-focus: 0 0 0 2px #DEF1E7, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
255
+ --ngxsmk-chart-1: #2A78D6;
256
+ --ngxsmk-chart-2: #1BAF7A;
257
+ --ngxsmk-chart-3: #EDA100;
258
+ --ngxsmk-chart-4: #008300;
259
+ --ngxsmk-chart-5: #4A3AA7;
260
+ --ngxsmk-chart-6: #E34948;
261
+ --ngxsmk-chart-7: #E87BA4;
262
+ --ngxsmk-chart-8: #EB6834;
263
+ --ngxsmk-color-tertiary: #008DBA;
211
264
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
- --ngxsmk-color-tertiary-container: #E1E8FE;
213
- --ngxsmk-color-on-tertiary-container: #04217B;
265
+ --ngxsmk-color-tertiary-container: #DDEEF7;
266
+ --ngxsmk-color-on-tertiary-container: #002742;
214
267
  --ngxsmk-color-success: #0D8626;
215
268
  --ngxsmk-color-on-success: #FFFFFF;
216
- --ngxsmk-color-success-container: #E3FCE8;
217
- --ngxsmk-color-on-success-container: #0D8626;
269
+ --ngxsmk-color-success-container: #DFF1DF;
270
+ --ngxsmk-color-on-success-container: #004300;
218
271
  --ngxsmk-color-warning: #E9AF08;
219
272
  --ngxsmk-color-on-warning: #FFFFFF;
220
- --ngxsmk-color-warning-container: #FEF7E1;
221
- --ngxsmk-color-on-warning-container: #9E7705;
273
+ --ngxsmk-color-warning-container: #F5EAD5;
274
+ --ngxsmk-color-on-warning-container: #522700;
222
275
  --ngxsmk-color-error: #E3193B;
223
276
  --ngxsmk-color-on-error: #FFFFFF;
224
- --ngxsmk-color-error-container: #FCE3E8;
225
- --ngxsmk-color-on-error-container: #931026;
277
+ --ngxsmk-color-error-container: #FFE1DF;
278
+ --ngxsmk-color-on-error-container: #780000;
226
279
  --ngxsmk-color-info: #2563EB;
227
280
  --ngxsmk-color-on-info: #FFFFFF;
228
- --ngxsmk-color-info-container: #E3EBFC;
229
- --ngxsmk-color-on-info-container: #0E3895;
281
+ --ngxsmk-color-info-container: #DDECFF;
282
+ --ngxsmk-color-on-info-container: #001E8D;
230
283
  }
231
284
 
232
285
  :root.dark, :root.dark body, .dark {
233
286
  color-scheme: dark;
234
- --ngxsmk-color-primary: #57F9C7;
287
+ --ngxsmk-color-primary: #45A77F;
235
288
  --ngxsmk-color-on-primary: #FFFFFF;
236
- --ngxsmk-color-primary-hover: #92FBDB;
237
- --ngxsmk-color-primary-active: #BFFDEA;
238
- --ngxsmk-color-primary-container: #047B56;
239
- --ngxsmk-color-on-primary-container: #E1FEF5;
240
- --ngxsmk-color-secondary: #578AF9;
289
+ --ngxsmk-color-primary-hover: #86C8A9;
290
+ --ngxsmk-color-primary-active: #B7DFCB;
291
+ --ngxsmk-color-primary-container: #002E14;
292
+ --ngxsmk-color-on-primary-container: #DEF1E7;
293
+ --ngxsmk-color-secondary: #419FC2;
241
294
  --ngxsmk-color-on-secondary: #FFFFFF;
242
- --ngxsmk-color-secondary-hover: #92B3FB;
243
- --ngxsmk-color-secondary-active: #BFD2FD;
244
- --ngxsmk-color-secondary-container: #04297B;
245
- --ngxsmk-color-on-secondary-container: #E1EAFE;
295
+ --ngxsmk-color-secondary-hover: #83C2DC;
296
+ --ngxsmk-color-secondary-active: #B5DBEC;
297
+ --ngxsmk-color-secondary-container: #00273F;
298
+ --ngxsmk-color-on-secondary-container: #DDEFF7;
246
299
  --ngxsmk-color-background: #111112;
247
300
  --ngxsmk-color-on-background: #DFE2E5;
248
301
  --ngxsmk-color-surface: #1F1F22;
@@ -260,29 +313,37 @@
260
313
  --ngxsmk-color-surface-3: #3A4650;
261
314
  --ngxsmk-color-surface-4: #4E606F;
262
315
  --ngxsmk-color-surface-5: #778593;
263
- --ngxsmk-color-ring: #57F9C7;
316
+ --ngxsmk-color-ring: #45A77F;
264
317
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
- --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #57F9C7 25%, transparent), 0 0 0 4px color-mix(in srgb, #57F9C7 45%, transparent);
266
- --ngxsmk-color-tertiary: #577EF9;
267
- --ngxsmk-color-on-tertiary: #03154F;
268
- --ngxsmk-color-tertiary-container: #04217B;
269
- --ngxsmk-color-on-tertiary-container: #E1E8FE;
270
- --ngxsmk-color-success: #61F07E;
271
- --ngxsmk-color-on-success: #074A15;
272
- --ngxsmk-color-success-container: #074A15;
273
- --ngxsmk-color-on-success-container: #99F5AC;
274
- --ngxsmk-color-warning: #F9D057;
275
- --ngxsmk-color-on-warning: #4F3B03;
276
- --ngxsmk-color-warning-container: #4F3B03;
277
- --ngxsmk-color-on-warning-container: #FBE093;
278
- --ngxsmk-color-error: #EE637A;
279
- --ngxsmk-color-on-error: #4A0813;
280
- --ngxsmk-color-error-container: #4A0813;
281
- --ngxsmk-color-on-error-container: #F49AA9;
282
- --ngxsmk-color-info: #608DF0;
283
- --ngxsmk-color-on-info: #071C4B;
284
- --ngxsmk-color-info-container: #071C4B;
285
- --ngxsmk-color-on-info-container: #98B5F6;
318
+ --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);
319
+ --ngxsmk-chart-1: #3987E5;
320
+ --ngxsmk-chart-2: #199E70;
321
+ --ngxsmk-chart-3: #C98500;
322
+ --ngxsmk-chart-4: #008300;
323
+ --ngxsmk-chart-5: #9085E9;
324
+ --ngxsmk-chart-6: #E66767;
325
+ --ngxsmk-chart-7: #D55181;
326
+ --ngxsmk-chart-8: #D95926;
327
+ --ngxsmk-color-tertiary: #419EC6;
328
+ --ngxsmk-color-on-tertiary: #001021;
329
+ --ngxsmk-color-tertiary-container: #002742;
330
+ --ngxsmk-color-on-tertiary-container: #DDEEF7;
331
+ --ngxsmk-color-success: #51A957;
332
+ --ngxsmk-color-on-success: #001500;
333
+ --ngxsmk-color-success-container: #001500;
334
+ --ngxsmk-color-on-success-container: #8CCA8D;
335
+ --ngxsmk-color-warning: #BA8900;
336
+ --ngxsmk-color-on-warning: #1C0700;
337
+ --ngxsmk-color-warning-container: #1C0700;
338
+ --ngxsmk-color-on-warning-container: #E9AF08;
339
+ --ngxsmk-color-error: #F3515A;
340
+ --ngxsmk-color-on-error: #2E0000;
341
+ --ngxsmk-color-error-container: #2E0000;
342
+ --ngxsmk-color-on-error-container: #FF8F8F;
343
+ --ngxsmk-color-info: #518BFF;
344
+ --ngxsmk-color-on-info: #000238;
345
+ --ngxsmk-color-info-container: #000238;
346
+ --ngxsmk-color-on-info-container: #88B6FF;
286
347
  }
287
348
 
288
349
  @media (prefers-reduced-motion: reduce) {