winduum 0.2.3-next.1 → 0.2.3-next.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.
Files changed (28) hide show
  1. package/dist/main-rgb.css +1 -1
  2. package/dist/main.css +1 -1
  3. package/dist/tailwind.css +1 -1
  4. package/package.json +1 -1
  5. package/src/base/default.css +3 -3
  6. package/src/base/theme/dark.css +2 -2
  7. package/src/base/theme/default-rgb.css +9 -7
  8. package/src/base/theme/default.css +13 -13
  9. package/src/ui/badge/default-rgb.css +3 -3
  10. package/src/ui/badge/default.css +3 -3
  11. package/src/ui/btn/default-rgb.css +3 -3
  12. package/src/ui/btn/default.css +7 -8
  13. package/src/ui/btn/gradient-bordered-rgb.css +1 -1
  14. package/src/ui/btn/gradient-bordered.css +1 -1
  15. package/src/ui/btn/loading.css +1 -1
  16. package/src/ui/btn/raised.css +1 -1
  17. package/src/ui/check-rgb.css +2 -2
  18. package/src/ui/check.css +5 -4
  19. package/src/ui/control/default-rgb.css +1 -1
  20. package/src/ui/control/default.css +2 -2
  21. package/src/ui/control/icon.css +2 -1
  22. package/src/ui/link/default.css +1 -1
  23. package/src/ui/switch-rgb.css +1 -1
  24. package/src/ui/switch.css +2 -2
  25. package/src/ui/text-rgb.css +2 -2
  26. package/src/ui/text.css +2 -2
  27. package/utils/tailwind.cjs +77 -72
  28. package/utils/tailwind.js +77 -69
