winduum 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.css +1 -1
- package/dist/tailwind.css +1 -1
- package/package.json +16 -12
- package/src/App.vue +1 -1
- package/src/form.html +1 -1
- package/src/index.html +1 -0
- package/src/scripts/{Libraries → libraries}/Dialog.js +0 -0
- package/src/styles/{Base → base}/config.css +0 -0
- package/src/styles/{Base → base}/default.css +0 -0
- package/src/styles/{Base → base}/icons.css +0 -0
- package/src/styles/{Base → base}/keyframes.css +0 -0
- package/src/styles/{Base → base}/reset.css +0 -0
- package/src/styles/{Base → base}/tailwind/base.css +2 -2
- package/src/styles/{Base → base}/theme/dark.css +0 -0
- package/src/styles/{Base → base}/theme/default.css +0 -0
- package/src/styles/{Components → components}/+.css +0 -0
- package/src/styles/{Components → components}/Dialog.css +0 -0
- package/src/styles/{Components → components}/Drawer.css +0 -0
- package/src/styles/{Components → components}/Dropdown.css +0 -0
- package/src/styles/{Components → components}/Field.css +0 -0
- package/src/styles/{Components → components}/Table.css +0 -0
- package/src/styles/{Libraries → libraries}/+.css +0 -0
- package/src/styles/{Libraries → libraries}/Dialog.css +0 -0
- package/src/styles/{Libraries → libraries}/Hint.css +0 -0
- package/src/styles/main.css +10 -10
- package/src/styles/tailwind.css +1 -1
- package/src/styles/{Ui → ui}/+.css +0 -0
- package/src/styles/{Ui → ui}/Badge.css +0 -0
- package/src/styles/{Ui → ui}/Btn.css +0 -0
- package/src/styles/{Ui → ui}/Checkbox.css +22 -7
- package/src/styles/{Ui → ui}/Heading.css +0 -0
- package/src/styles/{Ui → ui}/Image.css +0 -0
- package/src/styles/{Ui → ui}/Info.css +0 -0
- package/src/styles/{Ui → ui}/Input.css +0 -0
- package/src/styles/{Ui → ui}/Label.css +0 -0
- package/src/styles/{Ui → ui}/Link.css +0 -0
- package/src/styles/{Ui → ui}/Notice.css +0 -0
- package/src/styles/{Ui → ui}/Progress.css +0 -0
- package/src/styles/{Ui → ui}/Radio.css +0 -0
- package/src/styles/{Ui → ui}/Range.css +0 -0
- package/src/styles/{Ui → ui}/Select.css +0 -0
- package/src/styles/{Ui → ui}/Switch.css +0 -0
- package/src/styles/{Ui → ui}/Text.css +0 -0
- package/src/styles/{Ui → ui}/Title.css +0 -0
- package/tailwind.config.cjs +1 -53
- package/utils/tailwind.cjs +175 -0
- package/utils/tailwind.js +164 -0
- package/utils/helpers.cjs +0 -67
- package/utils/helpers.js +0 -59
package/dist/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*:where(:not(html,iframe,canvas,img,svg,video,audio,svg *,symbol *)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}ol,ul,menu{list-style:none}img{max-width:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert}::-moz-placeholder{color:unset}::placeholder{color:unset}: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(html){cursor:default}:where(input,textarea){cursor:text}:where(a[href],button){cursor:pointer}:where(svg,use,path,symbol){all:revert-layer}::-moz-selection{color:rgb(var(--color-light));background-color:rgb(var(--color-accent))}::selection{color:rgb(var(--color-light));background-color:rgb(var(--color-accent))}*{box-sizing:border-box;outline:none;-webkit-tap-highlight-color:rgb(255 255 255 / 0)}:where([hidden]){display:none}:where(svg){stroke-width:1.5}:where(hr){display:block;border-top:1px solid rgb(var(--color-current) / var(--tw-border-opacity, 1))}:root{--font-primary: "Poppins", sans-serif;--font-secondary: "Poppins", sans-serif;--color-google: 49 45 45;--color-linkedin: 40 103 178;--color-youtube: 255 0 0;--color-instagram: 193 53 132;--color-twitter: 29 161 242;--color-facebook: 24 119 242;--color-apple: 0 0 0;--container-width: 80rem;--container-width-sm: 50rem;--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: .75rem;--rounded-xs: .5rem;--rounded-sm: .875rem;--rounded-base: 1rem;--rounded-md: 1.125rem;--rounded-lg: 1.5rem;--rounded-xl: 3rem;--rounded-2xl: 6rem;--rounded-3xl: 8rem;--rounded-full: 9999px;--spacing-xs: .5rem;--spacing-sm: .875rem;--spacing-base: 1rem;--spacing-md: 1.125rem;--spacing-lg: 1.5rem;--spacing-xl: 3rem;--spacing-2xl: 6rem;--spacing-3xl: 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-chevron-right: 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="M9 5l7 7-7 7" /></svg>') no-repeat 50% 50% / contain;--icon-chevron-left: 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="M15 19l-7-7 7-7" /></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;--icon-upload: 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></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-left{0%{opacity:0;transform:translate(-5rem)}to{opacity:1;transform:none}}@keyframes fade-in-right{0%{opacity:0;transform:translate(5rem)}to{opacity:1;transform:none}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fade-out-left{0%{opacity:1;transform:none}to{opacity:0;transform:translate(-5rem)}}@keyframes fade-out-right{0%{opacity:1;transform:none}to{opacity:0;transform:translate(5rem)}}@keyframes fade-out-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2rem)}}@keyframes fade-out-down{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 slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes ripple{to{transform:scale(2.5);opacity:0}}@keyframes loading-skeleton{to{background-position:250% 0}}:root{--color-accent: var(--color-primary);--color-current: var(--color-default);--color-default: 17 19 21;--color-primary: 3 138 255;--color-secondary: 69 71 72;--color-light: 255 255 255;--color-dark: 17 19 21;--color-success: 33 154 67;--color-error: 254 50 75;--color-warning: 254 179 53;--color-info: 45 168 234;--color-background: 255 255 255;--color-background-100: 249 250 252;--color-background-200: 235 235 235;--color-background-300: 225 225 225}:root.dark{--color-default: 201 209 217;--color-invert: 14 17 22;--color-secondary: 39 41 46;--color-background: 25 26 27;--color-background-100: 14 15 16;--color-background-200: 26 32 38;--color-background-300: 30 36 46}:where(.ui-badge){--color-current: var(--color-light);--ui-badge-width: max-content;--ui-badge-height: 1.5rem;--ui-badge-py: 0;--ui-badge-px: .5rem;--ui-badge-border-radius: var(--rounded-xs);--ui-badge-font-size: .75rem;--ui-badge-font-weight: var(--font-normal);--ui-badge-bg: rgb(var(--color-accent) / var(--ui-badge-bg-opacity));--ui-badge-bg-opacity: var(--tw-bg-opacity, 1);--ui-badge-color: rgb(var(--color-current) / var(--ui-badge-color-opacity));--ui-badge-color-opacity: var(--tw-text-opacity, 1);--ui-badge-outline-width: 1px;--ui-badge-outline-opacity: .75;--ui-badge-icon-font-size: .875rem;--ui-badge-gap: .25rem;--ui-badge-focus-opacity: .3;--ui-badge-hover-opacity: .8;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)}:where(.ui-badge) :where(svg){width:1em;height:1em;font-size:var(--ui-badge-icon-font-size)}:where(.ui-badge):where(.is-outline){outline:var(--ui-badge-outline-width) solid rgb(var(--color-accent) / var(--ui-badge-outline-opacity));outline-offset:calc(var(--ui-badge-outline-width) * -1)}:where(.ui-badge):where(.is-outline,.is-muted){--color-current: var(--color-accent);--ui-badge-bg: transparent}:where(.ui-badge):where(.is-muted){background-color:rgb(var(--color-current) / .1)}:where(.ui-badge):where(.is-square,.is-circle){--ui-badge-px: var(--ui-badge-py);--ui-badge-width: var(--ui-badge-height)}:where(.ui-badge):where(.is-circle){--ui-badge-border-radius: var(--rounded-full)}:where(.ui-badge):where(.is-sm){--ui-badge-height: 1.25rem;--ui-badge-font-size: .625rem}:where(.ui-badge):where(.is-lg){--ui-badge-height: 1.75rem}@media (hover: hover) and (pointer: fine){:where(.ui-badge):where([href],button):hover{opacity:var(--ui-badge-hover-opacity)}}:where(.ui-badge):where([href],button):focus-visible{z-index:2;box-shadow:0 0 0 0 rgb(var(--color-current)),0 0 0 max(2px,var(--ui-badge-outline-width)) rgb(var(--color-accent) / var(--ui-badge-focus-opacity))}:where(.ui-badge-group){display:flex}:where(.ui-badge-group) :where(.ui-badge):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(var(--ui-badge-outline-width) * -1)}:where(.ui-badge-group) :where(.ui-badge):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:where(.ui-btn){--color-current: var(--color-light);--ui-btn-width: max-content;--ui-btn-height: 2.25rem;--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-bg: rgb(var(--color-accent) / var(--ui-btn-bg-opacity));--ui-btn-bg-opacity: var(--tw-bg-opacity, 1);--ui-btn-color: rgb(var(--color-current) / var(--ui-btn-color-opacity));--ui-btn-color-opacity: var(--tw-text-opacity, 1);--ui-btn-hover-filter: invert(1);--ui-btn-hover-opacity: .2;--ui-btn-focus-opacity: .3;--ui-btn-disabled-opacity: .7;--ui-btn-outline-width: 2px;--ui-btn-outline-opacity: .5;--ui-btn-icon-font-size: 1.25rem;--ui-btn-gap: .375rem;--ui-btn-loading-width: 1rem;--ui-btn-loading-border-width: 2px;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);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-opacity),var(--transition-background),var(--transition-color);gap:var(--ui-btn-gap)}:where(.ui-btn):before{position:absolute;inset:0;width:100%;height:100%;content:"";background-color:rgb(var(--color-current));filter:var(--ui-btn-hover-filter);z-index:-1;opacity:0;transition:var(--transition-opacity)}:where(.ui-btn) :where(svg){width:1em;height:1em;font-size:var(--ui-btn-icon-font-size)}:where(.ui-btn):where(.is-sm){--ui-btn-height: 2rem;--ui-btn-px: 1rem}:where(.ui-btn):where(.is-lg){--ui-btn-height: 3rem;--ui-btn-px: 1.75rem}:where(.ui-btn):where(.is-wide){padding-left:calc(var(--ui-btn-px) * 2);padding-right:calc(var(--ui-btn-px) * 2)}:where(.ui-btn):where(.is-outline,.is-muted,.is-text){--color-current: var(--color-accent);--ui-btn-hover-opacity: .1;--ui-btn-hover-filter: none;background-color:transparent}:where(.ui-btn):where(.is-outline,.is-muted,.is-text):before{background-color:var(--ui-btn-bg)}:where(.ui-btn):where(.is-outline){--ui-btn-focus-opacity: .15;outline:var(--ui-btn-outline-width) solid rgb(var(--color-accent) / var(--ui-btn-outline-opacity));outline-offset:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn):where(.is-outline-gradient){--ui-btn-focus-opacity: .15;--color-accent: var(--color-default);--color-current: var(--color-accent)}.is-loading.is-hover-fill:where(.ui-btn):where(.is-outline-gradient){--color-current: var(--color-light)}:where(.ui-btn):where(.is-outline-gradient):not(.is-loading):after{content:"";position:absolute;background-color:rgb(var(--color-background));inset:var(--ui-btn-outline-width);border-radius:calc(var(--ui-btn-border-radius) / 1.25);z-index:-1;transition:var(--transition-opacity)}:where(.ui-btn):where(.is-muted){--ui-btn-hover-opacity: .3}:where(.ui-btn):where(.is-muted):before{opacity:.1}:where(.ui-btn):where(.is-raised){--ui-btn-outline-opacity: .15;outline:var(--ui-btn-outline-width) solid rgb(var(--color-current) / var(--ui-btn-outline-opacity));outline-offset:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn):where(.is-hover-fill){--ui-btn-hover-opacity: 1}:where(.ui-btn):where(.is-square,.is-circle){--ui-btn-py: var(--ui-btn-py);--ui-btn-width: var(--ui-btn-height)}:where(.ui-btn):where(.is-circle){--ui-btn-border-radius: var(--rounded-full)}:where(.ui-btn):where(.is-loading){pointer-events:none;color:transparent}:where(.ui-btn):where(.is-loading)>*{opacity:0}:where(.ui-btn):where(.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 rgb(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%}@media (hover: hover) and (pointer: fine){:where(.ui-btn):not(:disabled):hover:before{opacity:var(--ui-btn-hover-opacity)}.is-hover-fill:where(.ui-btn):not(:disabled):hover{--color-current: var(--color-light)}.is-outline-gradient:where(.ui-btn):not(:disabled):hover:before,.is-outline-gradient:where(.ui-btn):not(:disabled):hover:after{opacity:0}}:where(.ui-btn):is(:not(:disabled):active,.is-active):before{opacity:var(--ui-btn-hover-opacity)}.is-hover-fill:where(.ui-btn):is(:not(:disabled):active,.is-active){--color-current: var(--color-light)}.is-outline-gradient:where(.ui-btn):is(:not(:disabled):active,.is-active):before,.is-outline-gradient:where(.ui-btn):is(:not(:disabled):active,.is-active):after{opacity:0}:where(.ui-btn):focus-visible{z-index:2;box-shadow:0 0 0 0 rgb(var(--color-current)),0 0 0 max(2px,var(--ui-btn-outline-width)) rgb(var(--color-accent) / var(--ui-btn-focus-opacity))}:where(.ui-btn):disabled{opacity:var(--ui-btn-disabled-opacity);cursor:not-allowed}:where(.ui-btn-group){display:flex}:where(.ui-btn-group) :where(.ui-btn):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn-group) :where(.ui-btn):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:where(.ui-checkbox,.ui-radio){--ui-checkbox-width: 1.375rem;--ui-checkbox-font-size: .875rem;--ui-checkbox-gap: .625rem;--ui-checkbox-bg-raw: var(--color-background);--ui-checkbox-bg-opacity: .1;--ui-checkbox-border-color-raw: var(--color-current);--ui-checkbox-border-color-opacity: .2;--ui-checkbox-checked-bg-raw: var(--color-accent);--ui-checkbox-radius: .5rem;--ui-checkbox-icon: var(--icon-check);--ui-checkbox-icon-font-size: 1.125rem;--ui-checkbox-validity-font-size: .875rem;--ui-checkbox-validity-offset: .375rem;--ui-checkbox-box-shadow: none;display:flex;align-items:center;gap:0 var(--ui-checkbox-gap);flex-wrap:wrap;width:-moz-max-content;width:max-content;font-size:var(--ui-checkbox-font-size)}:where(.ui-checkbox,.ui-radio) :where(label[for],input){cursor:pointer}:where(.ui-checkbox,.ui-radio) a{color:rgb(var(--color-accent));text-decoration:underline}:where(.ui-checkbox,.ui-radio) input{--color-current: var(--color-light);display:flex;width:var(--ui-checkbox-width);height:var(--ui-checkbox-width);background-color:rgb(var(--ui-checkbox-bg-raw) / var(--tw-bg-opacity, var(--ui-checkbox-bg-opacity)));border:1px solid rgb(var(--ui-checkbox-border-color-raw) / var(--tw-border-opacity, var(--ui-checkbox-border-color-opacity)));border-radius:var(--ui-checkbox-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;transition:var(--transition-border),var(--transition-background),var(--transition-shadow);box-shadow:var(--ui-checkbox-box-shadow);font-size:var(--ui-checkbox-icon-font-size)}:where(.ui-checkbox,.ui-radio) input:before{line-height:var(--ui-checkbox-icon-font-size);text-indent:0;display:block;transition:var(--transition-color),var(--transition-opacity),var(--transition-transform);color:rgb(var(--color-current));content:"";background-color:currentColor;-webkit-mask:var(--ui-checkbox-icon);mask:var(--ui-checkbox-icon);opacity:0;transform:scale(0);will-change:transform;width:1em;height:1em}:where(.ui-checkbox,.ui-radio) input:is(:hover,:focus-visible){--ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);--ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);--tw-border-opacity: .75;--tw-bg-opacity: .1}:where(.ui-checkbox,.ui-radio) input:checked{--tw-border-opacity: 0;background-color:rgb(var(--ui-checkbox-checked-bg-raw))}:where(.ui-checkbox,.ui-radio) input:checked:focus{--ui-checkbox-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-checkbox,.ui-radio) input:checked:before{opacity:1;transform:scale(1)}:where(.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)}:where(.ui-heading):where(.is-sm){--ui-heading-font-size: 1.125rem;--ui-heading-line-height-ratio: .125rem}:where(.ui-heading):where(.is-lg){--ui-heading-font-size: 1.875rem}:where(.ui-image){--ui-image-bg: rgb(var(--color-background-200));--ui-image-border-radius: 0;position:relative;display:block;background-color:var(--ui-image-bg);border-radius:var(--ui-image-border-radius)}:where(.ui-image)>*{width:100%;height:100%;border-radius:inherit}:where(.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)}:root{--ui-input-height: 3rem}:where(.ui-input,.ui-select){--ui-input-height-textarea: 8rem;--ui-input-pt-floating: 1.25rem;--ui-input-pb-floating: .4375rem;--ui-input-py: .875rem;--ui-input-px: .875rem;--ui-input-pl: var(--ui-input-px);--ui-input-pr: var(--ui-input-px);--ui-input-bg: rgb(var(--color-background));--ui-input-color: currentColor;--ui-input-placeholder-color: currentColor;--ui-input-placeholder-opacity: .5;--ui-input-font-size: .875rem;--ui-input-font-weight: var(--font-medium);--ui-input-border-width: 1px;--ui-input-border-color: var(--color-current);--ui-input-border-opacity: .15;--ui-input-border-radius: var(--rounded);--ui-input-box-shadow: none;--ui-input-icon-font-size: 1.25rem;--ui-input-icon-count-l: 1;--ui-input-icon-count-r: 1;--ui-input-icon-gap: .375rem;--ui-input-icon-inset-x: calc(var(--ui-input-px) - .25rem);--ui-input-icon-inset-x-gap: .125rem;--ui-input-icon-offset-l: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-l));--ui-input-icon-offset-r: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-r));--ui-input-label-floating-font-size: var(--ui-label-font-size);--ui-input-label-floating-font-weight: var(--ui-label-font-weight);--ui-input-label-floating-focus-transform: translateY(-.6875rem) scale(.8);--ui-input-label-floating-focus-opacity: .5;display:grid;grid-template-areas:"input";font-size:var(--ui-input-font-size);position:relative}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-30-15]{--ui-input-pl: var(--ui-input-icon-offset-l)}:where(.ui-input,.ui-select):has(.icon-l){--ui-input-pl: var(--ui-input-icon-offset-l)}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-15]{--ui-input-pr: var(--ui-input-icon-offset-r)}:where(.ui-input,.ui-select):has(.icon-r){--ui-input-pr: var(--ui-input-icon-offset-r)}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-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){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select):has(.icon-l > *:nth-child(2)){--ui-input-icon-count-r: 2}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-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){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select):has(.icon-r > *:nth-child(2)){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select) :where(svg){font-size:var(--ui-input-icon-font-size);width:1em;height:var(--ui-input-height)}:where(.ui-input,.ui-select) :where(input,textarea,select){grid-area:input;background-clip:padding-box;background-color:var(--ui-input-bg);padding:var(--ui-input-py) var(--ui-input-pr) var(--ui-input-py) var(--ui-input-pl);transition:var(--transition-border),var(--transition-shadow);box-shadow:var(--ui-input-box-shadow);line-height:normal;font-size:inherit;height:var(--ui-input-height);font-weight:var(--ui-input-font-weight);border-radius:var(--ui-input-border-radius);color:var(--ui-input-color);border:var(--ui-input-border-width) solid rgb(var(--ui-input-border-color) / var(--ui-input-border-opacity))}:where(.ui-input,.ui-select) :where(input,textarea,select):focus{--ui-input-border-opacity: 1;--ui-input-border-color: var(--color-accent);--ui-input-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-accent) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-input,.ui-select) :where(input,textarea,select):disabled{cursor:default;background-color:rgb(var(--color-default) / .1)}:is(:where(.ui-input,.ui-select) :where(input,textarea,select)):required~label:after{color:rgb(var(--color-error));content:" *"}:where(.ui-input,.ui-select) :where(input,textarea)::-moz-placeholder{color:var(--ui-input-placeholder-color);opacity:var(--ui-input-placeholder-opacity)}:where(.ui-input,.ui-select) :where(input,textarea)::placeholder{color:var(--ui-input-placeholder-color);opacity:var(--ui-input-placeholder-opacity)}:where(.ui-input,.ui-select) :where(textarea){resize:vertical;overflow:hidden;min-height:var(--ui-input-height-textarea)}:where(.ui-input,.ui-select) :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-input-icon-gap);transition:var(--transition-opacity)}:where(.ui-input,.ui-select) :where([class^="icon-"]):where(.icon-l){left:var(--ui-input-icon-inset-x);margin-right:auto}:where(.ui-input,.ui-select) :where([class^="icon-"]):where(.icon-r){right:var(--ui-input-icon-inset-x);margin-left:auto}:where(.ui-input,.ui-select) :where([aria-label]):after{content:attr(aria-label);font-size:var(--ui-input-font-size);min-width:var(--ui-input-icon-font-size);text-align:center;line-height:var(--ui-input-icon-font-size);display:block}:where(.ui-input,.ui-select) :where([class*="lib-hint"]):after{white-space:normal;line-height:1.5;word-wrap:normal;width:10rem;font-weight:var(--font-normal);font-size:.75rem}:where(.ui-input,.ui-select):where(.is-floating){--ui-input-placeholder-color: transparent}:where(.ui-input,.ui-select):where(.is-floating) :where(label){grid-area:input;align-self:start;pointer-events:none;transition:transform .4s 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-input-label-floating-font-weight);margin-left:var(--ui-input-pl);margin-right:var(--ui-input-pr);line-height:var(--ui-input-label-floating-font-size);margin-top:calc(var(--ui-input-height) / 2 - (var(--ui-input-font-size) / 2))}:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select){padding-top:calc(var(--ui-input-pt-floating));padding-bottom:calc(var(--ui-input-pb-floating))}:is(:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select)):is(:focus,:not(:-moz-placeholder-shown))~label{transform:var(--ui-input-label-floating-focus-transform);opacity:var(--ui-input-label-floating-focus-opacity)}:is(:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select)):is(:focus,:not(:placeholder-shown))~label{transform:var(--ui-input-label-floating-focus-transform);opacity:var(--ui-input-label-floating-focus-opacity)}.is-invalid:where(.ui-input,.ui-select),.is-validated :where(.ui-input,.ui-select) :where(input,textarea,select):invalid{--ui-input-bg: rgb(var(--color-error) / .1);--ui-input-border-opacity: 1;--ui-input-border-color: var(--color-error);--ui-input-color: rgb(var(--color-error));--color-accent: var(--color-error)}:where(.ui-input-group){display:flex;align-items:flex-end;flex-wrap:wrap}:where(.ui-input-group) :where(.ui-btn){--ui-btn-outline-width: 1px;--ui-btn-height: var(--ui-input-height)}:where(.ui-input-group)>*:not(:first-child){margin-left:calc(var(--ui-input-border-width) * -1)}:where(.ui-input-group)>*:not(:first-child),:where(.ui-input-group)>*:not(:first-child) :where(input,select){border-top-left-radius:0;border-bottom-left-radius:0}:where(.ui-input-group)>*:not(:last-child),:where(.ui-input-group)>*:not(:last-child) :where(input,select){border-top-right-radius:0;border-bottom-right-radius:0}:root{--ui-label-font-size: .875rem;--ui-label-font-weight: var(--font-medium)}:where(.ui-label){font-size:var(--ui-label-font-size);font-weight:var(--ui-label-font-weight)}:where(.ui-link){--ui-link-font-size: .875rem;--ui-link-font-weight: var(--font-semibold);--ui-link-hover-color: rgb(var(--color-accent));--ui-link-hover-opacity: .7;--ui-link-underline-width: 1px;--ui-link-underline-opacity: 0;--ui-link-underline-transform: translateY(-.125rem);font-size:var(--ui-link-font-size);font-weight:var(--ui-link-font-weight);transition:var(--transition-opacity);display:flex;align-items:center;position:relative}@media (hover: hover) and (pointer: fine){:where(.ui-link):hover{--ui-link-underline-opacity: 1;--ui-link-underline-transform: none;color:var(--ui-link-hover-color)}}:where(.ui-link):active{opacity:var(--ui-link-hover-opacity)}:where(.ui-link):where(:focus-visible){--ui-link-underline-opacity: 1;--ui-link-underline-transform: none}:where(.ui-link):where(.is-underline):after{content:"";border-bottom:var(--ui-link-underline-width) solid currentColor;opacity:var(--ui-link-underline-opacity);position:absolute;inset:auto 0 0 0;transition:var(--transition-opacity),var(--transition-transform);transform:var(--ui-link-underline-transform)}:where(.ui-notice){--color-current: var(--color-accent);--ui-notice-bg: rgb(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-opacity: .1;--ui-notice-gap: 1rem;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);color:rgb(var(--color-current));gap:var(--ui-notice-gap)}:where(.ui-notice) :where(hr){--tw-border-opacity: .2}:where(.ui-notice):before,:where(.ui-notice):after{position:absolute;inset:0;border-radius:var(--ui-notice-border-radius);z-index:-1;content:""}:where(.ui-notice):before{background-color:var(--ui-notice-bg);opacity:var(--ui-notice-outline-opacity)}:where(.ui-notice):after{box-shadow:inset 0 0 0 1px var(--ui-notice-bg);opacity:var(--ui-notice-outline-opacity)}:where(.ui-progress){--ui-progress-height: 1rem;--ui-progress-border-radius: var(--rounded-full);--ui-progress-bg: var(--color-background-200);--ui-progress-bg-opacity: 1;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:0;height:var(--ui-progress-height);border-radius:var(--ui-progress-border-radius);background-color:rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity));color:rgb(var(--color-accent));width:100%}.is-sm:where(.ui-progress){--ui-progress-height: .5rem}.is-lg:where(.ui-progress){--ui-progress-height: 1.5rem}:where(.ui-progress)::-webkit-progress-bar{background-color:transparent}:where(.ui-progress)::-webkit-progress-value{background-color:currentColor;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress)::-moz-progress-bar{background-color:currentColor;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress):indeterminate{animation:1.5s linear 0s forwards infinite move-indeterminate;background-image:linear-gradient(to right,currentColor 30%,rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity)) 30%);background-position:top left;background-repeat:no-repeat;background-size:150% 150%;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress):indeterminate::-moz-progress-bar{background-color:transparent}:where(.ui-radio){--ui-checkbox-icon: var(--icon-radio);--ui-checkbox-radius: 50%}:where(.ui-select){--ui-input-icon-select-icon-font-size: 1.5rem;--ui-input-icon-count-r: 2;--ui-input-pr: var(--ui-input-icon-offset-r)}:where(.ui-select) :where([class^="icon-"]){margin-right:calc(var(--ui-input-icon-font-size) + var(--ui-input-icon-gap))}:where(.ui-select):after{width:1em;height:1em;background-color:currentColor;content:"";position:absolute;z-index:1;font-size:var(--ui-input-icon-select-icon-font-size);right:calc(var(--ui-input-height) / 4);top:calc(var(--ui-input-height) / 2);margin-top:calc(var(--ui-input-icon-select-icon-font-size) / 2 * -1);will-change:transform;transition:transform .2s;-webkit-mask:var(--icon-angle-down);mask:var(--icon-angle-down);pointer-events:none;grid-area:input}:where(.ui-switch){--ui-switch-width: 3rem;--ui-switch-height: 1.5rem;--ui-switch-padding: .375rem;--ui-switch-bg-raw: var(--color-dark);--ui-switch-radius: 999px;--ui-switch-validity-font-size: .875rem;--ui-switch-validity-offset: .375rem;--ui-switch-box-shadow: none}.dark :where(.ui-switch){--ui-switch-bg-raw: var(--color-background-300)}:where(.ui-switch){display:flex;align-items:center;flex-wrap:wrap;width:-moz-max-content;width:max-content}:where(.ui-switch):where(.is-sm){--ui-switch-width: 2.5rem;--ui-switch-height: 1.25rem}:where(.ui-switch):where(.is-lg){--ui-switch-width: 4rem;--ui-switch-height: 2rem}:where(.ui-switch) input{width:var(--ui-switch-width);height:var(--ui-switch-height);display:block;position:relative;border-radius:var(--ui-switch-radius);background-color:rgb(var(--ui-switch-bg-raw));transition:var(--transition-background),var(--transition-shadow);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;color:inherit;box-shadow:var(--ui-switch-box-shadow)}:where(.ui-switch) input:before{width:calc(var(--ui-switch-height) - var(--ui-switch-padding));height:calc(var(--ui-switch-height) - var(--ui-switch-padding));background-color:rgb(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%)}:where(.ui-switch) input:disabled{opacity:.8;pointer-events:none}:where(.ui-switch) input:focus{--ui-switch-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-current) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-switch) input:checked{background-color:rgb(var(--color-accent))}:where(.ui-switch) input:checked:focus{--ui-switch-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-accent) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-switch) input:checked:before{background-color:rgb(var(--color-light));left:100%}:where(.ui-text){--ui-text-size: .875rem;--ui-text-size-line: .75rem;--ui-text-weight: var(--font-normal);--ui-text-weight-bold: var(--font-semibold);font-weight:var(--ui-text-weight);font-size:var(--ui-text-size);line-height:calc(var(--ui-text-size) + var(--ui-text-size-line))}:where(.ui-text):where(.is-lg){--ui-text-size: 1.125rem}:where(.ui-text) :where(a){text-decoration:underline;transition:var(--transition-color);color:rgb(var(--color-accent))}@media (hover: hover) and (pointer: fine){:where(.ui-text) :where(a):hover{color:rgb(var(--color-accent) / .7)}}:where(.ui-text) :where(a):focus-visible{color:rgb(var(--color-accent) / .7)}:where(.ui-text) :where(b,strong){font-weight:var(--ui-text-weight-bold)}:where(.ui-text) :where(i,em){display:inline;font-style:italic}:where(.ui-text) :where(figure){margin:1rem 0}@media (min-width: 48em){:where(.ui-text) :where(figure){margin:2rem 0}}:where(.ui-text) :where(figure) :where(figcaption){font-size:.875rem;font-weight:var(--font-semibold);margin-top:.875rem}:where(.ui-text) :where(img){height:auto!important}:where(.ui-text) :where(p){line-height:inherit;margin:0 0 .25rem}:where(.ui-text) :where(p):empty{line-height:1rem}:where(.ui-text) :where(p):after{content:"\a0"}:where(.ui-text) :where(hr){margin:1.25rem 0}:where(.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:0 0 1.25rem}:where(.ui-text) h1{--ui-text-heading-size: 2.25rem}:where(.ui-text) h2{--ui-text-heading-size: 1.75rem}:where(.ui-text) :where(h3,h4){--ui-text-heading-size: 1.25rem}:where(.ui-text) :where(table){border:0;min-width:100%}:where(.ui-text) :where(table) :where(td,th){padding:1rem 1.125rem;text-align:left}:where(.ui-text) :where(table) :where(thead){font-weight:var(--ui-text-weight-bold);border-bottom:1px solid rgb(var(--color-current) / .075)}:where(.ui-text) :where(table) :where(tbody tr):nth-of-type(even){background-color:rgb(var(--color-current) / .05)}:where(.ui-text) :where(iframe){max-width:100%}:where(.ui-text) :where(blockquote){background-color:rgb(var(--color-current) / .075);border-left:.3125rem solid rgb(var(--color-accent) / 1);padding:1.25em 1.5em;margin:0;font-size:inherit}:where(.ui-text) :where(code){margin:0;border-radius:var(--rounded-xs);padding:.25rem .5rem;font-size:.85em;color:#476582;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background-color:#1b1f230d}.dark :is(:where(.ui-text) :where(code)){background-color:rgb(var(--color-background-100));color:rgb(var(--color-primary))}:where(.ui-text) :where(ol){margin:0 0 1.5rem;padding:0 0 0 1rem}:where(.ui-text) :where(ol) :where(li){padding-left:.5rem}:where(.ui-text) :where(ol) :where(li)::marker{color:rgb(var(--color-accent))}:where(.ui-text) :where(ul){list-style-type:none!important;margin:0 0 1.5rem;padding:0}:where(.ui-text) :where(ul) :where(li){position:relative;line-height:inherit;padding-left:1.5rem}:where(.ui-text) :where(ul) :where(li):not(:last-of-type){margin:0 0 .5rem}:where(.ui-text) :where(ul) :where(li):before{width:.25rem;height:.25rem;position:absolute;content:"";border:1px solid rgb(var(--color-accent));background-color:rgb(var(--color-accent));left:0;top:.625rem;text-indent:0;border-radius:50%}:where(.ui-text) [style*=square]:where(ul) li:before{border-radius:0}:where(.ui-text) [style*=circle]:where(ul) li:before{border-radius:50%;background-color:transparent}:where(.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)}:where(.ui-title):where(.is-sm){--ui-title-font-size: .75rem}:where(.ui-title):where(.is-lg){--ui-title-font-size: 1.125rem}:where(.c-field){--c-field-gap: .5rem;display:flex;flex-direction:column;gap:var(--c-field-gap)}.js-has-pseudo [csstools-has-1a-2x-37-19-3a-2p-30-2x-2s-2p-38-2t-2s-w-1m-3b-2w-2t-36-2t-14-1a-2r-19-2u-2x-2t-30-2s-15-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){display:block}.is-validated :where(.c-field):has(:invalid) :where(.ui-info[hidden]){display:block}:where(.c-field):where(.is-horizontal){align-items:flex-start;flex-direction:row}:where(.c-field):where(.is-horizontal) :where(.ui-label){min-height:var(--ui-input-height);align-items:center;display:flex}:where(.c-field):where(.is-horizontal)>:where(.col){gap:var(--c-field-gap);justify-content:center}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-2r-19-2u-2x-2t-30-2s-15-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]:after{color:rgb(var(--color-error));content:" *"}:where(.c-field):has([required]) :where(.ui-label):after{color:rgb(var(--color-error));content:" *"}:where(.c-field) :where(.is-input-offset){min-height:var(--ui-input-height);justify-content:center}
|
|
1
|
+
*:where(:not(html,iframe,canvas,img,svg,video,audio,svg *,symbol *)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}ol,ul,menu{list-style:none}img{max-width:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert}::-moz-placeholder{color:unset}::placeholder{color:unset}: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(html){cursor:default}:where(input,textarea){cursor:text}:where(a[href],button){cursor:pointer}:where(svg,use,path,symbol){all:revert-layer}::-moz-selection{color:rgb(var(--color-light));background-color:rgb(var(--color-accent))}::selection{color:rgb(var(--color-light));background-color:rgb(var(--color-accent))}*{box-sizing:border-box;outline:none;-webkit-tap-highlight-color:rgb(255 255 255 / 0)}:where([hidden]){display:none}:where(svg){stroke-width:1.5}:where(hr){display:block;border-top:1px solid rgb(var(--color-current) / var(--tw-border-opacity, 1))}:root{--font-primary: "Poppins", sans-serif;--font-secondary: "Poppins", sans-serif;--color-google: 49 45 45;--color-linkedin: 40 103 178;--color-youtube: 255 0 0;--color-instagram: 193 53 132;--color-twitter: 29 161 242;--color-facebook: 24 119 242;--color-apple: 0 0 0;--container-width: 80rem;--container-width-sm: 50rem;--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: .75rem;--rounded-xs: .5rem;--rounded-sm: .875rem;--rounded-base: 1rem;--rounded-md: 1.125rem;--rounded-lg: 1.5rem;--rounded-xl: 3rem;--rounded-2xl: 6rem;--rounded-3xl: 8rem;--rounded-full: 9999px;--spacing-xs: .5rem;--spacing-sm: .875rem;--spacing-base: 1rem;--spacing-md: 1.125rem;--spacing-lg: 1.5rem;--spacing-xl: 3rem;--spacing-2xl: 6rem;--spacing-3xl: 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-chevron-right: 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="M9 5l7 7-7 7" /></svg>') no-repeat 50% 50% / contain;--icon-chevron-left: 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="M15 19l-7-7 7-7" /></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;--icon-upload: 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></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-left{0%{opacity:0;transform:translate(-5rem)}to{opacity:1;transform:none}}@keyframes fade-in-right{0%{opacity:0;transform:translate(5rem)}to{opacity:1;transform:none}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-2rem)}to{opacity:1;transform:translateY(0)}}@keyframes fade-out-left{0%{opacity:1;transform:none}to{opacity:0;transform:translate(-5rem)}}@keyframes fade-out-right{0%{opacity:1;transform:none}to{opacity:0;transform:translate(5rem)}}@keyframes fade-out-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2rem)}}@keyframes fade-out-down{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 slide-in-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes ripple{to{transform:scale(2.5);opacity:0}}@keyframes loading-skeleton{to{background-position:250% 0}}:root{--color-accent: var(--color-primary);--color-current: var(--color-default);--color-default: 17 19 21;--color-primary: 3 138 255;--color-secondary: 69 71 72;--color-light: 255 255 255;--color-dark: 17 19 21;--color-success: 33 154 67;--color-error: 254 50 75;--color-warning: 254 179 53;--color-info: 45 168 234;--color-background: 255 255 255;--color-background-100: 249 250 252;--color-background-200: 235 235 235;--color-background-300: 225 225 225}:root.dark{--color-default: 201 209 217;--color-invert: 14 17 22;--color-secondary: 39 41 46;--color-background: 25 26 27;--color-background-100: 14 15 16;--color-background-200: 26 32 38;--color-background-300: 30 36 46}:where(.ui-badge){--color-current: var(--color-light);--ui-badge-width: max-content;--ui-badge-height: 1.5rem;--ui-badge-py: 0;--ui-badge-px: .5rem;--ui-badge-border-radius: var(--rounded-xs);--ui-badge-font-size: .75rem;--ui-badge-font-weight: var(--font-normal);--ui-badge-bg: rgb(var(--color-accent) / var(--ui-badge-bg-opacity));--ui-badge-bg-opacity: var(--tw-bg-opacity, 1);--ui-badge-color: rgb(var(--color-current) / var(--ui-badge-color-opacity));--ui-badge-color-opacity: var(--tw-text-opacity, 1);--ui-badge-outline-width: 1px;--ui-badge-outline-opacity: .75;--ui-badge-icon-font-size: .875rem;--ui-badge-gap: .25rem;--ui-badge-focus-opacity: .3;--ui-badge-hover-opacity: .8;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)}:where(.ui-badge) :where(svg){width:1em;height:1em;font-size:var(--ui-badge-icon-font-size)}:where(.ui-badge):where(.is-outline){outline:var(--ui-badge-outline-width) solid rgb(var(--color-accent) / var(--ui-badge-outline-opacity));outline-offset:calc(var(--ui-badge-outline-width) * -1)}:where(.ui-badge):where(.is-outline,.is-muted){--color-current: var(--color-accent);--ui-badge-bg: transparent}:where(.ui-badge):where(.is-muted){background-color:rgb(var(--color-current) / .1)}:where(.ui-badge):where(.is-square,.is-circle){--ui-badge-px: var(--ui-badge-py);--ui-badge-width: var(--ui-badge-height)}:where(.ui-badge):where(.is-circle){--ui-badge-border-radius: var(--rounded-full)}:where(.ui-badge):where(.is-sm){--ui-badge-height: 1.25rem;--ui-badge-font-size: .625rem}:where(.ui-badge):where(.is-lg){--ui-badge-height: 1.75rem}@media (hover: hover) and (pointer: fine){:where(.ui-badge):where([href],button):hover{opacity:var(--ui-badge-hover-opacity)}}:where(.ui-badge):where([href],button):focus-visible{z-index:2;box-shadow:0 0 0 0 rgb(var(--color-current)),0 0 0 max(2px,var(--ui-badge-outline-width)) rgb(var(--color-accent) / var(--ui-badge-focus-opacity))}:where(.ui-badge-group){display:flex}:where(.ui-badge-group) :where(.ui-badge):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(var(--ui-badge-outline-width) * -1)}:where(.ui-badge-group) :where(.ui-badge):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:where(.ui-btn){--color-current: var(--color-light);--ui-btn-width: max-content;--ui-btn-height: 2.25rem;--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-bg: rgb(var(--color-accent) / var(--ui-btn-bg-opacity));--ui-btn-bg-opacity: var(--tw-bg-opacity, 1);--ui-btn-color: rgb(var(--color-current) / var(--ui-btn-color-opacity));--ui-btn-color-opacity: var(--tw-text-opacity, 1);--ui-btn-hover-filter: invert(1);--ui-btn-hover-opacity: .2;--ui-btn-focus-opacity: .3;--ui-btn-disabled-opacity: .7;--ui-btn-outline-width: 2px;--ui-btn-outline-opacity: .5;--ui-btn-icon-font-size: 1.25rem;--ui-btn-gap: .375rem;--ui-btn-loading-width: 1rem;--ui-btn-loading-border-width: 2px;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);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-opacity),var(--transition-background),var(--transition-color);gap:var(--ui-btn-gap)}:where(.ui-btn):before{position:absolute;inset:0;width:100%;height:100%;content:"";background-color:rgb(var(--color-current));filter:var(--ui-btn-hover-filter);z-index:-1;opacity:0;transition:var(--transition-opacity)}:where(.ui-btn) :where(svg){width:1em;height:1em;font-size:var(--ui-btn-icon-font-size)}:where(.ui-btn):where(.is-sm){--ui-btn-height: 2rem;--ui-btn-px: 1rem}:where(.ui-btn):where(.is-lg){--ui-btn-height: 3rem;--ui-btn-px: 1.75rem}:where(.ui-btn):where(.is-wide){padding-left:calc(var(--ui-btn-px) * 2);padding-right:calc(var(--ui-btn-px) * 2)}:where(.ui-btn):where(.is-outline,.is-muted,.is-text){--color-current: var(--color-accent);--ui-btn-hover-opacity: .1;--ui-btn-hover-filter: none;background-color:transparent}:where(.ui-btn):where(.is-outline,.is-muted,.is-text):before{background-color:var(--ui-btn-bg)}:where(.ui-btn):where(.is-outline){--ui-btn-focus-opacity: .15;outline:var(--ui-btn-outline-width) solid rgb(var(--color-accent) / var(--ui-btn-outline-opacity));outline-offset:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn):where(.is-outline-gradient){--ui-btn-focus-opacity: .15;--color-accent: var(--color-default);--color-current: var(--color-accent)}.is-loading.is-hover-fill:where(.ui-btn):where(.is-outline-gradient){--color-current: var(--color-light)}:where(.ui-btn):where(.is-outline-gradient):not(.is-loading):after{content:"";position:absolute;background-color:rgb(var(--color-background));inset:var(--ui-btn-outline-width);border-radius:calc(var(--ui-btn-border-radius) / 1.25);z-index:-1;transition:var(--transition-opacity)}:where(.ui-btn):where(.is-muted){--ui-btn-hover-opacity: .3}:where(.ui-btn):where(.is-muted):before{opacity:.1}:where(.ui-btn):where(.is-raised){--ui-btn-outline-opacity: .15;outline:var(--ui-btn-outline-width) solid rgb(var(--color-current) / var(--ui-btn-outline-opacity));outline-offset:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn):where(.is-hover-fill){--ui-btn-hover-opacity: 1}:where(.ui-btn):where(.is-square,.is-circle){--ui-btn-py: var(--ui-btn-py);--ui-btn-width: var(--ui-btn-height)}:where(.ui-btn):where(.is-circle){--ui-btn-border-radius: var(--rounded-full)}:where(.ui-btn):where(.is-loading){pointer-events:none;color:transparent}:where(.ui-btn):where(.is-loading)>*{opacity:0}:where(.ui-btn):where(.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 rgb(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%}@media (hover: hover) and (pointer: fine){:where(.ui-btn):not(:disabled):hover:before{opacity:var(--ui-btn-hover-opacity)}.is-hover-fill:where(.ui-btn):not(:disabled):hover{--color-current: var(--color-light)}.is-outline-gradient:where(.ui-btn):not(:disabled):hover:before,.is-outline-gradient:where(.ui-btn):not(:disabled):hover:after{opacity:0}}:where(.ui-btn):is(:not(:disabled):active,.is-active):before{opacity:var(--ui-btn-hover-opacity)}.is-hover-fill:where(.ui-btn):is(:not(:disabled):active,.is-active){--color-current: var(--color-light)}.is-outline-gradient:where(.ui-btn):is(:not(:disabled):active,.is-active):before,.is-outline-gradient:where(.ui-btn):is(:not(:disabled):active,.is-active):after{opacity:0}:where(.ui-btn):focus-visible{z-index:2;box-shadow:0 0 0 0 rgb(var(--color-current)),0 0 0 max(2px,var(--ui-btn-outline-width)) rgb(var(--color-accent) / var(--ui-btn-focus-opacity))}:where(.ui-btn):disabled{opacity:var(--ui-btn-disabled-opacity);cursor:not-allowed}:where(.ui-btn-group){display:flex}:where(.ui-btn-group) :where(.ui-btn):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:calc(var(--ui-btn-outline-width) * -1)}:where(.ui-btn-group) :where(.ui-btn):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:where(.ui-checkbox,.ui-radio){--ui-checkbox-width: 1.375rem;--ui-checkbox-font-size: .875rem;--ui-checkbox-gap: .625rem;--ui-checkbox-bg-raw: var(--color-background);--ui-checkbox-bg-opacity: .1;--ui-checkbox-border-color-raw: var(--color-current);--ui-checkbox-border-color-opacity: .2;--ui-checkbox-checked-bg-raw: var(--color-accent);--ui-checkbox-radius: .5rem;--ui-checkbox-icon: var(--icon-check);--ui-checkbox-icon-font-size: 1.125rem;--ui-checkbox-validity-font-size: .875rem;--ui-checkbox-validity-offset: .375rem;--ui-checkbox-box-shadow: none;display:flex;align-items:center;gap:0 var(--ui-checkbox-gap);flex-wrap:wrap;width:-moz-max-content;width:max-content;font-size:var(--ui-checkbox-font-size)}:where(.ui-checkbox,.ui-radio) :where(label[for],input){cursor:pointer}:where(.ui-checkbox,.ui-radio) a{color:rgb(var(--color-accent));text-decoration:underline}:where(.ui-checkbox,.ui-radio) input{--color-current: var(--color-light);display:flex;width:var(--ui-checkbox-width);height:var(--ui-checkbox-width);background-color:rgb(var(--ui-checkbox-bg-raw) / var(--tw-bg-opacity, var(--ui-checkbox-bg-opacity)));border:1px solid rgb(var(--ui-checkbox-border-color-raw) / var(--tw-border-opacity, var(--ui-checkbox-border-color-opacity)));border-radius:var(--ui-checkbox-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;transition:var(--transition-border),var(--transition-background),var(--transition-shadow);box-shadow:var(--ui-checkbox-box-shadow);font-size:var(--ui-checkbox-icon-font-size)}:where(.ui-checkbox,.ui-radio) input:before{line-height:var(--ui-checkbox-icon-font-size);text-indent:0;display:block;transition:var(--transition-color),var(--transition-opacity),var(--transition-transform);color:rgb(var(--color-current));content:"";background-color:currentColor;-webkit-mask:var(--ui-checkbox-icon);mask:var(--ui-checkbox-icon);opacity:0;transform:scale(0);will-change:transform;width:1em;height:1em}:is(:where(.ui-checkbox,.ui-radio) input:where(:required))+*:after{color:rgb(var(--color-error));content:" *"}:where(.ui-checkbox,.ui-radio) input:is(:hover,:focus-visible){--ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);--ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);--tw-border-opacity: .75;--tw-bg-opacity: .1}:where(.ui-checkbox,.ui-radio) input:focus{--ui-checkbox-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-checkbox,.ui-radio) input:checked{--tw-border-opacity: 0;background-color:rgb(var(--ui-checkbox-checked-bg-raw))}:where(.ui-checkbox,.ui-radio) input:checked:before{opacity:1;transform:scale(1)}.is-invalid:where(.ui-checkbox,.ui-radio),.is-validated :where(.ui-checkbox,.ui-radio) :where(input):invalid{--ui-checkbox-bg-raw: var(--color-error);--ui-checkbox-border-color-raw: var(--color-error);--ui-checkbox-checked-bg-raw: var(--color-error);--color-current: var(--color-error);--tw-border-opacity: 1}:where(.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)}:where(.ui-heading):where(.is-sm){--ui-heading-font-size: 1.125rem;--ui-heading-line-height-ratio: .125rem}:where(.ui-heading):where(.is-lg){--ui-heading-font-size: 1.875rem}:where(.ui-image){--ui-image-bg: rgb(var(--color-background-200));--ui-image-border-radius: 0;position:relative;display:block;background-color:var(--ui-image-bg);border-radius:var(--ui-image-border-radius)}:where(.ui-image)>*{width:100%;height:100%;border-radius:inherit}:where(.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)}:root{--ui-input-height: 3rem}:where(.ui-input,.ui-select){--ui-input-height-textarea: 8rem;--ui-input-pt-floating: 1.25rem;--ui-input-pb-floating: .4375rem;--ui-input-py: .875rem;--ui-input-px: .875rem;--ui-input-pl: var(--ui-input-px);--ui-input-pr: var(--ui-input-px);--ui-input-bg: rgb(var(--color-background));--ui-input-color: currentColor;--ui-input-placeholder-color: currentColor;--ui-input-placeholder-opacity: .5;--ui-input-font-size: .875rem;--ui-input-font-weight: var(--font-medium);--ui-input-border-width: 1px;--ui-input-border-color: var(--color-current);--ui-input-border-opacity: .15;--ui-input-border-radius: var(--rounded);--ui-input-box-shadow: none;--ui-input-icon-font-size: 1.25rem;--ui-input-icon-count-l: 1;--ui-input-icon-count-r: 1;--ui-input-icon-gap: .375rem;--ui-input-icon-inset-x: calc(var(--ui-input-px) - .25rem);--ui-input-icon-inset-x-gap: .125rem;--ui-input-icon-offset-l: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-l));--ui-input-icon-offset-r: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-r));--ui-input-label-floating-font-size: var(--ui-label-font-size);--ui-input-label-floating-font-weight: var(--ui-label-font-weight);--ui-input-label-floating-focus-transform: translateY(-.6875rem) scale(.8);--ui-input-label-floating-focus-opacity: .5;display:grid;grid-template-areas:"input";font-size:var(--ui-input-font-size);position:relative}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-30-15]{--ui-input-pl: var(--ui-input-icon-offset-l)}:where(.ui-input,.ui-select):has(.icon-l){--ui-input-pl: var(--ui-input-icon-offset-l)}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-1m-2w-2p-37-14-1a-2x-2r-33-32-19-36-15]{--ui-input-pr: var(--ui-input-icon-offset-r)}:where(.ui-input,.ui-select):has(.icon-r){--ui-input-pr: var(--ui-input-icon-offset-r)}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-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){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select):has(.icon-l > *:nth-child(2)){--ui-input-icon-count-r: 2}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-39-2x-19-2x-32-34-39-38-18-w-1a-39-2x-19-37-2t-30-2t-2r-38-15-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){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select):has(.icon-r > *:nth-child(2)){--ui-input-icon-count-r: 2}:where(.ui-input,.ui-select) :where(svg){font-size:var(--ui-input-icon-font-size);width:1em;height:var(--ui-input-height)}:where(.ui-input,.ui-select) :where(input,textarea,select){grid-area:input;background-clip:padding-box;background-color:var(--ui-input-bg);padding:var(--ui-input-py) var(--ui-input-pr) var(--ui-input-py) var(--ui-input-pl);transition:var(--transition-border),var(--transition-shadow);box-shadow:var(--ui-input-box-shadow);line-height:normal;font-size:inherit;height:var(--ui-input-height);font-weight:var(--ui-input-font-weight);border-radius:var(--ui-input-border-radius);color:var(--ui-input-color);border:var(--ui-input-border-width) solid rgb(var(--ui-input-border-color) / var(--ui-input-border-opacity))}:where(.ui-input,.ui-select) :where(input,textarea,select):focus{--ui-input-border-opacity: 1;--ui-input-border-color: var(--color-accent);--ui-input-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-accent) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-input,.ui-select) :where(input,textarea,select):disabled{cursor:default;background-color:rgb(var(--color-default) / .1)}:is(:where(.ui-input,.ui-select) :where(input,textarea,select)):required~label:after{color:rgb(var(--color-error));content:" *"}:where(.ui-input,.ui-select) :where(input,textarea)::-moz-placeholder{color:var(--ui-input-placeholder-color);opacity:var(--ui-input-placeholder-opacity)}:where(.ui-input,.ui-select) :where(input,textarea)::placeholder{color:var(--ui-input-placeholder-color);opacity:var(--ui-input-placeholder-opacity)}:where(.ui-input,.ui-select) :where(textarea){resize:vertical;overflow:hidden;min-height:var(--ui-input-height-textarea)}:where(.ui-input,.ui-select) :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-input-icon-gap);transition:var(--transition-opacity)}:where(.ui-input,.ui-select) :where([class^="icon-"]):where(.icon-l){left:var(--ui-input-icon-inset-x);margin-right:auto}:where(.ui-input,.ui-select) :where([class^="icon-"]):where(.icon-r){right:var(--ui-input-icon-inset-x);margin-left:auto}:where(.ui-input,.ui-select) :where([aria-label]):after{content:attr(aria-label);font-size:var(--ui-input-font-size);min-width:var(--ui-input-icon-font-size);text-align:center;line-height:var(--ui-input-icon-font-size);display:block}:where(.ui-input,.ui-select) :where([class*="lib-hint"]):after{white-space:normal;line-height:1.5;word-wrap:normal;width:10rem;font-weight:var(--font-normal);font-size:.75rem}:where(.ui-input,.ui-select):where(.is-floating){--ui-input-placeholder-color: transparent}:where(.ui-input,.ui-select):where(.is-floating) :where(label){grid-area:input;align-self:start;pointer-events:none;transition:transform .4s 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-input-label-floating-font-weight);margin-left:var(--ui-input-pl);margin-right:var(--ui-input-pr);line-height:var(--ui-input-label-floating-font-size);margin-top:calc(var(--ui-input-height) / 2 - (var(--ui-input-font-size) / 2))}:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select){padding-top:calc(var(--ui-input-pt-floating));padding-bottom:calc(var(--ui-input-pb-floating))}:is(:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select)):is(:focus,:not(:-moz-placeholder-shown))~label{transform:var(--ui-input-label-floating-focus-transform);opacity:var(--ui-input-label-floating-focus-opacity)}:is(:where(.ui-input,.ui-select):where(.is-floating) :where(input,textarea,select)):is(:focus,:not(:placeholder-shown))~label{transform:var(--ui-input-label-floating-focus-transform);opacity:var(--ui-input-label-floating-focus-opacity)}.is-invalid:where(.ui-input,.ui-select),.is-validated :where(.ui-input,.ui-select) :where(input,textarea,select):invalid{--ui-input-bg: rgb(var(--color-error) / .1);--ui-input-border-opacity: 1;--ui-input-border-color: var(--color-error);--ui-input-color: rgb(var(--color-error));--color-accent: var(--color-error)}:where(.ui-input-group){display:flex;align-items:flex-end;flex-wrap:wrap}:where(.ui-input-group) :where(.ui-btn){--ui-btn-outline-width: 1px;--ui-btn-height: var(--ui-input-height)}:where(.ui-input-group)>*:not(:first-child){margin-left:calc(var(--ui-input-border-width) * -1)}:where(.ui-input-group)>*:not(:first-child),:where(.ui-input-group)>*:not(:first-child) :where(input,select){border-top-left-radius:0;border-bottom-left-radius:0}:where(.ui-input-group)>*:not(:last-child),:where(.ui-input-group)>*:not(:last-child) :where(input,select){border-top-right-radius:0;border-bottom-right-radius:0}:root{--ui-label-font-size: .875rem;--ui-label-font-weight: var(--font-medium)}:where(.ui-label){font-size:var(--ui-label-font-size);font-weight:var(--ui-label-font-weight)}:where(.ui-link){--ui-link-font-size: .875rem;--ui-link-font-weight: var(--font-semibold);--ui-link-hover-color: rgb(var(--color-accent));--ui-link-hover-opacity: .7;--ui-link-underline-width: 1px;--ui-link-underline-opacity: 0;--ui-link-underline-transform: translateY(-.125rem);font-size:var(--ui-link-font-size);font-weight:var(--ui-link-font-weight);transition:var(--transition-opacity);display:flex;align-items:center;position:relative}@media (hover: hover) and (pointer: fine){:where(.ui-link):hover{--ui-link-underline-opacity: 1;--ui-link-underline-transform: none;color:var(--ui-link-hover-color)}}:where(.ui-link):active{opacity:var(--ui-link-hover-opacity)}:where(.ui-link):where(:focus-visible){--ui-link-underline-opacity: 1;--ui-link-underline-transform: none}:where(.ui-link):where(.is-underline):after{content:"";border-bottom:var(--ui-link-underline-width) solid currentColor;opacity:var(--ui-link-underline-opacity);position:absolute;inset:auto 0 0 0;transition:var(--transition-opacity),var(--transition-transform);transform:var(--ui-link-underline-transform)}:where(.ui-notice){--color-current: var(--color-accent);--ui-notice-bg: rgb(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-opacity: .1;--ui-notice-gap: 1rem;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);color:rgb(var(--color-current));gap:var(--ui-notice-gap)}:where(.ui-notice) :where(hr){--tw-border-opacity: .2}:where(.ui-notice):before,:where(.ui-notice):after{position:absolute;inset:0;border-radius:var(--ui-notice-border-radius);z-index:-1;content:""}:where(.ui-notice):before{background-color:var(--ui-notice-bg);opacity:var(--ui-notice-outline-opacity)}:where(.ui-notice):after{box-shadow:inset 0 0 0 1px var(--ui-notice-bg);opacity:var(--ui-notice-outline-opacity)}:where(.ui-progress){--ui-progress-height: 1rem;--ui-progress-border-radius: var(--rounded-full);--ui-progress-bg: var(--color-background-200);--ui-progress-bg-opacity: 1;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:0;height:var(--ui-progress-height);border-radius:var(--ui-progress-border-radius);background-color:rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity));color:rgb(var(--color-accent));width:100%}.is-sm:where(.ui-progress){--ui-progress-height: .5rem}.is-lg:where(.ui-progress){--ui-progress-height: 1.5rem}:where(.ui-progress)::-webkit-progress-bar{background-color:transparent}:where(.ui-progress)::-webkit-progress-value{background-color:currentColor;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress)::-moz-progress-bar{background-color:currentColor;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress):indeterminate{animation:1.5s linear 0s forwards infinite move-indeterminate;background-image:linear-gradient(to right,currentColor 30%,rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity)) 30%);background-position:top left;background-repeat:no-repeat;background-size:150% 150%;border-radius:var(--ui-progress-border-radius)}:where(.ui-progress):indeterminate::-moz-progress-bar{background-color:transparent}:where(.ui-radio){--ui-checkbox-icon: var(--icon-radio);--ui-checkbox-radius: 50%}:where(.ui-select){--ui-input-icon-select-icon-font-size: 1.5rem;--ui-input-icon-count-r: 2;--ui-input-pr: var(--ui-input-icon-offset-r)}:where(.ui-select) :where([class^="icon-"]){margin-right:calc(var(--ui-input-icon-font-size) + var(--ui-input-icon-gap))}:where(.ui-select):after{width:1em;height:1em;background-color:currentColor;content:"";position:absolute;z-index:1;font-size:var(--ui-input-icon-select-icon-font-size);right:calc(var(--ui-input-height) / 4);top:calc(var(--ui-input-height) / 2);margin-top:calc(var(--ui-input-icon-select-icon-font-size) / 2 * -1);will-change:transform;transition:transform .2s;-webkit-mask:var(--icon-angle-down);mask:var(--icon-angle-down);pointer-events:none;grid-area:input}:where(.ui-switch){--ui-switch-width: 3rem;--ui-switch-height: 1.5rem;--ui-switch-padding: .375rem;--ui-switch-bg-raw: var(--color-dark);--ui-switch-radius: 999px;--ui-switch-validity-font-size: .875rem;--ui-switch-validity-offset: .375rem;--ui-switch-box-shadow: none}.dark :where(.ui-switch){--ui-switch-bg-raw: var(--color-background-300)}:where(.ui-switch){display:flex;align-items:center;flex-wrap:wrap;width:-moz-max-content;width:max-content}:where(.ui-switch):where(.is-sm){--ui-switch-width: 2.5rem;--ui-switch-height: 1.25rem}:where(.ui-switch):where(.is-lg){--ui-switch-width: 4rem;--ui-switch-height: 2rem}:where(.ui-switch) input{width:var(--ui-switch-width);height:var(--ui-switch-height);display:block;position:relative;border-radius:var(--ui-switch-radius);background-color:rgb(var(--ui-switch-bg-raw));transition:var(--transition-background),var(--transition-shadow);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;color:inherit;box-shadow:var(--ui-switch-box-shadow)}:where(.ui-switch) input:before{width:calc(var(--ui-switch-height) - var(--ui-switch-padding));height:calc(var(--ui-switch-height) - var(--ui-switch-padding));background-color:rgb(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%)}:where(.ui-switch) input:disabled{opacity:.8;pointer-events:none}:where(.ui-switch) input:focus{--ui-switch-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-current) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-switch) input:checked{background-color:rgb(var(--color-accent))}:where(.ui-switch) input:checked:focus{--ui-switch-box-shadow: 0 0 0 0 rgb(var(--color-current)), 0 0 0 3px rgb(var(--color-accent) / .2), 0 1px 2px 0 rgb(var(--color-current) / .05)}:where(.ui-switch) input:checked:before{background-color:rgb(var(--color-light));left:100%}:where(.ui-text){--ui-text-size: .875rem;--ui-text-size-line: .75rem;--ui-text-weight: var(--font-normal);--ui-text-weight-bold: var(--font-semibold);font-weight:var(--ui-text-weight);font-size:var(--ui-text-size);line-height:calc(var(--ui-text-size) + var(--ui-text-size-line))}:where(.ui-text):where(.is-lg){--ui-text-size: 1.125rem}:where(.ui-text) :where(a){text-decoration:underline;transition:var(--transition-color);color:rgb(var(--color-accent))}@media (hover: hover) and (pointer: fine){:where(.ui-text) :where(a):hover{color:rgb(var(--color-accent) / .7)}}:where(.ui-text) :where(a):focus-visible{color:rgb(var(--color-accent) / .7)}:where(.ui-text) :where(b,strong){font-weight:var(--ui-text-weight-bold)}:where(.ui-text) :where(i,em){display:inline;font-style:italic}:where(.ui-text) :where(figure){margin:1rem 0}@media (min-width: 48em){:where(.ui-text) :where(figure){margin:2rem 0}}:where(.ui-text) :where(figure) :where(figcaption){font-size:.875rem;font-weight:var(--font-semibold);margin-top:.875rem}:where(.ui-text) :where(img){height:auto!important}:where(.ui-text) :where(p){line-height:inherit;margin:0 0 .25rem}:where(.ui-text) :where(p):empty{line-height:1rem}:where(.ui-text) :where(p):after{content:"\a0"}:where(.ui-text) :where(hr){margin:1.25rem 0}:where(.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:0 0 1.25rem}:where(.ui-text) h1{--ui-text-heading-size: 2.25rem}:where(.ui-text) h2{--ui-text-heading-size: 1.75rem}:where(.ui-text) :where(h3,h4){--ui-text-heading-size: 1.25rem}:where(.ui-text) :where(table){border:0;min-width:100%}:where(.ui-text) :where(table) :where(td,th){padding:1rem 1.125rem;text-align:left}:where(.ui-text) :where(table) :where(thead){font-weight:var(--ui-text-weight-bold);border-bottom:1px solid rgb(var(--color-current) / .075)}:where(.ui-text) :where(table) :where(tbody tr):nth-of-type(even){background-color:rgb(var(--color-current) / .05)}:where(.ui-text) :where(iframe){max-width:100%}:where(.ui-text) :where(blockquote){background-color:rgb(var(--color-current) / .075);border-left:.3125rem solid rgb(var(--color-accent) / 1);padding:1.25em 1.5em;margin:0;font-size:inherit}:where(.ui-text) :where(code){margin:0;border-radius:var(--rounded-xs);padding:.25rem .5rem;font-size:.85em;color:#476582;font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background-color:#1b1f230d}.dark :is(:where(.ui-text) :where(code)){background-color:rgb(var(--color-background-100));color:rgb(var(--color-primary))}:where(.ui-text) :where(ol){margin:0 0 1.5rem;padding:0 0 0 1rem}:where(.ui-text) :where(ol) :where(li){padding-left:.5rem}:where(.ui-text) :where(ol) :where(li)::marker{color:rgb(var(--color-accent))}:where(.ui-text) :where(ul){list-style-type:none!important;margin:0 0 1.5rem;padding:0}:where(.ui-text) :where(ul) :where(li){position:relative;line-height:inherit;padding-left:1.5rem}:where(.ui-text) :where(ul) :where(li):not(:last-of-type){margin:0 0 .5rem}:where(.ui-text) :where(ul) :where(li):before{width:.25rem;height:.25rem;position:absolute;content:"";border:1px solid rgb(var(--color-accent));background-color:rgb(var(--color-accent));left:0;top:.625rem;text-indent:0;border-radius:50%}:where(.ui-text) [style*=square]:where(ul) li:before{border-radius:0}:where(.ui-text) [style*=circle]:where(ul) li:before{border-radius:50%;background-color:transparent}:where(.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)}:where(.ui-title):where(.is-sm){--ui-title-font-size: .75rem}:where(.ui-title):where(.is-lg){--ui-title-font-size: 1.125rem}:where(.c-field){--c-field-gap: .5rem;display:flex;flex-direction:column;gap:var(--c-field-gap)}.js-has-pseudo [csstools-has-1a-2x-37-19-3a-2p-30-2x-2s-2p-38-2t-2s-w-1m-3b-2w-2t-36-2t-14-1a-2r-19-2u-2x-2t-30-2s-15-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){display:block}.is-validated :where(.c-field):has(:invalid) :where(.ui-info[hidden]){display:block}:where(.c-field):where(.is-horizontal){align-items:flex-start;flex-direction:row}:where(.c-field):where(.is-horizontal) :where(.ui-label){min-height:var(--ui-input-height);align-items:center;display:flex}:where(.c-field):where(.is-horizontal)>:where(.col){gap:var(--c-field-gap);justify-content:center}.js-has-pseudo [csstools-has-1m-3b-2w-2t-36-2t-14-1a-2r-19-2u-2x-2t-30-2s-15-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]:after{color:rgb(var(--color-error));content:" *"}:where(.c-field):has([required]) :where(.ui-label):after{color:rgb(var(--color-error));content:" *"}:where(.c-field) :where(.is-input-offset){min-height:var(--ui-input-height);justify-content:center}
|
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-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-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: }.col-span-4{grid-column:span 4 / span 4}.col-span-6{grid-column:span 6 / span 6}.col-span-3{grid-column:span 3 / span 3}.col-span-12{grid-column:span 12 / span 12}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.w-full{width:100%}.w-24{width:6rem}.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-4{gap:1rem}.gap-2{gap:.5rem}.gap-8{gap:2rem}.rounded-full{border-radius:var(--rounded-full)}.rounded{border-radius:var(--rounded)}.bg-blue-100\/10{background-color:#dbeafe1a}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(var(--color-secondary) / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-accent{--tw-bg-opacity: 1;background-color:rgb(var(--color-accent) / var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.bg-info{--tw-bg-opacity: 1;background-color:rgb(var(--color-info) / var(--tw-bg-opacity))}.bg-warning{--tw-bg-opacity: 1;background-color:rgb(var(--color-warning) / var(--tw-bg-opacity))}.bg-error{--tw-bg-opacity: 1;background-color:rgb(var(--color-error) / var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity: 1;background-color:rgb(var(--color-success) / var(--tw-bg-opacity))}.bg-light{--tw-bg-opacity: 1;background-color:rgb(var(--color-light) / var(--tw-bg-opacity))}.bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.bg-default{--tw-bg-opacity: 1;background-color:rgb(var(--color-default) / var(--tw-bg-opacity))}.bg-current{--tw-bg-opacity: 1;background-color:rgb(var(--color-current) / var(--tw-bg-opacity))}.bg-background{--tw-bg-opacity: 1;background-color:rgb(var(--color-background) / 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;--tw-gradient-to: rgb(147 51 234 / 0);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6}.p-md{padding:var(--spacing-md)}.p-xs{padding:var(--spacing-xs)}.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-primary{font-family:var(--font-primary)}.font-secondary{font-family:var(--font-secondary)}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:var(--font-bold)}.font-light{font-weight:var(--font-light)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-extrabold{font-weight:var(--font-extrabold)}.uppercase{text-transform:uppercase}.
|
|
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-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-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: }.col-span-4{grid-column:span 4 / span 4}.col-span-6{grid-column:span 6 / span 6}.col-span-3{grid-column:span 3 / span 3}.col-span-12{grid-column:span 12 / span 12}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.w-full{width:100%}.w-24{width:6rem}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}.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-4{gap:1rem}.gap-2{gap:.5rem}.gap-8{gap:2rem}.rounded-full{border-radius:var(--rounded-full)}.rounded{border-radius:var(--rounded)}.bg-blue-100\/10{background-color:#dbeafe1a}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(var(--color-secondary) / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-accent{--tw-bg-opacity: 1;background-color:rgb(var(--color-accent) / var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.bg-info{--tw-bg-opacity: 1;background-color:rgb(var(--color-info) / var(--tw-bg-opacity))}.bg-warning{--tw-bg-opacity: 1;background-color:rgb(var(--color-warning) / var(--tw-bg-opacity))}.bg-error{--tw-bg-opacity: 1;background-color:rgb(var(--color-error) / var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity: 1;background-color:rgb(var(--color-success) / var(--tw-bg-opacity))}.bg-light{--tw-bg-opacity: 1;background-color:rgb(var(--color-light) / var(--tw-bg-opacity))}.bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.bg-default{--tw-bg-opacity: 1;background-color:rgb(var(--color-default) / var(--tw-bg-opacity))}.bg-current{--tw-bg-opacity: 1;background-color:rgb(var(--color-current) / var(--tw-bg-opacity))}.bg-background{--tw-bg-opacity: 1;background-color:rgb(var(--color-background) / 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;--tw-gradient-to: rgb(147 51 234 / 0);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6}.p-md{padding:var(--spacing-md)}.p-xs{padding:var(--spacing-xs)}.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-primary{font-family:var(--font-primary)}.font-secondary{font-family:var(--font-secondary)}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:var(--font-bold)}.font-light{font-weight:var(--font-light)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-extrabold{font-weight:var(--font-extrabold)}.uppercase{text-transform:uppercase}.accent-current{--color-accent: var(--color-current);accent-color:rgb(var(--color-accent))}.accent-background{--color-accent: var(--color-background);accent-color:rgb(var(--color-accent))}.accent-default{--color-accent: var(--color-default);accent-color:rgb(var(--color-accent))}.accent-light{--color-accent: var(--color-light);accent-color:rgb(var(--color-accent))}.accent-dark{--color-accent: var(--color-dark);accent-color:rgb(var(--color-accent))}.accent-primary{--color-accent: var(--color-primary);accent-color:rgb(var(--color-accent))}.accent-secondary{--color-accent: var(--color-secondary);accent-color:rgb(var(--color-accent))}.accent-warning{--color-accent: var(--color-warning);accent-color:rgb(var(--color-accent))}.accent-error{--color-accent: var(--color-error);accent-color:rgb(var(--color-accent))}.accent-info{--color-accent: var(--color-info);accent-color:rgb(var(--color-accent))}.accent-success{--color-accent: var(--color-success);accent-color:rgb(var(--color-accent))}.accent-accent{--color-accent: var(--color-accent);accent-color:rgb(var(--color-accent))}.text-current{--color-current: var(--color-current);color:rgb(var(--color-current))}.text-background{--color-current: var(--color-background);color:rgb(var(--color-current))}.text-default{--color-current: var(--color-default);color:rgb(var(--color-current))}.text-light{--color-current: var(--color-light);color:rgb(var(--color-current))}.text-dark{--color-current: var(--color-dark);color:rgb(var(--color-current))}.text-primary{--color-current: var(--color-primary);color:rgb(var(--color-current))}.text-secondary{--color-current: var(--color-secondary);color:rgb(var(--color-current))}.text-warning{--color-current: var(--color-warning);color:rgb(var(--color-current))}.text-error{--color-current: var(--color-error);color:rgb(var(--color-current))}.text-info{--color-current: var(--color-info);color:rgb(var(--color-current))}.text-success{--color-current: var(--color-success);color:rgb(var(--color-current))}.text-accent{--color-current: var(--color-accent);color:rgb(var(--color-current))}:where(.col){display:flex;flex-direction:column}:where(.container):where(.is-sm){--container-width: var(--container-width-sm)}.dark .dark\:bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.dark .dark\:text-light{--color-current: var(--color-light);color:rgb(var(--color-current))}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "winduum",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -9,25 +9,28 @@
|
|
|
9
9
|
"build-prod": "vite build -c vite.config.prod.js",
|
|
10
10
|
"eslint": "eslint '**/*.js' --fix",
|
|
11
11
|
"stylelint": "npx stylelint '**/*.css' --fix",
|
|
12
|
-
"tailwind
|
|
12
|
+
"tailwind": "rollup utils/tailwind.js --file utils/tailwind.cjs -f cjs --exports named"
|
|
13
|
+
},
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"lodash": "^4.17.21"
|
|
13
16
|
},
|
|
14
17
|
"devDependencies": {
|
|
15
18
|
"@vitejs/plugin-vue": "^4.0.0",
|
|
16
19
|
"autoprefixer": "^10.4.13",
|
|
17
|
-
"css-has-pseudo": "^
|
|
18
|
-
"eslint": "^8.
|
|
20
|
+
"css-has-pseudo": "^5.0.1",
|
|
21
|
+
"eslint": "^8.33.0",
|
|
19
22
|
"eslint-config-standard": "^17.0.0",
|
|
20
23
|
"postcss": "^8.4.21",
|
|
21
|
-
"postcss-custom-media": "^9.
|
|
22
|
-
"postcss-custom-properties": "^
|
|
23
|
-
"postcss-custom-selectors": "^7.
|
|
24
|
+
"postcss-custom-media": "^9.1.1",
|
|
25
|
+
"postcss-custom-properties": "^13.1.1",
|
|
26
|
+
"postcss-custom-selectors": "^7.1.1",
|
|
24
27
|
"postcss-import": "^15.1.0",
|
|
25
|
-
"postcss-nesting": "^
|
|
28
|
+
"postcss-nesting": "^11.1.0",
|
|
26
29
|
"stylelint-config-standard": "^29.0.0",
|
|
27
30
|
"tailwindcss": "^3.2.4",
|
|
28
31
|
"fast-glob": "^3.2.12",
|
|
29
|
-
"vite": "^4.
|
|
30
|
-
"vue": "^3.2.
|
|
32
|
+
"vite": "^4.1.1",
|
|
33
|
+
"vue": "^3.2.47"
|
|
31
34
|
},
|
|
32
35
|
"files": [
|
|
33
36
|
"index.js",
|
|
@@ -37,8 +40,9 @@
|
|
|
37
40
|
"utils"
|
|
38
41
|
],
|
|
39
42
|
"exports": {
|
|
40
|
-
".": "./
|
|
41
|
-
"./tailwind
|
|
43
|
+
".": "./utils/tailwind.cjs",
|
|
44
|
+
"./tailwind-cjs": "./utils/tailwind.cjs",
|
|
45
|
+
"./tailwind-esm": "./utils/tailwind.js",
|
|
42
46
|
"./main.css": "./dist/main.css",
|
|
43
47
|
"./tailwind.css": "./dist/tailwind.css",
|
|
44
48
|
"./src/*": "./src/*",
|
package/src/App.vue
CHANGED
package/src/form.html
CHANGED
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
</div>
|
|
81
81
|
</div>
|
|
82
82
|
<div class="c-field col-span-12">
|
|
83
|
-
<div class="ui-checkbox">
|
|
83
|
+
<div class="ui-checkbox is-required">
|
|
84
84
|
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
|
|
85
85
|
<label class="form-check-label" for="invalidCheck">
|
|
86
86
|
Agree to terms and conditions
|
package/src/index.html
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -13,14 +13,14 @@
|
|
|
13
13
|
flex-direction: column;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.container {
|
|
16
|
+
:where(.container) {
|
|
17
17
|
margin-left: auto;
|
|
18
18
|
margin-right: auto;
|
|
19
19
|
padding-left: var(--container-padding);
|
|
20
20
|
padding-right: var(--container-padding);
|
|
21
21
|
max-width: var(--container-width);
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
&:where(.is-sm) {
|
|
24
24
|
--container-width: var(--container-width-sm);
|
|
25
25
|
}
|
|
26
26
|
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/src/styles/main.css
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
@import "
|
|
2
|
-
@import "
|
|
3
|
-
@import "
|
|
4
|
-
@import "
|
|
5
|
-
@import "
|
|
6
|
-
@import "
|
|
7
|
-
@import "
|
|
8
|
-
@import "
|
|
9
|
-
@import "
|
|
10
|
-
@import "
|
|
1
|
+
@import "base/reset.css";
|
|
2
|
+
@import "base/default.css";
|
|
3
|
+
@import "base/config.css";
|
|
4
|
+
@import "base/icons.css";
|
|
5
|
+
@import "base/keyframes.css";
|
|
6
|
+
@import "base/theme/default.css";
|
|
7
|
+
@import "base/theme/dark.css";
|
|
8
|
+
@import "ui/+.css";
|
|
9
|
+
@import "components/+.css";
|
|
10
|
+
@import "libraries/+.css";
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "
|
|
1
|
+
@import "base/tailwind/base.css";
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -63,6 +63,13 @@
|
|
|
63
63
|
height: 1em;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
+
&:where(:required) {
|
|
67
|
+
& + *::after {
|
|
68
|
+
color: rgb(var(--color-error));
|
|
69
|
+
content: " *";
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
66
73
|
&:is(:hover, :focus-visible) {
|
|
67
74
|
--ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);
|
|
68
75
|
--ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);
|
|
@@ -70,22 +77,30 @@
|
|
|
70
77
|
--tw-bg-opacity: 0.1;
|
|
71
78
|
}
|
|
72
79
|
|
|
80
|
+
&:focus {
|
|
81
|
+
--ui-checkbox-box-shadow:
|
|
82
|
+
0 0 0 0 rgb(var(--color-current)),
|
|
83
|
+
0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / 0.2),
|
|
84
|
+
0 1px 2px 0 rgb(var(--color-current) / 0.05);
|
|
85
|
+
}
|
|
86
|
+
|
|
73
87
|
&:checked {
|
|
74
88
|
--tw-border-opacity: 0;
|
|
75
89
|
|
|
76
90
|
background-color: rgb(var(--ui-checkbox-checked-bg-raw));
|
|
77
91
|
|
|
78
|
-
&:focus {
|
|
79
|
-
--ui-checkbox-box-shadow:
|
|
80
|
-
0 0 0 0 rgb(var(--color-current)),
|
|
81
|
-
0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / 0.2),
|
|
82
|
-
0 1px 2px 0 rgb(var(--color-current) / 0.05);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
92
|
&::before {
|
|
86
93
|
opacity: 1;
|
|
87
94
|
transform: scale(1);
|
|
88
95
|
}
|
|
89
96
|
}
|
|
90
97
|
}
|
|
98
|
+
|
|
99
|
+
@nest &.is-invalid, .is-validated & :where(input):invalid {
|
|
100
|
+
--ui-checkbox-bg-raw: var(--color-error);
|
|
101
|
+
--ui-checkbox-border-color-raw: var(--color-error);
|
|
102
|
+
--ui-checkbox-checked-bg-raw: var(--color-error);
|
|
103
|
+
--color-current: var(--color-error);
|
|
104
|
+
--tw-border-opacity: 1;
|
|
105
|
+
}
|
|
91
106
|
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/tailwind.config.cjs
CHANGED
|
@@ -1,61 +1,9 @@
|
|
|
1
|
-
const { tailwindColors, tailwindVariables, tailwindColorsAccent, tailwindColorsCurrent, tailwindAnimations } = require('./utils/helpers.cjs')
|
|
2
|
-
const plugin = require('tailwindcss/plugin')
|
|
3
|
-
|
|
4
|
-
const colors = [
|
|
5
|
-
'background', 'default', 'light', 'dark', 'primary', 'secondary',
|
|
6
|
-
'warning', 'error', 'info', 'success', 'accent', `current`
|
|
7
|
-
]
|
|
8
|
-
|
|
9
|
-
const animations = [
|
|
10
|
-
'fade-in', 'fade-out'
|
|
11
|
-
]
|
|
12
|
-
|
|
13
1
|
module.exports = {
|
|
14
2
|
darkMode: 'class',
|
|
15
3
|
content: [
|
|
16
4
|
'./src/**/*.{js,html}'
|
|
17
5
|
],
|
|
18
|
-
corePlugins: {
|
|
19
|
-
preflight: false,
|
|
20
|
-
container: false,
|
|
21
|
-
accentColor: false
|
|
22
|
-
},
|
|
23
|
-
theme: {
|
|
24
|
-
extend: {
|
|
25
|
-
colors: tailwindColors(colors),
|
|
26
|
-
fontFamily: tailwindVariables('font', ['primary', 'secondary']),
|
|
27
|
-
fontWeight: tailwindVariables('font', ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold']),
|
|
28
|
-
zIndex: tailwindVariables('z', [10, 20, 30, 40, 50, 60], {
|
|
29
|
-
0: 0,
|
|
30
|
-
auto: 'auto'
|
|
31
|
-
}),
|
|
32
|
-
spacing: tailwindVariables('spacing', ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'section']),
|
|
33
|
-
borderRadius: tailwindVariables('rounded', ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'full'], {
|
|
34
|
-
DEFAULT: 'var(--rounded)'
|
|
35
|
-
}),
|
|
36
|
-
screens: {
|
|
37
|
-
'xs': '22.5em',
|
|
38
|
-
'sm': '26em',
|
|
39
|
-
'md': '48em',
|
|
40
|
-
'lg': '60em',
|
|
41
|
-
'xl': '76em',
|
|
42
|
-
'2xl': '82em',
|
|
43
|
-
'3xl': '88em',
|
|
44
|
-
'4xl': '100em',
|
|
45
|
-
'xxl': '126em',
|
|
46
|
-
'2xxl': '158em'
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
},
|
|
50
6
|
plugins: [
|
|
51
|
-
|
|
52
|
-
addUtilities(tailwindColorsAccent(colors))
|
|
53
|
-
}),
|
|
54
|
-
plugin(({ addUtilities }) => {
|
|
55
|
-
addUtilities(tailwindColorsCurrent(colors))
|
|
56
|
-
}),
|
|
57
|
-
plugin(({ addUtilities }) => {
|
|
58
|
-
addUtilities(tailwindAnimations(animations))
|
|
59
|
-
})
|
|
7
|
+
require('winduum')()
|
|
60
8
|
],
|
|
61
9
|
}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var plugin = require('tailwindcss/plugin');
|
|
4
|
+
var twColors = require('tailwindcss/colors');
|
|
5
|
+
var lodash = require('lodash');
|
|
6
|
+
|
|
7
|
+
const defaultConfig = {
|
|
8
|
+
colors: [
|
|
9
|
+
'background', 'default', 'light', 'dark', 'primary', 'secondary',
|
|
10
|
+
'warning', 'error', 'info', 'success', 'accent', `current`
|
|
11
|
+
],
|
|
12
|
+
fontFamily: ['primary', 'secondary'],
|
|
13
|
+
fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
|
|
14
|
+
zIndex: [10, 20, 30, 40, 50, 60],
|
|
15
|
+
spacing: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'section'],
|
|
16
|
+
borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'full'],
|
|
17
|
+
animations: ['fade-in', 'fade-out'],
|
|
18
|
+
screens: {
|
|
19
|
+
'xs': '22.5em',
|
|
20
|
+
'sm': '26em',
|
|
21
|
+
'md': '48em',
|
|
22
|
+
'lg': '60em',
|
|
23
|
+
'xl': '76em',
|
|
24
|
+
'2xl': '82em',
|
|
25
|
+
'3xl': '88em',
|
|
26
|
+
'4xl': '100em',
|
|
27
|
+
'xxl': '126em',
|
|
28
|
+
'2xxl': '158em'
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
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)
|
|
33
|
+
.substring(1).match(/.{2}/g)
|
|
34
|
+
.map(x => parseInt(x, 16));
|
|
35
|
+
|
|
36
|
+
const getTailwindColors = (twColors) => {
|
|
37
|
+
const accentColors = [];
|
|
38
|
+
|
|
39
|
+
Object.keys(twColors).forEach(color => {
|
|
40
|
+
if (color.match(/(lightBlue|warmGray|trueGray|coolGray|blueGray)/)) {
|
|
41
|
+
return
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if (typeof twColors[color] === "object") {
|
|
45
|
+
Object.keys(twColors[color]).forEach(variant => {
|
|
46
|
+
accentColors.push([`${color.replace(/[A-Z]/g, m => "-" + m.toLowerCase())}-${variant}`, twColors[color][variant]]);
|
|
47
|
+
});
|
|
48
|
+
} else {
|
|
49
|
+
accentColors.push([color, twColors[color]]);
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
return accentColors
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const tailwindColors = (colors = []) => {
|
|
57
|
+
colors.forEach(name => {
|
|
58
|
+
colors[name] = ({ opacityValue }) => {
|
|
59
|
+
if (opacityValue === undefined) {
|
|
60
|
+
return `rgb(var(--color-${name}))`
|
|
61
|
+
}
|
|
62
|
+
return `rgb(var(--color-${name}) / ${opacityValue})`
|
|
63
|
+
};
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
return colors
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const tailwindColorsAccent = (colors = []) => {
|
|
70
|
+
const result = {};
|
|
71
|
+
|
|
72
|
+
colors.forEach(color => {
|
|
73
|
+
if (Array.isArray(color)) {
|
|
74
|
+
const rgb = hexToRgb(color[1]);
|
|
75
|
+
|
|
76
|
+
result[`.accent-${color[0]}`] = {
|
|
77
|
+
'--color-accent': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
|
|
78
|
+
'accent-color': 'rgb(var(--color-accent))'
|
|
79
|
+
};
|
|
80
|
+
} else {
|
|
81
|
+
result[`.accent-${color}`] = {
|
|
82
|
+
'--color-accent': `var(--color-${color})`,
|
|
83
|
+
'accent-color': 'rgb(var(--color-accent))'
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
return result
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
const tailwindColorsCurrent = (colors = []) => {
|
|
92
|
+
const result = {};
|
|
93
|
+
|
|
94
|
+
colors.forEach(color => {
|
|
95
|
+
if (Array.isArray(color)) {
|
|
96
|
+
const rgb = hexToRgb(color[1]);
|
|
97
|
+
|
|
98
|
+
result[`.text-${color[0]}`] = {
|
|
99
|
+
'--color-current': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
|
|
100
|
+
'color': 'rgb(var(--color-current))'
|
|
101
|
+
};
|
|
102
|
+
} else {
|
|
103
|
+
result[`.text-${color}`] = {
|
|
104
|
+
'--color-current': `var(--color-${color})`,
|
|
105
|
+
'color': 'rgb(var(--color-current))'
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
return result
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
const tailwindVariables = (type, variables = [], values = {}) => {
|
|
114
|
+
variables.forEach(name => {
|
|
115
|
+
values[name] = `var(--${type}-${name})`;
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
return values
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
const tailwindAnimations = (values) => {
|
|
122
|
+
const result = {};
|
|
123
|
+
|
|
124
|
+
values.forEach(value => {
|
|
125
|
+
result[`.animation-${value}`] = {
|
|
126
|
+
'animation-name': value
|
|
127
|
+
};
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
return result
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
const createPlugin = (userConfig = {}) => {
|
|
134
|
+
userConfig = lodash.merge(defaultConfig, userConfig);
|
|
135
|
+
|
|
136
|
+
return plugin(({addUtilities}) => {
|
|
137
|
+
addUtilities(Object.assign(tailwindColorsAccent(getTailwindColors(twColors)), tailwindColorsAccent(userConfig.colors)));
|
|
138
|
+
addUtilities(Object.assign(tailwindColorsCurrent(getTailwindColors(twColors)), tailwindColorsCurrent(userConfig.colors)));
|
|
139
|
+
addUtilities(tailwindAnimations(userConfig.animations));
|
|
140
|
+
}, {
|
|
141
|
+
corePlugins: {
|
|
142
|
+
preflight: false,
|
|
143
|
+
container: false,
|
|
144
|
+
accentColor: false,
|
|
145
|
+
textColor: false
|
|
146
|
+
},
|
|
147
|
+
theme: {
|
|
148
|
+
extend: {
|
|
149
|
+
colors: tailwindColors(userConfig.colors),
|
|
150
|
+
fontFamily: tailwindVariables('font', userConfig.fontFamily),
|
|
151
|
+
fontWeight: tailwindVariables('font', userConfig.fontWeight),
|
|
152
|
+
zIndex: tailwindVariables('z', userConfig.zIndex, {
|
|
153
|
+
0: 0,
|
|
154
|
+
auto: 'auto'
|
|
155
|
+
}),
|
|
156
|
+
spacing: tailwindVariables('spacing', userConfig.spacing),
|
|
157
|
+
borderRadius: tailwindVariables('rounded', userConfig.borderRadius, {
|
|
158
|
+
DEFAULT: 'var(--rounded)'
|
|
159
|
+
}),
|
|
160
|
+
screens: userConfig.screens
|
|
161
|
+
},
|
|
162
|
+
}
|
|
163
|
+
})
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
module.exports.createPlugin = createPlugin;
|
|
167
|
+
module.exports = createPlugin;
|
|
168
|
+
module.exports.defaultConfig = defaultConfig;
|
|
169
|
+
module.exports.getTailwindColors = getTailwindColors;
|
|
170
|
+
module.exports.hexToRgb = hexToRgb;
|
|
171
|
+
module.exports.tailwindAnimations = tailwindAnimations;
|
|
172
|
+
module.exports.tailwindColors = tailwindColors;
|
|
173
|
+
module.exports.tailwindColorsAccent = tailwindColorsAccent;
|
|
174
|
+
module.exports.tailwindColorsCurrent = tailwindColorsCurrent;
|
|
175
|
+
module.exports.tailwindVariables = tailwindVariables;
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import plugin from 'tailwindcss/plugin'
|
|
2
|
+
import twColors from "tailwindcss/colors"
|
|
3
|
+
import lodash from 'lodash'
|
|
4
|
+
|
|
5
|
+
export const defaultConfig = {
|
|
6
|
+
colors: [
|
|
7
|
+
'background', 'default', 'light', 'dark', 'primary', 'secondary',
|
|
8
|
+
'warning', 'error', 'info', 'success', 'accent', `current`
|
|
9
|
+
],
|
|
10
|
+
fontFamily: ['primary', 'secondary'],
|
|
11
|
+
fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
|
|
12
|
+
zIndex: [10, 20, 30, 40, 50, 60],
|
|
13
|
+
spacing: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'section'],
|
|
14
|
+
borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'full'],
|
|
15
|
+
animations: ['fade-in', 'fade-out'],
|
|
16
|
+
screens: {
|
|
17
|
+
'xs': '22.5em',
|
|
18
|
+
'sm': '26em',
|
|
19
|
+
'md': '48em',
|
|
20
|
+
'lg': '60em',
|
|
21
|
+
'xl': '76em',
|
|
22
|
+
'2xl': '82em',
|
|
23
|
+
'3xl': '88em',
|
|
24
|
+
'4xl': '100em',
|
|
25
|
+
'xxl': '126em',
|
|
26
|
+
'2xxl': '158em'
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
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)
|
|
31
|
+
.substring(1).match(/.{2}/g)
|
|
32
|
+
.map(x => parseInt(x, 16))
|
|
33
|
+
|
|
34
|
+
export const getTailwindColors = (twColors) => {
|
|
35
|
+
const accentColors = []
|
|
36
|
+
|
|
37
|
+
Object.keys(twColors).forEach(color => {
|
|
38
|
+
if (color.match(/(lightBlue|warmGray|trueGray|coolGray|blueGray)/)) {
|
|
39
|
+
return
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
if (typeof twColors[color] === "object") {
|
|
43
|
+
Object.keys(twColors[color]).forEach(variant => {
|
|
44
|
+
accentColors.push([`${color.replace(/[A-Z]/g, m => "-" + m.toLowerCase())}-${variant}`, twColors[color][variant]])
|
|
45
|
+
})
|
|
46
|
+
} else {
|
|
47
|
+
accentColors.push([color, twColors[color]])
|
|
48
|
+
}
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
return accentColors
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export const tailwindColors = (colors = []) => {
|
|
55
|
+
colors.forEach(name => {
|
|
56
|
+
colors[name] = ({ opacityValue }) => {
|
|
57
|
+
if (opacityValue === undefined) {
|
|
58
|
+
return `rgb(var(--color-${name}))`
|
|
59
|
+
}
|
|
60
|
+
return `rgb(var(--color-${name}) / ${opacityValue})`
|
|
61
|
+
}
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
return colors
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export const tailwindColorsAccent = (colors = []) => {
|
|
68
|
+
const result = {};
|
|
69
|
+
|
|
70
|
+
colors.forEach(color => {
|
|
71
|
+
if (Array.isArray(color)) {
|
|
72
|
+
const rgb = hexToRgb(color[1])
|
|
73
|
+
|
|
74
|
+
result[`.accent-${color[0]}`] = {
|
|
75
|
+
'--color-accent': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
|
|
76
|
+
'accent-color': 'rgb(var(--color-accent))'
|
|
77
|
+
}
|
|
78
|
+
} else {
|
|
79
|
+
result[`.accent-${color}`] = {
|
|
80
|
+
'--color-accent': `var(--color-${color})`,
|
|
81
|
+
'accent-color': 'rgb(var(--color-accent))'
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
})
|
|
85
|
+
|
|
86
|
+
return result
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
export const tailwindColorsCurrent = (colors = []) => {
|
|
90
|
+
const result = {};
|
|
91
|
+
|
|
92
|
+
colors.forEach(color => {
|
|
93
|
+
if (Array.isArray(color)) {
|
|
94
|
+
const rgb = hexToRgb(color[1])
|
|
95
|
+
|
|
96
|
+
result[`.text-${color[0]}`] = {
|
|
97
|
+
'--color-current': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
|
|
98
|
+
'color': 'rgb(var(--color-current))'
|
|
99
|
+
}
|
|
100
|
+
} else {
|
|
101
|
+
result[`.text-${color}`] = {
|
|
102
|
+
'--color-current': `var(--color-${color})`,
|
|
103
|
+
'color': 'rgb(var(--color-current))'
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
})
|
|
107
|
+
|
|
108
|
+
return result
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
export const tailwindVariables = (type, variables = [], values = {}) => {
|
|
112
|
+
variables.forEach(name => {
|
|
113
|
+
values[name] = `var(--${type}-${name})`
|
|
114
|
+
})
|
|
115
|
+
|
|
116
|
+
return values
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export const tailwindAnimations = (values) => {
|
|
120
|
+
const result = {}
|
|
121
|
+
|
|
122
|
+
values.forEach(value => {
|
|
123
|
+
result[`.animation-${value}`] = {
|
|
124
|
+
'animation-name': value
|
|
125
|
+
}
|
|
126
|
+
})
|
|
127
|
+
|
|
128
|
+
return result
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
export const createPlugin = (userConfig = {}) => {
|
|
132
|
+
userConfig = lodash.merge(defaultConfig, userConfig)
|
|
133
|
+
|
|
134
|
+
return plugin(({addUtilities}) => {
|
|
135
|
+
addUtilities(Object.assign(tailwindColorsAccent(getTailwindColors(twColors)), tailwindColorsAccent(userConfig.colors)))
|
|
136
|
+
addUtilities(Object.assign(tailwindColorsCurrent(getTailwindColors(twColors)), tailwindColorsCurrent(userConfig.colors)))
|
|
137
|
+
addUtilities(tailwindAnimations(userConfig.animations))
|
|
138
|
+
}, {
|
|
139
|
+
corePlugins: {
|
|
140
|
+
preflight: false,
|
|
141
|
+
container: false,
|
|
142
|
+
accentColor: false,
|
|
143
|
+
textColor: false
|
|
144
|
+
},
|
|
145
|
+
theme: {
|
|
146
|
+
extend: {
|
|
147
|
+
colors: tailwindColors(userConfig.colors),
|
|
148
|
+
fontFamily: tailwindVariables('font', userConfig.fontFamily),
|
|
149
|
+
fontWeight: tailwindVariables('font', userConfig.fontWeight),
|
|
150
|
+
zIndex: tailwindVariables('z', userConfig.zIndex, {
|
|
151
|
+
0: 0,
|
|
152
|
+
auto: 'auto'
|
|
153
|
+
}),
|
|
154
|
+
spacing: tailwindVariables('spacing', userConfig.spacing),
|
|
155
|
+
borderRadius: tailwindVariables('rounded', userConfig.borderRadius, {
|
|
156
|
+
DEFAULT: 'var(--rounded)'
|
|
157
|
+
}),
|
|
158
|
+
screens: userConfig.screens
|
|
159
|
+
},
|
|
160
|
+
}
|
|
161
|
+
})
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
export default createPlugin
|
package/utils/helpers.cjs
DELETED
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const tailwindColors = (colors = []) => {
|
|
6
|
-
colors.forEach(name => {
|
|
7
|
-
colors[name] = ({ opacityValue }) => {
|
|
8
|
-
if (opacityValue === undefined) {
|
|
9
|
-
return `rgb(var(--color-${name}))`
|
|
10
|
-
}
|
|
11
|
-
return `rgb(var(--color-${name}) / ${opacityValue})`
|
|
12
|
-
};
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
return colors
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
const tailwindColorsAccent = (colors = []) => {
|
|
19
|
-
const result = {};
|
|
20
|
-
|
|
21
|
-
colors.forEach(color => {
|
|
22
|
-
result[`.accent-${color}`] = {
|
|
23
|
-
'--color-accent': `var(--color-${color})`,
|
|
24
|
-
'accent-color': 'rgb(var(--color-accent))'
|
|
25
|
-
};
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
return result
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
const tailwindColorsCurrent = (colors = []) => {
|
|
32
|
-
const result = {};
|
|
33
|
-
|
|
34
|
-
colors.forEach(color => {
|
|
35
|
-
result[`.text-${color}`] = {
|
|
36
|
-
'--color-current': `var(--color-${color})`
|
|
37
|
-
};
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
return result
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
const tailwindVariables = (type, variables = [], values = {}) => {
|
|
44
|
-
variables.forEach(name => {
|
|
45
|
-
values[name] = `var(--${type}-${name})`;
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
return values
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
const tailwindAnimations = (values) => {
|
|
52
|
-
const result = {};
|
|
53
|
-
|
|
54
|
-
values.forEach(value => {
|
|
55
|
-
result[`.animation-${value}`] = {
|
|
56
|
-
'animation-name': value
|
|
57
|
-
};
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
return result
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
exports.tailwindAnimations = tailwindAnimations;
|
|
64
|
-
exports.tailwindColors = tailwindColors;
|
|
65
|
-
exports.tailwindColorsAccent = tailwindColorsAccent;
|
|
66
|
-
exports.tailwindColorsCurrent = tailwindColorsCurrent;
|
|
67
|
-
exports.tailwindVariables = tailwindVariables;
|
package/utils/helpers.js
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
const tailwindColors = (colors = []) => {
|
|
2
|
-
colors.forEach(name => {
|
|
3
|
-
colors[name] = ({ opacityValue }) => {
|
|
4
|
-
if (opacityValue === undefined) {
|
|
5
|
-
return `rgb(var(--color-${name}))`
|
|
6
|
-
}
|
|
7
|
-
return `rgb(var(--color-${name}) / ${opacityValue})`
|
|
8
|
-
}
|
|
9
|
-
})
|
|
10
|
-
|
|
11
|
-
return colors
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const tailwindColorsAccent = (colors = []) => {
|
|
15
|
-
const result = {}
|
|
16
|
-
|
|
17
|
-
colors.forEach(color => {
|
|
18
|
-
result[`.accent-${color}`] = {
|
|
19
|
-
'--color-accent': `var(--color-${color})`,
|
|
20
|
-
'accent-color': 'rgb(var(--color-accent))'
|
|
21
|
-
}
|
|
22
|
-
})
|
|
23
|
-
|
|
24
|
-
return result
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
const tailwindColorsCurrent = (colors = []) => {
|
|
28
|
-
const result = {}
|
|
29
|
-
|
|
30
|
-
colors.forEach(color => {
|
|
31
|
-
result[`.text-${color}`] = {
|
|
32
|
-
'--color-current': `var(--color-${color})`
|
|
33
|
-
}
|
|
34
|
-
})
|
|
35
|
-
|
|
36
|
-
return result
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
const tailwindVariables = (type, variables = [], values = {}) => {
|
|
40
|
-
variables.forEach(name => {
|
|
41
|
-
values[name] = `var(--${type}-${name})`
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
return values
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
const tailwindAnimations = (values) => {
|
|
48
|
-
const result = {}
|
|
49
|
-
|
|
50
|
-
values.forEach(value => {
|
|
51
|
-
result[`.animation-${value}`] = {
|
|
52
|
-
'animation-name': value
|
|
53
|
-
}
|
|
54
|
-
})
|
|
55
|
-
|
|
56
|
-
return result
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
export { tailwindColors, tailwindVariables, tailwindColorsAccent, tailwindColorsCurrent, tailwindAnimations }
|