@una-ui/preset 0.7.0-beta.2 → 0.9.0-beta.2

package/dist/prefixes.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const prefixes = ["accordion", "alert", "avatar-group", "avatar", "badge", "btn", "checkbox", "form-group", "general", "icon", "indicator", "input", "kbd", "link", "nav-link-group", "nav-link", "progress", "radio", "skeleton", "slider", "switch", "resize", "size", "nav-link-active", "nav-link-inactive"];
+const prefixes = ["theme-switcher", "checkbox", "form-group", "input", "radio", "slider", "switch", "accordion", "alert", "avatar", "avatar-group", "badge", "button", "icon", "indicator", "kbd", "link", "progress", "separator", "skeleton", "nav-link", "nav-link-group", "select", "select-content", "select-group", "select-item", "select-item-indicator", "select-item-text", "select-label", "select-root", "select-scroll-down-button", "select-scroll-up-button", "select-separator", "select-trigger", "select-value", "resize", "size", "btn"];
 
 module.exports = prefixes;

package/dist/prefixes.mjs

@@ -1,3 +1,3 @@
-const prefixes = ["accordion", "alert", "avatar-group", "avatar", "badge", "btn", "checkbox", "form-group", "general", "icon", "indicator", "input", "kbd", "link", "nav-link-group", "nav-link", "progress", "radio", "skeleton", "slider", "switch", "resize", "size", "nav-link-active", "nav-link-inactive"];
+const prefixes = ["theme-switcher", "checkbox", "form-group", "input", "radio", "slider", "switch", "accordion", "alert", "avatar", "avatar-group", "badge", "button", "icon", "indicator", "kbd", "link", "progress", "separator", "skeleton", "nav-link", "nav-link-group", "select", "select-content", "select-group", "select-item", "select-item-indicator", "select-item-text", "select-label", "select-root", "select-scroll-down-button", "select-scroll-up-button", "select-separator", "select-trigger", "select-value", "resize", "size", "btn"];
 
 export { prefixes as default };

package/dist/shortcuts.cjs

