ps-helix 5.1.2 → 6.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 (20) hide show
  1. package/README.md +1188 -1188
  2. package/THEME.md +446 -446
  3. package/fesm2022/ps-helix.mjs +1949 -1012
  4. package/fesm2022/ps-helix.mjs.map +1 -1
  5. package/package.json +6 -5
  6. package/src/lib/styles/base/global.css +48 -32
  7. package/src/lib/styles/themes/dark.css +200 -200
  8. package/src/lib/styles/themes/light.css +278 -278
  9. package/src/lib/styles/tokens/breakpoints.tokens.css +20 -0
  10. package/src/lib/styles/tokens/sizing.tokens.css +94 -94
  11. package/src/lib/styles/tokens/spacing.tokens.css +27 -27
  12. package/src/lib/styles/utilities/animations.utils.css +157 -157
  13. package/src/lib/styles/utilities/colors.utils.css +223 -223
  14. package/src/lib/styles/utilities/focus.utils.css +56 -62
  15. package/src/lib/styles/utilities/layout.utils.css +135 -135
  16. package/src/lib/styles/utilities/responsive.utils.css +219 -226
  17. package/src/lib/styles/utilities/spacing.utils.css +150 -150
  18. package/src/lib/styles/utilities/typography.utils.css +36 -36
  19. package/styles.css +34 -33
  20. package/types/ps-helix.d.ts +291 -67
