@ngxsmk/theme 1.3.2 → 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 (27) hide show
  1. package/README.md +12 -0
  2. package/esm2022/lib/css.mjs +112 -30
  3. package/esm2022/lib/theme-injector.service.mjs +81 -0
  4. package/esm2022/lib/theme.service.mjs +19 -20
  5. package/esm2022/lib/token-adapter.mjs +80 -0
  6. package/esm2022/lib/tokens.mjs +16 -2
  7. package/esm2022/public-api.mjs +3 -1
  8. package/fesm2022/ngxsmk-theme.mjs +298 -49
  9. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  10. package/lib/css.d.ts.map +1 -1
  11. package/lib/theme-injector.service.d.ts +37 -0
  12. package/lib/theme-injector.service.d.ts.map +1 -0
  13. package/lib/theme.service.d.ts +12 -6
  14. package/lib/theme.service.d.ts.map +1 -1
  15. package/lib/token-adapter.d.ts +26 -0
  16. package/lib/token-adapter.d.ts.map +1 -0
  17. package/lib/tokens.d.ts +4 -0
  18. package/lib/tokens.d.ts.map +1 -1
  19. package/package.json +29 -13
  20. package/public-api.d.ts +2 -0
  21. package/public-api.d.ts.map +1 -1
  22. package/styles/ngxsmk.css +62 -1
  23. package/styles/ngxsmk.emerald.css +62 -1
  24. package/styles/ngxsmk.neutral.css +62 -1
  25. package/styles/ngxsmk.rose.css +62 -1
  26. package/styles/ngxsmk.violet.css +62 -1
  27. package/tailwind-v4.css +234 -0
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);
@@ -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;
@@ -207,6 +252,14 @@
207
252
  --ngxsmk-color-ring: #059669;
208
253
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
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;
210
263
  --ngxsmk-color-tertiary: #008DBA;
211
264
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
265
  --ngxsmk-color-tertiary-container: #DDEEF7;
@@ -263,6 +316,14 @@
263
316
  --ngxsmk-color-ring: #45A77F;
264
317
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
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;
266
327
  --ngxsmk-color-tertiary: #419EC6;
267
328
  --ngxsmk-color-on-tertiary: #001021;
268
329
  --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);
@@ -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;
@@ -207,6 +252,14 @@
207
252
  --ngxsmk-color-ring: #059669;
208
253
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
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;
210
263
  --ngxsmk-color-tertiary: #008DBA;
211
264
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
265
  --ngxsmk-color-tertiary-container: #DDEEF7;
@@ -263,6 +316,14 @@
263
316
  --ngxsmk-color-ring: #45A77F;
264
317
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
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;
266
327
  --ngxsmk-color-tertiary: #419EC6;
267
328
  --ngxsmk-color-on-tertiary: #001021;
268
329
  --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);
@@ -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;
@@ -207,6 +252,14 @@
207
252
  --ngxsmk-color-ring: #18181B;
208
253
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
254
  --ngxsmk-shadow-focus: 0 0 0 2px #F4F4F5, 0 0 0 4px color-mix(in srgb, #18181B 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;
210
263
  --ngxsmk-color-tertiary: #787375;
211
264
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
265
  --ngxsmk-color-tertiary-container: #ECEBEB;
@@ -263,6 +316,14 @@
263
316
  --ngxsmk-color-ring: #D4D4D8;
264
317
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
318
  --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);
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;
266
327
  --ngxsmk-color-tertiary: #959193;
267
328
  --ngxsmk-color-on-tertiary: #0E0D0E;
268
329
  --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);
@@ -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;
@@ -207,6 +252,14 @@
207
252
  --ngxsmk-color-ring: #E11D48;
208
253
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
254
  --ngxsmk-shadow-focus: 0 0 0 2px #FFE1E1, 0 0 0 4px color-mix(in srgb, #E11D48 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;
210
263
  --ngxsmk-color-tertiary: #BB6400;
211
264
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
265
  --ngxsmk-color-tertiary-container: #FAE7DA;
@@ -263,6 +316,14 @@
263
316
  --ngxsmk-color-ring: #F15265;
264
317
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
318
  --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);
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;
266
327
  --ngxsmk-color-tertiary: #CB7D3C;
267
328
  --ngxsmk-color-on-tertiary: #210200;
268
329
  --ngxsmk-color-tertiary-container: #420D00;
package/styles/ngxsmk.violet.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);
@@ -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;
@@ -207,6 +252,14 @@
207
252
  --ngxsmk-color-ring: #7C3AED;
208
253
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
254
  --ngxsmk-shadow-focus: 0 0 0 2px #ECE6FF, 0 0 0 4px color-mix(in srgb, #7C3AED 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;
210
263
  --ngxsmk-color-tertiary: #D00071;
211
264
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
265
  --ngxsmk-color-tertiary-container: #FFE0EB;
@@ -263,6 +316,14 @@
263
316
  --ngxsmk-color-ring: #9B6EFF;
264
317
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
318
  --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #9B6EFF 25%, transparent), 0 0 0 4px color-mix(in srgb, #9B6EFF 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;
266
327
  --ngxsmk-color-tertiary: #EB5090;
267
328
  --ngxsmk-color-on-tertiary: #2B000C;
268
329
  --ngxsmk-color-tertiary-container: #530020;