@kushagradhawan/kookie-ui 0.1.35 → 0.1.37

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/styles/tokens/shadow.css +24 -24
  3. package/styles.css +22 -22
  4. package/tokens/base.css +22 -22
  5. package/tokens.css +22 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-ui",
3
- "version": "0.1.35",
3
+ "version": "0.1.37",
4
4
  "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
5
5
  "keywords": [
6
6
  "react",
package/src/styles/tokens/shadow.css CHANGED
@@ -6,30 +6,30 @@
6
6
  inset 0 1px 1px 0 var(--black-a2);
7
7
 
8
8
  --shadow-2:
9
- 0 0 0 1px var(--gray-a3),
9
+ 0 0 0 0.5px var(--gray-a2),
10
10
  0 0 0 0.5px var(--black-a1),
11
11
  0 1px 1px 0 var(--gray-a2),
12
12
  0 2px 1px -1px var(--black-a1),
13
13
  0 1px 4px 0 var(--black-a1);
14
14
 
15
15
  --shadow-3:
16
- 0 0 0 1px var(--gray-a3),
16
+ 0 0 0 0.5px var(--gray-a2),
17
17
  0 2px 3px -2px var(--gray-a3),
18
18
  0 3px 12px -4px var(--black-a2),
19
19
  0 4px 16px -8px var(--black-a2);
20
20
 
21
21
  --shadow-4:
22
- 0 0 0 1px var(--gray-a3),
22
+ 0 0 0 0.5px var(--gray-a2),
23
23
  0 8px 40px var(--black-a1),
24
24
  0 12px 32px -16px var(--gray-a3);
25
25
 
26
26
  --shadow-5:
27
- 0 0 0 1px var(--gray-a3),
27
+ 0 0 0 0.5px var(--gray-a2),
28
28
  0 12px 60px var(--black-a3),
29
29
  0 12px 32px -16px var(--gray-a5);
30
30
 
31
31
  --shadow-6:
32
- 0 0 0 1px var(--gray-a3),
32
+ 0 0 0 0.5px var(--gray-a2),
33
33
  0 12px 60px var(--black-a3),
34
34
  0 16px 64px var(--gray-a2),
35
35
  0 16px 36px -20px var(--gray-a7);
@@ -44,30 +44,30 @@
44
44
  inset 0 1px 1px 0 var(--black-a2);
45
45
 
46
46
  --shadow-2:
47
- 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
47
+ 0 0 0 0.5px var(--gray-a2),
48
48
  0 0 0 0.5px var(--black-a1),
49
49
  0 1px 1px 0 var(--gray-a2),
50
50
  0 2px 1px -1px var(--black-a1),
51
51
  0 1px 4px 0 var(--black-a1);
52
52
 
53
53
  --shadow-3:
54
- 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
54
+ 0 0 0 0.5px var(--gray-a2),
55
55
  0 2px 3px -2px var(--gray-a3),
56
56
  0 3px 12px -4px var(--black-a2),
57
57
  0 4px 16px -8px var(--black-a2);
58
58
 
59
59
  --shadow-4:
60
- 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
60
+ 0 0 0 0.5px var(--gray-a2),
61
61
  0 8px 40px var(--black-a1),
62
62
  0 12px 32px -16px var(--gray-a3);
63
63
 
64
64
  --shadow-5:
65
- 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
65
+ 0 0 0 0.5px var(--gray-a2),
66
66
  0 12px 60px var(--black-a3),
67
67
  0 12px 32px -16px var(--gray-a5);
68
68
 
69
69
  --shadow-6:
70
- 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
70
+ 0 0 0 0.5px var(--gray-a2),
71
71
  0 12px 60px var(--black-a3),
72
72
  0 16px 64px var(--gray-a2),
73
73
  0 16px 36px -20px var(--gray-a7);
@@ -81,34 +81,34 @@
81
81
  inset 0 -1px 0.5px 0 var(--gray-a3),
82
82
  inset 0 0 0 1px var(--gray-a3),
83
83
  inset 0 2px 2px 0 var(--black-a5),
84
- inset 0 0 0 1px var(--gray-a4);
84
+ inset 0 0 0 1px var(--gray-a5);
85
85
 
86
86
  --shadow-2:
87
- 0 0 0 1px var(--gray-a6),
87
+ 0 0 0 0.5px var(--gray-a5),
88
88
  0 0 0 0.5px var(--black-a3),
89
89
  0 1px 1px 0 var(--black-a6),
90
90
  0 2px 1px -1px var(--black-a6),
91
91
  0 1px 4px 0 var(--black-a5);
92
92
 
93
93
  --shadow-3:
94
- 0 0 0 1px var(--gray-a6),
94
+ 0 0 0 0.5px var(--gray-a5),
95
95
  0 2px 3px -2px var(--black-a3),
96
96
  0 3px 8px -2px var(--black-a6),
97
97
  0 4px 12px -4px var(--black-a7);
98
98
 
99
99
  --shadow-4:
100
- 0 0 0 1px var(--gray-a6),
100
+ 0 0 0 0.5px var(--gray-a5),
101
101
  0 8px 40px var(--black-a3),
102
102
  0 12px 32px -16px var(--black-a5);
103
103
 
104
104
  --shadow-5:
105
- 0 0 0 1px var(--gray-a6),
105
+ 0 0 0 0.5px var(--gray-a5),
106
106
  0 12px 60px var(--black-a5),
107
107
  0 12px 32px -16px var(--black-a7);
108
108
 
109
109
  --shadow-6:
110
- 0 0 0 1px var(--gray-a6),
111
- 0 12px 60px var(--black-a4),
110
+ 0 0 0 0.5px var(--gray-a5),
111
+ 0 12px 60px var(--black-a5),
112
112
  0 16px 64px var(--black-a6),
113
113
  0 16px 36px -20px var(--black-a11);
114
114
  }
