@una-ui/preset 0.51.6 → 0.52.0

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 (10) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.mjs +1 -1
  3. package/dist/prefixes.cjs +12 -0
  4. package/dist/prefixes.mjs +12 -0
  5. package/dist/shared/{preset.isbRi640.cjs → preset.CXnwVyzt.cjs} +50 -17
  6. package/dist/shared/{preset.BqTxkr3V.mjs → preset.DTW2IypE.mjs} +50 -17
  7. package/dist/shortcuts.cjs +1 -1
  8. package/dist/shortcuts.mjs +1 -1
  9. package/package.json +1 -1
  10. package/una.css +2 -2
package/dist/index.cjs CHANGED
@@ -5,7 +5,7 @@ const colors = require('@unocss/preset-mini/colors');
5
5
  const rules = require('@unocss/preset-mini/rules');
6
6
  const utils = require('@unocss/preset-mini/utils');
7
7
  const unocss = require('unocss');
8
- const index = require('./shared/preset.isbRi640.cjs');
8
+ const index = require('./shared/preset.CXnwVyzt.cjs');
9
9
 
10
10
  function presetUna(options = {
11
11
  // TODO: add options
package/dist/index.mjs CHANGED
@@ -3,7 +3,7 @@ import { colors } from '@unocss/preset-mini/colors';
3
3
  import { fonts } from '@unocss/preset-mini/rules';
4
4
  import { handler, parseColor } from '@unocss/preset-mini/utils';
5
5
  import { mergeDeep } from 'unocss';
6
- import { s as shortcuts } from './shared/preset.BqTxkr3V.mjs';
6
+ import { s as shortcuts } from './shared/preset.DTW2IypE.mjs';
7
7
 
8
8
  function presetUna(options = {
9
9
  // TODO: add options
package/dist/prefixes.cjs CHANGED
@@ -31,6 +31,18 @@ const prefixes = [
31
31
  "collapsible",
32
32
  "collapsible-content",
33
33
  "collapsible-trigger",
34
+ "combobox",
35
+ "combobox-anchor",
36
+ "combobox-empty",
37
+ "combobox-group",
38
+ "combobox-input",
39
+ "combobox-item",
40
+ "combobox-item-indicator",
41
+ "combobox-label",
42
+ "combobox-list",
43
+ "combobox-separator",
44
+ "combobox-trigger",
45
+ "combobox-viewport",
34
46
  "dialog",
35
47
  "dialog-close",
36
48
  "dialog-content",
package/dist/prefixes.mjs CHANGED
@@ -29,6 +29,18 @@ const prefixes = [
29
29
  "collapsible",
30
30
  "collapsible-content",
31
31
  "collapsible-trigger",
32
+ "combobox",
33
+ "combobox-anchor",
34
+ "combobox-empty",
35
+ "combobox-group",
36
+ "combobox-input",
37
+ "combobox-item",
38
+ "combobox-item-indicator",
39
+ "combobox-label",
40
+ "combobox-list",
41
+ "combobox-separator",
42
+ "combobox-trigger",
43
+ "combobox-viewport",
32
44
  "dialog",
33
45
  "dialog-close",
34
46
  "dialog-content",
package/dist/shared/{preset.isbRi640.cjs → preset.CXnwVyzt.cjs} RENAMED
@@ -287,6 +287,38 @@ const collapsible = [
287
287
  staticCollapsible
288
288
  ];
289
289
 
290
+ const staticCombobox = {
291
+ // base
292
+ "combobox": "flex",
293
+ "combobox-trigger-info-icon": "i-info",
294
+ "combobox-trigger-error-icon": "i-error",
295
+ "combobox-trigger-success-icon": "i-success",
296
+ "combobox-trigger-warning-icon": "i-warning",
297
+ "combobox-trigger-trailing-icon": "i-lucide-chevrons-up-down",
298
+ "combobox-input-leading-icon": "i-lucide-search",
299
+ "combobox-trigger": "px-0.8571428571428571em w-full justify-between font-normal [&>span]:truncate",
300
+ "combobox-trigger-trailing": "size-1.4285714285714286em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled size-1.1428571428571428em) rtl:mr-auto ltr:ml-auto",
301
+ "combobox-trigger-leading": "size-1.1428571428571428em",
302
+ "combobox-item": "data-[highlighted]:bg-accent data-[highlighted]:text-accent relative flex cursor-default items-center gap-2 rounded-sm px-0.5714285714285714em py-0.42857142857142855em text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
303
+ "combobox-item-indicator": "ml-auto",
304
+ "combobox-item-indicator-icon": "",
305
+ "combobox-item-indicator-icon-name": "i-check",
306
+ "combobox-anchor": "min-w-200px",
307
+ "combobox-empty": "py-1.7142857142857142em text-center text-0.8571428571428571em",
308
+ "combobox-group": "overflow-hidden p-0.2857142857142857em text-foreground",
309
+ "combobox-label": "px-0.6666666666666666em py-0.5em text-0.8571428571428571em text-muted font-medium",
310
+ "combobox-list": "z-50 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover overflow-hidden 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",
311
+ "combobox-separator": "bg-border -mx-1 h-px",
312
+ "combobox-viewport": "max-h-300px scroll-py-1 overflow-x-hidden overflow-y-auto"
313
+ };
314
+ const dynamicCombobox = [
315
+ // dynamic preset
316
+ ];
317
+ const combobox = [
318
+ ...dynamicCombobox,
319
+ staticCombobox
320
+ ];
321
+
290
322
  const staticDialog = {
291
323
  // base
292
324
  "dialog": "",
@@ -505,24 +537,24 @@ const staticInput = {
505
537
  "input-error-icon": "i-error",
506
538
  "input-success-icon": "i-success",
507
539
  "input-warning-icon": "i-warning",
508
- "input-leading-padding": "pl-2.9em",
509
- "input-trailing-padding": "pr-2.9em",
540
+ "input-leading-padding": "pl-2.5714285714285716em",
541
+ "input-trailing-padding": "pr-2.5714285714285716em",
510
542
  // base
511
- "input": "text-base text-0.875em leading-1.4285714285714286em px-0.8571428571428571em py-0.2857142857142857em w-full focus-visible:outline-none input-disabled placeholder:text-muted block rounded-md shadow-sm bg-transparent transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium",
512
- "input-input": "h-2.5714285714285716em",
543
+ "input": "text-base text-0.875em leading-1.4285714285714286em px-0.8571428571428571em w-full focus-visible:outline-none input-disabled placeholder:text-muted block rounded-md shadow-sm bg-transparent transition-colors file:border-0 file:bg-transparent file:text-0.875em file:font-medium",
544
+ "input-input": "h-2.5714285714285716em py-0.2857142857142857em",
513
545
  // role='input'
514
- "input-textarea": "",
546
+ "input-textarea": "min-h-4.285714285714286em py-0.5714285714em",
515
547
  // role='textarea'
516
548
  "input-disabled": "disabled:(n-disabled)",
517
549
  "input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
518
- "input-status-icon-base": "size-1.25em",
519
- "input-leading": "size-1.25em",
520
- "input-trailing": "size-1.25em",
521
- "input-loading": "animate-spin size-1.25em",
550
+ "input-status-icon-base": "square-1em",
551
+ "input-leading": "square-1em",
552
+ "input-trailing": "square-1em",
553
+ "input-loading": "animate-spin square-1em",
522
554
  // wrappers
523
555
  "input-wrapper": "relative flex items-center",
524
- "input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-muted",
525
- "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-0.75em text-muted",
556
+ "input-leading-wrapper": "pointer-events-none absolute inset-y-0 start-0 flex items-center px-0.8571428571428571em text-muted",
557
+ "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 end-0 flex items-center px-0.8571428571428571em text-muted",
526
558
  // variants
527
559
  "input-outline-gray": "border border-input focus-visible:ring-input focus-visible:ring-1",
528
560
  "input-outline-black": "border border-input focus:ring-$c-foreground focus-visible:ring-1"
@@ -752,15 +784,15 @@ const staticSelect = {
752
784
  // components
753
785
  "select-trigger": "px-0.8571428571428571em w-full [&>span]:truncate",
754
786
  "select-trigger-trailing-icon": "i-lucide-chevron-down",
755
- "select-trigger-trailing": "size-1.4285714285714286em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled size-1.1428571428571428em)",
787
+ "select-trigger-trailing": "size-1.1428571428571428em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled size-1.1428571428571428em) rtl:mr-auto ltr:ml-auto",
756
788
  "select-trigger-leading": "size-1.1428571428571428em",
757
789
  "select-value": "text-1em data-[status=error]:text-error-active data-[status=success]:text-success-active data-[status=warning]:text-warning-active data-[status=info]:text-info-active data-[placeholder]:n-disabled",
758
790
  "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",
759
791
  "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",
760
- "select-group": "p-1 w-full",
792
+ "select-group": "w-full",
761
793
  "select-separator": "-mx-1 my-1 h-px bg-muted",
762
- "select-item": "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",
763
- "select-item-indicator": "absolute left-2 size-1.1428571428571428em flex items-center justify-center",
794
+ "select-item": "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-1em outline-none focus:bg-accent focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
795
+ "select-item-indicator": "absolute right-2 size-1.1428571428571428em flex items-center justify-center",
764
796
  "select-item-indicator-icon": "i-check",
765
797
  "select-viewport": "p-1",
766
798
  "select-viewport-popper": "h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]",
@@ -768,7 +800,7 @@ const staticSelect = {
768
800
  "select-scroll-down-button": "select-scroll",
769
801
  "select-scroll-up-button-icon": "i-lucide-chevron-up",
770
802
  "select-scroll-down-button-icon": "i-lucide-chevron-down",
771
- "select-label": "py-1.5 pl-8 pr-2 text-1em font-semibold",
803
+ "select-label": "py-1.5 pl-2 text-1em font-semibold",
772
804
  // ⚠️ for overriding purposes only
773
805
  "select-item-selectItem": ""
774
806
  };
@@ -1151,7 +1183,8 @@ const shortcuts = [
1151
1183
  ...scrollArea,
1152
1184
  ...navigationMenu,
1153
1185
  ...sidebar,
1154
- ...aspectRatio
1186
+ ...aspectRatio,
1187
+ ...combobox
1155
1188
  ];
1156
1189
 
1157
1190
  exports.shortcuts = shortcuts;
package/dist/shared/{preset.BqTxkr3V.mjs → preset.DTW2IypE.mjs} RENAMED
@@ -285,6 +285,38 @@ const collapsible = [
285
285
  staticCollapsible
286
286
  ];
287
287
 
288
+ const staticCombobox = {
289
+ // base
290
+ "combobox": "flex",
291
+ "combobox-trigger-info-icon": "i-info",
292
+ "combobox-trigger-error-icon": "i-error",
293
+ "combobox-trigger-success-icon": "i-success",
294
+ "combobox-trigger-warning-icon": "i-warning",
295
+ "combobox-trigger-trailing-icon": "i-lucide-chevrons-up-down",
296
+ "combobox-input-leading-icon": "i-lucide-search",
297
+ "combobox-trigger": "px-0.8571428571428571em w-full justify-between font-normal [&>span]:truncate",
298
+ "combobox-trigger-trailing": "size-1.4285714285714286em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled size-1.1428571428571428em) rtl:mr-auto ltr:ml-auto",
299
+ "combobox-trigger-leading": "size-1.1428571428571428em",
300
+ "combobox-item": "data-[highlighted]:bg-accent data-[highlighted]:text-accent relative flex cursor-default items-center gap-2 rounded-sm px-0.5714285714285714em py-0.42857142857142855em text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
301
+ "combobox-item-indicator": "ml-auto",
302
+ "combobox-item-indicator-icon": "",
303
+ "combobox-item-indicator-icon-name": "i-check",
304
+ "combobox-anchor": "min-w-200px",
305
+ "combobox-empty": "py-1.7142857142857142em text-center text-0.8571428571428571em",
306
+ "combobox-group": "overflow-hidden p-0.2857142857142857em text-foreground",
307
+ "combobox-label": "px-0.6666666666666666em py-0.5em text-0.8571428571428571em text-muted font-medium",
308
+ "combobox-list": "z-50 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover overflow-hidden 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",
309
+ "combobox-separator": "bg-border -mx-1 h-px",
310
+ "combobox-viewport": "max-h-300px scroll-py-1 overflow-x-hidden overflow-y-auto"
311
+ };
312
+ const dynamicCombobox = [
313
+ // dynamic preset
314
+ ];
315
+ const combobox = [
316
+ ...dynamicCombobox,
317
+ staticCombobox
318
+ ];
319
+
288
320
  const staticDialog = {
289
321
  // base
290
322
  "dialog": "",
@@ -503,24 +535,24 @@ const staticInput = {
503
535
  "input-error-icon": "i-error",
504
536
  "input-success-icon": "i-success",
505
537
  "input-warning-icon": "i-warning",
506
- "input-leading-padding": "pl-2.9em",
507
- "input-trailing-padding": "pr-2.9em",
538
+ "input-leading-padding": "pl-2.5714285714285716em",
539
+ "input-trailing-padding": "pr-2.5714285714285716em",
508
540
  // base
509
- "input": "text-base text-0.875em leading-1.4285714285714286em px-0.8571428571428571em py-0.2857142857142857em w-full focus-visible:outline-none input-disabled placeholder:text-muted block rounded-md shadow-sm bg-transparent transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium",
510
- "input-input": "h-2.5714285714285716em",
541
+ "input": "text-base text-0.875em leading-1.4285714285714286em px-0.8571428571428571em w-full focus-visible:outline-none input-disabled placeholder:text-muted block rounded-md shadow-sm bg-transparent transition-colors file:border-0 file:bg-transparent file:text-0.875em file:font-medium",
542
+ "input-input": "h-2.5714285714285716em py-0.2857142857142857em",
511
543
  // role='input'
512
- "input-textarea": "",
544
+ "input-textarea": "min-h-4.285714285714286em py-0.5714285714em",
513
545
  // role='textarea'
514
546
  "input-disabled": "disabled:(n-disabled)",
515
547
  "input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
516
- "input-status-icon-base": "size-1.25em",
517
- "input-leading": "size-1.25em",
518
- "input-trailing": "size-1.25em",
519
- "input-loading": "animate-spin size-1.25em",
548
+ "input-status-icon-base": "square-1em",
549
+ "input-leading": "square-1em",
550
+ "input-trailing": "square-1em",
551
+ "input-loading": "animate-spin square-1em",
520
552
  // wrappers
521
553
  "input-wrapper": "relative flex items-center",
522
- "input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-muted",
523
- "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-0.75em text-muted",
554
+ "input-leading-wrapper": "pointer-events-none absolute inset-y-0 start-0 flex items-center px-0.8571428571428571em text-muted",
555
+ "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 end-0 flex items-center px-0.8571428571428571em text-muted",
524
556
  // variants
525
557
  "input-outline-gray": "border border-input focus-visible:ring-input focus-visible:ring-1",
526
558
  "input-outline-black": "border border-input focus:ring-$c-foreground focus-visible:ring-1"
@@ -750,15 +782,15 @@ const staticSelect = {
750
782
  // components
751
783
  "select-trigger": "px-0.8571428571428571em w-full [&>span]:truncate",
752
784
  "select-trigger-trailing-icon": "i-lucide-chevron-down",
753
- "select-trigger-trailing": "size-1.4285714285714286em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled size-1.1428571428571428em)",
785
+ "select-trigger-trailing": "size-1.1428571428571428em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled size-1.1428571428571428em) rtl:mr-auto ltr:ml-auto",
754
786
  "select-trigger-leading": "size-1.1428571428571428em",
755
787
  "select-value": "text-1em data-[status=error]:text-error-active data-[status=success]:text-success-active data-[status=warning]:text-warning-active data-[status=info]:text-info-active data-[placeholder]:n-disabled",
756
788
  "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",
757
789
  "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",
758
- "select-group": "p-1 w-full",
790
+ "select-group": "w-full",
759
791
  "select-separator": "-mx-1 my-1 h-px bg-muted",
760
- "select-item": "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",
761
- "select-item-indicator": "absolute left-2 size-1.1428571428571428em flex items-center justify-center",
792
+ "select-item": "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-1em outline-none focus:bg-accent focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
793
+ "select-item-indicator": "absolute right-2 size-1.1428571428571428em flex items-center justify-center",
762
794
  "select-item-indicator-icon": "i-check",
763
795
  "select-viewport": "p-1",
764
796
  "select-viewport-popper": "h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]",
@@ -766,7 +798,7 @@ const staticSelect = {
766
798
  "select-scroll-down-button": "select-scroll",
767
799
  "select-scroll-up-button-icon": "i-lucide-chevron-up",
768
800
  "select-scroll-down-button-icon": "i-lucide-chevron-down",
769
- "select-label": "py-1.5 pl-8 pr-2 text-1em font-semibold",
801
+ "select-label": "py-1.5 pl-2 text-1em font-semibold",
770
802
  // ⚠️ for overriding purposes only
771
803
  "select-item-selectItem": ""
772
804
  };
@@ -1149,7 +1181,8 @@ const shortcuts = [
1149
1181
  ...scrollArea,
1150
1182
  ...navigationMenu,
1151
1183
  ...sidebar,
1152
- ...aspectRatio
1184
+ ...aspectRatio,
1185
+ ...combobox
1153
1186
  ];
1154
1187
 
1155
1188
  export { shortcuts as s };
package/dist/shortcuts.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./shared/preset.isbRi640.cjs');
3
+ const index = require('./shared/preset.CXnwVyzt.cjs');
4
4
  require('@unocss/preset-mini/utils');
5
5
  require('@unocss/preset-mini');
6
6
 
package/dist/shortcuts.mjs CHANGED
@@ -1,3 +1,3 @@
1
- export { s as shortcuts } from './shared/preset.BqTxkr3V.mjs';
1
+ export { s as shortcuts } from './shared/preset.DTW2IypE.mjs';
2
2
  import '@unocss/preset-mini/utils';
3
3
  import '@unocss/preset-mini';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@una-ui/preset",
3
- "version": "0.51.6",
3
+ "version": "0.52.0",
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
@@ -73,7 +73,7 @@
73
73
  --c-muted-foreground: rgb(var(--una-gray-500));
74
74
  --c-accent: rgb(var(--una-gray-100));
75
75
  --c-accent-foreground: rgb(var(--una-gray-800));
76
- --c-popover: rgb(255, 255, 255);
76
+ --c-popover: rgb(var(--una-gray-800));
77
77
  --c-popover-foreground: rgb(var(--una-gray-950));
78
78
  --c-border: rgb(var(--una-gray-200));
79
79
  --c-border-foreground: rgba(var(--una-gray-700), 0.58);
@@ -107,7 +107,7 @@
107
107
  --c-accent: rgb(var(--una-gray-800));
108
108
  --c-accent-foreground: rgb(var(--una-gray-100));
109
109
  --c-popover: rgb(var(--una-gray-950));
110
- --c-popover-foreground: rgb(255, 255, 255);
110
+ --c-popover-foreground: rgb(var(--una-gray-100));
111
111
  --c-border: rgba(var(--una-gray-700), 0.58);
112
112
  --c-border-foreground: rgb(var(--una-gray-200));
113
113
  --c-ring: rgba(var(--una-gray-700), 0.58);