@codapet/design-system 0.6.0 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +78 -3
- package/dist/index.mjs +1055 -609
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +142 -2
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -76,18 +76,57 @@
|
|
|
76
76
|
/* Surface */
|
|
77
77
|
--color-gray-surface-light: var(--gray-surface-light);
|
|
78
78
|
--color-gray-surface-default: var(--gray-surface-default);
|
|
79
|
+
--color-gray-surface-dark: var(--gray-surface-dark);
|
|
79
80
|
--color-primary-surface-subtle: var(--primary-surface-subtle);
|
|
80
81
|
--color-primary-surface-light: var(--primary-surface-light);
|
|
81
82
|
--color-primary-surface-default: var(--primary-surface-default);
|
|
82
83
|
|
|
84
|
+
/* Secondary/Sand tokens */
|
|
85
|
+
--color-secondary-surface-default: var(--secondary-surface-default);
|
|
86
|
+
--color-secondary-stroke-light: var(--secondary-stroke-light);
|
|
87
|
+
--color-secondary-stroke-default: var(--secondary-stroke-default);
|
|
88
|
+
--color-secondary-text-dark: var(--secondary-text-dark);
|
|
89
|
+
|
|
90
|
+
/* Warning tokens */
|
|
91
|
+
--color-warning-surface-subtle: var(--warning-surface-subtle);
|
|
92
|
+
--color-warning-stroke-default: var(--warning-stroke-default);
|
|
93
|
+
--color-warning-stroke-dark: var(--warning-stroke-dark);
|
|
94
|
+
|
|
95
|
+
/* Success tokens */
|
|
96
|
+
--color-success-surface-subtle: var(--success-surface-subtle);
|
|
97
|
+
--color-success-stroke-light: var(--success-stroke-light);
|
|
98
|
+
|
|
99
|
+
/* Alert tokens */
|
|
100
|
+
--color-alert-bg-informative: var(--alert-bg-informative);
|
|
101
|
+
--color-alert-bg-error: var(--alert-bg-error);
|
|
102
|
+
--color-vibrant-text-heading: var(--vibrant-text-heading);
|
|
103
|
+
|
|
104
|
+
/* Text tokens */
|
|
105
|
+
--color-vibrant-text-body: var(--vibrant-text-body);
|
|
106
|
+
|
|
83
107
|
/* stroke */
|
|
84
108
|
--color-gray-stroke-light: var(--gray-stroke-light);
|
|
109
|
+
--color-gray-stroke-default: var(--gray-stroke-default);
|
|
85
110
|
--color-error-stroke-light: var(--error-stroke-light);
|
|
86
111
|
--color-primary-stroke-default: var(--primary-stroke-default);
|
|
112
|
+
|
|
113
|
+
/* text details */
|
|
114
|
+
--color-vibrant-text-details: var(--vibrant-text-details);
|
|
87
115
|
/* error surface */
|
|
88
116
|
--color-error-surface-dark: var(--error-surface-dark);
|
|
89
117
|
--color-error-surface-light: var(--error-surface-light);
|
|
90
118
|
--color-error-surface-default: var(--error-surface-default);
|
|
119
|
+
|
|
120
|
+
/* Semantic tokens for dark mode compatibility */
|
|
121
|
+
--color-foreground-secondary: var(--foreground-secondary);
|
|
122
|
+
--color-border-default: var(--border-default);
|
|
123
|
+
--color-focus-ring: var(--focus-ring);
|
|
124
|
+
--color-destructive-text: var(--destructive-text);
|
|
125
|
+
--color-destructive-hover: var(--destructive-hover);
|
|
126
|
+
--color-destructive-active: var(--destructive-active);
|
|
127
|
+
--color-destructive-bg-deep: var(--destructive-bg-deep);
|
|
128
|
+
--color-active-primary: var(--active-primary);
|
|
129
|
+
--color-range-middle-bg: var(--range-middle-bg);
|
|
91
130
|
}
|
|
92
131
|
|
|
93
132
|
:root {
|
|
@@ -160,10 +199,27 @@
|
|
|
160
199
|
--gray-subtle: oklch(0.6722 0.0119 286.08);
|
|
161
200
|
--icon-disabled: oklch(0.8686 0.0216 252.51);
|
|
162
201
|
|
|
202
|
+
--secondary-surface-default: oklch(0.9596 0.0076 67.56);
|
|
203
|
+
--secondary-stroke-light: oklch(0.9218 0.0049 67.38);
|
|
204
|
+
--secondary-stroke-default: oklch(0.8697 0.0058 56.37);
|
|
205
|
+
--secondary-text-dark: oklch(0.3737 0.0133 67.75);
|
|
206
|
+
--warning-surface-subtle: oklch(0.9795 0.0306 102.91);
|
|
207
|
+
--warning-stroke-default: oklch(0.8244 0.1349 89.17);
|
|
208
|
+
--warning-stroke-dark: oklch(0.5137 0.1264 60.47);
|
|
209
|
+
--vibrant-text-body: oklch(0.3623 0.0131 286.07);
|
|
210
|
+
--vibrant-text-heading: oklch(0.1456 0.0045 286.07);
|
|
211
|
+
--alert-bg-informative: oklch(0.9804 0 0);
|
|
212
|
+
--alert-bg-error: oklch(0.9919 0.0032 17.38);
|
|
213
|
+
--success-surface-subtle: oklch(0.9843 0.0232 152.47);
|
|
214
|
+
--success-stroke-light: oklch(0.9345 0.0799 152.76);
|
|
215
|
+
|
|
163
216
|
/* gray*/
|
|
164
217
|
--gray-surface-light: oklch(0.9674 0.0013 286.37);
|
|
165
218
|
--gray-surface-default: oklch(0.8711 0.0055 286.29);
|
|
219
|
+
--gray-surface-dark: oklch(0.228 0.006 286.07);
|
|
166
220
|
--gray-stroke-light: oklch(0.9197 0.004 286.32);
|
|
221
|
+
--gray-stroke-default: oklch(0.8686 0.0037 286.37);
|
|
222
|
+
--vibrant-text-details: oklch(0.553 0.013 286.37);
|
|
167
223
|
|
|
168
224
|
/* primary surface */
|
|
169
225
|
--primary-surface-subtle: oklch(0.9678 0.0086 247.91);
|
|
@@ -175,6 +231,17 @@
|
|
|
175
231
|
--error-surface-dark: oklch(0.3967 0.1408 25.71);
|
|
176
232
|
--error-surface-light: oklch(0.9705 0.0129 17.38);
|
|
177
233
|
--error-stroke-light: oklch(0.8834 0.0616 18.39);
|
|
234
|
+
|
|
235
|
+
/* Semantic tokens */
|
|
236
|
+
--foreground-secondary: oklch(0.37 0.013 285.8);
|
|
237
|
+
--border-default: oklch(0.87 0.006 286);
|
|
238
|
+
--focus-ring: oklch(0.623 0.214 259.8);
|
|
239
|
+
--destructive-text: oklch(0.704 0.191 22.2);
|
|
240
|
+
--destructive-hover: oklch(0.97 0.013 17.4);
|
|
241
|
+
--destructive-active: oklch(0.94 0.03 17.4);
|
|
242
|
+
--destructive-bg-deep: oklch(0.4 0.14 22);
|
|
243
|
+
--active-primary: oklch(0.28 0.03 264);
|
|
244
|
+
--range-middle-bg: oklch(0.93 0.005 264);
|
|
178
245
|
}
|
|
179
246
|
|
|
180
247
|
.dark {
|
|
@@ -184,8 +251,8 @@
|
|
|
184
251
|
--card-foreground: oklch(0.984 0.003 247.858);
|
|
185
252
|
--popover: oklch(0.208 0.042 265.755);
|
|
186
253
|
--popover-foreground: oklch(0.984 0.003 247.858);
|
|
187
|
-
--primary: oklch(0.
|
|
188
|
-
--primary-foreground: oklch(0.
|
|
254
|
+
--primary: oklch(0.62 0.1 252.57);
|
|
255
|
+
--primary-foreground: oklch(0.984 0.003 247.858);
|
|
189
256
|
--secondary: oklch(0.279 0.041 260.031);
|
|
190
257
|
--secondary-foreground: oklch(0.984 0.003 247.858);
|
|
191
258
|
--muted: oklch(0.279 0.041 260.031);
|
|
@@ -210,6 +277,79 @@
|
|
|
210
277
|
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
|
211
278
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
212
279
|
--sidebar-ring: oklch(0.551 0.027 264.364);
|
|
280
|
+
|
|
281
|
+
/* Brand Colors */
|
|
282
|
+
--brand-subtle: oklch(0.2 0.012 248);
|
|
283
|
+
--brand-light: oklch(0.25 0.018 251);
|
|
284
|
+
--brand-normal: oklch(0.62 0.1 252.57);
|
|
285
|
+
--brand-vibrant: oklch(0.65 0.13 253.26);
|
|
286
|
+
--brand-dark: oklch(0.72 0.07 255.4);
|
|
287
|
+
--brand-text-vibrant: oklch(0.72 0.2 259.23);
|
|
288
|
+
|
|
289
|
+
/* Sand Colors */
|
|
290
|
+
--sand-light: oklch(0.2 0.005 106);
|
|
291
|
+
--sand-normal: oklch(0.25 0.006 68);
|
|
292
|
+
--sand-dark: oklch(0.4 0.005 56);
|
|
293
|
+
|
|
294
|
+
/* Rose Colors */
|
|
295
|
+
--rose-light: oklch(0.2 0.01 0.11);
|
|
296
|
+
--rose-normal: oklch(0.45 0.06 0.45);
|
|
297
|
+
--rose-dark: oklch(0.65 0.04 0.34);
|
|
298
|
+
|
|
299
|
+
/* Sage Colors */
|
|
300
|
+
--sage-light: oklch(0.2 0.018 165);
|
|
301
|
+
--sage-normal: oklch(0.45 0.04 164);
|
|
302
|
+
--sage-dark: oklch(0.65 0.03 165);
|
|
303
|
+
|
|
304
|
+
/* Red */
|
|
305
|
+
--red-subtle: oklch(0.2 0.02 17);
|
|
306
|
+
|
|
307
|
+
--secondary-surface-default: oklch(0.25 0.008 68);
|
|
308
|
+
--secondary-stroke-light: oklch(0.3 0.005 68);
|
|
309
|
+
--secondary-stroke-default: oklch(0.35 0.006 56);
|
|
310
|
+
--secondary-text-dark: oklch(0.85 0.013 68);
|
|
311
|
+
--warning-surface-subtle: oklch(0.22 0.03 103);
|
|
312
|
+
--warning-stroke-default: oklch(0.65 0.13 89);
|
|
313
|
+
--warning-stroke-dark: oklch(0.75 0.1 60);
|
|
314
|
+
--vibrant-text-body: oklch(0.8 0.013 286);
|
|
315
|
+
--vibrant-text-heading: oklch(0.95 0.005 286);
|
|
316
|
+
--alert-bg-informative: oklch(0.18 0 0);
|
|
317
|
+
--alert-bg-error: oklch(0.18 0.01 17);
|
|
318
|
+
--success-surface-subtle: oklch(0.18 0.02 152);
|
|
319
|
+
--success-stroke-light: oklch(0.35 0.06 152);
|
|
320
|
+
|
|
321
|
+
/* Gray / Neutral */
|
|
322
|
+
--gray-subtle: oklch(0.55 0.012 286);
|
|
323
|
+
--gray-surface-light: oklch(0.22 0.005 286);
|
|
324
|
+
--gray-surface-default: oklch(0.3 0.006 286);
|
|
325
|
+
--gray-surface-dark: oklch(0.228 0.006 286.07);
|
|
326
|
+
--gray-stroke-light: oklch(0.3 0.005 286);
|
|
327
|
+
--gray-stroke-default: oklch(0.35 0.006 286);
|
|
328
|
+
--vibrant-text-details: oklch(0.6 0.013 286);
|
|
329
|
+
--icon-disabled: oklch(0.35 0.02 252);
|
|
330
|
+
|
|
331
|
+
/* Primary Surface & Stroke */
|
|
332
|
+
--primary-surface-subtle: oklch(0.2 0.012 248);
|
|
333
|
+
--primary-surface-light: oklch(0.25 0.018 251);
|
|
334
|
+
--primary-surface-default: oklch(0.5 0.09 252.66);
|
|
335
|
+
--primary-stroke-default: oklch(0.6 0.12 253.36);
|
|
336
|
+
|
|
337
|
+
/* Error Surface & Stroke */
|
|
338
|
+
--error-surface-default: oklch(0.55 0.18 22.23);
|
|
339
|
+
--error-surface-dark: oklch(0.55 0.16 25.71);
|
|
340
|
+
--error-surface-light: oklch(0.22 0.03 17);
|
|
341
|
+
--error-stroke-light: oklch(0.4 0.08 18.39);
|
|
342
|
+
|
|
343
|
+
/* Semantic tokens */
|
|
344
|
+
--foreground-secondary: oklch(0.87 0.006 286);
|
|
345
|
+
--border-default: oklch(0.35 0.006 286);
|
|
346
|
+
--focus-ring: oklch(0.623 0.214 259.8);
|
|
347
|
+
--destructive-text: oklch(0.704 0.191 22.2);
|
|
348
|
+
--destructive-hover: oklch(0.22 0.04 17.4);
|
|
349
|
+
--destructive-active: oklch(0.28 0.05 17.4);
|
|
350
|
+
--destructive-bg-deep: oklch(0.35 0.14 22);
|
|
351
|
+
--active-primary: oklch(0.8 0.02 264);
|
|
352
|
+
--range-middle-bg: oklch(0.28 0.02 264);
|
|
213
353
|
}
|
|
214
354
|
|
|
215
355
|
@layer base {
|