@@ -121,34 +121,34 @@
121
121
  inset 0 -1px 0.5px 0 var(--gray-a3),
122
122
  inset 0 0 0 1px var(--gray-a3),
123
123
  inset 0 2px 2px 0 var(--black-a5),
124
- inset 0 0 0 1px var(--gray-a4);
124
+ inset 0 0 0 1px var(--gray-a5);
125
125
 
126
126
  --shadow-2:
127
- 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
127
+ 0 0 0 0.5px var(--gray-a5),
128
128
  0 0 0 0.5px var(--black-a3),
129
129
  0 1px 1px 0 var(--black-a6),
130
130
  0 2px 1px -1px var(--black-a6),
131
131
  0 1px 4px 0 var(--black-a5);
132
132
 
133
133
  --shadow-3:
134
- 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
134
+ 0 0 0 0.5px var(--gray-a5),
135
135
  0 2px 3px -2px var(--black-a3),
136
136
  0 3px 8px -2px var(--black-a6),
137
137
  0 4px 12px -4px var(--black-a7);
138
138
 
139
139
  --shadow-4:
140
- 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
140
+ 0 0 0 0.5px var(--gray-a5),
141
141
  0 8px 40px var(--black-a3),
142
142
  0 12px 32px -16px var(--black-a5);
143
143
 
144
144
  --shadow-5:
145
- 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
145
+ 0 0 0 0.5px var(--gray-a5),
146
146
  0 12px 60px var(--black-a5),
147
147
  0 12px 32px -16px var(--black-a7);
148
148
 
149
149
  --shadow-6:
150
- 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
151
- 0 12px 60px var(--black-a4),
150
+ 0 0 0 0.5px var(--gray-a5),
151
+ 0 12px 60px var(--black-a5),
152
152
  0 16px 64px var(--black-a6),
153
153
  0 16px 36px -20px var(--black-a11);
154
154
  }
package/styles.css CHANGED
@@ -3636,11 +3636,11 @@
3636
3636
  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
3637
3637
  --color-transparent: rgb(0 0 0 / 0);
3638
3638
  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
