@moto-nrw/design-system 0.2.2 → 0.3.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.
- package/README.md +17 -26
- package/dist/index.cjs +652 -303
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +650 -302
- package/dist/index.js.map +1 -1
- package/dist/styles.css +2 -0
- package/dist/tailwind.css +363 -14
- package/dist/tokens.css +46 -0
- package/package.json +12 -3
- package/dist/index.css +0 -1550
- package/dist/index.css.map +0 -1
package/dist/styles.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:"Inter", system-ui, -apple-system, sans-serif;--color-red-50:#fdf0ee;--color-red-400:#d4654e;--color-red-500:#c45040;--color-red-600:#a33d30;--color-blue-50:#eff6ff;--color-blue-500:#3b82f6;--color-blue-700:#1d4ed8;--color-purple-50:#f5f3ff;--color-purple-500:#8b5cf6;--color-purple-700:#6d28d9;--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-normal:1.5;--leading-relaxed:1.75;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--color-steel-50:#f8fafc;--color-steel-100:#f1f5f9;--color-steel-200:#e2e8f0;--color-steel-300:#cbd5e1;--color-steel-400:#94a3b8;--color-steel-500:#64748b;--color-steel-600:#475569;--color-steel-700:#334155;--color-steel-800:#1e293b;--color-steel-900:#0f172a;--color-sage-100:#d4e4c8;--color-sage-300:#a3c48a;--color-sage-500:#7ba05b;--color-sage-700:#577b42;--color-sage-900:#3b4f2a;--color-warm-50:#fef3c7;--color-warm-100:#fde68a;--color-warm-300:#fbbf24;--color-warm-400:#f59e0b;--color-warm-500:#d97706;--color-warm-700:#92400e;--color-red-450:#dc4440;--spacing-0:0px;--spacing-1:4px;--spacing-2:8px;--spacing-3:12px;--spacing-4:16px;--spacing-5:20px;--spacing-6:24px;--spacing-8:32px;--spacing-10:40px;--radius-full:9999px;--z-dropdown:50;--z-modal:9999;--z-toast:99999;--duration-fast:.15s;--duration-normal:.2s;--duration-slow:.3s}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:var(--spacing-0)}.inset-px{inset:1px}.start{inset-inline-start:var(--spacing)}.top-0{top:var(--spacing-0)}.top-0\.5{top:calc(var(--spacing) * .5)}.top-1\/2{top:50%}.top-4{top:var(--spacing-4)}.top-\[var\(--toast-position-top\)\]{top:var(--toast-position-top)}.top-full{top:100%}.right-0{right:var(--spacing-0)}.right-2{right:var(--spacing-2)}.right-3{right:var(--spacing-3)}.right-4{right:var(--spacing-4)}.right-\[var\(--toast-position-right\)\]{right:var(--toast-position-right)}.bottom-0{bottom:var(--spacing-0)}.left-0{left:var(--spacing-0)}.left-0\.5{left:calc(var(--spacing) * .5)}.left-3{left:var(--spacing-3)}.z-10{z-index:10}.z-\[var\(--dropdown-z-index\)\]{z-index:var(--dropdown-z-index)}.z-\[var\(--modal-z-index\)\]{z-index:var(--modal-z-index)}.z-\[var\(--tabs-mobile-z-index\)\]{z-index:var(--tabs-mobile-z-index)}.z-\[var\(--toast-z-index\)\]{z-index:var(--toast-z-index)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:var(--spacing-0)}.mx-4{margin-inline:var(--spacing-4)}.my-2{margin-block:var(--spacing-2)}.my-4{margin-block:var(--spacing-4)}.my-8{margin-block:var(--spacing-8)}.mt-1{margin-top:var(--spacing-1)}.mr-1\.5{margin-right:calc(var(--spacing) * 1.5)}.mr-2{margin-right:var(--spacing-2)}.mr-2\.5{margin-right:calc(var(--spacing) * 2.5)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.size-1{width:var(--spacing-1);height:var(--spacing-1)}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:var(--spacing-2);height:var(--spacing-2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-3{width:var(--spacing-3);height:var(--spacing-3)}.size-4{width:var(--spacing-4);height:var(--spacing-4)}.size-5{width:var(--spacing-5);height:var(--spacing-5)}.size-\[var\(--avatar-size-lg\)\]{width:var(--avatar-size-lg);height:var(--avatar-size-lg)}.size-\[var\(--avatar-size-md\)\]{width:var(--avatar-size-md);height:var(--avatar-size-md)}.size-\[var\(--avatar-size-sm\)\]{width:var(--avatar-size-sm);height:var(--avatar-size-sm)}.size-\[var\(--checkbox-size\)\]{width:var(--checkbox-size);height:var(--checkbox-size)}.size-\[var\(--modal-close-size\)\]{width:var(--modal-close-size);height:var(--modal-close-size)}.size-\[var\(--radio-size\)\]{width:var(--radio-size);height:var(--radio-size)}.size-\[var\(--toggle-md-thumb-size\)\]{width:var(--toggle-md-thumb-size);height:var(--toggle-md-thumb-size)}.size-\[var\(--toggle-sm-thumb-size\)\]{width:var(--toggle-sm-thumb-size);height:var(--toggle-sm-thumb-size)}.size-full{width:100%;height:100%}.size-px{width:1px;height:1px}.h-\[var\(--tabs-indicator-height\)\]{height:var(--tabs-indicator-height)}.h-\[var\(--toggle-md-track-height\)\]{height:var(--toggle-md-track-height)}.h-\[var\(--toggle-sm-track-height\)\]{height:var(--toggle-sm-track-height)}.max-h-\[calc\(100vh-4rem\)\]{max-height:calc(100vh - 4rem)}.max-h-\[calc\(100vh-8rem\)\]{max-height:calc(100vh - 8rem)}.w-6{width:var(--spacing-6)}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.w-\[var\(--dropdown-width\)\]{width:var(--dropdown-width)}.w-\[var\(--toggle-md-track-width\)\]{width:var(--toggle-md-track-width)}.w-\[var\(--toggle-sm-track-width\)\]{width:var(--toggle-sm-track-width)}.w-full{width:100%}.max-w-\[var\(--modal-max-width\)\]{max-width:var(--modal-max-width)}.max-w-\[var\(--toast-max-width\)\]{max-width:var(--toast-max-width)}.min-w-48{min-width:calc(var(--spacing) * 48)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-\[contentReveal_300ms_ease-out_50ms_both\]{animation:.3s ease-out 50ms both contentReveal}.animate-\[ds-spin_0\.7s_linear_infinite\]{animation:.7s linear infinite ds-spin}.animate-\[ds-spin_0\.8s_cubic-bezier\(0\.4\,0\,0\.2\,1\)_infinite\]{animation:.8s cubic-bezier(.4,0,.2,1) infinite ds-spin}.animate-\[modalEnter_250ms_ease-out_both\]{animation:.25s ease-out both modalEnter}.animate-\[modalExit_200ms_ease-in_both\]{animation:.2s ease-in both modalExit}.animate-\[toastSlideIn_200ms_ease-out_both\]{animation:.2s ease-out both toastSlideIn}.animate-\[toastSlideOut_200ms_ease-in_both\]{animation:.2s ease-in both toastSlideOut}.animate-\[wave_1\.5s_ease-in-out_infinite\]{animation:1.5s ease-in-out infinite wave}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.appearance-none{appearance:none}.grid-rows-\[0fr\]{grid-template-rows:0fr}.grid-rows-\[1fr\]{grid-template-rows:1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing-1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:var(--spacing-2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:var(--spacing-3)}.gap-4{gap:var(--spacing-4)}.gap-\[var\(--checkbox-gap\)\]{gap:var(--checkbox-gap)}.gap-\[var\(--radio-gap\)\]{gap:var(--radio-gap)}.gap-\[var\(--tabs-gap\)\]{gap:var(--tabs-gap)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-\[var\(--avatar-radius\)\]{border-radius:var(--avatar-radius)}.rounded-\[var\(--badge-radius\)\]{border-radius:var(--badge-radius)}.rounded-\[var\(--button-radius\)\]{border-radius:var(--button-radius)}.rounded-\[var\(--card-radius\)\]{border-radius:var(--card-radius)}.rounded-\[var\(--dropdown-item-radius\)\]{border-radius:var(--dropdown-item-radius)}.rounded-\[var\(--dropdown-radius\)\]{border-radius:var(--dropdown-radius)}.rounded-\[var\(--input-radius\)\]{border-radius:var(--input-radius)}.rounded-\[var\(--modal-radius\)\]{border-radius:var(--modal-radius)}.rounded-\[var\(--select-radius\)\]{border-radius:var(--select-radius)}.rounded-\[var\(--textarea-radius\)\]{border-radius:var(--textarea-radius)}.rounded-\[var\(--toast-radius\)\]{border-radius:var(--toast-radius)}.rounded-full{border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-\[length\:var\(--toast-border-width\)\]{border-left-style:var(--tw-border-style);border-left-width:var(--toast-border-width)}.border-none{--tw-border-style:none;border-style:none}.border-\[var\(--semantic-color-border-default\)\]{border-color:var(--semantic-color-border-default)}.border-\[var\(--semantic-color-border-strong\)\]{border-color:var(--semantic-color-border-strong)}.border-\[var\(--semantic-color-border-subtle\)\]{border-color:var(--semantic-color-border-subtle)}.border-\[var\(--semantic-color-feedback-error\)\]{border-color:var(--semantic-color-feedback-error)}.border-\[var\(--semantic-color-feedback-error-border\)\]{border-color:var(--semantic-color-feedback-error-border)}.border-\[var\(--semantic-color-feedback-info-border\)\]{border-color:var(--semantic-color-feedback-info-border)}.border-\[var\(--semantic-color-feedback-success-border\)\]{border-color:var(--semantic-color-feedback-success-border)}.border-\[var\(--semantic-color-feedback-warning-border\)\]{border-color:var(--semantic-color-feedback-warning-border)}.border-black\/5{border-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.border-black\/5{border-color:color-mix(in oklab, var(--color-black) 5%, transparent)}}.border-transparent{border-color:#0000}.border-l-\[var\(--semantic-color-feedback-error\)\]{border-left-color:var(--semantic-color-feedback-error)}.border-l-\[var\(--semantic-color-feedback-info\)\]{border-left-color:var(--semantic-color-feedback-info)}.border-l-\[var\(--semantic-color-feedback-success\)\]{border-left-color:var(--semantic-color-feedback-success)}.border-l-\[var\(--semantic-color-feedback-warning\)\]{border-left-color:var(--semantic-color-feedback-warning)}.bg-\[var\(--modal-footer-bg\)\]{background-color:var(--modal-footer-bg)}.bg-\[var\(--semantic-color-bg-default\)\],.bg-\[var\(--semantic-color-bg-default\)\]\/80{background-color:var(--semantic-color-bg-default)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--semantic-color-bg-default\)\]\/80{background-color:color-mix(in oklab, var(--semantic-color-bg-default) 80%, transparent)}}.bg-\[var\(--semantic-color-bg-default\)\]\/90{background-color:var(--semantic-color-bg-default)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--semantic-color-bg-default\)\]\/90{background-color:color-mix(in oklab, var(--semantic-color-bg-default) 90%, transparent)}}.bg-\[var\(--semantic-color-bg-emphasis\)\]{background-color:var(--semantic-color-bg-emphasis)}.bg-\[var\(--semantic-color-bg-inverse\)\]{background-color:var(--semantic-color-bg-inverse)}.bg-\[var\(--semantic-color-bg-muted\)\]{background-color:var(--semantic-color-bg-muted)}.bg-\[var\(--semantic-color-bg-subtle\)\]{background-color:var(--semantic-color-bg-subtle)}.bg-\[var\(--semantic-color-border-muted\)\]{background-color:var(--semantic-color-border-muted)}.bg-\[var\(--semantic-color-border-strong\)\]{background-color:var(--semantic-color-border-strong)}.bg-\[var\(--semantic-color-brand-primary\)\]{background-color:var(--semantic-color-brand-primary)}.bg-\[var\(--semantic-color-brand-primary-light\)\]{background-color:var(--semantic-color-brand-primary-light)}.bg-\[var\(--semantic-color-brand-secondary-light\)\]{background-color:var(--semantic-color-brand-secondary-light)}.bg-\[var\(--semantic-color-feedback-accent\)\]{background-color:var(--semantic-color-feedback-accent)}.bg-\[var\(--semantic-color-feedback-accent-light\)\]{background-color:var(--semantic-color-feedback-accent-light)}.bg-\[var\(--semantic-color-feedback-error\)\]{background-color:var(--semantic-color-feedback-error)}.bg-\[var\(--semantic-color-feedback-error-light\)\]{background-color:var(--semantic-color-feedback-error-light)}.bg-\[var\(--semantic-color-feedback-error-strong\)\]{background-color:var(--semantic-color-feedback-error-strong)}.bg-\[var\(--semantic-color-feedback-error-text\)\]{background-color:var(--semantic-color-feedback-error-text)}.bg-\[var\(--semantic-color-feedback-info\)\]{background-color:var(--semantic-color-feedback-info)}.bg-\[var\(--semantic-color-feedback-info-light\)\]{background-color:var(--semantic-color-feedback-info-light)}.bg-\[var\(--semantic-color-feedback-success\)\]{background-color:var(--semantic-color-feedback-success)}.bg-\[var\(--semantic-color-feedback-success-light\)\]{background-color:var(--semantic-color-feedback-success-light)}.bg-\[var\(--semantic-color-feedback-warning\)\]{background-color:var(--semantic-color-feedback-warning)}.bg-\[var\(--semantic-color-feedback-warning-light\)\]{background-color:var(--semantic-color-feedback-warning-light)}.bg-\[var\(--semantic-color-text-default\)\]{background-color:var(--semantic-color-text-default)}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab, var(--color-black) 40%, transparent)}}.bg-current{background-color:currentColor}.bg-transparent{background-color:#0000}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-l{--tw-gradient-position:to left in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[image\:var\(--modal-bg\)\]{background-image:var(--modal-bg)}.bg-\[linear-gradient\(90deg\,var\(--semantic-color-bg-muted\)_25\%\,var\(--semantic-color-bg-subtle\)_50\%\,var\(--semantic-color-bg-muted\)_75\%\)\]{background-image:linear-gradient(90deg,var(--semantic-color-bg-muted) 25%,var(--semantic-color-bg-subtle) 50%,var(--semantic-color-bg-muted) 75%)}.from-\[var\(--semantic-color-bg-default\)\]{--tw-gradient-from:var(--semantic-color-bg-default);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-\[var\(--semantic-color-bg-default\)\]\/80{--tw-gradient-from:var(--semantic-color-bg-default)}@supports (color:color-mix(in lab, red, red)){.from-\[var\(--semantic-color-bg-default\)\]\/80{--tw-gradient-from:color-mix(in oklab, var(--semantic-color-bg-default) 80%, transparent)}}.from-\[var\(--semantic-color-bg-default\)\]\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-\[var\(--semantic-color-bg-subtle\)\]\/80{--tw-gradient-from:var(--semantic-color-bg-subtle)}@supports (color:color-mix(in lab, red, red)){.from-\[var\(--semantic-color-bg-subtle\)\]\/80{--tw-gradient-from:color-mix(in oklab, var(--semantic-color-bg-subtle) 80%, transparent)}}.from-\[var\(--semantic-color-bg-subtle\)\]\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-\[var\(--semantic-color-text-strong\)\]{--tw-gradient-from:var(--semantic-color-text-strong);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-\[var\(--semantic-color-border-muted\)\]\/20{--tw-gradient-via:var(--semantic-color-border-muted)}@supports (color:color-mix(in lab, red, red)){.via-\[var\(--semantic-color-border-muted\)\]\/20{--tw-gradient-via:color-mix(in oklab, var(--semantic-color-border-muted) 20%, transparent)}}.via-\[var\(--semantic-color-border-muted\)\]\/20{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-\[var\(--semantic-color-bg-default\)\]\/20{--tw-gradient-to:var(--semantic-color-bg-default)}@supports (color:color-mix(in lab, red, red)){.to-\[var\(--semantic-color-bg-default\)\]\/20{--tw-gradient-to:color-mix(in oklab, var(--semantic-color-bg-default) 20%, transparent)}}.to-\[var\(--semantic-color-bg-default\)\]\/20{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-\[var\(--semantic-color-bg-muted\)\]\/80{--tw-gradient-to:var(--semantic-color-bg-muted)}@supports (color:color-mix(in lab, red, red)){.to-\[var\(--semantic-color-bg-muted\)\]\/80{--tw-gradient-to:color-mix(in oklab, var(--semantic-color-bg-muted) 80%, transparent)}}.to-\[var\(--semantic-color-bg-muted\)\]\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-\[var\(--semantic-color-text-muted\)\]{--tw-gradient-to:var(--semantic-color-text-muted);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.bg-\[length\:200\%_100\%\]{background-size:200% 100%}.object-cover{object-fit:cover}.p-0{padding:var(--spacing-0)}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing-1)}.p-\[var\(--card-padding\)\]{padding:var(--card-padding)}.p-\[var\(--card-padding-lg\)\]{padding:var(--card-padding-lg)}.p-\[var\(--card-padding-sm\)\]{padding:var(--card-padding-sm)}.p-\[var\(--dropdown-padding\)\]{padding:var(--dropdown-padding)}.px-2{padding-inline:var(--spacing-2)}.px-3{padding-inline:var(--spacing-3)}.px-4{padding-inline:var(--spacing-4)}.px-5{padding-inline:var(--spacing-5)}.px-10{padding-inline:var(--spacing-10)}.px-\[var\(--button-lg-padding-x\)\]{padding-inline:var(--button-lg-padding-x)}.px-\[var\(--button-md-padding-x\)\]{padding-inline:var(--button-md-padding-x)}.px-\[var\(--button-sm-padding-x\)\]{padding-inline:var(--button-sm-padding-x)}.px-\[var\(--button-xl-padding-x\)\]{padding-inline:var(--button-xl-padding-x)}.px-\[var\(--dropdown-item-padding-x\)\]{padding-inline:var(--dropdown-item-padding-x)}.px-\[var\(--input-padding-x\)\]{padding-inline:var(--input-padding-x)}.px-\[var\(--modal-padding-x\)\]{padding-inline:var(--modal-padding-x)}.px-\[var\(--textarea-padding-x\)\]{padding-inline:var(--textarea-padding-x)}.px-\[var\(--toast-padding-x\)\]{padding-inline:var(--toast-padding-x)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing-1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:var(--spacing-2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:var(--spacing-3)}.py-\[var\(--button-lg-padding-y\)\]{padding-block:var(--button-lg-padding-y)}.py-\[var\(--button-md-padding-y\)\]{padding-block:var(--button-md-padding-y)}.py-\[var\(--button-sm-padding-y\)\]{padding-block:var(--button-sm-padding-y)}.py-\[var\(--button-xl-padding-y\)\]{padding-block:var(--button-xl-padding-y)}.py-\[var\(--dropdown-item-padding-y\)\]{padding-block:var(--dropdown-item-padding-y)}.py-\[var\(--input-padding-y\)\]{padding-block:var(--input-padding-y)}.py-\[var\(--modal-padding-y\)\]{padding-block:var(--modal-padding-y)}.py-\[var\(--select-padding-y\)\]{padding-block:var(--select-padding-y)}.py-\[var\(--textarea-padding-y\)\]{padding-block:var(--textarea-padding-y)}.py-\[var\(--toast-padding-y\)\]{padding-block:var(--toast-padding-y)}.pr-3{padding-right:var(--spacing-3)}.pr-4{padding-right:var(--spacing-4)}.pr-10{padding-right:var(--spacing-10)}.pb-3{padding-bottom:var(--spacing-3)}.pl-9{padding-left:calc(var(--spacing) * 9)}.pl-\[var\(--select-padding-left\)\]{padding-left:var(--select-padding-left)}.text-left{text-align:left}.font-sans{font-family:var(--font-sans)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[length\:var\(--badge-font-size\)\]{font-size:var(--badge-font-size)}.text-\[length\:var\(--button-lg-font-size\)\]{font-size:var(--button-lg-font-size)}.text-\[length\:var\(--button-md-font-size\)\]{font-size:var(--button-md-font-size)}.text-\[length\:var\(--button-sm-font-size\)\]{font-size:var(--button-sm-font-size)}.text-\[length\:var\(--button-xl-font-size\)\]{font-size:var(--button-xl-font-size)}.text-\[length\:var\(--dropdown-item-font-size\)\]{font-size:var(--dropdown-item-font-size)}.text-\[length\:var\(--input-font-size\)\]{font-size:var(--input-font-size)}.text-\[length\:var\(--select-font-size\)\]{font-size:var(--select-font-size)}.text-\[length\:var\(--textarea-font-size\)\]{font-size:var(--textarea-font-size)}.text-\[length\:var\(--toast-font-size\)\]{font-size:var(--toast-font-size)}.leading-\[1\.4\]{--tw-leading:1.4;line-height:1.4}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-\[number\:var\(--avatar-font-weight\)\]{--tw-font-weight:var(--avatar-font-weight);font-weight:var(--avatar-font-weight)}.font-\[number\:var\(--badge-font-weight\)\]{--tw-font-weight:var(--badge-font-weight);font-weight:var(--badge-font-weight)}.font-\[number\:var\(--button-font-weight\)\]{--tw-font-weight:var(--button-font-weight);font-weight:var(--button-font-weight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-\[var\(--semantic-color-brand-primary\)\]{color:var(--semantic-color-brand-primary)}.text-\[var\(--semantic-color-brand-primary-dark\)\]{color:var(--semantic-color-brand-primary-dark)}.text-\[var\(--semantic-color-feedback-accent-text\)\]{color:var(--semantic-color-feedback-accent-text)}.text-\[var\(--semantic-color-feedback-error\)\]{color:var(--semantic-color-feedback-error)}.text-\[var\(--semantic-color-feedback-error-text\)\]{color:var(--semantic-color-feedback-error-text)}.text-\[var\(--semantic-color-feedback-info\)\]{color:var(--semantic-color-feedback-info)}.text-\[var\(--semantic-color-feedback-info-text\)\]{color:var(--semantic-color-feedback-info-text)}.text-\[var\(--semantic-color-feedback-success\)\]{color:var(--semantic-color-feedback-success)}.text-\[var\(--semantic-color-feedback-success-text\)\]{color:var(--semantic-color-feedback-success-text)}.text-\[var\(--semantic-color-feedback-warning\)\]{color:var(--semantic-color-feedback-warning)}.text-\[var\(--semantic-color-feedback-warning-text\)\]{color:var(--semantic-color-feedback-warning-text)}.text-\[var\(--semantic-color-text-default\)\]{color:var(--semantic-color-text-default)}.text-\[var\(--semantic-color-text-inverse\)\]{color:var(--semantic-color-text-inverse)}.text-\[var\(--semantic-color-text-muted\)\]{color:var(--semantic-color-text-muted)}.text-\[var\(--semantic-color-text-secondary\)\]{color:var(--semantic-color-text-secondary)}.text-\[var\(--semantic-color-text-strong\)\]{color:var(--semantic-color-text-strong)}.text-\[var\(--semantic-color-text-tertiary\)\]{color:var(--semantic-color-text-tertiary)}.text-inherit{color:inherit}.accent-\[var\(--semantic-color-text-default\)\]{accent-color:var(--semantic-color-text-default)}.opacity-0{opacity:0}.opacity-80{opacity:.8}.opacity-\[0\.03\]{opacity:.03}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_0_0_0_1px_var\(--card-glass-border\)\]{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--card-glass-border));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--card-shadow\)\]{--tw-shadow:var(--card-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--dropdown-shadow\)\]{--tw-shadow:var(--dropdown-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--modal-shadow\)\]{--tw-shadow:var(--modal-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--shadow-sm\)\]{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--toast-shadow\)\]{--tw-shadow:var(--toast-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-2{outline-style:var(--tw-outline-style);outline-width:2px}.-outline-offset-2{outline-offset:calc(2px * -1)}.outline-\[var\(--semantic-color-bg-default\)\]{outline-color:var(--semantic-color-bg-default)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[var\(--card-backdrop-blur\)\]{--tw-backdrop-blur:blur(var(--card-backdrop-blur));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-\[var\(--modal-backdrop-blur\)\]{--tw-backdrop-blur:blur(var(--modal-backdrop-blur));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\[border-color\,box-shadow\]{transition-property:border-color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\]{transition-property:border-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[grid-template-rows\]{transition-property:grid-template-rows;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[left\,width\]{transition-property:left,width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-\[var\(--button-transition-duration\)\]{--tw-duration:var(--button-transition-duration);transition-duration:var(--button-transition-duration)}.duration-\[var\(--card-transition-duration\)\]{--tw-duration:var(--card-transition-duration);transition-duration:var(--card-transition-duration)}.duration-\[var\(--duration-fast\)\]{--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}.duration-\[var\(--duration-normal\)\]{--tw-duration:var(--duration-normal);transition-duration:var(--duration-normal)}.duration-\[var\(--duration-slow\)\]{--tw-duration:var(--duration-slow);transition-duration:var(--duration-slow)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}.\[clip\:rect\(0\,0\,0\,0\)\]{clip:rect(0,0,0,0)}.\[scrollbar-width\:none\]{scrollbar-width:none}@media (hover:hover){.group-hover\:rotate-90:is(:where(.group):hover *){rotate:90deg}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\:shadow-\[inset_0_0_0_1px_var\(--card-glass-border-hover\)\]:is(:where(.group):hover *){--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--card-glass-border-hover));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.peer-checked\:bg-\[var\(--semantic-color-brand-primary\)\]:is(:where(.peer):checked~*){background-color:var(--semantic-color-brand-primary)}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-\[var\(--disabled-opacity\)\]:is(:where(.peer):disabled~*){opacity:var(--disabled-opacity)}.placeholder\:text-\[var\(--semantic-color-text-muted\)\]::placeholder{color:var(--semantic-color-text-muted)}@media (hover:hover){.hover\:translate-y-\[var\(--card-hover-lift\)\]:hover{--tw-translate-y:var(--card-hover-lift);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-\[var\(--semantic-color-border-muted\)\]:hover,.hover\:border-\[var\(--semantic-color-border-muted\)\]\/50:hover{border-color:var(--semantic-color-border-muted)}@supports (color:color-mix(in lab, red, red)){.hover\:border-\[var\(--semantic-color-border-muted\)\]\/50:hover{border-color:color-mix(in oklab, var(--semantic-color-border-muted) 50%, transparent)}}.hover\:bg-\[var\(--semantic-color-bg-default\)\]:hover{background-color:var(--semantic-color-bg-default)}.hover\:bg-\[var\(--semantic-color-bg-muted\)\]:hover{background-color:var(--semantic-color-bg-muted)}.hover\:bg-\[var\(--semantic-color-bg-subtle\)\]:hover{background-color:var(--semantic-color-bg-subtle)}.hover\:bg-\[var\(--semantic-color-feedback-error-light\)\]:hover{background-color:var(--semantic-color-feedback-error-light)}.hover\:text-\[var\(--semantic-color-brand-primary-hover\)\]:hover{color:var(--semantic-color-brand-primary-hover)}.hover\:text-\[var\(--semantic-color-text-default\)\]:hover{color:var(--semantic-color-text-default)}.hover\:text-\[var\(--semantic-color-text-secondary\)\]:hover{color:var(--semantic-color-text-secondary)}.hover\:text-\[var\(--semantic-color-text-tertiary\)\]:hover{color:var(--semantic-color-text-tertiary)}.hover\:shadow-\[var\(--card-shadow-hover\)\]:hover{--tw-shadow:var(--card-shadow-hover);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-\[var\(--semantic-color-border-strong\)\]:focus{border-color:var(--semantic-color-border-strong)}.focus\:outline-none:focus,.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-100:active{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-\[var\(--card-active-scale\)\]:active{scale:var(--card-active-scale)}@media (hover:hover){.hover\:enabled\:scale-105:hover:enabled{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:enabled\:border-\[var\(--semantic-color-border-muted\)\]:hover:enabled{border-color:var(--semantic-color-border-muted)}.hover\:enabled\:border-\[var\(--semantic-color-feedback-error\)\]:hover:enabled{border-color:var(--semantic-color-feedback-error)}.hover\:enabled\:bg-\[var\(--semantic-color-bg-emphasis-hover\)\]:hover:enabled{background-color:var(--semantic-color-bg-emphasis-hover)}.hover\:enabled\:bg-\[var\(--semantic-color-bg-inverse-hover\)\]:hover:enabled{background-color:var(--semantic-color-bg-inverse-hover)}.hover\:enabled\:bg-\[var\(--semantic-color-bg-muted\)\]:hover:enabled{background-color:var(--semantic-color-bg-muted)}.hover\:enabled\:bg-\[var\(--semantic-color-bg-subtle\)\]:hover:enabled{background-color:var(--semantic-color-bg-subtle)}.hover\:enabled\:bg-\[var\(--semantic-color-brand-primary-hover\)\]:hover:enabled{background-color:var(--semantic-color-brand-primary-hover)}.hover\:enabled\:bg-\[var\(--semantic-color-feedback-error\)\]:hover:enabled{background-color:var(--semantic-color-feedback-error)}.hover\:enabled\:bg-\[var\(--semantic-color-feedback-error-light\)\]:hover:enabled{background-color:var(--semantic-color-feedback-error-light)}.hover\:enabled\:shadow-\[var\(--shadow-md\)\]:hover:enabled{--tw-shadow:var(--shadow-md);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:enabled\:shadow-lg:hover:enabled{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.active\:enabled\:scale-95:active:enabled{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:enabled\:scale-100:active:enabled{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-\[var\(--semantic-color-bg-subtle\)\]:disabled{background-color:var(--semantic-color-bg-subtle)}.disabled\:opacity-\[var\(--disabled-opacity\)\]:disabled{opacity:var(--disabled-opacity)}@media (min-width:48rem){.md\:block{display:block}.md\:hidden{display:none}}.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{display:none}.peer-checked\:\[\&\>div\]\:translate-x-\[var\(--toggle-md-thumb-translate\)\]:is(:where(.peer):checked~*)>div{--tw-translate-x:var(--toggle-md-thumb-translate);translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-checked\:\[\&\>div\]\:translate-x-\[var\(--toggle-sm-thumb-translate\)\]:is(:where(.peer):checked~*)>div{--tw-translate-x:var(--toggle-sm-thumb-translate);translate:var(--tw-translate-x) var(--tw-translate-y)}}:root{--color-white:#fff;--color-black:#000;--color-steel-50:#f8fafc;--color-steel-100:#f1f5f9;--color-steel-200:#e2e8f0;--color-steel-300:#cbd5e1;--color-steel-400:#94a3b8;--color-steel-500:#64748b;--color-steel-600:#475569;--color-steel-700:#334155;--color-steel-800:#1e293b;--color-steel-900:#0f172a;--color-sage-100:#d4e4c8;--color-sage-300:#a3c48a;--color-sage-500:#7ba05b;--color-sage-700:#577b42;--color-sage-900:#3b4f2a;--color-warm-50:#fef3c7;--color-warm-100:#fde68a;--color-warm-200:#fcd34d;--color-warm-300:#fbbf24;--color-warm-400:#f59e0b;--color-warm-500:#d97706;--color-warm-600:#b45309;--color-warm-700:#92400e;--color-warm-800:#78350f;--color-warm-900:#451a03;--color-red-50:#fdf0ee;--color-red-100:#fad5cd;--color-red-400:#d4654e;--color-red-450:#dc4440;--color-red-500:#c45040;--color-red-600:#a33d30;--color-blue-50:#eff6ff;--color-blue-100:#dbeafe;--color-blue-500:#3b82f6;--color-blue-600:#2563eb;--color-blue-700:#1d4ed8;--color-purple-50:#f5f3ff;--color-purple-100:#ede9fe;--color-purple-500:#8b5cf6;--color-purple-600:#7c3aed;--color-purple-700:#6d28d9;--radius-none:0;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--spacing-0:0;--spacing-1:4px;--spacing-2:8px;--spacing-3:12px;--spacing-4:16px;--spacing-5:20px;--spacing-6:24px;--spacing-8:32px;--spacing-10:40px;--spacing-12:48px;--spacing-16:64px;--duration-fast:.15s;--duration-normal:.2s;--duration-slow:.3s;--easing-default:ease;--font-family-sans:Inter, system-ui, -apple-system, sans-serif;--font-family-mono:"JetBrains Mono", "Fira Code", monospace;--font-size-xs:12px;--font-size-sm:14px;--font-size-base:16px;--font-size-lg:18px;--font-size-xl:20px;--font-size-2xl:24px;--font-size-3xl:30px;--font-size-4xl:36px;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-line-height-tight:1.25rem;--font-line-height-normal:1.5rem;--font-line-height-relaxed:1.75rem;--z-index-dropdown:50;--z-index-modal:9999;--z-index-toast:99999;--semantic-color-brand-primary:var(--color-sage-500);--semantic-color-brand-primary-hover:var(--color-sage-700);--semantic-color-brand-primary-light:var(--color-sage-100);--semantic-color-brand-primary-dark:var(--color-sage-900);--semantic-color-brand-secondary:var(--color-warm-400);--semantic-color-brand-secondary-hover:var(--color-warm-500);--semantic-color-brand-secondary-light:var(--color-warm-50);--semantic-color-bg-default:var(--color-white);--semantic-color-bg-subtle:var(--color-steel-50);--semantic-color-bg-muted:var(--color-steel-100);--semantic-color-bg-emphasis:var(--color-steel-200);--semantic-color-bg-emphasis-hover:var(--color-steel-300);--semantic-color-bg-inverse:var(--color-steel-900);--semantic-color-bg-inverse-hover:var(--color-steel-700);--semantic-color-text-default:var(--color-steel-900);--semantic-color-text-strong:var(--color-steel-800);--semantic-color-text-secondary:var(--color-steel-600);--semantic-color-text-tertiary:var(--color-steel-700);--semantic-color-text-muted:var(--color-steel-500);--semantic-color-text-inverse:var(--color-white);--semantic-color-border-default:var(--color-steel-200);--semantic-color-border-subtle:var(--color-steel-100);--semantic-color-border-strong:var(--color-steel-300);--semantic-color-border-muted:var(--color-steel-400);--semantic-color-feedback-success:var(--color-sage-500);--semantic-color-feedback-success-light:var(--color-sage-100);--semantic-color-feedback-success-text:var(--color-sage-700);--semantic-color-feedback-success-border:var(--color-sage-300);--semantic-color-feedback-warning:var(--color-warm-400);--semantic-color-feedback-warning-light:var(--color-warm-100);--semantic-color-feedback-warning-text:var(--color-warm-700);--semantic-color-feedback-warning-border:var(--color-warm-300);--semantic-color-feedback-error:var(--color-red-500);--semantic-color-feedback-error-light:var(--color-red-50);--semantic-color-feedback-error-text:var(--color-red-600);--semantic-color-feedback-error-border:var(--color-red-400);--semantic-color-feedback-error-strong:var(--color-red-450);--semantic-color-feedback-info:var(--color-blue-500);--semantic-color-feedback-info-light:var(--color-blue-50);--semantic-color-feedback-info-text:var(--color-blue-700);--semantic-color-feedback-info-border:var(--color-blue-500);--semantic-color-feedback-accent:var(--color-purple-500);--semantic-color-feedback-accent-light:var(--color-purple-50);--semantic-color-feedback-accent-text:var(--color-purple-700);--disabled-opacity:.5;--button-radius:var(--radius-md);--button-font-weight:var(--font-weight-medium);--button-transition-duration:var(--duration-fast);--button-sm-padding-x:var(--spacing-3);--button-sm-padding-y:var(--spacing-1);--button-sm-font-size:var(--text-sm);--button-md-padding-x:var(--spacing-5);--button-md-padding-y:var(--spacing-2);--button-md-font-size:var(--text-base);--button-lg-padding-x:var(--spacing-5);--button-lg-padding-y:var(--spacing-3);--button-lg-font-size:var(--text-lg);--button-xl-padding-x:var(--spacing-6);--button-xl-padding-y:var(--spacing-3);--button-xl-font-size:var(--text-xl);--card-radius:var(--radius-2xl);--card-padding:var(--spacing-6);--card-shadow:0 8px 30px #0000001f;--card-shadow-hover:0 12px 40px #0000002e;--card-transition-duration:var(--duration-fast);--card-glass-border:#fff3;--card-glass-border-hover:#94a3b866;--card-padding-sm:var(--spacing-4);--card-padding-lg:var(--spacing-10);--card-backdrop-blur:12px;--card-hover-lift:-2px;--card-active-scale:.98;--input-radius:var(--radius-md);--input-padding-x:var(--spacing-4);--input-padding-y:var(--spacing-3);--input-font-size:var(--text-base);--modal-radius:var(--radius-xl);--modal-max-width:32rem;--modal-padding-x:var(--spacing-6);--modal-padding-y:var(--spacing-4);--modal-shadow:0 25px 50px -12px #00000040, 0 8px 16px -8px #0000001a;--modal-z-index:var(--z-modal);--modal-bg:linear-gradient(135deg, #fffffff2 0%, #f8fafcfa 100%);--modal-footer-bg:#f9fafb80;--modal-backdrop-blur:20px;--modal-close-size:2.25rem;--badge-radius:var(--radius-full);--badge-font-size:var(--text-sm);--badge-font-weight:var(--font-weight-semibold);--avatar-size-sm:32px;--avatar-size-md:44px;--avatar-size-lg:64px;--avatar-radius:var(--radius-full);--avatar-font-weight:var(--font-weight-semibold);--toast-z-index:var(--z-toast);--toast-position-top:var(--spacing-6);--toast-position-right:var(--spacing-6);--toast-max-width:400px;--toast-radius:var(--radius-lg);--toast-padding-x:var(--spacing-4);--toast-padding-y:var(--spacing-3);--toast-shadow:0 10px 25px -5px #00000026;--toast-border-width:3px;--toast-font-size:var(--text-sm);--dropdown-z-index:var(--z-modal);--dropdown-width:9rem;--dropdown-radius:var(--radius-md);--dropdown-shadow:var(--shadow-lg);--dropdown-padding:var(--spacing-1);--dropdown-item-padding-x:var(--spacing-3);--dropdown-item-padding-y:6px;--dropdown-item-radius:var(--radius-sm);--dropdown-item-font-size:var(--text-sm);--toggle-sm-track-width:36px;--toggle-sm-track-height:20px;--toggle-sm-thumb-size:16px;--toggle-sm-thumb-translate:16px;--toggle-md-track-width:44px;--toggle-md-track-height:24px;--toggle-md-thumb-size:20px;--toggle-md-thumb-translate:20px;--tabs-gap:var(--spacing-8);--tabs-indicator-height:2px;--tabs-mobile-z-index:var(--z-dropdown);--select-radius:var(--input-radius);--select-padding-y:var(--spacing-2);--select-padding-left:var(--spacing-3);--select-font-size:var(--input-font-size);--textarea-radius:var(--input-radius);--textarea-padding-x:var(--spacing-3);--textarea-padding-y:var(--spacing-2);--textarea-font-size:var(--text-sm);--checkbox-size:16px;--checkbox-gap:var(--spacing-3);--radio-size:16px;--radio-gap:var(--spacing-3)}@keyframes wave{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes ds-spin{to{transform:rotate(360deg)}}@keyframes modalEnter{0%{opacity:0;transform:scale(.95)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes modalExit{0%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.95)translateY(8px)}}@keyframes contentReveal{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes pulse{50%{opacity:.5}}
|
package/dist/tailwind.css
CHANGED
|
@@ -1,3 +1,142 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--color-white: #ffffff;
|
|
7
|
+
--color-black: #000000;
|
|
8
|
+
--color-steel-50: #f8fafc;
|
|
9
|
+
--color-steel-100: #f1f5f9;
|
|
10
|
+
--color-steel-200: #e2e8f0;
|
|
11
|
+
--color-steel-300: #cbd5e1;
|
|
12
|
+
--color-steel-400: #94a3b8;
|
|
13
|
+
--color-steel-500: #64748b;
|
|
14
|
+
--color-steel-600: #475569;
|
|
15
|
+
--color-steel-700: #334155;
|
|
16
|
+
--color-steel-800: #1e293b;
|
|
17
|
+
--color-steel-900: #0f172a;
|
|
18
|
+
--color-sage-100: #d4e4c8;
|
|
19
|
+
--color-sage-300: #a3c48a;
|
|
20
|
+
--color-sage-500: #7ba05b;
|
|
21
|
+
--color-sage-700: #577b42;
|
|
22
|
+
--color-sage-900: #3b4f2a;
|
|
23
|
+
--color-warm-50: #fef3c7;
|
|
24
|
+
--color-warm-100: #fde68a;
|
|
25
|
+
--color-warm-200: #fcd34d;
|
|
26
|
+
--color-warm-300: #fbbf24;
|
|
27
|
+
--color-warm-400: #f59e0b;
|
|
28
|
+
--color-warm-500: #d97706;
|
|
29
|
+
--color-warm-600: #b45309;
|
|
30
|
+
--color-warm-700: #92400e;
|
|
31
|
+
--color-warm-800: #78350f;
|
|
32
|
+
--color-warm-900: #451a03;
|
|
33
|
+
--color-red-50: #fdf0ee;
|
|
34
|
+
--color-red-100: #fad5cd;
|
|
35
|
+
--color-red-400: #d4654e;
|
|
36
|
+
--color-red-450: #dc4440;
|
|
37
|
+
--color-red-500: #c45040;
|
|
38
|
+
--color-red-600: #a33d30;
|
|
39
|
+
--color-blue-50: #eff6ff;
|
|
40
|
+
--color-blue-100: #dbeafe;
|
|
41
|
+
--color-blue-500: #3b82f6;
|
|
42
|
+
--color-blue-600: #2563eb;
|
|
43
|
+
--color-blue-700: #1d4ed8;
|
|
44
|
+
--color-purple-50: #f5f3ff;
|
|
45
|
+
--color-purple-100: #ede9fe;
|
|
46
|
+
--color-purple-500: #8b5cf6;
|
|
47
|
+
--color-purple-600: #7c3aed;
|
|
48
|
+
--color-purple-700: #6d28d9;
|
|
49
|
+
--radius-none: 0;
|
|
50
|
+
--radius-sm: 4px;
|
|
51
|
+
--radius-md: 8px;
|
|
52
|
+
--radius-lg: 12px;
|
|
53
|
+
--radius-xl: 16px;
|
|
54
|
+
--radius-full: 9999px;
|
|
55
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
56
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
57
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
58
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
59
|
+
--spacing-0: 0;
|
|
60
|
+
--spacing-1: 4px;
|
|
61
|
+
--spacing-2: 8px;
|
|
62
|
+
--spacing-3: 12px;
|
|
63
|
+
--spacing-4: 16px;
|
|
64
|
+
--spacing-5: 20px;
|
|
65
|
+
--spacing-6: 24px;
|
|
66
|
+
--spacing-8: 32px;
|
|
67
|
+
--spacing-10: 40px;
|
|
68
|
+
--spacing-12: 48px;
|
|
69
|
+
--spacing-16: 64px;
|
|
70
|
+
--duration-fast: 150ms;
|
|
71
|
+
--duration-normal: 200ms;
|
|
72
|
+
--duration-slow: 300ms;
|
|
73
|
+
--easing-default: ease;
|
|
74
|
+
--font-family-sans: Inter, system-ui, -apple-system, sans-serif;
|
|
75
|
+
--font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
76
|
+
--font-size-xs: 12px;
|
|
77
|
+
--font-size-sm: 14px;
|
|
78
|
+
--font-size-base: 16px;
|
|
79
|
+
--font-size-lg: 18px;
|
|
80
|
+
--font-size-xl: 20px;
|
|
81
|
+
--font-size-2xl: 24px;
|
|
82
|
+
--font-size-3xl: 30px;
|
|
83
|
+
--font-size-4xl: 36px;
|
|
84
|
+
--font-weight-regular: 400;
|
|
85
|
+
--font-weight-medium: 500;
|
|
86
|
+
--font-weight-semibold: 600;
|
|
87
|
+
--font-weight-bold: 700;
|
|
88
|
+
--font-line-height-tight: 1.25rem;
|
|
89
|
+
--font-line-height-normal: 1.5rem;
|
|
90
|
+
--font-line-height-relaxed: 1.75rem;
|
|
91
|
+
--z-index-dropdown: 50;
|
|
92
|
+
--z-index-modal: 9999;
|
|
93
|
+
--z-index-toast: 99999;
|
|
94
|
+
--semantic-color-brand-primary: var(--color-sage-500);
|
|
95
|
+
--semantic-color-brand-primary-hover: var(--color-sage-700);
|
|
96
|
+
--semantic-color-brand-primary-light: var(--color-sage-100);
|
|
97
|
+
--semantic-color-brand-primary-dark: var(--color-sage-900);
|
|
98
|
+
--semantic-color-brand-secondary: var(--color-warm-400);
|
|
99
|
+
--semantic-color-brand-secondary-hover: var(--color-warm-500);
|
|
100
|
+
--semantic-color-brand-secondary-light: var(--color-warm-50);
|
|
101
|
+
--semantic-color-bg-default: var(--color-white);
|
|
102
|
+
--semantic-color-bg-subtle: var(--color-steel-50);
|
|
103
|
+
--semantic-color-bg-muted: var(--color-steel-100);
|
|
104
|
+
--semantic-color-bg-emphasis: var(--color-steel-200);
|
|
105
|
+
--semantic-color-bg-emphasis-hover: var(--color-steel-300);
|
|
106
|
+
--semantic-color-bg-inverse: var(--color-steel-900);
|
|
107
|
+
--semantic-color-bg-inverse-hover: var(--color-steel-700);
|
|
108
|
+
--semantic-color-text-default: var(--color-steel-900);
|
|
109
|
+
--semantic-color-text-strong: var(--color-steel-800);
|
|
110
|
+
--semantic-color-text-secondary: var(--color-steel-600);
|
|
111
|
+
--semantic-color-text-tertiary: var(--color-steel-700);
|
|
112
|
+
--semantic-color-text-muted: var(--color-steel-500);
|
|
113
|
+
--semantic-color-text-inverse: var(--color-white);
|
|
114
|
+
--semantic-color-border-default: var(--color-steel-200);
|
|
115
|
+
--semantic-color-border-subtle: var(--color-steel-100);
|
|
116
|
+
--semantic-color-border-strong: var(--color-steel-300);
|
|
117
|
+
--semantic-color-border-muted: var(--color-steel-400);
|
|
118
|
+
--semantic-color-feedback-success: var(--color-sage-500);
|
|
119
|
+
--semantic-color-feedback-success-light: var(--color-sage-100);
|
|
120
|
+
--semantic-color-feedback-success-text: var(--color-sage-700);
|
|
121
|
+
--semantic-color-feedback-success-border: var(--color-sage-300);
|
|
122
|
+
--semantic-color-feedback-warning: var(--color-warm-400);
|
|
123
|
+
--semantic-color-feedback-warning-light: var(--color-warm-100);
|
|
124
|
+
--semantic-color-feedback-warning-text: var(--color-warm-700);
|
|
125
|
+
--semantic-color-feedback-warning-border: var(--color-warm-300);
|
|
126
|
+
--semantic-color-feedback-error: var(--color-red-500);
|
|
127
|
+
--semantic-color-feedback-error-light: var(--color-red-50);
|
|
128
|
+
--semantic-color-feedback-error-text: var(--color-red-600);
|
|
129
|
+
--semantic-color-feedback-error-border: var(--color-red-400);
|
|
130
|
+
--semantic-color-feedback-error-strong: var(--color-red-450);
|
|
131
|
+
--semantic-color-feedback-info: var(--color-blue-500);
|
|
132
|
+
--semantic-color-feedback-info-light: var(--color-blue-50);
|
|
133
|
+
--semantic-color-feedback-info-text: var(--color-blue-700);
|
|
134
|
+
--semantic-color-feedback-info-border: var(--color-blue-500);
|
|
135
|
+
--semantic-color-feedback-accent: var(--color-purple-500);
|
|
136
|
+
--semantic-color-feedback-accent-light: var(--color-purple-50);
|
|
137
|
+
--semantic-color-feedback-accent-text: var(--color-purple-700);
|
|
138
|
+
}
|
|
139
|
+
|
|
1
140
|
/*
|
|
2
141
|
* Ganztagshelden Design System — Tailwind v4 Theme
|
|
3
142
|
*
|
|
@@ -46,6 +185,20 @@
|
|
|
46
185
|
--color-red-500: #c45040;
|
|
47
186
|
--color-red-600: #a33d30;
|
|
48
187
|
|
|
188
|
+
/* ─── Blue (Informational, Tags) ─── */
|
|
189
|
+
--color-blue-50: #eff6ff;
|
|
190
|
+
--color-blue-100: #dbeafe;
|
|
191
|
+
--color-blue-500: #3b82f6;
|
|
192
|
+
--color-blue-600: #2563eb;
|
|
193
|
+
--color-blue-700: #1d4ed8;
|
|
194
|
+
|
|
195
|
+
/* ─── Purple (Tags, Highlights) ─── */
|
|
196
|
+
--color-purple-50: #f5f3ff;
|
|
197
|
+
--color-purple-100: #ede9fe;
|
|
198
|
+
--color-purple-500: #8b5cf6;
|
|
199
|
+
--color-purple-600: #7c3aed;
|
|
200
|
+
--color-purple-700: #6d28d9;
|
|
201
|
+
|
|
49
202
|
/* ─── Semantic Colors ─── */
|
|
50
203
|
--color-brand-primary: #7ba05b;
|
|
51
204
|
--color-brand-primary-hover: #577b42;
|
|
@@ -73,27 +226,223 @@
|
|
|
73
226
|
--radius-md: 8px;
|
|
74
227
|
--radius-lg: 12px;
|
|
75
228
|
--radius-xl: 16px;
|
|
229
|
+
--radius-2xl: 24px;
|
|
76
230
|
--radius-full: 9999px;
|
|
77
231
|
|
|
232
|
+
/* ─── Shadows ─── */
|
|
233
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
234
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
235
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
236
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
237
|
+
|
|
238
|
+
/* ─── Z-Index ─── */
|
|
239
|
+
--z-dropdown: 50;
|
|
240
|
+
--z-modal: 9999;
|
|
241
|
+
--z-toast: 99999;
|
|
242
|
+
|
|
243
|
+
/* ─── Transitions ─── */
|
|
244
|
+
--duration-fast: 150ms;
|
|
245
|
+
--duration-normal: 200ms;
|
|
246
|
+
--duration-slow: 300ms;
|
|
247
|
+
|
|
78
248
|
/* ─── Typography ─── */
|
|
79
|
-
--font-
|
|
80
|
-
--font-
|
|
81
|
-
|
|
82
|
-
--
|
|
83
|
-
--
|
|
84
|
-
--
|
|
85
|
-
--
|
|
86
|
-
--
|
|
87
|
-
--
|
|
88
|
-
--
|
|
89
|
-
--
|
|
249
|
+
--font-sans: "Inter", system-ui, -apple-system, sans-serif;
|
|
250
|
+
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
|
251
|
+
|
|
252
|
+
--text-xs: 0.75rem;
|
|
253
|
+
--text-sm: 0.875rem;
|
|
254
|
+
--text-base: 1rem;
|
|
255
|
+
--text-lg: 1.125rem;
|
|
256
|
+
--text-xl: 1.25rem;
|
|
257
|
+
--text-2xl: 1.5rem;
|
|
258
|
+
--text-3xl: 1.875rem;
|
|
259
|
+
--text-4xl: 2.25rem;
|
|
90
260
|
|
|
91
261
|
--font-weight-regular: 400;
|
|
92
262
|
--font-weight-medium: 500;
|
|
93
263
|
--font-weight-semibold: 600;
|
|
94
264
|
--font-weight-bold: 700;
|
|
95
265
|
|
|
96
|
-
--
|
|
97
|
-
--
|
|
98
|
-
--
|
|
266
|
+
--leading-tight: 1.25;
|
|
267
|
+
--leading-normal: 1.5;
|
|
268
|
+
--leading-relaxed: 1.75;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
/* ─── Component Tokens ───
|
|
272
|
+
*
|
|
273
|
+
* Override these in your app's :root to customize components globally.
|
|
274
|
+
* Example (PyrePortal kiosk with large touch targets):
|
|
275
|
+
*
|
|
276
|
+
* :root {
|
|
277
|
+
* --button-radius: var(--radius-xl);
|
|
278
|
+
* --button-md-padding-x: var(--spacing-6);
|
|
279
|
+
* --button-md-padding-y: var(--spacing-4);
|
|
280
|
+
* --button-md-font-size: var(--text-xl);
|
|
281
|
+
* --card-radius: 32px;
|
|
282
|
+
* --input-font-size: var(--text-lg);
|
|
283
|
+
* }
|
|
284
|
+
*/
|
|
285
|
+
:root {
|
|
286
|
+
/* ─── General ─── */
|
|
287
|
+
--disabled-opacity: 0.5;
|
|
288
|
+
|
|
289
|
+
/* ─── Button ─── */
|
|
290
|
+
--button-radius: var(--radius-md);
|
|
291
|
+
--button-font-weight: var(--font-weight-medium);
|
|
292
|
+
--button-transition-duration: var(--duration-fast);
|
|
293
|
+
--button-sm-padding-x: var(--spacing-3);
|
|
294
|
+
--button-sm-padding-y: var(--spacing-1);
|
|
295
|
+
--button-sm-font-size: var(--text-sm);
|
|
296
|
+
--button-md-padding-x: var(--spacing-5);
|
|
297
|
+
--button-md-padding-y: var(--spacing-2);
|
|
298
|
+
--button-md-font-size: var(--text-base);
|
|
299
|
+
--button-lg-padding-x: var(--spacing-5);
|
|
300
|
+
--button-lg-padding-y: var(--spacing-3);
|
|
301
|
+
--button-lg-font-size: var(--text-lg);
|
|
302
|
+
--button-xl-padding-x: var(--spacing-6);
|
|
303
|
+
--button-xl-padding-y: var(--spacing-3);
|
|
304
|
+
--button-xl-font-size: var(--text-xl);
|
|
305
|
+
|
|
306
|
+
/* ─── Card ─── */
|
|
307
|
+
--card-radius: var(--radius-2xl);
|
|
308
|
+
--card-padding: var(--spacing-6);
|
|
309
|
+
--card-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
|
|
310
|
+
--card-shadow-hover: 0 12px 40px rgb(0 0 0 / 0.18);
|
|
311
|
+
--card-transition-duration: var(--duration-fast);
|
|
312
|
+
--card-glass-border: rgb(255 255 255 / 0.2);
|
|
313
|
+
--card-glass-border-hover: rgb(148 163 184 / 0.4);
|
|
314
|
+
--card-padding-sm: var(--spacing-4);
|
|
315
|
+
--card-padding-lg: var(--spacing-10);
|
|
316
|
+
--card-backdrop-blur: 12px;
|
|
317
|
+
--card-hover-lift: -2px;
|
|
318
|
+
--card-active-scale: 0.98;
|
|
319
|
+
|
|
320
|
+
/* ─── Input ─── */
|
|
321
|
+
--input-radius: var(--radius-md);
|
|
322
|
+
--input-padding-x: var(--spacing-4);
|
|
323
|
+
--input-padding-y: var(--spacing-3);
|
|
324
|
+
--input-font-size: var(--text-base);
|
|
325
|
+
|
|
326
|
+
/* ─── Modal ─── */
|
|
327
|
+
--modal-radius: var(--radius-xl);
|
|
328
|
+
--modal-max-width: 32rem;
|
|
329
|
+
--modal-padding-x: var(--spacing-6);
|
|
330
|
+
--modal-padding-y: var(--spacing-4);
|
|
331
|
+
--modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25), 0 8px 16px -8px rgb(0 0 0 / 0.1);
|
|
332
|
+
--modal-z-index: var(--z-modal);
|
|
333
|
+
--modal-bg: linear-gradient(135deg, rgb(255 255 255 / 0.95) 0%, rgb(248 250 252 / 0.98) 100%);
|
|
334
|
+
--modal-footer-bg: rgb(249 250 251 / 0.5);
|
|
335
|
+
--modal-backdrop-blur: 20px;
|
|
336
|
+
--modal-close-size: 2.25rem;
|
|
337
|
+
|
|
338
|
+
/* ─── Badge ─── */
|
|
339
|
+
--badge-radius: var(--radius-full);
|
|
340
|
+
--badge-font-size: var(--text-sm);
|
|
341
|
+
--badge-font-weight: var(--font-weight-semibold);
|
|
342
|
+
|
|
343
|
+
/* ─── Avatar ─── */
|
|
344
|
+
--avatar-size-sm: 32px;
|
|
345
|
+
--avatar-size-md: 44px;
|
|
346
|
+
--avatar-size-lg: 64px;
|
|
347
|
+
--avatar-radius: var(--radius-full);
|
|
348
|
+
--avatar-font-weight: var(--font-weight-semibold);
|
|
349
|
+
|
|
350
|
+
/* ─── Toast ─── */
|
|
351
|
+
--toast-z-index: var(--z-toast);
|
|
352
|
+
--toast-position-top: var(--spacing-6);
|
|
353
|
+
--toast-position-right: var(--spacing-6);
|
|
354
|
+
--toast-max-width: 400px;
|
|
355
|
+
--toast-radius: var(--radius-lg);
|
|
356
|
+
--toast-padding-x: var(--spacing-4);
|
|
357
|
+
--toast-padding-y: var(--spacing-3);
|
|
358
|
+
--toast-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15);
|
|
359
|
+
--toast-border-width: 3px;
|
|
360
|
+
--toast-font-size: var(--text-sm);
|
|
361
|
+
|
|
362
|
+
/* ─── DropdownMenu ─── */
|
|
363
|
+
--dropdown-z-index: var(--z-modal);
|
|
364
|
+
--dropdown-width: 9rem;
|
|
365
|
+
--dropdown-radius: var(--radius-md);
|
|
366
|
+
--dropdown-shadow: var(--shadow-lg);
|
|
367
|
+
--dropdown-padding: var(--spacing-1);
|
|
368
|
+
--dropdown-item-padding-x: var(--spacing-3);
|
|
369
|
+
--dropdown-item-padding-y: 6px;
|
|
370
|
+
--dropdown-item-radius: var(--radius-sm);
|
|
371
|
+
--dropdown-item-font-size: var(--text-sm);
|
|
372
|
+
|
|
373
|
+
/* ─── Toggle ─── */
|
|
374
|
+
/* Note: thumb-translate must equal track-width - thumb-size - 2*inset(2px) */
|
|
375
|
+
--toggle-sm-track-width: 36px;
|
|
376
|
+
--toggle-sm-track-height: 20px;
|
|
377
|
+
--toggle-sm-thumb-size: 16px;
|
|
378
|
+
--toggle-sm-thumb-translate: 16px;
|
|
379
|
+
--toggle-md-track-width: 44px;
|
|
380
|
+
--toggle-md-track-height: 24px;
|
|
381
|
+
--toggle-md-thumb-size: 20px;
|
|
382
|
+
--toggle-md-thumb-translate: 20px;
|
|
383
|
+
|
|
384
|
+
/* ─── Tabs ─── */
|
|
385
|
+
--tabs-gap: var(--spacing-8);
|
|
386
|
+
--tabs-indicator-height: 2px;
|
|
387
|
+
--tabs-mobile-z-index: var(--z-dropdown);
|
|
388
|
+
|
|
389
|
+
/* ─── Select ─── */
|
|
390
|
+
--select-radius: var(--input-radius);
|
|
391
|
+
--select-padding-y: var(--spacing-2);
|
|
392
|
+
--select-padding-left: var(--spacing-3);
|
|
393
|
+
--select-font-size: var(--input-font-size);
|
|
394
|
+
|
|
395
|
+
/* ─── Textarea ─── */
|
|
396
|
+
--textarea-radius: var(--input-radius);
|
|
397
|
+
--textarea-padding-x: var(--spacing-3);
|
|
398
|
+
--textarea-padding-y: var(--spacing-2);
|
|
399
|
+
--textarea-font-size: var(--text-sm);
|
|
400
|
+
|
|
401
|
+
/* ─── Checkbox ─── */
|
|
402
|
+
--checkbox-size: 16px;
|
|
403
|
+
--checkbox-gap: var(--spacing-3);
|
|
404
|
+
|
|
405
|
+
/* ─── Radio ─── */
|
|
406
|
+
--radio-size: 16px;
|
|
407
|
+
--radio-gap: var(--spacing-3);
|
|
99
408
|
}
|
|
409
|
+
|
|
410
|
+
@keyframes wave {
|
|
411
|
+
0% {
|
|
412
|
+
background-position: 200% 0;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
@keyframes ds-spin {
|
|
416
|
+
to {
|
|
417
|
+
transform: rotate(360deg);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
@keyframes modalEnter {
|
|
421
|
+
from {
|
|
422
|
+
opacity: 0;
|
|
423
|
+
transform: scale(0.95) translateY(8px);
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
@keyframes modalExit {
|
|
427
|
+
from {
|
|
428
|
+
opacity: 1;
|
|
429
|
+
transform: scale(1) translateY(0);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
@keyframes contentReveal {
|
|
433
|
+
from {
|
|
434
|
+
opacity: 0;
|
|
435
|
+
transform: translateY(4px);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
@keyframes toastSlideIn {
|
|
439
|
+
from {
|
|
440
|
+
opacity: 0;
|
|
441
|
+
transform: translateX(100%);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
@keyframes toastSlideOut {
|
|
445
|
+
from {
|
|
446
|
+
opacity: 1;
|
|
447
|
+
transform: translateX(0);
|
|
448
|
+
}
|
package/dist/tokens.css
CHANGED
|
@@ -36,12 +36,26 @@
|
|
|
36
36
|
--color-red-450: #dc4440;
|
|
37
37
|
--color-red-500: #c45040;
|
|
38
38
|
--color-red-600: #a33d30;
|
|
39
|
+
--color-blue-50: #eff6ff;
|
|
40
|
+
--color-blue-100: #dbeafe;
|
|
41
|
+
--color-blue-500: #3b82f6;
|
|
42
|
+
--color-blue-600: #2563eb;
|
|
43
|
+
--color-blue-700: #1d4ed8;
|
|
44
|
+
--color-purple-50: #f5f3ff;
|
|
45
|
+
--color-purple-100: #ede9fe;
|
|
46
|
+
--color-purple-500: #8b5cf6;
|
|
47
|
+
--color-purple-600: #7c3aed;
|
|
48
|
+
--color-purple-700: #6d28d9;
|
|
39
49
|
--radius-none: 0;
|
|
40
50
|
--radius-sm: 4px;
|
|
41
51
|
--radius-md: 8px;
|
|
42
52
|
--radius-lg: 12px;
|
|
43
53
|
--radius-xl: 16px;
|
|
44
54
|
--radius-full: 9999px;
|
|
55
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
56
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
57
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
58
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
45
59
|
--spacing-0: 0;
|
|
46
60
|
--spacing-1: 4px;
|
|
47
61
|
--spacing-2: 8px;
|
|
@@ -53,6 +67,10 @@
|
|
|
53
67
|
--spacing-10: 40px;
|
|
54
68
|
--spacing-12: 48px;
|
|
55
69
|
--spacing-16: 64px;
|
|
70
|
+
--duration-fast: 150ms;
|
|
71
|
+
--duration-normal: 200ms;
|
|
72
|
+
--duration-slow: 300ms;
|
|
73
|
+
--easing-default: ease;
|
|
56
74
|
--font-family-sans: Inter, system-ui, -apple-system, sans-serif;
|
|
57
75
|
--font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
58
76
|
--font-size-xs: 12px;
|
|
@@ -70,23 +88,51 @@
|
|
|
70
88
|
--font-line-height-tight: 1.25rem;
|
|
71
89
|
--font-line-height-normal: 1.5rem;
|
|
72
90
|
--font-line-height-relaxed: 1.75rem;
|
|
91
|
+
--z-index-dropdown: 50;
|
|
92
|
+
--z-index-modal: 9999;
|
|
93
|
+
--z-index-toast: 99999;
|
|
73
94
|
--semantic-color-brand-primary: var(--color-sage-500);
|
|
74
95
|
--semantic-color-brand-primary-hover: var(--color-sage-700);
|
|
75
96
|
--semantic-color-brand-primary-light: var(--color-sage-100);
|
|
97
|
+
--semantic-color-brand-primary-dark: var(--color-sage-900);
|
|
76
98
|
--semantic-color-brand-secondary: var(--color-warm-400);
|
|
77
99
|
--semantic-color-brand-secondary-hover: var(--color-warm-500);
|
|
78
100
|
--semantic-color-brand-secondary-light: var(--color-warm-50);
|
|
79
101
|
--semantic-color-bg-default: var(--color-white);
|
|
80
102
|
--semantic-color-bg-subtle: var(--color-steel-50);
|
|
81
103
|
--semantic-color-bg-muted: var(--color-steel-100);
|
|
104
|
+
--semantic-color-bg-emphasis: var(--color-steel-200);
|
|
105
|
+
--semantic-color-bg-emphasis-hover: var(--color-steel-300);
|
|
106
|
+
--semantic-color-bg-inverse: var(--color-steel-900);
|
|
107
|
+
--semantic-color-bg-inverse-hover: var(--color-steel-700);
|
|
82
108
|
--semantic-color-text-default: var(--color-steel-900);
|
|
109
|
+
--semantic-color-text-strong: var(--color-steel-800);
|
|
83
110
|
--semantic-color-text-secondary: var(--color-steel-600);
|
|
111
|
+
--semantic-color-text-tertiary: var(--color-steel-700);
|
|
84
112
|
--semantic-color-text-muted: var(--color-steel-500);
|
|
85
113
|
--semantic-color-text-inverse: var(--color-white);
|
|
86
114
|
--semantic-color-border-default: var(--color-steel-200);
|
|
115
|
+
--semantic-color-border-subtle: var(--color-steel-100);
|
|
87
116
|
--semantic-color-border-strong: var(--color-steel-300);
|
|
117
|
+
--semantic-color-border-muted: var(--color-steel-400);
|
|
88
118
|
--semantic-color-feedback-success: var(--color-sage-500);
|
|
119
|
+
--semantic-color-feedback-success-light: var(--color-sage-100);
|
|
120
|
+
--semantic-color-feedback-success-text: var(--color-sage-700);
|
|
121
|
+
--semantic-color-feedback-success-border: var(--color-sage-300);
|
|
89
122
|
--semantic-color-feedback-warning: var(--color-warm-400);
|
|
123
|
+
--semantic-color-feedback-warning-light: var(--color-warm-100);
|
|
124
|
+
--semantic-color-feedback-warning-text: var(--color-warm-700);
|
|
125
|
+
--semantic-color-feedback-warning-border: var(--color-warm-300);
|
|
90
126
|
--semantic-color-feedback-error: var(--color-red-500);
|
|
91
127
|
--semantic-color-feedback-error-light: var(--color-red-50);
|
|
128
|
+
--semantic-color-feedback-error-text: var(--color-red-600);
|
|
129
|
+
--semantic-color-feedback-error-border: var(--color-red-400);
|
|
130
|
+
--semantic-color-feedback-error-strong: var(--color-red-450);
|
|
131
|
+
--semantic-color-feedback-info: var(--color-blue-500);
|
|
132
|
+
--semantic-color-feedback-info-light: var(--color-blue-50);
|
|
133
|
+
--semantic-color-feedback-info-text: var(--color-blue-700);
|
|
134
|
+
--semantic-color-feedback-info-border: var(--color-blue-500);
|
|
135
|
+
--semantic-color-feedback-accent: var(--color-purple-500);
|
|
136
|
+
--semantic-color-feedback-accent-light: var(--color-purple-50);
|
|
137
|
+
--semantic-color-feedback-accent-text: var(--color-purple-700);
|
|
92
138
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moto-nrw/design-system",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Ganztagshelden Design System - shared components and design tokens",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
"default": "./dist/index.cjs"
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
|
+
"./styles": "./dist/styles.css",
|
|
19
20
|
"./tokens": "./dist/tokens.css",
|
|
20
21
|
"./tailwind": "./dist/tailwind.css"
|
|
21
22
|
},
|
|
@@ -38,6 +39,8 @@
|
|
|
38
39
|
"@storybook/addon-a11y": "^10.3.3",
|
|
39
40
|
"@storybook/react": "^10.3.3",
|
|
40
41
|
"@storybook/react-vite": "^10.3.3",
|
|
42
|
+
"@tailwindcss/cli": "^4.2.2",
|
|
43
|
+
"@tailwindcss/vite": "^4.2.2",
|
|
41
44
|
"@testing-library/jest-dom": "^6.9.1",
|
|
42
45
|
"@testing-library/react": "^16.3.2",
|
|
43
46
|
"@testing-library/user-event": "^14.6.1",
|
|
@@ -51,6 +54,7 @@
|
|
|
51
54
|
"react-dom": "^19.2.4",
|
|
52
55
|
"storybook": "^10.3.3",
|
|
53
56
|
"style-dictionary": "^5.4.0",
|
|
57
|
+
"tailwindcss": "^4.2.2",
|
|
54
58
|
"tsup": "^8.5.1",
|
|
55
59
|
"typescript": "^6.0.2",
|
|
56
60
|
"vitest": "^4.1.2"
|
|
@@ -61,10 +65,15 @@
|
|
|
61
65
|
"type": "module",
|
|
62
66
|
"license": "MIT",
|
|
63
67
|
"private": false,
|
|
68
|
+
"dependencies": {
|
|
69
|
+
"clsx": "^2.1.1",
|
|
70
|
+
"tailwind-merge": "^3.5.0"
|
|
71
|
+
},
|
|
64
72
|
"scripts": {
|
|
65
73
|
"tokens": "NODE_OPTIONS='--experimental-strip-types' style-dictionary build --config src/tokens/style-dictionary.config.ts",
|
|
66
|
-
"build": "pnpm tokens && tsup &&
|
|
67
|
-
"
|
|
74
|
+
"build": "pnpm tokens && tsup && pnpm build:tailwind && tailwindcss -i src/styles.css -o dist/styles.css --minify && cp src/tokens/build/variables.css dist/tokens.css",
|
|
75
|
+
"build:tailwind": "node scripts/build-tailwind.cjs",
|
|
76
|
+
"postbuild": "attw --pack --exclude-entrypoints ./tokens ./tailwind ./styles && publint",
|
|
68
77
|
"dev": "tsup --watch",
|
|
69
78
|
"test": "vitest",
|
|
70
79
|
"test:run": "vitest run",
|