@kushagradhawan/kookie-ui 0.1.35 → 0.1.36

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 +0 -20
  3. package/styles.css +20 -20
  4. package/tokens/base.css +20 -20
  5. package/tokens.css +20 -20
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.36",
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,25 @@
6
6
  inset 0 1px 1px 0 var(--black-a2);
7
7
 
8
8
  --shadow-2:
9
- 0 0 0 1px var(--gray-a3),
10
9
  0 0 0 0.5px var(--black-a1),
11
10
  0 1px 1px 0 var(--gray-a2),
12
11
  0 2px 1px -1px var(--black-a1),
13
12
  0 1px 4px 0 var(--black-a1);
14
13
 
15
14
  --shadow-3:
16
- 0 0 0 1px var(--gray-a3),
17
15
  0 2px 3px -2px var(--gray-a3),
18
16
  0 3px 12px -4px var(--black-a2),
19
17
  0 4px 16px -8px var(--black-a2);
20
18
 
21
19
  --shadow-4:
22
- 0 0 0 1px var(--gray-a3),
23
20
  0 8px 40px var(--black-a1),
24
21
  0 12px 32px -16px var(--gray-a3);
25
22
 
26
23
  --shadow-5:
27
- 0 0 0 1px var(--gray-a3),
28
24
  0 12px 60px var(--black-a3),
29
25
  0 12px 32px -16px var(--gray-a5);
30
26
 
31
27
  --shadow-6:
32
- 0 0 0 1px var(--gray-a3),
33
28
  0 12px 60px var(--black-a3),
34
29
  0 16px 64px var(--gray-a2),
35
30
  0 16px 36px -20px var(--gray-a7);
@@ -44,30 +39,25 @@
44
39
  inset 0 1px 1px 0 var(--black-a2);
45
40
 
46
41
  --shadow-2:
47
- 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
48
42
  0 0 0 0.5px var(--black-a1),
49
43
  0 1px 1px 0 var(--gray-a2),
50
44
  0 2px 1px -1px var(--black-a1),
51
45
  0 1px 4px 0 var(--black-a1);
52
46
 
53
47
  --shadow-3:
54
- 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
55
48
  0 2px 3px -2px var(--gray-a3),
56
49
  0 3px 12px -4px var(--black-a2),
57
50
  0 4px 16px -8px var(--black-a2);
58
51
 
59
52
  --shadow-4:
60
- 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
61
53
  0 8px 40px var(--black-a1),
62
54
  0 12px 32px -16px var(--gray-a3);
63
55
 
64
56
  --shadow-5:
65
- 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
66
57
  0 12px 60px var(--black-a3),
67
58
  0 12px 32px -16px var(--gray-a5);
68
59
 
69
60
  --shadow-6:
70
- 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
71
61
  0 12px 60px var(--black-a3),
72
62
  0 16px 64px var(--gray-a2),
73
63
  0 16px 36px -20px var(--gray-a7);
@@ -84,30 +74,25 @@
84
74
  inset 0 0 0 1px var(--gray-a4);
85
75
 
86
76
  --shadow-2:
87
- 0 0 0 1px var(--gray-a6),
88
77
  0 0 0 0.5px var(--black-a3),
89
78
  0 1px 1px 0 var(--black-a6),
90
79
  0 2px 1px -1px var(--black-a6),
91
80
  0 1px 4px 0 var(--black-a5);
92
81
 
93
82
  --shadow-3:
94
- 0 0 0 1px var(--gray-a6),
95
83
  0 2px 3px -2px var(--black-a3),
96
84
  0 3px 8px -2px var(--black-a6),
97
85
  0 4px 12px -4px var(--black-a7);
98
86
 
99
87
  --shadow-4:
100
- 0 0 0 1px var(--gray-a6),
101
88
  0 8px 40px var(--black-a3),
102
89
  0 12px 32px -16px var(--black-a5);
103
90
 