3639
- --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
3640
- --shadow-3: 0 0 0 1px var(--gray-a3), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
3641
- --shadow-4: 0 0 0 1px var(--gray-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
3642
- --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
3643
- --shadow-6: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
3639
+ --shadow-2: 0 0 0 0.5px var(--gray-a2), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
3640
+ --shadow-3: 0 0 0 0.5px var(--gray-a2), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
3641
+ --shadow-4: 0 0 0 0.5px var(--gray-a2), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
3642
+ --shadow-5: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
3643
+ --shadow-6: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
3644
3644
  --blur-factor: 1;
3645
3645
  --blur-1: calc(2px * var(--scaling) * var(--blur-factor));
3646
3646
  --blur-2: calc(4px * var(--scaling) * var(--blur-factor));
@@ -3707,12 +3707,12 @@
3707
3707
  --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
3708
3708
  --color-dialog-solid: var(--gray-2);
3709
3709
  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
3710
- --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
3711
- --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
3712
- --shadow-3: 0 0 0 1px var(--gray-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
3713
- --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
3714
- --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
3715
- --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
3710
+ --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a5);
3711
+ --shadow-2: 0 0 0 0.5px var(--gray-a5), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
3712
+ --shadow-3: 0 0 0 0.5px var(--gray-a5), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
3713
+ --shadow-4: 0 0 0 0.5px var(--gray-a5), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
3714
+ --shadow-5: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
3715
+ --shadow-6: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
3716
3716
  --avatar-image-hover-filter: brightness(1.05) saturate(1.05);
3717
3717
  --avatar-image-active-filter: brightness(1.1) saturate(1.1);
3718
3718
  --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
@@ -4761,22 +4761,22 @@
4761
4761
  @supports (color: color-mix(in oklab, white, black)) {
4762
4762
  :where(.radix-themes){
4763
4763
  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
4764
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
4765
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
4766
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
4767
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
4768
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
4764
+ --shadow-2: 0 0 0 0.5px var(--gray-a2), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
4765
+ --shadow-3: 0 0 0 0.5px var(--gray-a2), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
4766
+ --shadow-4: 0 0 0 0.5px var(--gray-a2), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
4767
+ --shadow-5: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
4768
+ --shadow-6: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
4769
4769
  }
4770
4770
  }
4771
4771
  @supports (color: color-mix(in oklab, white, black)) {
4772
4772
  :is(.dark, .dark-theme),
4773
4773
  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)){
4774
- --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
4775
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
4776
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
4777
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
4778
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
4779
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
4774
+ --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a5);
4775
+ --shadow-2: 0 0 0 0.5px var(--gray-a5), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
4776
+ --shadow-3: 0 0 0 0.5px var(--gray-a5), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
4777
+ --shadow-4: 0 0 0 0.5px var(--gray-a5), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
4778
+ --shadow-5: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
4779
+ --shadow-6: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
4780
4780
  }
4781
4781
  }
