@enonic/ui 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/enonic-ui.es.js

@@ -167,7 +167,7 @@ return N(Ve,{value:ae,children:/* @__PURE__ */N("div",{"data-component":"TimePic
 /* @__PURE__ */N("span",{className:"text-base text-main",children:":"}),
 /* @__PURE__ */N(Ls,{}),
 /* @__PURE__ */N($s,{})]});/* @__PURE__ */
-return N(Ve,{value:ae,children:/* @__PURE__ */N("div",{"data-component":"TimePicker.Root",className:bn("flex w-fit items-center gap-2 rounded-sm border border-bdr-subtle bg-surface-neutral p-3",L&&"border-none bg-transparent p-0",x),onKeyDown:L?k:ie,...C,children:L?/* @__PURE__ */N(Fs,{...y}):de})})};Bs.displayName="TimePicker";const Gs=Object.assign(Bs,{Root:Bs,Trigger:Ks,Content:Hs,HourSelect:Es,MinuteSelect:Ls,Timezone:$s,NativeInput:Fs,HiddenInput:Vs}),js=["success","info","warning","error"],qs={success:qn,info:Xn,warning:jn,error:_n},Ws=M("row-start-1 flex size-6 flex-none items-center justify-center",{variants:{variant:{success:"[&_svg]:fill-success",info:"[&_svg]:fill-info",warning:"[&_svg]:fill-warn",error:"[&_svg]:fill-error",custom:"text-surface-tertiary"}},defaultVariants:{variant:"info"}}),_s=i(({children:e,asChild:t,className:n,...r},o)=>/* @__PURE__ */N(t?y:"h4",{"data-component":"Toast.Title",ref:o,className:bn("font-semibold text-alt text-lg",n),...r,children:e}));_s.displayName="Toast.Title";const Ys=i(({className:e,asChild:t,children:n,...r},o)=>/* @__PURE__ */N(t?y:"p",{"data-component":"Toast.Description",ref:o,className:bn("text-md",e),...r,children:n}));Ys.displayName="Toast.Description";const Us=i(({className:e,...t},n)=>/* @__PURE__ */N(Ni,{"data-component":"Toast.Link",ref:n,external:!1,"data-tone":"inverse",className:bn("w-fit text-md",e),...t}));Us.displayName="Toast.Link";const Zs=i(({className:e,children:t,...n},r)=>/* @__PURE__ */N(Pn,{"data-component":"Toast.Button",ref:r,variant:"outline",size:"md",className:bn("border-alt bg-transparent px-2 text-alt hover:bg-notification-secondary",e),...n,children:t}));Zs.displayName="Toast.Button";const Xs=i(({asChild:e,onClick:t,children:n,className:r,...o},a)=>{const{setOpen:i}=Be(),s=e=>{t?.(e),e.defaultPrevented||i?.(!1)};return e?/* @__PURE__ */N(y,{"data-component":"Toast.Close",ref:a,onClick:s,...o,children:n}):/* @__PURE__ */N(Xr,{"data-component":"Toast.Close",ref:a,icon:nr,iconSize:"lg",iconStrokeWidth:1,"aria-label":"Close notification",title:"Close notification",variant:"text",size:"sm",className:bn("bg-transparent text-alt hover:bg-btn-tertiary-hover hover:text-alt",r),onClick:s,...o})});Xs.displayName="Toast.Close";const Js=({tone:e,children:t,className:n})=>{const{setIconSlot:r,setTone:o}=Be(),a="string"==typeof(i=e)&&js.includes(i)?e:void 0;var i;const s=l(()=>{if(t)/* @__PURE__ */
+return N(Ve,{value:ae,children:/* @__PURE__ */N("div",{"data-component":"TimePicker.Root",className:bn("flex w-fit items-center gap-2 rounded-sm border border-bdr-subtle bg-surface-neutral p-3",L&&"border-none bg-transparent p-0",x),onKeyDown:L?k:ie,...C,children:L?/* @__PURE__ */N(Fs,{...y}):de})})};Bs.displayName="TimePicker";const Gs=Object.assign(Bs,{Root:Bs,Trigger:Ks,Content:Hs,HourSelect:Es,MinuteSelect:Ls,Timezone:$s,NativeInput:Fs,HiddenInput:Vs}),js=["success","info","warning","error"],qs={success:qn,info:Xn,warning:jn,error:_n},Ws=M("row-start-1 flex size-6 flex-none items-center justify-center",{variants:{variant:{success:"[&_svg]:fill-success",info:"[&_svg]:fill-info",warning:"[&_svg]:fill-warn",error:"[&_svg]:fill-error",custom:"text-surface-tertiary"}},defaultVariants:{variant:"info"}}),_s=i(({children:e,asChild:t,className:n,...r},o)=>/* @__PURE__ */N(t?y:"h4",{"data-component":"Toast.Title",ref:o,className:bn("font-semibold text-alt text-lg",n),...r,children:e}));_s.displayName="Toast.Title";const Ys=i(({className:e,asChild:t,children:n,...r},o)=>/* @__PURE__ */N(t?y:"p",{"data-component":"Toast.Description",ref:o,className:bn("overflow-hidden text-ellipsis text-md",e),...r,children:n}));Ys.displayName="Toast.Description";const Us=i(({className:e,...t},n)=>/* @__PURE__ */N(Ni,{"data-component":"Toast.Link",ref:n,external:!1,"data-tone":"inverse",className:bn("w-fit text-md",e),...t}));Us.displayName="Toast.Link";const Zs=i(({className:e,children:t,...n},r)=>/* @__PURE__ */N(Pn,{"data-component":"Toast.Button",ref:r,variant:"outline",size:"md",className:bn("border-alt bg-transparent px-2 text-alt hover:bg-notification-secondary",e),...n,children:t}));Zs.displayName="Toast.Button";const Xs=i(({asChild:e,onClick:t,children:n,className:r,...o},a)=>{const{setOpen:i}=Be(),s=e=>{t?.(e),e.defaultPrevented||i?.(!1)};return e?/* @__PURE__ */N(y,{"data-component":"Toast.Close",ref:a,onClick:s,...o,children:n}):/* @__PURE__ */N(Xr,{"data-component":"Toast.Close",ref:a,icon:nr,iconSize:"lg",iconStrokeWidth:1,"aria-label":"Close notification",title:"Close notification",variant:"text",size:"sm",className:bn("bg-transparent text-alt hover:bg-btn-tertiary-hover hover:text-alt",r),onClick:s,...o})});Xs.displayName="Toast.Close";const Js=({tone:e,children:t,className:n})=>{const{setIconSlot:r,setTone:o}=Be(),a="string"==typeof(i=e)&&js.includes(i)?e:void 0;var i;const s=l(()=>{if(t)/* @__PURE__ */
 return N("div",{"data-component":"Toast.Icon",className:Ws({variant:"custom",className:n}),children:t});const e=a?qs[a]:Xn;/* @__PURE__ */
 return N("div",{"data-component":"Toast.Icon",className:Ws({variant:a,className:n}),children:/* @__PURE__ */N(e,{className:"scale-125 text-surface-tertiary",size:24,strokeWidth:2,"aria-hidden":"true"})})},[t,a,n]);return m(()=>(r?.(s),()=>r?.(null)),[s,r]),m(()=>(o?.(a),()=>o?.(void 0)),[a,o]),null};Js.displayName="Toast.Icon";const Qs=i(({id:e,open:t,defaultOpen:n=!0,onOpenChange:r,withClose:o,className:a,role:i,"aria-live":l,children:c,...d},u)=>{const m="number"==typeof e?`${e}`:e,[f,g]=sr(t,n,r),[v,h]=s(null),[y,w]=s(),x="error"===y||"warning"===y?"alert":"status",I="alert"===x?"assertive":"polite",k=b.toArray(c),C=k.filter(e=>p(e)&&e.type===Zs),D=k.filter(e=>!C.includes(e));return f?/* @__PURE__ */N(He,{value:{setOpen:g,setIconSlot:h,tone:y,setTone:w},children:/* @__PURE__ */N("div",{"data-component":"Toast",ref:u,id:m,"data-toast-id":m,"data-click-outside-ignore":!0,role:i??x,"aria-live":l??I,className:bn("[--color-ring-offset:var(--color-surface-tertiary)] [--color-ring:var(--color-ring-alt)]","grid grid-cols-[auto_minmax(0,1fr)_auto] items-center","w-full max-w-130 gap-2.5 p-5","rounded-lg border border-bdr-soft bg-surface-tertiary text-alt",a),...d,children:[v,
 /* @__PURE__ */N("div",{className:"row-start-1 flex w-full flex-col gap-1 text-left",children:D}),

package/dist/styles/base.css

@@ -1 +1,9 @@
-@layer base{:root,:host{font-size:16px;color:var(--color-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}
+@layer base {
+  :root,
+  :host {
+    font-size: 16px;
+    color: var(--color-main);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}

package/dist/styles/preset.css

@@ -1 +1,372 @@
-@layer base{:root,:host{--color-black: #000000;--color-grey-950: #242829;--color-grey-900: #3d4142;--color-grey-850: #4c5051;--color-grey-800: #5b5f60;--color-grey-700: #797d7e;--color-grey-600: #8d9192;--color-grey-500: #b2b2b2;--color-grey-400: #b5b9ba;--color-grey-300: #d3d7d8;--color-grey-200: #dde1e2;--color-grey-100: #e7ebeb;--color-grey-50: #f1f5f6;--color-white: #ffffff;--color-fbk-info: #0270a0;--color-fbk-info-subtle: #208ebe;--color-fbk-info-surface-light: #d7f3ff;--color-fbk-info-surface-dark: #1a5a6e;--color-fbk-warn: #cb9126;--color-fbk-warn-subtle: #e9af44;--color-fbk-warn-surface-light: #f7e5c4;--color-fbk-warn-surface-dark: #5c4422;--color-fbk-success: #499349;--color-fbk-success-subtle: #67b167;--color-fbk-success-surface-light: #cee2ce;--color-fbk-success-surface-dark: #2d5a3d;--color-fbk-danger: #d33030;--color-fbk-danger-subtle: #f56262;--color-fbk-danger-surface-light: #f6d7d7;--color-fbk-danger-surface-dark: #5c3333;--color-purple: #800080;--color-purple-subtle: #e46ee4;--color-juke: #9747ff;--color-blue: #009bf5;--color-blue-subtle: #1fa5f5}}@layer base{:root,:host{--color-main: var(--color-black);--color-main-hover: var(--color-grey-800);--color-subtle: var(--color-grey-800);--color-alt: var(--color-white);--color-rev: var(--color-white);--color-alt-rev: var(--color-black);--color-muted: var(--color-grey-200);--color-decorative: var(--color-grey-400);--color-info: var(--color-fbk-info);--color-info-rev: var(--color-fbk-info-subtle);--color-warn: var(--color-fbk-warn);--color-warn-rev: var(--color-fbk-warn-subtle);--color-success: var(--color-fbk-success);--color-success-rev: var(--color-fbk-success-subtle);--color-error: var(--color-fbk-danger);--color-error-rev: var(--color-fbk-danger-subtle);--color-surface-neutral: var(--color-white);--color-surface-neutral-hover: var(--color-grey-50);--color-surface-selected: var(--color-grey-800);--color-surface-selected-hover: var(--color-grey-900);--color-surface-primary: var(--color-grey-50);--color-surface-secondary: var(--color-black);--color-surface-tertiary: var(--color-grey-950);--color-surface-shimmer: var(--color-white);--color-surface-info: var(--color-fbk-info-surface-light);--color-surface-warn: var(--color-fbk-warn-surface-light);--color-surface-success: var(--color-fbk-success-surface-light);--color-surface-error: var(--color-fbk-danger-surface-light);--color-surface-muted: var(--color-grey-500);--color-bdr-subtle: var(--color-grey-500);--color-bdr-soft: var(--color-grey-200);--color-bdr-strong: var(--color-black);--color-bdr-select: var(--color-blue);--color-ring: var(--color-black);--color-ring-alt: var(--color-white);--color-ring-offset: var(--color-white);--color-ring-offset-alt: var(--color-grey-950);--color-btn-primary: var(--color-white);--color-btn-primary-hover: var(--color-grey-50);--color-btn-secondary: var(--color-grey-50);--color-btn-secondary-hover: var(--color-grey-100);--color-btn-tertiary: var(--color-black);--color-btn-tertiary-hover: var(--color-grey-900);--color-btn-active: var(--color-grey-800);--color-btn-active-hover: var(--color-grey-900);--color-input-disabled: var(--color-grey-100);--color-link-visited: var(--color-purple);--color-tooltip: var(--color-black);--color-tooltip-foreground: var(--color-white);--color-overlay: oklch(0 0 0 / .4);--color-docs: var(--color-juke)}}@layer base{.dark,:host(.dark){--color-main: var(--color-white);--color-main-hover: var(--color-grey-200);--color-subtle: var(--color-grey-400);--color-alt: var(--color-white);--color-rev: var(--color-black);--color-alt-rev: var(--color-black);--color-muted: var(--color-grey-800);--color-decorative: var(--color-grey-700);--color-info: var(--color-fbk-info-subtle);--color-info-rev: var(--color-fbk-info);--color-warn: var(--color-fbk-warn-subtle);--color-warn-rev: var(--color-fbk-warn);--color-success: var(--color-fbk-success-subtle);--color-success-rev: var(--color-fbk-success);--color-error: var(--color-fbk-danger-subtle);--color-error-rev: var(--color-fbk-danger);--color-surface-neutral: var(--color-grey-950);--color-surface-neutral-hover: var(--color-grey-900);--color-surface-selected: var(--color-grey-800);--color-surface-selected-hover: var(--color-grey-900);--color-surface-primary: var(--color-grey-900);--color-surface-secondary: var(--color-grey-700);--color-surface-tertiary: var(--color-grey-900);--color-surface-shimmer: var(--color-grey-850);--color-surface-info: var(--color-fbk-info-surface-dark);--color-surface-warn: var(--color-fbk-warn-surface-dark);--color-surface-success: var(--color-fbk-success-surface-dark);--color-surface-error: var(--color-fbk-danger-surface-dark);--color-surface-muted: var(--color-grey-500);--color-bdr-subtle: var(--color-grey-800);--color-bdr-soft: var(--color-grey-800);--color-bdr-strong: var(--color-white);--color-bdr-select: var(--color-blue-subtle);--color-ring: var(--color-white);--color-ring-alt: var(--color-white);--color-ring-offset: var(--color-grey-950);--color-ring-offset-alt: var(--color-grey-950);--color-btn-primary: var(--color-grey-950);--color-btn-primary-hover: var(--color-grey-900);--color-btn-secondary: var(--color-grey-900);--color-btn-secondary-hover: var(--color-grey-800);--color-btn-tertiary: var(--color-grey-800);--color-btn-tertiary-hover: var(--color-grey-700);--color-btn-active: var(--color-grey-800);--color-btn-active-hover: var(--color-grey-700);--color-input-disabled: var(--color-grey-800);--color-link-visited: var(--color-purple-subtle);--color-tooltip: var(--color-grey-800);--color-tooltip-foreground: var(--color-white);--color-overlay: oklch(0 0 0 / .6);--color-docs: var(--color-juke)}}@custom-variant dark (&:where(.dark,.dark *));@theme{ --color-main: var(--color-main); --color-main-hover: var(--color-main-hover); --color-subtle: var(--color-subtle); --color-alt: var(--color-alt); --color-rev: var(--color-rev); --color-alt-rev: var(--color-alt-rev); --color-muted: var(--color-muted); --color-decorative: var(--color-decorative); --color-info: var(--color-info); --color-info-rev: var(--color-info-rev); --color-warn: var(--color-warn); --color-warn-rev: var(--color-warn-rev); --color-success: var(--color-success); --color-success-rev: var(--color-success-rev); --color-error: var(--color-error); --color-error-rev: var(--color-error-rev); --color-surface-neutral: var(--color-surface-neutral); --color-surface-neutral-hover: var(--color-surface-neutral-hover); --color-surface-selected: var(--color-surface-selected); --color-surface-selected-hover: var(--color-surface-selected-hover); --color-surface-primary: var(--color-surface-primary); --color-surface-secondary: var(--color-surface-secondary); --color-surface-tertiary: var(--color-surface-tertiary); --color-surface-shimmer: var(--color-surface-shimmer); --color-surface-info: var(--color-surface-info); --color-surface-warn: var(--color-surface-warn); --color-surface-success: var(--color-surface-success); --color-surface-error: var(--color-surface-error); --color-surface-muted: var(--color-surface-muted); --color-bdr-subtle: var(--color-bdr-subtle); --color-bdr-soft: var(--color-bdr-soft); --color-bdr-strong: var(--color-bdr-strong); --color-bdr-select: var(--color-bdr-select); --color-ring: var(--color-ring); --color-ring-offset: var(--color-ring-offset); --color-btn-primary: var(--color-btn-primary); --color-btn-primary-hover: var(--color-btn-primary-hover); --color-btn-secondary: var(--color-btn-secondary); --color-btn-secondary-hover: var(--color-btn-secondary-hover); --color-btn-tertiary: var(--color-btn-tertiary); --color-btn-tertiary-hover: var(--color-btn-tertiary-hover); --color-btn-active: var(--color-btn-active); --color-btn-active-hover: var(--color-btn-active-hover); --color-btn-error: var(--color-fbk-danger); --color-btn-error-hover: color-mix(in srgb, var(--color-fbk-danger), black 10%); --color-btn-error-active: color-mix(in srgb, var(--color-fbk-danger), black 19%); --color-input-disabled: var(--color-input-disabled); --color-link-visited: var(--color-link-visited); --color-tooltip: var(--color-tooltip); --color-tooltip-foreground: var(--color-tooltip-foreground); --color-overlay: var(--color-overlay); --color-docs: var(--color-docs); --sizing-11\.5: calc(var(--spacing) * 11.5); }@layer base{:root,:host{font-size:16px;color:var(--color-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@utility scrollbar-none{scrollbar-width: none; &::-webkit-scrollbar {display: none;}}@utility transition-highlight{transition-property: color,box-shadow; transition-duration: .1s;}@keyframes skeleton-shimmer{0%{background-position-x:calc(-1 * var(--shimmer-band-size, 200px))}to{background-position-x:calc(var(--shimmer-end, 100%) + var(--shimmer-band-size, 200px))}}@utility animate-skeleton-shimmer{ --shimmer-band-size: 200px; background-image: linear-gradient(90deg, transparent 0%, var(--color-surface-neutral-hover) 50%, transparent 100%); background-size: var(--shimmer-band-size) 100%; background-repeat: no-repeat; animation: skeleton-shimmer 1.5s ease-in-out infinite; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; opacity: 0; &[data-ready="true"] { opacity: 1; } }@keyframes input-blink-ring{0%{box-shadow:0 0 color-mix(in srgb,var(--color-bdr-select) 45%,transparent)}70%{box-shadow:0 0 0 8px transparent}to{box-shadow:0 0 0 0 transparent}}@utility input-animated-border{position: relative; &::before {content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background-color: var(--color-bdr-subtle); background-image: linear-gradient(90deg,transparent 0%,var(--color-bdr-select) 50%,transparent 100%); background-size: var(--shimmer-band-size, 200px) 100%; background-repeat: no-repeat; animation: skeleton-shimmer 1.6s ease-in-out infinite; -webkit-mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0); -webkit-mask-clip: content-box,border-box; -webkit-mask-composite: xor; mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0); mask-clip: content-box,border-box; mask-composite: exclude; pointer-events: none; z-index: 1;}}@utility input-blink-attention{animation: input-blink-ring .6s ease-out 2; &:focus-within:focus-within {box-shadow: none;}}
+@layer base {
+  :root,
+  :host {
+    /* Neutrals */
+    --color-black: #000000;
+    --color-grey-950: #242829;
+    --color-grey-900: #3d4142;
+    --color-grey-850: #4c5051;
+    --color-grey-800: #5b5f60;
+    --color-grey-700: #797d7e;
+    --color-grey-600: #8d9192;
+    --color-grey-500: #b2b2b2;
+    --color-grey-400: #b5b9ba;
+    --color-grey-300: #d3d7d8;
+    --color-grey-200: #dde1e2;
+    --color-grey-100: #e7ebeb;
+    --color-grey-50: #f1f5f6;
+    --color-white: #ffffff;
+
+    /* Feedback */
+    --color-fbk-info: #0270a0;
+    --color-fbk-info-subtle: #208ebe;
+    --color-fbk-info-surface-light: #d7f3ff;
+    --color-fbk-info-surface-dark: #1a5a6e;
+
+    --color-fbk-warn: #cb9126;
+    --color-fbk-warn-subtle: #e9af44;
+    --color-fbk-warn-surface-light: #f7e5c4;
+    --color-fbk-warn-surface-dark: #5c4422;
+
+    --color-fbk-success: #499349;
+    --color-fbk-success-subtle: #67b167;
+    --color-fbk-success-surface-light: #cee2ce;
+    --color-fbk-success-surface-dark: #2d5a3d;
+
+    --color-fbk-danger: #d33030;
+    --color-fbk-danger-subtle: #f56262;
+    --color-fbk-danger-surface-light: #f6d7d7;
+    --color-fbk-danger-surface-dark: #5c3333;
+
+    /* Misc */
+    --color-purple: #800080;
+    --color-purple-subtle: #e46ee4;
+    --color-juke: #9747ff;
+    --color-blue: #009bf5;
+    --color-blue-subtle: #1fa5f5;
+  }
+}
+
+@layer base {
+  :root,
+  :host {
+    /* Main Colors */
+    --color-main: var(--color-black);
+    --color-main-hover: var(--color-grey-800);
+    --color-subtle: var(--color-grey-800);
+    --color-alt: var(--color-white);
+    --color-rev: var(--color-white);
+    --color-alt-rev: var(--color-black);
+    --color-muted: var(--color-grey-200);
+    --color-decorative: var(--color-grey-400);
+
+    --color-info: var(--color-fbk-info);
+    --color-info-rev: var(--color-fbk-info-subtle);
+    --color-warn: var(--color-fbk-warn);
+    --color-warn-rev: var(--color-fbk-warn-subtle);
+    --color-success: var(--color-fbk-success);
+    --color-success-rev: var(--color-fbk-success-subtle);
+    --color-error: var(--color-fbk-danger);
+    --color-error-rev: var(--color-fbk-danger-subtle);
+
+    /* Surface Colors */
+    --color-surface-neutral: var(--color-white);
+    --color-surface-neutral-hover: var(--color-grey-50);
+    --color-surface-selected: var(--color-grey-800);
+    --color-surface-selected-hover: var(--color-grey-900);
+    --color-surface-primary: var(--color-grey-50);
+    --color-surface-secondary: var(--color-black);
+    --color-surface-tertiary: var(--color-grey-950);
+    --color-surface-shimmer: var(--color-white);
+    --color-surface-info: var(--color-fbk-info-surface-light);
+    --color-surface-warn: var(--color-fbk-warn-surface-light);
+    --color-surface-success: var(--color-fbk-success-surface-light);
+    --color-surface-error: var(--color-fbk-danger-surface-light);
+    --color-surface-muted: var(--color-grey-500);
+
+    /* Borders */
+    --color-bdr-subtle: var(--color-grey-500);
+    --color-bdr-soft: var(--color-grey-200);
+    --color-bdr-strong: var(--color-black);
+    --color-bdr-select: var(--color-blue);
+
+    /* Outline Ring */
+    --color-ring: var(--color-black);
+    --color-ring-alt: var(--color-white);
+    --color-ring-offset: var(--color-white);
+    --color-ring-offset-alt: var(--color-grey-950);
+
+    /* Buttons */
+    --color-btn-primary: var(--color-white);
+    --color-btn-primary-hover: var(--color-grey-50);
+    --color-btn-secondary: var(--color-grey-50);
+    --color-btn-secondary-hover: var(--color-grey-100);
+    --color-btn-tertiary: var(--color-black);
+    --color-btn-tertiary-hover: var(--color-grey-900);
+    --color-btn-active: var(--color-grey-800);
+    --color-btn-active-hover: var(--color-grey-900);
+
+    /* Inputs */
+    --color-input-disabled: var(--color-grey-100);
+
+    /*Links*/
+    --color-link-visited: var(--color-purple);
+
+    /* Tooltips */
+    --color-tooltip: var(--color-black);
+    --color-tooltip-foreground: var(--color-white);
+
+    /* Overlay */
+    --color-overlay: oklch(0 0 0 / 0.4);
+
+    /* Documentation */
+    --color-docs: var(--color-juke);
+  }
+}
+
+@layer base {
+  .dark,
+  :host(.dark) {
+    /* Main Colors */
+    --color-main: var(--color-white);
+    --color-main-hover: var(--color-grey-200);
+    --color-subtle: var(--color-grey-400);
+    --color-alt: var(--color-white);
+    --color-rev: var(--color-black);
+    --color-alt-rev: var(--color-black);
+    --color-muted: var(--color-grey-800);
+    --color-decorative: var(--color-grey-700);
+
+    --color-info: var(--color-fbk-info-subtle);
+    --color-info-rev: var(--color-fbk-info);
+    --color-warn: var(--color-fbk-warn-subtle);
+    --color-warn-rev: var(--color-fbk-warn);
+    --color-success: var(--color-fbk-success-subtle);
+    --color-success-rev: var(--color-fbk-success);
+    --color-error: var(--color-fbk-danger-subtle);
+    --color-error-rev: var(--color-fbk-danger);
+
+    /* Surface Colors */
+    --color-surface-neutral: var(--color-grey-950);
+    --color-surface-neutral-hover: var(--color-grey-900);
+    --color-surface-selected: var(--color-grey-800);
+    --color-surface-selected-hover: var(--color-grey-900);
+    --color-surface-primary: var(--color-grey-900);
+    --color-surface-secondary: var(--color-grey-700);
+    --color-surface-tertiary: var(--color-grey-900);
+    --color-surface-shimmer: var(--color-grey-850);
+    --color-surface-info: var(--color-fbk-info-surface-dark);
+    --color-surface-warn: var(--color-fbk-warn-surface-dark);
+    --color-surface-success: var(--color-fbk-success-surface-dark);
+    --color-surface-error: var(--color-fbk-danger-surface-dark);
+    --color-surface-muted: var(--color-grey-500);
+
+    /* Borders */
+    --color-bdr-subtle: var(--color-grey-800);
+    --color-bdr-soft: var(--color-grey-800);
+    --color-bdr-strong: var(--color-white);
+    --color-bdr-select: var(--color-blue-subtle);
+
+    /* Outline Ring */
+    --color-ring: var(--color-white);
+    --color-ring-alt: var(--color-white);
+    --color-ring-offset: var(--color-grey-950);
+    --color-ring-offset-alt: var(--color-grey-950);
+
+    /* Buttons */
+    --color-btn-primary: var(--color-grey-950);
+    --color-btn-primary-hover: var(--color-grey-900);
+    --color-btn-secondary: var(--color-grey-900);
+    --color-btn-secondary-hover: var(--color-grey-800);
+    --color-btn-tertiary: var(--color-grey-800);
+    --color-btn-tertiary-hover: var(--color-grey-700);
+    --color-btn-active: var(--color-grey-800);
+    --color-btn-active-hover: var(--color-grey-700);
+
+    /* Inputs */
+    --color-input-disabled: var(--color-grey-800);
+
+    /*Links*/
+    --color-link-visited: var(--color-purple-subtle);
+
+    /* Tooltips */
+    --color-tooltip: var(--color-grey-800);
+    --color-tooltip-foreground: var(--color-white);
+
+    /* Overlay */
+    --color-overlay: oklch(0 0 0 / 0.6);
+
+    /* Documentation */
+    --color-docs: var(--color-juke);
+  }
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* COLORS */
+  /* Main Colors */
+  --color-main: var(--color-main);
+  --color-main-hover: var(--color-main-hover);
+  --color-subtle: var(--color-subtle);
+  --color-alt: var(--color-alt);
+  --color-rev: var(--color-rev);
+  --color-alt-rev: var(--color-alt-rev);
+  --color-muted: var(--color-muted);
+  --color-decorative: var(--color-decorative);
+
+  --color-info: var(--color-info);
+  --color-info-rev: var(--color-info-rev);
+  --color-warn: var(--color-warn);
+  --color-warn-rev: var(--color-warn-rev);
+  --color-success: var(--color-success);
+  --color-success-rev: var(--color-success-rev);
+  --color-error: var(--color-error);
+  --color-error-rev: var(--color-error-rev);
+
+  /* Surface Colors */
+  --color-surface-neutral: var(--color-surface-neutral);
+  --color-surface-neutral-hover: var(--color-surface-neutral-hover);
+  --color-surface-selected: var(--color-surface-selected);
+  --color-surface-selected-hover: var(--color-surface-selected-hover);
+  --color-surface-primary: var(--color-surface-primary);
+  --color-surface-secondary: var(--color-surface-secondary);
+  --color-surface-tertiary: var(--color-surface-tertiary);
+  --color-surface-shimmer: var(--color-surface-shimmer);
+  --color-surface-info: var(--color-surface-info);
+  --color-surface-warn: var(--color-surface-warn);
+  --color-surface-success: var(--color-surface-success);
+  --color-surface-error: var(--color-surface-error);
+  --color-surface-muted: var(--color-surface-muted);
+
+  /* Borders */
+  --color-bdr-subtle: var(--color-bdr-subtle);
+  --color-bdr-soft: var(--color-bdr-soft);
+  --color-bdr-strong: var(--color-bdr-strong);
+  --color-bdr-select: var(--color-bdr-select);
+
+  /* Outline Ring */
+  --color-ring: var(--color-ring);
+  --color-ring-offset: var(--color-ring-offset);
+
+  /* Buttons */
+  --color-btn-primary: var(--color-btn-primary);
+  --color-btn-primary-hover: var(--color-btn-primary-hover);
+  --color-btn-secondary: var(--color-btn-secondary);
+  --color-btn-secondary-hover: var(--color-btn-secondary-hover);
+  --color-btn-tertiary: var(--color-btn-tertiary);
+  --color-btn-tertiary-hover: var(--color-btn-tertiary-hover);
+  --color-btn-active: var(--color-btn-active);
+  --color-btn-active-hover: var(--color-btn-active-hover);
+  --color-btn-error: var(--color-fbk-danger);
+  --color-btn-error-hover: color-mix(in srgb, var(--color-fbk-danger), black 10%);
+  --color-btn-error-active: color-mix(in srgb, var(--color-fbk-danger), black 19%);
+
+  /* Inputs */
+  --color-input-disabled: var(--color-input-disabled);
+
+  /*Links*/
+  --color-link-visited: var(--color-link-visited);
+
+  /* Tooltips */
+  --color-tooltip: var(--color-tooltip);
+  --color-tooltip-foreground: var(--color-tooltip-foreground);
+
+  /* Overlay */
+  --color-overlay: var(--color-overlay);
+
+  /* Documentation */
+  --color-docs: var(--color-docs);
+
+  /* SIZINGS */
+  --sizing-11\.5: calc(var(--spacing) * 11.5);
+}
+
+@layer base {
+  :root,
+  :host {
+    font-size: 16px;
+    color: var(--color-main);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility transition-highlight {
+  transition-property: color, box-shadow;
+  transition-duration: 100ms;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position-x: calc(-1 * var(--shimmer-band-size, 200px));
+  }
+  100% {
+    background-position-x: calc(var(--shimmer-end, 100%) + var(--shimmer-band-size, 200px));
+  }
+}
+
+@utility animate-skeleton-shimmer {
+  --shimmer-band-size: 200px;
+  background-image: linear-gradient(90deg, transparent 0%, var(--color-surface-neutral-hover) 50%, transparent 100%);
+  background-size: var(--shimmer-band-size) 100%;
+  background-repeat: no-repeat;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  opacity: 0;
+  &[data-ready='true'] {
+    opacity: 1;
+  }
+}
+
+@keyframes input-blink-ring {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-bdr-select) 45%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 8px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+@utility input-animated-border {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    padding: 1px;
+    border-radius: inherit;
+    background-color: var(--color-bdr-subtle);
+    background-image: linear-gradient(90deg, transparent 0%, var(--color-bdr-select) 50%, transparent 100%);
+    background-size: var(--shimmer-band-size, 200px) 100%;
+    background-repeat: no-repeat;
+    animation: skeleton-shimmer 1.6s ease-in-out infinite;
+    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+    -webkit-mask-clip: content-box, border-box;
+    -webkit-mask-composite: xor;
+    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+    mask-clip: content-box, border-box;
+    mask-composite: exclude;
+    pointer-events: none;
+    z-index: 1;
+  }
+}
+
+@utility input-blink-attention {
+  animation: input-blink-ring 0.6s ease-out 2;
+  /* Doubled `:focus-within` bumps specificity above Tailwind's `focus-within:ring-*` so the blink ring isn't fighting the focus ring during the animation. */
+  &:focus-within:focus-within {
+    box-shadow: none;
+  }
+}