@una-ui/preset 0.15.1-beta.2 → 0.16.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.cjs +6 -0
  2. package/dist/index.mjs +6 -0
  3. package/dist/prefixes.cjs +1 -1
  4. package/dist/prefixes.mjs +1 -1
  5. package/dist/shortcuts.cjs +34 -10
  6. package/dist/shortcuts.mjs +34 -10
  7. package/package.json +1 -1
  8. package/una.css +1 -1
package/dist/index.cjs CHANGED
@@ -51,6 +51,12 @@ function presetUna(options = {
51
51
  success: colors.colors.green,
52
52
  warning: colors.colors.amber,
53
53
  info: colors.colors.blue
54
+ },
55
+ borderRadius: {
56
+ xl: "calc(var(--una-radius) + 4px)",
57
+ lg: "var(--una-radius)",
58
+ md: "calc(var(--una-radius) - 2px)",
59
+ sm: "calc(var(--una-radius) - 4px)"
54
60
  }
55
61
  }),
56
62
  rules: [
package/dist/index.mjs CHANGED
@@ -49,6 +49,12 @@ function presetUna(options = {
49
49
  success: colors.green,
50
50
  warning: colors.amber,
51
51
  info: colors.blue
52
+ },
53
+ borderRadius: {
54
+ xl: "calc(var(--una-radius) + 4px)",
55
+ lg: "var(--una-radius)",
56
+ md: "calc(var(--una-radius) - 2px)",
57
+ sm: "calc(var(--una-radius) - 4px)"
52
58
  }
53
59
  }),
