shru-design-system 0.0.5 → 0.0.6
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.
|
@@ -59,6 +59,8 @@
|
|
|
59
59
|
|
|
60
60
|
:root {
|
|
61
61
|
--radius: 0.625rem;
|
|
62
|
+
/* Spacing variable - required for Tailwind v4's generated utilities */
|
|
63
|
+
--spacing: 0.25rem; /* 1 unit = 0.25rem (4px), so px-4 = calc(0.25rem * 4) = 1rem */
|
|
62
64
|
|
|
63
65
|
/* Color palette variables - required for chart and other components */
|
|
64
66
|
--color-blue-50: #eff6ff;
|
|
@@ -241,55 +243,10 @@
|
|
|
241
243
|
}
|
|
242
244
|
|
|
243
245
|
/*
|
|
244
|
-
*
|
|
245
|
-
*
|
|
246
|
-
*
|
|
246
|
+
* Note: Tailwind v4 generates utilities automatically.
|
|
247
|
+
* We define --spacing above so Tailwind's generated utilities work correctly.
|
|
248
|
+
* If utilities still don't work, they may need to be explicitly listed here.
|
|
247
249
|
*/
|
|
248
|
-
@layer utilities {
|
|
249
|
-
/* These classes are used by design system components but can't be scanned from bundled JS */
|
|
250
|
-
.rounded-md { border-radius: var(--radius-md); }
|
|
251
|
-
.rounded-lg { border-radius: var(--radius-lg); }
|
|
252
|
-
.rounded-sm { border-radius: var(--radius-sm); }
|
|
253
|
-
.rounded-xl { border-radius: var(--radius-xl); }
|
|
254
|
-
.rounded-full { border-radius: 9999px; }
|
|
255
|
-
.px-4 { padding-left: 1rem; padding-right: 1rem; }
|
|
256
|
-
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
|
|
257
|
-
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
|
|
258
|
-
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
|
|
259
|
-
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
|
|
260
|
-
.p-4 { padding: 1rem; }
|
|
261
|
-
.p-6 { padding: 1.5rem; }
|
|
262
|
-
.gap-2 { gap: 0.5rem; }
|
|
263
|
-
.gap-4 { gap: 1rem; }
|
|
264
|
-
.mb-8 { margin-bottom: 2rem; }
|
|
265
|
-
.mb-4 { margin-bottom: 1rem; }
|
|
266
|
-
.mb-2 { margin-bottom: 0.5rem; }
|
|
267
|
-
.mt-4 { margin-top: 1rem; }
|
|
268
|
-
.h-9 { height: 2.25rem; }
|
|
269
|
-
.h-8 { height: 2rem; }
|
|
270
|
-
.h-10 { height: 2.5rem; }
|
|
271
|
-
.h-12 { height: 3rem; }
|
|
272
|
-
.min-h-screen { min-height: 100vh; }
|
|
273
|
-
.inline-flex { display: inline-flex; }
|
|
274
|
-
.flex { display: flex; }
|
|
275
|
-
.items-center { align-items: center; }
|
|
276
|
-
.justify-center { justify-content: center; }
|
|
277
|
-
.flex-wrap { flex-wrap: wrap; }
|
|
278
|
-
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
|
|
279
|
-
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
|
|
280
|
-
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
|
|
281
|
-
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
|
|
282
|
-
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
|
|
283
|
-
.font-medium { font-weight: 500; }
|
|
284
|
-
.font-semibold { font-weight: 600; }
|
|
285
|
-
.font-bold { font-weight: 700; }
|
|
286
|
-
.whitespace-nowrap { white-space: nowrap; }
|
|
287
|
-
.shrink-0 { flex-shrink: 0; }
|
|
288
|
-
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
|
|
289
|
-
.disabled\:pointer-events-none:disabled { pointer-events: none; }
|
|
290
|
-
.disabled\:opacity-50:disabled { opacity: 0.5; }
|
|
291
|
-
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
|
|
292
|
-
}
|
|
293
250
|
|
|
294
251
|
@layer components {
|
|
295
252
|
.steps {
|