@@ -96,7 +96,7 @@ const staticBtn = {
   "btn-default-variant": "btn-solid",
   "btn-loading-icon": "i-loading",
   // base
-  "btn": "bg-transparent text-0.875em leading-5 gap-0.42857142857142855em btn-rectangle rounded-md inline-flex justify-center items-center btn-disabled font-semibold cursor-pointer",
+  "btn": "bg-transparent text-0.875em leading-5 gap-0.42857142857142855em btn-rectangle rounded-md inline-flex justify-center items-center btn-disabled font-medium cursor-pointer",
   "btn-disabled": "disabled:n-disabled",
   "btn-label": "",
   "btn-icon-label": "text-1.191em",
@@ -111,14 +111,17 @@ const staticBtn = {
   // variants
   "btn-solid-white": "bg-base text-base ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-muted",
   "btn-ghost-white": "text-base btn-focus hover:bg-$c-gray-50",
+  "btn-outline-white": "bg-transparent text-base ring-1 ring-base ring-inset btn-focus",
   "btn-solid-gray": "bg-$c-gray-50 text-$c-gray-800 ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-$c-gray-100",
   "btn-ghost-gray": "text-$c-gray-600 btn-focus hover:bg-$c-gray-100",
   "btn-soft-gray": "text-$c-gray-600 bg-$c-gray-50 btn-focus hover:bg-$c-gray-100",
-  "btn-link-gray": "text-$c-gray-500 btn-focus hover:text-$c-gray-950 hover:underline underline-offset-4",
-  "btn-solid-black": "bg-$c-gray-950 text-inverted shadow-sm btn-focus hover:bg-$c-gray-900",
-  "btn-link-black": "text-$c-gray-950 btn-focus hover:underline underline-offset-4",
-  "btn-text-black": "text-$c-gray-950 btn-focus hover:text-$c-gray-900",
-  "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900"
+  "btn-outline-gray": "bg-transparent text-muted ring-1 ring-base ring-inset btn-focus",
+  "btn-link-gray": "text-muted btn-focus hover:text-base hover:underline underline-offset-4",
+  "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900",
+  "btn-solid-black": "bg-inverted text-inverted shadow-sm btn-focus",
+  "btn-link-black": "text-base btn-focus hover:underline underline-offset-4",
+  "btn-text-black": "text-base btn-focus hover:text-muted",
+  "btn-soft-black": "text-base bg-base btn-focus shadow-sm"
 };
 const dynamicBtn = [
   // base
@@ -209,6 +212,10 @@ const staticGeneral = {
   "text-base": "text-$c-foreground",
   "text-inverted": "text-$c-background",
   "text-muted": "text-$c-muted-foreground",
+  "text-accent": "text-$c-accent-foreground",
+  "text-accent-forground": "text-$c-accent",
+  "text-popover": "text-$c-popover-foreground",
+  "text-popover-foreground": "text-$c-popover",
   "text-info": "text-info-500 dark:text-info-400",
   "text-error": "text-error-500 dark:text-error-400",
   "text-success": "text-success-500 dark:text-success-400",
@@ -226,6 +233,10 @@ const staticGeneral = {
   "bg-base": "bg-$c-background",
   "bg-inverted": "bg-$c-foreground",
   "bg-muted": "bg-$c-muted",
+  "bg-accent": "bg-$c-accent",
+  "bg-accent-foreground": "bg-$c-accent-foreground",
+  "bg-popover": "bg-$c-popover",
+  "bg-popover-foreground": "bg-$c-popover-foreground",
   // icon
   "i-loading": "i-tabler-loader-2",
   "i-warning": "i-heroicons-exclamation-triangle-20-solid",
@@ -234,7 +245,7 @@ const staticGeneral = {
   "i-info": "i-heroicons-information-circle-20-solid",
   "i-close": "i-heroicons-x-mark-20-solid",
   "i-dot": "i-tabler-circle-filled",
-  "i-check": "i-tabler-check",
+  "i-check": "i-lucide-check",
   // transition
   "transition-base": "transition-all duration-100 ease-out"
 };
@@ -415,9 +426,9 @@ const staticKbd = {
 };
 const dynamicKbd = [
   // modifiers
-  [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring ring-inset ring-${c}-200 dark:ring-${c}-700`],
+  [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700`],
   // variants
-  [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-950 dark:text-${c}-400`],
+  [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-900 dark:text-${c}-400`],
   [/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
 ];
 const kbd = [
@@ -454,7 +465,7 @@ const radio = [
 
 const staticCheckbox = {
   // base
-  "checkbox": "text-md checkbox-primary flex items-center transition-base w-1em h-1em border border-$c-ring rounded n-checked:border-brand n-checked:bg-brand",
+  "checkbox": "text-md checkbox-primary flex items-center transition-base w-1em h-1em border border-brand rounded n-checked:border-brand n-checked:bg-brand",
   "checkbox-disabled": "n-disabled",
   "checkbox-label": "block text-sm font-medium leading-6",
   "checkbox-input": "absolute w-full opacity-0",
@@ -540,6 +551,84 @@ const skeleton = [
   staticSkeleton
 ];
 
+const staticSelect = {
+  // configurations
+  "select": "",
+  "select-disabled": "n-disabled",
+  "select-scroll": "flex cursor-default items-center justify-center py-1",
+  "select-trigger-info-icon": "i-info",
+  "select-trigger-error-icon": "i-error",
+  "select-trigger-success-icon": "i-success",
+  "select-trigger-warning-icon": "i-warning",
+  // components
+  "select-root": "",
+  "select-trigger": "min-h-2.5em w-full",
+  // [&>span]:line-clamp-1
+  "select-trigger-trailing-icon": "i-lucide-chevrons-up-down !text-1.042em",
+  "select-trigger-trailing": "ml-auto",
+  "select-trigger-leading": "",
+  "select-value": "h-1.5em",
+  "select-content": "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-base bg-popover text-popover shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  "select-content-popper": "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+  "select-group": "p-1 w-full",
+  "select-separator": "-mx-1 my-1 h-px bg-muted",
+  "select-item": "select-item-gray relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-1em outline-none data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
+  "select-item-indicator": "absolute left-2 h-0.75em w-0.75em flex items-center justify-center",
+  "select-item-indicator-icon": "i-check",
+  "select-viewport": "p-1",
+  "select-viewport-popper": "h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]",
+  "select-scroll-up-button": "select-scroll",
+  "select-scroll-down-button": "select-scroll",
+  "select-scroll-up-button-icon": "i-lucide-chevron-up",
+  "select-scroll-down-button-icon": "i-lucide-chevron-down",
+  "select-label": "py-1.5 pl-8 pr-2 text-1em font-semibold",
+  // ⚠️ for overriding purposes only
+  "select-item-selectItem": ""
+};
+const dynamicSelect = [
+  [/^select-(.*)$/, ([, body], { theme }) => {
+    const color = utils.parseColor(body, theme);
+    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
+      return `n-${body}-600 dark:n-${body}-500`;
+  }],
+  [/^select-item(-(\S+))?$/, ([, , c = "gray"]) => `focus:bg-${c}-100 focus:text-${c}-800 dark:focus:bg-${c}-800 dark:focus:text-${c}-100`]
+];
+const select = [
+  ...dynamicSelect,
+  staticSelect
+];
+
+const staticSeparator = {
+  // base
+  "separator": "text-md shrink-0 relative",
+  "separator-default-variant": "separator-solid-gray",
+  "separator-content": "text-0.75em text-muted bg-base absolute flex justify-center items-center",
+  // orientation states
+  "separator-horizontal": "h-px my-4 w-full border-t-0.0625em",
+  "separator-vertical": "w-px mx-4 h-full border-l-0.0625em",
+  "separator-content-horizontal": "h-1px py-1 px-2",
+  "separator-content-vertical": "w-1px px-1 py-2",
+  // horizontal positions
+  "separator-position-left": "left-6 top-1/2 -translate-y-1/2",
+  "separator-position-right": "right-6 top-1/2 -translate-y-1/2",
+  "separator-position-center": "left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2",
+  // vertical positions
+  "separator-position-bottom": "bottom-4 left-1/2 -translate-x-1/2",
+  "separator-position-top": "top-4 left-1/2 -translate-x-1/2",
+  // static variants
+  "separator-solid-gray": "border-base"
+};
+const dynamicSeparator = [
+  // dynamic variants
+  [/^seperator-solid(-(\S+))?$/, ([, , c = "gray"]) => `border-solid border-${c}-200 dark:border-${c}-700/58`],
+  [/^separator-dashed(-(\S+))?$/, ([, , c = "gray"]) => `border-dashed border-${c}-200 dark:border-${c}-700/58`],
+  [/^separator-dotted(-(\S+))?$/, ([, , c = "gray"]) => `border-dotted border-${c}-200 dark:border-${c}-700/58`]
+];
+const separator = [
+  ...dynamicSeparator,
+  staticSeparator
+];
+
 const shortcuts = [
   ...general,
   ...accordion,
@@ -561,7 +650,9 @@ const shortcuts = [
   ...checkbox,
   ...slider,
   ...progress,
-  ...skeleton
+  ...skeleton,
+  ...select,
+  ...separator
 ];
 
 exports.shortcuts = shortcuts;

package/dist/shortcuts.mjs

@@ -94,7 +94,7 @@ const staticBtn = {
   "btn-default-variant": "btn-solid",
   "btn-loading-icon": "i-loading",
   // base
-  "btn": "bg-transparent text-0.875em leading-5 gap-0.42857142857142855em btn-rectangle rounded-md inline-flex justify-center items-center btn-disabled font-semibold cursor-pointer",
+  "btn": "bg-transparent text-0.875em leading-5 gap-0.42857142857142855em btn-rectangle rounded-md inline-flex justify-center items-center btn-disabled font-medium cursor-pointer",
   "btn-disabled": "disabled:n-disabled",
   "btn-label": "",
   "btn-icon-label": "text-1.191em",
@@ -109,14 +109,17 @@ const staticBtn = {
   // variants
   "btn-solid-white": "bg-base text-base ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-muted",
   "btn-ghost-white": "text-base btn-focus hover:bg-$c-gray-50",
+  "btn-outline-white": "bg-transparent text-base ring-1 ring-base ring-inset btn-focus",
   "btn-solid-gray": "bg-$c-gray-50 text-$c-gray-800 ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-$c-gray-100",
   "btn-ghost-gray": "text-$c-gray-600 btn-focus hover:bg-$c-gray-100",
   "btn-soft-gray": "text-$c-gray-600 bg-$c-gray-50 btn-focus hover:bg-$c-gray-100",
-  "btn-link-gray": "text-$c-gray-500 btn-focus hover:text-$c-gray-950 hover:underline underline-offset-4",
-  "btn-solid-black": "bg-$c-gray-950 text-inverted shadow-sm btn-focus hover:bg-$c-gray-900",
-  "btn-link-black": "text-$c-gray-950 btn-focus hover:underline underline-offset-4",
-  "btn-text-black": "text-$c-gray-950 btn-focus hover:text-$c-gray-900",
-  "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900"
+  "btn-outline-gray": "bg-transparent text-muted ring-1 ring-base ring-inset btn-focus",
+  "btn-link-gray": "text-muted btn-focus hover:text-base hover:underline underline-offset-4",
+  "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900",
+  "btn-solid-black": "bg-inverted text-inverted shadow-sm btn-focus",
+  "btn-link-black": "text-base btn-focus hover:underline underline-offset-4",
+  "btn-text-black": "text-base btn-focus hover:text-muted",
+  "btn-soft-black": "text-base bg-base btn-focus shadow-sm"
 };
 const dynamicBtn = [
   // base
@@ -207,6 +210,10 @@ const staticGeneral = {
   "text-base": "text-$c-foreground",
   "text-inverted": "text-$c-background",
   "text-muted": "text-$c-muted-foreground",
+  "text-accent": "text-$c-accent-foreground",
+  "text-accent-forground": "text-$c-accent",
+  "text-popover": "text-$c-popover-foreground",
+  "text-popover-foreground": "text-$c-popover",
   "text-info": "text-info-500 dark:text-info-400",
   "text-error": "text-error-500 dark:text-error-400",
   "text-success": "text-success-500 dark:text-success-400",
@@ -224,6 +231,10 @@ const staticGeneral = {
   "bg-base": "bg-$c-background",
   "bg-inverted": "bg-$c-foreground",
   "bg-muted": "bg-$c-muted",
+  "bg-accent": "bg-$c-accent",
+  "bg-accent-foreground": "bg-$c-accent-foreground",
+  "bg-popover": "bg-$c-popover",
+  "bg-popover-foreground": "bg-$c-popover-foreground",
   // icon
   "i-loading": "i-tabler-loader-2",
   "i-warning": "i-heroicons-exclamation-triangle-20-solid",
@@ -232,7 +243,7 @@ const staticGeneral = {
   "i-info": "i-heroicons-information-circle-20-solid",
   "i-close": "i-heroicons-x-mark-20-solid",
   "i-dot": "i-tabler-circle-filled",
-  "i-check": "i-tabler-check",
+  "i-check": "i-lucide-check",
   // transition
   "transition-base": "transition-all duration-100 ease-out"
 };
@@ -413,9 +424,9 @@ const staticKbd = {
 };
 const dynamicKbd = [
   // modifiers
-  [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring ring-inset ring-${c}-200 dark:ring-${c}-700`],
+  [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700`],
   // variants
-  [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-950 dark:text-${c}-400`],
+  [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-900 dark:text-${c}-400`],
   [/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
 ];
 const kbd = [
@@ -452,7 +463,7 @@ const radio = [
 
 const staticCheckbox = {
   // base
-  "checkbox": "text-md checkbox-primary flex items-center transition-base w-1em h-1em border border-$c-ring rounded n-checked:border-brand n-checked:bg-brand",
+  "checkbox": "text-md checkbox-primary flex items-center transition-base w-1em h-1em border border-brand rounded n-checked:border-brand n-checked:bg-brand",
   "checkbox-disabled": "n-disabled",
   "checkbox-label": "block text-sm font-medium leading-6",
   "checkbox-input": "absolute w-full opacity-0",
@@ -538,6 +549,84 @@ const skeleton = [
   staticSkeleton
 ];
 
+const staticSelect = {
+  // configurations
+  "select": "",
+  "select-disabled": "n-disabled",
+  "select-scroll": "flex cursor-default items-center justify-center py-1",
+  "select-trigger-info-icon": "i-info",
+  "select-trigger-error-icon": "i-error",
+  "select-trigger-success-icon": "i-success",
+  "select-trigger-warning-icon": "i-warning",
+  // components
+  "select-root": "",
+  "select-trigger": "min-h-2.5em w-full",
+  // [&>span]:line-clamp-1
+  "select-trigger-trailing-icon": "i-lucide-chevrons-up-down !text-1.042em",
+  "select-trigger-trailing": "ml-auto",
+  "select-trigger-leading": "",
+  "select-value": "h-1.5em",
+  "select-content": "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-base bg-popover text-popover shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  "select-content-popper": "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+  "select-group": "p-1 w-full",
+  "select-separator": "-mx-1 my-1 h-px bg-muted",
+  "select-item": "select-item-gray relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-1em outline-none data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
+  "select-item-indicator": "absolute left-2 h-0.75em w-0.75em flex items-center justify-center",
+  "select-item-indicator-icon": "i-check",
+  "select-viewport": "p-1",
+  "select-viewport-popper": "h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]",
+  "select-scroll-up-button": "select-scroll",
+  "select-scroll-down-button": "select-scroll",
+  "select-scroll-up-button-icon": "i-lucide-chevron-up",
+  "select-scroll-down-button-icon": "i-lucide-chevron-down",
+  "select-label": "py-1.5 pl-8 pr-2 text-1em font-semibold",
+  // ⚠️ for overriding purposes only
+  "select-item-selectItem": ""
+};
+const dynamicSelect = [
+  [/^select-(.*)$/, ([, body], { theme }) => {
+    const color = parseColor(body, theme);
+    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
+      return `n-${body}-600 dark:n-${body}-500`;
+  }],
+  [/^select-item(-(\S+))?$/, ([, , c = "gray"]) => `focus:bg-${c}-100 focus:text-${c}-800 dark:focus:bg-${c}-800 dark:focus:text-${c}-100`]
+];
+const select = [
+  ...dynamicSelect,
+  staticSelect
+];
+
+const staticSeparator = {
+  // base
+  "separator": "text-md shrink-0 relative",
+  "separator-default-variant": "separator-solid-gray",
+  "separator-content": "text-0.75em text-muted bg-base absolute flex justify-center items-center",
+  // orientation states
+  "separator-horizontal": "h-px my-4 w-full border-t-0.0625em",
+  "separator-vertical": "w-px mx-4 h-full border-l-0.0625em",
+  "separator-content-horizontal": "h-1px py-1 px-2",
+  "separator-content-vertical": "w-1px px-1 py-2",
+  // horizontal positions
+  "separator-position-left": "left-6 top-1/2 -translate-y-1/2",
+  "separator-position-right": "right-6 top-1/2 -translate-y-1/2",
+  "separator-position-center": "left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2",
+  // vertical positions
+  "separator-position-bottom": "bottom-4 left-1/2 -translate-x-1/2",
+  "separator-position-top": "top-4 left-1/2 -translate-x-1/2",
+  // static variants
+  "separator-solid-gray": "border-base"
+};
+const dynamicSeparator = [
+  // dynamic variants
+  [/^seperator-solid(-(\S+))?$/, ([, , c = "gray"]) => `border-solid border-${c}-200 dark:border-${c}-700/58`],
+  [/^separator-dashed(-(\S+))?$/, ([, , c = "gray"]) => `border-dashed border-${c}-200 dark:border-${c}-700/58`],
+  [/^separator-dotted(-(\S+))?$/, ([, , c = "gray"]) => `border-dotted border-${c}-200 dark:border-${c}-700/58`]
+];
+const separator = [
+  ...dynamicSeparator,
+  staticSeparator
+];
+
 const shortcuts = [
   ...general,
   ...accordion,
@@ -559,7 +648,9 @@ const shortcuts = [
   ...checkbox,
   ...slider,
   ...progress,
-  ...skeleton
+  ...skeleton,
+  ...select,
+  ...separator
 ];
 
 export { shortcuts };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@una-ui/preset",
-  "version": "0.7.0-beta.2",
+  "version": "0.9.0-beta.2",
   "description": "The default preset for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",

package/una.css

@@ -1 +1 @@
-@import"@unocss/reset/tailwind-compat.css";:root{--una-primary-hex: #ca8a04;--una-primary-50: 254, 252, 232;--una-primary-100: 254, 249, 195;--una-primary-200: 254, 240, 138;--una-primary-300: 253, 224, 71;--una-primary-400: 250, 204, 21;--una-primary-500: 234, 179, 8;--una-primary-600: 202, 138, 4;--una-primary-700: 161, 98, 7;--una-primary-800: 133, 77, 14;--una-primary-900: 113, 63, 18;--una-primary-950: 66, 32, 6;--una-gray-hex: #57534e;--una-gray-50: 250, 250, 249;--una-gray-100: 245, 245, 244;--una-gray-200: 231, 229, 228;--una-gray-300: 214, 211, 209;--una-gray-400: 168, 162, 158;--una-gray-500: 120, 113, 108;--una-gray-600: 87, 83, 78;--una-gray-700: 68, 64, 60;--una-gray-800: 41, 37, 36;--una-gray-900: 28, 25, 23;--una-gray-950: 12, 10, 9}:root{--c-gray-0: rgb(255 255 255);--c-gray-50: rgb(var(--una-gray-50));--c-gray-100: rgb(var(--una-gray-100));--c-gray-200: rgb(var(--una-gray-200));--c-gray-300: rgb(var(--una-gray-300));--c-gray-400: rgb(var(--una-gray-400));--c-gray-500: rgb(var(--una-gray-500));--c-gray-600: rgb(var(--una-gray-600));--c-gray-700: rgb(var(--una-gray-700));--c-gray-800: rgb(var(--una-gray-800));--c-gray-900: rgb(var(--una-gray-900));--c-gray-950: rgb(var(--una-gray-950))}.dark{--c-gray-0: rgb(var(--una-gray-950));--c-gray-50: rgb(var(--una-gray-900));--c-gray-100: rgb(var(--una-gray-800));--c-gray-200: rgb(var(--una-gray-700));--c-gray-300: rgb(var(--una-gray-600));--c-gray-400: rgb(var(--una-gray-500));--c-gray-500: rgb(var(--una-gray-400));--c-gray-600: rgb(var(--una-gray-300));--c-gray-700: rgb(var(--una-gray-200));--c-gray-800: rgb(var(--una-gray-100));--c-gray-900: rgb(var(--una-gray-50));--c-gray-950: rgb(255 255 255)}:root{--una-primary: var(--una-primary-600);--una-primary-active: var(--una-primary-500);--una-gray: var(--una-gray-600);--una-gray-active: var(--una-gray-500);--c-brand: rgb(var(--una-primary-600));--c-background: rgb(255 255 255);--c-foreground: rgb(var(--una-gray-950));--c-muted: rgb(var(--una-gray-50));--c-muted-foreground: rgb(var(--una-gray-900));--c-bg-selection: rgba(var(--una-primary-600), 0.2);--c-border: rgb(var(--una-gray-200));--c-ring: rgb(var(--una-gray-200));--c-divider: rgb(var(--una-gray-200))}.dark{--una-primary: var(--una-primary-500);--una-primary-active: var(--una-primary-400);--una-gray: var(--una-gray-500);--una-gray-active: var(--una-gray-400);--c-brand: rgb(var(--una-primary-500));--c-background: rgb(var(--una-gray-950));--c-foreground: rgb(255 255 255);--c-muted: rgb(var(--una-gray-900));--c-muted-foreground: rgb(var(--una-gray-50));--c-bg-selection: rgba(var(--una-primary-500), 0.2);--c-border: rgba(var(--una-gray-700), .68);--c-ring: rgba(var(--una-gray-700), .68);--c-divider: rgba(var(--una-gray-700), .68)}html{font-size:var(--font-size, 16px);background-color:var(--c-background);color:var(--c-foreground);height:100dvh}html.dark{color-scheme:dark}::-moz-selection{background:var(--c-bg-selection)}::selection{background:var(--c-bg-selection)}*{-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}
+@import"@unocss/reset/tailwind-compat.css";:root{--una-primary-hex: #ca8a04;--una-primary-50: 254, 252, 232;--una-primary-100: 254, 249, 195;--una-primary-200: 254, 240, 138;--una-primary-300: 253, 224, 71;--una-primary-400: 250, 204, 21;--una-primary-500: 234, 179, 8;--una-primary-600: 202, 138, 4;--una-primary-700: 161, 98, 7;--una-primary-800: 133, 77, 14;--una-primary-900: 113, 63, 18;--una-primary-950: 66, 32, 6;--una-gray-hex: #57534e;--una-gray-50: 250, 250, 249;--una-gray-100: 245, 245, 244;--una-gray-200: 231, 229, 228;--una-gray-300: 214, 211, 209;--una-gray-400: 168, 162, 158;--una-gray-500: 120, 113, 108;--una-gray-600: 87, 83, 78;--una-gray-700: 68, 64, 60;--una-gray-800: 41, 37, 36;--una-gray-900: 28, 25, 23;--una-gray-950: 12, 10, 9}:root{--c-gray-0: rgb(255 255 255);--c-gray-50: rgb(var(--una-gray-50));--c-gray-100: rgb(var(--una-gray-100));--c-gray-200: rgb(var(--una-gray-200));--c-gray-300: rgb(var(--una-gray-300));--c-gray-400: rgb(var(--una-gray-400));--c-gray-500: rgb(var(--una-gray-500));--c-gray-600: rgb(var(--una-gray-600));--c-gray-700: rgb(var(--una-gray-700));--c-gray-800: rgb(var(--una-gray-800));--c-gray-900: rgb(var(--una-gray-900));--c-gray-950: rgb(var(--una-gray-950))}.dark{--c-gray-0: rgb(var(--una-gray-950));--c-gray-50: rgb(var(--una-gray-900));--c-gray-100: rgb(var(--una-gray-800));--c-gray-200: rgb(var(--una-gray-700));--c-gray-300: rgb(var(--una-gray-600));--c-gray-400: rgb(var(--una-gray-500));--c-gray-500: rgb(var(--una-gray-400));--c-gray-600: rgb(var(--una-gray-300));--c-gray-700: rgb(var(--una-gray-200));--c-gray-800: rgb(var(--una-gray-100));--c-gray-900: rgb(var(--una-gray-50));--c-gray-950: rgb(255 255 255)}:root{--c-brand: rgb(var(--una-primary-600));--una-primary: var(--una-primary-600);--una-primary-active: var(--una-primary-500);--una-gray: var(--una-gray-600);--una-gray-active: var(--una-gray-500);--c-background: rgb(255 255 255);--c-foreground: rgb(var(--una-gray-950));--c-muted: rgb(var(--una-gray-50));--c-muted-foreground: rgb(var(--una-gray-500));--c-accent: rgb(var(--una-gray-100));--c-accent-foreground: rgb(var(--una-gray-800));--c-popover: rgb(255 255 255);--c-popover-foreground: rgb(var(--una-gray-950));--c-border: rgb(var(--una-gray-200));--c-ring: rgb(var(--una-gray-200));--c-divider: rgb(var(--una-gray-200));--c-bg-selection: rgba(var(--una-primary-600), 0.2);--radius: 0.95rem}.dark{--c-brand: rgb(var(--una-primary-500));--una-primary: var(--una-primary-500);--una-primary-active: var(--una-primary-400);--una-gray: var(--una-gray-500);--una-gray-active: var(--una-gray-400);--c-background: rgb(var(--una-gray-950));--c-foreground: rgb(255 255 255);--c-muted: rgb(var(--una-gray-900));--c-muted-foreground: rgb(var(--una-gray-400));--c-accent: rgb(var(--una-gray-800));--c-accent-foreground: rgb(var(--una-gray-100));--c-popover: rgb(var(--una-gray-950));--c-popover-foreground: rgb(255 255 255);--c-border: rgba(var(--una-gray-700), .58);--c-ring: rgba(var(--una-gray-700), .58);--c-divider: rgba(var(--una-gray-700), .58);--c-bg-selection: rgba(var(--una-primary-500), 0.2)}html{font-size:var(--font-size, 16px);background-color:var(--c-background);color:var(--c-foreground);height:100dvh}html.dark{color-scheme:dark}::-moz-selection{background:var(--c-bg-selection)}::selection{background:var(--c-bg-selection)}*{-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}*{scrollbar-color:rgba(136,136,136,.3333333333) var(--c-border)}::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar:horizontal{height:.5rem}::-webkit-scrollbar-track{background:var(--c-border);border-radius:var(--radius)}::-webkit-scrollbar-thumb{background:var(--muted-foreground);border-radius:calc(var(--radius) - 4px)}::-webkit-scrollbar-thumb:hover{background:var(--muted) !important}