4782
4782
  @media (prefers-reduced-motion: reduce) {
package/tokens/base.css CHANGED
@@ -65,11 +65,11 @@
65
65
  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
66
66
  --color-transparent: rgb(0 0 0 / 0);
67
67
  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
68
- --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
69
- --shadow-3: 0 0 0 1px var(--gray-a3), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
70
- --shadow-4: 0 0 0 1px var(--gray-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
71
- --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
72
- --shadow-6: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
68
+ --shadow-2: 0 0 0 0.5px var(--gray-a2), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
69
+ --shadow-3: 0 0 0 0.5px var(--gray-a2), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
70
+ --shadow-4: 0 0 0 0.5px var(--gray-a2), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
71
+ --shadow-5: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
72
+ --shadow-6: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
73
73
  --blur-factor: 1;
74
74
  --blur-1: calc(2px * var(--scaling) * var(--blur-factor));
75
75
  --blur-2: calc(4px * var(--scaling) * var(--blur-factor));
@@ -101,12 +101,12 @@
101
101
  --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
102
102
  --color-dialog-solid: var(--gray-2);
103
103
  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
104
- --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
105
- --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
106
- --shadow-3: 0 0 0 1px var(--gray-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
107
- --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
108
- --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
109
- --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
104
+ --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a5);
105
+ --shadow-2: 0 0 0 0.5px var(--gray-a5), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
106
+ --shadow-3: 0 0 0 0.5px var(--gray-a5), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
107
+ --shadow-4: 0 0 0 0.5px var(--gray-a5), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
108
+ --shadow-5: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
109
+ --shadow-6: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
110
110
  }
111
111
  @supports (color: color(display-p3 1 1 1)) {
112
112
  @media (color-gamut: p3) {
@@ -1337,22 +1337,22 @@
1337
1337
  @supports (color: color-mix(in oklab, white, black)) {
1338
1338
  :where(.radix-themes) {
1339
1339
  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
1340
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
1341
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
1342
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
1343
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
1344
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
1340
+ --shadow-2: 0 0 0 0.5px var(--gray-a2), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
1341
+ --shadow-3: 0 0 0 0.5px var(--gray-a2), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
1342
+ --shadow-4: 0 0 0 0.5px var(--gray-a2), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
1343
+ --shadow-5: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
1344
+ --shadow-6: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
1345
1345
  }
1346
1346
  }
1347
1347
  @supports (color: color-mix(in oklab, white, black)) {
1348
1348
  :is(.dark, .dark-theme),
1349
1349
  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
1350
- --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
1351
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
1352
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
1353
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
1354
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
1355
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
1350
+ --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a5);
1351
+ --shadow-2: 0 0 0 0.5px var(--gray-a5), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
1352
+ --shadow-3: 0 0 0 0.5px var(--gray-a5), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
1353
+ --shadow-4: 0 0 0 0.5px var(--gray-a5), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
1354
+ --shadow-5: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
1355
+ --shadow-6: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
1356
1356
  }
1357
1357
  }
1358
1358
  @media (prefers-reduced-motion: reduce) {
package/tokens.css CHANGED
@@ -3417,11 +3417,11 @@
3417
3417
  --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
3418
3418
  --color-transparent: rgb(0 0 0 / 0);
3419
3419
  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
3420
- --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
3421
- --shadow-3: 0 0 0 1px var(--gray-a3), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
3422
- --shadow-4: 0 0 0 1px var(--gray-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
3423
- --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
3424
- --shadow-6: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
3420
+ --shadow-2: 0 0 0 0.5px var(--gray-a2), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
3421
+ --shadow-3: 0 0 0 0.5px var(--gray-a2), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
3422
+ --shadow-4: 0 0 0 0.5px var(--gray-a2), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
3423
+ --shadow-5: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
3424
+ --shadow-6: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
3425
3425
  --blur-factor: 1;
3426
3426
  --blur-1: calc(2px * var(--scaling) * var(--blur-factor));
3427
3427
  --blur-2: calc(4px * var(--scaling) * var(--blur-factor));
@@ -3483,12 +3483,12 @@
3483
3483
  --color-surface-translucent: color-mix(in srgb, var(--gray-2) var(--surface-opacity-percentage), transparent);
3484
3484
  --color-dialog-solid: var(--gray-2);
3485
3485
  --color-dialog-translucent: color-mix(in srgb, var(--gray-2) var(--dialog-opacity-percentage), transparent);
3486
- --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
3487
- --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
3488
- --shadow-3: 0 0 0 1px var(--gray-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
3489
- --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
3490
- --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
3491
- --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
3486
+ --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a5);
3487
+ --shadow-2: 0 0 0 0.5px var(--gray-a5), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
3488
+ --shadow-3: 0 0 0 0.5px var(--gray-a5), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
3489
+ --shadow-4: 0 0 0 0.5px var(--gray-a5), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
3490
+ --shadow-5: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
3491
+ --shadow-6: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
3492
3492
  }
3493
3493
  @supports (color: color(display-p3 1 1 1)) {
3494
3494
  @media (color-gamut: p3) {
@@ -4719,22 +4719,22 @@
4719
4719
  @supports (color: color-mix(in oklab, white, black)) {
4720
4720
  :where(.radix-themes) {
4721
4721
  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1px 1px 0 var(--gray-a2), inset 0 1px 1px 0 var(--black-a2);
4722
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
4723
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
4724
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
4725
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
4726
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
4722
+ --shadow-2: 0 0 0 0.5px var(--gray-a2), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 4px 0 var(--black-a1);
4723
+ --shadow-3: 0 0 0 0.5px var(--gray-a2), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
4724
+ --shadow-4: 0 0 0 0.5px var(--gray-a2), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
4725
+ --shadow-5: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
4726
+ --shadow-6: 0 0 0 0.5px var(--gray-a2), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
4727
4727
  }
4728
4728
  }
4729
4729
  @supports (color: color-mix(in oklab, white, black)) {
4730
4730
  :is(.dark, .dark-theme),
4731
4731
  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
4732
- --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
4733
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
4734
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
4735
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
4736
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
4737
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
4732
+ --shadow-1: inset 0 -1px 0.5px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 2px 2px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a5);
4733
+ --shadow-2: 0 0 0 0.5px var(--gray-a5), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 4px 0 var(--black-a5);
4734
+ --shadow-3: 0 0 0 0.5px var(--gray-a5), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
4735
+ --shadow-4: 0 0 0 0.5px var(--gray-a5), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
4736
+ --shadow-5: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
4737
+ --shadow-6: 0 0 0 0.5px var(--gray-a5), 0 12px 60px var(--black-a5), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
4738
4738
  }
4739
4739
  }
4740
4740
  @media (prefers-reduced-motion: reduce) {