package/src/lib/styles/themes/light.css CHANGED
@@ -1,279 +1,279 @@
1
- :root {
2
- /* Surface Colors */
3
- --surface-0: #ffffff;
4
- --surface-50: #f8fafc;
5
- --surface-100: #f1f5f9;
6
- --surface-200: #e2e8f0;
7
- --surface-300: #cbd5e1;
8
- --surface-400: #94a3b8;
9
- --surface-500: #64748b;
10
- --surface-600: #475569;
11
- --surface-700: #334155;
12
- --surface-800: #1e293b;
13
- --surface-900: #0f172a;
14
- --surface-900-rgb: 15, 23, 42;
15
-
16
- /* Functional Colors */
17
- --surface-ground: var(--surface-50);
18
- --surface-section: var(--surface-0);
19
-
20
- /* Alert Colors */
21
- --alert-info-bg: rgba(11, 1, 145, 0.1);
22
- --alert-info-border-color: #0B0191;
23
- --alert-info-text-color: #0B0191;
24
-
25
- --surface-card: var(--surface-0);
26
- --surface-overlay: var(--surface-0);
27
- --surface-border: var(--surface-200);
28
- --surface-hover: var(--surface-100);
29
-
30
- /* Text Colors */
31
- --text-color: var(--surface-800);
32
- --text-color-secondary: var(--surface-600);
33
- --text-color-tertiary: var(--surface-500);
34
- --text-color-disabled: var(--surface-400);
35
-
36
- /* Text on colored backgrounds */
37
- --text-on-primary: #FFFFFF;
38
- --text-on-secondary: #FFFFFF;
39
- --text-on-success: #FFFFFF;
40
- --text-on-warning: #FFFFFF;
41
- --text-on-danger: #FFFFFF;
42
- --text-on-surface: var(--text-color);
43
- --text-on-dark: #FFFFFF;
44
- --text-on-light: #0a0d16;
45
-
46
- /* Blue Palette */
47
- --blue-50: #EEF2FF;
48
- --blue-100: #E0E7FF;
49
- --blue-200: #C7D2FE;
50
- --blue-300: #A5B4FC;
51
- --blue-400: #818CF8;
52
- --blue-500: #6366F1;
53
- --blue-600: #4F46E5;
54
- --blue-700: #4338CA;
55
- --blue-800: #3730A3;
56
- --blue-900: #312E81;
57
-
58
- /* Red Palette */
59
- --red-50: #FEF2F2;
60
- --red-100: #FEE2E2;
61
- --red-200: #FECACA;
62
- --red-300: #FCA5A5;
63
- --red-400: #F87171;
64
- --red-500: #EF4444;
65
- --red-600: #DC2626;
66
- --red-700: #B91C1C;
67
- --red-800: #991B1B;
68
- --red-900: #7F1D1D;
69
-
70
- /* Green Palette */
71
- --green-50: #F0FDF4;
72
- --green-100: #DCFCE7;
73
- --green-200: #BBF7D0;
74
- --green-300: #86EFAC;
75
- --green-400: #4ADE80;
76
- --green-500: #22C55E;
77
- --green-600: #16A34A;
78
- --green-700: #15803D;
79
- --green-800: #166534;
80
- --green-900: #14532D;
81
-
82
- /* Orange Palette */
83
- --orange-50: #FFF7ED;
84
- --orange-100: #FFEDD5;
85
- --orange-200: #FED7AA;
86
- --orange-300: #FDBA74;
87
- --orange-400: #FB923C;
88
- --orange-500: #F97316;
89
- --orange-600: #EA580C;
90
- --orange-700: #C2410C;
91
- --orange-800: #9A3412;
92
- --orange-900: #7C2D12;
93
-
94
- /* Yellow Palette */
95
- --yellow-50: #FEFCE8;
96
- --yellow-100: #FEF9C3;
97
- --yellow-200: #FEF08A;
98
- --yellow-300: #FDE047;
99
- --yellow-400: #FACC15;
100
- --yellow-500: #EAB308;
101
- --yellow-600: #CA8A04;
102
- --yellow-700: #A16207;
103
- --yellow-800: #854D0E;
104
- --yellow-900: #713F12;
105
-
106
- /* Violet Palette */
107
- --violet-50: #F5F3FF;
108
- --violet-100: #EDE9FE;
109
- --violet-200: #DDD6FE;
110
- --violet-300: #C4B5FD;
111
- --violet-400: #A78BFA;
112
- --violet-500: #8B5CF6;
113
- --violet-600: #7C3AED;
114
- --violet-700: #6D28D9;
115
- --violet-800: #5B21B6;
116
- --violet-900: #4C1D95;
117
-
118
- /* Cyan Palette */
119
- --cyan-50: #ECFEFF;
120
- --cyan-100: #CFFAFE;
121
- --cyan-200: #A5F3FC;
122
- --cyan-300: #67E8F9;
123
- --cyan-400: #22D3EE;
124
- --cyan-500: #06B6D4;
125
- --cyan-600: #0891B2;
126
- --cyan-700: #0E7490;
127
- --cyan-800: #155E75;
128
- --cyan-900: #164E63;
129
-
130
- /* Teal Palette */
131
- --teal-50: #F0FDFA;
132
- --teal-100: #CCFBF1;
133
- --teal-200: #99F6E4;
134
- --teal-300: #5EEAD4;
135
- --teal-400: #2DD4BF;
136
- --teal-500: #14B8A6;
137
- --teal-600: #0D9488;
138
- --teal-700: #0F766E;
139
- --teal-800: #115E59;
140
- --teal-900: #134E4A;
141
-
142
- /* Emerald Palette */
143
- --emerald-50: #ECFDF5;
144
- --emerald-100: #D1FAE5;
145
- --emerald-200: #A7F3D0;
146
- --emerald-300: #6EE7B7;
147
- --emerald-400: #34D399;
148
- --emerald-500: #10B981;
149
- --emerald-600: #059669;
150
- --emerald-700: #047857;
151
- --emerald-800: #065F46;
152
- --emerald-900: #064E3B;
153
-
154
- /* Indigo Palette */
155
- --indigo-50: #EEF2FF;
156
- --indigo-100: #E0E7FF;
157
- --indigo-200: #C7D2FE;
158
- --indigo-300: #A5B4FC;
159
- --indigo-400: #818CF8;
160
- --indigo-500: #6366F1;
161
- --indigo-600: #4F46E5;
162
- --indigo-700: #4338CA;
163
- --indigo-800: #3730A3;
164
- --indigo-900: #312E81;
165
-
166
- /* Purple Palette */
167
- --purple-50: #FAF5FF;
168
- --purple-100: #F3E8FF;
169
- --purple-200: #E9D5FF;
170
- --purple-300: #D8B4FE;
171
- --purple-400: #C084FC;
172
- --purple-500: #A855F7;
173
- --purple-600: #9333EA;
174
- --purple-700: #7C3AED;
175
- --purple-800: #6B21A8;
176
- --purple-900: #581C87;
177
-
178
- /* Fuchsia Palette */
179
- --fuchsia-50: #FDF4FF;
180
- --fuchsia-100: #FAE8FF;
181
- --fuchsia-200: #F5D0FE;
182
- --fuchsia-300: #F0ABFC;
183
- --fuchsia-400: #E879F9;
184
- --fuchsia-500: #D946EF;
185
- --fuchsia-600: #C026D3;
186
- --fuchsia-700: #A21CAF;
187
- --fuchsia-800: #86198F;
188
- --fuchsia-900: #701A75;
189
-
190
- /* Rose Palette */
191
- --rose-50: #FFF1F2;
192
- --rose-100: #FFE4E6;
193
- --rose-200: #FECDD3;
194
- --rose-300: #FDA4AF;
195
- --rose-400: #FB7185;
196
- --rose-500: #F43F5E;
197
- --rose-600: #E11D48;
198
- --rose-700: #BE123C;
199
- --rose-800: #9F1239;
200
- --rose-900: #881337;
201
-
202
- /* Amber Palette */
203
- --amber-50: #FFFBEB;
204
- --amber-100: #FEF3C7;
205
- --amber-200: #FDE68A;
206
- --amber-300: #FCD34D;
207
- --amber-400: #FBBF24;
208
- --amber-500: #F59E0B;
209
- --amber-600: #D97706;
210
- --amber-700: #B45309;
211
- --amber-800: #92400E;
212
- --amber-900: #78350F;
213
-
214
- /* Pink Palette */
215
- --pink-50: #FDF2F8;
216
- --pink-100: #FCE7F3;
217
- --pink-200: #FBCFE8;
218
- --pink-300: #F9A8D4;
219
- --pink-400: #F472B6;
220
- --pink-500: #EC4899;
221
- --pink-600: #DB2777;
222
- --pink-700: #BE185D;
223
- --pink-800: #9D174D;
224
- --pink-900: #831843;
225
-
226
- /* Primary Colors - Use customer context with fallbacks */
227
- --primary-color: var(--customer-primary-color, #0B0191);
228
- --primary-color-light: var(--customer-primary-color-light, #0F02C4);
229
- --primary-color-lighter: var(--customer-primary-color-lighter, #4A3FD9);
230
- --primary-color-dark: var(--customer-primary-color-dark, #09017A);
231
- --primary-color-darker: var(--customer-primary-color-darker, #07015E);
232
- --primary-color-text: var(--customer-primary-color-text, #FFFFFF);
233
- --primary-color-rgb: var(--customer-primary-color-rgb, 11, 1, 145);
234
-
235
- /* Primary Gradients - Automatically adapt to custom colors */
236
- --primary-gradient: linear-gradient(to right, var(--primary-color-darker), var(--primary-color-light));
237
- --primary-gradient-hover: linear-gradient(to right, var(--primary-color-dark), var(--primary-color-lighter));
238
- --primary-gradient-reversed: linear-gradient(to left, var(--primary-color-darker), var(--primary-color-light));
239
-
240
- /* Secondary Colors - Use customer context with fallbacks (gray tones for light theme) */
241
- --secondary-color: var(--customer-secondary-color, #5E5E5E);
242
- --secondary-color-light: var(--customer-secondary-color-light, #7B7B7B);
243
- --secondary-color-lighter: var(--customer-secondary-color-lighter, #969696);
244
- --secondary-color-dark: var(--customer-secondary-color-dark, #404040);
245
- --secondary-color-darker: var(--customer-secondary-color-darker, #2B2B2B);
246
- --secondary-color-text: var(--customer-secondary-color-text, #FFFFFF);
247
- --secondary-color-rgb: var(--customer-secondary-color-rgb, 94, 94, 94);
248
-
249
- /* Success Colors */
250
- --success-color: #0F853A;
251
- --success-color-rgb: 15, 133, 58;
252
- --success-color-text: #FFFFFF;
253
-
254
- /* Warning Colors */
255
- --warning-color: #b25310;
256
- --warning-color-rgb: 178, 83, 16;
257
- --warning-color-text: #FFFFFF;
258
-
259
- /* Danger Colors */
260
- --danger-color: #D92626;
261
- --danger-color-rgb: 217, 38, 38;
262
- --danger-color-text: #FFFFFF;
263
-
264
- /* Chart Colors */
265
- --chart-text-color: var(--text-color);
266
- --chart-grid-color: var(--surface-200);
267
- --chart-primary-color: var(--primary-color);
268
- --chart-secondary-color: var(--secondary-color);
269
- --chart-success-color: var(--success-color);
270
- --chart-warning-color: var(--warning-color);
271
- --chart-danger-color: var(--danger-color);
272
- --chart-tooltip-background: var(--surface-card);
273
- --chart-tooltip-text: var(--text-color);
274
- --chart-legend-text: var(--text-color);
275
-
276
- /* Background */
277
- --background-opacity: 0.5;
278
- --body-gradient: radial-gradient(184.52% 111.8% at 100% 0%, #E0E4F7 0%, rgba(255, 255, 255, 0.00) 100%);
1
+ :root {
2
+ /* Surface Colors */
3
+ --surface-0: #ffffff;
4
+ --surface-50: #f8fafc;
5
+ --surface-100: #f1f5f9;
6
+ --surface-200: #e2e8f0;
7
+ --surface-300: #cbd5e1;
8
+ --surface-400: #94a3b8;
9
+ --surface-500: #64748b;
10
+ --surface-600: #475569;
11
+ --surface-700: #334155;
12
+ --surface-800: #1e293b;
13
+ --surface-900: #0f172a;
14
+ --surface-900-rgb: 15, 23, 42;
15
+
16
+ /* Functional Colors */
17
+ --surface-ground: var(--surface-50);
18
+ --surface-section: var(--surface-0);
19
+
20
+ /* Alert Colors */
21
+ --alert-info-bg: rgba(11, 1, 145, 0.1);
22
+ --alert-info-border-color: #0B0191;
23
+ --alert-info-text-color: #0B0191;
24
+
25
+ --surface-card: var(--surface-0);
26
+ --surface-overlay: var(--surface-0);
27
+ --surface-border: var(--surface-200);
28
+ --surface-hover: var(--surface-100);
29
+
30
+ /* Text Colors */
31
+ --text-color: var(--surface-800);
32
+ --text-color-secondary: var(--surface-600);
33
+ --text-color-tertiary: var(--surface-500);
34
+ --text-color-disabled: var(--surface-400);
35
+
36
+ /* Text on colored backgrounds */
37
+ --text-on-primary: #FFFFFF;
38
+ --text-on-secondary: #FFFFFF;
39
+ --text-on-success: #FFFFFF;
40
+ --text-on-warning: #FFFFFF;
41
+ --text-on-danger: #FFFFFF;
42
+ --text-on-surface: var(--text-color);
43
+ --text-on-dark: #FFFFFF;
44
+ --text-on-light: #0a0d16;
45
+
46
+ /* Blue Palette */
47
+ --blue-50: #EEF2FF;
48
+ --blue-100: #E0E7FF;
49
+ --blue-200: #C7D2FE;
50
+ --blue-300: #A5B4FC;
51
+ --blue-400: #818CF8;
52
+ --blue-500: #6366F1;
53
+ --blue-600: #4F46E5;
54
+ --blue-700: #4338CA;
55
+ --blue-800: #3730A3;
56
+ --blue-900: #312E81;
57
+
58
+ /* Red Palette */
59
+ --red-50: #FEF2F2;
60
+ --red-100: #FEE2E2;
61
+ --red-200: #FECACA;
62
+ --red-300: #FCA5A5;
63
+ --red-400: #F87171;
64
+ --red-500: #EF4444;
65
+ --red-600: #DC2626;
66
+ --red-700: #B91C1C;
67
+ --red-800: #991B1B;
68
+ --red-900: #7F1D1D;
69
+
70
+ /* Green Palette */
71
+ --green-50: #F0FDF4;
72
+ --green-100: #DCFCE7;
73
+ --green-200: #BBF7D0;
74
+ --green-300: #86EFAC;
75
+ --green-400: #4ADE80;
76
+ --green-500: #22C55E;
77
+ --green-600: #16A34A;
78
+ --green-700: #15803D;
79
+ --green-800: #166534;
80
+ --green-900: #14532D;
81
+
82
+ /* Orange Palette */
83
+ --orange-50: #FFF7ED;
84
+ --orange-100: #FFEDD5;
85
+ --orange-200: #FED7AA;
86
+ --orange-300: #FDBA74;
87
+ --orange-400: #FB923C;
88
+ --orange-500: #F97316;
89
+ --orange-600: #EA580C;
90
+ --orange-700: #C2410C;
91
+ --orange-800: #9A3412;
92
+ --orange-900: #7C2D12;
93
+
94
+ /* Yellow Palette */
95
+ --yellow-50: #FEFCE8;
96
+ --yellow-100: #FEF9C3;
97
+ --yellow-200: #FEF08A;
98
+ --yellow-300: #FDE047;
99
+ --yellow-400: #FACC15;
100
+ --yellow-500: #EAB308;
101
+ --yellow-600: #CA8A04;
102
+ --yellow-700: #A16207;
103
+ --yellow-800: #854D0E;
104
+ --yellow-900: #713F12;
105
+
106
+ /* Violet Palette */
107
+ --violet-50: #F5F3FF;
108
+ --violet-100: #EDE9FE;
109
+ --violet-200: #DDD6FE;
110
+ --violet-300: #C4B5FD;
111
+ --violet-400: #A78BFA;
112
+ --violet-500: #8B5CF6;
113
+ --violet-600: #7C3AED;
114
+ --violet-700: #6D28D9;
115
+ --violet-800: #5B21B6;
116
+ --violet-900: #4C1D95;
117
+
118
+ /* Cyan Palette */
119
+ --cyan-50: #ECFEFF;
120
+ --cyan-100: #CFFAFE;
121
+ --cyan-200: #A5F3FC;
122
+ --cyan-300: #67E8F9;
123
+ --cyan-400: #22D3EE;
124
+ --cyan-500: #06B6D4;
125
+ --cyan-600: #0891B2;
126
+ --cyan-700: #0E7490;
127
+ --cyan-800: #155E75;
128
+ --cyan-900: #164E63;
129
+
130
+ /* Teal Palette */
131
+ --teal-50: #F0FDFA;
132
+ --teal-100: #CCFBF1;
133
+ --teal-200: #99F6E4;
134
+ --teal-300: #5EEAD4;
135
+ --teal-400: #2DD4BF;
136
+ --teal-500: #14B8A6;
137
+ --teal-600: #0D9488;
138
+ --teal-700: #0F766E;
139
+ --teal-800: #115E59;
140
+ --teal-900: #134E4A;
141
+
142
+ /* Emerald Palette */
143
+ --emerald-50: #ECFDF5;
144
+ --emerald-100: #D1FAE5;
145
+ --emerald-200: #A7F3D0;
146
+ --emerald-300: #6EE7B7;
147
+ --emerald-400: #34D399;
148
+ --emerald-500: #10B981;
149
+ --emerald-600: #059669;
150
+ --emerald-700: #047857;
151
+ --emerald-800: #065F46;
152
+ --emerald-900: #064E3B;
153
+
154
+ /* Indigo Palette */
155
+ --indigo-50: #EEF2FF;
156
+ --indigo-100: #E0E7FF;
157
+ --indigo-200: #C7D2FE;
158
+ --indigo-300: #A5B4FC;
159
+ --indigo-400: #818CF8;
160
+ --indigo-500: #6366F1;
161
+ --indigo-600: #4F46E5;
162
+ --indigo-700: #4338CA;
163
+ --indigo-800: #3730A3;
164
+ --indigo-900: #312E81;
165
+
166
+ /* Purple Palette */
167
+ --purple-50: #FAF5FF;
168
+ --purple-100: #F3E8FF;
169
+ --purple-200: #E9D5FF;
170
+ --purple-300: #D8B4FE;
171
+ --purple-400: #C084FC;
172
+ --purple-500: #A855F7;
173
+ --purple-600: #9333EA;
174
+ --purple-700: #7C3AED;
175
+ --purple-800: #6B21A8;
176
+ --purple-900: #581C87;
177
+
178
+ /* Fuchsia Palette */
179
+ --fuchsia-50: #FDF4FF;
180
+ --fuchsia-100: #FAE8FF;
181
+ --fuchsia-200: #F5D0FE;
182
+ --fuchsia-300: #F0ABFC;
183
+ --fuchsia-400: #E879F9;
184
+ --fuchsia-500: #D946EF;
185
+ --fuchsia-600: #C026D3;
186
+ --fuchsia-700: #A21CAF;
187
+ --fuchsia-800: #86198F;
188
+ --fuchsia-900: #701A75;
189
+
190
+ /* Rose Palette */
191
+ --rose-50: #FFF1F2;
192
+ --rose-100: #FFE4E6;
193
+ --rose-200: #FECDD3;
194
+ --rose-300: #FDA4AF;
195
+ --rose-400: #FB7185;
196
+ --rose-500: #F43F5E;
197
+ --rose-600: #E11D48;
198
+ --rose-700: #BE123C;
199
+ --rose-800: #9F1239;
200
+ --rose-900: #881337;
201
+
202
+ /* Amber Palette */
203
+ --amber-50: #FFFBEB;
204
+ --amber-100: #FEF3C7;
205
+ --amber-200: #FDE68A;
206
+ --amber-300: #FCD34D;
207
+ --amber-400: #FBBF24;
208
+ --amber-500: #F59E0B;
209
+ --amber-600: #D97706;
210
+ --amber-700: #B45309;
211
+ --amber-800: #92400E;
212
+ --amber-900: #78350F;
213
+
214
+ /* Pink Palette */
215
+ --pink-50: #FDF2F8;
216
+ --pink-100: #FCE7F3;
217
+ --pink-200: #FBCFE8;
218
+ --pink-300: #F9A8D4;
219
+ --pink-400: #F472B6;
220
+ --pink-500: #EC4899;
221
+ --pink-600: #DB2777;
222
+ --pink-700: #BE185D;
223
+ --pink-800: #9D174D;
224
+ --pink-900: #831843;
225
+
226
+ /* Primary Colors - Use customer context with fallbacks */
227
+ --primary-color: var(--customer-primary-color, #0B0191);
228
+ --primary-color-light: var(--customer-primary-color-light, #0F02C4);
229
+ --primary-color-lighter: var(--customer-primary-color-lighter, #4A3FD9);
230
+ --primary-color-dark: var(--customer-primary-color-dark, #09017A);
231
+ --primary-color-darker: var(--customer-primary-color-darker, #07015E);
232
+ --primary-color-text: var(--customer-primary-color-text, #FFFFFF);
233
+ --primary-color-rgb: var(--customer-primary-color-rgb, 11, 1, 145);
234
+
235
+ /* Primary Gradients - Automatically adapt to custom colors */
236
+ --primary-gradient: linear-gradient(to right, var(--primary-color-darker), var(--primary-color-light));
237
+ --primary-gradient-hover: linear-gradient(to right, var(--primary-color-dark), var(--primary-color-lighter));
238
+ --primary-gradient-reversed: linear-gradient(to left, var(--primary-color-darker), var(--primary-color-light));
239
+
240
+ /* Secondary Colors - Use customer context with fallbacks (gray tones for light theme) */
241
+ --secondary-color: var(--customer-secondary-color, #5E5E5E);
242
+ --secondary-color-light: var(--customer-secondary-color-light, #7B7B7B);
243
+ --secondary-color-lighter: var(--customer-secondary-color-lighter, #969696);
244
+ --secondary-color-dark: var(--customer-secondary-color-dark, #404040);
245
+ --secondary-color-darker: var(--customer-secondary-color-darker, #2B2B2B);
246
+ --secondary-color-text: var(--customer-secondary-color-text, #FFFFFF);
247
+ --secondary-color-rgb: var(--customer-secondary-color-rgb, 94, 94, 94);
248
+
249
+ /* Success Colors */
250
+ --success-color: #0F853A;
251
+ --success-color-rgb: 15, 133, 58;
252
+ --success-color-text: #FFFFFF;
253
+
254
+ /* Warning Colors */
255
+ --warning-color: #b25310;
256
+ --warning-color-rgb: 178, 83, 16;
257
+ --warning-color-text: #FFFFFF;
258
+
259
+ /* Danger Colors */
260
+ --danger-color: #D92626;
261
+ --danger-color-rgb: 217, 38, 38;
262
+ --danger-color-text: #FFFFFF;
263
+
264
+ /* Chart Colors */
265
+ --chart-text-color: var(--text-color);
266
+ --chart-grid-color: var(--surface-200);
267
+ --chart-primary-color: var(--primary-color);
268
+ --chart-secondary-color: var(--secondary-color);
269
+ --chart-success-color: var(--success-color);
270
+ --chart-warning-color: var(--warning-color);
271
+ --chart-danger-color: var(--danger-color);
272
+ --chart-tooltip-background: var(--surface-card);
273
+ --chart-tooltip-text: var(--text-color);
274
+ --chart-legend-text: var(--text-color);
275
+
276
+ /* Background */
277
+ --background-opacity: 0.5;
278
+ --body-gradient: radial-gradient(184.52% 111.8% at 100% 0%, #E0E4F7 0%, rgba(255, 255, 255, 0.00) 100%);
279
279
  }
package/src/lib/styles/tokens/breakpoints.tokens.css ADDED
@@ -0,0 +1,20 @@
1
+ /*
2
+ * Breakpoint tokens — single source of truth for the responsive scale.
3
+ *
4
+ * Values are em-based for accessibility (they scale with the user's root
5
+ * font-size). The px equivalents below assume the default 16px root and are
6
+ * provided only as a reference for authoring `@media` queries.
7
+ *
8
+ * NOTE: CSS `@media` conditions cannot read custom properties, so media
9
+ * queries must inline the literal value. Always use the canonical value from
10
+ * this scale (prefer the em form) rather than an ad-hoc breakpoint, so the
11
+ * library stays consistent across components and utilities.
12
+ */
13
+ :root {
14
+ --breakpoint-xs: 30em; /* 480px */
15
+ --breakpoint-sm: 40em; /* 640px */
16
+ --breakpoint-md: 48em; /* 768px */
17
+ --breakpoint-lg: 64em; /* 1024px */
18
+ --breakpoint-xl: 80em; /* 1280px */
19
+ --breakpoint-2xl: 96em; /* 1536px */
20
+ }