104
91
  --shadow-5:
105
- 0 0 0 1px var(--gray-a6),
106
92
  0 12px 60px var(--black-a5),
107
93
  0 12px 32px -16px var(--black-a7);
108
94
 
109
95
  --shadow-6:
110
- 0 0 0 1px var(--gray-a6),
111
96
  0 12px 60px var(--black-a4),
112
97
  0 16px 64px var(--black-a6),
113
98
  0 16px 36px -20px var(--black-a11);
@@ -124,30 +109,25 @@
124
109
  inset 0 0 0 1px var(--gray-a4);
125
110
 
126
111
  --shadow-2:
127
- 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
128
112
  0 0 0 0.5px var(--black-a3),
129
113
  0 1px 1px 0 var(--black-a6),
130
114
  0 2px 1px -1px var(--black-a6),
131
115
  0 1px 4px 0 var(--black-a5);
132
116
 
133
117
  --shadow-3:
134
- 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
135
118
  0 2px 3px -2px var(--black-a3),
136
119
  0 3px 8px -2px var(--black-a6),
137
120
  0 4px 12px -4px var(--black-a7);
138
121
 
139
122
  --shadow-4:
140
- 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
141
123
  0 8px 40px var(--black-a3),
142
124
  0 12px 32px -16px var(--black-a5);
143
125
 
144
126
  --shadow-5:
145
- 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
146
127
  0 12px 60px var(--black-a5),
147
128
  0 12px 32px -16px var(--black-a7);
148
129
 
149
130
  --shadow-6:
150
- 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
151
131
  0 12px 60px var(--black-a4),
152
132
  0 16px 64px var(--black-a6),
153
133
  0 16px 36px -20px var(--black-a11);
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(--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 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
3641
+ --shadow-4: 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
3642
+ --shadow-5: 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
3643
+ --shadow-6: 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));
@@ -3708,11 +3708,11 @@
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
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);
3711
+ --shadow-2: 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 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
3713
+ --shadow-4: 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
3714
+ --shadow-5: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
3715
+ --shadow-6: 0 12px 60px var(--black-a4), 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(--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 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
4766
+ --shadow-4: 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
4767
+ --shadow-5: 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
4768
+ --shadow-6: 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
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);
4775
+ --shadow-2: 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 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
4777
+ --shadow-4: 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
4778
+ --shadow-5: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
4779
+ --shadow-6: 0 12px 60px var(--black-a4), 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(--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 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
70
+ --shadow-4: 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
71
+ --shadow-5: 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
72
+ --shadow-6: 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));
@@ -102,11 +102,11 @@
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
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);
105
+ --shadow-2: 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 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
107
+ --shadow-4: 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
108
+ --shadow-5: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
109
+ --shadow-6: 0 12px 60px var(--black-a4), 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(--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 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
1342
+ --shadow-4: 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
1343
+ --shadow-5: 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
1344
+ --shadow-6: 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
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);
1351
+ --shadow-2: 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 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
1353
+ --shadow-4: 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
1354
+ --shadow-5: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
1355
+ --shadow-6: 0 12px 60px var(--black-a4), 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(--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 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
3422
+ --shadow-4: 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
3423
+ --shadow-5: 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
3424
+ --shadow-6: 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));
@@ -3484,11 +3484,11 @@
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
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);
3487
+ --shadow-2: 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 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
3489
+ --shadow-4: 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
3490
+ --shadow-5: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
3491
+ --shadow-6: 0 12px 60px var(--black-a4), 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(--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 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
4724
+ --shadow-4: 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
4725
+ --shadow-5: 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
4726
+ --shadow-6: 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
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);
4733
+ --shadow-2: 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 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
4735
+ --shadow-4: 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
4736
+ --shadow-5: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
4737
+ --shadow-6: 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
4738
4738
  }
4739
4739
  }
4740
4740
  @media (prefers-reduced-motion: reduce) {