package/dist/main-rgb.css CHANGED
@@ -1 +1 @@
1
- .ui-btn{--color-body-current-rgb: var(--color-accent-current-rgb);--ui-btn-bg: rgb(var(--color-accent-rgb) / var(--ui-btn-bg-opacity));--ui-btn-color: rgb(var(--color-body-current-rgb) / var(--ui-btn-color-opacity))}.ui-btn:where(.bordered,.muted,.ghosted){--color-body-current-rgb: var(--color-accent-rgb)}.ui-btn:where(.bordered){border:var(--ui-btn-border-width) solid rgb(var(--color-accent-rgb) / var(--ui-btn-border-opacity))}:is(.ui-btn.gradient-bordered){--color-body-current-rgb: var(--color-body-current-rgb)}:is(.ui-btn.gradient-bordered):before{background-color:rgb(var(--color-body-rgb) / calc(100% - var(--ui-btn-bg-opacity)))}:is(.ui-btn.gradient-bordered):where(.hover-fill):before{background-color:rgb(var(--color-body-rgb) / var(--ui-btn-bg-opacity))}.ui-badge{--color-body-current-rgb: var(--color-accent-current-rgb);--ui-badge-bg: rgb(var(--color-accent-rgb) / var(--ui-badge-bg-opacity));--ui-badge-color: rgb(var(--color-body-current-rgb) / var(--ui-badge-color-opacity))}.ui-badge:where(.bordered,.muted){--color-body-current-rgb: var(--color-accent-rgb)}.ui-badge:where(.bordered){border:var(--ui-badge-border-width) solid rgb(var(--color-accent-rgb) / var(--ui-badge-border-opacity))}.ui-control{--ui-control-border-color: var(--color-body-current-rgb)}.ui-control :where(input,textarea,select){border:var(--ui-control-border-width) solid rgb(var(--ui-control-border-color) / var(--ui-control-border-opacity))}.ui-control :where(input,textarea,select):focus{--ui-control-border-color: var(--color-accent-rgb);outline-color:rgb(var(--color-accent-rgb) / var(--ui-control-outline-opacity))}.ui-control :where(input,textarea,select):disabled{background-color:rgb(var(--color-main-rgb) / var(--ui-control-disabled-opacity))}.ui-control.invalid,.validated .ui-control :where(input,textarea,select):invalid{--ui-control-border-color: var(--color-error-rgb);--color-accent-rgb: var(--color-error-rgb);background-color:rgb(var(--color-error-rgb) / var(--ui-control-invalid-bg-opacity))}.ui-progress{--ui-progress-bg: rgb(var(--color-accent-rgb) / var(--ui-progress-bg-opacity))}.ui-check{--ui-check-bg: var(--color-body-rgb);--ui-check-border-color: var(--color-body-current-rgb);--ui-check-checked-bg: var(--color-accent-rgb)}.ui-check :where(input){background-color:rgb(var(--ui-check-bg) / var(--ui-check-bg-opacity));border:var(--ui-check-border-width) solid rgb(var(--ui-check-border-color) / var(--ui-check-border-opacity))}.ui-check :where(input):not(:disabled):focus{outline-color:rgb(var(--ui-check-checked-bg) / var(--ui-check-outline-opacity))}.ui-check :where(input):disabled{--ui-check-bg: var(--color-body-current-rgb)}.ui-check :where(input):checked{background-color:rgb(var(--ui-check-checked-bg))}.ui-check.invalid,.validated .ui-check :where(input):invalid{--ui-check-bg: var(--color-error-rgb);--ui-check-border-color: var(--color-error-rgb);--ui-check-checked-bg: var(--color-error-rgb)}.ui-switch :where(input):focus{outline-color:rgb(var(--color-current-rgb) / var(--ui-switch-outline-opacity))}.ui-switch :where(input):checked{--color-body-current-rgb: var(--color-accent-rgb)}.ui-notice{--ui-notice-bg: var(--color-accent-rgb);background-color:rgb(var(--ui-notice-bg) / 10%);outline:var(--ui-notice-outline-width) solid rgb(var(--ui-notice-bg) / var(--ui-notice-outline-opacity))}.ui-text :where(table) :where(thead){border-bottom:1px solid rgb(var(--color-body-current-rgb) / 7.5%)}.ui-text :where(table) :where(tbody tr):nth-of-type(even){background-color:rgb(var(--color-body-current-rgb) / 5%)}
1
+ .ui-btn{--color-current-rgb: var(--color-accent-fg-rgb);--ui-btn-bg: rgb(var(--color-accent-rgb) / var(--ui-btn-bg-opacity));--ui-btn-color: rgb(var(--color-current-rgb) / var(--ui-btn-color-opacity))}.ui-btn:where(.bordered,.muted,.ghosted){--color-current-rgb: var(--color-accent-rgb)}.ui-btn:where(.bordered){border:var(--ui-btn-border-width) solid rgb(var(--color-accent-rgb) / var(--ui-btn-border-opacity))}:is(.ui-btn.gradient-bordered){--color-current-rgb: var(--color-current-rgb)}:is(.ui-btn.gradient-bordered):before{background-color:rgb(var(--color-body-rgb) / calc(100% - var(--ui-btn-bg-opacity)))}:is(.ui-btn.gradient-bordered):where(.hover-fill):before{background-color:rgb(var(--color-body-rgb) / var(--ui-btn-bg-opacity))}.ui-badge{--color-current-rgb: var(--color-accent-fg-rgb);--ui-badge-bg: rgb(var(--color-accent-rgb) / var(--ui-badge-bg-opacity));--ui-badge-color: rgb(var(--color-current-rgb) / var(--ui-badge-color-opacity))}.ui-badge:where(.bordered,.muted){--color-current-rgb: var(--color-accent-rgb)}.ui-badge:where(.bordered){border:var(--ui-badge-border-width) solid rgb(var(--color-accent-rgb) / var(--ui-badge-border-opacity))}.ui-control{--ui-control-border-color: var(--color-current-rgb)}.ui-control :where(input,textarea,select){border:var(--ui-control-border-width) solid rgb(var(--ui-control-border-color) / var(--ui-control-border-opacity))}.ui-control :where(input,textarea,select):focus{--ui-control-border-color: var(--color-accent-rgb);outline-color:rgb(var(--color-accent-rgb) / var(--ui-control-outline-opacity))}.ui-control :where(input,textarea,select):disabled{background-color:rgb(var(--color-main-rgb) / var(--ui-control-disabled-opacity))}.ui-control.invalid,.validated .ui-control :where(input,textarea,select):invalid{--ui-control-border-color: var(--color-error-rgb);--color-accent-rgb: var(--color-error-rgb);background-color:rgb(var(--color-error-rgb) / var(--ui-control-invalid-bg-opacity))}.ui-progress{--ui-progress-bg: rgb(var(--color-accent-rgb) / var(--ui-progress-bg-opacity))}.ui-check{--ui-check-bg: var(--color-body-rgb);--ui-check-border-color: var(--color-current-rgb);--ui-check-checked-bg: var(--color-accent-rgb)}.ui-check :where(input){background-color:rgb(var(--ui-check-bg) / var(--ui-check-bg-opacity));border:var(--ui-check-border-width) solid rgb(var(--ui-check-border-color) / var(--ui-check-border-opacity))}.ui-check :where(input):not(:disabled):focus{outline-color:rgb(var(--ui-check-checked-bg) / var(--ui-check-outline-opacity))}.ui-check :where(input):disabled{--ui-check-bg: var(--color-current-rgb)}.ui-check :where(input):checked{background-color:rgb(var(--ui-check-checked-bg))}.ui-check.invalid,.validated .ui-check :where(input):invalid{--ui-check-bg: var(--color-error-rgb);--ui-check-border-color: var(--color-error-rgb);--ui-check-checked-bg: var(--color-error-rgb)}.ui-switch :where(input):focus{outline-color:rgb(var(--color-current-rgb) / var(--ui-switch-outline-opacity))}.ui-switch :where(input):checked{--color-current-rgb: var(--color-accent-rgb)}.ui-notice{--ui-notice-bg: var(--color-accent-rgb);background-color:rgb(var(--ui-notice-bg) / 10%);outline:var(--ui-notice-outline-width) solid rgb(var(--ui-notice-bg) / var(--ui-notice-outline-opacity))}.ui-text :where(table) :where(thead){border-bottom:1px solid rgb(var(--color-current-rgb) / 7.5%)}.ui-text :where(table) :where(tbody tr):nth-of-type(even){background-color:rgb(var(--color-current-rgb) / 5%)}
package/dist/main.css CHANGED
@@ -1 +1 @@
1
- *:where(:not(html,iframe,canvas,img,svg,video,audio,svg *,symbol *,ol,ul)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}:where(a,button){cursor:revert}:where(ol:not([type]),ul,menu){list-style:none}:where(img){max-inline-size:100%;max-block-size:100%}:where(table){border-collapse:collapse}:where(input,textarea){-webkit-user-select:auto;-moz-user-select:auto;user-select:auto;cursor:revert}:where(textarea){white-space:revert}:where(meter){-webkit-appearance:revert;-moz-appearance:revert;appearance:revert}:where(pre){all:revert}::-moz-placeholder{color:unset}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}:where([draggable="true"]){-webkit-user-drag:element}:where(svg,use,path,symbol){all:revert-layer}::-moz-selection{color:var(--color-light);background-color:var(--color-accent)}::selection{color:var(--color-light);background-color:var(--color-accent)}:where(*){outline:none;border:0 solid transparent;-webkit-tap-highlight-color:rgb(255 255 255 / 0%)}:where(svg){stroke-width:1.5}:where(svg:not[width]){width:1.25em}:where(svg:not[height]){height:1.25em}:where(button){cursor:pointer}:where(hr){display:block;border-top:1px solid color-mix(in sRGB,var(--color-accent-current) calc(var(--tw-border-opacity, .15) * 100%),transparent);border-radius:var(--rounded)}:where(html){font-family:var(--font-primary);font-weight:var(--font-normal);height:100%;line-height:1.5;cursor:default}:where(body){min-height:100%;background-color:var(--color-body);color:var(--color-main);accent-color:var(--color-accent)}:where(input[type="time"])::-webkit-datetime-edit-fields-wrapper,:where(input[type="time"])::-webkit-datetime-edit-text,:where(input[type="time"])::-webkit-datetime-edit,:where(input[type="time"])::-webkit-datetime-edit-hour-field,:where(input[type="time"])::-webkit-datetime-edit-minute-field{padding:0}:root{--font-default: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-primary: var(--font-default);--font-secondary: var(--font-default);--container-width: 80rem;--container-width-sm: 58rem;--container-padding: 5vw;--container-padding-calc: max(calc(50vw - (var(--container-width) / 2) + var(--container-padding)), var(--container-padding));--font-bold: 700;--font-semibold: 600;--font-medium: 500;--font-normal: 400;--font-light: 300;--font-thin: 200;--z-10: 10;--z-20: 20;--z-30: 30;--z-40: 40;--z-50: 50;--rounded: var(--rounded-xl);--rounded-xs: .125rem;--rounded-sm: .25rem;--rounded-md: .375rem;--rounded-lg: .5rem;--rounded-xl: .75rem;--rounded-2xl: 1rem;--rounded-3xl: 1.5rem;--rounded-4xl: 1.875rem;--rounded-5xl: 2.25rem;--rounded-6xl: 3rem;--rounded-full: 9999px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .875rem;--spacing-lg: 1rem;--spacing-xl: 1.25rem;--spacing-2xl: 1.5rem;--spacing-3xl: 1.875rem;--spacing-4xl: 2.25rem;--spacing-5xl: 3rem;--spacing-6xl: 3.75rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--text-7xl: 4.5rem;--text-8xl: 6rem;--text-9xl: 8rem;--transition-duration: .15s;--transition-color: color var(--transition-duration) ease;--transition-background: background var(--transition-duration) ease;--transition-opacity: opacity var(--transition-duration) ease;--transition-transform: transform var(--transition-duration) ease;--transition-border: border-color var(--transition-duration) ease;--transition-shadow: box-shadow var(--transition-duration) ease}@media (prefers-reduced-motion){:root{--transition-duration: 0}}:root{--icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>') no-repeat 50% 50% / contain;--icon-radio: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>') no-repeat 50% 50% / contain;--icon-angle-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" /></svg>') no-repeat 50% 50% / contain;--icon-angle-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>') no-repeat 50% 50% / contain}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes move-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fade-out-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2rem)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes ripple{to{transform:scale(2.5);opacity:0}}:root{--color-primary-rgb: 3 138 255;--color-primary-current-rgb: var(--color-light-rgb);--color-main-rgb: 17 19 21;--color-main-current-rgb: var(--color-body-rgb);--color-body-rgb: 255 255 255;--color-body-current-rgb: var(--color-main-rgb);--color-accent-rgb: var(--color-primary-rgb);--color-accent-current-rgb: var(--color-light-rgb);--color-light-rgb: 255 255 255;--color-light-current-rgb: var(--color-dark-rgb);--color-dark-rgb: 17 19 21;--color-dark-current-rgb: var(--color-light-rgb);--color-success-rgb: 33 154 67;--color-error-rgb: 254 50 75;--color-warning-rgb: 254 179 53;--color-info-rgb: 45 168 234;--color-primary: rgb(var(--color-primary-rgb));--color-primary-current: var(--color-light);--color-main: var(--color-main-primary);--color-main-current: var(--color-body);--color-main-mix: var(--color-body);--color-main-primary: rgb(var(--color-main-rgb));--color-main-secondary: color-mix(in sRGB, var(--color-main) 75%, var(--color-main-mix));--color-main-tertiary: color-mix(in sRGB, var(--color-main) 50%, var(--color-main-mix));--color-body: var(--color-body-primary);--color-body-current: var(--color-main);--color-body-mix: var(--color-main);--color-body-primary: rgb(var(--color-body-rgb));--color-body-secondary: color-mix(in sRGB, var(--color-body) 95%, var(--color-body-mix));--color-body-tertiary: color-mix(in sRGB, var(--color-body) 90%, var(--color-body-mix));--color-accent: var(--color-primary);--color-accent-current: var(--color-primary-current);--color-light: rgb(var(--color-light-rgb));--color-light-current: var(--color-dark);--color-dark: rgb(var(--color-dark-rgb));--color-dark-current: var(--color-light);--color-success: rgb(var(--color-success-rgb));--color-error: rgb(var(--color-error-rgb));--color-warning: rgb(var(--color-warning-rgb));--color-info: rgb(var(--color-info-rgb))}:root.dark{--color-main-rgb: 255 255 255;--color-body-rgb: 25 26 27;--color-main: rgb(var(--color-main-rgb));--color-body: rgb(var(--color-body-rgb))}.ui-badge{--color-body-current: var(--color-accent-current);--ui-badge-width: max-content;--ui-badge-height: 1.5rem;--ui-badge-py: 0;--ui-badge-px: .5rem;--ui-badge-border-radius: var(--rounded-lg);--ui-badge-font-size: .75rem;--ui-badge-font-weight: var(--font-normal);--ui-badge-bg: color-mix(in sRGB, var(--color-accent) var(--ui-badge-bg-opacity), var(--ui-badge-bg-mix));--ui-badge-bg-mix: transparent;--ui-badge-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);--ui-badge-color: color-mix(in sRGB, var(--color-body-current) var(--ui-badge-color-opacity), transparent);--ui-badge-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);--ui-badge-gap: .25rem;width:var(--ui-badge-width);height:var(--ui-badge-height);padding:var(--ui-badge-py) var(--ui-badge-px);border-radius:var(--ui-badge-border-radius);font-size:var(--ui-badge-font-size);font-weight:var(--ui-badge-font-weight);background-color:var(--ui-badge-bg);color:var(--ui-badge-color);display:inline-flex;align-items:center;text-align:center;justify-content:center;white-space:nowrap;flex-shrink:0;position:relative;z-index:0;gap:var(--ui-badge-gap);transition:var(--transition-opacity)}.ui-badge:where(.bordered,.muted){--color-body-current: var(--color-accent);--ui-badge-bg-opacity: 0%}.ui-badge:where(.sm){--ui-badge-height: 1.25rem;--ui-badge-font-size: .625rem}.ui-badge:where(.lg){--ui-badge-height: 1.75rem}.ui-badge:where(.bordered){--ui-badge-border-width: 1px;--ui-badge-border-opacity: calc(var(--tw-border-opacity, 1) * 100%);border:var(--ui-badge-border-width) solid color-mix(in sRGB,var(--color-accent) var(--ui-badge-border-opacity),transparent);padding-left:calc(var(--ui-badge-px) - var(--ui-badge-border-width));padding-right:calc(var(--ui-badge-px) - var(--ui-badge-border-width))}.ui-badge:where(.muted){--ui-badge-bg-opacity: 10%}.ui-badge:where(.square){--ui-badge-px: var(--ui-badge-py);--ui-badge-width: var(--ui-badge-height)}.ui-badge:where(.circle){--ui-badge-px: var(--ui-badge-py);--ui-badge-width: var(--ui-badge-height);--ui-badge-border-radius: var(--rounded-full)}.ui-btn{--color-body-current: var(--color-accent-current);--ui-btn-width: max-content;--ui-btn-height: 2.25rem;--ui-btn-gap: .375rem;--ui-btn-py: .375rem;--ui-btn-px: .75rem;--ui-btn-border-radius: var(--rounded);--ui-btn-font-size: .875rem;--ui-btn-font-weight: var(--font-medium);--ui-btn-letter-spacing: 0;--ui-btn-bg: color-mix(in sRGB, var(--color-accent) var(--ui-btn-bg-opacity), var(--ui-btn-bg-mix));--ui-btn-bg-mix: transparent;--ui-btn-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);--ui-btn-color: color-mix(in sRGB, var(--color-body-current) var(--ui-btn-color-opacity), transparent);--ui-btn-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);--ui-btn-outline-width: 2px;--ui-btn-hover-color: var(--color-body-current);--ui-btn-hover-bg-mix: black;--ui-btn-hover-bg-opacity: 80%;--ui-btn-active-color: var(--color-body-current);--ui-btn-active-bg-mix: black;--ui-btn-active-bg-opacity: 90%;--ui-btn-focus-outline-color-mix: transparent;--ui-btn-focus-outline-color-opacity: 50%;--ui-btn-focus-outline-offset: 2px;--ui-btn-disabled-opacity: 70%;max-width:var(--ui-btn-width);width:var(--ui-btn-width);height:var(--ui-btn-height);padding:var(--ui-btn-py) var(--ui-btn-px);border-radius:var(--ui-btn-border-radius);font-size:var(--ui-btn-font-size);font-weight:var(--ui-btn-font-weight);letter-spacing:var(--ui-btn-letter-spacing);background-color:var(--ui-btn-bg);color:var(--ui-btn-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;display:inline-flex;align-items:center;text-align:center;justify-content:center;white-space:nowrap;flex-shrink:0;position:relative;z-index:0;transition:var(--transition-background),var(--transition-color),outline-color var(--transition-duration),outline-offset .1s cubic-bezier(.4,0,.2,1);gap:var(--ui-btn-gap);outline:var(--ui-btn-outline-width) solid transparent;outline-offset:0}.ui-btn:where([class*="accent-base"]){--ui-btn-hover-bg-mix: var(--color-main-mix)}.ui-btn:where([class*="accent-body"]){--ui-btn-hover-bg-mix: var(--color-body-mix)}.ui-btn :where(svg){font-size:calc(var(--ui-btn-font-size) + .125rem)}.ui-btn:where(.bordered,.muted,.ghosted){--ui-btn-hover-bg-mix: transparent;--ui-btn-hover-bg-opacity: 10%;--ui-btn-active-bg-mix: transparent;--ui-btn-active-bg-opacity: 20%;--ui-btn-focus-outline-offset: -2px;--ui-btn-bg-opacity: 0%;--color-body-current: var(--color-accent)}.ui-btn:is([href],button,[role="button"]):disabled{opacity:var(--ui-btn-disabled-opacity);cursor:not-allowed}@media (hover: hover) and (pointer: fine){.ui-btn:is([href],button,[role="button"]):not(:disabled):hover{--ui-btn-color: var(--ui-btn-hover-color);--ui-btn-bg-mix: var(--ui-btn-hover-bg-mix);--ui-btn-bg-opacity: var(--ui-btn-hover-bg-opacity)}}.ui-btn:is([href],button,[role="button"]):not(:disabled):focus{outline-color:color-mix(in sRGB,var(--color-accent) var(--ui-btn-focus-outline-color-opacity),var(--ui-btn-focus-outline-color-mix));outline-offset:var(--ui-btn-focus-outline-offset)}.ui-btn:is([href],button,[role="button"]):not(:disabled):is(:active,.active){--ui-btn-color: var(--ui-btn-active-color);--ui-btn-bg-mix: var(--ui-btn-active-bg-mix);--ui-btn-bg-opacity: var(--ui-btn-active-bg-opacity)}.ui-btn:where(.sm){--ui-btn-height: 2rem;--ui-btn-px: 1rem}.ui-btn:where(.lg){--ui-btn-height: 3rem;--ui-btn-px: 1.75rem}.ui-btn:is(.loading){--ui-btn-loading-width: 1rem;--ui-btn-loading-border-width: 2px;pointer-events:none;color:transparent}.ui-btn:is(.loading)>*{opacity:0}.ui-btn:is(.loading):after{z-index:1;width:var(--ui-btn-loading-width);height:var(--ui-btn-loading-width);content:"";border:var(--ui-btn-loading-border-width) solid var(--color-body-current);border-right-color:transparent;border-radius:50%;animation:spin .45s infinite linear;position:absolute;margin-left:calc(var(--ui-btn-loading-width) / 2 * -1);margin-top:calc(var(--ui-btn-loading-width) / 2 * -1);left:50%;top:50%}.ui-btn:where(.wide){padding-left:calc(var(--ui-btn-px) * 1.5);padding-right:calc(var(--ui-btn-px) * 1.5)}.ui-btn:where(.bordered){--ui-btn-border-width: 1px;--ui-btn-border-opacity: calc(var(--tw-border-opacity, .3) * 100%);border:var(--ui-btn-border-width) solid color-mix(in sRGB,var(--color-accent) var(--ui-btn-border-opacity),transparent);padding-left:calc(var(--ui-btn-px) - var(--ui-btn-border-width));padding-right:calc(var(--ui-btn-px) - var(--ui-btn-border-width))}.ui-btn:where(.hover-fill){--ui-btn-hover-bg-mix: black;--ui-btn-hover-bg-opacity: 100%;--ui-btn-active-bg-mix: black;--ui-btn-active-bg-opacity: 90%;--ui-btn-hover-color: var(--color-light);--ui-btn-active-color: var(--color-light)}.ui-btn:where(.gradient):before{content:"";position:absolute;inset:0;background-color:color-mix(in sRGB,var(--ui-btn-bg-mix) calc(100% - var(--ui-btn-bg-opacity)),transparent);z-index:-1;transition:var(--transition-background)}:is(.ui-btn.gradient-bordered){--ui-btn-border-width: 2px;--ui-btn-hover-bg-mix: transparent;--ui-btn-hover-bg-opacity: 10%;--ui-btn-active-bg-mix: transparent;--ui-btn-active-bg-opacity: 20%;--ui-btn-focus-outline-offset: 0;--ui-btn-bg-opacity: 0%;--color-body-current: var(--color-main)}:is(.ui-btn.gradient-bordered):before{content:"";position:absolute;background-color:color-mix(in sRGB,var(--color-body) calc(100% - var(--ui-btn-bg-opacity)),transparent);inset:var(--ui-btn-border-width);border-radius:calc(var(--ui-btn-border-radius) / 1.25);z-index:-1;transition:var(--transition-background)}:is(.ui-btn.gradient-bordered):where(.hover-fill){--ui-btn-bg-opacity: 100%}:is(.ui-btn.gradient-bordered):where(.hover-fill):before{background-color:color-mix(in sRGB,var(--color-body) var(--ui-btn-bg-opacity),transparent)}.ui-btn:where(.muted){--ui-btn-hover-bg-opacity: 30%;--ui-btn-bg-opacity: 10%}.ui-btn:where(.raised){--ui-btn-border-width: 2px;--ui-btn-border-opacity: calc(var(--tw-border-opacity, .85) * 100%);border:var(--ui-btn-border-width) solid color-mix(in sRGB,var(--color-accent) var(--ui-btn-border-opacity),var(--color-body-current));padding-left:calc(var(--ui-btn-px) - var(--ui-btn-border-width));padding-right:calc(var(--ui-btn-px) - var(--ui-btn-border-width))}.ui-btn:where(.square){--ui-btn-px: var(--ui-btn-py);--ui-btn-width: var(--ui-btn-height)}.ui-btn:where(.circle){--ui-btn-px: var(--ui-btn-py);--ui-btn-width: var(--ui-btn-height);--ui-btn-border-radius: var(--rounded-full)}.ui-check{--ui-check-width: 1.375rem;--ui-check-font-size: .875rem;--ui-check-gap: .625rem;--ui-check-bg: transparent;--ui-check-bg-mix: transparent;--ui-check-bg-opacity: calc(var(--tw-bg-opacity, .1) * 100%);--ui-check-border-color: var(--color-body-current);--ui-check-border-mix: transparent;--ui-check-border-opacity: calc(var(--tw-border-opacity, .2) * 100%);--ui-check-border-width: 1px;--ui-check-checked-bg: var(--color-accent);--ui-check-radius: .5rem;--ui-check-icon: var(--icon-check);--ui-check-icon-font-size: 1.125rem;--ui-check-box-shadow: none;--ui-check-outline-width: 3px;--ui-check-outline-offset: 0;--ui-check-outline-opacity: 20%;--ui-check-disabled-opacity: 50%;display:flex;align-items:center;gap:0 var(--ui-check-gap);flex-wrap:wrap;width:-moz-fit-content;width:fit-content;font-size:var(--ui-check-font-size)}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-2w-2t-2r-2z-1m-2w-2p-37-14-2j-38-3d-34-2t-1p-y-36-2p-2s-2x-33-y-2l-15]:not(.does-not-exist){--ui-check-icon: var(--icon-radio);--ui-check-radius: 50%}.ui-check:has([type="radio"]){--ui-check-icon: var(--icon-radio);--ui-check-radius: 50%}.ui-check :where(label[for],input){cursor:pointer}.ui-check :where(a){color:var(--color-accent);text-decoration:underline}.ui-check :where(input){display:flex;width:var(--ui-check-width);height:var(--ui-check-width);background-color:color-mix(in sRGB,var(--ui-check-bg) var(--ui-check-bg-opacity),var(--ui-check-bg-mix));border:var(--ui-check-border-width) solid color-mix(in sRGB,var(--ui-check-border-color) var(--ui-check-border-opacity),var(--ui-check-border-mix));border-radius:var(--ui-check-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:var(--ui-check-outline-width) solid transparent;outline-offset:0;justify-content:center;align-items:center;transition:var(--transition-border),var(--transition-background),outline-color var(--transition-duration),outline-offset var(--transition-duration);font-size:var(--ui-check-icon-font-size);cursor:pointer}.ui-check :where(input):before{line-height:var(--ui-check-icon-font-size);text-indent:0;display:block;transition:var(--transition-color),var(--transition-opacity),var(--transition-transform);color:var(--color-light);content:"";background-color:currentColor;-webkit-mask:var(--ui-check-icon);mask:var(--ui-check-icon);opacity:0;transform:scale(0);will-change:transform;width:1em;height:1em}:is(.ui-check :where(input):where(:required))+*:after{color:var(--color-error);content:" *"}.ui-check :where(input):not(:disabled):is(:hover,:focus-visible){--ui-check-bg: var(--ui-check-checked-bg);--ui-check-border-color: var(--ui-check-checked-bg);--ui-check-border-opacity: 75%;--ui-check-bg-opacity: 10%}.ui-check :where(input):not(:disabled):focus{--ui-check-border-color: var(--ui-check-checked-bg);--ui-check-border-opacity: 75%;outline-color:color-mix(in sRGB,var(--ui-check-checked-bg) var(--ui-check-outline-opacity),transparent);outline-offset:var(--ui-check-outline-offset)}.ui-check :where(input):disabled{--ui-check-bg-opacity: 15%;--ui-check-bg: var(--color-body-current);cursor:not-allowed;opacity:var(--ui-check-disabled-opacity)}.ui-check :where(input):checked{--ui-check-border-opacity: 0%;background-color:var(--ui-check-checked-bg)}.ui-check :where(input):checked:before{opacity:1;transform:scale(1)}.ui-check.invalid,.validated .ui-check :where(input):invalid{--ui-check-bg: var(--color-error);--ui-check-border-color: var(--color-error);--ui-check-checked-bg: var(--color-error);--ui-check-border-opacity: 100%}.ui-control{--ui-control-height: 3rem;--ui-control-height-textarea: 8rem;--ui-control-pt-floating: 1.25rem;--ui-control-pb-floating: .4375rem;--ui-control-py: .875rem;--ui-control-px: .875rem;--ui-control-pl: var(--ui-control-px);--ui-control-pr: var(--ui-control-px);--ui-control-bg: transparent;--ui-control-color: currentColor;--ui-control-placeholder-color: currentColor;--ui-control-placeholder-opacity: .5;--ui-control-font-size: .875rem;--ui-control-font-weight: var(--font-medium);--ui-control-border-width: 1px;--ui-control-border-color: var(--color-body-current);--ui-control-border-mix: transparent;--ui-control-border-opacity: 15%;--ui-control-border-radius: var(--rounded);--ui-control-outline-width: 3px;--ui-control-outline-offset: 0;--ui-control-outline-opacity: 20%;--ui-control-disabled-opacity: 5%;--ui-control-invalid-bg-opacity: 10%;display:grid;grid-template-areas:"input";font-size:var(--ui-control-font-size);position:relative;border-radius:var(--ui-control-border-radius)}.ui-control :where(input,textarea,select){grid-area:input;background-clip:padding-box;background-color:var(--ui-control-bg);padding:var(--ui-control-py) var(--ui-control-pr) var(--ui-control-py) var(--ui-control-pl);transition:var(--transition-border),outline-color var(--transition-duration),outline-offset var(--transition-duration);line-height:normal;font-size:inherit;height:var(--ui-control-height);font-weight:var(--ui-control-font-weight);border-radius:inherit;color:var(--ui-control-color);border:var(--ui-control-border-width) solid color-mix(in sRGB,var(--ui-control-border-color) var(--ui-control-border-opacity),var(--ui-control-border-mix));outline:var(--ui-control-outline-width) solid transparent;outline-offset:0}.ui-control :where(input,textarea,select):focus{--ui-control-border-opacity: 100%;--ui-control-border-color: var(--color-accent);outline-color:color-mix(in sRGB,var(--color-accent) var(--ui-control-outline-opacity),transparent);outline-offset:var(--ui-control-outline-offset)}.ui-control :where(input,textarea,select):disabled{cursor:not-allowed;background-color:color-mix(in sRGB,var(--color-body-current) var(--ui-control-disabled-opacity),var(--ui-control-bg))}:is(.ui-control :where(input,textarea,select)):required~label:after{color:var(--color-error);content:" *"}.ui-control :where(input,textarea)::-moz-placeholder{color:var(--ui-control-placeholder-color);opacity:var(--ui-control-placeholder-opacity)}.ui-control :where(input,textarea)::placeholder{color:var(--ui-control-placeholder-color);opacity:var(--ui-control-placeholder-opacity)}.ui-control :where(textarea){resize:vertical;overflow:hidden;min-height:var(--ui-control-height-textarea)}.ui-control.invalid,.validated .ui-control :where(input,textarea,select):invalid{--ui-control-border-opacity: 100%;--ui-control-border-color: var(--color-error);--ui-control-color: var(--color-error);--color-accent: var(--color-error);background-color:color-mix(in sRGB,var(--color-error) var(--ui-control-invalid-bg-opacity),var(--ui-control-bg))}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-37-2t-30-2t-2r-38-15]:not(does-not-exist){--ui-control-icon-select-font-size: 1.5rem;--ui-control-pr: var(--ui-control-icon-offset-r)}.ui-control:has(select){--ui-control-icon-select-font-size: 1.5rem;--ui-control-pr: var(--ui-control-icon-offset-r)}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-15]:not(.does-not-exist):not(does-not-exist){--ui-control-icon-count-r: 2}.ui-control:has(select):has(.icon-r){--ui-control-icon-count-r: 2}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-37-2t-30-2t-2r-38-15-w-1m-3b-2w-2t-36-2t-14-2j-2r-30-2p-37-37-2m-1p-y-2x-2r-33-32-19-y-2l-15]:not(does-not-exist){margin-right:calc(var(--ui-control-icon-font-size) + var(--ui-control-icon-gap))}.ui-control:has(select) :where([class^="icon-"]){margin-right:calc(var(--ui-control-icon-font-size) + var(--ui-control-icon-gap))}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-37-2t-30-2t-2r-38-15]:not(does-not-exist):after{width:1em;height:1em;background-color:currentColor;content:"";position:absolute;z-index:1;font-size:var(--ui-control-icon-select-font-size);right:var(--ui-control-icon-inset-x);top:calc(var(--ui-control-height) / 2);margin-top:calc(var(--ui-control-icon-select-font-size) / 2 * -1);-webkit-mask:var(--icon-angle-down);mask:var(--icon-angle-down);pointer-events:none;grid-area:input}.ui-control:has(select):after{width:1em;height:1em;background-color:currentColor;content:"";position:absolute;z-index:1;font-size:var(--ui-control-icon-select-font-size);right:var(--ui-control-icon-inset-x);top:calc(var(--ui-control-height) / 2);margin-top:calc(var(--ui-control-icon-select-font-size) / 2 * -1);-webkit-mask:var(--icon-angle-down);mask:var(--icon-angle-down);pointer-events:none;grid-area:input}.ui-control{--ui-control-icon-font-size: 1.25rem;--ui-control-icon-count-l: 1;--ui-control-icon-count-r: 1;--ui-control-icon-gap: .375rem;--ui-control-icon-inset-x: calc(var(--ui-control-px) - .25rem);--ui-control-icon-inset-x-gap: .125rem;--ui-control-icon-offset-l: calc(var(--ui-control-icon-inset-x) + var(--ui-control-icon-inset-x-gap) + (var(--ui-control-icon-font-size) + var(--ui-control-icon-gap)) * var(--ui-control-icon-count-l));--ui-control-icon-offset-r: calc(var(--ui-control-icon-inset-x) + var(--ui-control-icon-inset-x-gap) + (var(--ui-control-icon-font-size) + var(--ui-control-icon-gap)) * var(--ui-control-icon-count-r))}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-1a-2x-2r-33-32-19-30-15]:not(.does-not-exist){--ui-control-pl: var(--ui-control-icon-offset-l)}.ui-control:has(.icon-l){--ui-control-pl: var(--ui-control-icon-offset-l)}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-15]:not(.does-not-exist){--ui-control-pr: var(--ui-control-icon-offset-r)}.ui-control:has(.icon-r){--ui-control-pr: var(--ui-control-icon-offset-r)}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-1a-2x-2r-33-32-19-30-w-1q-w-16-1m-32-38-2w-19-2r-2w-2x-30-2s-14-1e-15-15]:not(.does-not-exist):not(.does-not-exist){--ui-control-icon-count-r: 2}.ui-control:has(.icon-l > *:nth-child(2)){--ui-control-icon-count-r: 2}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-w-1q-w-16-1m-32-38-2w-19-2r-2w-2x-30-2s-14-1e-15-15]:not(.does-not-exist):not(.does-not-exist){--ui-control-icon-count-r: 2}.ui-control:has(.icon-r > *:nth-child(2)){--ui-control-icon-count-r: 2}.ui-control :where(svg){font-size:var(--ui-control-icon-font-size);width:1em;height:var(--ui-control-height)}.ui-control :where([class^="icon-"]){grid-area:input;content:"";position:relative;line-height:1em;display:flex;flex-direction:row;flex-shrink:0;align-items:center;gap:var(--ui-control-icon-gap);transition:var(--transition-opacity)}.ui-control :where([class^="icon-"]):where(.icon-l){left:var(--ui-control-icon-inset-x);margin-right:auto}.ui-control :where([class^="icon-"]):where(.icon-r){right:var(--ui-control-icon-inset-x);margin-left:auto}.ui-control :where([aria-label]):after{content:attr(aria-label);font-size:var(--ui-control-font-size);min-width:var(--ui-control-icon-font-size);text-align:center;line-height:var(--ui-control-icon-font-size);display:block}.ui-control:where(.floating){--ui-control-floating-label-font-size: .875rem;--ui-control-floating-label-font-weight: var(--font-medium);--ui-control-floating-label-focus-transform: translateY(-.6875rem) scale(.8);--ui-control-floating-label-focus-opacity: 50%;--ui-control-floating-label-transition-duration: .4s}.ui-control:where(.floating) :where(label){grid-area:input;align-self:start;pointer-events:none;transition:transform var(--ui-control-floating-label-transition-duration) cubic-bezier(.25,.8,.25,1),var(--transition-color),var(--transition-opacity);transform-origin:0 50%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transform:perspective(100px);will-change:transform;font-weight:var(--ui-control-floating-label-font-weight);margin-left:var(--ui-control-pl);margin-right:var(--ui-control-pr);line-height:var(--ui-control-floating-label-font-size);margin-top:calc(var(--ui-control-height) / 2 - (var(--ui-control-font-size) / 2))}.ui-control:where(.floating) :where(input,textarea,select){padding-top:calc(var(--ui-control-pt-floating));padding-bottom:calc(var(--ui-control-pb-floating))}.ui-control:where(.floating){--ui-control-placeholder-color: transparent}:is(.ui-control:where(.floating) :where(input,textarea,select)):is(:focus,:not(:-moz-placeholder-shown))~label{transform:var(--ui-control-floating-label-focus-transform);opacity:var(--ui-control-floating-label-focus-opacity)}:is(.ui-control:where(.floating) :where(input,textarea,select)):is(:focus,:not(:placeholder-shown))~label{transform:var(--ui-control-floating-label-focus-transform);opacity:var(--ui-control-floating-label-focus-opacity)}.ui-group{display:flex;flex-wrap:wrap}.js-has-pseudo [csstools-has-1a-39-2x-19-2v-36-33-39-34-1m-2w-2p-37-14-1a-39-2x-19-2r-33-32-38-36-33-30-15-w-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2q-38-32-15]:not(.does-not-exist){--ui-btn-border-width: 1px;--ui-btn-border-opacity: 15%;--ui-btn-height: auto;min-width:3rem}.ui-group:has(.ui-control) :where(.ui-btn){--ui-btn-border-width: 1px;--ui-btn-border-opacity: 15%;--ui-btn-height: auto;min-width:3rem}.ui-group :where(.ui-btn){--ui-btn-focus-outline-offset: 0}.ui-group>*:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.ui-group>*:not(:first-child),.ui-group>*:not(:first-child) :where(input,select){border-left:0}.ui-group>*:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ui-heading{--ui-heading-font-family: var(--font-primary);--ui-heading-font-weight: var(--font-semibold);--ui-heading-font-size: 1.25rem;--ui-heading-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));--ui-heading-line-height-ratio: .375rem;font-family:var(--ui-heading-font-family);font-size:var(--ui-heading-font-size);line-height:var(--ui-heading-line-height);font-weight:var(--ui-heading-font-weight)}.ui-heading:where(.sm){--ui-heading-font-size: 1.125rem;--ui-heading-line-height-ratio: .125rem}.ui-heading:where(.lg){--ui-heading-font-size: 1.875rem}.ui-image{--ui-image-bg: var(--color-body-secondary);position:relative;display:block;background-color:var(--ui-image-bg);border-radius:inherit}.ui-image>*:not(source){display:block;width:100%;height:100%;border-radius:inherit}.ui-info{--ui-info-font-size: .75rem;--ui-info-font-weight: var(--font-normal);font-size:var(--ui-info-font-size);font-weight:var(--ui-info-font-weight)}.ui-label{--ui-label-font-size: .875rem;--ui-label-font-weight: var(--font-medium);font-size:var(--ui-label-font-size);font-weight:var(--ui-label-font-weight)}.ui-link{--color-accent: var(--color-body-current);--ui-link-font-size: .875rem;--ui-link-font-weight: var(--font-medium);--ui-link-letter-spacing: 0;--ui-link-hover-color: var(--color-accent);--ui-link-hover-opacity: .75;--ui-link-active-opacity: 1;--ui-link-gap: .5rem;font-size:var(--ui-link-font-size);font-weight:var(--ui-link-font-weight);letter-spacing:var(--ui-link-letter-spacing);transition:var(--transition-opacity),var(--transition-color);display:inline-flex;align-items:center;position:relative;gap:var(--ui-link-gap)}@media (hover: hover) and (pointer: fine){.ui-link:is([href],button):hover{color:var(--ui-link-hover-color);opacity:var(--ui-link-hover-opacity)}}.ui-link:is([href],button):focus-visible{color:var(--ui-link-hover-color);opacity:var(--ui-link-hover-opacity)}.ui-link:is([href],button):active{opacity:var(--ui-link-active-opacity)}.ui-link:where([class*="underlined"]){--ui-link-hover-opacity: 1;--ui-link-active-opacity: .75;--ui-link-underline-color: currentColor;--ui-link-underline-width: 1px;--ui-link-underline-opacity: 0;--ui-link-underline-transform: translateY(-.125rem)}.ui-link:where([class*="underlined"]):where(.underlined-visible){--ui-link-underline-opacity: 1;--ui-link-underline-transform: none;--ui-link-underline-color: var(--color-accent);--ui-link-hover-opacity: .75;--ui-link-active-opacity: 1}.ui-link:where([class*="underlined"]):after,.ui-link:where([class*="underlined"]) span:after{content:"";border-bottom:var(--ui-link-underline-width) solid var(--ui-link-underline-color);opacity:var(--ui-link-underline-opacity);position:absolute;inset:auto 0 0;transition:var(--transition-opacity),var(--transition-transform);transform:var(--ui-link-underline-transform)}.js-has-pseudo [csstools-has-1a-39-2x-19-30-2x-32-2z-1m-3b-2w-2t-36-2t-14-2j-2r-30-2p-37-37-16-1p-y-39-32-2s-2t-36-30-2x-32-2t-2s-y-2l-15-1m-2w-2p-37-14-37-3a-2v-15]:not(does-not-exist):after{content:normal}.ui-link:where([class*="underlined"]):has(svg):after{content:normal}.ui-link:where([class*="underlined"]) :where(span){position:relative;inset:auto}@media (hover: hover) and (pointer: fine){.ui-link:where([class*="underlined"]):is([href],button):hover{--ui-link-underline-opacity: 1;--ui-link-underline-transform: none}}.ui-link:where([class*="underlined"]):is([href],button):focus-visible{--ui-link-underline-opacity: 1;--ui-link-underline-transform: none}.ui-notice{--ui-notice-bg: var(--color-accent);--ui-notice-py: 1.25rem;--ui-notice-px: 1.5rem;--ui-notice-font-size: .875rem;--ui-notice-border-radius: var(--rounded);--ui-notice-outline-width: 1px;--ui-notice-outline-offset: calc(var(--ui-notice-outline-width) * -1);--ui-notice-outline-opacity: 10%;--ui-notice-gap: 1.25rem;position:relative;display:flex;flex-direction:column;padding:var(--ui-notice-py) var(--ui-notice-px);font-size:var(--ui-notice-font-size);border-radius:var(--ui-notice-border-radius);background-color:color-mix(in sRGB,var(--ui-notice-bg) 10%,transparent);outline:var(--ui-notice-outline-width) solid color-mix(in sRGB,var(--ui-notice-bg) var(--ui-notice-outline-opacity),transparent);outline-offset:var(--ui-notice-outline-offset);color:var(--color-accent);gap:var(--ui-notice-gap)}.ui-notice :where(hr){--tw-border-opacity: .2}.ui-progress{--ui-progress-height: 1rem;--ui-progress-border-radius: var(--rounded-full);--ui-progress-bg: color-mix(in sRGB, var(--color-accent) var(--ui-progress-bg-opacity), var(--color-body));--ui-progress-bg-opacity: 10%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:var(--ui-progress-height);border-radius:var(--ui-progress-border-radius);background-color:var(--ui-progress-bg);width:100%}.ui-progress::-webkit-progress-bar{background-color:transparent}.ui-progress::-webkit-progress-value{background-color:var(--color-accent);border-radius:var(--ui-progress-border-radius)}.ui-progress::-moz-progress-bar{background-color:var(--color-accent);border-radius:var(--ui-progress-border-radius)}.ui-progress:indeterminate{animation:1.5s linear 0s forwards infinite move-indeterminate;background-image:linear-gradient(to right,var(--color-accent) 30%,var(--ui-progress-bg) 30%);background-position:top left;background-repeat:no-repeat;background-size:150% 150%;border-radius:var(--ui-progress-border-radius)}.ui-progress:indeterminate::-moz-progress-bar{background-color:transparent}.ui-progress:where(.sm){--ui-progress-height: .5rem}.ui-progress:where(.lg){--ui-progress-height: 1.5rem}.ui-switch{--ui-switch-width: 3rem;--ui-switch-height: 1.5rem;--ui-switch-padding: .375rem;--ui-switch-bg: var(--color-dark);--ui-switch-radius: var(--rounded-full);--ui-switch-outline-width: 3px;--ui-switch-outline-offset: 0;--ui-switch-outline-opacity: 20%;display:flex;align-items:center;flex-wrap:wrap;width:-moz-max-content;width:max-content}:where(.dark) .ui-switch{--ui-switch-bg: var(--color-body-tertiary)}.ui-switch:where(.sm){--ui-switch-width: 2.5rem;--ui-switch-height: 1.25rem}.ui-switch:where(.lg){--ui-switch-width: 4rem;--ui-switch-height: 2rem}.ui-switch :where(input){width:var(--ui-switch-width);height:var(--ui-switch-height);display:block;position:relative;border-radius:var(--ui-switch-radius);background-color:var(--ui-switch-bg);transition:var(--transition-background),outline-color var(--transition-duration),outline-offset var(--transition-duration);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:var(--ui-switch-outline-width) solid transparent;outline-offset:0;color:inherit}.ui-switch :where(input):before{width:calc(var(--ui-switch-height) - var(--ui-switch-padding));height:calc(var(--ui-switch-height) - var(--ui-switch-padding));background-color:var(--color-light);border-radius:var(--ui-switch-radius);position:absolute;left:var(--ui-switch-height);top:50%;content:"";display:block;margin-left:calc((var(--ui-switch-height) - var(--ui-switch-padding) + var(--ui-switch-padding) / 2) * -1);transition:left var(--transition-duration),var(--transition-background);transform:translateY(-50%)}.ui-switch :where(input):disabled{opacity:.8;pointer-events:none}.ui-switch :where(input):focus{outline-color:color-mix(in sRGB,var(--color-body-current) var(--ui-switch-outline-opacity),transparent);outline-offset:var(--ui-switch-outline-offset)}.ui-switch :where(input):checked{--color-body-current: var(--color-accent);--ui-switch-bg: var(--color-accent)}.ui-switch :where(input):checked:before{background-color:var(--color-light);left:100%}.ui-text{--ui-text-size: .875rem;--ui-text-size-line: .75rem;--ui-text-weight: var(--font-normal);--ui-text-weight-bold: var(--font-semibold);--ui-text-content-my: 1rem;--ui-text-content-my-lg: 2rem;font-weight:var(--ui-text-weight);font-size:var(--ui-text-size);line-height:calc(var(--ui-text-size) + var(--ui-text-size-line))}.ui-text:where(.lg){--ui-text-size: 1.125rem;--ui-text-size-line: 1rem}.ui-text :where(a){text-decoration:underline;transition:var(--transition-color);color:var(--color-accent)}@media (hover: hover) and (pointer: fine){.ui-text :where(a):hover{color:color-mix(in sRGB,var(--color-accent) 70%,transparent)}}.ui-text :where(a):focus-visible{color:color-mix(in sRGB,var(--color-accent) 70%,transparent)}.ui-text :where(b,strong){font-weight:var(--ui-text-weight-bold)}.ui-text :where(i,em){display:inline;font-style:italic}.ui-text :where(figure){margin:var(--ui-text-content-my) 0}.ui-text :where(figcaption){font-size:.875rem;font-weight:var(--font-semibold);margin-top:.25rem;line-height:1.5}.ui-text :where(img){height:auto}.ui-text :where(p){line-height:inherit}.ui-text :where(p):not(:only-child){margin:var(--ui-text-content-my) 0}.ui-text :where(p):last-child{margin-bottom:0}.ui-text :where(p):empty{line-height:var(--ui-text-content-my);margin:0}.ui-text :where(p):after{content:" "}.ui-text :where(hr){--tw-border-opacity: .1;margin:var(--ui-text-content-my-lg) 0}.ui-text :where(h1,h2,h3,h4,h5,h6){font-weight:var(--ui-text-weight-bold);font-family:var(--font-secondary);font-size:var(--ui-text-heading-size, 1rem);line-height:calc(var(--ui-text-heading-size) + .5rem);margin:var(--ui-text-content-my-lg) 0 var(--ui-text-content-my)}.ui-text :where(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}.ui-text :where(h1){--ui-text-heading-size: 2.25rem}.ui-text :where(h2){--ui-text-heading-size: 1.75rem}.ui-text :where(h3,h4){--ui-text-heading-size: 1.25rem}.ui-text :where(table){border:0;min-width:100%}.ui-text :where(table) :where(td,th){padding:1rem 1.25rem;text-align:left}.ui-text :where(table) :where(thead){font-weight:var(--ui-text-weight-bold);border-bottom:1px solid color-mix(in sRGB,var(--color-body-current) 7.5%,transparent)}.ui-text :where(table) :where(tbody tr):nth-of-type(even){background-color:color-mix(in sRGB,var(--color-body-current) 5%,transparent)}.ui-text :where(iframe){max-width:100%}.ui-text :where(iframe):where([src*="youtube.com"]){aspect-ratio:16/9;height:auto}.ui-text :where(blockquote){border-left:.3125rem solid var(--color-accent);padding:.5rem 1.25rem;margin:1rem 0;font-size:inherit}.ui-text :where(code){margin:0 .25rem;border-radius:var(--rounded-sm);padding:.25rem .375rem;font-size:.85em;color:var(--color-accent);font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background-color:#1b1f230d}:where(.dark) :is(.ui-text :where(code)){background-color:var(--color-body-secondary)}.ui-text :where(ol){margin:var(--ui-text-content-my) 0;padding:0 0 0 1rem}.ui-text :where(ol):not([type]){list-style:decimal}.ui-text :where(ol) :where(li){padding-left:.5rem}.ui-text :where(ol) :where(li):not(:last-child){margin:0 0 .5rem}.ui-text :where(ol) :where(li)::marker{color:var(--color-accent);font-weight:var(--ui-text-weight-bold)}.ui-text :where(ul){list-style-type:none!important;margin:var(--ui-text-content-my) 0;padding:0}.ui-text :where(ul) :where(li){position:relative;line-height:inherit;padding-left:1.25rem}.ui-text :where(ul) :where(li):not(:last-child){margin:0 0 .5rem}.ui-text :where(ul) :where(li):before{width:.375rem;height:.375rem;position:absolute;content:"";border:1px solid var(--color-accent);background-color:var(--color-accent);left:0;top:.6875rem;text-indent:0;border-radius:50%}.ui-text [style*=square]:where(ul) :where(li):before{border-radius:0}.ui-text [style*=circle]:where(ul) :where(li):before{border-radius:50%;background-color:transparent}.ui-title{--ui-title-font-family: var(--font-secondary);--ui-title-font-weight: var(--font-semibold);--ui-title-font-size: .875rem;--ui-title-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));--ui-title-line-height-ratio: .375rem;font-family:var(--ui-title-font-family);font-size:var(--ui-title-font-size);line-height:var(--ui-title-line-height);font-weight:var(--ui-title-font-weight)}.ui-title:where(.sm){--ui-title-font-size: .75rem}.ui-title:where(.lg){--ui-title-font-size: 1.125rem}.c-dialog{--c-dialog-py: 1.5rem;--c-dialog-px: 1.5rem;--c-dialog-width: 35rem;--c-dialog-animation-duration: var(--transition-duration);animation:var(--c-dialog-animation-duration) ease 0s backwards 1 fade-in-down;position:relative;z-index:var(--z-20);margin:auto;background-color:var(--color-body-primary);width:100%;max-width:var(--c-dialog-width);border-radius:var(--rounded-3xl);padding:var(--c-dialog-py) var(--c-dialog-px)}:where(dialog:not([open])) .c-dialog{animation:var(--c-dialog-animation-duration) ease 0s forwards 1 fade-out-up}.c-field{--c-field-gap: .5rem;display:flex;flex-direction:column;gap:var(--c-field-gap)}.js-has-pseudo [csstools-has-1a-3a-2p-30-2x-2s-2p-38-2t-2s-w-1a-2r-19-2u-2x-2t-30-2s-1m-2w-2p-37-14-1m-2x-32-3a-2p-30-2x-2s-15-w-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-2u-33-2j-2w-2x-2s-2s-2t-32-2l-15]:not(.does-not-exist):not(.does-not-exist){display:block}.validated .c-field:has(:invalid) :where(.ui-info[hidden]){display:block}.js-has-pseudo [csstools-has-1a-2r-19-2u-2x-2t-30-2s-1m-2w-2p-37-14-2j-36-2t-35-39-2x-36-2t-2s-2l-15-w-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-30-2p-2q-2t-30-15]:not(.does-not-exist):after{color:var(--color-error);content:" *"}.c-field:has([required]) :where(.ui-label):after{color:var(--color-error);content:" *"}.lib-dialog{--lib-ripple-bg: color-mix(in sRGB, var(--color-dark) calc(var(--tw-bg-opacity, .8) * 100%), transparent);--lib-dialog-py: 2rem;--lib-dialog-px: 1.5rem;--lib-dialog-animation-duration: var(--transition-duration);inset:0;z-index:var(--z-30);position:fixed;overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--lib-ripple-bg);overscroll-behavior:contain;display:flex;visibility:hidden;padding:var(--lib-dialog-py) var(--lib-dialog-px)}.lib-dialog:not([open]){animation:var(--lib-dialog-animation-duration) ease 0s forwards 1 fade-out;pointer-events:none}.lib-dialog[open]{animation:var(--lib-dialog-animation-duration) ease 0s backwards 1 fade-in}.is-lib-dialog-open .lib-dialog{visibility:visible}.is-lib-dialog-open{overflow:hidden;padding-right:var(--lib-dialog-scrollbar-width, 0)}.lib-ripple{--lib-ripple-animation-duration: 1s;--lib-ripple-bg: color-mix(in sRGB, var(--color-body) calc(var(--tw-bg-opacity, .4) * 100%), transparent);position:absolute;background:var(--lib-ripple-bg);border-radius:50%;transform:scale(0);animation-duration:var(--lib-ripple-animation-duration);pointer-events:none}
1
+ *:where(:not(html,iframe,canvas,img,svg,video,audio,svg *,symbol *,ol,ul)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}:where(a,button){cursor:revert}:where(ol:not([type]),ul,menu){list-style:none}:where(img){max-inline-size:100%;max-block-size:100%}:where(table){border-collapse:collapse}:where(input,textarea){-webkit-user-select:auto;-moz-user-select:auto;user-select:auto;cursor:revert}:where(textarea){white-space:revert}:where(meter){-webkit-appearance:revert;-moz-appearance:revert;appearance:revert}:where(pre){all:revert}::-moz-placeholder{color:unset}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}:where([draggable="true"]){-webkit-user-drag:element}:where(svg,use,path,symbol){all:revert-layer}::-moz-selection{color:var(--color-light);background-color:var(--color-accent)}::selection{color:var(--color-light);background-color:var(--color-accent)}:where(*){outline:none;border:0 solid transparent;-webkit-tap-highlight-color:rgb(255 255 255 / 0%)}:where(svg){stroke-width:1.5}:where(svg:not([width])){width:1.25em}:where(svg:not([height])){height:1.25em}:where(button){cursor:pointer}:where(hr){display:block;border-top:1px solid color-mix(in sRGB,var(--color-current) calc(var(--tw-border-opacity, .15) * 100%),transparent);border-radius:var(--rounded)}:where(html){font-family:var(--font-primary);font-weight:var(--font-normal);height:100%;line-height:1.5;cursor:default}:where(body){min-height:100%;background-color:var(--color-body);color:var(--color-main);accent-color:var(--color-accent)}:where(input[type="time"])::-webkit-datetime-edit-fields-wrapper,:where(input[type="time"])::-webkit-datetime-edit-text,:where(input[type="time"])::-webkit-datetime-edit,:where(input[type="time"])::-webkit-datetime-edit-hour-field,:where(input[type="time"])::-webkit-datetime-edit-minute-field{padding:0}:root{--font-default: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-primary: var(--font-default);--font-secondary: var(--font-default);--container-width: 80rem;--container-width-sm: 58rem;--container-padding: 5vw;--container-padding-calc: max(calc(50vw - (var(--container-width) / 2) + var(--container-padding)), var(--container-padding));--font-bold: 700;--font-semibold: 600;--font-medium: 500;--font-normal: 400;--font-light: 300;--font-thin: 200;--z-10: 10;--z-20: 20;--z-30: 30;--z-40: 40;--z-50: 50;--rounded: var(--rounded-xl);--rounded-xs: .125rem;--rounded-sm: .25rem;--rounded-md: .375rem;--rounded-lg: .5rem;--rounded-xl: .75rem;--rounded-2xl: 1rem;--rounded-3xl: 1.5rem;--rounded-4xl: 1.875rem;--rounded-5xl: 2.25rem;--rounded-6xl: 3rem;--rounded-full: 9999px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .875rem;--spacing-lg: 1rem;--spacing-xl: 1.25rem;--spacing-2xl: 1.5rem;--spacing-3xl: 1.875rem;--spacing-4xl: 2.25rem;--spacing-5xl: 3rem;--spacing-6xl: 3.75rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--text-7xl: 4.5rem;--text-8xl: 6rem;--text-9xl: 8rem;--transition-duration: .15s;--transition-color: color var(--transition-duration) ease;--transition-background: background var(--transition-duration) ease;--transition-opacity: opacity var(--transition-duration) ease;--transition-transform: transform var(--transition-duration) ease;--transition-border: border-color var(--transition-duration) ease;--transition-shadow: box-shadow var(--transition-duration) ease}@media (prefers-reduced-motion){:root{--transition-duration: 0}}:root{--icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>') no-repeat 50% 50% / contain;--icon-radio: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>') no-repeat 50% 50% / contain;--icon-angle-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" /></svg>') no-repeat 50% 50% / contain;--icon-angle-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>') no-repeat 50% 50% / contain}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes move-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fade-out-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2rem)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes ripple{to{transform:scale(2.5);opacity:0}}:root{--color-current-rgb: var(--color-main-rgb);--color-current-fg-rgb: var(--color-main-fg-rgb);--color-accent-rgb: var(--color-primary-rgb);--color-accent-fg-rgb: var(--color-primary-fg-rgb);--color-primary-rgb: 3 138 255;--color-primary-fg-rgb: var(--color-light-rgb);--color-main-rgb: 17 19 21;--color-main-fg-rgb: var(--color-body-rgb);--color-body-rgb: 255 255 255;--color-body-fg-rgb: var(--color-main-rgb);--color-light-rgb: 255 255 255;--color-light-fg-rgb: var(--color-dark-rgb);--color-dark-rgb: 17 19 21;--color-dark-fg-rgb: var(--color-light-rgb);--color-success-rgb: 33 154 67;--color-error-rgb: 254 50 75;--color-warning-rgb: 254 179 53;--color-info-rgb: 45 168 234;--color-current: rgb(var(--color-current-rgb));--color-current-fg: rgb(var(--color-current-fg-rgb));--color-accent: rgb(var(--color-accent-rgb));--color-accent-fg: rgb(var(--color-accent-fg-rgb));--color-primary: rgb(var(--color-primary-rgb));--color-primary-fg: rgb(var(--color-primary-fg-rgb));--color-main: var(--color-main-primary);--color-main-fg: rgb(var(--color-main-fg-rgb));--color-main-primary: rgb(var(--color-main-rgb));--color-main-secondary: color-mix(in sRGB, var(--color-main) 75%, var(--color-main-fg));--color-main-tertiary: color-mix(in sRGB, var(--color-main) 50%, var(--color-main-fg));--color-body: var(--color-body-primary);--color-body-fg: rgb(var(--color-body-fg-rgb));--color-body-primary: rgb(var(--color-body-rgb));--color-body-secondary: color-mix(in sRGB, var(--color-body) 95%, var(--color-body-fg));--color-body-tertiary: color-mix(in sRGB, var(--color-body) 90%, var(--color-body-fg));--color-light: rgb(var(--color-light-rgb));--color-light-fg: rgb(var(--color-light-fg-rgb));--color-dark: rgb(var(--color-dark-rgb));--color-dark-fg: rgb(var(--color-dark-fg-rgb));--color-success: rgb(var(--color-success-rgb));--color-error: rgb(var(--color-error-rgb));--color-warning: rgb(var(--color-warning-rgb));--color-info: rgb(var(--color-info-rgb))}:root.dark{--color-main-rgb: 255 255 255;--color-body-rgb: 25 26 27;--color-main: rgb(var(--color-body-rgb));--color-body: rgb(var(--color-main-rgb))}.ui-badge{--color-current: var(--color-accent-fg);--ui-badge-width: max-content;--ui-badge-height: 1.5rem;--ui-badge-py: 0;--ui-badge-px: .5rem;--ui-badge-border-radius: var(--rounded-lg);--ui-badge-font-size: .75rem;--ui-badge-font-weight: var(--font-normal);--ui-badge-bg: color-mix(in sRGB, var(--color-accent) var(--ui-badge-bg-opacity), var(--ui-badge-bg-mix));--ui-badge-bg-mix: transparent;--ui-badge-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);--ui-badge-color: color-mix(in sRGB, var(--color-current) var(--ui-badge-color-opacity), transparent);--ui-badge-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);--ui-badge-gap: .25rem;width:var(--ui-badge-width);height:var(--ui-badge-height);padding:var(--ui-badge-py) var(--ui-badge-px);border-radius:var(--ui-badge-border-radius);font-size:var(--ui-badge-font-size);font-weight:var(--ui-badge-font-weight);background-color:var(--ui-badge-bg);color:var(--ui-badge-color);display:inline-flex;align-items:center;text-align:center;justify-content:center;white-space:nowrap;flex-shrink:0;position:relative;z-index:0;gap:var(--ui-badge-gap);transition:var(--transition-opacity)}.ui-badge:where(.bordered,.muted){--color-current: var(--color-accent);--ui-badge-bg-opacity: 0%}.ui-badge:where(.sm){--ui-badge-height: 1.25rem;--ui-badge-font-size: .625rem}.ui-badge:where(.lg){--ui-badge-height: 1.75rem}.ui-badge:where(.bordered){--ui-badge-border-width: 1px;--ui-badge-border-opacity: calc(var(--tw-border-opacity, 1) * 100%);border:var(--ui-badge-border-width) solid color-mix(in sRGB,var(--color-accent) var(--ui-badge-border-opacity),transparent);padding-left:calc(var(--ui-badge-px) - var(--ui-badge-border-width));padding-right:calc(var(--ui-badge-px) - var(--ui-badge-border-width))}.ui-badge:where(.muted){--ui-badge-bg-opacity: 10%}.ui-badge:where(.square){--ui-badge-px: var(--ui-badge-py);--ui-badge-width: var(--ui-badge-height)}.ui-badge:where(.circle){--ui-badge-px: var(--ui-badge-py);--ui-badge-width: var(--ui-badge-height);--ui-badge-border-radius: var(--rounded-full)}.ui-btn{--color-current: var(--color-accent-fg);--ui-btn-width: max-content;--ui-btn-height: 2.25rem;--ui-btn-gap: .375rem;--ui-btn-py: .375rem;--ui-btn-px: .75rem;--ui-btn-border-radius: var(--rounded);--ui-btn-font-size: .875rem;--ui-btn-font-weight: var(--font-medium);--ui-btn-letter-spacing: 0;--ui-btn-bg: color-mix(in sRGB, var(--color-accent) var(--ui-btn-bg-opacity), var(--ui-btn-bg-mix));--ui-btn-bg-mix: transparent;--ui-btn-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);--ui-btn-color: color-mix(in sRGB, var(--color-current) var(--ui-btn-color-opacity), transparent);--ui-btn-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);--ui-btn-outline-width: 2px;--ui-btn-hover-color: var(--color-current);--ui-btn-hover-bg-mix: black;--ui-btn-hover-bg-opacity: 80%;--ui-btn-active-color: var(--color-current);--ui-btn-active-bg-mix: black;--ui-btn-active-bg-opacity: 90%;--ui-btn-focus-outline-color-mix: transparent;--ui-btn-focus-outline-color-opacity: 50%;--ui-btn-focus-outline-offset: 2px;--ui-btn-disabled-opacity: 70%;width:var(--ui-btn-width);height:var(--ui-btn-height);padding:var(--ui-btn-py) var(--ui-btn-px);border-radius:var(--ui-btn-border-radius);font-size:var(--ui-btn-font-size);font-weight:var(--ui-btn-font-weight);letter-spacing:var(--ui-btn-letter-spacing);background-color:var(--ui-btn-bg);color:var(--ui-btn-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;display:inline-flex;align-items:center;text-align:center;justify-content:center;white-space:nowrap;flex-shrink:0;position:relative;z-index:0;transition:var(--transition-background),var(--transition-color),outline-color var(--transition-duration),outline-offset .1s cubic-bezier(.4,0,.2,1);gap:var(--ui-btn-gap);outline:var(--ui-btn-outline-width) solid transparent;outline-offset:0}.ui-btn:where([class*="accent-base"]){--ui-btn-hover-bg-mix: var(--color-main-fg)}.ui-btn:where([class*="accent-body"]){--ui-btn-hover-bg-mix: var(--color-body-fg)}.ui-btn :where(svg){font-size:calc(var(--ui-btn-font-size) + .125rem)}.ui-btn:where(.bordered,.muted,.ghosted){--ui-btn-hover-bg-mix: transparent;--ui-btn-hover-bg-opacity: 10%;--ui-btn-active-bg-mix: transparent;--ui-btn-active-bg-opacity: 20%;--ui-btn-focus-outline-offset: -2px;--ui-btn-bg-opacity: 0%;--color-current: var(--color-accent)}.ui-btn:is([href],button,[role="button"]):disabled{opacity:var(--ui-btn-disabled-opacity);cursor:not-allowed}@media (hover: hover) and (pointer: fine){.ui-btn:is([href],button,[role="button"]):not(:disabled):hover{--ui-btn-color: var(--ui-btn-hover-color);--ui-btn-bg-mix: var(--ui-btn-hover-bg-mix);--ui-btn-bg-opacity: var(--ui-btn-hover-bg-opacity)}}.ui-btn:is([href],button,[role="button"]):not(:disabled):focus{outline-color:color-mix(in sRGB,var(--color-accent) var(--ui-btn-focus-outline-color-opacity),var(--ui-btn-focus-outline-color-mix));outline-offset:var(--ui-btn-focus-outline-offset)}.ui-btn:is([href],button,[role="button"]):not(:disabled):is(:active,.active){--ui-btn-color: var(--ui-btn-active-color);--ui-btn-bg-mix: var(--ui-btn-active-bg-mix);--ui-btn-bg-opacity: var(--ui-btn-active-bg-opacity)}.ui-btn:where(.sm){--ui-btn-height: 2rem;--ui-btn-px: 1rem}.ui-btn:where(.lg){--ui-btn-height: 3rem;--ui-btn-px: 1.75rem}.ui-btn:is(.loading){--ui-btn-loading-width: 1rem;--ui-btn-loading-border-width: 2px;pointer-events:none;color:transparent}.ui-btn:is(.loading)>*{opacity:0}.ui-btn:is(.loading):after{z-index:1;width:var(--ui-btn-loading-width);height:var(--ui-btn-loading-width);content:"";border:var(--ui-btn-loading-border-width) solid var(--color-current);border-right-color:transparent;border-radius:50%;animation:spin .45s infinite linear;position:absolute;margin-left:calc(var(--ui-btn-loading-width) / 2 * -1);margin-top:calc(var(--ui-btn-loading-width) / 2 * -1);left:50%;top:50%}.ui-btn:where(.wide){padding-left:calc(var(--ui-btn-px) * 1.5);padding-right:calc(var(--ui-btn-px) * 1.5)}.ui-btn:where(.bordered){--ui-btn-border-width: 1px;--ui-btn-border-opacity: calc(var(--tw-border-opacity, .3) * 100%);border:var(--ui-btn-border-width) solid color-mix(in sRGB,var(--color-accent) var(--ui-btn-border-opacity),transparent);padding-left:calc(var(--ui-btn-px) - var(--ui-btn-border-width));padding-right:calc(var(--ui-btn-px) - var(--ui-btn-border-width))}.ui-btn:where(.hover-fill){--ui-btn-hover-bg-mix: black;--ui-btn-hover-bg-opacity: 100%;--ui-btn-active-bg-mix: black;--ui-btn-active-bg-opacity: 90%;--ui-btn-hover-color: var(--color-light);--ui-btn-active-color: var(--color-light)}.ui-btn:where(.gradient):before{content:"";position:absolute;inset:0;background-color:color-mix(in sRGB,var(--ui-btn-bg-mix) calc(100% - var(--ui-btn-bg-opacity)),transparent);z-index:-1;transition:var(--transition-background)}:is(.ui-btn.gradient-bordered){--ui-btn-border-width: 2px;--ui-btn-hover-bg-mix: transparent;--ui-btn-hover-bg-opacity: 10%;--ui-btn-active-bg-mix: transparent;--ui-btn-active-bg-opacity: 20%;--ui-btn-focus-outline-offset: 0;--ui-btn-bg-opacity: 0%;--color-current: var(--color-main)}:is(.ui-btn.gradient-bordered):before{content:"";position:absolute;background-color:color-mix(in sRGB,var(--color-body) calc(100% - var(--ui-btn-bg-opacity)),transparent);inset:var(--ui-btn-border-width);border-radius:calc(var(--ui-btn-border-radius) / 1.25);z-index:-1;transition:var(--transition-background)}:is(.ui-btn.gradient-bordered):where(.hover-fill){--ui-btn-bg-opacity: 100%}:is(.ui-btn.gradient-bordered):where(.hover-fill):before{background-color:color-mix(in sRGB,var(--color-body) var(--ui-btn-bg-opacity),transparent)}.ui-btn:where(.muted){--ui-btn-hover-bg-opacity: 30%;--ui-btn-bg-opacity: 10%}.ui-btn:where(.raised){--ui-btn-border-width: 2px;--ui-btn-border-opacity: calc(var(--tw-border-opacity, .85) * 100%);border:var(--ui-btn-border-width) solid color-mix(in sRGB,var(--color-accent) var(--ui-btn-border-opacity),var(--color-current));padding-left:calc(var(--ui-btn-px) - var(--ui-btn-border-width));padding-right:calc(var(--ui-btn-px) - var(--ui-btn-border-width))}.ui-btn:where(.square){--ui-btn-px: var(--ui-btn-py);--ui-btn-width: var(--ui-btn-height)}.ui-btn:where(.circle){--ui-btn-px: var(--ui-btn-py);--ui-btn-width: var(--ui-btn-height);--ui-btn-border-radius: var(--rounded-full)}.ui-check{--ui-check-width: 1.375rem;--ui-check-font-size: .875rem;--ui-check-gap: .625rem;--ui-check-bg: transparent;--ui-check-bg-mix: transparent;--ui-check-bg-opacity: calc(var(--tw-bg-opacity, .1) * 100%);--ui-check-border-color: var(--color-current);--ui-check-border-mix: transparent;--ui-check-border-opacity: calc(var(--tw-border-opacity, .2) * 100%);--ui-check-border-width: 1px;--ui-check-checked-bg: var(--color-accent);--ui-check-radius: .5rem;--ui-check-icon: var(--icon-check);--ui-check-icon-font-size: 1.125rem;--ui-check-box-shadow: none;--ui-check-outline-width: 3px;--ui-check-outline-offset: 0;--ui-check-outline-opacity: 20%;--ui-check-disabled-opacity: 50%;display:flex;align-items:center;gap:0 var(--ui-check-gap);width:-moz-fit-content;width:fit-content;font-size:var(--ui-check-font-size);text-wrap:balance}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-2w-2t-2r-2z-1m-2w-2p-37-14-2j-38-3d-34-2t-1p-y-36-2p-2s-2x-33-y-2l-15]:not(.does-not-exist){--ui-check-icon: var(--icon-radio);--ui-check-radius: 50%}.ui-check:has([type="radio"]){--ui-check-icon: var(--icon-radio);--ui-check-radius: 50%}.ui-check :where(label[for],input){cursor:pointer}.ui-check :where(a){color:var(--color-accent);text-decoration:underline}.ui-check :where(input){display:flex;width:var(--ui-check-width);height:var(--ui-check-width);background-color:color-mix(in sRGB,var(--ui-check-bg) var(--ui-check-bg-opacity),var(--ui-check-bg-mix));border:var(--ui-check-border-width) solid color-mix(in sRGB,var(--ui-check-border-color) var(--ui-check-border-opacity),var(--ui-check-border-mix));border-radius:var(--ui-check-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:var(--ui-check-outline-width) solid transparent;outline-offset:0;justify-content:center;align-items:center;transition:var(--transition-border),var(--transition-background),outline-color var(--transition-duration),outline-offset var(--transition-duration);font-size:var(--ui-check-icon-font-size);cursor:pointer;flex-shrink:0}.ui-check :where(input):before{line-height:var(--ui-check-icon-font-size);text-indent:0;display:block;transition:var(--transition-color),var(--transition-opacity),var(--transition-transform);color:var(--color-accent-fg);content:"";background-color:currentColor;-webkit-mask:var(--ui-check-icon);mask:var(--ui-check-icon);opacity:0;transform:scale(0);will-change:transform;width:1em;height:1em}:is(.ui-check :where(input):where(:required))+*:after{color:var(--color-error);content:" *"}.ui-check :where(input):not(:disabled):is(:hover,:focus-visible){--ui-check-bg: var(--ui-check-checked-bg);--ui-check-border-color: var(--ui-check-checked-bg);--ui-check-border-opacity: 75%;--ui-check-bg-opacity: 10%}.ui-check :where(input):not(:disabled):focus{--ui-check-border-color: var(--ui-check-checked-bg);--ui-check-border-opacity: 75%;outline-color:color-mix(in sRGB,var(--ui-check-checked-bg) var(--ui-check-outline-opacity),transparent);outline-offset:var(--ui-check-outline-offset)}.ui-check :where(input):disabled{--ui-check-bg-opacity: 15%;--ui-check-bg: var(--color-current);cursor:not-allowed;opacity:var(--ui-check-disabled-opacity)}.ui-check :where(input):checked{--ui-check-border-opacity: 0%;background-color:var(--ui-check-checked-bg)}.ui-check :where(input):checked:before{opacity:1;transform:scale(1)}.ui-check.invalid,.validated .ui-check :where(input):invalid{--ui-check-bg: var(--color-error);--ui-check-border-color: var(--color-error);--ui-check-checked-bg: var(--color-error);--ui-check-border-opacity: 100%}.ui-control{--ui-control-height: 3rem;--ui-control-height-textarea: 8rem;--ui-control-pt-floating: 1.25rem;--ui-control-pb-floating: .4375rem;--ui-control-py: .875rem;--ui-control-px: .875rem;--ui-control-pl: var(--ui-control-px);--ui-control-pr: var(--ui-control-px);--ui-control-bg: transparent;--ui-control-color: currentColor;--ui-control-placeholder-color: currentColor;--ui-control-placeholder-opacity: .5;--ui-control-font-size: .875rem;--ui-control-font-weight: var(--font-medium);--ui-control-border-width: 1px;--ui-control-border-color: var(--color-current);--ui-control-border-mix: transparent;--ui-control-border-opacity: 15%;--ui-control-border-radius: var(--rounded);--ui-control-outline-width: 3px;--ui-control-outline-offset: 0;--ui-control-outline-opacity: 20%;--ui-control-disabled-opacity: 5%;--ui-control-invalid-bg-opacity: 10%;display:grid;grid-template-areas:"input";font-size:var(--ui-control-font-size);position:relative;border-radius:var(--ui-control-border-radius)}.ui-control :where(input,textarea,select){grid-area:input;background-clip:padding-box;background-color:var(--ui-control-bg);padding:var(--ui-control-py) var(--ui-control-pr) var(--ui-control-py) var(--ui-control-pl);transition:var(--transition-border),outline-color var(--transition-duration),outline-offset var(--transition-duration);line-height:normal;font-size:inherit;height:var(--ui-control-height);font-weight:var(--ui-control-font-weight);border-radius:inherit;color:var(--ui-control-color);border:var(--ui-control-border-width) solid color-mix(in sRGB,var(--ui-control-border-color) var(--ui-control-border-opacity),var(--ui-control-border-mix));outline:var(--ui-control-outline-width) solid transparent;outline-offset:0}.ui-control :where(input,textarea,select):focus{--ui-control-border-opacity: 100%;--ui-control-border-color: var(--color-accent);outline-color:color-mix(in sRGB,var(--color-accent) var(--ui-control-outline-opacity),transparent);outline-offset:var(--ui-control-outline-offset)}.ui-control :where(input,textarea,select):disabled{cursor:not-allowed;background-color:color-mix(in sRGB,var(--color-current) var(--ui-control-disabled-opacity),var(--ui-control-bg))}:is(.ui-control :where(input,textarea,select)):required~label:after{color:var(--color-error);content:" *"}.ui-control :where(input,textarea)::-moz-placeholder{color:var(--ui-control-placeholder-color);opacity:var(--ui-control-placeholder-opacity)}.ui-control :where(input,textarea)::placeholder{color:var(--ui-control-placeholder-color);opacity:var(--ui-control-placeholder-opacity)}.ui-control :where(textarea){resize:vertical;overflow:hidden;min-height:var(--ui-control-height-textarea)}.ui-control.invalid,.validated .ui-control :where(input,textarea,select):invalid{--ui-control-border-opacity: 100%;--ui-control-border-color: var(--color-error);--ui-control-color: var(--color-error);--color-accent: var(--color-error);background-color:color-mix(in sRGB,var(--color-error) var(--ui-control-invalid-bg-opacity),var(--ui-control-bg))}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-37-2t-30-2t-2r-38-15]:not(does-not-exist){--ui-control-icon-select-font-size: 1.5rem;--ui-control-pr: var(--ui-control-icon-offset-r)}.ui-control:has(select){--ui-control-icon-select-font-size: 1.5rem;--ui-control-pr: var(--ui-control-icon-offset-r)}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-15]:not(.does-not-exist):not(does-not-exist){--ui-control-icon-count-r: 2}.ui-control:has(select):has(.icon-r){--ui-control-icon-count-r: 2}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-37-2t-30-2t-2r-38-15-w-1m-3b-2w-2t-36-2t-14-2j-2r-30-2p-37-37-2m-1p-y-2x-2r-33-32-19-y-2l-15]:not(does-not-exist){margin-right:calc(var(--ui-control-icon-font-size) + var(--ui-control-icon-gap))}.ui-control:has(select) :where([class^="icon-"]){margin-right:calc(var(--ui-control-icon-font-size) + var(--ui-control-icon-gap))}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-37-2t-30-2t-2r-38-15]:not(does-not-exist):after{width:1em;height:1em;background-color:currentColor;content:"";position:absolute;z-index:1;font-size:var(--ui-control-icon-select-font-size);right:var(--ui-control-icon-inset-x);top:calc(var(--ui-control-height) / 2);margin-top:calc(var(--ui-control-icon-select-font-size) / 2 * -1);-webkit-mask:var(--icon-angle-down);mask:var(--icon-angle-down);pointer-events:none;grid-area:input}.ui-control:has(select):after{width:1em;height:1em;background-color:currentColor;content:"";position:absolute;z-index:1;font-size:var(--ui-control-icon-select-font-size);right:var(--ui-control-icon-inset-x);top:calc(var(--ui-control-height) / 2);margin-top:calc(var(--ui-control-icon-select-font-size) / 2 * -1);-webkit-mask:var(--icon-angle-down);mask:var(--icon-angle-down);pointer-events:none;grid-area:input}.ui-control{--ui-control-icon-font-size: 1.25rem;--ui-control-icon-count-l: 1;--ui-control-icon-count-r: 1;--ui-control-icon-gap: .375rem;--ui-control-icon-inset-x: calc(var(--ui-control-px) - .25rem);--ui-control-icon-inset-x-gap: .125rem;--ui-control-icon-offset-l: calc(var(--ui-control-icon-inset-x) + var(--ui-control-icon-inset-x-gap) + (var(--ui-control-icon-font-size) + var(--ui-control-icon-gap)) * var(--ui-control-icon-count-l));--ui-control-icon-offset-r: calc(var(--ui-control-icon-inset-x) + var(--ui-control-icon-inset-x-gap) + (var(--ui-control-icon-font-size) + var(--ui-control-icon-gap)) * var(--ui-control-icon-count-r))}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-1a-2x-2r-33-32-19-30-15]:not(.does-not-exist){--ui-control-pl: var(--ui-control-icon-offset-l)}.ui-control:has(.icon-l){--ui-control-pl: var(--ui-control-icon-offset-l)}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-15]:not(.does-not-exist){--ui-control-pr: var(--ui-control-icon-offset-r)}.ui-control:has(.icon-r){--ui-control-pr: var(--ui-control-icon-offset-r)}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-1a-2x-2r-33-32-19-30-w-1q-w-16-1m-32-38-2w-19-2r-2w-2x-30-2s-14-1e-15-15]:not(.does-not-exist):not(.does-not-exist){--ui-control-icon-count-r: 2}.ui-control:has(.icon-l > *:nth-child(2)){--ui-control-icon-count-r: 2}.js-has-pseudo [csstools-has-1a-39-2x-19-2r-33-32-38-36-33-30-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-w-1q-w-16-1m-32-38-2w-19-2r-2w-2x-30-2s-14-1e-15-15]:not(.does-not-exist):not(.does-not-exist){--ui-control-icon-count-r: 2}.ui-control:has(.icon-r > *:nth-child(2)){--ui-control-icon-count-r: 2}.ui-control :where(svg){font-size:var(--ui-control-icon-font-size);width:1em;height:1em}.ui-control :where([class^="icon-"]){grid-area:input;content:"";position:relative;line-height:1em;display:flex;flex-direction:row;flex-shrink:0;align-items:center;gap:var(--ui-control-icon-gap);transition:var(--transition-opacity);height:var(--ui-control-height)}.ui-control :where([class^="icon-"]):where(.icon-l){left:var(--ui-control-icon-inset-x);margin-right:auto}.ui-control :where([class^="icon-"]):where(.icon-r){right:var(--ui-control-icon-inset-x);margin-left:auto}.ui-control :where([aria-label]):after{content:attr(aria-label);font-size:var(--ui-control-font-size);min-width:var(--ui-control-icon-font-size);text-align:center;line-height:var(--ui-control-icon-font-size);display:block}.ui-control:where(.floating){--ui-control-floating-label-font-size: .875rem;--ui-control-floating-label-font-weight: var(--font-medium);--ui-control-floating-label-focus-transform: translateY(-.6875rem) scale(.8);--ui-control-floating-label-focus-opacity: 50%;--ui-control-floating-label-transition-duration: .4s}.ui-control:where(.floating) :where(label){grid-area:input;align-self:start;pointer-events:none;transition:transform var(--ui-control-floating-label-transition-duration) cubic-bezier(.25,.8,.25,1),var(--transition-color),var(--transition-opacity);transform-origin:0 50%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transform:perspective(100px);will-change:transform;font-weight:var(--ui-control-floating-label-font-weight);margin-left:var(--ui-control-pl);margin-right:var(--ui-control-pr);line-height:var(--ui-control-floating-label-font-size);margin-top:calc(var(--ui-control-height) / 2 - (var(--ui-control-font-size) / 2))}.ui-control:where(.floating) :where(input,textarea,select){padding-top:calc(var(--ui-control-pt-floating));padding-bottom:calc(var(--ui-control-pb-floating))}.ui-control:where(.floating){--ui-control-placeholder-color: transparent}:is(.ui-control:where(.floating) :where(input,textarea,select)):is(:focus,:not(:-moz-placeholder-shown))~label{transform:var(--ui-control-floating-label-focus-transform);opacity:var(--ui-control-floating-label-focus-opacity)}:is(.ui-control:where(.floating) :where(input,textarea,select)):is(:focus,:not(:placeholder-shown))~label{transform:var(--ui-control-floating-label-focus-transform);opacity:var(--ui-control-floating-label-focus-opacity)}.ui-group{display:flex;flex-wrap:wrap}.js-has-pseudo [csstools-has-1a-39-2x-19-2v-36-33-39-34-1m-2w-2p-37-14-1a-39-2x-19-2r-33-32-38-36-33-30-15-w-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2q-38-32-15]:not(.does-not-exist){--ui-btn-border-width: 1px;--ui-btn-border-opacity: 15%;--ui-btn-height: auto;min-width:3rem}.ui-group:has(.ui-control) :where(.ui-btn){--ui-btn-border-width: 1px;--ui-btn-border-opacity: 15%;--ui-btn-height: auto;min-width:3rem}.ui-group :where(.ui-btn){--ui-btn-focus-outline-offset: 0}.ui-group>*:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.ui-group>*:not(:first-child),.ui-group>*:not(:first-child) :where(input,select){border-left:0}.ui-group>*:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ui-heading{--ui-heading-font-family: var(--font-primary);--ui-heading-font-weight: var(--font-semibold);--ui-heading-font-size: 1.25rem;--ui-heading-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));--ui-heading-line-height-ratio: .375rem;font-family:var(--ui-heading-font-family);font-size:var(--ui-heading-font-size);line-height:var(--ui-heading-line-height);font-weight:var(--ui-heading-font-weight)}.ui-heading:where(.sm){--ui-heading-font-size: 1.125rem;--ui-heading-line-height-ratio: .125rem}.ui-heading:where(.lg){--ui-heading-font-size: 1.875rem}.ui-image{--ui-image-bg: var(--color-body-secondary);position:relative;display:block;background-color:var(--ui-image-bg);border-radius:inherit}.ui-image>*:not(source){display:block;width:100%;height:100%;border-radius:inherit}.ui-info{--ui-info-font-size: .75rem;--ui-info-font-weight: var(--font-normal);font-size:var(--ui-info-font-size);font-weight:var(--ui-info-font-weight)}.ui-label{--ui-label-font-size: .875rem;--ui-label-font-weight: var(--font-medium);font-size:var(--ui-label-font-size);font-weight:var(--ui-label-font-weight)}.ui-link{--color-accent: var(--color-current);--ui-link-font-size: .875rem;--ui-link-font-weight: var(--font-medium);--ui-link-letter-spacing: 0;--ui-link-hover-color: var(--color-accent);--ui-link-hover-opacity: .75;--ui-link-active-opacity: 1;--ui-link-gap: .5rem;font-size:var(--ui-link-font-size);font-weight:var(--ui-link-font-weight);letter-spacing:var(--ui-link-letter-spacing);transition:var(--transition-opacity),var(--transition-color);display:inline-flex;align-items:center;position:relative;gap:var(--ui-link-gap)}@media (hover: hover) and (pointer: fine){.ui-link:is([href],button):hover{color:var(--ui-link-hover-color);opacity:var(--ui-link-hover-opacity)}}.ui-link:is([href],button):focus-visible{color:var(--ui-link-hover-color);opacity:var(--ui-link-hover-opacity)}.ui-link:is([href],button):active{opacity:var(--ui-link-active-opacity)}.ui-link:where([class*="underlined"]){--ui-link-hover-opacity: 1;--ui-link-active-opacity: .75;--ui-link-underline-color: currentColor;--ui-link-underline-width: 1px;--ui-link-underline-opacity: 0;--ui-link-underline-transform: translateY(-.125rem)}.ui-link:where([class*="underlined"]):where(.underlined-visible){--ui-link-underline-opacity: 1;--ui-link-underline-transform: none;--ui-link-underline-color: var(--color-accent);--ui-link-hover-opacity: .75;--ui-link-active-opacity: 1}.ui-link:where([class*="underlined"]):after,.ui-link:where([class*="underlined"]) span:after{content:"";border-bottom:var(--ui-link-underline-width) solid var(--ui-link-underline-color);opacity:var(--ui-link-underline-opacity);position:absolute;inset:auto 0 0;transition:var(--transition-opacity),var(--transition-transform);transform:var(--ui-link-underline-transform)}.js-has-pseudo [csstools-has-1a-39-2x-19-30-2x-32-2z-1m-3b-2w-2t-36-2t-14-2j-2r-30-2p-37-37-16-1p-y-39-32-2s-2t-36-30-2x-32-2t-2s-y-2l-15-1m-2w-2p-37-14-37-3a-2v-15]:not(does-not-exist):after{content:normal}.ui-link:where([class*="underlined"]):has(svg):after{content:normal}.ui-link:where([class*="underlined"]) :where(span){position:relative;inset:auto}@media (hover: hover) and (pointer: fine){.ui-link:where([class*="underlined"]):is([href],button):hover{--ui-link-underline-opacity: 1;--ui-link-underline-transform: none}}.ui-link:where([class*="underlined"]):is([href],button):focus-visible{--ui-link-underline-opacity: 1;--ui-link-underline-transform: none}.ui-notice{--ui-notice-bg: var(--color-accent);--ui-notice-py: 1.25rem;--ui-notice-px: 1.5rem;--ui-notice-font-size: .875rem;--ui-notice-border-radius: var(--rounded);--ui-notice-outline-width: 1px;--ui-notice-outline-offset: calc(var(--ui-notice-outline-width) * -1);--ui-notice-outline-opacity: 10%;--ui-notice-gap: 1.25rem;position:relative;display:flex;flex-direction:column;padding:var(--ui-notice-py) var(--ui-notice-px);font-size:var(--ui-notice-font-size);border-radius:var(--ui-notice-border-radius);background-color:color-mix(in sRGB,var(--ui-notice-bg) 10%,transparent);outline:var(--ui-notice-outline-width) solid color-mix(in sRGB,var(--ui-notice-bg) var(--ui-notice-outline-opacity),transparent);outline-offset:var(--ui-notice-outline-offset);color:var(--color-accent);gap:var(--ui-notice-gap)}.ui-notice :where(hr){--tw-border-opacity: .2}.ui-progress{--ui-progress-height: 1rem;--ui-progress-border-radius: var(--rounded-full);--ui-progress-bg: color-mix(in sRGB, var(--color-accent) var(--ui-progress-bg-opacity), var(--color-body));--ui-progress-bg-opacity: 10%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:var(--ui-progress-height);border-radius:var(--ui-progress-border-radius);background-color:var(--ui-progress-bg);width:100%}.ui-progress::-webkit-progress-bar{background-color:transparent}.ui-progress::-webkit-progress-value{background-color:var(--color-accent);border-radius:var(--ui-progress-border-radius)}.ui-progress::-moz-progress-bar{background-color:var(--color-accent);border-radius:var(--ui-progress-border-radius)}.ui-progress:indeterminate{animation:1.5s linear 0s forwards infinite move-indeterminate;background-image:linear-gradient(to right,var(--color-accent) 30%,var(--ui-progress-bg) 30%);background-position:top left;background-repeat:no-repeat;background-size:150% 150%;border-radius:var(--ui-progress-border-radius)}.ui-progress:indeterminate::-moz-progress-bar{background-color:transparent}.ui-progress:where(.sm){--ui-progress-height: .5rem}.ui-progress:where(.lg){--ui-progress-height: 1.5rem}.ui-switch{--ui-switch-width: 3rem;--ui-switch-height: 1.5rem;--ui-switch-padding: .375rem;--ui-switch-bg: var(--color-dark);--ui-switch-radius: var(--rounded-full);--ui-switch-outline-width: 3px;--ui-switch-outline-offset: 0;--ui-switch-outline-opacity: 20%;display:flex;align-items:center;flex-wrap:wrap;width:-moz-max-content;width:max-content}:where(.dark) .ui-switch{--ui-switch-bg: var(--color-body-tertiary)}.ui-switch:where(.sm){--ui-switch-width: 2.5rem;--ui-switch-height: 1.25rem}.ui-switch:where(.lg){--ui-switch-width: 4rem;--ui-switch-height: 2rem}.ui-switch :where(input){width:var(--ui-switch-width);height:var(--ui-switch-height);display:block;position:relative;border-radius:var(--ui-switch-radius);background-color:var(--ui-switch-bg);transition:var(--transition-background),outline-color var(--transition-duration),outline-offset var(--transition-duration);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:var(--ui-switch-outline-width) solid transparent;outline-offset:0;color:inherit}.ui-switch :where(input):before{width:calc(var(--ui-switch-height) - var(--ui-switch-padding));height:calc(var(--ui-switch-height) - var(--ui-switch-padding));background-color:var(--color-light);border-radius:var(--ui-switch-radius);position:absolute;left:var(--ui-switch-height);top:50%;content:"";display:block;margin-left:calc((var(--ui-switch-height) - var(--ui-switch-padding) + var(--ui-switch-padding) / 2) * -1);transition:left var(--transition-duration),var(--transition-background);transform:translateY(-50%)}.ui-switch :where(input):disabled{opacity:.8;pointer-events:none}.ui-switch :where(input):focus{outline-color:color-mix(in sRGB,var(--color-current) var(--ui-switch-outline-opacity),transparent);outline-offset:var(--ui-switch-outline-offset)}.ui-switch :where(input):checked{--color-current: var(--color-accent);--ui-switch-bg: var(--color-accent)}.ui-switch :where(input):checked:before{background-color:var(--color-light);left:100%}.ui-text{--ui-text-size: .875rem;--ui-text-size-line: .75rem;--ui-text-weight: var(--font-normal);--ui-text-weight-bold: var(--font-semibold);--ui-text-content-my: 1rem;--ui-text-content-my-lg: 2rem;font-weight:var(--ui-text-weight);font-size:var(--ui-text-size);line-height:calc(var(--ui-text-size) + var(--ui-text-size-line))}.ui-text:where(.lg){--ui-text-size: 1.125rem;--ui-text-size-line: 1rem}.ui-text :where(a){text-decoration:underline;transition:var(--transition-color);color:var(--color-accent)}@media (hover: hover) and (pointer: fine){.ui-text :where(a):hover{color:color-mix(in sRGB,var(--color-accent) 70%,transparent)}}.ui-text :where(a):focus-visible{color:color-mix(in sRGB,var(--color-accent) 70%,transparent)}.ui-text :where(b,strong){font-weight:var(--ui-text-weight-bold)}.ui-text :where(i,em){display:inline;font-style:italic}.ui-text :where(figure){margin:var(--ui-text-content-my) 0}.ui-text :where(figcaption){font-size:.875rem;font-weight:var(--font-semibold);margin-top:.25rem;line-height:1.5}.ui-text :where(img){height:auto}.ui-text :where(p){line-height:inherit}.ui-text :where(p):not(:only-child){margin:var(--ui-text-content-my) 0}.ui-text :where(p):last-child{margin-bottom:0}.ui-text :where(p):empty{line-height:var(--ui-text-content-my);margin:0}.ui-text :where(p):after{content:" "}.ui-text :where(hr){--tw-border-opacity: .1;margin:var(--ui-text-content-my-lg) 0}.ui-text :where(h1,h2,h3,h4,h5,h6){font-weight:var(--ui-text-weight-bold);font-family:var(--font-secondary);font-size:var(--ui-text-heading-size, 1rem);line-height:calc(var(--ui-text-heading-size) + .5rem);margin:var(--ui-text-content-my-lg) 0 var(--ui-text-content-my)}.ui-text :where(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}.ui-text :where(h1){--ui-text-heading-size: 2.25rem}.ui-text :where(h2){--ui-text-heading-size: 1.75rem}.ui-text :where(h3,h4){--ui-text-heading-size: 1.25rem}.ui-text :where(table){border:0;min-width:100%}.ui-text :where(table) :where(td,th){padding:1rem 1.25rem;text-align:left}.ui-text :where(table) :where(thead){font-weight:var(--ui-text-weight-bold);border-bottom:1px solid color-mix(in sRGB,var(--color-current) 7.5%,transparent)}.ui-text :where(table) :where(tbody tr):nth-of-type(even){background-color:color-mix(in sRGB,var(--color-current) 5%,transparent)}.ui-text :where(iframe){max-width:100%}.ui-text :where(iframe):where([src*="youtube.com"]){aspect-ratio:16/9;height:auto}.ui-text :where(blockquote){border-left:.3125rem solid var(--color-accent);padding:.5rem 1.25rem;margin:1rem 0;font-size:inherit}.ui-text :where(code){margin:0 .25rem;border-radius:var(--rounded-sm);padding:.25rem .375rem;font-size:.85em;color:var(--color-accent);font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background-color:#1b1f230d}:where(.dark) :is(.ui-text :where(code)){background-color:var(--color-body-secondary)}.ui-text :where(ol){margin:var(--ui-text-content-my) 0;padding:0 0 0 1rem}.ui-text :where(ol):not([type]){list-style:decimal}.ui-text :where(ol) :where(li){padding-left:.5rem}.ui-text :where(ol) :where(li):not(:last-child){margin:0 0 .5rem}.ui-text :where(ol) :where(li)::marker{color:var(--color-accent);font-weight:var(--ui-text-weight-bold)}.ui-text :where(ul){list-style-type:none!important;margin:var(--ui-text-content-my) 0;padding:0}.ui-text :where(ul) :where(li){position:relative;line-height:inherit;padding-left:1.25rem}.ui-text :where(ul) :where(li):not(:last-child){margin:0 0 .5rem}.ui-text :where(ul) :where(li):before{width:.375rem;height:.375rem;position:absolute;content:"";border:1px solid var(--color-accent);background-color:var(--color-accent);left:0;top:.6875rem;text-indent:0;border-radius:50%}.ui-text [style*=square]:where(ul) :where(li):before{border-radius:0}.ui-text [style*=circle]:where(ul) :where(li):before{border-radius:50%;background-color:transparent}.ui-title{--ui-title-font-family: var(--font-secondary);--ui-title-font-weight: var(--font-semibold);--ui-title-font-size: .875rem;--ui-title-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));--ui-title-line-height-ratio: .375rem;font-family:var(--ui-title-font-family);font-size:var(--ui-title-font-size);line-height:var(--ui-title-line-height);font-weight:var(--ui-title-font-weight)}.ui-title:where(.sm){--ui-title-font-size: .75rem}.ui-title:where(.lg){--ui-title-font-size: 1.125rem}.c-dialog{--c-dialog-py: 1.5rem;--c-dialog-px: 1.5rem;--c-dialog-width: 35rem;--c-dialog-animation-duration: var(--transition-duration);animation:var(--c-dialog-animation-duration) ease 0s backwards 1 fade-in-down;position:relative;z-index:var(--z-20);margin:auto;background-color:var(--color-body-primary);width:100%;max-width:var(--c-dialog-width);border-radius:var(--rounded-3xl);padding:var(--c-dialog-py) var(--c-dialog-px)}:where(dialog:not([open])) .c-dialog{animation:var(--c-dialog-animation-duration) ease 0s forwards 1 fade-out-up}.c-field{--c-field-gap: .5rem;display:flex;flex-direction:column;gap:var(--c-field-gap)}.js-has-pseudo [csstools-has-1a-3a-2p-30-2x-2s-2p-38-2t-2s-w-1a-2r-19-2u-2x-2t-30-2s-1m-2w-2p-37-14-1m-2x-32-3a-2p-30-2x-2s-15-w-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-2u-33-2j-2w-2x-2s-2s-2t-32-2l-15]:not(.does-not-exist):not(.does-not-exist){display:block}.validated .c-field:has(:invalid) :where(.ui-info[hidden]){display:block}.js-has-pseudo [csstools-has-1a-2r-19-2u-2x-2t-30-2s-1m-2w-2p-37-14-2j-36-2t-35-39-2x-36-2t-2s-2l-15-w-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-30-2p-2q-2t-30-15]:not(.does-not-exist):after{color:var(--color-error);content:" *"}.c-field:has([required]) :where(.ui-label):after{color:var(--color-error);content:" *"}.lib-dialog{--lib-ripple-bg: color-mix(in sRGB, var(--color-dark) calc(var(--tw-bg-opacity, .8) * 100%), transparent);--lib-dialog-py: 2rem;--lib-dialog-px: 1.5rem;--lib-dialog-animation-duration: var(--transition-duration);inset:0;z-index:var(--z-30);position:fixed;overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--lib-ripple-bg);overscroll-behavior:contain;display:flex;visibility:hidden;padding:var(--lib-dialog-py) var(--lib-dialog-px)}.lib-dialog:not([open]){animation:var(--lib-dialog-animation-duration) ease 0s forwards 1 fade-out;pointer-events:none}.lib-dialog[open]{animation:var(--lib-dialog-animation-duration) ease 0s backwards 1 fade-in}.is-lib-dialog-open .lib-dialog{visibility:visible}.is-lib-dialog-open{overflow:hidden;padding-right:var(--lib-dialog-scrollbar-width, 0)}.lib-ripple{--lib-ripple-animation-duration: 1s;--lib-ripple-bg: color-mix(in sRGB, var(--color-body) calc(var(--tw-bg-opacity, .4) * 100%), transparent);position:absolute;background:var(--lib-ripple-bg);border-radius:50%;transform:scale(0);animation-duration:var(--lib-ripple-animation-duration);pointer-events:none}
package/dist/tailwind.css CHANGED
@@ -1 +1 @@
1
- *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.col-span-12{grid-column:span 12 / span 12}.col-span-3{grid-column:span 3 / span 3}.col-span-4{grid-column:span 4 / span 4}.col-span-6{grid-column:span 6 / span 6}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.min-h-\[200vh\]{min-height:200vh}.w-24{width:6rem}.w-full{width:100%}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.rounded{border-radius:var(--rounded)}.rounded-full{border-radius:var(--rounded-full)}.bg-accent{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-accent) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-blue-100\/10{background-color:#dbeafe1a}.bg-body-primary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-body-primary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-body-secondary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-body-secondary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-body-tertiary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-body-tertiary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-current{background-color:currentColor}.bg-dark{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-dark) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-error{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-error) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-info{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-info) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-light{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-light) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-main{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-main) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-main-primary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-main-primary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-main-secondary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-main-secondary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-main-tertiary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-main-tertiary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-primary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-primary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-success{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-success) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-transparent{background-color:transparent}.bg-warning{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-warning) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-opacity-10{--tw-bg-opacity: .1}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-purple-600{--tw-gradient-from: #9333ea var(--tw-gradient-from-position);--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)}.p-4{padding:1rem}.p-md{padding:var(--spacing-md)}.p-xs{padding:var(--spacing-xs)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.font-secondary{font-family:var(--font-secondary)}.text-lg{font-size:var(--text-lg);line-height:calc(var(--text-lg) + .5rem)}.font-bold{font-weight:var(--font-bold)}.font-extrabold{font-weight:var(--font-extrabold)}.font-light{font-weight:var(--font-light)}.font-medium{font-weight:var(--font-medium)}.font-normal{font-weight:var(--font-normal)}.font-semibold{font-weight:var(--font-semibold)}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.accent-accent{accent-color:color-mix(in sRGB,var(--color-accent) 100%,transparent)}.accent-amber-600{accent-color:#d97706}.accent-current{accent-color:currentColor}.accent-dark{accent-color:color-mix(in sRGB,var(--color-dark) 100%,transparent)}.accent-error{accent-color:color-mix(in sRGB,var(--color-error) 100%,transparent)}.accent-info{accent-color:color-mix(in sRGB,var(--color-info) 100%,transparent)}.accent-light{accent-color:color-mix(in sRGB,var(--color-light) 100%,transparent)}.accent-main{accent-color:color-mix(in sRGB,var(--color-main) 100%,transparent)}.accent-primary{accent-color:color-mix(in sRGB,var(--color-primary) 100%,transparent)}.accent-success{accent-color:color-mix(in sRGB,var(--color-success) 100%,transparent)}.accent-warning{accent-color:color-mix(in sRGB,var(--color-warning) 100%,transparent)}.accent-current{--color-accent-rgb: NaN NaN NaN;--color-accent-current-rgb: var(--color-current,currentColor-current-rgb, var(--color-light-rgb));--color-accent: rgb(NaN NaN NaN);--color-accent-current: var(--color-current,currentColor-current, var(--color-light))}.accent-amber-600{--color-accent-rgb: 217 119 6;--color-accent-current-rgb: var(--color-amber-600,#d97706-current-rgb, var(--color-light-rgb));--color-accent: rgb(217 119 6);--color-accent-current: var(--color-amber-600,#d97706-current, var(--color-light))}.accent-primary{--color-accent-rgb: var(--color-primary-rgb);--color-accent-current-rgb: var(--color-primary-current-rgb, var(--color-light-rgb));--color-accent: var(--color-primary);--color-accent-current: var(--color-primary-current, var(--color-light))}.accent-accent{--color-accent-rgb: var(--color-accent-rgb);--color-accent-current-rgb: var(--color-accent-current-rgb, var(--color-light-rgb));--color-accent: var(--color-accent);--color-accent-current: var(--color-accent-current, var(--color-light))}.accent-warning{--color-accent-rgb: var(--color-warning-rgb);--color-accent-current-rgb: var(--color-warning-current-rgb, var(--color-light-rgb));--color-accent: var(--color-warning);--color-accent-current: var(--color-warning-current, var(--color-light))}.accent-error{--color-accent-rgb: var(--color-error-rgb);--color-accent-current-rgb: var(--color-error-current-rgb, var(--color-light-rgb));--color-accent: var(--color-error);--color-accent-current: var(--color-error-current, var(--color-light))}.accent-info{--color-accent-rgb: var(--color-info-rgb);--color-accent-current-rgb: var(--color-info-current-rgb, var(--color-light-rgb));--color-accent: var(--color-info);--color-accent-current: var(--color-info-current, var(--color-light))}.accent-success{--color-accent-rgb: var(--color-success-rgb);--color-accent-current-rgb: var(--color-success-current-rgb, var(--color-light-rgb));--color-accent: var(--color-success);--color-accent-current: var(--color-success-current, var(--color-light))}.accent-light{--color-accent-rgb: var(--color-light-rgb);--color-accent-current-rgb: var(--color-light-current-rgb, var(--color-light-rgb));--color-accent: var(--color-light);--color-accent-current: var(--color-light-current, var(--color-light))}.accent-dark{--color-accent-rgb: var(--color-dark-rgb);--color-accent-current-rgb: var(--color-dark-current-rgb, var(--color-light-rgb));--color-accent: var(--color-dark);--color-accent-current: var(--color-dark-current, var(--color-light))}.accent-main{--color-accent-rgb: var(--color-main-rgb);--color-accent-current-rgb: var(--color-main-current-rgb, var(--color-light-rgb));--color-accent: var(--color-main);--color-accent-current: var(--color-main-current, var(--color-light))}.text-accent{--color-body-current: color-mix(in sRGB, var(--color-accent) 100%, transparent);color:color-mix(in sRGB,var(--color-accent) calc(var(--tw-text-opacity, 1) * 100%),transparent)}.text-current{--color-body-current: currentColor;color:currentColor}.text-dark{--color-body-current: color-mix(in sRGB, var(--color-dark) 100%, transparent);color:color-mix(in sRGB,var(--color-dark) calc(var(--tw-text-opacity, 1) * 100%),transparent)}.text-error{--color-body-current: color-mix(in sRGB, var(--color-error) 100%, transparent);color:color-mix(in sRGB,var(--color-error) calc(var(--tw-text-opacity, 1) * 100%),transparent)}.text-info{--color-body-current: color-mix(in sRGB, var(--color-info) 100%, transparent);color:color-mix(in sRGB,var(--color-info) calc(var(--tw-text-opacity, 1) * 100%),transparent)}.text-light{--color-body-current: color-mix(in sRGB, var(--color-light) 100%, transparent);color:color-mix(in sRGB,var(--color-light) calc(var(--tw-text-opacity, 1) * 100%),transparent)}.text-main{--color-body-current: color-mix(in sRGB, var(--color-main) 100%, transparent);color:color-mix(in sRGB,var(--color-main) calc(var(--tw-text-opacity, 1) * 100%),transparent)}.text-primary{--color-body-current: color-mix(in sRGB, var(--color-primary) 100%, transparent);color:color-mix(in sRGB,var(--color-primary) calc(var(--tw-text-opacity, 1) * 100%),transparent)}.text-primary\/50{--color-body-current: color-mix(in sRGB, var(--color-primary) 50%, transparent);color:color-mix(in sRGB,var(--color-primary) 50%,transparent)}.text-success{--color-body-current: color-mix(in sRGB, var(--color-success) 100%, transparent);color:color-mix(in sRGB,var(--color-success) calc(var(--tw-text-opacity, 1) * 100%),transparent)}.text-warning{--color-body-current: color-mix(in sRGB, var(--color-warning) 100%, transparent);color:color-mix(in sRGB,var(--color-warning) calc(var(--tw-text-opacity, 1) * 100%),transparent)}.animation-ripple{animation-name:ripple}.sq-4{width:1rem;height:1rem}.container{margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding);max-width:var(--container-width)}.container:where(.container-sm){--container-width: var(--container-width-sm)}:where(.row){--gx: 0rem;--gy: 0rem;display:flex;margin:calc(var(--gy) / -2) calc(var(--gx) / -2) calc(var(--gy) / -2) calc(var(--gx) / -2)}:where(.row)>*{padding:calc(var(--gy) / 2) calc(var(--gx) / 2) calc(var(--gy) / 2) calc(var(--gx) / 2)}:where(.col){display:flex;flex-direction:column}.focus\:\!outline-purple-600:focus{outline-color:#9333ea!important}.focus\:\!outline-purple-600\/30:focus{outline-color:#9333ea4d!important}:is(.dark .dark\:bg-dark){--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-dark) calc(var(--tw-bg-opacity) * 100%),transparent)}:is(.dark .dark\:text-light){--color-body-current: color-mix(in sRGB, var(--color-light) 100%, transparent);color:color-mix(in sRGB,var(--color-light) calc(var(--tw-text-opacity, 1) * 100%),transparent)}
1
+ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.col-span-12{grid-column:span 12 / span 12}.col-span-3{grid-column:span 3 / span 3}.col-span-4{grid-column:span 4 / span 4}.col-span-6{grid-column:span 6 / span 6}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.min-h-\[200vh\]{min-height:200vh}.w-24{width:6rem}.w-full{width:100%}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.rounded{border-radius:var(--rounded)}.rounded-full{border-radius:var(--rounded-full)}.bg-accent{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-accent) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-blue-100\/10{background-color:#dbeafe1a}.bg-body-primary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-body-primary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-body-secondary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-body-secondary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-body-tertiary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-body-tertiary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-current{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-current) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-dark{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-dark) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-error{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-error) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-info{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-info) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-light{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-light) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-main{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-main) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-main-primary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-main-primary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-main-secondary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-main-secondary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-main-tertiary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-main-tertiary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-primary{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-primary) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-success{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-success) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-transparent{background-color:transparent}.bg-warning{--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-warning) calc(var(--tw-bg-opacity) * 100%),transparent)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-opacity-10{--tw-bg-opacity: .1}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-purple-600{--tw-gradient-from: #9333ea var(--tw-gradient-from-position);--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)}.p-4{padding:1rem}.p-md{padding:var(--spacing-md)}.p-xs{padding:var(--spacing-xs)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.font-secondary{font-family:var(--font-secondary)}.text-lg{font-size:var(--text-lg);line-height:calc(var(--text-lg) + .5rem)}.font-bold{font-weight:var(--font-bold)}.font-extrabold{font-weight:var(--font-extrabold)}.font-light{font-weight:var(--font-light)}.font-medium{font-weight:var(--font-medium)}.font-normal{font-weight:var(--font-normal)}.font-semibold{font-weight:var(--font-semibold)}.uppercase{text-transform:uppercase}.text-opacity-60{--tw-text-opacity: .6}.underline{text-decoration-line:underline}.accent-accent{accent-color:var(--color-accent)}.accent-amber-600{--color-accent: #d97706;accent-color:#d97706}.accent-body{--color-accent: var(--color-body);--color-accent-fg: var(--color-body-fg, var(--color-light));accent-color:var(--color-accent)}.accent-current{--color-accent: var(--color-current);--color-accent-fg: var(--color-current-fg, var(--color-light));accent-color:var(--color-accent)}.accent-dark{--color-accent: var(--color-dark);--color-accent-fg: var(--color-dark-fg, var(--color-light));accent-color:var(--color-accent)}.accent-error{--color-accent: var(--color-error);--color-accent-fg: var(--color-error-fg, var(--color-light));accent-color:var(--color-accent)}.accent-info{--color-accent: var(--color-info);--color-accent-fg: var(--color-info-fg, var(--color-light));accent-color:var(--color-accent)}.accent-light{--color-accent: var(--color-light);--color-accent-fg: var(--color-light-fg, var(--color-light));accent-color:var(--color-accent)}.accent-main{--color-accent: var(--color-main);--color-accent-fg: var(--color-main-fg, var(--color-light));accent-color:var(--color-accent)}.accent-primary{--color-accent: var(--color-primary);--color-accent-fg: var(--color-primary-fg, var(--color-light));accent-color:var(--color-accent)}.accent-success{--color-accent: var(--color-success);--color-accent-fg: var(--color-success-fg, var(--color-light));accent-color:var(--color-accent)}.accent-warning{--color-accent: var(--color-warning);--color-accent-fg: var(--color-warning-fg, var(--color-light));accent-color:var(--color-accent)}.text-accent{--color-current: color-mix(in sRGB, var(--color-accent) calc(var(--tw-text-opacity, 1) * 100%), transparent);color:var(--color-current)}.text-current{color:color-mix(in sRGB,var(--color-current) 100%,transparent)}.text-current-rgb{color:rgb(var(--color-current-rgb) / 1)}.text-dark{--color-current: color-mix(in sRGB, var(--color-dark) calc(var(--tw-text-opacity, 1) * 100%), transparent);color:var(--color-current)}.text-error{--color-current: color-mix(in sRGB, var(--color-error) calc(var(--tw-text-opacity, 1) * 100%), transparent);color:var(--color-current)}.text-info{--color-current: color-mix(in sRGB, var(--color-info) calc(var(--tw-text-opacity, 1) * 100%), transparent);color:var(--color-current)}.text-light{--color-current: color-mix(in sRGB, var(--color-light) calc(var(--tw-text-opacity, 1) * 100%), transparent);color:var(--color-current)}.text-main{--color-current: color-mix(in sRGB, var(--color-main) calc(var(--tw-text-opacity, 1) * 100%), transparent);color:var(--color-current)}.text-primary{--color-current: color-mix(in sRGB, var(--color-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent);color:var(--color-current)}.text-primary-rgb{--color-current-rgb: var(--color-primary-rgb);--color-current: rgb(var(--color-primary-rgb) / var(--tw-text-opacity, 1));color:var(--color-current)}.text-primary-rgb\/50{--color-current-rgb: var(--color-primary-rgb);--color-current: rgb(var(--color-primary-rgb) / .5);color:var(--color-current)}.text-primary\/50{--color-current: color-mix(in sRGB, var(--color-primary) 50%, transparent);color:var(--color-current)}.text-red-400\/50{--color-current: rgb(248 113 113 / .5);color:#f8717180}.text-success{--color-current: color-mix(in sRGB, var(--color-success) calc(var(--tw-text-opacity, 1) * 100%), transparent);color:var(--color-current)}.text-warning{--color-current: color-mix(in sRGB, var(--color-warning) calc(var(--tw-text-opacity, 1) * 100%), transparent);color:var(--color-current)}.animation-ripple{animation-name:ripple}.sq-4{width:1rem;height:1rem}.container{margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding);max-width:var(--container-width)}.container:where(.container-sm){--container-width: var(--container-width-sm)}:where(.row){--gx: 0rem;--gy: 0rem;display:flex;margin:calc(var(--gy) / -2) calc(var(--gx) / -2) calc(var(--gy) / -2) calc(var(--gx) / -2)}:where(.row)>*{padding:calc(var(--gy) / 2) calc(var(--gx) / 2) calc(var(--gy) / 2) calc(var(--gx) / 2)}:where(.col){display:flex;flex-direction:column}.focus\:\!outline-purple-600:focus{outline-color:#9333ea!important}.focus\:\!outline-purple-600\/30:focus{outline-color:#9333ea4d!important}:is(.dark .dark\:bg-dark){--tw-bg-opacity: 1;background-color:color-mix(in sRGB,var(--color-dark) calc(var(--tw-bg-opacity) * 100%),transparent)}:is(.dark .dark\:text-light){--color-current: color-mix(in sRGB, var(--color-light) calc(var(--tw-text-opacity, 1) * 100%), transparent);color:var(--color-current)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "winduum",
3
- "version": "0.2.3-next.1",
3
+ "version": "0.2.3-next.3",
4
4
  "type": "module",
5
5
  "main": "utils/tailwind.cjs",
6
6
  "module": "utils/tailwind.js",
package/src/base/default.css CHANGED
@@ -13,11 +13,11 @@
13
13
  stroke-width: 1.5;
14
14
  }
15
15
 
16
- :where(svg:not[width]) {
16
+ :where(svg:not([width])) {
17
17
  width: 1.25em;
18
18
  }
19
19
 
20
- :where(svg:not[height]) {
20
+ :where(svg:not([height])) {
21
21
  height: 1.25em;
22
22
  }
23
23
 
@@ -27,7 +27,7 @@
27
27
 
28
28
  :where(hr) {
29
29
  display: block;
30
- border-top: 1px solid color-mix(in sRGB, var(--color-accent-current) calc(var(--tw-border-opacity, 0.15) * 100%), transparent);
30
+ border-top: 1px solid color-mix(in sRGB, var(--color-current) calc(var(--tw-border-opacity, 0.15) * 100%), transparent);
31
31
  border-radius: var(--rounded);
32
32
  }
33
33
 
package/src/base/theme/dark.css CHANGED
@@ -1,4 +1,4 @@
1
1
  :root.dark {
2
- --color-main: rgb(var(--color-main-rgb));
3
- --color-body: rgb(var(--color-body-rgb));
2
+ --color-main: rgb(var(--color-body-rgb));
3
+ --color-body: rgb(var(--color-main-rgb));
4
4
  }
package/src/base/theme/default-rgb.css CHANGED
@@ -1,16 +1,18 @@
1
1
  :root {
2
+ --color-current-rgb: var(--color-main-rgb);
3
+ --color-current-fg-rgb: var(--color-main-fg-rgb);
4
+ --color-accent-rgb: var(--color-primary-rgb);
5
+ --color-accent-fg-rgb: var(--color-primary-fg-rgb);
2
6
  --color-primary-rgb: 3 138 255;
3
- --color-primary-current-rgb: var(--color-light-rgb);
7
+ --color-primary-fg-rgb: var(--color-light-rgb);
4
8
  --color-main-rgb: 17 19 21;
5
- --color-main-current-rgb: var(--color-body-rgb);
9
+ --color-main-fg-rgb: var(--color-body-rgb);
6
10
  --color-body-rgb: 255 255 255;
7
- --color-body-current-rgb: var(--color-main-rgb);
8
- --color-accent-rgb: var(--color-primary-rgb);
9
- --color-accent-current-rgb: var(--color-light-rgb);
11
+ --color-body-fg-rgb: var(--color-main-rgb);
10
12
  --color-light-rgb: 255 255 255;
11
- --color-light-current-rgb: var(--color-dark-rgb);
13
+ --color-light-fg-rgb: var(--color-dark-rgb);
12
14
  --color-dark-rgb: 17 19 21;
13
- --color-dark-current-rgb: var(--color-light-rgb);
15
+ --color-dark-fg-rgb: var(--color-light-rgb);
14
16
  --color-success-rgb: 33 154 67;
15
17
  --color-error-rgb: 254 50 75;
16
18
  --color-warning-rgb: 254 179 53;
package/src/base/theme/default.css CHANGED
@@ -1,24 +1,24 @@
1
1
  :root {
2
+ --color-current: rgb(var(--color-current-rgb));
3
+ --color-current-fg: rgb(var(--color-current-fg-rgb));
4
+ --color-accent: rgb(var(--color-accent-rgb));
5
+ --color-accent-fg: rgb(var(--color-accent-fg-rgb));
2
6
  --color-primary: rgb(var(--color-primary-rgb));
3
- --color-primary-current: var(--color-light);
7
+ --color-primary-fg: rgb(var(--color-primary-fg-rgb));
4
8
  --color-main: var(--color-main-primary);
5
- --color-main-current: var(--color-body);
6
- --color-main-mix: var(--color-body);
9
+ --color-main-fg: rgb(var(--color-main-fg-rgb));
7
10
  --color-main-primary: rgb(var(--color-main-rgb));
8
- --color-main-secondary: color-mix(in sRGB, var(--color-main) 75%, var(--color-main-mix));
9
- --color-main-tertiary: color-mix(in sRGB, var(--color-main) 50%, var(--color-main-mix));
11
+ --color-main-secondary: color-mix(in sRGB, var(--color-main) 75%, var(--color-main-fg));
12
+ --color-main-tertiary: color-mix(in sRGB, var(--color-main) 50%, var(--color-main-fg));
10
13
  --color-body: var(--color-body-primary);
11
- --color-body-current: var(--color-main);
12
- --color-body-mix: var(--color-main);
14
+ --color-body-fg: rgb(var(--color-body-fg-rgb));
13
15
  --color-body-primary: rgb(var(--color-body-rgb));
14
- --color-body-secondary: color-mix(in sRGB, var(--color-body) 95%, var(--color-body-mix));
15
- --color-body-tertiary: color-mix(in sRGB, var(--color-body) 90%, var(--color-body-mix));
16
- --color-accent: var(--color-primary);
17
- --color-accent-current: var(--color-primary-current);
16
+ --color-body-secondary: color-mix(in sRGB, var(--color-body) 95%, var(--color-body-fg));
17
+ --color-body-tertiary: color-mix(in sRGB, var(--color-body) 90%, var(--color-body-fg));
18
18
  --color-light: rgb(var(--color-light-rgb));
19
- --color-light-current: var(--color-dark);
19
+ --color-light-fg: rgb(var(--color-light-fg-rgb));
20
20
  --color-dark: rgb(var(--color-dark-rgb));
21
- --color-dark-current: var(--color-light);
21
+ --color-dark-fg: rgb(var(--color-dark-fg-rgb));
22
22
  --color-success: rgb(var(--color-success-rgb));
23
23
  --color-error: rgb(var(--color-error-rgb));
24
24
  --color-warning: rgb(var(--color-warning-rgb));
package/src/ui/badge/default-rgb.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .ui-badge {
2
- --color-body-current-rgb: var(--color-accent-current-rgb);
2
+ --color-current-rgb: var(--color-accent-fg-rgb);
3
3
  --ui-badge-bg: rgb(var(--color-accent-rgb) / var(--ui-badge-bg-opacity));
4
- --ui-badge-color: rgb(var(--color-body-current-rgb) / var(--ui-badge-color-opacity));
4
+ --ui-badge-color: rgb(var(--color-current-rgb) / var(--ui-badge-color-opacity));
5
5
 
6
6
  &:where(.bordered, .muted) {
7
- --color-body-current-rgb: var(--color-accent-rgb);
7
+ --color-current-rgb: var(--color-accent-rgb);
8
8
  }
9
9
  }
package/src/ui/badge/default.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ui-badge {
2
- --color-body-current: var(--color-accent-current);
2
+ --color-current: var(--color-accent-fg);
3
3
  --ui-badge-width: max-content;
4
4
  --ui-badge-height: 1.5rem;
5
5
  --ui-badge-py: 0;
@@ -10,7 +10,7 @@
10
10
  --ui-badge-bg: color-mix(in sRGB, var(--color-accent) var(--ui-badge-bg-opacity), var(--ui-badge-bg-mix));
11
11
  --ui-badge-bg-mix: transparent;
12
12
  --ui-badge-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);
13
- --ui-badge-color: color-mix(in sRGB, var(--color-body-current) var(--ui-badge-color-opacity), transparent);
13
+ --ui-badge-color: color-mix(in sRGB, var(--color-current) var(--ui-badge-color-opacity), transparent);
14
14
  --ui-badge-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);
15
15
  --ui-badge-gap: 0.25rem;
16
16
 
@@ -34,7 +34,7 @@
34
34
  transition: var(--transition-opacity);
35
35
 
36
36
  &:where(.bordered, .muted) {
37
- --color-body-current: var(--color-accent);
37
+ --color-current: var(--color-accent);
38
38
  --ui-badge-bg-opacity: 0%;
39
39
  }
40
40
  }
package/src/ui/btn/default-rgb.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .ui-btn {
2
- --color-body-current-rgb: var(--color-accent-current-rgb);
2
+ --color-current-rgb: var(--color-accent-fg-rgb);
3
3
  --ui-btn-bg: rgb(var(--color-accent-rgb) / var(--ui-btn-bg-opacity));
4
- --ui-btn-color: rgb(var(--color-body-current-rgb) / var(--ui-btn-color-opacity));
4
+ --ui-btn-color: rgb(var(--color-current-rgb) / var(--ui-btn-color-opacity));
5
5
 
6
6
  &:where(.bordered, .muted, .ghosted) {
7
- --color-body-current-rgb: var(--color-accent-rgb);
7
+ --color-current-rgb: var(--color-accent-rgb);
8
8
  }
9
9
  }
package/src/ui/btn/default.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ui-btn {
2
- --color-body-current: var(--color-accent-current);
2
+ --color-current: var(--color-accent-fg);
3
3
  --ui-btn-width: max-content;
4
4
  --ui-btn-height: 2.25rem;
5
5
  --ui-btn-gap: 0.375rem;
@@ -12,13 +12,13 @@
12
12
  --ui-btn-bg: color-mix(in sRGB, var(--color-accent) var(--ui-btn-bg-opacity), var(--ui-btn-bg-mix));
13
13
  --ui-btn-bg-mix: transparent;
14
14
  --ui-btn-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);
15
- --ui-btn-color: color-mix(in sRGB, var(--color-body-current) var(--ui-btn-color-opacity), transparent);
15
+ --ui-btn-color: color-mix(in sRGB, var(--color-current) var(--ui-btn-color-opacity), transparent);
16
16
  --ui-btn-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);
17
17
  --ui-btn-outline-width: 2px;
18
- --ui-btn-hover-color: var(--color-body-current);
18
+ --ui-btn-hover-color: var(--color-current);
19
19
  --ui-btn-hover-bg-mix: black;
20
20
  --ui-btn-hover-bg-opacity: 80%;
21
- --ui-btn-active-color: var(--color-body-current);
21
+ --ui-btn-active-color: var(--color-current);
22
22
  --ui-btn-active-bg-mix: black;
23
23
  --ui-btn-active-bg-opacity: 90%;
24
24
  --ui-btn-focus-outline-color-mix: transparent;
@@ -26,7 +26,6 @@
26
26
  --ui-btn-focus-outline-offset: 2px;
27
27
  --ui-btn-disabled-opacity: 70%;
28
28
 
29
- max-width: var(--ui-btn-width);
30
29
  width: var(--ui-btn-width);
31
30
  height: var(--ui-btn-height);
32
31
  padding: var(--ui-btn-py) var(--ui-btn-px);
@@ -56,11 +55,11 @@
56
55
  outline-offset: 0;
57
56
 
58
57
  &:where([class*="accent-base"]) {
59
- --ui-btn-hover-bg-mix: var(--color-main-mix);
58
+ --ui-btn-hover-bg-mix: var(--color-main-fg);
60
59
  }
61
60
 
62
61
  &:where([class*="accent-body"]) {
63
- --ui-btn-hover-bg-mix: var(--color-body-mix);
62
+ --ui-btn-hover-bg-mix: var(--color-body-fg);
64
63
  }
65
64
 
66
65
  & :where(svg) {
@@ -74,7 +73,7 @@
74
73
  --ui-btn-active-bg-opacity: 20%;
75
74
  --ui-btn-focus-outline-offset: -2px;
76
75
  --ui-btn-bg-opacity: 0%;
77
- --color-body-current: var(--color-accent);
76
+ --color-current: var(--color-accent);
78
77
  }
79
78
 
80
79
  &:is([href], button, [role="button"]) {
package/src/ui/btn/gradient-bordered-rgb.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :is(.ui-btn.gradient-bordered) {
2
- --color-body-current-rgb: var(--color-body-current-rgb);
2
+ --color-current-rgb: var(--color-current-rgb);
3
3
 
4
4
  &::before {
5
5
  background-color: rgb(var(--color-body-rgb) / calc(100% - var(--ui-btn-bg-opacity)));
package/src/ui/btn/gradient-bordered.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --ui-btn-active-bg-opacity: 20%;
7
7
  --ui-btn-focus-outline-offset: 0;
8
8
  --ui-btn-bg-opacity: 0%;
9
- --color-body-current: var(--color-main);
9
+ --color-current: var(--color-main);
10
10
 
11
11
  &::before {
12
12
  content: "";
package/src/ui/btn/loading.css CHANGED
@@ -14,7 +14,7 @@
14
14
  width: var(--ui-btn-loading-width);
15
15
  height: var(--ui-btn-loading-width);
16
16
  content: "";
17
- border: var(--ui-btn-loading-border-width) solid var(--color-body-current);
17
+ border: var(--ui-btn-loading-border-width) solid var(--color-current);
18
18
  border-right-color: transparent;
19
19
  border-radius: 50%;
20
20
  animation: spin 0.45s infinite linear;
package/src/ui/btn/raised.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --ui-btn-border-width: 2px;
3
3
  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.85) * 100%);
4
4
 
5
- border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), var(--color-body-current));
5
+ border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), var(--color-current));
6
6
  padding-left: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
