@kushagradhawan/kookie-ui 0.1.36 → 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 -4
  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.36",
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,25 +6,30 @@
6
6
  inset 0 1px 1px 0 var(--black-a2);
7
7
 
8
8
  --shadow-2:
9
+ 0 0 0 0.5px var(--gray-a2),
9
10
  0 0 0 0.5px var(--black-a1),
10
11
  0 1px 1px 0 var(--gray-a2),
11
12
  0 2px 1px -1px var(--black-a1),
12
13
  0 1px 4px 0 var(--black-a1);
13
14
 
14
15
  --shadow-3:
16
+ 0 0 0 0.5px var(--gray-a2),
15
17
  0 2px 3px -2px var(--gray-a3),
16
18
  0 3px 12px -4px var(--black-a2),
17
19
  0 4px 16px -8px var(--black-a2);
18
20
 
19
21
  --shadow-4:
22
+ 0 0 0 0.5px var(--gray-a2),
20
23
  0 8px 40px var(--black-a1),
21
24
  0 12px 32px -16px var(--gray-a3);
22
25
 
23
26
  --shadow-5:
27
+ 0 0 0 0.5px var(--gray-a2),
24
28
  0 12px 60px var(--black-a3),
25
29
  0 12px 32px -16px var(--gray-a5);
26
30
 
27
31
  --shadow-6:
32
+ 0 0 0 0.5px var(--gray-a2),
28
33
  0 12px 60px var(--black-a3),
29
34
  0 16px 64px var(--gray-a2),
30
35
  0 16px 36px -20px var(--gray-a7);
@@ -39,25 +44,30 @@
39
44
  inset 0 1px 1px 0 var(--black-a2);
40
45
 
41
46
  --shadow-2:
47
+ 0 0 0 0.5px var(--gray-a2),
42
48
  0 0 0 0.5px var(--black-a1),
43
49
  0 1px 1px 0 var(--gray-a2),
44
50
  0 2px 1px -1px var(--black-a1),
45
51
  0 1px 4px 0 var(--black-a1);
46
52
 
47
53
  --shadow-3:
54
+ 0 0 0 0.5px var(--gray-a2),
48
55
  0 2px 3px -2px var(--gray-a3),
49
56
  0 3px 12px -4px var(--black-a2),
50
57
  0 4px 16px -8px var(--black-a2);
51
58
 
52
59
  --shadow-4:
60
+ 0 0 0 0.5px var(--gray-a2),
53
61
  0 8px 40px var(--black-a1),
54
62
  0 12px 32px -16px var(--gray-a3);
55
63
 
56
64
  --shadow-5:
65
+ 0 0 0 0.5px var(--gray-a2),
57
66
  0 12px 60px var(--black-a3),
58
67
  0 12px 32px -16px var(--gray-a5);
59
68
 
60
69
  --shadow-6:
70
+ 0 0 0 0.5px var(--gray-a2),
61
71
  0 12px 60px var(--black-a3),
62
72
  0 16px 64px var(--gray-a2),
63
73
  0 16px 36px -20px var(--gray-a7);
@@ -71,29 +81,34 @@
71
81
  inset 0 -1px 0.5px 0 var(--gray-a3),
72
82
  inset 0 0 0 1px var(--gray-a3),
73
83
  inset 0 2px 2px 0 var(--black-a5),
74
- inset 0 0 0 1px var(--gray-a4);
84
+ inset 0 0 0 1px var(--gray-a5);
75
85
 
76
86
  --shadow-2:
87
+ 0 0 0 0.5px var(--gray-a5),
77
88
  0 0 0 0.5px var(--black-a3),
78
89
  0 1px 1px 0 var(--black-a6),
79
90
  0 2px 1px -1px var(--black-a6),
80
91
  0 1px 4px 0 var(--black-a5);
81
92
 
82
93
  --shadow-3:
94
+ 0 0 0 0.5px var(--gray-a5),
83
95
  0 2px 3px -2px var(--black-a3),
84
96
  0 3px 8px -2px var(--black-a6),
85
97
  0 4px 12px -4px var(--black-a7);
86
98
 
87
99
  --shadow-4:
100
+ 0 0 0 0.5px var(--gray-a5),
88
101
  0 8px 40px var(--black-a3),
89
102
  0 12px 32px -16px var(--black-a5);
90
103
 
91
104
  --shadow-5:
105
+ 0 0 0 0.5px var(--gray-a5),
92
106
  0 12px 60px var(--black-a5),
93
107
  0 12px 32px -16px var(--black-a7);
94
108
 
95
109
  --shadow-6:
96
- 0 12px 60px var(--black-a4),
110
+ 0 0 0 0.5px var(--gray-a5),
111
+ 0 12px 60px var(--black-a5),
97
112
  0 16px 64px var(--black-a6),
98
113
  0 16px 36px -20px var(--black-a11);
99
114
  }
@@ -106,29 +121,34 @@
106
121
  inset 0 -1px 0.5px 0 var(--gray-a3),
107
122
  inset 0 0 0 1px var(--gray-a3),
108
123
  inset 0 2px 2px 0 var(--black-a5),
109
- inset 0 0 0 1px var(--gray-a4);
124
+ inset 0 0 0 1px var(--gray-a5);
110
125
 
111
126
  --shadow-2:
127
+ 0 0 0 0.5px var(--gray-a5),
112
128
  0 0 0 0.5px var(--black-a3),
113
129
  0 1px 1px 0 var(--black-a6),
114
130
  0 2px 1px -1px var(--black-a6),
115
131
  0 1px 4px 0 var(--black-a5);
116
132
 
117
133
  --shadow-3:
134
+ 0 0 0 0.5px var(--gray-a5),
118
135
  0 2px 3px -2px var(--black-a3),
119
136
  0 3px 8px -2px var(--black-a6),
120
137
  0 4px 12px -4px var(--black-a7);
121
138
 
122
139
  --shadow-4:
140
+ 0 0 0 0.5px var(--gray-a5),
123
141
  0 8px 40px var(--black-a3),
124
142
  0 12px 32px -16px var(--black-a5);
125
143
 
126
144
  --shadow-5:
145
+ 0 0 0 0.5px var(--gray-a5),
127
146
  0 12px 60px var(--black-a5),
128
147
  0 12px 32px -16px var(--black-a7);
129
148
 
130
149
  --shadow-6:
131
- 0 12px 60px var(--black-a4),
150
+ 0 0 0 0.5px var(--gray-a5),
151
+ 0 12px 60px var(--black-a5),
132
152
  0 16px 64px var(--black-a6),
133
153
  0 16px 36px -20px var(--black-a11);
134
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 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);
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 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);
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 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);
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 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);
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 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);
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 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);
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 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);
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 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);
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 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);
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 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);
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 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);
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 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);
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) {