54
60
  rules: [
package/dist/prefixes.cjs CHANGED
@@ -1,5 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const prefixes = ["accordion", "alert", "avatar", "avatar-group", "badge", "breadcrumb", "breadcrumb-active", "breadcrumb-inactive", "breadcrumb-ellipsis", "breadcrumb-item", "breadcrumb-link", "breadcrumb-list", "breadcrumb-root", "breadcrumb-separator", "btn", "button", "card", "card-about", "card-content", "card-description", "card-footer", "card-header", "card-title", "checkbox", "dropdown-menu", "dropdown-menu-content", "dropdown-menu-group", "dropdown-menu-item", "dropdown-menu-label", "dropdown-menu-root", "dropdown-menu-separator", "dropdown-menu-shortcut", "dropdown-menu-sub", "dropdown-menu-sub-content", "dropdown-menu-sub-trigger", "dropdown-menu-trigger", "form-group", "icon", "indicator", "input", "kbd", "link", "nav-link", "nav-link-group", "progress", "radio", "resize", "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", "separator", "size", "skeleton", "slider", "switch", "table", "table-body", "table-caption", "table-cell", "table-empty", "table-footer", "table-head", "table-header", "table-loading", "table-root", "table-row", "tabs", "tabs-content", "tabs-list", "tabs-root", "tabs-trigger", "theme-switcher"];
3
+ const prefixes = ["accordion", "alert", "avatar", "avatar-group", "badge", "breadcrumb", "breadcrumb-active", "breadcrumb-inactive", "breadcrumb-ellipsis", "breadcrumb-item", "breadcrumb-link", "breadcrumb-list", "breadcrumb-root", "breadcrumb-separator", "btn", "button", "card", "card-about", "card-content", "card-description", "card-footer", "card-header", "card-title", "checkbox", "dropdown-menu", "dropdown-menu-content", "dropdown-menu-group", "dropdown-menu-item", "dropdown-menu-label", "dropdown-menu-root", "dropdown-menu-separator", "dropdown-menu-shortcut", "dropdown-menu-sub", "dropdown-menu-sub-content", "dropdown-menu-sub-trigger", "dropdown-menu-trigger", "form-group", "icon", "indicator", "input", "kbd", "label", "link", "nav-link", "nav-link-group", "popover", "popover-content", "progress", "radio", "resize", "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", "separator", "size", "skeleton", "slider", "switch", "table", "table-body", "table-caption", "table-cell", "table-empty", "table-footer", "table-head", "table-header", "table-loading", "table-root", "table-row", "tabs", "tabs-content", "tabs-list", "tabs-root", "tabs-trigger", "theme-switcher"];
4
4
 
5
5
  module.exports = prefixes;
package/dist/prefixes.mjs CHANGED
@@ -1,3 +1,3 @@
1
- const prefixes = ["accordion", "alert", "avatar", "avatar-group", "badge", "breadcrumb", "breadcrumb-active", "breadcrumb-inactive", "breadcrumb-ellipsis", "breadcrumb-item", "breadcrumb-link", "breadcrumb-list", "breadcrumb-root", "breadcrumb-separator", "btn", "button", "card", "card-about", "card-content", "card-description", "card-footer", "card-header", "card-title", "checkbox", "dropdown-menu", "dropdown-menu-content", "dropdown-menu-group", "dropdown-menu-item", "dropdown-menu-label", "dropdown-menu-root", "dropdown-menu-separator", "dropdown-menu-shortcut", "dropdown-menu-sub", "dropdown-menu-sub-content", "dropdown-menu-sub-trigger", "dropdown-menu-trigger", "form-group", "icon", "indicator", "input", "kbd", "link", "nav-link", "nav-link-group", "progress", "radio", "resize", "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", "separator", "size", "skeleton", "slider", "switch", "table", "table-body", "table-caption", "table-cell", "table-empty", "table-footer", "table-head", "table-header", "table-loading", "table-root", "table-row", "tabs", "tabs-content", "tabs-list", "tabs-root", "tabs-trigger", "theme-switcher"];
1
+ const prefixes = ["accordion", "alert", "avatar", "avatar-group", "badge", "breadcrumb", "breadcrumb-active", "breadcrumb-inactive", "breadcrumb-ellipsis", "breadcrumb-item", "breadcrumb-link", "breadcrumb-list", "breadcrumb-root", "breadcrumb-separator", "btn", "button", "card", "card-about", "card-content", "card-description", "card-footer", "card-header", "card-title", "checkbox", "dropdown-menu", "dropdown-menu-content", "dropdown-menu-group", "dropdown-menu-item", "dropdown-menu-label", "dropdown-menu-root", "dropdown-menu-separator", "dropdown-menu-shortcut", "dropdown-menu-sub", "dropdown-menu-sub-content", "dropdown-menu-sub-trigger", "dropdown-menu-trigger", "form-group", "icon", "indicator", "input", "kbd", "label", "link", "nav-link", "nav-link-group", "popover", "popover-content", "progress", "radio", "resize", "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", "separator", "size", "skeleton", "slider", "switch", "table", "table-body", "table-caption", "table-cell", "table-empty", "table-footer", "table-head", "table-header", "table-loading", "table-root", "table-row", "tabs", "tabs-content", "tabs-list", "tabs-root", "tabs-trigger", "theme-switcher"];
2
2
 
3
3
  export { prefixes as default };
package/dist/shortcuts.cjs CHANGED
@@ -427,7 +427,7 @@ const staticKbd = {
427
427
  };
428
428
  const dynamicKbd = [
429
429
  // modifiers
430
- [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700`],
430
+ [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700/58`],
431
431
  // variants
432
432
  [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-900 dark:text-${c}-400`],
433
433
  [/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
@@ -466,18 +466,17 @@ const radio = [
466
466
 
467
467
  const staticCheckbox = {
468
468
  // base
469
- "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",
470
- "checkbox-disabled": "n-disabled",
471
- "checkbox-label": "block text-sm font-medium leading-6",
472
- "checkbox-input": "absolute w-full opacity-0",
469
+ "checkbox": "checkbox-primary text-md w-1em h-1em shrink-0 rounded-sm ring-offset-base focus-visible:outline-none disabled:n-disabled border border-brand bg-brand text-inverted focus-visible:(ring-2 ring-brand ring-offset-2) data-[state=unchecked]:(bg-base text-base)",
470
+ "checkbox-label": "block",
473
471
  "checkbox-reverse": "flex-row-reverse",
474
- "checkbox-peer-focus": "peer-focus-(ring-2 ring-brand ring-offset-2 ring-offset-base)",
475
472
  // wrappers
476
473
  "checkbox-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
477
474
  // icon
478
- "checkbox-icon-base": "m-auto h-full w-full opacity-0 transition-base n-checked:opacity-100 text-inverted",
479
- "checkbox-icon": "i-check"
480
- // refer to general.ts
475
+ "checkbox-indicator": "flex items-center justify-center h-full w-full data-[state=unchecked]:opacity-0 transition-base opacity-100 text-inverted",
476
+ "checkbox-icon-base": "w-1em h-1em",
477
+ "checkbox-checked-icon": "i-check",
478
+ "checkbox-unchecked-icon": "",
479
+ "checkbox-indeterminate-icon": "i-lucide-minus"
481
480
  };
482
481
  const dynamicCheckbox = [
483
482
  [/^checkbox-(.*)$/, ([, body], { theme }) => {
@@ -782,6 +781,29 @@ const dropdowMenu = [
782
781
  staticDropdownMenu
783
782
  ];
784
783
 
784
+ const staticLabel = {
785
+ // base
786
+ "label-base": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:n-disabled"
787
+ };
788
+ const dynamicLabel = [
789
+ // dynamic preset
790
+ ];
791
+ const label = [
792
+ ...dynamicLabel,
793
+ staticLabel
794
+ ];
795
+
796
+ const staticPopover = {
797
+ popover: "w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none 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"
798
+ };
799
+ const dynamicPopover = [
800
+ // dynamic preset
801
+ ];
802
+ const popover = [
803
+ ...dynamicPopover,
804
+ staticPopover
805
+ ];
806
+
785
807
  const shortcuts = [
786
808
  ...general,
787
809
  ...breadcrumb,
@@ -810,7 +832,9 @@ const shortcuts = [
810
832
  ...separator,
811
833
  ...card,
812
834
  ...table,
813
- ...dropdowMenu
835
+ ...dropdowMenu,
836
+ ...label,
837
+ ...popover
814
838
  ];
815
839
 
816
840
  exports.shortcuts = shortcuts;
package/dist/shortcuts.mjs CHANGED
@@ -425,7 +425,7 @@ const staticKbd = {
425
425
  };
426
426
  const dynamicKbd = [
427
427
  // modifiers
428
- [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700`],
428
+ [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700/58`],
429
429
  // variants
430
430
  [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-900 dark:text-${c}-400`],
431
431
  [/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
@@ -464,18 +464,17 @@ const radio = [
464
464
 
465
465
  const staticCheckbox = {
466
466
  // base
467
- "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",
468
- "checkbox-disabled": "n-disabled",
469
- "checkbox-label": "block text-sm font-medium leading-6",
470
- "checkbox-input": "absolute w-full opacity-0",
467
+ "checkbox": "checkbox-primary text-md w-1em h-1em shrink-0 rounded-sm ring-offset-base focus-visible:outline-none disabled:n-disabled border border-brand bg-brand text-inverted focus-visible:(ring-2 ring-brand ring-offset-2) data-[state=unchecked]:(bg-base text-base)",
468
+ "checkbox-label": "block",
471
469
  "checkbox-reverse": "flex-row-reverse",
472
- "checkbox-peer-focus": "peer-focus-(ring-2 ring-brand ring-offset-2 ring-offset-base)",
473
470
  // wrappers
474
471
  "checkbox-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
475
472
  // icon
476
- "checkbox-icon-base": "m-auto h-full w-full opacity-0 transition-base n-checked:opacity-100 text-inverted",
477
- "checkbox-icon": "i-check"
478
- // refer to general.ts
473
+ "checkbox-indicator": "flex items-center justify-center h-full w-full data-[state=unchecked]:opacity-0 transition-base opacity-100 text-inverted",
474
+ "checkbox-icon-base": "w-1em h-1em",
475
+ "checkbox-checked-icon": "i-check",
476
+ "checkbox-unchecked-icon": "",
477
+ "checkbox-indeterminate-icon": "i-lucide-minus"
479
478
  };
480
479
  const dynamicCheckbox = [
481
480
  [/^checkbox-(.*)$/, ([, body], { theme }) => {
@@ -780,6 +779,29 @@ const dropdowMenu = [
780
779
  staticDropdownMenu
781
780
  ];
782
781
 
782
+ const staticLabel = {
783
+ // base
784
+ "label-base": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:n-disabled"
785
+ };
786
+ const dynamicLabel = [
787
+ // dynamic preset
788
+ ];
789
+ const label = [
790
+ ...dynamicLabel,
791
+ staticLabel
792
+ ];
793
+
794
+ const staticPopover = {
795
+ popover: "w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none 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"
796
+ };
797
+ const dynamicPopover = [
798
+ // dynamic preset
799
+ ];
800
+ const popover = [
801
+ ...dynamicPopover,
802
+ staticPopover
803
+ ];
804
+
783
805
  const shortcuts = [
784
806
  ...general,
785
807
  ...breadcrumb,
@@ -808,7 +830,9 @@ const shortcuts = [
808
830
  ...separator,
809
831
  ...card,
810
832
  ...table,
811
- ...dropdowMenu
833
+ ...dropdowMenu,
834
+ ...label,
835
+ ...popover
812
836
  ];
813
837
 
814
838
  export { shortcuts };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@una-ui/preset",
3
- "version": "0.15.1-beta.2",
3
+ "version": "0.16.0-beta.1",
4
4
  "description": "The default preset for @una-ui",
5
5
  "author": "Phojie Rengel <phojrengel@gmail.com>",
6
6
  "license": "MIT",
package/una.css CHANGED
@@ -1 +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{--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}
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-font-size: 16px;--una-radius: 0.5rem;--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)}.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(--una-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(--una-radius)}::-webkit-scrollbar-thumb{background:var(--muted-foreground);border-radius:calc(var(--una-radius) - 4px)}::-webkit-scrollbar-thumb:hover{background:var(--c-muted) !important}