7
7
  padding-right: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
8
8
  }
package/src/ui/check-rgb.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .ui-check {
2
2
  --ui-check-bg: var(--color-body-rgb);
3
- --ui-check-border-color: var(--color-body-current-rgb);
3
+ --ui-check-border-color: var(--color-current-rgb);
4
4
  --ui-check-checked-bg: var(--color-accent-rgb);
5
5
 
6
6
  & :where(input) {
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  &:disabled {
17
- --ui-check-bg: var(--color-body-current-rgb);
17
+ --ui-check-bg: var(--color-current-rgb);
18
18
  }
19
19
 
20
20
  &:checked {
package/src/ui/check.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --ui-check-bg: transparent;
6
6
  --ui-check-bg-mix: transparent;
7
7
  --ui-check-bg-opacity: calc(var(--tw-bg-opacity, 0.1) * 100%);
8
- --ui-check-border-color: var(--color-body-current);
8
+ --ui-check-border-color: var(--color-current);
9
9
  --ui-check-border-mix: transparent;
10
10
  --ui-check-border-opacity: calc(var(--tw-border-opacity, 0.2) * 100%);
11
11
  --ui-check-border-width: 1px;
@@ -22,9 +22,9 @@
22
22
  display: flex;
23
23
  align-items: center;
24
24
  gap: 0 var(--ui-check-gap);
25
- flex-wrap: wrap;
26
25
  width: fit-content;
27
26
  font-size: var(--ui-check-font-size);
27
+ text-wrap: balance;
28
28
 
29
29
  &:has([type="radio"]) {
30
30
  --ui-check-icon: var(--icon-radio);
@@ -59,13 +59,14 @@
59
59
  outline-offset var(--transition-duration);
60
60
  font-size: var(--ui-check-icon-font-size);
61
61
  cursor: pointer;
62
+ flex-shrink: 0;
62
63
 
63
64
  &::before {
64
65
  line-height: var(--ui-check-icon-font-size);
65
66
  text-indent: 0;
66
67
  display: block;
67
68
  transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
68
- color: var(--color-light);
69
+ color: var(--color-accent-fg);
69
70
  content: "";
70
71
  background-color: currentColor;
71
72
  mask: var(--ui-check-icon);
@@ -102,7 +103,7 @@
102
103
 
103
104
  &:disabled {
104
105
  --ui-check-bg-opacity: 15%;
105
- --ui-check-bg: var(--color-body-current);
106
+ --ui-check-bg: var(--color-current);
106
107
 
107
108
  cursor: not-allowed;
108
109
  opacity: var(--ui-check-disabled-opacity);
package/src/ui/control/default-rgb.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ui-control {
2
- --ui-control-border-color: var(--color-body-current-rgb);
2
+ --ui-control-border-color: var(--color-current-rgb);
3
3
 
4
4
  & :where(input, textarea, select) {
5
5
  border: var(--ui-control-border-width) solid rgb(var(--ui-control-border-color) / var(--ui-control-border-opacity));
package/src/ui/control/default.css CHANGED
@@ -14,7 +14,7 @@
14
14
  --ui-control-font-size: 0.875rem;
15
15
  --ui-control-font-weight: var(--font-medium);
16
16
  --ui-control-border-width: 1px;
17
- --ui-control-border-color: var(--color-body-current);
17
+ --ui-control-border-color: var(--color-current);
18
18
  --ui-control-border-mix: transparent;
19
19
  --ui-control-border-opacity: 15%;
20
20
  --ui-control-border-radius: var(--rounded);
@@ -59,7 +59,7 @@
59
59
 
60
60
  &:disabled {
61
61
  cursor: not-allowed;
62
- background-color: color-mix(in sRGB, var(--color-body-current) var(--ui-control-disabled-opacity), var(--ui-control-bg));
62
+ background-color: color-mix(in sRGB, var(--color-current) var(--ui-control-disabled-opacity), var(--ui-control-bg));
63
63
  }
64
64
 
65
65
  &:required ~ label {
package/src/ui/control/icon.css CHANGED
@@ -27,7 +27,7 @@
27
27
  & :where(svg) {
28
28
  font-size: var(--ui-control-icon-font-size);
29
29
  width: 1em;
30
- height: var(--ui-control-height);
30
+ height: 1em;
31
31
  }
32
32
 
33
33
  & :where([class^="icon-"]) {
@@ -41,6 +41,7 @@
41
41
  align-items: center;
42
42
  gap: var(--ui-control-icon-gap);
43
43
  transition: var(--transition-opacity);
44
+ height: var(--ui-control-height);
44
45
 
45
46
  &:where(.icon-l) {
46
47
  left: var(--ui-control-icon-inset-x);
package/src/ui/link/default.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ui-link {
2
- --color-accent: var(--color-body-current);
2
+ --color-accent: var(--color-current);
3
3
  --ui-link-font-size: 0.875rem;
4
4
  --ui-link-font-weight: var(--font-medium);
5
5
  --ui-link-letter-spacing: 0;
package/src/ui/switch-rgb.css CHANGED
@@ -5,7 +5,7 @@
5
5
  }
6
6
 
7
7
  &:checked {
8
- --color-body-current-rgb: var(--color-accent-rgb);
8
+ --color-current-rgb: var(--color-accent-rgb);
9
9
  }
10
10
  }
11
11
  }
package/src/ui/switch.css CHANGED
@@ -65,12 +65,12 @@
65
65
  }
66
66
 
67
67
  &:focus {
68
- outline-color: color-mix(in sRGB, var(--color-body-current) var(--ui-switch-outline-opacity), transparent);
68
+ outline-color: color-mix(in sRGB, var(--color-current) var(--ui-switch-outline-opacity), transparent);
69
69
  outline-offset: var(--ui-switch-outline-offset);
70
70
  }
71
71
 
72
72
  &:checked {
73
- --color-body-current: var(--color-accent);
73
+ --color-current: var(--color-accent);
74
74
  --ui-switch-bg: var(--color-accent);
75
75
 
76
76
  &::before {
package/src/ui/text-rgb.css CHANGED
@@ -1,12 +1,12 @@
1
1
  .ui-text {
2
2
  & :where(table) {
3
3
  & :where(thead) {
4
- border-bottom: 1px solid rgb(var(--color-body-current-rgb) / 7.5%);
4
+ border-bottom: 1px solid rgb(var(--color-current-rgb) / 7.5%);
5
5
  }
6
6
 
7
7
  & :where(tbody tr) {
8
8
  &:nth-of-type(even) {
9
- background-color: rgb(var(--color-body-current-rgb) / 5%);
9
+ background-color: rgb(var(--color-current-rgb) / 5%);
10
10
  }
11
11
  }
12
12
  }
package/src/ui/text.css CHANGED
@@ -117,12 +117,12 @@
117
117
 
118
118
  & :where(thead) {
119
119
  font-weight: var(--ui-text-weight-bold);
120
- border-bottom: 1px solid color-mix(in sRGB, var(--color-body-current) 7.5%, transparent);
120
+ border-bottom: 1px solid color-mix(in sRGB, var(--color-current) 7.5%, transparent);
121
121
  }
122
122
 
123
123
  & :where(tbody tr) {
124
124
  &:nth-of-type(even) {
125
- background-color: color-mix(in sRGB, var(--color-body-current) 5%, transparent);
125
+ background-color: color-mix(in sRGB, var(--color-current) 5%, transparent);
126
126
  }
127
127
  }
128
128
  }
package/utils/tailwind.cjs CHANGED
@@ -6,7 +6,6 @@ var plugin = require('tailwindcss/plugin');
6
6
  var flattenColorPalette = require('tailwindcss/src/util/flattenColorPalette');
7
7
  var toColorValue = require('tailwindcss/src/util/toColorValue');
8
8
  var color = require('tailwindcss/src/util/color');
9
- var twColors = require('tailwindcss/colors');
10
9
  var lodash = require('lodash');
11
10
 
12
11
  function withAlphaVariable ({ color: color$1, property, variable }) {
@@ -43,7 +42,7 @@ function withAlphaVariable ({ color: color$1, property, variable }) {
43
42
 
44
43
  const defaultConfig = {
45
44
  colors: [
46
- 'primary', 'accent',
45
+ 'primary', 'accent', 'current',
47
46
  'warning', 'error', 'info', 'success', 'light', 'dark',
48
47
  'main', 'main-primary', 'main-secondary', 'main-tertiary',
49
48
  'body', 'body-primary', 'body-secondary', 'body-tertiary'
@@ -68,37 +67,13 @@ const defaultConfig = {
68
67
  '2xxl': '158em'
69
68
  },
70
69
  settings: {
71
- rgbFallback: true
70
+ rgb: true
72
71
  }
73
72
  };
74
73
 
75
- const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
76
- .substring(1).match(/.{2}/g)
77
- .map(x => parseInt(x, 16));
78
-
79
- const getTailwindColors = (twColors) => {
80
- const accentColors = [];
81
-
82
- Object.keys(twColors).forEach(color => {
83
- if (color.match(/(lightBlue|warmGray|trueGray|coolGray|blueGray)/)) {
84
- return
85
- }
86
-
87
- if (typeof twColors[color] === 'object') {
88
- Object.keys(twColors[color]).forEach(variant => {
89
- accentColors.push([`${color.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}-${variant}`, twColors[color][variant]]);
90
- });
91
- } else {
92
- accentColors.push([color, twColors[color]]);
93
- }
94
- });
95
-
96
- return accentColors
97
- };
98
-
99
74
  const tailwindColors = (colors = []) => {
100
75
  colors.forEach(name => {
101
- if (defaultConfig.settings.rgbFallback) {
76
+ if (defaultConfig.settings.rgb) {
102
77
  colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`;
103
78
  }
104
79
 
@@ -108,38 +83,6 @@ const tailwindColors = (colors = []) => {
108
83
  return colors
109
84
  };
110
85
 
111
- const tailwindColorsAccent = (colors = []) => {
112
- const result = {};
113
-
114
- colors.forEach(color => {
115
- if (Array.isArray(color)) {
116
- const rgb = hexToRgb(color[1]);
117
-
118
- result[`.accent-${color[0]}`] = Object.assign(defaultConfig.settings.rgbFallback
119
- ? {
120
- '--color-accent-rgb': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
121
- '--color-accent-current-rgb': `var(--color-${color}-current-rgb, var(--color-light-rgb))`
122
- }
123
- : {}, {
124
- '--color-accent': `rgb(${rgb[0]} ${rgb[1]} ${rgb[2]})`,
125
- '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
126
- });
127
- } else {
128
- result[`.accent-${color}`] = Object.assign(defaultConfig.settings.rgbFallback
129
- ? {
130
- '--color-accent-rgb': `var(--color-${color}-rgb)`,
131
- '--color-accent-current-rgb': `var(--color-${color}-current-rgb, var(--color-light-rgb))`
132
- }
133
- : {}, {
134
- '--color-accent': `var(--color-${color})`,
135
- '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
136
- });
137
- }
138
- });
139
-
140
- return result
141
- };
142
-
143
86
  const tailwindVariables = (type, variables = [], values = {}) => {
144
87
  variables.forEach(name => {
145
88
  values[name] = `var(--${type}-${name})`;
@@ -172,35 +115,98 @@ const createPlugin = (userConfig = {}) => {
172
115
  userConfig = lodash.merge(defaultConfig, userConfig);
173
116
 
174
117
  return plugin(({ addUtilities, matchUtilities, theme, variants, e, corePlugins }) => {
175
- addUtilities(Object.assign(tailwindColorsAccent(getTailwindColors(twColors)), tailwindColorsAccent(userConfig.colors)));
176
118
  matchUtilities(
177
119
  {
178
- text: (value, extra) => {
120
+ accent: (value) => {
179
121
  const matchValue = toColorValue(value).match(/var\((.*?)\)/);
180
122
  const fallbackRgb = matchValue && matchValue[0].includes('-rgb');
181
123
 
182
124
  const colorProperties = {};
183
125
 
184
126
  if (fallbackRgb) {
185
- colorProperties['--color-body-current-rgb'] = matchValue[0];
127
+ colorProperties['--color-accent-rgb'] = matchValue[0];
186
128
  }
187
129
 
130
+ if ((matchValue && matchValue[0] === 'var(--color-accent)') || (matchValue && matchValue[0] === 'var(--color-accent-rgb)')) {
131
+ return {
132
+ 'accent-color': matchValue && toColorValue(value).includes('calc(1 * 100%)') ? matchValue[0] : toColorValue(value)
133
+ }
134
+ }
135
+
136
+ if (matchValue) {
137
+ if (fallbackRgb) {
138
+ colorProperties['--color-accent-fg-rgb'] = `var(${matchValue[1].replace('-rgb', '-fg-rgb')})`;
139
+ }
140
+
141
+ if (toColorValue(value).includes('calc(1 * 100%)') || toColorValue(value).includes(' / 1')) {
142
+ return {
143
+ ...colorProperties,
144
+ '--color-accent': fallbackRgb ? toColorValue(value) : matchValue[0],
145
+ '--color-accent-fg': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-fg-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-fg, var(--color-light))`,
146
+ 'accent-color': 'var(--color-accent)'
147
+ }
148
+ } else {
149
+ return {
150
+ ...colorProperties,
151
+ '--color-accent': toColorValue(value),
152
+ '--color-accent-fg': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-fg-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-fg, var(--color-light))`,
153
+ 'accent-color': 'var(--color-accent)'
154
+ }
155
+ }
156
+ }
157
+
158
+ return {
159
+ '--color-accent': toColorValue(value),
160
+ 'accent-color': toColorValue(value)
161
+ }
162
+ }
163
+ },
164
+ { values: flattenColorPalette(theme('accentColor')), type: ['color', 'any'] }
165
+ );
166
+ matchUtilities(
167
+ {
168
+ text: (value) => {
169
+ const matchValue = toColorValue(value).match(/var\((.*?)\)/);
170
+ const fallbackRgb = matchValue && matchValue[0].includes('-rgb');
171
+
172
+ const colorProperties = {};
173
+
174
+ if (fallbackRgb) {
175
+ colorProperties['--color-current-rgb'] = matchValue[0];
176
+ }
177
+
178
+ if ((matchValue && matchValue[0] === 'var(--color-current)') || (matchValue && matchValue[0] === 'var(--color-current-rgb)')) {
179
+ return {
180
+ color: toColorValue(value)
181
+ }
182
+ }
183
+
184
+ const color = matchValue
185
+ ? { color: 'var(--color-current)' }
186
+ : {
187
+ ...withAlphaVariable({
188
+ color: value,
189
+ property: 'color',
190
+ variable: '--tw-text-opacity'
191
+ })
192
+ };
193
+
188
194
  if (!corePlugins('textOpacity')) {
189
195
  return {
190
196
  ...colorProperties,
191
- '--color-body-current': toColorValue(value),
192
- color: toColorValue(value)
197
+ '--color-current': toColorValue(value),
198
+ ...color
193
199
  }
194
200
  }
195
201
 
196
202
  return {
197
203
  ...colorProperties,
198
- '--color-body-current': toColorValue(value),
199
204
  ...withAlphaVariable({
200
205
  color: value,
201
- property: 'color',
206
+ property: '--color-current',
202
207
  variable: '--tw-text-opacity'
203
- })
208
+ }),
209
+ ...color
204
210
  }
205
211
  }
206
212
  },
@@ -221,9 +227,11 @@ const createPlugin = (userConfig = {}) => {
221
227
  corePlugins: {
222
228
  preflight: false,
223
229
  container: false,
224
- textColor: false
230
+ textColor: false,
231
+ accentColor: false
225
232
  },
226
233
  theme: {
234
+ accentOpacity: ({ theme }) => theme('opacity'),
227
235
  extend: {
228
236
  colors: tailwindColors(userConfig.colors),
229
237
  fontSize: tailwindVariablesFont('text', userConfig.fontSize),
@@ -246,10 +254,7 @@ const createPlugin = (userConfig = {}) => {
246
254
  exports.createPlugin = createPlugin;
247
255
  exports.default = createPlugin;
248
256
  exports.defaultConfig = defaultConfig;
249
- exports.getTailwindColors = getTailwindColors;
250
- exports.hexToRgb = hexToRgb;
251
257
  exports.tailwindAnimations = tailwindAnimations;
252
258
  exports.tailwindColors = tailwindColors;
253
- exports.tailwindColorsAccent = tailwindColorsAccent;
254
259
  exports.tailwindVariables = tailwindVariables;
255
260
  exports.tailwindVariablesFont = tailwindVariablesFont;
package/utils/tailwind.js CHANGED
@@ -2,7 +2,6 @@ import plugin from 'tailwindcss/plugin'
2
2
  import flattenColorPalette from 'tailwindcss/src/util/flattenColorPalette'
3
3
  import toColorValue from 'tailwindcss/src/util/toColorValue'
4
4
  import { parseColor, formatColor } from 'tailwindcss/src/util/color'
5
- import twColors from 'tailwindcss/colors'
6
5
  import lodash from 'lodash'
7
6
 
8
7
  function withAlphaVariable ({ color, property, variable }) {
@@ -39,7 +38,7 @@ function withAlphaVariable ({ color, property, variable }) {
39
38
 
40
39
  export const defaultConfig = {
41
40
  colors: [
42
- 'primary', 'accent',
41
+ 'primary', 'accent', 'current',
43
42
  'warning', 'error', 'info', 'success', 'light', 'dark',
44
43
  'main', 'main-primary', 'main-secondary', 'main-tertiary',
45
44
  'body', 'body-primary', 'body-secondary', 'body-tertiary'
@@ -64,37 +63,13 @@ export const defaultConfig = {
64
63
  '2xxl': '158em'
65
64
  },
66
65
  settings: {
67
- rgbFallback: true
66
+ rgb: true
68
67
  }
69
68
  }
70
69
 
71
- export const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
72
- .substring(1).match(/.{2}/g)
73
- .map(x => parseInt(x, 16))
74
-
75
- export const getTailwindColors = (twColors) => {
76
- const accentColors = []
77
-
78
- Object.keys(twColors).forEach(color => {
79
- if (color.match(/(lightBlue|warmGray|trueGray|coolGray|blueGray)/)) {
80
- return
81
- }
82
-
83
- if (typeof twColors[color] === 'object') {
84
- Object.keys(twColors[color]).forEach(variant => {
85
- accentColors.push([`${color.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}-${variant}`, twColors[color][variant]])
86
- })
87
- } else {
88
- accentColors.push([color, twColors[color]])
89
- }
90
- })
91
-
92
- return accentColors
93
- }
94
-
95
70
  export const tailwindColors = (colors = []) => {
96
71
  colors.forEach(name => {
97
- if (defaultConfig.settings.rgbFallback) {
72
+ if (defaultConfig.settings.rgb) {
98
73
  colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`
99
74
  }
100
75
 
@@ -104,38 +79,6 @@ export const tailwindColors = (colors = []) => {
104
79
  return colors
105
80
  }
106
81
 
107
- export const tailwindColorsAccent = (colors = []) => {
108
- const result = {}
109
-
110
- colors.forEach(color => {
111
- if (Array.isArray(color)) {
112
- const rgb = hexToRgb(color[1])
113
-
114
- result[`.accent-${color[0]}`] = Object.assign(defaultConfig.settings.rgbFallback
115
- ? {
116
- '--color-accent-rgb': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
117
- '--color-accent-current-rgb': `var(--color-${color}-current-rgb, var(--color-light-rgb))`
118
- }
119
- : {}, {
120
- '--color-accent': `rgb(${rgb[0]} ${rgb[1]} ${rgb[2]})`,
121
- '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
122
- })
123
- } else {
124
- result[`.accent-${color}`] = Object.assign(defaultConfig.settings.rgbFallback
125
- ? {
126
- '--color-accent-rgb': `var(--color-${color}-rgb)`,
127
- '--color-accent-current-rgb': `var(--color-${color}-current-rgb, var(--color-light-rgb))`
128
- }
129
- : {}, {
130
- '--color-accent': `var(--color-${color})`,
131
- '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
132
- })
133
- }
134
- })
135
-
136
- return result
137
- }
138
-
139
82
  export const tailwindVariables = (type, variables = [], values = {}) => {
140
83
  variables.forEach(name => {
141
84
  values[name] = `var(--${type}-${name})`
@@ -168,35 +111,98 @@ export const createPlugin = (userConfig = {}) => {
168
111
  userConfig = lodash.merge(defaultConfig, userConfig)
169
112
 
170
113
  return plugin(({ addUtilities, matchUtilities, theme, variants, e, corePlugins }) => {
171
- addUtilities(Object.assign(tailwindColorsAccent(getTailwindColors(twColors)), tailwindColorsAccent(userConfig.colors)))
172
114
  matchUtilities(
173
115
  {
174
- text: (value, extra) => {
116
+ accent: (value) => {
175
117
  const matchValue = toColorValue(value).match(/var\((.*?)\)/)
176
118
  const fallbackRgb = matchValue && matchValue[0].includes('-rgb')
177
119
 
178
120
  const colorProperties = {}
179
121
 
180
122
  if (fallbackRgb) {
181
- colorProperties['--color-body-current-rgb'] = matchValue[0]
123
+ colorProperties['--color-accent-rgb'] = matchValue[0]
182
124
  }
183
125
 
126
+ if ((matchValue && matchValue[0] === 'var(--color-accent)') || (matchValue && matchValue[0] === 'var(--color-accent-rgb)')) {
127
+ return {
128
+ 'accent-color': matchValue && toColorValue(value).includes('calc(1 * 100%)') ? matchValue[0] : toColorValue(value)
129
+ }
130
+ }
131
+
132
+ if (matchValue) {
133
+ if (fallbackRgb) {
134
+ colorProperties['--color-accent-fg-rgb'] = `var(${matchValue[1].replace('-rgb', '-fg-rgb')})`
135
+ }
136
+
137
+ if (toColorValue(value).includes('calc(1 * 100%)') || toColorValue(value).includes(' / 1')) {
138
+ return {
139
+ ...colorProperties,
140
+ '--color-accent': fallbackRgb ? toColorValue(value) : matchValue[0],
141
+ '--color-accent-fg': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-fg-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-fg, var(--color-light))`,
142
+ 'accent-color': 'var(--color-accent)'
143
+ }
144
+ } else {
145
+ return {
146
+ ...colorProperties,
147
+ '--color-accent': toColorValue(value),
148
+ '--color-accent-fg': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-fg-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-fg, var(--color-light))`,
149
+ 'accent-color': 'var(--color-accent)'
150
+ }
151
+ }
152
+ }
153
+
154
+ return {
155
+ '--color-accent': toColorValue(value),
156
+ 'accent-color': toColorValue(value)
157
+ }
158
+ }
159
+ },
160
+ { values: flattenColorPalette(theme('accentColor')), type: ['color', 'any'] }
161
+ )
162
+ matchUtilities(
163
+ {
164
+ text: (value) => {
165
+ const matchValue = toColorValue(value).match(/var\((.*?)\)/)
166
+ const fallbackRgb = matchValue && matchValue[0].includes('-rgb')
167
+
168
+ const colorProperties = {}
169
+
170
+ if (fallbackRgb) {
171
+ colorProperties['--color-current-rgb'] = matchValue[0]
172
+ }
173
+
174
+ if ((matchValue && matchValue[0] === 'var(--color-current)') || (matchValue && matchValue[0] === 'var(--color-current-rgb)')) {
175
+ return {
176
+ color: toColorValue(value)
177
+ }
178
+ }
179
+
180
+ const color = matchValue
181
+ ? { color: 'var(--color-current)' }
182
+ : {
183
+ ...withAlphaVariable({
184
+ color: value,
185
+ property: 'color',
186
+ variable: '--tw-text-opacity'
187
+ })
188
+ }
189
+
184
190
  if (!corePlugins('textOpacity')) {
185
191
  return {
186
192
  ...colorProperties,
187
- '--color-body-current': toColorValue(value),
188
- color: toColorValue(value)
193
+ '--color-current': toColorValue(value),
194
+ ...color
189
195
  }
190
196
  }
191
197
 
192
198
  return {
193
199
  ...colorProperties,
194
- '--color-body-current': toColorValue(value),
195
200
  ...withAlphaVariable({
196
201
  color: value,
197
- property: 'color',
202
+ property: '--color-current',
198
203
  variable: '--tw-text-opacity'
199
- })
204
+ }),
205
+ ...color
200
206
  }
201
207
  }
202
208
  },
@@ -217,9 +223,11 @@ export const createPlugin = (userConfig = {}) => {
217
223
  corePlugins: {
218
224
  preflight: false,
219
225
  container: false,
220
- textColor: false
226
+ textColor: false,
227
+ accentColor: false
221
228
  },
222
229
  theme: {
230
+ accentOpacity: ({ theme }) => theme('opacity'),
223
231
  extend: {
224
232
  colors: tailwindColors(userConfig.colors),
225
233
  fontSize: tailwindVariablesFont('text', userConfig.fontSize),