@ariaui/tokens 0.1.0 → 0.2.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 (7) hide show
  1. package/dist/{chunk-LG37RUFG.js → chunk-TYULY7D5.js} +73 -6
  2. package/dist/index.cjs +73 -6
  3. package/dist/index.js +1 -1
  4. package/dist/scripts/write-css.cjs +73 -6
  5. package/dist/scripts/write-css.js +1 -1
  6. package/dist/tokens.css +61 -3
  7. package/package.json +1 -1
package/dist/{chunk-LG37RUFG.js → chunk-TYULY7D5.js} RENAMED
@@ -448,6 +448,9 @@ var light = {
448
448
  "border-error_subtle": "var(--color-red-300)",
449
449
  "border-success": "var(--color-green-600)",
450
450
  "border-warning": "var(--color-amber-600)",
451
+ /* --- Focus rings (focus-ring-*) — Untitled UI v8 (Figma: Colors/Effects/Focus rings) */
452
+ "focus-ring-color": "var(--color-brand-500)",
453
+ "focus-ring-error-color": "var(--color-red-500)",
451
454
  /* --- Gradients (gradient-*) --- */
452
455
  "gradient-neutral-600-500-90": "linear-gradient(90deg, oklch(var(--color-neutral-600)) 0%, oklch(var(--color-neutral-500)) 100%)",
453
456
  "gradient-neutral-700-600-45": "linear-gradient(45deg, oklch(var(--color-neutral-700)) 0%, oklch(var(--color-neutral-600)) 100%)",
@@ -599,11 +602,31 @@ var light = {
599
602
  "alpha-black-80": "oklch(var(--color-black) / 0.8)",
600
603
  "alpha-black-90": "oklch(var(--color-black) / 0.9)",
601
604
  "alpha-black-100": "oklch(var(--color-black) / 1)",
602
- /* --- Shared --- */
603
- "container-padding-mobile": "1rem",
604
- "container-padding-desktop": "2rem",
605
+ /* --- Shadows (shadow-*) — depth-1/2/3 = layer order in the composite box-shadow (outer → inner) */
606
+ "shadow-xs-depth-1": "oklch(var(--color-black) / 0.051)",
607
+ "shadow-sm-depth-1": "oklch(var(--color-black) / 0.102)",
608
+ "shadow-sm-depth-2": "oklch(var(--color-black) / 0.102)",
609
+ "shadow-md-depth-1": "oklch(var(--color-black) / 0.102)",
610
+ "shadow-md-depth-2": "oklch(var(--color-black) / 0.059)",
611
+ "shadow-lg-depth-1": "oklch(var(--color-black) / 0.078)",
612
+ "shadow-lg-depth-2": "oklch(var(--color-black) / 0.031)",
613
+ "shadow-lg-depth-3": "oklch(var(--color-black) / 0.039)",
614
+ "shadow-xl-depth-1": "oklch(var(--color-black) / 0.078)",
615
+ "shadow-xl-depth-2": "oklch(var(--color-black) / 0.031)",
616
+ "shadow-xl-depth-3": "oklch(var(--color-black) / 0.039)",
617
+ "shadow-2xl-depth-1": "oklch(var(--color-black) / 0.18)",
618
+ "shadow-2xl-depth-2": "oklch(var(--color-black) / 0.039)",
619
+ "shadow-3xl-depth-1": "oklch(var(--color-black) / 0.141)",
620
+ "shadow-3xl-depth-2": "oklch(var(--color-black) / 0.039)",
621
+ /* --- Sizing (size-*) --- */
622
+ "spacing-padding-mobile": "1rem",
623
+ "spacing-padding-tablet": "1.5rem",
624
+ "spacing-padding-desktop": "2rem",
625
+ /* --- Containers & Layout (container-*) --- */
605
626
  "container-max-width-desktop": "80rem",
606
- "paragraph-max-width": "45rem",
627
+ /* --- Paragraphs (paragraph-*) --- */
628
+ "container-paragraph-max-width": "45rem",
629
+ /* --- Radii (radius-*) --- */
607
630
  "radius-none": "0px",
608
631
  "radius-xxs": "2px",
609
632
  "radius-xs": "4px",
@@ -616,8 +639,14 @@ var light = {
616
639
  "radius-4xl": "24px",
617
640
  "radius-full": "9999px",
618
641
  "radius": "8px",
642
+ /* --- Rings (ring-*) --- */
619
643
  "ring-width": "2px",
620
- "ring-offset": "2px"
644
+ "ring-offset": "2px",
645
+ /* --- Backdrop blurs (backdrop-blur-*) — Untitled UI v8 (Figma: Backdrop blurs); px radii for blur() / backdrop-filter */
646
+ "backdrop-blur-sm": "8px",
647
+ "backdrop-blur-md": "16px",
648
+ "backdrop-blur-lg": "24px",
649
+ "backdrop-blur-xl": "40px"
621
650
  };
622
651
  var dark = {
623
652
  /* --- Backgrounds (bg-*) --- */
@@ -709,6 +738,9 @@ var dark = {
709
738
  "border-error_subtle": "var(--color-red-800)",
710
739
  "border-success": "var(--color-green-400)",
711
740
  "border-warning": "var(--color-amber-400)",
741
+ /* --- Focus rings (focus-ring-*) — same brand/error hues; bg-primary in composite is theme-aware */
742
+ "focus-ring-color": "var(--color-brand-500)",
743
+ "focus-ring-error-color": "var(--color-red-500)",
712
744
  /* --- Gradients (gradient-*) --- */
713
745
  "gradient-neutral-600-500-90": "linear-gradient(90deg, oklch(var(--color-neutral-600)) 0%, oklch(var(--color-neutral-500)) 100%)",
714
746
  "gradient-neutral-700-600-45": "linear-gradient(45deg, oklch(var(--color-neutral-700)) 0%, oklch(var(--color-neutral-600)) 100%)",
@@ -859,7 +891,23 @@ var dark = {
859
891
  "alpha-black-70": "oklch(var(--color-black) / 0.7)",
860
892
  "alpha-black-80": "oklch(var(--color-black) / 0.8)",
861
893
  "alpha-black-90": "oklch(var(--color-black) / 0.9)",
862
- "alpha-black-100": "oklch(var(--color-black) / 1)"
894
+ "alpha-black-100": "oklch(var(--color-black) / 1)",
895
+ /* --- Shadows (shadow-*) — dark mode (stronger than light for depth on dark surfaces) */
896
+ "shadow-xs-depth-1": "oklch(var(--color-black) / 0.08)",
897
+ "shadow-sm-depth-1": "oklch(var(--color-black) / 0.14)",
898
+ "shadow-sm-depth-2": "oklch(var(--color-black) / 0.14)",
899
+ "shadow-md-depth-1": "oklch(var(--color-black) / 0.14)",
900
+ "shadow-md-depth-2": "oklch(var(--color-black) / 0.09)",
901
+ "shadow-lg-depth-1": "oklch(var(--color-black) / 0.12)",
902
+ "shadow-lg-depth-2": "oklch(var(--color-black) / 0.05)",
903
+ "shadow-lg-depth-3": "oklch(var(--color-black) / 0.06)",
904
+ "shadow-xl-depth-1": "oklch(var(--color-black) / 0.12)",
905
+ "shadow-xl-depth-2": "oklch(var(--color-black) / 0.05)",
906
+ "shadow-xl-depth-3": "oklch(var(--color-black) / 0.06)",
907
+ "shadow-2xl-depth-1": "oklch(var(--color-black) / 0.27)",
908
+ "shadow-2xl-depth-2": "oklch(var(--color-black) / 0.06)",
909
+ "shadow-3xl-depth-1": "oklch(var(--color-black) / 0.21)",
910
+ "shadow-3xl-depth-2": "oklch(var(--color-black) / 0.06)"
863
911
  };
864
912
 
865
913
  // src/typography.ts
@@ -1034,6 +1082,25 @@ ${semanticVars(dark)}
1034
1082
  --container-max-width-desktop: var(--container-max-width-desktop);
1035
1083
  --paragraph-max-width: var(--paragraph-max-width);
1036
1084
 
1085
+ /* Backdrop / filter blur \u2014 Figma BACKGROUND_BLUR radii; aliases Tailwind --blur-* for blur-* and backdrop-blur-* */
1086
+ --blur-sm: var(--backdrop-blur-sm);
1087
+ --blur-md: var(--backdrop-blur-md);
1088
+ --blur-lg: var(--backdrop-blur-lg);
1089
+ --blur-xl: var(--backdrop-blur-xl);
1090
+
1091
+ /* Shadows \u2014 composite box-shadow values (layer colors: *-depth-1 / *-depth-2 / *-depth-3) */
1092
+ --shadow-xs: 0px 1px 2px 0px var(--shadow-xs-depth-1);
1093
+ --shadow-sm: 0px 1px 3px 0px var(--shadow-sm-depth-1), 0px 1px 2px -1px var(--shadow-sm-depth-2);
1094
+ --shadow-md: 0px 4px 6px -1px var(--shadow-md-depth-1), 0px 2px 4px -2px var(--shadow-md-depth-2);
1095
+ --shadow-lg: 0px 12px 16px -4px var(--shadow-lg-depth-1), 0px 4px 6px -2px var(--shadow-lg-depth-2), 0px 2px 2px -1px var(--shadow-lg-depth-3);
1096
+ --shadow-xl: 0px 20px 24px -4px var(--shadow-xl-depth-1), 0px 8px 8px -4px var(--shadow-xl-depth-2), 0px 3px 3px -1.5px var(--shadow-xl-depth-3);
1097
+ --shadow-2xl: 0px 24px 48px -12px var(--shadow-2xl-depth-1), 0px 4px 4px -2px var(--shadow-2xl-depth-2);
1098
+ --shadow-3xl: 0px 32px 64px -12px var(--shadow-3xl-depth-1), 0px 5px 5px -2.5px var(--shadow-3xl-depth-2);
1099
+
1100
+ /* Focus rings \u2014 double ring: offset gap + ring (Figma: spread 2 bg-primary, spread 4 ring color) */
1101
+ --focus-ring: 0 0 0 var(--ring-offset) oklch(var(--bg-primary)), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) oklch(var(--focus-ring-color));
1102
+ --focus-ring-error: 0 0 0 var(--ring-offset) oklch(var(--bg-primary)), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) oklch(var(--focus-ring-error-color));
1103
+
1037
1104
  /* Typography \u2014 Untitled UI PRO v7 type scale */
1038
1105
  ${typographyThemeVars()}}
1039
1106
  `;
package/dist/index.cjs CHANGED
@@ -479,6 +479,9 @@ var light = {
479
479
  "border-error_subtle": "var(--color-red-300)",
480
480
  "border-success": "var(--color-green-600)",
481
481
  "border-warning": "var(--color-amber-600)",
482
+ /* --- Focus rings (focus-ring-*) — Untitled UI v8 (Figma: Colors/Effects/Focus rings) */
483
+ "focus-ring-color": "var(--color-brand-500)",
484
+ "focus-ring-error-color": "var(--color-red-500)",
482
485
  /* --- Gradients (gradient-*) --- */
483
486
  "gradient-neutral-600-500-90": "linear-gradient(90deg, oklch(var(--color-neutral-600)) 0%, oklch(var(--color-neutral-500)) 100%)",
484
487
  "gradient-neutral-700-600-45": "linear-gradient(45deg, oklch(var(--color-neutral-700)) 0%, oklch(var(--color-neutral-600)) 100%)",
@@ -630,11 +633,31 @@ var light = {
630
633
  "alpha-black-80": "oklch(var(--color-black) / 0.8)",
631
634
  "alpha-black-90": "oklch(var(--color-black) / 0.9)",
632
635
  "alpha-black-100": "oklch(var(--color-black) / 1)",
633
- /* --- Shared --- */
634
- "container-padding-mobile": "1rem",
635
- "container-padding-desktop": "2rem",
636
+ /* --- Shadows (shadow-*) — depth-1/2/3 = layer order in the composite box-shadow (outer → inner) */
637
+ "shadow-xs-depth-1": "oklch(var(--color-black) / 0.051)",
638
+ "shadow-sm-depth-1": "oklch(var(--color-black) / 0.102)",
639
+ "shadow-sm-depth-2": "oklch(var(--color-black) / 0.102)",
640
+ "shadow-md-depth-1": "oklch(var(--color-black) / 0.102)",
641
+ "shadow-md-depth-2": "oklch(var(--color-black) / 0.059)",
642
+ "shadow-lg-depth-1": "oklch(var(--color-black) / 0.078)",
643
+ "shadow-lg-depth-2": "oklch(var(--color-black) / 0.031)",
644
+ "shadow-lg-depth-3": "oklch(var(--color-black) / 0.039)",
645
+ "shadow-xl-depth-1": "oklch(var(--color-black) / 0.078)",
646
+ "shadow-xl-depth-2": "oklch(var(--color-black) / 0.031)",
647
+ "shadow-xl-depth-3": "oklch(var(--color-black) / 0.039)",
648
+ "shadow-2xl-depth-1": "oklch(var(--color-black) / 0.18)",
649
+ "shadow-2xl-depth-2": "oklch(var(--color-black) / 0.039)",
650
+ "shadow-3xl-depth-1": "oklch(var(--color-black) / 0.141)",
651
+ "shadow-3xl-depth-2": "oklch(var(--color-black) / 0.039)",
652
+ /* --- Sizing (size-*) --- */
653
+ "spacing-padding-mobile": "1rem",
654
+ "spacing-padding-tablet": "1.5rem",
655
+ "spacing-padding-desktop": "2rem",
656
+ /* --- Containers & Layout (container-*) --- */
636
657
  "container-max-width-desktop": "80rem",
637
- "paragraph-max-width": "45rem",
658
+ /* --- Paragraphs (paragraph-*) --- */
659
+ "container-paragraph-max-width": "45rem",
660
+ /* --- Radii (radius-*) --- */
638
661
  "radius-none": "0px",
639
662
  "radius-xxs": "2px",
640
663
  "radius-xs": "4px",
@@ -647,8 +670,14 @@ var light = {
647
670
  "radius-4xl": "24px",
648
671
  "radius-full": "9999px",
649
672
  "radius": "8px",
673
+ /* --- Rings (ring-*) --- */
650
674
  "ring-width": "2px",
651
- "ring-offset": "2px"
675
+ "ring-offset": "2px",
676
+ /* --- Backdrop blurs (backdrop-blur-*) — Untitled UI v8 (Figma: Backdrop blurs); px radii for blur() / backdrop-filter */
677
+ "backdrop-blur-sm": "8px",
678
+ "backdrop-blur-md": "16px",
679
+ "backdrop-blur-lg": "24px",
680
+ "backdrop-blur-xl": "40px"
652
681
  };
653
682
  var dark = {
654
683
  /* --- Backgrounds (bg-*) --- */
@@ -740,6 +769,9 @@ var dark = {
740
769
  "border-error_subtle": "var(--color-red-800)",
741
770
  "border-success": "var(--color-green-400)",
742
771
  "border-warning": "var(--color-amber-400)",
772
+ /* --- Focus rings (focus-ring-*) — same brand/error hues; bg-primary in composite is theme-aware */
773
+ "focus-ring-color": "var(--color-brand-500)",
774
+ "focus-ring-error-color": "var(--color-red-500)",
743
775
  /* --- Gradients (gradient-*) --- */
744
776
  "gradient-neutral-600-500-90": "linear-gradient(90deg, oklch(var(--color-neutral-600)) 0%, oklch(var(--color-neutral-500)) 100%)",
745
777
  "gradient-neutral-700-600-45": "linear-gradient(45deg, oklch(var(--color-neutral-700)) 0%, oklch(var(--color-neutral-600)) 100%)",
@@ -890,7 +922,23 @@ var dark = {
890
922
  "alpha-black-70": "oklch(var(--color-black) / 0.7)",
891
923
  "alpha-black-80": "oklch(var(--color-black) / 0.8)",
892
924
  "alpha-black-90": "oklch(var(--color-black) / 0.9)",
893
- "alpha-black-100": "oklch(var(--color-black) / 1)"
925
+ "alpha-black-100": "oklch(var(--color-black) / 1)",
926
+ /* --- Shadows (shadow-*) — dark mode (stronger than light for depth on dark surfaces) */
927
+ "shadow-xs-depth-1": "oklch(var(--color-black) / 0.08)",
928
+ "shadow-sm-depth-1": "oklch(var(--color-black) / 0.14)",
929
+ "shadow-sm-depth-2": "oklch(var(--color-black) / 0.14)",
930
+ "shadow-md-depth-1": "oklch(var(--color-black) / 0.14)",
931
+ "shadow-md-depth-2": "oklch(var(--color-black) / 0.09)",
932
+ "shadow-lg-depth-1": "oklch(var(--color-black) / 0.12)",
933
+ "shadow-lg-depth-2": "oklch(var(--color-black) / 0.05)",
934
+ "shadow-lg-depth-3": "oklch(var(--color-black) / 0.06)",
935
+ "shadow-xl-depth-1": "oklch(var(--color-black) / 0.12)",
936
+ "shadow-xl-depth-2": "oklch(var(--color-black) / 0.05)",
937
+ "shadow-xl-depth-3": "oklch(var(--color-black) / 0.06)",
938
+ "shadow-2xl-depth-1": "oklch(var(--color-black) / 0.27)",
939
+ "shadow-2xl-depth-2": "oklch(var(--color-black) / 0.06)",
940
+ "shadow-3xl-depth-1": "oklch(var(--color-black) / 0.21)",
941
+ "shadow-3xl-depth-2": "oklch(var(--color-black) / 0.06)"
894
942
  };
895
943
 
896
944
  // src/typography.ts
@@ -1065,6 +1113,25 @@ ${semanticVars(dark)}
1065
1113
  --container-max-width-desktop: var(--container-max-width-desktop);
1066
1114
  --paragraph-max-width: var(--paragraph-max-width);
1067
1115
 
1116
+ /* Backdrop / filter blur \u2014 Figma BACKGROUND_BLUR radii; aliases Tailwind --blur-* for blur-* and backdrop-blur-* */
1117
+ --blur-sm: var(--backdrop-blur-sm);
1118
+ --blur-md: var(--backdrop-blur-md);
1119
+ --blur-lg: var(--backdrop-blur-lg);
1120
+ --blur-xl: var(--backdrop-blur-xl);
1121
+
1122
+ /* Shadows \u2014 composite box-shadow values (layer colors: *-depth-1 / *-depth-2 / *-depth-3) */
1123
+ --shadow-xs: 0px 1px 2px 0px var(--shadow-xs-depth-1);
1124
+ --shadow-sm: 0px 1px 3px 0px var(--shadow-sm-depth-1), 0px 1px 2px -1px var(--shadow-sm-depth-2);
1125
+ --shadow-md: 0px 4px 6px -1px var(--shadow-md-depth-1), 0px 2px 4px -2px var(--shadow-md-depth-2);
1126
+ --shadow-lg: 0px 12px 16px -4px var(--shadow-lg-depth-1), 0px 4px 6px -2px var(--shadow-lg-depth-2), 0px 2px 2px -1px var(--shadow-lg-depth-3);
1127
+ --shadow-xl: 0px 20px 24px -4px var(--shadow-xl-depth-1), 0px 8px 8px -4px var(--shadow-xl-depth-2), 0px 3px 3px -1.5px var(--shadow-xl-depth-3);
1128
+ --shadow-2xl: 0px 24px 48px -12px var(--shadow-2xl-depth-1), 0px 4px 4px -2px var(--shadow-2xl-depth-2);
1129
+ --shadow-3xl: 0px 32px 64px -12px var(--shadow-3xl-depth-1), 0px 5px 5px -2.5px var(--shadow-3xl-depth-2);
1130
+
1131
+ /* Focus rings \u2014 double ring: offset gap + ring (Figma: spread 2 bg-primary, spread 4 ring color) */
1132
+ --focus-ring: 0 0 0 var(--ring-offset) oklch(var(--bg-primary)), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) oklch(var(--focus-ring-color));
1133
+ --focus-ring-error: 0 0 0 var(--ring-offset) oklch(var(--bg-primary)), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) oklch(var(--focus-ring-error-color));
1134
+
1068
1135
  /* Typography \u2014 Untitled UI PRO v7 type scale */
1069
1136
  ${typographyThemeVars()}}
1070
1137
  `;
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  light,
6
6
  primitives,
7
7
  typeScale
8
- } from "./chunk-LG37RUFG.js";
8
+ } from "./chunk-TYULY7D5.js";
9
9
  export {
10
10
  base,
11
11
  dark,
package/dist/scripts/write-css.cjs CHANGED
@@ -454,6 +454,9 @@ var light = {
454
454
  "border-error_subtle": "var(--color-red-300)",
455
455
  "border-success": "var(--color-green-600)",
456
456
  "border-warning": "var(--color-amber-600)",
457
+ /* --- Focus rings (focus-ring-*) — Untitled UI v8 (Figma: Colors/Effects/Focus rings) */
458
+ "focus-ring-color": "var(--color-brand-500)",
459
+ "focus-ring-error-color": "var(--color-red-500)",
457
460
  /* --- Gradients (gradient-*) --- */
458
461
  "gradient-neutral-600-500-90": "linear-gradient(90deg, oklch(var(--color-neutral-600)) 0%, oklch(var(--color-neutral-500)) 100%)",
459
462
  "gradient-neutral-700-600-45": "linear-gradient(45deg, oklch(var(--color-neutral-700)) 0%, oklch(var(--color-neutral-600)) 100%)",
@@ -605,11 +608,31 @@ var light = {
605
608
  "alpha-black-80": "oklch(var(--color-black) / 0.8)",
606
609
  "alpha-black-90": "oklch(var(--color-black) / 0.9)",
607
610
  "alpha-black-100": "oklch(var(--color-black) / 1)",
608
- /* --- Shared --- */
609
- "container-padding-mobile": "1rem",
610
- "container-padding-desktop": "2rem",
611
+ /* --- Shadows (shadow-*) — depth-1/2/3 = layer order in the composite box-shadow (outer → inner) */
612
+ "shadow-xs-depth-1": "oklch(var(--color-black) / 0.051)",
613
+ "shadow-sm-depth-1": "oklch(var(--color-black) / 0.102)",
614
+ "shadow-sm-depth-2": "oklch(var(--color-black) / 0.102)",
615
+ "shadow-md-depth-1": "oklch(var(--color-black) / 0.102)",
616
+ "shadow-md-depth-2": "oklch(var(--color-black) / 0.059)",
617
+ "shadow-lg-depth-1": "oklch(var(--color-black) / 0.078)",
618
+ "shadow-lg-depth-2": "oklch(var(--color-black) / 0.031)",
619
+ "shadow-lg-depth-3": "oklch(var(--color-black) / 0.039)",
620
+ "shadow-xl-depth-1": "oklch(var(--color-black) / 0.078)",
621
+ "shadow-xl-depth-2": "oklch(var(--color-black) / 0.031)",
622
+ "shadow-xl-depth-3": "oklch(var(--color-black) / 0.039)",
623
+ "shadow-2xl-depth-1": "oklch(var(--color-black) / 0.18)",
624
+ "shadow-2xl-depth-2": "oklch(var(--color-black) / 0.039)",
625
+ "shadow-3xl-depth-1": "oklch(var(--color-black) / 0.141)",
626
+ "shadow-3xl-depth-2": "oklch(var(--color-black) / 0.039)",
627
+ /* --- Sizing (size-*) --- */
628
+ "spacing-padding-mobile": "1rem",
629
+ "spacing-padding-tablet": "1.5rem",
630
+ "spacing-padding-desktop": "2rem",
631
+ /* --- Containers & Layout (container-*) --- */
611
632
  "container-max-width-desktop": "80rem",
612
- "paragraph-max-width": "45rem",
633
+ /* --- Paragraphs (paragraph-*) --- */
634
+ "container-paragraph-max-width": "45rem",
635
+ /* --- Radii (radius-*) --- */
613
636
  "radius-none": "0px",
614
637
  "radius-xxs": "2px",
615
638
  "radius-xs": "4px",
@@ -622,8 +645,14 @@ var light = {
622
645
  "radius-4xl": "24px",
623
646
  "radius-full": "9999px",
624
647
  "radius": "8px",
648
+ /* --- Rings (ring-*) --- */
625
649
  "ring-width": "2px",
626
- "ring-offset": "2px"
650
+ "ring-offset": "2px",
651
+ /* --- Backdrop blurs (backdrop-blur-*) — Untitled UI v8 (Figma: Backdrop blurs); px radii for blur() / backdrop-filter */
652
+ "backdrop-blur-sm": "8px",
653
+ "backdrop-blur-md": "16px",
654
+ "backdrop-blur-lg": "24px",
655
+ "backdrop-blur-xl": "40px"
627
656
  };
628
657
  var dark = {
629
658
  /* --- Backgrounds (bg-*) --- */
@@ -715,6 +744,9 @@ var dark = {
715
744
  "border-error_subtle": "var(--color-red-800)",
716
745
  "border-success": "var(--color-green-400)",
717
746
  "border-warning": "var(--color-amber-400)",
747
+ /* --- Focus rings (focus-ring-*) — same brand/error hues; bg-primary in composite is theme-aware */
748
+ "focus-ring-color": "var(--color-brand-500)",
749
+ "focus-ring-error-color": "var(--color-red-500)",
718
750
  /* --- Gradients (gradient-*) --- */
719
751
  "gradient-neutral-600-500-90": "linear-gradient(90deg, oklch(var(--color-neutral-600)) 0%, oklch(var(--color-neutral-500)) 100%)",
720
752
  "gradient-neutral-700-600-45": "linear-gradient(45deg, oklch(var(--color-neutral-700)) 0%, oklch(var(--color-neutral-600)) 100%)",
@@ -865,7 +897,23 @@ var dark = {
865
897
  "alpha-black-70": "oklch(var(--color-black) / 0.7)",
866
898
  "alpha-black-80": "oklch(var(--color-black) / 0.8)",
867
899
  "alpha-black-90": "oklch(var(--color-black) / 0.9)",
868
- "alpha-black-100": "oklch(var(--color-black) / 1)"
900
+ "alpha-black-100": "oklch(var(--color-black) / 1)",
901
+ /* --- Shadows (shadow-*) — dark mode (stronger than light for depth on dark surfaces) */
902
+ "shadow-xs-depth-1": "oklch(var(--color-black) / 0.08)",
903
+ "shadow-sm-depth-1": "oklch(var(--color-black) / 0.14)",
904
+ "shadow-sm-depth-2": "oklch(var(--color-black) / 0.14)",
905
+ "shadow-md-depth-1": "oklch(var(--color-black) / 0.14)",
906
+ "shadow-md-depth-2": "oklch(var(--color-black) / 0.09)",
907
+ "shadow-lg-depth-1": "oklch(var(--color-black) / 0.12)",
908
+ "shadow-lg-depth-2": "oklch(var(--color-black) / 0.05)",
909
+ "shadow-lg-depth-3": "oklch(var(--color-black) / 0.06)",
910
+ "shadow-xl-depth-1": "oklch(var(--color-black) / 0.12)",
911
+ "shadow-xl-depth-2": "oklch(var(--color-black) / 0.05)",
912
+ "shadow-xl-depth-3": "oklch(var(--color-black) / 0.06)",
913
+ "shadow-2xl-depth-1": "oklch(var(--color-black) / 0.27)",
914
+ "shadow-2xl-depth-2": "oklch(var(--color-black) / 0.06)",
915
+ "shadow-3xl-depth-1": "oklch(var(--color-black) / 0.21)",
916
+ "shadow-3xl-depth-2": "oklch(var(--color-black) / 0.06)"
869
917
  };
870
918
 
871
919
  // src/typography.ts
@@ -1040,6 +1088,25 @@ ${semanticVars(dark)}
1040
1088
  --container-max-width-desktop: var(--container-max-width-desktop);
1041
1089
  --paragraph-max-width: var(--paragraph-max-width);
1042
1090
 
1091
+ /* Backdrop / filter blur \u2014 Figma BACKGROUND_BLUR radii; aliases Tailwind --blur-* for blur-* and backdrop-blur-* */
1092
+ --blur-sm: var(--backdrop-blur-sm);
1093
+ --blur-md: var(--backdrop-blur-md);
1094
+ --blur-lg: var(--backdrop-blur-lg);
1095
+ --blur-xl: var(--backdrop-blur-xl);
1096
+
1097
+ /* Shadows \u2014 composite box-shadow values (layer colors: *-depth-1 / *-depth-2 / *-depth-3) */
1098
+ --shadow-xs: 0px 1px 2px 0px var(--shadow-xs-depth-1);
1099
+ --shadow-sm: 0px 1px 3px 0px var(--shadow-sm-depth-1), 0px 1px 2px -1px var(--shadow-sm-depth-2);
1100
+ --shadow-md: 0px 4px 6px -1px var(--shadow-md-depth-1), 0px 2px 4px -2px var(--shadow-md-depth-2);
1101
+ --shadow-lg: 0px 12px 16px -4px var(--shadow-lg-depth-1), 0px 4px 6px -2px var(--shadow-lg-depth-2), 0px 2px 2px -1px var(--shadow-lg-depth-3);
1102
+ --shadow-xl: 0px 20px 24px -4px var(--shadow-xl-depth-1), 0px 8px 8px -4px var(--shadow-xl-depth-2), 0px 3px 3px -1.5px var(--shadow-xl-depth-3);
1103
+ --shadow-2xl: 0px 24px 48px -12px var(--shadow-2xl-depth-1), 0px 4px 4px -2px var(--shadow-2xl-depth-2);
1104
+ --shadow-3xl: 0px 32px 64px -12px var(--shadow-3xl-depth-1), 0px 5px 5px -2.5px var(--shadow-3xl-depth-2);
1105
+
1106
+ /* Focus rings \u2014 double ring: offset gap + ring (Figma: spread 2 bg-primary, spread 4 ring color) */
1107
+ --focus-ring: 0 0 0 var(--ring-offset) oklch(var(--bg-primary)), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) oklch(var(--focus-ring-color));
1108
+ --focus-ring-error: 0 0 0 var(--ring-offset) oklch(var(--bg-primary)), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) oklch(var(--focus-ring-error-color));
1109
+
1043
1110
  /* Typography \u2014 Untitled UI PRO v7 type scale */
1044
1111
  ${typographyThemeVars()}}
1045
1112
  `;
package/dist/scripts/write-css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  generateCSS
3
- } from "../chunk-LG37RUFG.js";
3
+ } from "../chunk-TYULY7D5.js";
4
4
 
5
5
  // scripts/write-css.ts
6
6
  import { writeFileSync, mkdirSync } from "fs";
package/dist/tokens.css CHANGED
@@ -388,6 +388,8 @@
388
388
  --border-error_subtle: var(--color-red-300);
389
389
  --border-success: var(--color-green-600);
390
390
  --border-warning: var(--color-amber-600);
391
+ --focus-ring-color: var(--color-brand-500);
392
+ --focus-ring-error-color: var(--color-red-500);
391
393
  --gradient-neutral-600-500-90: linear-gradient(90deg, oklch(var(--color-neutral-600)) 0%, oklch(var(--color-neutral-500)) 100%);
392
394
  --gradient-neutral-700-600-45: linear-gradient(45deg, oklch(var(--color-neutral-700)) 0%, oklch(var(--color-neutral-600)) 100%);
393
395
  --gradient-neutral-800-600-45: linear-gradient(45deg, oklch(var(--color-neutral-800)) 0%, oklch(var(--color-neutral-600)) 100%);
@@ -537,10 +539,26 @@
537
539
  --alpha-black-80: oklch(var(--color-black) / 0.8);
538
540
  --alpha-black-90: oklch(var(--color-black) / 0.9);
539
541
  --alpha-black-100: oklch(var(--color-black) / 1);
540
- --container-padding-mobile: 1rem;
541
- --container-padding-desktop: 2rem;
542
+ --shadow-xs-depth-1: oklch(var(--color-black) / 0.051);
543
+ --shadow-sm-depth-1: oklch(var(--color-black) / 0.102);
544
+ --shadow-sm-depth-2: oklch(var(--color-black) / 0.102);
545
+ --shadow-md-depth-1: oklch(var(--color-black) / 0.102);
546
+ --shadow-md-depth-2: oklch(var(--color-black) / 0.059);
547
+ --shadow-lg-depth-1: oklch(var(--color-black) / 0.078);
548
+ --shadow-lg-depth-2: oklch(var(--color-black) / 0.031);
549
+ --shadow-lg-depth-3: oklch(var(--color-black) / 0.039);
550
+ --shadow-xl-depth-1: oklch(var(--color-black) / 0.078);
551
+ --shadow-xl-depth-2: oklch(var(--color-black) / 0.031);
552
+ --shadow-xl-depth-3: oklch(var(--color-black) / 0.039);
553
+ --shadow-2xl-depth-1: oklch(var(--color-black) / 0.18);
554
+ --shadow-2xl-depth-2: oklch(var(--color-black) / 0.039);
555
+ --shadow-3xl-depth-1: oklch(var(--color-black) / 0.141);
556
+ --shadow-3xl-depth-2: oklch(var(--color-black) / 0.039);
557
+ --spacing-padding-mobile: 1rem;
558
+ --spacing-padding-tablet: 1.5rem;
559
+ --spacing-padding-desktop: 2rem;
542
560
  --container-max-width-desktop: 80rem;
543
- --paragraph-max-width: 45rem;
561
+ --container-paragraph-max-width: 45rem;
544
562
  --radius-none: 0px;
545
563
  --radius-xxs: 2px;
546
564
  --radius-xs: 4px;
@@ -555,6 +573,10 @@
555
573
  --radius: 8px;
556
574
  --ring-width: 2px;
557
575
  --ring-offset: 2px;
576
+ --backdrop-blur-sm: 8px;
577
+ --backdrop-blur-md: 16px;
578
+ --backdrop-blur-lg: 24px;
579
+ --backdrop-blur-xl: 40px;
558
580
  }
559
581
 
560
582
  .dark {
@@ -644,6 +666,8 @@
644
666
  --border-error_subtle: var(--color-red-800);
645
667
  --border-success: var(--color-green-400);
646
668
  --border-warning: var(--color-amber-400);
669
+ --focus-ring-color: var(--color-brand-500);
670
+ --focus-ring-error-color: var(--color-red-500);
647
671
  --gradient-neutral-600-500-90: linear-gradient(90deg, oklch(var(--color-neutral-600)) 0%, oklch(var(--color-neutral-500)) 100%);
648
672
  --gradient-neutral-700-600-45: linear-gradient(45deg, oklch(var(--color-neutral-700)) 0%, oklch(var(--color-neutral-600)) 100%);
649
673
  --gradient-neutral-800-600-45: linear-gradient(45deg, oklch(var(--color-neutral-800)) 0%, oklch(var(--color-neutral-600)) 100%);
@@ -793,6 +817,21 @@
793
817
  --alpha-black-80: oklch(var(--color-black) / 0.8);
794
818
  --alpha-black-90: oklch(var(--color-black) / 0.9);
795
819
  --alpha-black-100: oklch(var(--color-black) / 1);
820
+ --shadow-xs-depth-1: oklch(var(--color-black) / 0.08);
821
+ --shadow-sm-depth-1: oklch(var(--color-black) / 0.14);
822
+ --shadow-sm-depth-2: oklch(var(--color-black) / 0.14);
823
+ --shadow-md-depth-1: oklch(var(--color-black) / 0.14);
824
+ --shadow-md-depth-2: oklch(var(--color-black) / 0.09);
825
+ --shadow-lg-depth-1: oklch(var(--color-black) / 0.12);
826
+ --shadow-lg-depth-2: oklch(var(--color-black) / 0.05);
827
+ --shadow-lg-depth-3: oklch(var(--color-black) / 0.06);
828
+ --shadow-xl-depth-1: oklch(var(--color-black) / 0.12);
829
+ --shadow-xl-depth-2: oklch(var(--color-black) / 0.05);
830
+ --shadow-xl-depth-3: oklch(var(--color-black) / 0.06);
831
+ --shadow-2xl-depth-1: oklch(var(--color-black) / 0.27);
832
+ --shadow-2xl-depth-2: oklch(var(--color-black) / 0.06);
833
+ --shadow-3xl-depth-1: oklch(var(--color-black) / 0.21);
834
+ --shadow-3xl-depth-2: oklch(var(--color-black) / 0.06);
796
835
  }
797
836
 
798
837
  @theme {
@@ -906,6 +945,25 @@
906
945
  --container-max-width-desktop: var(--container-max-width-desktop);
907
946
  --paragraph-max-width: var(--paragraph-max-width);
908
947
 
948
+ /* Backdrop / filter blur — Figma BACKGROUND_BLUR radii; aliases Tailwind --blur-* for blur-* and backdrop-blur-* */
949
+ --blur-sm: var(--backdrop-blur-sm);
950
+ --blur-md: var(--backdrop-blur-md);
951
+ --blur-lg: var(--backdrop-blur-lg);
952
+ --blur-xl: var(--backdrop-blur-xl);
953
+
954
+ /* Shadows — composite box-shadow values (layer colors: *-depth-1 / *-depth-2 / *-depth-3) */
955
+ --shadow-xs: 0px 1px 2px 0px var(--shadow-xs-depth-1);
956
+ --shadow-sm: 0px 1px 3px 0px var(--shadow-sm-depth-1), 0px 1px 2px -1px var(--shadow-sm-depth-2);
957
+ --shadow-md: 0px 4px 6px -1px var(--shadow-md-depth-1), 0px 2px 4px -2px var(--shadow-md-depth-2);
958
+ --shadow-lg: 0px 12px 16px -4px var(--shadow-lg-depth-1), 0px 4px 6px -2px var(--shadow-lg-depth-2), 0px 2px 2px -1px var(--shadow-lg-depth-3);
959
+ --shadow-xl: 0px 20px 24px -4px var(--shadow-xl-depth-1), 0px 8px 8px -4px var(--shadow-xl-depth-2), 0px 3px 3px -1.5px var(--shadow-xl-depth-3);
960
+ --shadow-2xl: 0px 24px 48px -12px var(--shadow-2xl-depth-1), 0px 4px 4px -2px var(--shadow-2xl-depth-2);
961
+ --shadow-3xl: 0px 32px 64px -12px var(--shadow-3xl-depth-1), 0px 5px 5px -2.5px var(--shadow-3xl-depth-2);
962
+
963
+ /* Focus rings — double ring: offset gap + ring (Figma: spread 2 bg-primary, spread 4 ring color) */
964
+ --focus-ring: 0 0 0 var(--ring-offset) oklch(var(--bg-primary)), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) oklch(var(--focus-ring-color));
965
+ --focus-ring-error: 0 0 0 var(--ring-offset) oklch(var(--bg-primary)), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) oklch(var(--focus-ring-error-color));
966
+
909
967
  /* Typography — Untitled UI PRO v7 type scale */
910
968
  --font-size-display-2xl: 4.5rem;
911
969
  --font-size-display-2xl--line-height: 5.625rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ariaui/tokens",
3
- "version": "0.1.0",
3
+ "version": "0.2.1",
4
4
  "type": "module",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",