@geckoui/geckoui 1.2.0-beta.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.css +3237 -12
  2. package/dist/index.d.mts +116 -157
  3. package/dist/index.d.ts +116 -157
  4. package/dist/index.js +514 -527
  5. package/dist/index.mjs +503 -524
  6. package/dist/styles.css +1513 -1653
  7. package/package.json +15 -22
  8. package/README.md +0 -157
package/dist/styles.css CHANGED
@@ -1,127 +1,16 @@
1
1
  /* src/styles.scss */
2
- *,
3
- ::before,
4
- ::after {
5
- --tw-border-spacing-x: 0;
6
- --tw-border-spacing-y: 0;
7
- --tw-translate-x: 0;
8
- --tw-translate-y: 0;
9
- --tw-rotate: 0;
10
- --tw-skew-x: 0;
11
- --tw-skew-y: 0;
12
- --tw-scale-x: 1;
13
- --tw-scale-y: 1;
14
- --tw-pan-x: ;
15
- --tw-pan-y: ;
16
- --tw-pinch-zoom: ;
17
- --tw-scroll-snap-strictness: proximity;
18
- --tw-gradient-from-position: ;
19
- --tw-gradient-via-position: ;
20
- --tw-gradient-to-position: ;
21
- --tw-ordinal: ;
22
- --tw-slashed-zero: ;
23
- --tw-numeric-figure: ;
24
- --tw-numeric-spacing: ;
25
- --tw-numeric-fraction: ;
26
- --tw-ring-inset: ;
27
- --tw-ring-offset-width: 0px;
28
- --tw-ring-offset-color: #fff;
29
- --tw-ring-color: rgb(59 130 246 / 0.5);
30
- --tw-ring-offset-shadow: 0 0 #0000;
31
- --tw-ring-shadow: 0 0 #0000;
32
- --tw-shadow: 0 0 #0000;
33
- --tw-shadow-colored: 0 0 #0000;
34
- --tw-blur: ;
35
- --tw-brightness: ;
36
- --tw-contrast: ;
37
- --tw-grayscale: ;
38
- --tw-hue-rotate: ;
39
- --tw-invert: ;
40
- --tw-saturate: ;
41
- --tw-sepia: ;
42
- --tw-drop-shadow: ;
43
- --tw-backdrop-blur: ;
44
- --tw-backdrop-brightness: ;
45
- --tw-backdrop-contrast: ;
46
- --tw-backdrop-grayscale: ;
47
- --tw-backdrop-hue-rotate: ;
48
- --tw-backdrop-invert: ;
49
- --tw-backdrop-opacity: ;
50
- --tw-backdrop-saturate: ;
51
- --tw-backdrop-sepia: ;
52
- --tw-contain-size: ;
53
- --tw-contain-layout: ;
54
- --tw-contain-paint: ;
55
- --tw-contain-style: ;
56
- }
57
- ::backdrop {
58
- --tw-border-spacing-x: 0;
59
- --tw-border-spacing-y: 0;
60
- --tw-translate-x: 0;
61
- --tw-translate-y: 0;
62
- --tw-rotate: 0;
63
- --tw-skew-x: 0;
64
- --tw-skew-y: 0;
65
- --tw-scale-x: 1;
66
- --tw-scale-y: 1;
67
- --tw-pan-x: ;
68
- --tw-pan-y: ;
69
- --tw-pinch-zoom: ;
70
- --tw-scroll-snap-strictness: proximity;
71
- --tw-gradient-from-position: ;
72
- --tw-gradient-via-position: ;
73
- --tw-gradient-to-position: ;
74
- --tw-ordinal: ;
75
- --tw-slashed-zero: ;
76
- --tw-numeric-figure: ;
77
- --tw-numeric-spacing: ;
78
- --tw-numeric-fraction: ;
79
- --tw-ring-inset: ;
80
- --tw-ring-offset-width: 0px;
81
- --tw-ring-offset-color: #fff;
82
- --tw-ring-color: rgb(59 130 246 / 0.5);
83
- --tw-ring-offset-shadow: 0 0 #0000;
84
- --tw-ring-shadow: 0 0 #0000;
85
- --tw-shadow: 0 0 #0000;
86
- --tw-shadow-colored: 0 0 #0000;
87
- --tw-blur: ;
88
- --tw-brightness: ;
89
- --tw-contrast: ;
90
- --tw-grayscale: ;
91
- --tw-hue-rotate: ;
92
- --tw-invert: ;
93
- --tw-saturate: ;
94
- --tw-sepia: ;
95
- --tw-drop-shadow: ;
96
- --tw-backdrop-blur: ;
97
- --tw-backdrop-brightness: ;
98
- --tw-backdrop-contrast: ;
99
- --tw-backdrop-grayscale: ;
100
- --tw-backdrop-hue-rotate: ;
101
- --tw-backdrop-invert: ;
102
- --tw-backdrop-opacity: ;
103
- --tw-backdrop-saturate: ;
104
- --tw-backdrop-sepia: ;
105
- --tw-contain-size: ;
106
- --tw-contain-layout: ;
107
- --tw-contain-paint: ;
108
- --tw-contain-style: ;
109
- }
2
+ @layer properties;
110
3
  .GeckoUI-icon__check {
111
4
  box-sizing: border-box;
112
5
  border-width: 0;
113
6
  border-style: solid;
114
7
  border-color: #e5e7eb;
115
8
  display: inline-block;
116
- height: 1rem;
117
- width: 1rem;
118
- --tw-bg-opacity: 1;
119
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
120
- -webkit-mask-position: center;
9
+ height: calc(var(--spacing, 0.25rem) * 4);
10
+ width: calc(var(--spacing, 0.25rem) * 4);
11
+ background-color: var(--color-text-primary);
121
12
  mask-position: center;
122
- -webkit-mask-size: contain;
123
13
  mask-size: contain;
124
- -webkit-mask-repeat: no-repeat;
125
14
  mask-repeat: no-repeat;
126
15
  mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" fill="%232B7FC6"/></svg>');
127
16
  -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" fill="%232B7FC6"/></svg>');
@@ -132,15 +21,11 @@
132
21
  border-style: solid;
133
22
  border-color: #e5e7eb;
134
23
  display: inline-block;
135
- height: 1rem;
136
- width: 1rem;
137
- --tw-bg-opacity: 1;
138
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
139
- -webkit-mask-position: center;
24
+ height: calc(var(--spacing, 0.25rem) * 4);
25
+ width: calc(var(--spacing, 0.25rem) * 4);
26
+ background-color: var(--color-text-primary);
140
27
  mask-position: center;
141
- -webkit-mask-size: contain;
142
28
  mask-size: contain;
143
- -webkit-mask-repeat: no-repeat;
144
29
  mask-repeat: no-repeat;
145
30
  mask-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.230169 0.363673C0.528748 0.076578 1.00353 0.0858874 1.29063 0.384466L5 4.32222L8.70938 0.384466C8.99647 0.0858875 9.47125 0.076578 9.76983 0.363673C10.0684 0.650768 10.0777 1.12555 9.79063 1.42413L5.54063 5.92413C5.39922 6.07119 5.20401 6.1543 5 6.1543C4.79599 6.1543 4.60078 6.07119 4.45938 5.92413L0.209376 1.42413C-0.0777189 1.12555 -0.0684095 0.650768 0.230169 0.363673Z" fill="currentColor"/></svg>');
146
31
  -webkit-mask-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.230169 0.363673C0.528748 0.076578 1.00353 0.0858874 1.29063 0.384466L5 4.32222L8.70938 0.384466C8.99647 0.0858875 9.47125 0.076578 9.76983 0.363673C10.0684 0.650768 10.0777 1.12555 9.79063 1.42413L5.54063 5.92413C5.39922 6.07119 5.20401 6.1543 5 6.1543C4.79599 6.1543 4.60078 6.07119 4.45938 5.92413L0.209376 1.42413C-0.0777189 1.12555 -0.0684095 0.650768 0.230169 0.363673Z" fill="currentColor"/></svg>');
@@ -151,15 +36,11 @@
151
36
  border-style: solid;
152
37
  border-color: #e5e7eb;
153
38
  display: inline-block;
154
- height: 1rem;
155
- width: 1rem;
156
- --tw-bg-opacity: 1;
157
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
158
- -webkit-mask-position: center;
39
+ height: calc(var(--spacing, 0.25rem) * 4);
40
+ width: calc(var(--spacing, 0.25rem) * 4);
41
+ background-color: var(--color-text-primary);
159
42
  mask-position: center;
160
- -webkit-mask-size: contain;
161
43
  mask-size: contain;
162
- -webkit-mask-repeat: no-repeat;
163
44
  mask-repeat: no-repeat;
164
45
  mask-image: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.23017 7.36367C5.52875 7.07658 6.00353 7.08589 6.29063 7.38447L10 11.3222L13.7094 7.38447C13.9965 7.08589 14.4713 7.07658 14.7698 7.36367C15.0684 7.65077 15.0777 8.12555 14.7906 8.42413L10.5406 12.9241C10.3992 13.0712 10.204 13.1543 10 13.1543C9.79599 13.1543 9.60078 13.0712 9.45938 12.9241L5.20938 8.42413C4.92228 8.12555 4.93159 7.65077 5.23017 7.36367Z" fill="%236B7280"/></svg>');
165
46
  -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.23017 7.36367C5.52875 7.07658 6.00353 7.08589 6.29063 7.38447L10 11.3222L13.7094 7.38447C13.9965 7.08589 14.4713 7.07658 14.7698 7.36367C15.0684 7.65077 15.0777 8.12555 14.7906 8.42413L10.5406 12.9241C10.3992 13.0712 10.204 13.1543 10 13.1543C9.79599 13.1543 9.60078 13.0712 9.45938 12.9241L5.20938 8.42413C4.92228 8.12555 4.93159 7.65077 5.23017 7.36367Z" fill="%236B7280"/></svg>');
@@ -170,15 +51,11 @@
170
51
  border-style: solid;
171
52
  border-color: #e5e7eb;
172
53
  display: inline-block;
173
- height: 1rem;
174
- width: 1rem;
175
- --tw-bg-opacity: 1;
176
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
177
- -webkit-mask-position: center;
54
+ height: calc(var(--spacing, 0.25rem) * 4);
55
+ width: calc(var(--spacing, 0.25rem) * 4);
56
+ background-color: var(--color-text-primary);
178
57
  mask-position: center;
179
- -webkit-mask-size: contain;
180
58
  mask-size: contain;
181
- -webkit-mask-repeat: no-repeat;
182
59
  mask-repeat: no-repeat;
183
60
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M11 4.26025L4 11.2603M4 4.26025L11 11.2603" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
184
61
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M11 4.26025L4 11.2603M4 4.26025L11 11.2603" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
@@ -189,15 +66,11 @@
189
66
  border-style: solid;
190
67
  border-color: #e5e7eb;
191
68
  display: inline-block;
192
- height: 1rem;
193
- width: 1rem;
194
- --tw-bg-opacity: 1;
195
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
196
- -webkit-mask-position: center;
69
+ height: calc(var(--spacing, 0.25rem) * 4);
70
+ width: calc(var(--spacing, 0.25rem) * 4);
71
+ background-color: var(--color-text-primary);
197
72
  mask-position: center;
198
- -webkit-mask-size: contain;
199
73
  mask-size: contain;
200
- -webkit-mask-repeat: no-repeat;
201
74
  mask-repeat: no-repeat;
202
75
  mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" fill="%232B7FC6"/></svg>');
203
76
  -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" fill="%232B7FC6"/></svg>');
@@ -208,15 +81,11 @@
208
81
  border-style: solid;
209
82
  border-color: #e5e7eb;
210
83
  display: inline-block;
211
- height: 1rem;
212
- width: 1rem;
213
- --tw-bg-opacity: 1;
214
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
215
- -webkit-mask-position: center;
84
+ height: calc(var(--spacing, 0.25rem) * 4);
85
+ width: calc(var(--spacing, 0.25rem) * 4);
86
+ background-color: var(--color-text-primary);
216
87
  mask-position: center;
217
- -webkit-mask-size: contain;
218
88
  mask-size: contain;
219
- -webkit-mask-repeat: no-repeat;
220
89
  mask-repeat: no-repeat;
221
90
  mask-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.230169 0.363673C0.528748 0.076578 1.00353 0.0858874 1.29063 0.384466L5 4.32222L8.70938 0.384466C8.99647 0.0858875 9.47125 0.076578 9.76983 0.363673C10.0684 0.650768 10.0777 1.12555 9.79063 1.42413L5.54063 5.92413C5.39922 6.07119 5.20401 6.1543 5 6.1543C4.79599 6.1543 4.60078 6.07119 4.45938 5.92413L0.209376 1.42413C-0.0777189 1.12555 -0.0684095 0.650768 0.230169 0.363673Z" fill="currentColor"/></svg>');
222
91
  -webkit-mask-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.230169 0.363673C0.528748 0.076578 1.00353 0.0858874 1.29063 0.384466L5 4.32222L8.70938 0.384466C8.99647 0.0858875 9.47125 0.076578 9.76983 0.363673C10.0684 0.650768 10.0777 1.12555 9.79063 1.42413L5.54063 5.92413C5.39922 6.07119 5.20401 6.1543 5 6.1543C4.79599 6.1543 4.60078 6.07119 4.45938 5.92413L0.209376 1.42413C-0.0777189 1.12555 -0.0684095 0.650768 0.230169 0.363673Z" fill="currentColor"/></svg>');
@@ -227,15 +96,11 @@
227
96
  border-style: solid;
228
97
  border-color: #e5e7eb;
229
98
  display: inline-block;
230
- height: 1rem;
231
- width: 1rem;
232
- --tw-bg-opacity: 1;
233
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
234
- -webkit-mask-position: center;
99
+ height: calc(var(--spacing, 0.25rem) * 4);
100
+ width: calc(var(--spacing, 0.25rem) * 4);
101
+ background-color: var(--color-text-primary);
235
102
  mask-position: center;
236
- -webkit-mask-size: contain;
237
103
  mask-size: contain;
238
- -webkit-mask-repeat: no-repeat;
239
104
  mask-repeat: no-repeat;
240
105
  mask-image: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.23017 7.36367C5.52875 7.07658 6.00353 7.08589 6.29063 7.38447L10 11.3222L13.7094 7.38447C13.9965 7.08589 14.4713 7.07658 14.7698 7.36367C15.0684 7.65077 15.0777 8.12555 14.7906 8.42413L10.5406 12.9241C10.3992 13.0712 10.204 13.1543 10 13.1543C9.79599 13.1543 9.60078 13.0712 9.45938 12.9241L5.20938 8.42413C4.92228 8.12555 4.93159 7.65077 5.23017 7.36367Z" fill="%236B7280"/></svg>');
241
106
  -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.23017 7.36367C5.52875 7.07658 6.00353 7.08589 6.29063 7.38447L10 11.3222L13.7094 7.38447C13.9965 7.08589 14.4713 7.07658 14.7698 7.36367C15.0684 7.65077 15.0777 8.12555 14.7906 8.42413L10.5406 12.9241C10.3992 13.0712 10.204 13.1543 10 13.1543C9.79599 13.1543 9.60078 13.0712 9.45938 12.9241L5.20938 8.42413C4.92228 8.12555 4.93159 7.65077 5.23017 7.36367Z" fill="%236B7280"/></svg>');
@@ -246,19 +111,19 @@
246
111
  border-style: solid;
247
112
  border-color: #e5e7eb;
248
113
  display: inline-block;
249
- height: 1rem;
250
- width: 1rem;
251
- --tw-bg-opacity: 1;
252
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
253
- -webkit-mask-position: center;
114
+ height: calc(var(--spacing, 0.25rem) * 4);
115
+ width: calc(var(--spacing, 0.25rem) * 4);
116
+ background-color: var(--color-text-primary);
254
117
  mask-position: center;
255
- -webkit-mask-size: contain;
256
118
  mask-size: contain;
257
- -webkit-mask-repeat: no-repeat;
258
119
  mask-repeat: no-repeat;
259
120
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M11 4.26025L4 11.2603M4 4.26025L11 11.2603" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
260
121
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M11 4.26025L4 11.2603M4 4.26025L11 11.2603" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
261
122
  }
123
+ .GeckoUIMenu {
124
+ position: relative;
125
+ display: inline-block;
126
+ }
262
127
  .GeckoUIMenu__button {
263
128
  box-sizing: border-box;
264
129
  border-width: 0;
@@ -279,6 +144,31 @@
279
144
  cursor: pointer;
280
145
  background-color: transparent;
281
146
  background-image: none;
147
+ display: flex;
148
+ align-items: center;
149
+ gap: calc(var(--spacing, 0.25rem) * 2);
150
+ border-radius: var(--radius-md, 0.375rem);
151
+ border-style: var(--tw-border-style);
152
+ border-width: 1px;
153
+ border-color: var(--color-border-secondary);
154
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
155
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
156
+ font-size: var(--text-sm, 0.875rem);
157
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
158
+ color: var(--color-text-secondary);
159
+ &:enabled {
160
+ &:hover {
161
+ @media (hover: hover) {
162
+ background-color: var(--color-surface-hover);
163
+ }
164
+ }
165
+ }
166
+ &:disabled {
167
+ cursor: not-allowed;
168
+ }
169
+ &:disabled {
170
+ color: var(--color-text-disabled);
171
+ }
282
172
  }
283
173
  .GeckoUIMenu__items {
284
174
  box-sizing: border-box;
@@ -286,7 +176,7 @@
286
176
  border-style: solid;
287
177
  border-color: #e5e7eb;
288
178
  scrollbar-width: thin;
289
- scrollbar-color: rgb(var(--gecko-ui-scrollbar-thumb)) transparent;
179
+ scrollbar-color: var(--gecko-ui-scrollbar-thumb) transparent;
290
180
  scrollbar-gutter: auto;
291
181
  }
292
182
  .GeckoUIMenu__items -webkit-scrollbar {
@@ -296,29 +186,37 @@
296
186
  background: transparent;
297
187
  }
298
188
  .GeckoUIMenu__items -webkit-scrollbar-thumb {
299
- background: rgb(var(--gecko-ui-scrollbar-thumb));
189
+ background: var(--gecko-ui-scrollbar-thumb);
300
190
  }
301
191
  .GeckoUIMenu__items -webkit-scrollbar-thumb:hover {
302
- background: rgb(var(--gecko-ui-scrollbar-thumb-hover));
192
+ background: var(--gecko-ui-scrollbar-thumb-hover);
303
193
  }
304
194
  .GeckoUIMenu__items {
305
195
  z-index: 50;
306
196
  display: flex;
307
197
  flex-direction: column;
308
198
  justify-content: flex-start;
309
- border-radius: 0.375rem;
199
+ border-radius: var(--radius-md, 0.375rem);
200
+ border-style: var(--tw-border-style);
310
201
  border-width: 1px;
311
- --tw-border-opacity: 1;
312
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
313
- --tw-bg-opacity: 1;
314
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
315
- padding: 0.5rem;
316
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
317
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
202
+ border-color: var(--color-border-secondary);
203
+ background-color: var(--color-surface-primary);
204
+ padding: calc(var(--spacing, 0.25rem) * 1);
205
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
318
206
  box-shadow:
319
- var(--tw-ring-offset-shadow, 0 0 #0000),
320
- var(--tw-ring-shadow, 0 0 #0000),
207
+ var(--tw-inset-shadow),
208
+ var(--tw-inset-ring-shadow),
209
+ var(--tw-ring-offset-shadow),
210
+ var(--tw-ring-shadow),
321
211
  var(--tw-shadow);
212
+ --tw-outline-style: none;
213
+ outline-style: none;
214
+ }
215
+ .GeckoUIMenu__scroll-container {
216
+ display: flex;
217
+ max-height: 300px;
218
+ flex-direction: column;
219
+ overflow-y: auto;
322
220
  }
323
221
  .GeckoUIMenu__item {
324
222
  box-sizing: border-box;
@@ -341,89 +239,120 @@
341
239
  background-image: none;
342
240
  cursor: pointer;
343
241
  border-radius: 0.25rem;
344
- padding-left: 0.75rem;
345
- padding-right: 0.75rem;
346
- padding-top: 0.5rem;
347
- padding-bottom: 0.5rem;
242
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
243
+ padding-block: calc(var(--spacing, 0.25rem) * 2);
348
244
  text-align: left;
349
- font-size: 0.875rem;
350
- line-height: 1.25rem;
351
- --tw-text-opacity: 1;
352
- color: rgb(var(--gecko-ui-text-secondary) / var(--tw-text-opacity, 1));
245
+ font-size: var(--text-sm, 0.875rem);
246
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
247
+ text-wrap: nowrap;
248
+ color: var(--color-text-secondary);
249
+ --tw-outline-style: none;
250
+ outline-style: none;
251
+ }
252
+ .GeckoUIMenu__item:hover,
253
+ .GeckoUIMenu__item:focus {
254
+ background-color: var(--color-surface-hover-strong);
255
+ }
256
+ .GeckoUIMenu__item[data-disabled] {
257
+ cursor: not-allowed;
258
+ color: var(--color-text-disabled);
353
259
  }
354
- .GeckoUIMenu__item:hover {
355
- --tw-bg-opacity: 1;
356
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
260
+ .GeckoUIMenu__item[data-disabled]:hover,
261
+ .GeckoUIMenu__item[data-disabled]:focus {
262
+ background-color: transparent;
357
263
  }
358
264
  .GeckoUIRadio {
359
- outline-width: 2px;
265
+ outline: none;
266
+ }
267
+ .GeckoUIRadio:focus-visible {
268
+ outline: 2px solid var(--color-primary-300);
360
269
  outline-offset: 2px;
361
- outline-color: rgb(var(--gecko-ui-primary-300) / 1);
270
+ }
271
+ .GeckoUIRadio {
362
272
  position: relative;
363
273
  display: inline-flex;
364
274
  align-items: center;
365
275
  justify-content: center;
366
- height: 1rem;
367
- width: 1rem;
276
+ height: calc(var(--spacing, 0.25rem) * 4);
277
+ width: calc(var(--spacing, 0.25rem) * 4);
368
278
  cursor: pointer;
369
- -webkit-appearance: none;
370
- -moz-appearance: none;
371
279
  appearance: none;
372
- border-radius: 9999px;
280
+ border-radius: calc(infinity * 1px);
373
281
  background-color: transparent;
282
+ border-style: var(--tw-border-style);
374
283
  border-width: 0.1em;
375
- --tw-border-opacity: 1;
376
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
284
+ border-color: var(--color-border-secondary);
377
285
  transition-property:
378
286
  color,
379
287
  background-color,
380
288
  border-color,
289
+ outline-color,
381
290
  text-decoration-color,
382
291
  fill,
383
- stroke;
292
+ stroke,
293
+ --tw-gradient-from,
294
+ --tw-gradient-via,
295
+ --tw-gradient-to;
296
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
297
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
298
+ --tw-duration: 120ms;
384
299
  transition-duration: 120ms;
385
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
300
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
301
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
386
302
  }
387
303
  .GeckoUIRadio:disabled {
388
304
  cursor: not-allowed;
389
- --tw-border-opacity: 1;
390
- border-color: rgb(var(--gecko-ui-border-disabled) / var(--tw-border-opacity, 1));
305
+ border-color: var(--color-border-disabled);
391
306
  }
392
307
  .GeckoUIRadio:enabled:hover {
393
- --tw-border-opacity: 1;
394
- border-color: rgb(var(--gecko-ui-primary-400) / var(--tw-border-opacity, 1));
308
+ border-color: var(--color-primary-400);
395
309
  }
396
310
  .GeckoUIRadio:checked {
397
- --tw-border-opacity: 1;
398
- border-color: rgb(var(--gecko-ui-primary-600) / var(--tw-border-opacity, 1));
311
+ border-color: var(--color-primary-600);
399
312
  background-color: transparent;
400
313
  border-width: 0.1em;
401
314
  }
402
315
  .GeckoUIRadio:disabled:checked {
403
- border-color: rgb(var(--gecko-ui-primary-600) / 0.5);
316
+ border-color: color-mix(in srgb, oklch(0.5461 0.2152 262.88) 50%, transparent);
317
+ @supports (color: color-mix(in lab, red, red)) {
318
+ border-color: color-mix(in oklab, var(--color-primary-600) 50%, transparent);
319
+ }
404
320
  }
405
321
  .GeckoUIRadio:disabled:checked:after {
406
- box-shadow: inset 1em 1em rgba(var(--gecko-ui-primary-600)/0.5);
322
+ box-shadow: inset 1em 1em color-mix(in srgb, oklch(0.5461 0.2152 262.88) 50%, transparent);
323
+ @supports (color: color-mix(in lab, red, red)) {
324
+ box-shadow: inset 1em 1em color-mix(in oklch, var(--color-primary-600) 50%, transparent);
325
+ }
407
326
  }
408
327
  .GeckoUIRadio:after {
409
328
  content: "";
410
329
  position: absolute;
411
330
  height: 0.5em;
412
331
  width: 0.5em;
413
- border-radius: 9999px;
414
- --tw-scale-x: 0;
415
- --tw-scale-y: 0;
416
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
417
- transition-property: transform;
332
+ border-radius: calc(infinity * 1px);
333
+ --tw-scale-x: 0%;
334
+ --tw-scale-y: 0%;
335
+ --tw-scale-z: 0%;
336
+ scale: var(--tw-scale-x) var(--tw-scale-y);
337
+ transition-property:
338
+ transform,
339
+ translate,
340
+ scale,
341
+ rotate;
342
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
343
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
344
+ --tw-duration: 120ms;
418
345
  transition-duration: 120ms;
419
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
420
- box-shadow: inset 1em 1em rgb(var(--gecko-ui-primary-600));
346
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
347
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
348
+ box-shadow: inset 1em 1em var(--color-primary-600);
421
349
  }
422
350
  .GeckoUIRadio:checked:after {
423
- --tw-scale-x: 1;
424
- --tw-scale-y: 1;
425
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
426
- box-shadow: inset 1em 1em rgb(var(--gecko-ui-primary-600));
351
+ --tw-scale-x: 100%;
352
+ --tw-scale-y: 100%;
353
+ --tw-scale-z: 100%;
354
+ scale: var(--tw-scale-x) var(--tw-scale-y);
355
+ box-shadow: inset 1em 1em var(--color-primary-600);
427
356
  }
428
357
  .GeckoUILabel {
429
358
  box-sizing: border-box;
@@ -434,16 +363,15 @@
434
363
  min-height: 24px;
435
364
  width: auto;
436
365
  align-items: center;
437
- gap: 0.25rem;
438
- font-size: 0.875rem;
439
- line-height: 1.25rem;
440
- font-weight: 500;
441
- --tw-text-opacity: 1;
442
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
366
+ gap: calc(var(--spacing, 0.25rem) * 1);
367
+ font-size: var(--text-sm, 0.875rem);
368
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
369
+ --tw-font-weight: var(--font-weight-medium, 500);
370
+ font-weight: var(--font-weight-medium, 500);
371
+ color: var(--color-text-muted);
443
372
  }
444
373
  .GeckoUILabel__required-indicator {
445
- --tw-text-opacity: 1;
446
- color: rgb(248 113 113 / var(--tw-text-opacity, 1));
374
+ color: var(--color-red-400, oklch(70.4% 0.191 22.216));
447
375
  }
448
376
  .GeckoUILabel__tooltip-icon {
449
377
  box-sizing: border-box;
@@ -451,15 +379,11 @@
451
379
  border-style: solid;
452
380
  border-color: #e5e7eb;
453
381
  display: inline-block;
454
- height: 1rem;
455
- width: 1rem;
456
- --tw-bg-opacity: 1;
457
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
458
- -webkit-mask-position: center;
382
+ height: calc(var(--spacing, 0.25rem) * 4);
383
+ width: calc(var(--spacing, 0.25rem) * 4);
384
+ background-color: var(--color-text-primary);
459
385
  mask-position: center;
460
- -webkit-mask-size: contain;
461
386
  mask-size: contain;
462
- -webkit-mask-repeat: no-repeat;
463
387
  mask-repeat: no-repeat;
464
388
  mask-image: url('data:image/svg+xml,<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z" clip-rule="evenodd"/></svg>');
465
389
  -webkit-mask-image: url('data:image/svg+xml,<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z" clip-rule="evenodd"/></svg>');
@@ -471,35 +395,32 @@
471
395
  border-color: #e5e7eb;
472
396
  position: relative;
473
397
  display: flex;
474
- min-height: 2.5rem;
398
+ min-height: calc(var(--spacing, 0.25rem) * 10);
475
399
  width: 100%;
476
400
  align-items: center;
477
- gap: 0.5rem;
478
- border-radius: 0.375rem;
401
+ gap: calc(var(--spacing, 0.25rem) * 2);
402
+ border-radius: var(--radius-md, 0.375rem);
403
+ border-style: var(--tw-border-style);
479
404
  border-width: 1px;
480
- --tw-border-opacity: 1;
481
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
482
- padding-left: 0.75rem;
483
- padding-right: 0.75rem;
405
+ border-color: var(--color-border-secondary);
406
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
484
407
  }
485
408
  .GeckoUIInput:has(input:-webkit-autofill) {
486
- background: rgb(var(--gecko-ui-surface-autofill)) !important;
409
+ background: var(--color-surface-autofill) !important;
487
410
  }
488
- .GeckoUIInput--disabled {
411
+ .GeckoUIInput[data-state=disabled] {
489
412
  cursor: not-allowed;
490
- --tw-bg-opacity: 1;
491
- background-color: rgb(var(--gecko-ui-surface-disabled) / var(--tw-bg-opacity, 1));
413
+ background-color: var(--color-surface-disabled);
414
+ color: var(--color-text-disabled);
492
415
  }
493
- .GeckoUIInput--enabled {
416
+ .GeckoUIInput[data-state=enabled] {
494
417
  cursor: text;
495
418
  }
496
- .GeckoUIInput--enabled:focus-within {
497
- --tw-border-opacity: 1;
498
- border-color: rgb(var(--gecko-ui-primary-400) / var(--tw-border-opacity, 1));
419
+ .GeckoUIInput[data-state=enabled]:focus-within {
420
+ border-color: var(--color-primary-400);
499
421
  }
500
- .GeckoUIInput--enabled:hover {
501
- --tw-border-opacity: 1;
502
- border-color: rgb(var(--gecko-ui-primary-400) / var(--tw-border-opacity, 1));
422
+ .GeckoUIInput[data-state=enabled]:hover {
423
+ border-color: var(--color-primary-400);
503
424
  }
504
425
  .GeckoUIInput__input {
505
426
  box-sizing: border-box;
@@ -518,28 +439,23 @@
518
439
  padding: 0;
519
440
  text-transform: none;
520
441
  width: 100%;
521
- flex: 1 1 0%;
442
+ flex: 1;
522
443
  align-self: stretch;
523
444
  background-color: transparent;
524
- font-size: 0.875rem;
525
- line-height: 1.25rem;
526
- outline: 2px solid transparent;
527
- outline-offset: 2px;
528
- }
529
- .GeckoUIInput__input::-moz-placeholder {
530
- font-size: 0.875rem;
531
- line-height: 1.25rem;
532
- --tw-text-opacity: 1;
533
- color: rgb(var(--gecko-ui-text-placeholder) / var(--tw-text-opacity, 1));
534
- }
535
- .GeckoUIInput__input::placeholder {
536
- font-size: 0.875rem;
537
- line-height: 1.25rem;
538
- --tw-text-opacity: 1;
539
- color: rgb(var(--gecko-ui-text-placeholder) / var(--tw-text-opacity, 1));
540
- }
541
- .GeckoUIInput__input:disabled {
542
- cursor: not-allowed;
445
+ font-size: var(--text-sm, 0.875rem);
446
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
447
+ --tw-outline-style: none;
448
+ outline-style: none;
449
+ &::placeholder {
450
+ font-size: var(--text-sm, 0.875rem);
451
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
452
+ }
453
+ &::placeholder {
454
+ color: var(--color-text-placeholder);
455
+ }
456
+ &:disabled {
457
+ cursor: not-allowed;
458
+ }
543
459
  }
544
460
  .GeckoUIAlert {
545
461
  box-sizing: border-box;
@@ -548,45 +464,33 @@
548
464
  border-color: #e5e7eb;
549
465
  display: flex;
550
466
  flex-direction: column;
551
- gap: 0.125rem;
552
- border-radius: 0.5rem;
467
+ gap: calc(var(--spacing, 0.25rem) * 0.5);
468
+ border-radius: var(--radius-lg, 0.5rem);
469
+ border-style: var(--tw-border-style);
553
470
  border-width: 1px;
554
- --tw-border-opacity: 1;
555
- border-color: rgb(var(--gecko-ui-border-primary) / var(--tw-border-opacity, 1));
556
- --tw-bg-opacity: 1;
557
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
558
- padding-left: 1rem;
559
- padding-right: 1rem;
560
- padding-top: 0.75rem;
561
- padding-bottom: 0.75rem;
562
- }
563
- .GeckoUIAlert--error {
564
- --tw-text-opacity: 1;
565
- color: rgb(239 68 68 / var(--tw-text-opacity, 1));
566
- }
567
- .GeckoUIAlert--warning {
568
- --tw-text-opacity: 1;
569
- color: rgb(249 115 22 / var(--tw-text-opacity, 1));
570
- }
571
- .GeckoUIAlert--info {
572
- --tw-text-opacity: 1;
573
- color: rgb(59 130 246 / var(--tw-text-opacity, 1));
574
- }
575
- .GeckoUIAlert--success {
576
- --tw-text-opacity: 1;
577
- color: rgb(34 197 94 / var(--tw-text-opacity, 1));
578
- }
579
- .GeckoUIAlert--default {
580
- --tw-text-opacity: 1;
581
- color: rgb(var(--gecko-ui-text-primary) / var(--tw-text-opacity, 1));
471
+ border-color: var(--color-border-primary);
472
+ background-color: var(--color-surface-primary);
473
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
474
+ padding-block: calc(var(--spacing, 0.25rem) * 3);
582
475
  }
583
- .GeckoUIAlert {
476
+ .GeckoUIAlert[data-variant=error] {
477
+ color: var(--color-red-500, oklch(63.7% 0.237 25.331));
478
+ }
479
+ .GeckoUIAlert[data-variant=warning] {
480
+ color: var(--color-orange-500, oklch(70.5% 0.213 47.604));
481
+ }
482
+ .GeckoUIAlert[data-variant=info] {
483
+ color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
484
+ }
485
+ .GeckoUIAlert[data-variant=success] {
486
+ color: var(--color-green-500, oklch(72.3% 0.219 149.579));
487
+ }
488
+ .GeckoUIAlert[data-variant=default] {
489
+ color: var(--color-text-primary);
584
490
  }
585
- .GeckoUIAlert--condensed {
586
- padding-left: 1rem;
587
- padding-right: 1rem;
588
- padding-top: 0.5rem;
589
- padding-bottom: 0.5rem;
491
+ .GeckoUIAlert[data-condensed] {
492
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
493
+ padding-block: calc(var(--spacing, 0.25rem) * 2);
590
494
  }
591
495
  .GeckoUIAlert__icon {
592
496
  box-sizing: border-box;
@@ -594,60 +498,51 @@
594
498
  border-style: solid;
595
499
  border-color: #e5e7eb;
596
500
  display: inline-block;
597
- --tw-bg-opacity: 1;
598
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
599
- -webkit-mask-position: center;
501
+ background-color: var(--color-text-primary);
600
502
  mask-position: center;
601
- -webkit-mask-size: contain;
602
503
  mask-size: contain;
603
- -webkit-mask-repeat: no-repeat;
604
504
  mask-repeat: no-repeat;
605
- height: 1rem;
606
- width: 1rem;
505
+ height: calc(var(--spacing, 0.25rem) * 4);
506
+ width: calc(var(--spacing, 0.25rem) * 4);
607
507
  }
608
- .GeckoUIAlert__icon--error {
609
- --tw-bg-opacity: 1;
610
- background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
508
+ .GeckoUIAlert__icon[data-variant=error] {
509
+ background-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
611
510
  mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM6.28033 5.21967C5.98744 4.92678 5.51256 4.92678 5.21967 5.21967C4.92678 5.51256 4.92678 5.98744 5.21967 6.28033L6.93934 8L5.21967 9.71967C4.92678 10.0126 4.92678 10.4874 5.21967 10.7803C5.51256 11.0732 5.98744 11.0732 6.28033 10.7803L8 9.06066L9.71967 10.7803C10.0126 11.0732 10.4874 11.0732 10.7803 10.7803C11.0732 10.4874 11.0732 10.0126 10.7803 9.71967L9.06066 8L10.7803 6.28033C11.0732 5.98744 11.0732 5.51256 10.7803 5.21967C10.4874 4.92678 10.0126 4.92678 9.71967 5.21967L8 6.93934L6.28033 5.21967Z" fill="%23F87171"/></svg>');
612
511
  -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM6.28033 5.21967C5.98744 4.92678 5.51256 4.92678 5.21967 5.21967C4.92678 5.51256 4.92678 5.98744 5.21967 6.28033L6.93934 8L5.21967 9.71967C4.92678 10.0126 4.92678 10.4874 5.21967 10.7803C5.51256 11.0732 5.98744 11.0732 6.28033 10.7803L8 9.06066L9.71967 10.7803C10.0126 11.0732 10.4874 11.0732 10.7803 10.7803C11.0732 10.4874 11.0732 10.0126 10.7803 9.71967L9.06066 8L10.7803 6.28033C11.0732 5.98744 11.0732 5.51256 10.7803 5.21967C10.4874 4.92678 10.0126 4.92678 9.71967 5.21967L8 6.93934L6.28033 5.21967Z" fill="%23F87171"/></svg>');
613
512
  }
614
- .GeckoUIAlert__icon--warning {
615
- --tw-bg-opacity: 1;
616
- background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
513
+ .GeckoUIAlert__icon[data-variant=warning] {
514
+ background-color: var(--color-orange-500, oklch(70.5% 0.213 47.604));
617
515
  mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.41421 3 8.75 3.33579 8.75 3.75V8.25C8.75 8.66421 8.41421 9 8 9C7.58579 9 7.25 8.66421 7.25 8.25V3.75C7.25 3.33579 7.58579 3 8 3ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44771 11 7 11.4477 7 12C7 12.5523 7.44771 13 8 13Z" fill="%23FACC15"/></svg>');
618
516
  -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.41421 3 8.75 3.33579 8.75 3.75V8.25C8.75 8.66421 8.41421 9 8 9C7.58579 9 7.25 8.66421 7.25 8.25V3.75C7.25 3.33579 7.58579 3 8 3ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44771 11 7 11.4477 7 12C7 12.5523 7.44771 13 8 13Z" fill="%23FACC15"/></svg>');
619
517
  }
620
- .GeckoUIAlert__icon--info {
621
- --tw-bg-opacity: 1;
622
- background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
518
+ .GeckoUIAlert__icon[data-variant=info] {
519
+ background-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
623
520
  mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 4C9 4.55228 8.55228 5 8 5C7.44771 5 7 4.55228 7 4C7 3.44772 7.44771 3 8 3C8.55228 3 9 3.44772 9 4ZM7 7C6.58579 7 6.25 7.33579 6.25 7.75C6.25 8.16421 6.58579 8.5 7 8.5H7.25338C7.41332 8.5 7.53213 8.6481 7.49743 8.80423L7.03829 10.8704C6.79542 11.9633 7.62706 13 8.74662 13H9C9.41421 13 9.75 12.6642 9.75 12.25C9.75 11.8358 9.41421 11.5 9 11.5H8.74662C8.58668 11.5 8.46787 11.3519 8.50257 11.1958L8.96171 9.12963C9.20458 8.03673 8.37294 7 7.25338 7H7Z" fill="%2355B1F2"/></svg>');
624
521
  -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 4C9 4.55228 8.55228 5 8 5C7.44771 5 7 4.55228 7 4C7 3.44772 7.44771 3 8 3C8.55228 3 9 3.44772 9 4ZM7 7C6.58579 7 6.25 7.33579 6.25 7.75C6.25 8.16421 6.58579 8.5 7 8.5H7.25338C7.41332 8.5 7.53213 8.6481 7.49743 8.80423L7.03829 10.8704C6.79542 11.9633 7.62706 13 8.74662 13H9C9.41421 13 9.75 12.6642 9.75 12.25C9.75 11.8358 9.41421 11.5 9 11.5H8.74662C8.58668 11.5 8.46787 11.3519 8.50257 11.1958L8.96171 9.12963C9.20458 8.03673 8.37294 7 7.25338 7H7Z" fill="%2355B1F2"/></svg>');
625
522
  }
626
- .GeckoUIAlert__icon--success {
627
- --tw-bg-opacity: 1;
628
- background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
523
+ .GeckoUIAlert__icon[data-variant=success] {
524
+ background-color: var(--color-green-500, oklch(72.3% 0.219 149.579));
629
525
  mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.8566 6.19113C12.1002 5.85614 12.0261 5.38708 11.6911 5.14345C11.3561 4.89982 10.8871 4.97388 10.6434 5.30887L7.15969 10.099L5.28033 8.21967C4.98744 7.92678 4.51256 7.92678 4.21967 8.21967C3.92678 8.51256 3.92678 8.98744 4.21967 9.28033L6.71967 11.7803C6.87477 11.9354 7.08999 12.0149 7.30867 11.9977C7.52734 11.9805 7.72754 11.8685 7.85655 11.6911L11.8566 6.19113Z" fill="%2322C55E"/></svg>');
630
526
  -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.8566 6.19113C12.1002 5.85614 12.0261 5.38708 11.6911 5.14345C11.3561 4.89982 10.8871 4.97388 10.6434 5.30887L7.15969 10.099L5.28033 8.21967C4.98744 7.92678 4.51256 7.92678 4.21967 8.21967C3.92678 8.51256 3.92678 8.98744 4.21967 9.28033L6.71967 11.7803C6.87477 11.9354 7.08999 12.0149 7.30867 11.9977C7.52734 11.9805 7.72754 11.8685 7.85655 11.6911L11.8566 6.19113Z" fill="%2322C55E"/></svg>');
631
527
  }
632
- .GeckoUIAlert__icon--default {
633
- --tw-bg-opacity: 1;
634
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
528
+ .GeckoUIAlert__icon[data-variant=default] {
529
+ background-color: var(--color-text-primary);
635
530
  mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.3996 6.99961C13.3996 10.5342 10.5342 13.3996 6.99961 13.3996C3.46499 13.3996 0.599609 10.5342 0.599609 6.99961C0.599609 3.46499 3.46499 0.599609 6.99961 0.599609C10.5342 0.599609 13.3996 3.46499 13.3996 6.99961ZM6.99961 2.99961C7.33098 2.99961 7.59961 3.26824 7.59961 3.59961V7.19961C7.59961 7.53098 7.33098 7.79961 6.99961 7.79961C6.66824 7.79961 6.39961 7.53098 6.39961 7.19961V3.59961C6.39961 3.26824 6.66824 2.99961 6.99961 2.99961ZM6.99961 10.9996C7.44144 10.9996 7.79961 10.6414 7.79961 10.1996C7.79961 9.75778 7.44144 9.39961 6.99961 9.39961C6.55778 9.39961 6.19961 9.75778 6.19961 10.1996C6.19961 10.6414 6.55778 10.9996 6.99961 10.9996Z" fill="%23DC2626"/></svg>');
636
531
  -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.3996 6.99961C13.3996 10.5342 10.5342 13.3996 6.99961 13.3996C3.46499 13.3996 0.599609 10.5342 0.599609 6.99961C0.599609 3.46499 3.46499 0.599609 6.99961 0.599609C10.5342 0.599609 13.3996 3.46499 13.3996 6.99961ZM6.99961 2.99961C7.33098 2.99961 7.59961 3.26824 7.59961 3.59961V7.19961C7.59961 7.53098 7.33098 7.79961 6.99961 7.79961C6.66824 7.79961 6.39961 7.53098 6.39961 7.19961V3.59961C6.39961 3.26824 6.66824 2.99961 6.99961 2.99961ZM6.99961 10.9996C7.44144 10.9996 7.79961 10.6414 7.79961 10.1996C7.79961 9.75778 7.44144 9.39961 6.99961 9.39961C6.55778 9.39961 6.19961 9.75778 6.19961 10.1996C6.19961 10.6414 6.55778 10.9996 6.99961 10.9996Z" fill="%23DC2626"/></svg>');
637
532
  }
638
- .GeckoUIAlert--condensed .GeckoUIAlert__icon {
639
- height: 0.875rem;
640
- width: 0.875rem;
533
+ .GeckoUIAlert[data-condensed] .GeckoUIAlert__icon {
534
+ height: calc(var(--spacing, 0.25rem) * 3.5);
535
+ width: calc(var(--spacing, 0.25rem) * 3.5);
641
536
  }
642
537
  .GeckoUIAlert__body {
643
538
  display: flex;
644
539
  align-items: center;
645
- gap: 0.75rem;
540
+ gap: calc(var(--spacing, 0.25rem) * 3);
646
541
  }
647
542
  .GeckoUIAlert__title {
648
- flex: 1 1 0%;
649
- font-size: 0.875rem;
650
- line-height: 1.25rem;
543
+ flex: 1;
544
+ font-size: var(--text-sm, 0.875rem);
545
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
651
546
  color: inherit;
652
547
  }
653
548
  .GeckoUIAlert__remove-button {
@@ -670,169 +565,186 @@
670
565
  cursor: pointer;
671
566
  background-image: none;
672
567
  margin-left: auto;
673
- width: -moz-fit-content;
674
568
  width: fit-content;
675
569
  background-color: transparent;
676
- padding: 0px;
570
+ padding: calc(var(--spacing, 0.25rem) * 0);
677
571
  }
678
572
  .GeckoUIAlert__remove-button__icon {
679
573
  box-sizing: border-box;
680
574
  border-width: 0;
681
575
  border-style: solid;
682
576
  border-color: #e5e7eb;
683
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
684
- -webkit-mask-position: center;
577
+ height: calc(var(--spacing, 0.25rem) * 4);
578
+ width: calc(var(--spacing, 0.25rem) * 4);
579
+ background-color: var(--color-text-primary);
685
580
  mask-position: center;
686
- -webkit-mask-size: contain;
687
581
  mask-size: contain;
688
- -webkit-mask-repeat: no-repeat;
689
582
  mask-repeat: no-repeat;
690
583
  display: inline-block;
691
- height: 0.625rem;
692
- width: 0.625rem;
693
- --tw-bg-opacity: 1;
694
- background-color: rgb(var(--gecko-ui-text-muted) / var(--tw-bg-opacity, 1));
584
+ height: calc(var(--spacing, 0.25rem) * 2.5);
585
+ width: calc(var(--spacing, 0.25rem) * 2.5);
586
+ background-color: var(--color-text-muted);
695
587
  mask-image: url('data:image/svg+xml,<svg fill="currentColor" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L3.93934 5L0.21967 8.71967C-0.0732233 9.01256 -0.0732233 9.48744 0.21967 9.78033C0.512563 10.0732 0.987437 10.0732 1.28033 9.78033L5 6.06066L8.71967 9.78033C9.01256 10.0732 9.48744 10.0732 9.78033 9.78033C10.0732 9.48744 10.0732 9.01256 9.78033 8.71967L6.06066 5L9.78033 1.28033C10.0732 0.987437 10.0732 0.512563 9.78033 0.21967C9.48744 -0.0732233 9.01256 -0.0732233 8.71967 0.21967L5 3.93934L1.28033 0.21967Z" fill="currentColor"></path></svg>');
696
588
  -webkit-mask-image: url('data:image/svg+xml,<svg fill="currentColor" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L3.93934 5L0.21967 8.71967C-0.0732233 9.01256 -0.0732233 9.48744 0.21967 9.78033C0.512563 10.0732 0.987437 10.0732 1.28033 9.78033L5 6.06066L8.71967 9.78033C9.01256 10.0732 9.48744 10.0732 9.78033 9.78033C10.0732 9.48744 10.0732 9.01256 9.78033 8.71967L6.06066 5L9.78033 1.28033C10.0732 0.987437 10.0732 0.512563 9.78033 0.21967C9.48744 -0.0732233 9.01256 -0.0732233 8.71967 0.21967L5 3.93934L1.28033 0.21967Z" fill="currentColor"></path></svg>');
697
589
  }
698
590
  .GeckoUIAlert__description {
699
- padding-left: 1.75rem;
591
+ padding-left: calc(var(--spacing, 0.25rem) * 7);
700
592
  text-align: start;
701
- font-size: 0.75rem;
702
- line-height: 1rem;
703
- --tw-text-opacity: 1;
704
- color: rgb(var(--gecko-ui-text-secondary) / var(--tw-text-opacity, 1));
593
+ font-size: var(--text-xs, 0.75rem);
594
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
595
+ color: var(--color-text-secondary);
705
596
  }
706
597
  .GeckoUISwitch {
707
- box-sizing: border-box;
708
- border-width: 0;
709
- border-style: solid;
710
- border-color: #e5e7eb;
711
- font-family: inherit;
712
- font-feature-settings: inherit;
713
- font-variation-settings: inherit;
714
- font-size: 100%;
715
- font-weight: inherit;
716
- line-height: inherit;
717
- letter-spacing: inherit;
718
- color: inherit;
719
- margin: 0;
720
- padding: 0;
721
- text-transform: none;
722
- -webkit-appearance: button;
723
- background-color: transparent;
724
- background-image: none;
725
- outline-width: 2px;
726
- outline-offset: 2px;
727
- outline-color: rgb(var(--gecko-ui-primary-300) / 1);
728
598
  position: relative;
729
599
  display: inline-flex;
730
600
  flex-shrink: 0;
731
601
  cursor: pointer;
732
602
  align-items: center;
733
- border-radius: 9999px;
603
+ border-radius: calc(infinity * 1px);
604
+ border-style: var(--tw-border-style);
734
605
  border-width: 1px;
735
606
  border-color: transparent;
736
- --tw-bg-opacity: 1;
737
- background-color: rgb(var(--gecko-ui-surface-active) / var(--tw-bg-opacity, 1));
607
+ background-color: var(--color-surface-active);
738
608
  transition-property:
739
609
  color,
740
610
  background-color,
741
611
  border-color,
612
+ outline-color,
742
613
  text-decoration-color,
743
614
  fill,
744
- stroke;
615
+ stroke,
616
+ --tw-gradient-from,
617
+ --tw-gradient-via,
618
+ --tw-gradient-to;
619
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
620
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
621
+ --tw-duration: 200ms;
745
622
  transition-duration: 200ms;
746
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
623
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
624
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
747
625
  }
748
- .GeckoUISwitch:focus-visible {
749
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
750
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
751
- box-shadow:
752
- var(--tw-ring-offset-shadow),
753
- var(--tw-ring-shadow),
754
- var(--tw-shadow, 0 0 #0000);
626
+ .GeckoUISwitch:has(input:checked) {
627
+ background-color: var(--color-primary-600);
755
628
  }
756
- .GeckoUISwitch:disabled {
629
+ .GeckoUISwitch:has(input:disabled) {
757
630
  cursor: not-allowed;
758
- opacity: 0.5;
631
+ opacity: 50%;
759
632
  }
760
- .GeckoUISwitch[data-checked] {
761
- --tw-bg-opacity: 1;
762
- background-color: rgb(var(--gecko-ui-primary-600) / var(--tw-bg-opacity, 1));
633
+ .GeckoUISwitch:has(input:focus-visible) {
634
+ outline: 2px solid var(--color-primary-300);
635
+ outline-offset: 2px;
763
636
  }
764
- .GeckoUISwitch--size-sm {
765
- height: 1rem;
766
- width: 1.75rem;
637
+ .GeckoUISwitch:has(input:hover) {
638
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
639
+ box-shadow:
640
+ var(--tw-inset-shadow),
641
+ var(--tw-inset-ring-shadow),
642
+ var(--tw-ring-offset-shadow),
643
+ var(--tw-ring-shadow),
644
+ var(--tw-shadow);
645
+ --tw-ring-color: var(--color-primary-400);
767
646
  }
768
- .GeckoUISwitch--size-md {
769
- height: 1.5rem;
770
- width: 2.75rem;
647
+ .GeckoUISwitch[data-size=sm] {
648
+ height: calc(var(--spacing, 0.25rem) * 4);
649
+ width: calc(var(--spacing, 0.25rem) * 7);
650
+ }
651
+ .GeckoUISwitch[data-size=md] {
652
+ height: calc(var(--spacing, 0.25rem) * 6);
653
+ width: calc(var(--spacing, 0.25rem) * 11);
771
654
  }
772
655
  .GeckoUISwitch:hover {
773
- --tw-ring-opacity: 1;
774
- --tw-ring-color: rgb(var(--gecko-ui-primary-400) / var(--tw-ring-opacity, 1));
656
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
657
+ box-shadow:
658
+ var(--tw-inset-shadow),
659
+ var(--tw-inset-ring-shadow),
660
+ var(--tw-ring-offset-shadow),
661
+ var(--tw-ring-shadow),
662
+ var(--tw-shadow);
663
+ --tw-ring-color: var(--color-primary-400);
775
664
  }
776
- .GeckoUISwitch:hover:enabled {
777
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
778
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
665
+ .GeckoUISwitch:has(input:disabled):hover {
666
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
779
667
  box-shadow:
668
+ var(--tw-inset-shadow),
669
+ var(--tw-inset-ring-shadow),
780
670
  var(--tw-ring-offset-shadow),
781
671
  var(--tw-ring-shadow),
782
- var(--tw-shadow, 0 0 #0000);
672
+ var(--tw-shadow);
673
+ }
674
+ .GeckoUISwitch__input {
675
+ position: absolute;
676
+ width: 1px;
677
+ height: 1px;
678
+ padding: 0;
679
+ margin: -1px;
680
+ overflow: hidden;
681
+ clip-path: inset(50%);
682
+ white-space: nowrap;
683
+ border-width: 0;
783
684
  }
784
685
  .GeckoUISwitch__thumb {
785
686
  pointer-events: none;
786
687
  display: inline-block;
787
688
  aspect-ratio: 1 / 1;
788
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
789
- border-radius: 9999px;
790
- --tw-bg-opacity: 1;
791
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
792
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
793
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
794
- box-shadow:
795
- var(--tw-ring-offset-shadow, 0 0 #0000),
796
- var(--tw-ring-shadow, 0 0 #0000),
797
- var(--tw-shadow);
798
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
799
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
689
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
690
+ border-radius: calc(infinity * 1px);
691
+ background-color: var(--color-surface-primary);
692
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
693
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
800
694
  box-shadow:
695
+ var(--tw-inset-shadow),
696
+ var(--tw-inset-ring-shadow),
801
697
  var(--tw-ring-offset-shadow),
802
698
  var(--tw-ring-shadow),
803
- var(--tw-shadow, 0 0 #0000);
699
+ var(--tw-shadow);
804
700
  transition-property:
805
701
  color,
806
702
  background-color,
807
703
  border-color,
704
+ outline-color,
808
705
  text-decoration-color,
809
706
  fill,
810
707
  stroke,
708
+ --tw-gradient-from,
709
+ --tw-gradient-via,
710
+ --tw-gradient-to,
811
711
  opacity,
812
712
  box-shadow,
813
713
  transform,
714
+ translate,
715
+ scale,
716
+ rotate,
814
717
  filter,
815
- backdrop-filter;
718
+ -webkit-backdrop-filter,
719
+ backdrop-filter,
720
+ display,
721
+ content-visibility,
722
+ overlay,
723
+ pointer-events;
724
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
725
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
726
+ --tw-duration: 200ms;
816
727
  transition-duration: 200ms;
817
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
728
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
729
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
818
730
  }
819
- .GeckoUISwitch__thumb--size-sm {
820
- width: 0.875rem;
821
- --tw-translate-x: 0px;
822
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
731
+ .GeckoUISwitch__thumb[data-size=sm] {
732
+ width: calc(var(--spacing, 0.25rem) * 3.5);
733
+ --tw-translate-x: calc(var(--spacing, 0.25rem) * 0);
734
+ translate: var(--tw-translate-x) var(--tw-translate-y);
823
735
  }
824
- .group[data-checked] .GeckoUISwitch__thumb--size-sm {
825
- --tw-translate-x: 0.75rem;
826
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
736
+ .GeckoUISwitch__thumb[data-size=md] {
737
+ width: calc(var(--spacing, 0.25rem) * 5);
738
+ --tw-translate-x: calc(var(--spacing, 0.25rem) * 0.5);
739
+ translate: var(--tw-translate-x) var(--tw-translate-y);
827
740
  }
828
- .GeckoUISwitch__thumb--size-md {
829
- width: 1.25rem;
830
- --tw-translate-x: 0.125rem;
831
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
741
+ .GeckoUISwitch:has(input:checked) .GeckoUISwitch__thumb[data-size=sm] {
742
+ --tw-translate-x: calc(var(--spacing, 0.25rem) * 3);
743
+ translate: var(--tw-translate-x) var(--tw-translate-y);
832
744
  }
833
- .group[data-checked] .GeckoUISwitch__thumb--size-md {
834
- --tw-translate-x: 1.25rem;
835
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
745
+ .GeckoUISwitch:has(input:checked) .GeckoUISwitch__thumb[data-size=md] {
746
+ --tw-translate-x: calc(var(--spacing, 0.25rem) * 5);
747
+ translate: var(--tw-translate-x) var(--tw-translate-y);
836
748
  }
837
749
  .GeckoUIDrawer {
838
750
  position: relative;
@@ -840,121 +752,151 @@
840
752
  }
841
753
  .GeckoUIDrawer__backdrop {
842
754
  position: fixed;
843
- inset: 0px;
755
+ inset: calc(var(--spacing, 0.25rem) * 0);
844
756
  cursor: pointer;
845
757
  transition-property:
846
758
  color,
847
759
  background-color,
848
760
  border-color,
761
+ outline-color,
849
762
  text-decoration-color,
850
763
  fill,
851
764
  stroke,
765
+ --tw-gradient-from,
766
+ --tw-gradient-via,
767
+ --tw-gradient-to,
852
768
  opacity,
853
769
  box-shadow,
854
770
  transform,
771
+ translate,
772
+ scale,
773
+ rotate,
855
774
  filter,
856
- backdrop-filter;
775
+ -webkit-backdrop-filter,
776
+ backdrop-filter,
777
+ display,
778
+ content-visibility,
779
+ overlay,
780
+ pointer-events;
781
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
782
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
783
+ --tw-duration: 300ms;
857
784
  transition-duration: 300ms;
858
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
785
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
786
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
859
787
  }
860
- .GeckoUIDrawer__backdrop--hidden,
861
- .GeckoUIDrawer__backdrop--clickthrough {
788
+ .GeckoUIDrawer__backdrop[data-state=hidden],
789
+ .GeckoUIDrawer__backdrop[data-clickthrough] {
862
790
  pointer-events: none;
863
791
  }
864
- .GeckoUIDrawer__backdrop--visible {
865
- background-color: rgb(var(--gecko-ui-surface-overlay) / 0.25);
866
- --tw-bg-opacity: 0.75;
867
- opacity: 1;
792
+ .GeckoUIDrawer__backdrop[data-state=visible] {
793
+ background-color: color-mix(in srgb, oklch(0 0 none) 75%, transparent);
794
+ @supports (color: color-mix(in lab, red, red)) {
795
+ background-color: color-mix(in oklab, var(--color-surface-overlay) 75%, transparent);
796
+ }
797
+ opacity: 100%;
868
798
  }
869
- .GeckoUIDrawer__backdrop--hidden {
870
- opacity: 0;
799
+ .GeckoUIDrawer__backdrop[data-state=hidden] {
800
+ opacity: 0%;
871
801
  }
872
802
  .GeckoUIDrawer__drawer {
873
803
  pointer-events: auto;
874
804
  position: fixed;
875
805
  height: 100%;
876
806
  width: 100%;
877
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
807
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
878
808
  overflow-y: auto;
879
- --tw-bg-opacity: 1;
880
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
881
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
882
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
809
+ background-color: var(--color-surface-primary);
810
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
883
811
  box-shadow:
884
- var(--tw-ring-offset-shadow, 0 0 #0000),
885
- var(--tw-ring-shadow, 0 0 #0000),
812
+ var(--tw-inset-shadow),
813
+ var(--tw-inset-ring-shadow),
814
+ var(--tw-ring-offset-shadow),
815
+ var(--tw-ring-shadow),
886
816
  var(--tw-shadow);
887
817
  transition-property:
888
818
  color,
889
819
  background-color,
890
820
  border-color,
821
+ outline-color,
891
822
  text-decoration-color,
892
823
  fill,
893
824
  stroke,
825
+ --tw-gradient-from,
826
+ --tw-gradient-via,
827
+ --tw-gradient-to,
894
828
  opacity,
895
829
  box-shadow,
896
830
  transform,
831
+ translate,
832
+ scale,
833
+ rotate,
897
834
  filter,
898
- backdrop-filter;
835
+ -webkit-backdrop-filter,
836
+ backdrop-filter,
837
+ display,
838
+ content-visibility,
839
+ overlay,
840
+ pointer-events;
841
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
842
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
843
+ --tw-duration: 300ms;
899
844
  transition-duration: 300ms;
900
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
901
- }
902
- .GeckoUIDrawer__drawer--right {
903
- top: 0px;
904
- bottom: 0px;
905
- right: 0px;
906
- max-width: 28rem;
907
- }
908
- .GeckoUIDrawer__drawer--left {
909
- top: 0px;
910
- bottom: 0px;
911
- left: 0px;
912
- max-width: 28rem;
913
- }
914
- .GeckoUIDrawer__drawer--top {
915
- left: 0px;
916
- right: 0px;
917
- top: 0px;
845
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
846
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
847
+ }
848
+ .GeckoUIDrawer__drawer[data-placement=right] {
849
+ inset-block: calc(var(--spacing, 0.25rem) * 0);
850
+ right: calc(var(--spacing, 0.25rem) * 0);
851
+ max-width: var(--container-md, 28rem);
852
+ }
853
+ .GeckoUIDrawer__drawer[data-placement=left] {
854
+ inset-block: calc(var(--spacing, 0.25rem) * 0);
855
+ left: calc(var(--spacing, 0.25rem) * 0);
856
+ max-width: var(--container-md, 28rem);
857
+ }
858
+ .GeckoUIDrawer__drawer[data-placement=top] {
859
+ inset-inline: calc(var(--spacing, 0.25rem) * 0);
860
+ top: calc(var(--spacing, 0.25rem) * 0);
918
861
  max-height: 50%;
919
862
  }
920
- .GeckoUIDrawer__drawer--bottom {
921
- left: 0px;
922
- right: 0px;
923
- bottom: 0px;
863
+ .GeckoUIDrawer__drawer[data-placement=bottom] {
864
+ inset-inline: calc(var(--spacing, 0.25rem) * 0);
865
+ bottom: calc(var(--spacing, 0.25rem) * 0);
924
866
  max-height: 50%;
925
867
  }
926
- .GeckoUIDrawer__drawer--closed {
868
+ .GeckoUIDrawer__drawer[data-state=closed] {
927
869
  transition-delay: 100ms;
928
870
  }
929
- .GeckoUIDrawer__drawer--top-open,
930
- .GeckoUIDrawer__drawer--bottom-open {
931
- --tw-translate-y: 0px;
932
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
871
+ .GeckoUIDrawer__drawer[data-state=open][data-placement=top],
872
+ .GeckoUIDrawer__drawer[data-state=open][data-placement=bottom] {
873
+ --tw-translate-y: calc(var(--spacing, 0.25rem) * 0);
874
+ translate: var(--tw-translate-x) var(--tw-translate-y);
933
875
  }
934
- .GeckoUIDrawer__drawer--right-open,
935
- .GeckoUIDrawer__drawer--left-open {
936
- --tw-translate-x: 0px;
937
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
876
+ .GeckoUIDrawer__drawer[data-state=open][data-placement=right],
877
+ .GeckoUIDrawer__drawer[data-state=open][data-placement=left] {
878
+ --tw-translate-x: calc(var(--spacing, 0.25rem) * 0);
879
+ translate: var(--tw-translate-x) var(--tw-translate-y);
938
880
  }
939
- .GeckoUIDrawer__drawer--right-closed {
881
+ .GeckoUIDrawer__drawer[data-state=closed][data-placement=right] {
940
882
  --tw-translate-x: 100%;
941
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
883
+ translate: var(--tw-translate-x) var(--tw-translate-y);
942
884
  }
943
- .GeckoUIDrawer__drawer--left-closed {
885
+ .GeckoUIDrawer__drawer[data-state=closed][data-placement=left] {
944
886
  --tw-translate-x: -100%;
945
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
887
+ translate: var(--tw-translate-x) var(--tw-translate-y);
946
888
  }
947
- .GeckoUIDrawer__drawer--top-closed {
889
+ .GeckoUIDrawer__drawer[data-state=closed][data-placement=top] {
948
890
  --tw-translate-y: -100%;
949
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
891
+ translate: var(--tw-translate-x) var(--tw-translate-y);
950
892
  }
951
- .GeckoUIDrawer__drawer--bottom-closed {
893
+ .GeckoUIDrawer__drawer[data-state=closed][data-placement=bottom] {
952
894
  --tw-translate-y: 100%;
953
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
895
+ translate: var(--tw-translate-x) var(--tw-translate-y);
954
896
  }
955
897
  .GeckoUIDialog {
956
898
  position: fixed;
957
- inset: 0px;
899
+ inset: calc(var(--spacing, 0.25rem) * 0);
958
900
  z-index: 1000;
959
901
  width: 100vw;
960
902
  overflow-y: auto;
@@ -964,58 +906,68 @@
964
906
  min-height: 100%;
965
907
  align-items: center;
966
908
  justify-content: center;
967
- background-color: rgb(var(--gecko-ui-surface-overlay) / var(--tw-bg-opacity, 1));
968
- --tw-bg-opacity: 0.5;
969
- padding-left: 0.75rem;
970
- padding-right: 0.75rem;
909
+ background-color: color-mix(in srgb, oklch(0 0 none) 50%, transparent);
910
+ @supports (color: color-mix(in lab, red, red)) {
911
+ background-color: color-mix(in oklab, var(--color-surface-overlay) 50%, transparent);
912
+ }
913
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
971
914
  text-align: center;
972
915
  transition-property: opacity;
973
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
916
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
917
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
918
+ --tw-duration: 300ms;
974
919
  transition-duration: 300ms;
975
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
920
+ --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
921
+ transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
976
922
  }
977
923
  .GeckoUIDialog__dialog {
978
924
  position: relative;
979
925
  width: 100%;
980
926
  max-width: 400px;
981
927
  overflow: hidden;
982
- border-radius: 0.375rem;
983
- --tw-bg-opacity: 1;
984
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
985
- padding: 1.5rem;
928
+ border-radius: var(--radius-md, 0.375rem);
929
+ background-color: var(--color-surface-primary);
930
+ padding: calc(var(--spacing, 0.25rem) * 6);
986
931
  text-align: left;
987
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
988
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
932
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
989
933
  box-shadow:
990
- var(--tw-ring-offset-shadow, 0 0 #0000),
991
- var(--tw-ring-shadow, 0 0 #0000),
934
+ var(--tw-inset-shadow),
935
+ var(--tw-inset-ring-shadow),
936
+ var(--tw-ring-offset-shadow),
937
+ var(--tw-ring-shadow),
992
938
  var(--tw-shadow);
993
939
  transition-property: all;
994
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
940
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
941
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
942
+ --tw-duration: 300ms;
995
943
  transition-duration: 300ms;
996
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
944
+ --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
945
+ transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
997
946
  }
998
947
  .GeckoUIDialog[data-state=entering] .GeckoUIDialog__backdrop,
999
948
  .GeckoUIDialog[data-state=closing] .GeckoUIDialog__backdrop {
1000
- opacity: 0;
949
+ opacity: 0%;
1001
950
  }
1002
951
  .GeckoUIDialog[data-state=entering] .GeckoUIDialog__dialog,
1003
952
  .GeckoUIDialog[data-state=closing] .GeckoUIDialog__dialog {
1004
- --tw-scale-x: .95;
1005
- --tw-scale-y: .95;
1006
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1007
- opacity: 0;
953
+ --tw-scale-x: 95%;
954
+ --tw-scale-y: 95%;
955
+ --tw-scale-z: 95%;
956
+ scale: var(--tw-scale-x) var(--tw-scale-y);
957
+ opacity: 0%;
1008
958
  }
1009
959
  .GeckoUIDialog[data-state=open] .GeckoUIDialog__backdrop {
1010
- opacity: 1;
960
+ opacity: 100%;
1011
961
  }
1012
962
  .GeckoUIDialog[data-state=open] .GeckoUIDialog__dialog {
1013
- --tw-scale-x: 1;
1014
- --tw-scale-y: 1;
1015
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1016
- opacity: 1;
963
+ --tw-scale-x: 100%;
964
+ --tw-scale-y: 100%;
965
+ --tw-scale-z: 100%;
966
+ scale: var(--tw-scale-x) var(--tw-scale-y);
967
+ opacity: 100%;
1017
968
  }
1018
969
  .GeckoUIButton {
970
+ box-sizing: border-box;
1019
971
  border-width: 0;
1020
972
  border-style: solid;
1021
973
  border-color: #e5e7eb;
@@ -1034,175 +986,190 @@
1034
986
  cursor: pointer;
1035
987
  background-color: transparent;
1036
988
  background-image: none;
1037
- outline-width: 2px;
989
+ outline: none;
990
+ }
991
+ .GeckoUIButton:focus-visible {
992
+ outline: 2px solid var(--color-primary-300);
1038
993
  outline-offset: 2px;
1039
- outline-color: rgb(var(--gecko-ui-primary-300) / 1);
994
+ }
995
+ .GeckoUIButton {
1040
996
  box-sizing: border-box;
1041
997
  display: flex;
1042
998
  flex-direction: row;
1043
999
  align-items: center;
1044
1000
  justify-content: center;
1045
- gap: 0.375rem;
1046
- border-radius: 0.375rem;
1047
- font-size: 0.75rem;
1048
- line-height: 1rem;
1049
- }
1050
- .GeckoUIButton:disabled {
1051
- cursor: not-allowed;
1052
- }
1053
- .GeckoUIButton {
1054
- transition-property: transform;
1055
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1001
+ gap: calc(var(--spacing, 0.25rem) * 1.5);
1002
+ border-radius: var(--radius-md, 0.375rem);
1003
+ font-size: var(--text-xs, 0.75rem);
1004
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
1005
+ &:disabled {
1006
+ cursor: not-allowed;
1007
+ }
1008
+ transition-property:
1009
+ transform,
1010
+ translate,
1011
+ scale,
1012
+ rotate;
1013
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
1014
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
1015
+ --tw-duration: 200ms;
1056
1016
  transition-duration: 200ms;
1057
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1017
+ --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
1018
+ transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
1058
1019
  }
1059
- .GeckoUIButton:active:not(:disabled):not(.GeckoUIButton--icon) {
1060
- --tw-scale-x: .95;
1061
- --tw-scale-y: .95;
1062
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1020
+ .GeckoUIButton:active:not(:disabled):not([data-variant=icon]) {
1021
+ --tw-scale-x: 95%;
1022
+ --tw-scale-y: 95%;
1023
+ --tw-scale-z: 95%;
1024
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1063
1025
  }
1064
- .GeckoUIButton--size-xs {
1026
+ .GeckoUIButton[data-size=xs] {
1065
1027
  height: 26px;
1066
- padding-left: 0.5rem;
1067
- padding-right: 0.5rem;
1068
- font-size: 0.75rem;
1069
- line-height: 1rem;
1070
- }
1071
- .GeckoUIButton--size-sm {
1072
- height: 2rem;
1073
- padding-left: 0.75rem;
1074
- padding-right: 0.75rem;
1075
- font-size: 0.75rem;
1076
- line-height: 1rem;
1077
- }
1078
- .GeckoUIButton--size-md {
1028
+ padding-inline: calc(var(--spacing, 0.25rem) * 2);
1029
+ font-size: var(--text-xs, 0.75rem);
1030
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
1031
+ }
1032
+ .GeckoUIButton[data-size=sm] {
1033
+ height: calc(var(--spacing, 0.25rem) * 8);
1034
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
1035
+ font-size: var(--text-xs, 0.75rem);
1036
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
1037
+ }
1038
+ .GeckoUIButton[data-size=md] {
1079
1039
  height: 38px;
1080
- padding-left: 0.75rem;
1081
- padding-right: 0.75rem;
1082
- font-size: 0.875rem;
1083
- line-height: 1.25rem;
1040
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
1041
+ font-size: var(--text-sm, 0.875rem);
1042
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1084
1043
  }
1085
- .GeckoUIButton--size-lg {
1044
+ .GeckoUIButton[data-size=lg] {
1086
1045
  height: 44px;
1087
- padding-left: 0.875rem;
1088
- padding-right: 0.875rem;
1089
- font-size: 0.875rem;
1090
- line-height: 1.25rem;
1046
+ padding-inline: calc(var(--spacing, 0.25rem) * 3.5);
1047
+ font-size: var(--text-sm, 0.875rem);
1048
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1091
1049
  }
1092
- .GeckoUIButton--size-xl {
1050
+ .GeckoUIButton[data-size=xl] {
1093
1051
  height: 50px;
1094
- padding-left: 1rem;
1095
- padding-right: 1rem;
1096
- font-size: 0.875rem;
1097
- line-height: 1.25rem;
1098
- font-weight: 600;
1099
- }
1100
- .GeckoUIButton--filled-primary {
1101
- --tw-border-opacity: 1;
1102
- border-color: rgb(var(--gecko-ui-primary-600) / var(--tw-border-opacity, 1));
1103
- --tw-bg-opacity: 1;
1104
- background-color: rgb(var(--gecko-ui-primary-600) / var(--tw-bg-opacity, 1));
1105
- --tw-text-opacity: 1;
1106
- color: rgb(var(--gecko-ui-text-on-primary) / var(--tw-text-opacity, 1));
1107
- }
1108
- .GeckoUIButton--filled-primary:hover:enabled {
1109
- --tw-border-opacity: 1;
1110
- border-color: rgb(var(--gecko-ui-primary-700) / var(--tw-border-opacity, 1));
1111
- --tw-bg-opacity: 1;
1112
- background-color: rgb(var(--gecko-ui-primary-700) / var(--tw-bg-opacity, 1));
1113
- }
1114
- .GeckoUIButton--filled-primary:disabled {
1115
- --tw-border-opacity: 1;
1116
- border-color: rgb(var(--gecko-ui-border-disabled) / var(--tw-border-opacity, 1));
1117
- background-color: rgb(var(--gecko-ui-primary-600) / 0.5);
1118
- }
1119
- .GeckoUIButton--outlined {
1120
- border-width: 1px;
1121
- }
1122
- .GeckoUIButton--outlined-primary {
1123
- --tw-border-opacity: 1;
1124
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
1125
- --tw-text-opacity: 1;
1126
- color: rgb(var(--gecko-ui-text-primary) / var(--tw-text-opacity, 1));
1052
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
1053
+ font-size: var(--text-sm, 0.875rem);
1054
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1055
+ --tw-font-weight: var(--font-weight-semibold, 600);
1056
+ font-weight: var(--font-weight-semibold, 600);
1057
+ }
1058
+ .GeckoUIButton[data-variant=filled][data-color=primary] {
1059
+ border-color: var(--color-primary-600);
1060
+ background-color: var(--color-primary-600);
1061
+ color: var(--color-text-on-primary);
1062
+ &:enabled {
1063
+ &:hover {
1064
+ @media (hover: hover) {
1065
+ border-color: var(--color-primary-700);
1066
+ }
1067
+ }
1068
+ }
1069
+ &:enabled {
1070
+ &:hover {
1071
+ @media (hover: hover) {
1072
+ background-color: var(--color-primary-700);
1073
+ }
1074
+ }
1075
+ }
1076
+ &:disabled {
1077
+ border-color: var(--color-border-disabled);
1078
+ }
1079
+ &:disabled {
1080
+ background-color: color-mix(in srgb, oklch(0.5461 0.2152 262.88) 50%, transparent);
1081
+ @supports (color: color-mix(in lab, red, red)) {
1082
+ background-color: color-mix(in oklab, var(--color-primary-600) 50%, transparent);
1083
+ }
1084
+ }
1127
1085
  }
1128
- .GeckoUIButton--outlined-primary:hover:enabled {
1129
- --tw-bg-opacity: 1;
1130
- background-color: rgb(var(--gecko-ui-surface-hover) / var(--tw-bg-opacity, 1));
1086
+ .GeckoUIButton[data-variant=outlined] {
1087
+ border-style: var(--tw-border-style);
1088
+ border-width: 1px;
1131
1089
  }
1132
- .GeckoUIButton--outlined-primary:disabled {
1133
- --tw-bg-opacity: 1;
1134
- background-color: rgb(var(--gecko-ui-surface-hover) / var(--tw-bg-opacity, 1));
1135
- --tw-text-opacity: 1;
1136
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
1090
+ .GeckoUIButton[data-variant=outlined][data-color=primary] {
1091
+ border-color: var(--color-border-secondary);
1092
+ color: var(--color-text-primary);
1093
+ &:enabled {
1094
+ &:hover {
1095
+ @media (hover: hover) {
1096
+ background-color: var(--color-surface-hover);
1097
+ }
1098
+ }
1099
+ }
1100
+ &:disabled {
1101
+ background-color: var(--color-surface-hover);
1102
+ }
1103
+ &:disabled {
1104
+ color: var(--color-text-disabled);
1105
+ }
1137
1106
  }
1138
- .GeckoUIButton--ghost {
1107
+ .GeckoUIButton[data-variant=ghost] {
1139
1108
  border-color: transparent;
1140
1109
  background-color: transparent;
1110
+ &:enabled {
1111
+ --tw-font-weight: var(--font-weight-semibold, 600);
1112
+ font-weight: var(--font-weight-semibold, 600);
1113
+ }
1141
1114
  }
1142
- .GeckoUIButton--ghost:enabled {
1143
- font-weight: 600;
1144
- }
1145
- .GeckoUIButton--ghost-primary {
1146
- --tw-text-opacity: 1;
1147
- color: rgb(var(--gecko-ui-primary-600) / var(--tw-text-opacity, 1));
1148
- }
1149
- .GeckoUIButton--ghost-primary:hover:enabled {
1150
- --tw-bg-opacity: 1;
1151
- background-color: rgb(var(--gecko-ui-surface-hover) / var(--tw-bg-opacity, 1));
1152
- }
1153
- .GeckoUIButton--ghost-primary:disabled {
1154
- --tw-text-opacity: 1;
1155
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
1115
+ .GeckoUIButton[data-variant=ghost][data-color=primary] {
1116
+ color: var(--color-primary-600);
1117
+ &:enabled {
1118
+ &:hover {
1119
+ @media (hover: hover) {
1120
+ background-color: var(--color-surface-hover);
1121
+ }
1122
+ }
1123
+ }
1124
+ &:disabled {
1125
+ color: var(--color-text-disabled);
1126
+ }
1156
1127
  }
1157
- .GeckoUIButton--icon {
1128
+ .GeckoUIButton[data-variant=icon] {
1158
1129
  aspect-ratio: 1 / 1;
1159
- width: 2rem;
1160
- height: 2rem;
1161
- border-radius: 0.375rem;
1130
+ width: calc(var(--spacing, 0.25rem) * 8);
1131
+ height: calc(var(--spacing, 0.25rem) * 8);
1132
+ border-radius: var(--radius-md, 0.375rem);
1162
1133
  border-color: transparent;
1163
1134
  background-color: transparent;
1164
- padding: 0px;
1165
- }
1166
- .GeckoUIButton--icon:hover:enabled {
1167
- --tw-bg-opacity: 1;
1168
- background-color: rgb(var(--gecko-ui-surface-hover) / var(--tw-bg-opacity, 1));
1169
- }
1170
- .GeckoUIButton--icon-primary {
1171
- --tw-text-opacity: 1;
1172
- color: rgb(var(--gecko-ui-text-tertiary) / var(--tw-text-opacity, 1));
1135
+ padding: calc(var(--spacing, 0.25rem) * 0);
1136
+ &:enabled {
1137
+ &:hover {
1138
+ @media (hover: hover) {
1139
+ background-color: var(--color-surface-hover);
1140
+ }
1141
+ }
1142
+ }
1173
1143
  }
1174
- .GeckoUIButton--icon-primary:disabled {
1175
- --tw-text-opacity: 1;
1176
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
1144
+ .GeckoUIButton[data-variant=icon][data-color=primary] {
1145
+ color: var(--color-text-tertiary);
1146
+ &:disabled {
1147
+ color: var(--color-text-disabled);
1148
+ }
1177
1149
  }
1178
1150
  .GeckoUITooltip__trigger {
1179
1151
  display: inline-flex;
1180
- height: -moz-fit-content;
1181
1152
  height: fit-content;
1182
- width: -moz-fit-content;
1183
1153
  width: fit-content;
1184
1154
  cursor: pointer;
1185
1155
  }
1186
1156
  .GeckoUITooltip {
1187
1157
  z-index: 50;
1188
- min-width: 0px;
1189
1158
  max-width: 320px;
1190
- border-radius: 0.5rem;
1191
- --tw-bg-opacity: 1;
1192
- background-color: rgb(var(--gecko-ui-surface-emphasis) / var(--tw-bg-opacity, 1));
1193
- padding: 0.5rem;
1194
- font-size: 0.75rem;
1195
- line-height: 1rem;
1196
- font-weight: 400;
1197
- --tw-text-opacity: 1;
1198
- color: rgb(var(--gecko-ui-surface-primary) / var(--tw-text-opacity, 1));
1159
+ min-width: 0px;
1160
+ border-radius: var(--radius-lg, 0.5rem);
1161
+ background-color: var(--color-surface-emphasis);
1162
+ padding: calc(var(--spacing, 0.25rem) * 2);
1163
+ font-size: var(--text-xs, 0.75rem);
1164
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
1165
+ --tw-font-weight: var(--font-weight-normal, 400);
1166
+ font-weight: var(--font-weight-normal, 400);
1167
+ color: var(--color-surface-primary);
1199
1168
  box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;
1200
- -webkit-user-select: none;
1201
- -moz-user-select: none;
1202
1169
  user-select: none;
1203
1170
  }
1204
1171
  .GeckoUITooltip__arrow {
1205
- fill: rgb(var(--gecko-ui-surface-emphasis) / 1);
1172
+ fill: var(--color-surface-emphasis);
1206
1173
  }
1207
1174
  .GeckoUISpinnerIcon {
1208
1175
  box-sizing: border-box;
@@ -1210,17 +1177,10 @@
1210
1177
  border-style: solid;
1211
1178
  border-color: #e5e7eb;
1212
1179
  aspect-ratio: 1 / 1;
1213
- width: 1.25rem;
1214
- height: 1.25rem;
1180
+ width: calc(var(--spacing, 0.25rem) * 5);
1181
+ height: calc(var(--spacing, 0.25rem) * 5);
1215
1182
  flex-shrink: 0;
1216
- }
1217
- @keyframes spin {
1218
- to {
1219
- transform: rotate(360deg);
1220
- }
1221
- }
1222
- .GeckoUISpinnerIcon {
1223
- animation: spin 1s linear infinite;
1183
+ animation: var(--animate-spin, spin 1s linear infinite);
1224
1184
  color: inherit;
1225
1185
  }
1226
1186
  .GeckoUITextarea {
@@ -1239,65 +1199,80 @@
1239
1199
  margin: 0;
1240
1200
  padding: 0;
1241
1201
  text-transform: none;
1242
- outline-width: 2px;
1202
+ outline: none;
1203
+ }
1204
+ .GeckoUITextarea:focus-visible {
1205
+ outline: 2px solid var(--color-primary-300);
1243
1206
  outline-offset: 2px;
1244
- outline-color: rgb(var(--gecko-ui-primary-300) / 1);
1207
+ }
1208
+ .GeckoUITextarea {
1245
1209
  width: 100%;
1246
- border-radius: 0.375rem;
1210
+ border-radius: var(--radius-md, 0.375rem);
1211
+ border-style: var(--tw-border-style);
1247
1212
  border-width: 1px;
1248
- --tw-border-opacity: 1;
1249
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
1250
- padding-left: 0.75rem;
1251
- padding-right: 0.75rem;
1252
- padding-top: 0.375rem;
1253
- padding-bottom: 0.375rem;
1254
- font-size: 0.875rem;
1255
- line-height: 1.25rem;
1256
- }
1257
- .GeckoUITextarea::-moz-placeholder {
1258
- font-size: 0.875rem;
1259
- font-weight: 400;
1260
- line-height: 1.25rem;
1261
- --tw-text-opacity: 1;
1262
- color: rgb(var(--gecko-ui-text-placeholder) / var(--tw-text-opacity, 1));
1263
- }
1264
- .GeckoUITextarea::placeholder {
1265
- font-size: 0.875rem;
1266
- font-weight: 400;
1267
- line-height: 1.25rem;
1268
- --tw-text-opacity: 1;
1269
- color: rgb(var(--gecko-ui-text-placeholder) / var(--tw-text-opacity, 1));
1270
- }
1271
- .GeckoUITextarea:focus {
1272
- outline: 2px solid transparent;
1273
- outline-offset: 2px;
1274
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1275
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1276
- box-shadow:
1277
- var(--tw-ring-offset-shadow),
1278
- var(--tw-ring-shadow),
1279
- var(--tw-shadow, 0 0 #0000);
1280
- --tw-ring-offset-width: 0px;
1281
- }
1282
- .GeckoUITextarea:hover:enabled {
1283
- --tw-border-opacity: 1;
1284
- border-color: rgb(var(--gecko-ui-primary-300) / var(--tw-border-opacity, 1));
1285
- }
1286
- .GeckoUITextarea:focus:enabled {
1287
- --tw-border-opacity: 1;
1288
- border-color: rgb(var(--gecko-ui-primary-300) / var(--tw-border-opacity, 1));
1289
- }
1290
- .GeckoUITextarea:disabled {
1291
- cursor: not-allowed;
1292
- --tw-bg-opacity: 1;
1293
- background-color: rgb(var(--gecko-ui-surface-disabled) / var(--tw-bg-opacity, 1));
1294
- --tw-text-opacity: 1;
1295
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
1213
+ border-color: var(--color-border-secondary);
1214
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
1215
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
1216
+ font-size: var(--text-sm, 0.875rem);
1217
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1218
+ &::placeholder {
1219
+ font-size: var(--text-sm, 0.875rem);
1220
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1221
+ }
1222
+ &::placeholder {
1223
+ --tw-leading: calc(var(--spacing, 0.25rem) * 5);
1224
+ line-height: calc(var(--spacing, 0.25rem) * 5);
1225
+ }
1226
+ &::placeholder {
1227
+ --tw-font-weight: var(--font-weight-normal, 400);
1228
+ font-weight: var(--font-weight-normal, 400);
1229
+ }
1230
+ &::placeholder {
1231
+ color: var(--color-text-placeholder);
1232
+ }
1233
+ &:focus {
1234
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1235
+ box-shadow:
1236
+ var(--tw-inset-shadow),
1237
+ var(--tw-inset-ring-shadow),
1238
+ var(--tw-ring-offset-shadow),
1239
+ var(--tw-ring-shadow),
1240
+ var(--tw-shadow);
1241
+ }
1242
+ &:focus {
1243
+ --tw-ring-offset-width: 0px;
1244
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1245
+ }
1246
+ &:focus {
1247
+ --tw-outline-style: none;
1248
+ outline-style: none;
1249
+ }
1250
+ &:enabled {
1251
+ &:hover {
1252
+ @media (hover: hover) {
1253
+ border-color: var(--color-primary-300);
1254
+ }
1255
+ }
1256
+ }
1257
+ &:enabled {
1258
+ &:focus {
1259
+ border-color: var(--color-primary-300);
1260
+ }
1261
+ }
1262
+ &:disabled {
1263
+ cursor: not-allowed;
1264
+ }
1265
+ &:disabled {
1266
+ background-color: var(--color-surface-disabled);
1267
+ }
1268
+ &:disabled {
1269
+ color: var(--color-text-disabled);
1270
+ }
1296
1271
  }
1297
1272
  .GeckoUIOTPInput {
1298
1273
  display: grid;
1299
- max-width: 20rem;
1300
- gap: 0.5rem;
1274
+ max-width: var(--container-xs, 20rem);
1275
+ gap: calc(var(--spacing, 0.25rem) * 2);
1301
1276
  }
1302
1277
  .GeckoUIOTPInput__input {
1303
1278
  box-sizing: border-box;
@@ -1318,30 +1293,28 @@
1318
1293
  display: block;
1319
1294
  height: 100%;
1320
1295
  width: 100%;
1321
- border-radius: 0.5rem;
1296
+ border-radius: var(--radius-lg, 0.5rem);
1297
+ border-style: var(--tw-border-style);
1322
1298
  border-width: 1px;
1323
- --tw-border-opacity: 1;
1324
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
1299
+ border-color: var(--color-border-secondary);
1325
1300
  text-align: center;
1326
- outline: 2px solid transparent;
1327
- outline-offset: 2px;
1328
- }
1329
- .GeckoUIOTPInput__input:focus-within:enabled {
1330
- --tw-border-opacity: 1;
1331
- border-color: rgb(var(--gecko-ui-primary-300) / var(--tw-border-opacity, 1));
1332
- }
1333
- .GeckoUIOTPInput__input:disabled {
1334
- cursor: not-allowed;
1301
+ --tw-outline-style: none;
1302
+ outline-style: none;
1303
+ &:enabled {
1304
+ &:focus-within {
1305
+ border-color: var(--color-primary-300);
1306
+ }
1307
+ }
1308
+ &:disabled {
1309
+ cursor: not-allowed;
1310
+ }
1335
1311
  }
1336
- .GeckoUIOTPInput--disabled .GeckoUIOTPInput__input {
1337
- --tw-bg-opacity: 1;
1338
- background-color: rgb(var(--gecko-ui-surface-disabled) / var(--tw-bg-opacity, 1));
1339
- --tw-text-opacity: 1;
1340
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
1312
+ .GeckoUIOTPInput[data-state=disabled] .GeckoUIOTPInput__input {
1313
+ background-color: var(--color-surface-disabled);
1314
+ color: var(--color-text-disabled);
1341
1315
  }
1342
1316
  .GeckoUIOTPInput:hover .GeckoUIOTPInput__input:enabled {
1343
- --tw-border-opacity: 1;
1344
- border-color: rgb(var(--gecko-ui-primary-400) / var(--tw-border-opacity, 1));
1317
+ border-color: var(--color-primary-400);
1345
1318
  }
1346
1319
  .GeckoUIOTPInput__overlay-button {
1347
1320
  box-sizing: border-box;
@@ -1363,128 +1336,26 @@
1363
1336
  cursor: pointer;
1364
1337
  background-image: none;
1365
1338
  position: absolute;
1366
- inset: 0px;
1339
+ inset: calc(var(--spacing, 0.25rem) * 0);
1367
1340
  z-index: 10;
1368
1341
  cursor: text;
1369
1342
  background-color: transparent;
1370
1343
  }
1371
- .GeckoUIOTPInput--disabled .GeckoUIOTPInput__overlay-button {
1372
- cursor: not-allowed;
1373
- }
1374
- .GeckoUIDropdown__button {
1375
- display: flex;
1376
- flex-direction: row;
1377
- align-items: center;
1378
- justify-content: center;
1379
- gap: 0.5rem;
1380
- border-radius: 0.375rem;
1381
- border-width: 1px;
1382
- --tw-border-opacity: 1;
1383
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
1384
- padding-left: 0.75rem;
1385
- padding-right: 0.75rem;
1386
- padding-top: 0.375rem;
1387
- padding-bottom: 0.375rem;
1388
- font-size: 0.75rem;
1389
- line-height: 1rem;
1390
- --tw-text-opacity: 1;
1391
- color: rgb(var(--gecko-ui-text-secondary) / var(--tw-text-opacity, 1));
1392
- }
1393
- .GeckoUIDropdown__button:hover:enabled {
1394
- --tw-bg-opacity: 1;
1395
- background-color: rgb(var(--gecko-ui-surface-hover) / var(--tw-bg-opacity, 1));
1396
- }
1397
- .GeckoUIDropdown__button:disabled {
1344
+ .GeckoUIOTPInput[data-state=disabled] .GeckoUIOTPInput__overlay-button {
1398
1345
  cursor: not-allowed;
1399
- --tw-bg-opacity: 1;
1400
- background-color: rgb(var(--gecko-ui-surface-hover) / var(--tw-bg-opacity, 1));
1401
- --tw-text-opacity: 1;
1402
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
1403
- }
1404
- .GeckoUIDropdown__button--icon {
1405
- padding: 0px;
1406
1346
  }
1407
- .GeckoUIDropdown__icon {
1408
- box-sizing: border-box;
1409
- border-width: 0;
1410
- border-style: solid;
1411
- border-color: #e5e7eb;
1412
- display: inline-block;
1413
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
1414
- -webkit-mask-position: center;
1415
- mask-position: center;
1416
- -webkit-mask-size: contain;
1417
- mask-size: contain;
1418
- -webkit-mask-repeat: no-repeat;
1419
- mask-repeat: no-repeat;
1420
- height: 0.625rem;
1421
- width: 0.625rem;
1422
- --tw-bg-opacity: 1;
1423
- background-color: rgb(var(--gecko-ui-text-secondary) / var(--tw-bg-opacity, 1));
1424
- mask-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.230169 0.363673C0.528748 0.076578 1.00353 0.0858874 1.29063 0.384466L5 4.32222L8.70938 0.384466C8.99647 0.0858875 9.47125 0.076578 9.76983 0.363673C10.0684 0.650768 10.0777 1.12555 9.79063 1.42413L5.54063 5.92413C5.39922 6.07119 5.20401 6.1543 5 6.1543C4.79599 6.1543 4.60078 6.07119 4.45938 5.92413L0.209376 1.42413C-0.0777189 1.12555 -0.0684095 0.650768 0.230169 0.363673Z" fill="currentColor"/></svg>');
1425
- -webkit-mask-image: url('data:image/svg+xml,<svg width="10" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.230169 0.363673C0.528748 0.076578 1.00353 0.0858874 1.29063 0.384466L5 4.32222L8.70938 0.384466C8.99647 0.0858875 9.47125 0.076578 9.76983 0.363673C10.0684 0.650768 10.0777 1.12555 9.79063 1.42413L5.54063 5.92413C5.39922 6.07119 5.20401 6.1543 5 6.1543C4.79599 6.1543 4.60078 6.07119 4.45938 5.92413L0.209376 1.42413C-0.0777189 1.12555 -0.0684095 0.650768 0.230169 0.363673Z" fill="currentColor"/></svg>');
1426
- }
1427
- .GeckoUIDropdown__icon--icon {
1428
- height: 28px;
1429
- width: 28px;
1430
- mask-image: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 15.3125C14.7249 15.3125 15.3125 14.7249 15.3125 14C15.3125 13.2751 14.7249 12.6875 14 12.6875C13.2751 12.6875 12.6875 13.2751 12.6875 14C12.6875 14.7249 13.2751 15.3125 14 15.3125Z" fill="%234B5563"/><path d="M21 15.3125C21.7249 15.3125 22.3125 14.7249 22.3125 14C22.3125 13.2751 21.7249 12.6875 21 12.6875C20.2751 12.6875 19.6875 13.2751 19.6875 14C19.6875 14.7249 20.2751 15.3125 21 15.3125Z" fill="%234B5563"/><path d="M7 15.3125C7.72487 15.3125 8.3125 14.7249 8.3125 14C8.3125 13.2751 7.72487 12.6875 7 12.6875C6.27513 12.6875 5.6875 13.2751 5.6875 14C5.6875 14.7249 6.27513 15.3125 7 15.3125Z" fill="%234B5563"/></svg>');
1431
- -webkit-mask-image: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 15.3125C14.7249 15.3125 15.3125 14.7249 15.3125 14C15.3125 13.2751 14.7249 12.6875 14 12.6875C13.2751 12.6875 12.6875 13.2751 12.6875 14C12.6875 14.7249 13.2751 15.3125 14 15.3125Z" fill="%234B5563"/><path d="M21 15.3125C21.7249 15.3125 22.3125 14.7249 22.3125 14C22.3125 13.2751 21.7249 12.6875 21 12.6875C20.2751 12.6875 19.6875 13.2751 19.6875 14C19.6875 14.7249 20.2751 15.3125 21 15.3125Z" fill="%234B5563"/><path d="M7 15.3125C7.72487 15.3125 8.3125 14.7249 8.3125 14C8.3125 13.2751 7.72487 12.6875 7 12.6875C6.27513 12.6875 5.6875 13.2751 5.6875 14C5.6875 14.7249 6.27513 15.3125 7 15.3125Z" fill="%234B5563"/></svg>');
1432
- }
1433
- .GeckoUIDropdown__menu {
1347
+ .GeckoUICheckbox {
1434
1348
  box-sizing: border-box;
1435
1349
  border-width: 0;
1436
1350
  border-style: solid;
1437
1351
  border-color: #e5e7eb;
1438
- margin-top: 0.5rem;
1352
+ outline: none;
1439
1353
  }
1440
- .GeckoUIDropdown__menu-item {
1441
- box-sizing: border-box;
1442
- border-width: 0;
1443
- border-style: solid;
1444
- border-color: #e5e7eb;
1445
- font-family: inherit;
1446
- font-feature-settings: inherit;
1447
- font-variation-settings: inherit;
1448
- font-size: 100%;
1449
- font-weight: inherit;
1450
- line-height: inherit;
1451
- letter-spacing: inherit;
1452
- color: inherit;
1453
- margin: 0;
1454
- padding: 0;
1455
- text-transform: none;
1456
- -webkit-appearance: button;
1457
- cursor: pointer;
1458
- background-color: transparent;
1459
- background-image: none;
1460
- width: 100%;
1461
- padding-left: 0.75rem;
1462
- padding-right: 0.75rem;
1463
- padding-top: 0.375rem;
1464
- padding-bottom: 0.375rem;
1465
- text-align: left;
1466
- font-size: 0.875rem;
1467
- line-height: 1.25rem;
1468
- --tw-text-opacity: 1;
1469
- color: rgb(var(--gecko-ui-text-secondary) / var(--tw-text-opacity, 1));
1470
- }
1471
- .GeckoUIDropdown__menu-item:hover {
1472
- --tw-bg-opacity: 1;
1473
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
1474
- }
1475
- .GeckoUIDropdown__menu-item:disabled {
1476
- cursor: not-allowed;
1477
- --tw-text-opacity: 1;
1478
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
1354
+ .GeckoUICheckbox:focus-visible {
1355
+ outline: 2px solid var(--color-primary-300);
1356
+ outline-offset: 2px;
1479
1357
  }
1480
1358
  .GeckoUICheckbox {
1481
- box-sizing: border-box;
1482
- border-width: 0;
1483
- border-style: solid;
1484
- border-color: #e5e7eb;
1485
- outline-width: 2px;
1486
- outline-offset: 2px;
1487
- outline-color: rgb(var(--gecko-ui-primary-300) / 1);
1488
1359
  display: inline-flex;
1489
1360
  align-items: center;
1490
1361
  justify-content: center;
@@ -1517,55 +1388,47 @@
1517
1388
  border-radius: 0.25rem;
1518
1389
  }
1519
1390
  .GeckoUICheckbox:has(:checked:disabled) .GeckoUICheckbox__button {
1520
- opacity: 0.4;
1391
+ opacity: 40%;
1521
1392
  }
1522
1393
  .GeckoUICheckbox__box {
1523
1394
  box-sizing: border-box;
1524
1395
  border-width: 0;
1525
1396
  border-style: solid;
1526
1397
  border-color: #e5e7eb;
1527
- height: 1rem;
1528
- width: 1rem;
1398
+ height: calc(var(--spacing, 0.25rem) * 4);
1399
+ width: calc(var(--spacing, 0.25rem) * 4);
1529
1400
  cursor: pointer;
1530
1401
  border-radius: 0.25rem;
1402
+ border-style: var(--tw-border-style);
1531
1403
  border-width: 1px;
1532
- --tw-border-opacity: 1;
1533
- border-color: rgb(var(--gecko-ui-border-primary) / var(--tw-border-opacity, 1));
1404
+ border-color: var(--color-border-primary);
1534
1405
  }
1535
1406
  .GeckoUICheckbox__box:hover,
1536
1407
  .GeckoUICheckbox__box:has(:hover) {
1537
- --tw-border-opacity: 1;
1538
- border-color: rgb(var(--gecko-ui-primary-400) / var(--tw-border-opacity, 1));
1408
+ border-color: var(--color-primary-400);
1539
1409
  }
1540
1410
  .GeckoUICheckbox:has(:disabled) .GeckoUICheckbox__box {
1541
1411
  cursor: not-allowed;
1542
- --tw-border-opacity: 1;
1543
- border-color: rgb(var(--gecko-ui-border-disabled) / var(--tw-border-opacity, 1));
1544
- --tw-bg-opacity: 1;
1545
- background-color: rgb(var(--gecko-ui-surface-disabled) / var(--tw-bg-opacity, 1));
1412
+ border-color: var(--color-border-disabled);
1413
+ background-color: var(--color-surface-disabled);
1546
1414
  }
1547
1415
  .GeckoUICheckbox:has(:checked) .GeckoUICheckbox__box {
1548
- --tw-border-opacity: 1;
1549
- border-color: rgb(var(--gecko-ui-primary-600) / var(--tw-border-opacity, 1));
1550
- --tw-bg-opacity: 1;
1551
- background-color: rgb(var(--gecko-ui-primary-600) / var(--tw-bg-opacity, 1));
1416
+ border-color: var(--color-primary-600);
1417
+ background-color: var(--color-primary-600);
1552
1418
  }
1553
1419
  .GeckoUICheckbox:has(:checked:disabled) .GeckoUICheckbox__box {
1554
- --tw-border-opacity: 1;
1555
- border-color: rgb(var(--gecko-ui-primary-600) / var(--tw-border-opacity, 1));
1556
- --tw-bg-opacity: 1;
1557
- background-color: rgb(var(--gecko-ui-primary-600) / var(--tw-bg-opacity, 1));
1420
+ border-color: var(--color-primary-600);
1421
+ background-color: var(--color-primary-600);
1558
1422
  }
1559
1423
  .GeckoUICheckbox__icon {
1560
1424
  pointer-events: none;
1561
1425
  position: absolute;
1562
- inset: 0px;
1426
+ inset: calc(var(--spacing, 0.25rem) * 0);
1563
1427
  z-index: 1;
1564
1428
  margin: auto;
1565
1429
  display: none;
1566
1430
  stroke-width: 5px;
1567
- --tw-text-opacity: 1;
1568
- color: rgb(var(--gecko-ui-text-on-primary) / var(--tw-text-opacity, 1));
1431
+ color: var(--color-text-on-primary);
1569
1432
  }
1570
1433
  .GeckoUICheckbox:has(:checked) .GeckoUICheckbox__icon {
1571
1434
  display: block;
@@ -1574,8 +1437,7 @@
1574
1437
  width: 100%;
1575
1438
  }
1576
1439
  .GeckoUIDateInput__calendar {
1577
- --tw-bg-opacity: 1;
1578
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
1440
+ background-color: var(--color-surface-primary);
1579
1441
  }
1580
1442
  .GeckoUISelect {
1581
1443
  position: relative;
@@ -1583,10 +1445,9 @@
1583
1445
  width: 100%;
1584
1446
  flex-direction: column;
1585
1447
  align-self: flex-start;
1586
- font-size: 0.875rem;
1587
- line-height: 1.25rem;
1588
- --tw-text-opacity: 1;
1589
- color: rgb(var(--gecko-ui-text-primary) / var(--tw-text-opacity, 1));
1448
+ font-size: var(--text-sm, 0.875rem);
1449
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1450
+ color: var(--color-text-primary);
1590
1451
  }
1591
1452
  .GeckoUIPagination {
1592
1453
  box-sizing: border-box;
@@ -1597,21 +1458,18 @@
1597
1458
  width: 100%;
1598
1459
  align-items: center;
1599
1460
  justify-content: space-between;
1600
- }
1601
- .GeckoUIPagination > :not([hidden]) ~ :not([hidden]) {
1602
- --tw-space-x-reverse: 0;
1603
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1604
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1605
- }
1606
- .GeckoUIPagination {
1461
+ :where(& > :not(:last-child)) {
1462
+ --tw-space-x-reverse: 0;
1463
+ margin-inline-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-x-reverse));
1464
+ margin-inline-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-x-reverse)));
1465
+ }
1466
+ border-top-style: var(--tw-border-style);
1607
1467
  border-top-width: 1px;
1608
- padding-left: 1rem;
1609
- padding-right: 1rem;
1610
- }
1611
- @media (min-width: 640px) {
1612
- .GeckoUIPagination {
1613
- margin-left: 0px;
1614
- margin-right: 0px;
1468
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
1469
+ @media (width >= 40rem) {
1470
+ margin-inline: calc(var(--spacing, 0.25rem) * 0);
1471
+ }
1472
+ @media (width >= 40rem) {
1615
1473
  justify-content: center;
1616
1474
  }
1617
1475
  }
@@ -1637,15 +1495,15 @@
1637
1495
  background-image: none;
1638
1496
  position: relative;
1639
1497
  display: flex;
1640
- height: 2.5rem;
1498
+ height: calc(var(--spacing, 0.25rem) * 10);
1641
1499
  align-items: center;
1642
1500
  justify-content: center;
1643
- padding: 1rem;
1644
- font-size: 0.875rem;
1645
- line-height: 1.25rem;
1646
- font-weight: 500;
1647
- --tw-text-opacity: 1;
1648
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
1501
+ padding: calc(var(--spacing, 0.25rem) * 4);
1502
+ font-size: var(--text-sm, 0.875rem);
1503
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1504
+ --tw-font-weight: var(--font-weight-medium, 500);
1505
+ font-weight: var(--font-weight-medium, 500);
1506
+ color: var(--color-text-muted);
1649
1507
  }
1650
1508
  .GeckoUIPagination__arrow:disabled {
1651
1509
  cursor: not-allowed;
@@ -1656,57 +1514,48 @@
1656
1514
  border-style: solid;
1657
1515
  border-color: #e5e7eb;
1658
1516
  display: inline-block;
1659
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
1660
- -webkit-mask-position: center;
1517
+ height: calc(var(--spacing, 0.25rem) * 4);
1518
+ width: calc(var(--spacing, 0.25rem) * 4);
1519
+ background-color: var(--color-text-primary);
1661
1520
  mask-position: center;
1662
- -webkit-mask-size: contain;
1663
1521
  mask-size: contain;
1664
- -webkit-mask-repeat: no-repeat;
1665
1522
  mask-repeat: no-repeat;
1666
- height: 1.25rem;
1667
- width: 1.25rem;
1668
- --tw-bg-opacity: 1;
1669
- background-color: rgb(var(--gecko-ui-text-muted) / var(--tw-bg-opacity, 1));
1523
+ height: calc(var(--spacing, 0.25rem) * 5);
1524
+ width: calc(var(--spacing, 0.25rem) * 5);
1525
+ background-color: var(--color-text-muted);
1670
1526
  }
1671
- .GeckoUIPagination__arrow__icon--previous {
1527
+ .GeckoUIPagination__arrow__icon[data-direction=previous] {
1672
1528
  mask-image: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.2906 6.18134C13.5777 6.47992 13.5684 6.9547 13.2698 7.2418L9.33208 10.9512L13.2698 14.6605C13.5684 14.9476 13.5777 15.4224 13.2906 15.721C13.0035 16.0196 12.5287 16.0289 12.2302 15.7418L7.73017 11.4918C7.58311 11.3504 7.5 11.1552 7.5 10.9512C7.5 10.7472 7.58311 10.552 7.73017 10.4105L12.2302 6.16055C12.5287 5.87345 13.0035 5.88276 13.2906 6.18134Z" fill="%236B7280"/></svg>');
1673
1529
  -webkit-mask-image: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.2906 6.18134C13.5777 6.47992 13.5684 6.9547 13.2698 7.2418L9.33208 10.9512L13.2698 14.6605C13.5684 14.9476 13.5777 15.4224 13.2906 15.721C13.0035 16.0196 12.5287 16.0289 12.2302 15.7418L7.73017 11.4918C7.58311 11.3504 7.5 11.1552 7.5 10.9512C7.5 10.7472 7.58311 10.552 7.73017 10.4105L12.2302 6.16055C12.5287 5.87345 13.0035 5.88276 13.2906 6.18134Z" fill="%236B7280"/></svg>');
1674
1530
  }
1675
- .GeckoUIPagination__arrow__icon--next {
1531
+ .GeckoUIPagination__arrow__icon[data-direction=next] {
1676
1532
  mask-image: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.70938 15.721C7.42228 15.4224 7.43159 14.9476 7.73017 14.6605L11.6679 10.9512L7.73017 7.2418C7.43159 6.9547 7.42228 6.47992 7.70938 6.18134C7.99647 5.88276 8.47125 5.87345 8.76983 6.16055L13.2698 10.4105C13.4169 10.5519 13.5 10.7472 13.5 10.9512C13.5 11.1552 13.4169 11.3504 13.2698 11.4918L8.76983 15.7418C8.47125 16.0289 7.99647 16.0196 7.70938 15.721Z" fill="%236B7280"/></svg>');
1677
1533
  -webkit-mask-image: url('data:image/svg+xml,<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.70938 15.721C7.42228 15.4224 7.43159 14.9476 7.73017 14.6605L11.6679 10.9512L7.73017 7.2418C7.43159 6.9547 7.42228 6.47992 7.70938 6.18134C7.99647 5.88276 8.47125 5.87345 8.76983 6.16055L13.2698 10.4105C13.4169 10.5519 13.5 10.7472 13.5 10.9512C13.5 11.1552 13.4169 11.3504 13.2698 11.4918L8.76983 15.7418C8.47125 16.0289 7.99647 16.0196 7.70938 15.721Z" fill="%236B7280"/></svg>');
1678
1534
  }
1679
1535
  .GeckoUIPagination__arrow:disabled .GeckoUIPagination__arrow__icon {
1680
- --tw-bg-opacity: 1;
1681
- background-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-bg-opacity, 1));
1536
+ background-color: var(--color-border-secondary);
1682
1537
  }
1683
1538
  .GeckoUIPagination__page-count {
1684
1539
  display: flex;
1685
1540
  flex-direction: row;
1686
1541
  align-items: center;
1687
1542
  justify-content: center;
1688
- -moz-column-gap: 0.25rem;
1689
- column-gap: 0.25rem;
1690
- padding: 1rem;
1691
- font-size: 0.875rem;
1692
- line-height: 1.25rem;
1693
- font-weight: 500;
1694
- --tw-text-opacity: 1;
1695
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
1696
- }
1697
- @media (min-width: 640px) {
1698
- .GeckoUIPagination__page-count {
1543
+ column-gap: calc(var(--spacing, 0.25rem) * 1);
1544
+ padding: calc(var(--spacing, 0.25rem) * 4);
1545
+ font-size: var(--text-sm, 0.875rem);
1546
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1547
+ --tw-font-weight: var(--font-weight-medium, 500);
1548
+ font-weight: var(--font-weight-medium, 500);
1549
+ color: var(--color-text-muted);
1550
+ @media (width >= 40rem) {
1699
1551
  display: none;
1700
1552
  }
1701
1553
  }
1702
1554
  .GeckoUIPagination__page-buttons {
1703
1555
  display: none;
1704
1556
  flex-direction: row;
1705
- -moz-column-gap: 0.5rem;
1706
- column-gap: 0.5rem;
1707
- }
1708
- @media (min-width: 640px) {
1709
- .GeckoUIPagination__page-buttons {
1557
+ column-gap: calc(var(--spacing, 0.25rem) * 2);
1558
+ @media (width >= 40rem) {
1710
1559
  display: flex;
1711
1560
  }
1712
1561
  }
@@ -1732,42 +1581,38 @@
1732
1581
  background-image: none;
1733
1582
  position: relative;
1734
1583
  display: flex;
1735
- height: 2.5rem;
1584
+ height: calc(var(--spacing, 0.25rem) * 10);
1736
1585
  align-items: center;
1737
1586
  justify-content: center;
1738
- padding: 1rem;
1739
- font-size: 0.875rem;
1740
- line-height: 1.25rem;
1741
- font-weight: 500;
1742
- --tw-text-opacity: 1;
1743
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
1587
+ padding: calc(var(--spacing, 0.25rem) * 4);
1588
+ font-size: var(--text-sm, 0.875rem);
1589
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1590
+ --tw-font-weight: var(--font-weight-medium, 500);
1591
+ font-weight: var(--font-weight-medium, 500);
1592
+ color: var(--color-text-muted);
1744
1593
  }
1745
1594
  .GeckoUIPagination__page-button:hover {
1746
- --tw-text-opacity: 1;
1747
- color: rgb(var(--gecko-ui-text-primary) / var(--tw-text-opacity, 1));
1595
+ color: var(--color-text-primary);
1748
1596
  }
1749
- .GeckoUIPagination__page-button--active {
1750
- --tw-text-opacity: 1;
1751
- color: rgb(var(--gecko-ui-primary-600) / var(--tw-text-opacity, 1));
1597
+ .GeckoUIPagination__page-button[data-active] {
1598
+ color: var(--color-primary-600);
1752
1599
  text-decoration-line: underline;
1753
1600
  text-underline-offset: 2px;
1754
1601
  }
1755
- .GeckoUIPagination__page-button--active:hover {
1756
- --tw-text-opacity: 1;
1757
- color: rgb(var(--gecko-ui-primary-700) / var(--tw-text-opacity, 1));
1602
+ .GeckoUIPagination__page-button[data-active]:hover {
1603
+ color: var(--color-primary-700);
1758
1604
  }
1759
- .GeckoUIPagination__page-button--ellipsis {
1605
+ .GeckoUIPagination__page-button[data-ellipsis] {
1760
1606
  cursor: default;
1761
- --tw-text-opacity: 1;
1762
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
1607
+ color: var(--color-text-disabled);
1763
1608
  }
1764
1609
  .GeckoUIInputError {
1765
1610
  width: 100%;
1766
- font-size: 0.875rem;
1767
- line-height: 1.25rem;
1768
- font-weight: 400;
1769
- --tw-text-opacity: 1;
1770
- color: rgb(220 38 38 / var(--tw-text-opacity, 1));
1611
+ font-size: var(--text-sm, 0.875rem);
1612
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1613
+ --tw-font-weight: var(--font-weight-normal, 400);
1614
+ font-weight: var(--font-weight-normal, 400);
1615
+ color: var(--color-red-600, oklch(57.7% 0.245 27.325));
1771
1616
  }
1772
1617
  .GeckoUICounterInput {
1773
1618
  box-sizing: border-box;
@@ -1777,15 +1622,15 @@
1777
1622
  display: flex;
1778
1623
  align-items: center;
1779
1624
  }
1780
- .GeckoUICounterInput--disabled {
1625
+ .GeckoUICounterInput[data-state=disabled] {
1781
1626
  cursor: not-allowed;
1782
- opacity: 0.5;
1627
+ opacity: 50%;
1783
1628
  }
1784
- .GeckoUICounterInput--readonly .GeckoUICounterInput__button {
1629
+ .GeckoUICounterInput[data-state=readonly] .GeckoUICounterInput__button {
1785
1630
  cursor: not-allowed;
1786
- }
1787
- .GeckoUICounterInput--readonly .GeckoUICounterInput__button:disabled {
1788
- opacity: 1;
1631
+ &:disabled {
1632
+ opacity: 100%;
1633
+ }
1789
1634
  }
1790
1635
  .GeckoUICounterInput__button {
1791
1636
  box-sizing: border-box;
@@ -1807,39 +1652,47 @@
1807
1652
  cursor: pointer;
1808
1653
  background-color: transparent;
1809
1654
  background-image: none;
1810
- outline-width: 2px;
1655
+ outline: none;
1656
+ }
1657
+ .GeckoUICounterInput__button:focus-visible {
1658
+ outline: 2px solid var(--color-primary-300);
1811
1659
  outline-offset: 2px;
1812
- outline-color: rgb(var(--gecko-ui-primary-300) / 1);
1660
+ }
1661
+ .GeckoUICounterInput__button {
1813
1662
  display: flex;
1814
1663
  align-items: center;
1815
1664
  justify-content: center;
1816
- --tw-border-opacity: 1;
1817
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
1818
- --tw-bg-opacity: 1;
1819
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
1820
- }
1821
- .GeckoUICounterInput__button:hover:enabled {
1822
- --tw-bg-opacity: 1;
1823
- background-color: rgb(var(--gecko-ui-surface-hover) / var(--tw-bg-opacity, 1));
1824
- }
1825
- .GeckoUICounterInput__button:disabled {
1826
- cursor: not-allowed;
1827
- opacity: 0.5;
1665
+ border-color: var(--color-border-secondary);
1666
+ background-color: var(--color-surface-primary);
1667
+ &:enabled {
1668
+ &:hover {
1669
+ @media (hover: hover) {
1670
+ background-color: var(--color-surface-hover);
1671
+ }
1672
+ }
1673
+ }
1674
+ &:disabled {
1675
+ cursor: not-allowed;
1676
+ }
1677
+ &:disabled {
1678
+ opacity: 50%;
1679
+ }
1828
1680
  }
1829
- .GeckoUICounterInput__button--decrement {
1830
- border-top-left-radius: 0.375rem;
1831
- border-bottom-left-radius: 0.375rem;
1681
+ .GeckoUICounterInput__button[data-action=decrement] {
1682
+ border-top-left-radius: var(--radius-md, 0.375rem);
1683
+ border-bottom-left-radius: var(--radius-md, 0.375rem);
1684
+ border-style: var(--tw-border-style);
1832
1685
  border-width: 1px;
1833
1686
  }
1834
- .GeckoUICounterInput__button--increment {
1835
- border-top-right-radius: 0.375rem;
1836
- border-bottom-right-radius: 0.375rem;
1687
+ .GeckoUICounterInput__button[data-action=increment] {
1688
+ border-top-right-radius: var(--radius-md, 0.375rem);
1689
+ border-bottom-right-radius: var(--radius-md, 0.375rem);
1690
+ border-style: var(--tw-border-style);
1837
1691
  border-width: 1px;
1838
1692
  }
1839
1693
  .GeckoUICounterInput:focus-within .GeckoUICounterInput__button,
1840
1694
  .GeckoUICounterInput:focus-within .GeckoUICounterInput__input {
1841
- --tw-border-opacity: 1;
1842
- border-color: rgb(var(--gecko-ui-primary-400) / var(--tw-border-opacity, 1));
1695
+ border-color: var(--color-primary-400);
1843
1696
  }
1844
1697
  .GeckoUICounterInput__input {
1845
1698
  box-sizing: border-box;
@@ -1857,19 +1710,17 @@
1857
1710
  margin: 0;
1858
1711
  padding: 0;
1859
1712
  text-transform: none;
1860
- --tw-border-opacity: 1;
1861
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
1713
+ border-color: var(--color-border-secondary);
1862
1714
  background-color: transparent;
1863
1715
  text-align: center;
1864
- outline: 2px solid transparent;
1865
- outline-offset: 2px;
1866
- border-top-width: 1px;
1867
- border-bottom-width: 1px;
1716
+ --tw-outline-style: none;
1717
+ outline-style: none;
1718
+ border-block-style: var(--tw-border-style);
1719
+ border-block-width: 1px;
1868
1720
  }
1869
1721
  .GeckoUICounterInput__input:disabled {
1870
1722
  cursor: not-allowed;
1871
- --tw-bg-opacity: 1;
1872
- background-color: rgb(var(--gecko-ui-surface-disabled) / var(--tw-bg-opacity, 1));
1723
+ background-color: var(--color-surface-disabled);
1873
1724
  }
1874
1725
  .GeckoUICounterInput__icon {
1875
1726
  box-sizing: border-box;
@@ -1877,66 +1728,60 @@
1877
1728
  border-style: solid;
1878
1729
  border-color: #e5e7eb;
1879
1730
  display: inline-block;
1880
- height: 1rem;
1881
- width: 1rem;
1882
- --tw-bg-opacity: 1;
1883
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
1884
- -webkit-mask-position: center;
1731
+ height: calc(var(--spacing, 0.25rem) * 4);
1732
+ width: calc(var(--spacing, 0.25rem) * 4);
1733
+ background-color: var(--color-text-primary);
1885
1734
  mask-position: center;
1886
- -webkit-mask-size: contain;
1887
1735
  mask-size: contain;
1888
- -webkit-mask-repeat: no-repeat;
1889
1736
  mask-repeat: no-repeat;
1890
1737
  }
1891
- .GeckoUICounterInput__icon--minus {
1892
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
1738
+ .GeckoUICounterInput__icon[data-icon=minus] {
1893
1739
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
1894
1740
  }
1895
- .GeckoUICounterInput__icon--plus {
1896
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
1741
+ .GeckoUICounterInput__icon[data-icon=plus] {
1897
1742
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
1898
1743
  }
1899
- .GeckoUICounterInput--size-sm .GeckoUICounterInput__button {
1900
- height: 2rem;
1901
- width: 2rem;
1744
+ .GeckoUICounterInput[data-size=sm] .GeckoUICounterInput__button {
1745
+ height: calc(var(--spacing, 0.25rem) * 8);
1746
+ width: calc(var(--spacing, 0.25rem) * 8);
1902
1747
  }
1903
- .GeckoUICounterInput--size-sm .GeckoUICounterInput__input {
1904
- height: 2rem;
1905
- width: 3rem;
1906
- font-size: 0.75rem;
1907
- line-height: 1rem;
1748
+ .GeckoUICounterInput[data-size=sm] .GeckoUICounterInput__input {
1749
+ height: calc(var(--spacing, 0.25rem) * 8);
1750
+ width: calc(var(--spacing, 0.25rem) * 12);
1751
+ font-size: var(--text-xs, 0.75rem);
1752
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
1908
1753
  }
1909
- .GeckoUICounterInput--size-sm .GeckoUICounterInput__icon {
1910
- height: 0.75rem;
1911
- width: 0.75rem;
1754
+ .GeckoUICounterInput[data-size=sm] .GeckoUICounterInput__icon {
1755
+ height: calc(var(--spacing, 0.25rem) * 3);
1756
+ width: calc(var(--spacing, 0.25rem) * 3);
1912
1757
  }
1913
- .GeckoUICounterInput--size-md .GeckoUICounterInput__button {
1914
- height: 2.5rem;
1915
- width: 2.5rem;
1758
+ .GeckoUICounterInput[data-size=md] .GeckoUICounterInput__button {
1759
+ height: calc(var(--spacing, 0.25rem) * 10);
1760
+ width: calc(var(--spacing, 0.25rem) * 10);
1916
1761
  }
1917
- .GeckoUICounterInput--size-md .GeckoUICounterInput__input {
1918
- height: 2.5rem;
1919
- width: 4rem;
1920
- font-size: 0.875rem;
1921
- line-height: 1.25rem;
1762
+ .GeckoUICounterInput[data-size=md] .GeckoUICounterInput__input {
1763
+ height: calc(var(--spacing, 0.25rem) * 10);
1764
+ width: calc(var(--spacing, 0.25rem) * 16);
1765
+ font-size: var(--text-sm, 0.875rem);
1766
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1922
1767
  }
1923
- .GeckoUICounterInput--size-md .GeckoUICounterInput__icon {
1924
- height: 1rem;
1925
- width: 1rem;
1768
+ .GeckoUICounterInput[data-size=md] .GeckoUICounterInput__icon {
1769
+ height: calc(var(--spacing, 0.25rem) * 4);
1770
+ width: calc(var(--spacing, 0.25rem) * 4);
1926
1771
  }
1927
- .GeckoUICounterInput--size-lg .GeckoUICounterInput__button {
1928
- height: 3rem;
1929
- width: 3rem;
1772
+ .GeckoUICounterInput[data-size=lg] .GeckoUICounterInput__button {
1773
+ height: calc(var(--spacing, 0.25rem) * 12);
1774
+ width: calc(var(--spacing, 0.25rem) * 12);
1930
1775
  }
1931
- .GeckoUICounterInput--size-lg .GeckoUICounterInput__input {
1932
- height: 3rem;
1933
- width: 5rem;
1934
- font-size: 1rem;
1935
- line-height: 1.5rem;
1776
+ .GeckoUICounterInput[data-size=lg] .GeckoUICounterInput__input {
1777
+ height: calc(var(--spacing, 0.25rem) * 12);
1778
+ width: calc(var(--spacing, 0.25rem) * 20);
1779
+ font-size: var(--text-base, 1rem);
1780
+ line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
1936
1781
  }
1937
- .GeckoUICounterInput--size-lg .GeckoUICounterInput__icon {
1938
- height: 1.25rem;
1939
- width: 1.25rem;
1782
+ .GeckoUICounterInput[data-size=lg] .GeckoUICounterInput__icon {
1783
+ height: calc(var(--spacing, 0.25rem) * 5);
1784
+ width: calc(var(--spacing, 0.25rem) * 5);
1940
1785
  }
1941
1786
  .GeckoUICalendar {
1942
1787
  box-sizing: border-box;
@@ -1944,76 +1789,69 @@
1944
1789
  border-style: solid;
1945
1790
  border-color: #e5e7eb;
1946
1791
  margin-top: 1px;
1947
- min-width: 320px;
1948
1792
  max-width: 320px;
1949
- border-radius: 0.375rem;
1793
+ min-width: 320px;
1794
+ border-radius: var(--radius-md, 0.375rem);
1795
+ border-style: var(--tw-border-style);
1950
1796
  border-width: 1px;
1951
- --tw-border-opacity: 1;
1952
- border-color: rgb(var(--gecko-ui-border-primary) / var(--tw-border-opacity, 1));
1953
- padding-left: 0.75rem;
1954
- padding-right: 0.75rem;
1955
- padding-top: 1rem;
1956
- padding-bottom: 1rem;
1957
- font-size: 0.875rem;
1958
- line-height: 1.25rem;
1959
- }
1960
- .GeckoUICalendar--calendars-2 {
1961
- min-width: -moz-fit-content;
1962
- min-width: fit-content;
1963
- max-width: -moz-fit-content;
1797
+ border-color: var(--color-border-primary);
1798
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
1799
+ padding-block: calc(var(--spacing, 0.25rem) * 4);
1800
+ font-size: var(--text-sm, 0.875rem);
1801
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1802
+ }
1803
+ .GeckoUICalendar[data-calendars="2"] {
1964
1804
  max-width: fit-content;
1805
+ min-width: fit-content;
1965
1806
  }
1966
1807
  .GeckoUICalendar__dual {
1967
1808
  display: flex;
1968
- gap: 1rem;
1809
+ gap: calc(var(--spacing, 0.25rem) * 4);
1969
1810
  }
1970
- .GeckoUICalendar__dual--first,
1971
- .GeckoUICalendar__dual--second {
1972
- min-width: 296px;
1811
+ .GeckoUICalendar__dual__item {
1973
1812
  max-width: 296px;
1813
+ min-width: 296px;
1974
1814
  }
1975
- .GeckoUICalendar__dual--second {
1815
+ .GeckoUICalendar__dual__item[data-position=second] {
1976
1816
  display: none;
1977
- }
1978
- @media (min-width: 768px) {
1979
- .GeckoUICalendar__dual--second {
1817
+ @media (width >= 48rem) {
1980
1818
  display: block;
1981
1819
  }
1982
1820
  }
1983
- .GeckoUILoadingButton--loading {
1984
- gap: 0.5rem;
1821
+ .GeckoUILoadingButton[data-loading] {
1822
+ gap: calc(var(--spacing, 0.25rem) * 2);
1985
1823
  }
1986
1824
  .GeckoUIConfirmDialog__dialog {
1987
- padding-top: 1.5rem;
1988
- padding-bottom: 1rem;
1825
+ padding-top: calc(var(--spacing, 0.25rem) * 6);
1826
+ padding-bottom: calc(var(--spacing, 0.25rem) * 4);
1989
1827
  }
1990
1828
  .GeckoUIConfirmDialog__title {
1991
- font-size: 1rem;
1992
- line-height: 1.5rem;
1993
- font-weight: 600;
1829
+ font-size: var(--text-base, 1rem);
1830
+ line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
1831
+ --tw-leading: 1;
1994
1832
  line-height: 1;
1995
- --tw-text-opacity: 1;
1996
- color: rgb(var(--gecko-ui-text-primary) / var(--tw-text-opacity, 1));
1833
+ --tw-font-weight: var(--font-weight-semibold, 600);
1834
+ font-weight: var(--font-weight-semibold, 600);
1835
+ color: var(--color-text-primary);
1997
1836
  }
1998
1837
  .GeckoUIConfirmDialog__content {
1999
- margin-bottom: 0.25rem;
2000
- padding-top: 1rem;
2001
- padding-bottom: 1rem;
2002
- font-size: 0.875rem;
2003
- line-height: 1.25rem;
2004
- font-weight: 400;
2005
- --tw-text-opacity: 1;
2006
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
1838
+ margin-bottom: calc(var(--spacing, 0.25rem) * 1);
1839
+ padding-block: calc(var(--spacing, 0.25rem) * 4);
1840
+ font-size: var(--text-sm, 0.875rem);
1841
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1842
+ --tw-font-weight: var(--font-weight-normal, 400);
1843
+ font-weight: var(--font-weight-normal, 400);
1844
+ color: var(--color-text-muted);
2007
1845
  }
2008
1846
  .GeckoUIConfirmDialog__actions {
2009
1847
  display: flex;
2010
1848
  flex-direction: row;
2011
1849
  justify-content: flex-end;
2012
- -moz-column-gap: 0.5rem;
2013
- column-gap: 0.5rem;
2014
- font-size: 0.875rem;
2015
- line-height: 1.25rem;
2016
- font-weight: 600;
1850
+ column-gap: calc(var(--spacing, 0.25rem) * 2);
1851
+ font-size: var(--text-sm, 0.875rem);
1852
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1853
+ --tw-font-weight: var(--font-weight-semibold, 600);
1854
+ font-weight: var(--font-weight-semibold, 600);
2017
1855
  }
2018
1856
  .GeckoUIDateInput {
2019
1857
  box-sizing: border-box;
@@ -2022,65 +1860,61 @@
2022
1860
  border-color: #e5e7eb;
2023
1861
  position: relative;
2024
1862
  display: flex;
2025
- min-height: 2.5rem;
1863
+ min-height: calc(var(--spacing, 0.25rem) * 10);
2026
1864
  align-items: center;
2027
- gap: 0.75rem;
2028
- border-radius: 0.375rem;
1865
+ gap: calc(var(--spacing, 0.25rem) * 3);
1866
+ border-radius: var(--radius-md, 0.375rem);
1867
+ border-style: var(--tw-border-style);
2029
1868
  border-width: 1px;
2030
- --tw-border-opacity: 1;
2031
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
2032
- padding-left: 0.75rem;
2033
- padding-right: 0.75rem;
1869
+ border-color: var(--color-border-secondary);
1870
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
2034
1871
  }
2035
- .GeckoUIDateInput--disabled {
1872
+ .GeckoUIDateInput[data-state=disabled] {
2036
1873
  cursor: not-allowed;
2037
- --tw-bg-opacity: 1;
2038
- background-color: rgb(var(--gecko-ui-surface-disabled) / var(--tw-bg-opacity, 1));
2039
- --tw-text-opacity: 1;
2040
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
1874
+ background-color: var(--color-surface-disabled);
1875
+ color: var(--color-text-disabled);
2041
1876
  }
2042
- .GeckoUIDateInput--disabled .GeckoUIDateInput__segment {
1877
+ .GeckoUIDateInput[data-state=disabled] .GeckoUIDateInput__segment {
2043
1878
  cursor: not-allowed;
2044
1879
  }
2045
- .GeckoUIDateInput--readOnly .GeckoUIDateInput__segment:focus-within {
2046
- background-color: transparent;
2047
- }
2048
- .GeckoUIDateInput--readOnly .GeckoUIDateInput__segment:focus-within:hover {
1880
+ .GeckoUIDateInput[data-state=readonly] .GeckoUIDateInput__segment:focus-within {
2049
1881
  background-color: transparent;
1882
+ &:hover {
1883
+ @media (hover: hover) {
1884
+ background-color: transparent;
1885
+ }
1886
+ }
2050
1887
  }
2051
- .GeckoUIDateInput--readOnly .GeckoUIDateInput__segment--empty {
2052
- --tw-text-opacity: 1;
2053
- color: rgb(var(--gecko-ui-text-placeholder) / var(--tw-text-opacity, 1));
1888
+ .GeckoUIDateInput[data-state=readonly] .GeckoUIDateInput__segment[data-empty] {
1889
+ color: var(--color-text-placeholder);
2054
1890
  }
2055
- .GeckoUIDateInput--readOnly .GeckoUIDateInput__segment:hover {
1891
+ .GeckoUIDateInput[data-state=readonly] .GeckoUIDateInput__segment:hover {
2056
1892
  background-color: transparent;
2057
1893
  }
2058
- .GeckoUIDateInput--enabled {
1894
+ .GeckoUIDateInput[data-state=enabled] {
2059
1895
  cursor: text;
2060
1896
  }
2061
- .GeckoUIDateInput--enabled:focus-within {
2062
- --tw-border-opacity: 1;
2063
- border-color: rgb(var(--gecko-ui-primary-500) / var(--tw-border-opacity, 1));
1897
+ .GeckoUIDateInput[data-state=enabled]:focus-within {
1898
+ border-color: var(--color-primary-500);
2064
1899
  }
2065
- .GeckoUIDateInput--enabled:hover {
2066
- --tw-border-opacity: 1;
2067
- border-color: rgb(var(--gecko-ui-primary-300) / var(--tw-border-opacity, 1));
1900
+ .GeckoUIDateInput[data-state=enabled]:hover {
1901
+ border-color: var(--color-primary-300);
2068
1902
  }
2069
- .GeckoUIDateInput--error {
2070
- --tw-border-opacity: 1;
2071
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
2072
- }
2073
- .GeckoUIDateInput--error:hover {
2074
- --tw-border-opacity: 1;
2075
- border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
1903
+ .GeckoUIDateInput[data-error] {
1904
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
1905
+ &:hover {
1906
+ @media (hover: hover) {
1907
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
1908
+ }
1909
+ }
2076
1910
  }
2077
- .GeckoUIDateInput--empty .GeckoUIDateInput__display-container {
2078
- width: 0px;
1911
+ .GeckoUIDateInput[data-empty] .GeckoUIDateInput__display-container {
1912
+ width: calc(var(--spacing, 0.25rem) * 0);
2079
1913
  flex: 0;
2080
1914
  overflow: hidden;
2081
1915
  }
2082
- .GeckoUIDateInput--enabled:focus-within .GeckoUIDateInput__display-container {
2083
- flex: 1 1 0%;
1916
+ .GeckoUIDateInput[data-state=enabled]:focus-within .GeckoUIDateInput__display-container {
1917
+ flex: 1;
2084
1918
  overflow: visible;
2085
1919
  }
2086
1920
  .GeckoUIDateInput__placeholder {
@@ -2088,85 +1922,86 @@
2088
1922
  display: -webkit-box;
2089
1923
  -webkit-box-orient: vertical;
2090
1924
  -webkit-line-clamp: 1;
2091
- flex: 1 1 0%;
2092
- font-size: 0.875rem;
2093
- line-height: 1.25rem;
2094
- --tw-text-opacity: 1;
2095
- color: rgb(var(--gecko-ui-text-placeholder) / var(--tw-text-opacity, 1));
1925
+ flex: 1;
1926
+ font-size: var(--text-sm, 0.875rem);
1927
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
1928
+ color: var(--color-text-placeholder);
2096
1929
  }
2097
- .GeckoUIDateInput--enabled:focus-within .GeckoUIDateInput__placeholder {
1930
+ .GeckoUIDateInput[data-state=enabled]:focus-within .GeckoUIDateInput__placeholder {
2098
1931
  display: none;
2099
1932
  }
2100
1933
  .GeckoUIDateInput__hidden-input {
2101
1934
  pointer-events: none;
2102
1935
  position: absolute;
2103
- left: 0px;
2104
- top: 0px;
2105
- z-index: -10;
1936
+ top: calc(var(--spacing, 0.25rem) * 0);
1937
+ left: calc(var(--spacing, 0.25rem) * 0);
1938
+ z-index: calc(10 * -1);
2106
1939
  height: 100%;
2107
1940
  width: 100%;
1941
+ --tw-border-style: none;
2108
1942
  border-style: none;
2109
1943
  background-color: transparent;
2110
- opacity: 0;
2111
- outline: 2px solid transparent;
2112
- outline-offset: 2px;
1944
+ opacity: 0%;
1945
+ --tw-outline-style: none;
1946
+ outline-style: none;
2113
1947
  }
2114
1948
  .GeckoUIDateInput__display-container {
2115
1949
  margin-left: 1px;
2116
1950
  display: flex;
2117
- flex: 1 1 0%;
1951
+ flex: 1;
2118
1952
  align-items: center;
2119
- font-size: 0.875rem;
2120
- line-height: 1.25rem;
1953
+ font-size: var(--text-sm, 0.875rem);
1954
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2121
1955
  }
2122
1956
  .GeckoUIDateInput__segment {
2123
1957
  cursor: text;
2124
1958
  border-radius: 0.25rem;
2125
- padding-top: 0.125rem;
2126
- padding-bottom: 0.125rem;
1959
+ padding-block: calc(var(--spacing, 0.25rem) * 0.5);
2127
1960
  text-align: center;
2128
- font-size: 0.875rem;
2129
- line-height: 1.25rem;
1961
+ font-size: var(--text-sm, 0.875rem);
1962
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2130
1963
  transition-property:
2131
1964
  color,
2132
1965
  background-color,
2133
1966
  border-color,
1967
+ outline-color,
2134
1968
  text-decoration-color,
2135
1969
  fill,
2136
- stroke;
1970
+ stroke,
1971
+ --tw-gradient-from,
1972
+ --tw-gradient-via,
1973
+ --tw-gradient-to;
1974
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
1975
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
1976
+ --tw-duration: 150ms;
2137
1977
  transition-duration: 150ms;
2138
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1978
+ --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
1979
+ transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
2139
1980
  }
2140
1981
  .GeckoUIDateInput__segment:focus-within {
2141
- --tw-bg-opacity: 1;
2142
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
2143
- }
2144
- .GeckoUIDateInput__segment:focus-within:hover {
2145
- --tw-bg-opacity: 1;
2146
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
1982
+ background-color: var(--color-surface-hover-strong);
1983
+ &:hover {
1984
+ @media (hover: hover) {
1985
+ background-color: var(--color-surface-hover-strong);
1986
+ }
1987
+ }
2147
1988
  }
2148
- .GeckoUIDateInput__segment--empty {
2149
- --tw-text-opacity: 1;
2150
- color: rgb(var(--gecko-ui-text-placeholder) / var(--tw-text-opacity, 1));
1989
+ .GeckoUIDateInput__segment[data-empty] {
1990
+ color: var(--color-text-placeholder);
2151
1991
  }
2152
1992
  .GeckoUIDateInput__segment:hover {
2153
- --tw-bg-opacity: 1;
2154
- background-color: rgb(var(--gecko-ui-surface-hover) / var(--tw-bg-opacity, 1));
1993
+ background-color: var(--color-surface-hover);
2155
1994
  }
2156
1995
  .GeckoUIDateInput__separator {
1996
+ color: var(--color-text-muted);
2157
1997
  -webkit-user-select: none;
2158
- -moz-user-select: none;
2159
1998
  user-select: none;
2160
- --tw-text-opacity: 1;
2161
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
2162
1999
  }
2163
- .GeckoUIDateInput--disabled .GeckoUIDateInput__separator {
2164
- --tw-text-opacity: 1;
2165
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
2000
+ .GeckoUIDateInput[data-state=disabled] .GeckoUIDateInput__separator {
2001
+ color: var(--color-text-disabled);
2166
2002
  }
2167
- .GeckoUIDateInput--readOnly .GeckoUIDateInput__separator {
2168
- --tw-text-opacity: 1;
2169
- color: rgb(var(--gecko-ui-text-secondary) / var(--tw-text-opacity, 1));
2003
+ .GeckoUIDateInput[data-state=readonly] .GeckoUIDateInput__separator {
2004
+ color: var(--color-text-secondary);
2170
2005
  }
2171
2006
  .GeckoUIDateInput__prefix,
2172
2007
  .GeckoUIDateInput__suffix {
@@ -2200,11 +2035,10 @@
2200
2035
  cursor: pointer;
2201
2036
  align-items: center;
2202
2037
  justify-content: center;
2203
- padding: 0.25rem;
2038
+ padding: calc(var(--spacing, 0.25rem) * 1);
2204
2039
  }
2205
2040
  .GeckoUIDateInput__clear-button:hover .GeckoUI-icon__clear {
2206
- --tw-bg-opacity: 1;
2207
- background-color: rgb(var(--gecko-ui-text-secondary) / var(--tw-bg-opacity, 1));
2041
+ background-color: var(--color-text-secondary);
2208
2042
  }
2209
2043
  .GeckoUIDateInput__calendar-icon {
2210
2044
  box-sizing: border-box;
@@ -2212,26 +2046,21 @@
2212
2046
  border-style: solid;
2213
2047
  border-color: #e5e7eb;
2214
2048
  display: inline-block;
2215
- height: 1rem;
2216
- width: 1rem;
2217
- --tw-bg-opacity: 1;
2218
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
2219
- -webkit-mask-position: center;
2049
+ height: calc(var(--spacing, 0.25rem) * 4);
2050
+ width: calc(var(--spacing, 0.25rem) * 4);
2051
+ background-color: var(--color-text-primary);
2220
2052
  mask-position: center;
2221
- -webkit-mask-size: contain;
2222
2053
  mask-size: contain;
2223
- -webkit-mask-repeat: no-repeat;
2224
2054
  mask-repeat: no-repeat;
2225
2055
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>');
2226
2056
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>');
2227
2057
  }
2228
- .GeckoUIDateInput--disabled .GeckoUIDateInput__calendar-icon {
2058
+ .GeckoUIDateInput[data-state=disabled] .GeckoUIDateInput__calendar-icon {
2229
2059
  cursor: not-allowed;
2230
2060
  }
2231
2061
  .GeckoUIDateInput__calendar {
2232
2062
  z-index: 10;
2233
- --tw-bg-opacity: 1;
2234
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
2063
+ background-color: var(--color-surface-primary);
2235
2064
  }
2236
2065
  .GeckoUISelectMenu {
2237
2066
  box-sizing: border-box;
@@ -2239,31 +2068,25 @@
2239
2068
  border-style: solid;
2240
2069
  border-color: #e5e7eb;
2241
2070
  position: absolute;
2242
- left: 0px;
2071
+ left: calc(var(--spacing, 0.25rem) * 0);
2243
2072
  z-index: 10;
2244
2073
  display: flex;
2245
2074
  max-height: 240px;
2246
2075
  width: 100%;
2247
- min-width: 0px;
2076
+ min-width: calc(var(--spacing, 0.25rem) * 0);
2248
2077
  flex-direction: column;
2249
2078
  gap: 1px;
2250
- border-radius: 0.375rem;
2251
- --tw-bg-opacity: 1;
2252
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
2253
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2254
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
2255
- box-shadow:
2256
- var(--tw-ring-offset-shadow, 0 0 #0000),
2257
- var(--tw-ring-shadow, 0 0 #0000),
2258
- var(--tw-shadow);
2259
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2260
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2079
+ border-radius: var(--radius-md, 0.375rem);
2080
+ background-color: var(--color-surface-primary);
2081
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2082
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2261
2083
  box-shadow:
2084
+ var(--tw-inset-shadow),
2085
+ var(--tw-inset-ring-shadow),
2262
2086
  var(--tw-ring-offset-shadow),
2263
2087
  var(--tw-ring-shadow),
2264
- var(--tw-shadow, 0 0 #0000);
2265
- --tw-ring-opacity: 1;
2266
- --tw-ring-color: rgb(var(--gecko-ui-border-primary) / var(--tw-ring-opacity, 1));
2088
+ var(--tw-shadow);
2089
+ --tw-ring-color: var(--color-border-primary);
2267
2090
  }
2268
2091
  .GeckoUISelectMenu__items {
2269
2092
  box-sizing: border-box;
@@ -2271,7 +2094,7 @@
2271
2094
  border-style: solid;
2272
2095
  border-color: #e5e7eb;
2273
2096
  scrollbar-width: thin;
2274
- scrollbar-color: rgb(var(--gecko-ui-scrollbar-thumb)) transparent;
2097
+ scrollbar-color: var(--gecko-ui-scrollbar-thumb) transparent;
2275
2098
  scrollbar-gutter: auto;
2276
2099
  }
2277
2100
  .GeckoUISelectMenu__items -webkit-scrollbar {
@@ -2281,10 +2104,10 @@
2281
2104
  background: transparent;
2282
2105
  }
2283
2106
  .GeckoUISelectMenu__items -webkit-scrollbar-thumb {
2284
- background: rgb(var(--gecko-ui-scrollbar-thumb));
2107
+ background: var(--gecko-ui-scrollbar-thumb);
2285
2108
  }
2286
2109
  .GeckoUISelectMenu__items -webkit-scrollbar-thumb:hover {
2287
- background: rgb(var(--gecko-ui-scrollbar-thumb-hover));
2110
+ background: var(--gecko-ui-scrollbar-thumb-hover);
2288
2111
  }
2289
2112
  .GeckoUISelectMenu__items {
2290
2113
  scrollbar-gutter: stable overlay;
@@ -2293,80 +2116,70 @@
2293
2116
  gap: 1px;
2294
2117
  overflow-y: auto;
2295
2118
  overscroll-behavior: contain;
2296
- padding: 0.5rem;
2119
+ padding: calc(var(--spacing, 0.25rem) * 2);
2297
2120
  }
2298
- .GeckoUISelectMenu--with-dropdown-search {
2121
+ .GeckoUISelectMenu[data-with-search] {
2299
2122
  max-height: 260px;
2300
2123
  }
2301
2124
  .GeckoUISelectMenu__search-container {
2302
- border-radius: 0px;
2303
- border-left-width: 0px;
2304
- border-right-width: 0px;
2125
+ border-radius: 0;
2126
+ border-inline-style: var(--tw-border-style);
2127
+ border-inline-width: 0px;
2128
+ border-top-style: var(--tw-border-style);
2305
2129
  border-top-width: 0px;
2306
2130
  }
2307
2131
  .GeckoUISelectMenu__search-container:hover {
2308
- --tw-border-opacity: 1;
2309
- border-color: rgb(var(--gecko-ui-border-primary) / var(--tw-border-opacity, 1));
2132
+ border-color: var(--color-border-primary);
2310
2133
  }
2311
2134
  .GeckoUISelectMenu__search-container:focus-within {
2312
- --tw-border-opacity: 1;
2313
- border-color: rgb(var(--gecko-ui-border-primary) / var(--tw-border-opacity, 1));
2135
+ border-color: var(--color-border-primary);
2314
2136
  }
2315
2137
  .GeckoUIDateRangeInputWrapper {
2316
2138
  width: 100%;
2317
2139
  }
2318
2140
  .GeckoUIDateRangeInput__range-separator {
2319
- margin-left: 0.25rem;
2320
- margin-right: 0.25rem;
2141
+ margin-inline: calc(var(--spacing, 0.25rem) * 1);
2142
+ padding-bottom: 1px;
2143
+ white-space: nowrap;
2144
+ color: var(--color-text-secondary);
2321
2145
  -webkit-user-select: none;
2322
- -moz-user-select: none;
2323
2146
  user-select: none;
2324
- white-space: nowrap;
2325
- padding-bottom: 1px;
2326
- --tw-text-opacity: 1;
2327
- color: rgb(var(--gecko-ui-text-secondary) / var(--tw-text-opacity, 1));
2328
2147
  }
2329
2148
  .GeckoUIDateRangeInput__calendar {
2330
- --tw-bg-opacity: 1;
2331
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
2149
+ background-color: var(--color-surface-primary);
2332
2150
  }
2333
2151
  .GeckoUISelectEmpty {
2334
- padding-left: 0.75rem;
2335
- padding-right: 0.75rem;
2336
- padding-top: 0.5rem;
2337
- padding-bottom: 0.5rem;
2152
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
2153
+ padding-block: calc(var(--spacing, 0.25rem) * 2);
2338
2154
  text-align: center;
2339
- font-size: 0.875rem;
2340
- line-height: 1.25rem;
2341
- --tw-text-opacity: 1;
2342
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
2155
+ font-size: var(--text-sm, 0.875rem);
2156
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2157
+ color: var(--color-text-disabled);
2343
2158
  }
2344
2159
  .GeckoUISelectOption {
2345
2160
  display: flex;
2346
2161
  cursor: pointer;
2347
- scroll-margin: 0.5rem;
2162
+ scroll-margin: calc(var(--spacing, 0.25rem) * 2);
2348
2163
  flex-direction: row;
2349
2164
  align-items: center;
2350
2165
  justify-content: space-between;
2351
- gap: 0.75rem;
2166
+ gap: calc(var(--spacing, 0.25rem) * 3);
2352
2167
  border-radius: 0.25rem;
2353
- padding-top: 0.5rem;
2354
- padding-bottom: 0.5rem;
2355
- padding-left: 12px;
2168
+ padding-block: calc(var(--spacing, 0.25rem) * 2);
2356
2169
  padding-right: 16px;
2170
+ padding-left: 12px;
2357
2171
  text-align: left;
2358
2172
  }
2359
- .GeckoUISelectOption--focused {
2360
- --tw-bg-opacity: 1;
2361
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
2173
+ .GeckoUISelectOption[data-focused] {
2174
+ background-color: var(--color-surface-hover-strong);
2362
2175
  }
2363
- .GeckoUISelectOption--disabled {
2176
+ .GeckoUISelectOption[data-disabled] {
2364
2177
  cursor: not-allowed;
2365
- opacity: 0.5;
2178
+ opacity: 50%;
2366
2179
  }
2367
2180
  .GeckoUISelectOption__check-icon {
2368
- height: 0.875rem;
2369
- width: 0.875rem;
2181
+ height: calc(var(--spacing, 0.25rem) * 3.5);
2182
+ width: calc(var(--spacing, 0.25rem) * 3.5);
2370
2183
  }
2371
2184
  .GeckoUISelectButton {
2372
2185
  box-sizing: border-box;
@@ -2390,48 +2203,43 @@
2390
2203
  background-image: none;
2391
2204
  position: relative;
2392
2205
  display: flex;
2393
- min-height: 2.5rem;
2206
+ min-height: calc(var(--spacing, 0.25rem) * 10);
2394
2207
  width: 100%;
2395
2208
  align-items: center;
2396
- gap: 0.5rem;
2397
- border-radius: 0.375rem;
2209
+ gap: calc(var(--spacing, 0.25rem) * 2);
2210
+ border-radius: var(--radius-md, 0.375rem);
2211
+ border-style: var(--tw-border-style);
2398
2212
  border-width: 1px;
2399
- --tw-border-opacity: 1;
2400
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
2401
- padding-top: 0.25rem;
2402
- padding-bottom: 0.25rem;
2403
- padding-left: 0.75rem;
2404
- padding-right: 0.75rem;
2405
- --tw-text-opacity: 1;
2406
- color: rgb(var(--gecko-ui-text-primary) / var(--tw-text-opacity, 1));
2407
- }
2408
- .GeckoUISelectButton--enabled {
2213
+ border-color: var(--color-border-secondary);
2214
+ padding-block: calc(var(--spacing, 0.25rem) * 1);
2215
+ padding-right: calc(var(--spacing, 0.25rem) * 3);
2216
+ padding-left: calc(var(--spacing, 0.25rem) * 3);
2217
+ color: var(--color-text-primary);
2218
+ }
2219
+ .GeckoUISelectButton[data-state=enabled] {
2409
2220
  cursor: pointer;
2410
2221
  }
2411
- .GeckoUISelectButton--enabled:focus-within {
2412
- --tw-border-opacity: 1;
2413
- border-color: rgb(var(--gecko-ui-primary-400) / var(--tw-border-opacity, 1));
2222
+ .GeckoUISelectButton[data-state=enabled]:focus-within {
2223
+ border-color: var(--color-primary-400);
2414
2224
  }
2415
- .GeckoUISelectButton--enabled:hover {
2416
- --tw-border-opacity: 1;
2417
- border-color: rgb(var(--gecko-ui-primary-400) / var(--tw-border-opacity, 1));
2225
+ .GeckoUISelectButton[data-state=enabled]:hover {
2226
+ border-color: var(--color-primary-400);
2418
2227
  }
2419
- .GeckoUISelectButton--disabled {
2228
+ .GeckoUISelectButton[data-state=disabled] {
2420
2229
  cursor: not-allowed;
2421
- --tw-bg-opacity: 1;
2422
- background-color: rgb(var(--gecko-ui-surface-disabled) / var(--tw-bg-opacity, 1));
2230
+ background-color: var(--color-surface-disabled);
2423
2231
  }
2424
- .GeckoUISelectButton--readonly {
2425
- gap: 0.25rem;
2232
+ .GeckoUISelectButton[data-readonly] {
2233
+ gap: calc(var(--spacing, 0.25rem) * 1);
2426
2234
  }
2427
2235
  .GeckoUISelectButton__content {
2428
2236
  position: static;
2429
2237
  display: flex;
2430
2238
  width: 100%;
2431
- flex: 1 1 0%;
2239
+ flex: 1;
2432
2240
  flex-wrap: wrap;
2433
2241
  align-items: center;
2434
- gap: 0.25rem;
2242
+ gap: calc(var(--spacing, 0.25rem) * 1);
2435
2243
  overflow-x: scroll;
2436
2244
  scrollbar-width: none;
2437
2245
  scrollbar-color: transparent transparent;
@@ -2446,27 +2254,26 @@
2446
2254
  .GeckoUISelectButton__multiselected-chip {
2447
2255
  display: inline-flex;
2448
2256
  align-items: center;
2449
- gap: 0.25rem;
2257
+ gap: calc(var(--spacing, 0.25rem) * 1);
2450
2258
  align-self: center;
2451
2259
  border-radius: 0.25rem;
2260
+ border-style: var(--tw-border-style);
2452
2261
  border-width: 1px;
2453
- border-color: rgb(var(--gecko-ui-border-secondary) / 0.7);
2454
- --tw-bg-opacity: 1;
2455
- background-color: rgb(var(--gecko-ui-surface-tertiary) / var(--tw-bg-opacity, 1));
2456
- padding-left: 0.5rem;
2457
- padding-right: 0.5rem;
2458
- padding-top: 0.25rem;
2459
- padding-bottom: 0.25rem;
2262
+ border-color: color-mix(in srgb, oklch(0.8699 0 none) 70%, transparent);
2263
+ @supports (color: color-mix(in lab, red, red)) {
2264
+ border-color: color-mix(in oklab, var(--color-border-secondary) 70%, transparent);
2265
+ }
2266
+ background-color: var(--color-surface-tertiary);
2267
+ padding-inline: calc(var(--spacing, 0.25rem) * 2);
2268
+ padding-block: calc(var(--spacing, 0.25rem) * 1);
2460
2269
  text-align: left;
2461
- font-size: 0.75rem;
2462
- line-height: 1rem;
2463
- --tw-text-opacity: 1;
2464
- color: rgb(var(--gecko-ui-text-primary) / var(--tw-text-opacity, 1));
2270
+ font-size: var(--text-xs, 0.75rem);
2271
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
2272
+ color: var(--color-text-primary);
2465
2273
  }
2466
- .GeckoUISelectButton__multiselected-chip--disabled {
2467
- --tw-text-opacity: 1;
2468
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
2469
- opacity: 0.7;
2274
+ .GeckoUISelectButton__multiselected-chip[data-disabled] {
2275
+ color: var(--color-text-disabled);
2276
+ opacity: 70%;
2470
2277
  }
2471
2278
  .GeckoUISelectButton__multiselected-chip__clear-button {
2472
2279
  box-sizing: border-box;
@@ -2489,54 +2296,49 @@
2489
2296
  background-color: transparent;
2490
2297
  background-image: none;
2491
2298
  display: flex;
2492
- height: 1rem;
2493
- width: 1rem;
2299
+ height: calc(var(--spacing, 0.25rem) * 4);
2300
+ width: calc(var(--spacing, 0.25rem) * 4);
2494
2301
  align-items: center;
2495
2302
  justify-content: center;
2496
- border-radius: 0.125rem;
2303
+ border-radius: var(--radius-sm, 0.25rem);
2497
2304
  }
2498
2305
  .GeckoUISelectButton__multiselected-chip__clear-button__icon {
2499
2306
  display: inline-block;
2500
- height: 0.5rem;
2501
- width: 0.5rem;
2502
- --tw-bg-opacity: 1;
2503
- background-color: rgb(var(--gecko-ui-text-secondary) / var(--tw-bg-opacity, 1));
2307
+ height: calc(var(--spacing, 0.25rem) * 2);
2308
+ width: calc(var(--spacing, 0.25rem) * 2);
2309
+ background-color: var(--color-text-secondary);
2504
2310
  mask-image: url('data:image/svg+xml,<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.02426 0.175736C0.78995 -0.0585786 0.41005 -0.0585786 0.175736 0.175736C-0.0585786 0.41005 -0.0585786 0.78995 0.175736 1.02426L3.15147 4L0.175736 6.97574C-0.0585786 7.21005 -0.0585786 7.58995 0.175736 7.82426C0.41005 8.05858 0.78995 8.05858 1.02426 7.82426L4 4.84853L6.97574 7.82426C7.21005 8.05858 7.58995 8.05858 7.82426 7.82426C8.05858 7.58995 8.05858 7.21005 7.82426 6.97574L4.84853 4L7.82426 1.02426C8.05858 0.78995 8.05858 0.41005 7.82426 0.175736C7.58995 -0.0585786 7.21005 -0.0585786 6.97574 0.175736L4 3.15147L1.02426 0.175736Z" fill="currentColor"/></svg>');
2505
2311
  -webkit-mask-image: url('data:image/svg+xml,<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.02426 0.175736C0.78995 -0.0585786 0.41005 -0.0585786 0.175736 0.175736C-0.0585786 0.41005 -0.0585786 0.78995 0.175736 1.02426L3.15147 4L0.175736 6.97574C-0.0585786 7.21005 -0.0585786 7.58995 0.175736 7.82426C0.41005 8.05858 0.78995 8.05858 1.02426 7.82426L4 4.84853L6.97574 7.82426C7.21005 8.05858 7.58995 8.05858 7.82426 7.82426C8.05858 7.58995 8.05858 7.21005 7.82426 6.97574L4.84853 4L7.82426 1.02426C8.05858 0.78995 8.05858 0.41005 7.82426 0.175736C7.58995 -0.0585786 7.21005 -0.0585786 6.97574 0.175736L4 3.15147L1.02426 0.175736Z" fill="currentColor"/></svg>');
2506
2312
  }
2507
- .GeckoUISelectButton__multiselected-chip__clear-button--disabled {
2313
+ .GeckoUISelectButton__multiselected-chip__clear-button[data-disabled] {
2508
2314
  cursor: not-allowed;
2509
2315
  }
2510
2316
  .GeckoUISelectButton__multiselected-chip__clear-button:hover {
2511
- --tw-bg-opacity: 1;
2512
- background-color: rgb(var(--gecko-ui-surface-active) / var(--tw-bg-opacity, 1));
2317
+ background-color: var(--color-surface-active);
2513
2318
  }
2514
- .GeckoUISelectButton__multiselected-chip__clear-button--disabled:hover {
2319
+ .GeckoUISelectButton__multiselected-chip__clear-button[data-disabled]:hover {
2515
2320
  background-color: transparent;
2516
2321
  }
2517
2322
  .GeckoUISelectButton__value {
2518
2323
  display: flex;
2519
2324
  align-items: center;
2520
- --tw-text-opacity: 1;
2521
- color: rgb(var(--gecko-ui-text-primary) / var(--tw-text-opacity, 1));
2325
+ color: var(--color-text-primary);
2522
2326
  }
2523
- .GeckoUISelectButton__value--placeholder {
2327
+ .GeckoUISelectButton__value[data-placeholder] {
2524
2328
  position: relative;
2525
- margin-left: 0px;
2526
- --tw-text-opacity: 1;
2527
- color: rgb(var(--gecko-ui-text-placeholder) / var(--tw-text-opacity, 1));
2329
+ margin-left: calc(var(--spacing, 0.25rem) * 0);
2330
+ color: var(--color-text-placeholder);
2528
2331
  }
2529
- .GeckoUISelectButton__value--hidden {
2332
+ .GeckoUISelectButton__value[data-hidden] {
2530
2333
  display: none;
2531
2334
  }
2532
2335
  .GeckoUISelectButton__icons {
2533
2336
  display: flex;
2534
2337
  align-items: center;
2535
- gap: 0.25rem;
2338
+ gap: calc(var(--spacing, 0.25rem) * 1);
2536
2339
  }
2537
- .GeckoUISelectButton--disabled .GeckoUISelectButton__value {
2538
- --tw-text-opacity: 1;
2539
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
2340
+ .GeckoUISelectButton[data-state=disabled] .GeckoUISelectButton__value {
2341
+ color: var(--color-text-disabled);
2540
2342
  }
2541
2343
  .GeckoUISelectButton__clear-button {
2542
2344
  display: flex;
@@ -2552,13 +2354,13 @@
2552
2354
  grid-template-columns: 0px min-content;
2553
2355
  box-sizing: border-box;
2554
2356
  }
2555
- .GeckoUISelectButton__search--multi-selected {
2357
+ .GeckoUISelectButton__search[data-multi-selected] {
2556
2358
  padding: 0 2px;
2557
2359
  }
2558
- .GeckoUISelectButton__search--focusonly {
2360
+ .GeckoUISelectButton__search[data-focusonly] {
2559
2361
  position: absolute;
2560
- inset: 0px;
2561
- z-index: -10;
2362
+ inset: calc(var(--spacing, 0.25rem) * 0);
2363
+ z-index: calc(10 * -1);
2562
2364
  }
2563
2365
  .GeckoUISelectButton__search:after {
2564
2366
  content: attr(data-keyword) " ";
@@ -2602,11 +2404,11 @@
2602
2404
  outline: 0px;
2603
2405
  padding: 0px;
2604
2406
  }
2605
- .GeckoUISelectButton__search__input--initial {
2407
+ .GeckoUISelectButton__search__input[data-initial] {
2606
2408
  position: absolute;
2607
- left: 0.75rem;
2409
+ left: calc(var(--spacing, 0.25rem) * 3);
2608
2410
  }
2609
- .GeckoUISelectButton__search__input--readonly {
2411
+ .GeckoUISelectButton__search__input[data-readonly] {
2610
2412
  width: 0;
2611
2413
  z-index: -1;
2612
2414
  cursor: pointer;
@@ -2618,8 +2420,8 @@
2618
2420
  display: flex;
2619
2421
  align-items: center;
2620
2422
  justify-content: space-between;
2621
- gap: 0.25rem;
2622
- padding-bottom: 1rem;
2423
+ gap: calc(var(--spacing, 0.25rem) * 1);
2424
+ padding-bottom: calc(var(--spacing, 0.25rem) * 4);
2623
2425
  }
2624
2426
  .GeckoUICalendar__header__title {
2625
2427
  box-sizing: border-box;
@@ -2642,23 +2444,23 @@
2642
2444
  background-color: transparent;
2643
2445
  background-image: none;
2644
2446
  display: flex;
2645
- flex: 1 1 0%;
2447
+ flex: 1;
2646
2448
  cursor: default;
2647
2449
  align-items: center;
2648
2450
  justify-content: center;
2649
- border-radius: 0.375rem;
2650
- padding-left: 0.75rem;
2651
- padding-right: 0.75rem;
2652
- padding-top: 0.375rem;
2653
- padding-bottom: 0.375rem;
2654
- font-weight: 700;
2655
- }
2656
- .GeckoUICalendar__header__title--clickable {
2657
- cursor: pointer;
2451
+ border-radius: var(--radius-md, 0.375rem);
2452
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
2453
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
2454
+ --tw-font-weight: var(--font-weight-bold, 700);
2455
+ font-weight: var(--font-weight-bold, 700);
2658
2456
  }
2659
- .GeckoUICalendar__header__title--clickable:hover {
2660
- --tw-bg-opacity: 1;
2661
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
2457
+ .GeckoUICalendar__header__title[data-clickable] {
2458
+ cursor: pointer;
2459
+ &:hover {
2460
+ @media (hover: hover) {
2461
+ background-color: var(--color-surface-hover-strong);
2462
+ }
2463
+ }
2662
2464
  }
2663
2465
  .GeckoUICalendar__header__arrow-button {
2664
2466
  box-sizing: border-box;
@@ -2680,15 +2482,14 @@
2680
2482
  cursor: pointer;
2681
2483
  background-color: transparent;
2682
2484
  background-image: none;
2683
- border-radius: 0.375rem;
2684
- padding-left: 0.75rem;
2685
- padding-right: 0.75rem;
2686
- padding-top: 0.375rem;
2687
- padding-bottom: 0.375rem;
2688
- }
2689
- .GeckoUICalendar__header__arrow-button:hover {
2690
- --tw-bg-opacity: 1;
2691
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
2485
+ border-radius: var(--radius-md, 0.375rem);
2486
+ padding-inline: calc(var(--spacing, 0.25rem) * 3);
2487
+ padding-block: calc(var(--spacing, 0.25rem) * 1.5);
2488
+ &:hover {
2489
+ @media (hover: hover) {
2490
+ background-color: var(--color-surface-hover-strong);
2491
+ }
2492
+ }
2692
2493
  }
2693
2494
  .GeckoUICalendar__header__arrow-left-icon,
2694
2495
  .GeckoUICalendar__header__arrow-right-icon {
@@ -2697,15 +2498,11 @@
2697
2498
  border-style: solid;
2698
2499
  border-color: #e5e7eb;
2699
2500
  display: inline-block;
2700
- height: 1rem;
2701
- width: 1rem;
2702
- --tw-bg-opacity: 1;
2703
- background-color: rgb(var(--gecko-ui-text-primary) / var(--tw-bg-opacity, 1));
2704
- -webkit-mask-position: center;
2501
+ height: calc(var(--spacing, 0.25rem) * 4);
2502
+ width: calc(var(--spacing, 0.25rem) * 4);
2503
+ background-color: var(--color-text-primary);
2705
2504
  mask-position: center;
2706
- -webkit-mask-size: contain;
2707
2505
  mask-size: contain;
2708
- -webkit-mask-repeat: no-repeat;
2709
2506
  mask-repeat: no-repeat;
2710
2507
  }
2711
2508
  .GeckoUICalendar__header__arrow-left-icon {
@@ -2717,12 +2514,13 @@
2717
2514
  -webkit-mask-image: url('data:image/svg+xml,<svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" fill-rule="evenodd"></path></svg>');
2718
2515
  }
2719
2516
  .GeckoUICalendar__day-picker-weekdays {
2720
- margin-bottom: 0.5rem;
2517
+ margin-bottom: calc(var(--spacing, 0.25rem) * 2);
2721
2518
  display: grid;
2722
2519
  grid-template-columns: repeat(7, minmax(0, 1fr));
2723
2520
  place-items: center;
2724
- font-weight: 500;
2725
- opacity: 0.4;
2521
+ --tw-font-weight: var(--font-weight-medium, 500);
2522
+ font-weight: var(--font-weight-medium, 500);
2523
+ opacity: 40%;
2726
2524
  }
2727
2525
  .GeckoUICalendar__day-picker {
2728
2526
  display: grid;
@@ -2757,97 +2555,91 @@
2757
2555
  align-items: center;
2758
2556
  justify-content: center;
2759
2557
  place-self: center;
2760
- border-radius: 0.375rem;
2558
+ border-radius: var(--radius-md, 0.375rem);
2559
+ &:hover {
2560
+ @media (hover: hover) {
2561
+ background-color: var(--color-surface-hover-strong);
2562
+ }
2563
+ }
2564
+ &:disabled {
2565
+ cursor: not-allowed;
2566
+ }
2761
2567
  }
2762
- .GeckoUICalendar__day-picker__button:hover {
2763
- --tw-bg-opacity: 1;
2764
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
2568
+ .GeckoUICalendar__day-picker__button[data-today] {
2569
+ color: var(--color-primary-600);
2765
2570
  }
2766
- .GeckoUICalendar__day-picker__button:disabled {
2767
- cursor: not-allowed;
2571
+ .GeckoUICalendar__day-picker__button[data-selected] {
2572
+ background-color: var(--color-primary-700);
2573
+ color: var(--color-text-on-primary);
2574
+ &:hover {
2575
+ @media (hover: hover) {
2576
+ background-color: var(--color-primary-600);
2577
+ }
2578
+ }
2768
2579
  }
2769
- .GeckoUICalendar__day-picker__button--today {
2770
- --tw-text-opacity: 1;
2771
- color: rgb(var(--gecko-ui-primary-600) / var(--tw-text-opacity, 1));
2580
+ .GeckoUICalendar__day-picker__button:not([data-active-month]) {
2581
+ opacity: 40%;
2772
2582
  }
2773
- .GeckoUICalendar__day-picker__button--selected {
2774
- color: rgb(var(--gecko-ui-surface-tertiary) / var(--tw-text-opacity, 1));
2775
- --tw-bg-opacity: 1;
2776
- background-color: rgb(var(--gecko-ui-primary-700) / var(--tw-bg-opacity, 1));
2777
- --tw-text-opacity: 1;
2778
- color: rgb(var(--gecko-ui-text-on-primary) / var(--tw-text-opacity, 1));
2583
+ .GeckoUICalendar__day-picker__button[data-hover-preview] {
2584
+ border-radius: 0;
2585
+ background-color: var(--color-primary-100);
2779
2586
  }
2780
- .GeckoUICalendar__day-picker__button--selected:hover {
2781
- --tw-bg-opacity: 1;
2782
- background-color: rgb(var(--gecko-ui-primary-600) / var(--tw-bg-opacity, 1));
2587
+ .GeckoUICalendar__day-picker__button[data-in-range] {
2588
+ position: relative;
2589
+ border-radius: 0;
2590
+ background-color: var(--color-primary-700);
2591
+ &:hover {
2592
+ @media (hover: hover) {
2593
+ background-color: var(--color-primary-600);
2594
+ }
2595
+ }
2783
2596
  }
2784
- .GeckoUICalendar__day-picker__button--active-month-false {
2785
- opacity: 0.4;
2597
+ .GeckoUICalendar__day-picker__button[data-range-start],
2598
+ .GeckoUICalendar__day-picker__button[data-range-end] {
2599
+ background-color: var(--color-primary-700);
2600
+ &:hover {
2601
+ @media (hover: hover) {
2602
+ background-color: var(--color-primary-600);
2603
+ }
2604
+ }
2786
2605
  }
2787
- .GeckoUICalendar__day-picker__button--hover-preview {
2788
- border-radius: 0px;
2789
- --tw-bg-opacity: 1;
2790
- background-color: rgb(var(--gecko-ui-primary-100) / var(--tw-bg-opacity, 1));
2606
+ .GeckoUICalendar__day-picker__button[data-range-start] {
2607
+ border-top-left-radius: var(--radius-md, 0.375rem);
2608
+ border-bottom-left-radius: var(--radius-md, 0.375rem);
2791
2609
  }
2792
- .GeckoUICalendar__day-picker__button--in-range {
2793
- position: relative;
2794
- border-radius: 0px;
2795
- --tw-bg-opacity: 1;
2796
- background-color: rgb(var(--gecko-ui-primary-700) / var(--tw-bg-opacity, 1));
2797
- }
2798
- .GeckoUICalendar__day-picker__button--in-range:hover {
2799
- --tw-bg-opacity: 1;
2800
- background-color: rgb(var(--gecko-ui-primary-600) / var(--tw-bg-opacity, 1));
2801
- }
2802
- .GeckoUICalendar__day-picker__button--range-start,
2803
- .GeckoUICalendar__day-picker__button--range-end {
2804
- --tw-bg-opacity: 1;
2805
- background-color: rgb(var(--gecko-ui-primary-700) / var(--tw-bg-opacity, 1));
2806
- }
2807
- .GeckoUICalendar__day-picker__button--range-start:hover,
2808
- .GeckoUICalendar__day-picker__button--range-end:hover {
2809
- --tw-bg-opacity: 1;
2810
- background-color: rgb(var(--gecko-ui-primary-600) / var(--tw-bg-opacity, 1));
2811
- }
2812
- .GeckoUICalendar__day-picker__button--range-start {
2813
- border-top-left-radius: 0.375rem;
2814
- border-bottom-left-radius: 0.375rem;
2815
- }
2816
- .GeckoUICalendar__day-picker__button--range-end {
2817
- border-top-right-radius: 0.375rem;
2818
- border-bottom-right-radius: 0.375rem;
2819
- }
2820
- .GeckoUICalendar__day-picker__button--hover-preview-start {
2821
- border-top-left-radius: 0.375rem;
2822
- border-bottom-left-radius: 0.375rem;
2823
- border-top-right-radius: 0px;
2824
- border-bottom-right-radius: 0px;
2825
- }
2826
- .GeckoUICalendar__day-picker__button--hover-preview-end {
2827
- border-top-left-radius: 0px;
2828
- border-bottom-left-radius: 0px;
2829
- border-top-right-radius: 0.375rem;
2830
- border-bottom-right-radius: 0.375rem;
2831
- }
2832
- .GeckoUICalendar__day-picker__button--range-start,
2833
- .GeckoUICalendar__day-picker__button--range-end,
2834
- .GeckoUICalendar__day-picker__button--in-range {
2835
- --tw-text-opacity: 1;
2836
- color: rgb(var(--gecko-ui-text-on-primary) / var(--tw-text-opacity, 1));
2837
- }
2838
- .GeckoUICalendar__day-picker__button--disabled {
2610
+ .GeckoUICalendar__day-picker__button[data-range-end] {
2611
+ border-top-right-radius: var(--radius-md, 0.375rem);
2612
+ border-bottom-right-radius: var(--radius-md, 0.375rem);
2613
+ }
2614
+ .GeckoUICalendar__day-picker__button[data-hover-preview-start] {
2615
+ border-top-left-radius: var(--radius-md, 0.375rem);
2616
+ border-bottom-left-radius: var(--radius-md, 0.375rem);
2617
+ border-top-right-radius: 0;
2618
+ border-bottom-right-radius: 0;
2619
+ }
2620
+ .GeckoUICalendar__day-picker__button[data-hover-preview-end] {
2621
+ border-top-left-radius: 0;
2622
+ border-bottom-left-radius: 0;
2623
+ border-top-right-radius: var(--radius-md, 0.375rem);
2624
+ border-bottom-right-radius: var(--radius-md, 0.375rem);
2625
+ }
2626
+ .GeckoUICalendar__day-picker__button[data-range-start],
2627
+ .GeckoUICalendar__day-picker__button[data-range-end],
2628
+ .GeckoUICalendar__day-picker__button[data-in-range] {
2629
+ color: var(--color-text-on-primary);
2630
+ }
2631
+ .GeckoUICalendar__day-picker__button[data-disabled] {
2839
2632
  cursor: not-allowed;
2840
- opacity: 0.3;
2633
+ opacity: 30%;
2841
2634
  }
2842
- .dark .GeckoUICalendar__day-picker__button--hover-preview {
2843
- --tw-bg-opacity: 1;
2844
- background-color: rgb(var(--gecko-ui-primary-500) / var(--tw-bg-opacity, 1));
2635
+ .dark .GeckoUICalendar__day-picker__button[data-hover-preview] {
2636
+ background-color: var(--color-primary-500);
2845
2637
  }
2846
2638
  .GeckoUICalendar__year-picker {
2847
2639
  display: grid;
2848
2640
  grid-template-columns: repeat(4, minmax(0, 1fr));
2849
2641
  place-items: center;
2850
- gap: 0.25rem;
2642
+ gap: calc(var(--spacing, 0.25rem) * 1);
2851
2643
  }
2852
2644
  .GeckoUICalendar__year-picker__button {
2853
2645
  box-sizing: border-box;
@@ -2869,29 +2661,30 @@
2869
2661
  cursor: pointer;
2870
2662
  background-color: transparent;
2871
2663
  background-image: none;
2872
- border-radius: 0.375rem;
2873
- padding: 1.25rem;
2874
- }
2875
- .GeckoUICalendar__year-picker__button:hover {
2876
- --tw-bg-opacity: 1;
2877
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
2878
- }
2879
- .GeckoUICalendar__year-picker__button--selected {
2880
- --tw-bg-opacity: 1;
2881
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
2664
+ border-radius: var(--radius-md, 0.375rem);
2665
+ padding: calc(var(--spacing, 0.25rem) * 5);
2666
+ &:hover {
2667
+ @media (hover: hover) {
2668
+ background-color: var(--color-surface-hover-strong);
2669
+ }
2670
+ }
2882
2671
  }
2883
- .GeckoUICalendar__year-picker__button--prev-next {
2884
- opacity: 0.4;
2672
+ .GeckoUICalendar__year-picker__button[data-selected] {
2673
+ background-color: var(--color-surface-hover-strong);
2885
2674
  }
2886
- .GeckoUICalendar__year-picker__button--prev-next:hover {
2887
- opacity: 1;
2675
+ .GeckoUICalendar__year-picker__button[data-prev-next] {
2676
+ opacity: 40%;
2677
+ &:hover {
2678
+ @media (hover: hover) {
2679
+ opacity: 100%;
2680
+ }
2681
+ }
2888
2682
  }
2889
2683
  .GeckoUISelectDropdownSearch__icon {
2890
2684
  display: inline-block;
2891
- height: 1rem;
2892
- width: 1rem;
2893
- --tw-bg-opacity: 1;
2894
- background-color: rgb(var(--gecko-ui-text-muted) / var(--tw-bg-opacity, 1));
2685
+ height: calc(var(--spacing, 0.25rem) * 4);
2686
+ width: calc(var(--spacing, 0.25rem) * 4);
2687
+ background-color: var(--color-text-muted);
2895
2688
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M14.3429 13.9995L10.3429 9.99951M11.6762 6.66618C11.6762 9.24351 9.58685 11.3328 7.00952 11.3328C4.4322 11.3328 2.34286 9.24351 2.34286 6.66618C2.34286 4.08885 4.4322 1.99951 7.00952 1.99951C9.58685 1.99951 11.6762 4.08885 11.6762 6.66618Z" stroke="currentColor" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
2896
2689
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M14.3429 13.9995L10.3429 9.99951M11.6762 6.66618C11.6762 9.24351 9.58685 11.3328 7.00952 11.3328C4.4322 11.3328 2.34286 9.24351 2.34286 6.66618C2.34286 4.08885 4.4322 1.99951 7.00952 1.99951C9.58685 1.99951 11.6762 4.08885 11.6762 6.66618Z" stroke="currentColor" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
2897
2690
  }
@@ -2899,7 +2692,7 @@
2899
2692
  display: grid;
2900
2693
  grid-template-columns: repeat(4, minmax(0, 1fr));
2901
2694
  place-items: center;
2902
- gap: 0.25rem;
2695
+ gap: calc(var(--spacing, 0.25rem) * 1);
2903
2696
  }
2904
2697
  .GeckoUICalendar__month-picker__button {
2905
2698
  box-sizing: border-box;
@@ -2922,98 +2715,85 @@
2922
2715
  background-color: transparent;
2923
2716
  background-image: none;
2924
2717
  width: 100%;
2925
- border-radius: 0.375rem;
2926
- padding: 1.25rem;
2927
- }
2928
- .GeckoUICalendar__month-picker__button:hover {
2929
- --tw-bg-opacity: 1;
2930
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
2718
+ border-radius: var(--radius-md, 0.375rem);
2719
+ padding: calc(var(--spacing, 0.25rem) * 5);
2720
+ &:hover {
2721
+ @media (hover: hover) {
2722
+ background-color: var(--color-surface-hover-strong);
2723
+ }
2724
+ }
2931
2725
  }
2932
- .GeckoUICalendar__month-picker__button--selected {
2933
- --tw-bg-opacity: 1;
2934
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
2726
+ .GeckoUICalendar__month-picker__button[data-selected] {
2727
+ background-color: var(--color-surface-hover-strong);
2935
2728
  }
2936
2729
  .GeckoUIRHFRadio {
2937
2730
  display: inline-flex;
2938
2731
  align-items: center;
2939
2732
  }
2940
2733
  .GeckoUIRHFRadio__label {
2941
- margin-left: 0.5rem;
2734
+ margin-left: calc(var(--spacing, 0.25rem) * 2);
2942
2735
  cursor: pointer;
2943
- font-size: 0.875rem;
2944
- line-height: 1.25rem;
2945
- font-weight: 500;
2946
- --tw-text-opacity: 1;
2947
- color: rgb(var(--gecko-ui-text-secondary) / var(--tw-text-opacity, 1));
2736
+ font-size: var(--text-sm, 0.875rem);
2737
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2738
+ --tw-font-weight: var(--font-weight-medium, 500);
2739
+ font-weight: var(--font-weight-medium, 500);
2740
+ color: var(--color-text-secondary);
2948
2741
  }
2949
2742
  .GeckoUIRHFRadio:has(:disabled) .GeckoUIRHFRadio__label {
2950
2743
  cursor: not-allowed;
2951
- --tw-text-opacity: 1;
2952
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
2744
+ color: var(--color-text-disabled);
2953
2745
  }
2954
- .GeckoUIRHFInput--error {
2955
- --tw-border-opacity: 1;
2956
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
2746
+ .GeckoUIRHFInput[data-error] {
2747
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2957
2748
  }
2958
- .GeckoUIRHFInput--error:hover {
2959
- --tw-border-opacity: 1;
2960
- border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
2749
+ .GeckoUIRHFInput[data-error]:hover {
2750
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
2961
2751
  }
2962
- .GeckoUIRHFInput--error:focus-within {
2963
- --tw-border-opacity: 1;
2964
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
2752
+ .GeckoUIRHFInput[data-error]:focus-within {
2753
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2965
2754
  }
2966
- .GeckoUIRHFSelectButton--error {
2967
- --tw-border-opacity: 1;
2968
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
2755
+ .GeckoUIRHFSelectButton[data-error] {
2756
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2969
2757
  }
2970
- .GeckoUIRHFSelectButton--error:hover {
2971
- --tw-border-opacity: 1;
2972
- border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
2758
+ .GeckoUIRHFSelectButton[data-error]:hover {
2759
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
2973
2760
  }
2974
- .GeckoUIRHFSelectButton--error:focus-within {
2975
- --tw-border-opacity: 1;
2976
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
2761
+ .GeckoUIRHFSelectButton[data-error]:focus-within {
2762
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2977
2763
  }
2978
- .GeckoUIRHFTextarea--error {
2979
- --tw-border-opacity: 1;
2980
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
2764
+ .GeckoUIRHFTextarea[data-error] {
2765
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2981
2766
  }
2982
- .GeckoUIRHFTextarea--error:enabled:hover {
2983
- --tw-border-opacity: 1;
2984
- border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
2767
+ .GeckoUIRHFTextarea[data-error]:enabled:hover {
2768
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
2985
2769
  }
2986
- .GeckoUIRHFTextarea--error:enabled:focus {
2987
- --tw-border-opacity: 1;
2988
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
2770
+ .GeckoUIRHFTextarea[data-error]:enabled:focus {
2771
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2989
2772
  }
2990
- .GeckoUIRHFOTPInput--error .GeckoUIOTPInput__input {
2991
- --tw-border-opacity: 1;
2992
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
2773
+ .GeckoUIRHFOTPInput[data-error] .GeckoUIOTPInput__input {
2774
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
2993
2775
  }
2994
- .GeckoUIRHFOTPInput--error:hover .GeckoUIOTPInput__input:enabled {
2995
- --tw-border-opacity: 1;
2996
- border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
2776
+ .GeckoUIRHFOTPInput[data-error]:hover .GeckoUIOTPInput__input:enabled {
2777
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
2997
2778
  }
2998
2779
  .GeckoUIRHFCheckbox {
2999
2780
  display: inline-flex;
3000
2781
  align-items: center;
3001
2782
  }
3002
2783
  .GeckoUIRHFCheckbox__label {
3003
- margin-left: 0.5rem;
2784
+ margin-left: calc(var(--spacing, 0.25rem) * 2);
3004
2785
  cursor: pointer;
3005
- font-size: 0.875rem;
3006
- line-height: 1.25rem;
3007
- font-weight: 500;
3008
- --tw-text-opacity: 1;
3009
- color: rgb(var(--gecko-ui-text-secondary) / var(--tw-text-opacity, 1));
2786
+ font-size: var(--text-sm, 0.875rem);
2787
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2788
+ --tw-font-weight: var(--font-weight-medium, 500);
2789
+ font-weight: var(--font-weight-medium, 500);
2790
+ color: var(--color-text-secondary);
3010
2791
  }
3011
2792
  .GeckoUIRHFCheckbox:has(:disabled) .GeckoUIRHFCheckbox__label {
3012
2793
  cursor: not-allowed;
3013
- --tw-text-opacity: 1;
3014
- color: rgb(var(--gecko-ui-text-disabled) / var(--tw-text-opacity, 1));
2794
+ color: var(--color-text-disabled);
3015
2795
  }
3016
- .GeckoUIRHFFileInput--wrapper {
2796
+ .GeckoUIRHFFileInput {
3017
2797
  box-sizing: border-box;
3018
2798
  border-width: 0;
3019
2799
  border-style: solid;
@@ -3030,7 +2810,7 @@
3030
2810
  padding: 0;
3031
2811
  text-transform: none;
3032
2812
  }
3033
- .GeckoUIRHFFileInput--custom {
2813
+ .GeckoUIRHFFileInput__input[data-custom] {
3034
2814
  display: none;
3035
2815
  }
3036
2816
  .GeckoUIRHFInputGroup {
@@ -3038,25 +2818,22 @@
3038
2818
  display: flex;
3039
2819
  flex-direction: column;
3040
2820
  align-items: flex-start;
3041
- row-gap: 0.5rem;
2821
+ row-gap: calc(var(--spacing, 0.25rem) * 2);
3042
2822
  }
3043
2823
  .GeckoUIRHFFilePicker {
3044
2824
  display: flex;
3045
2825
  width: 100%;
3046
2826
  flex-direction: column;
3047
- gap: 0.75rem;
2827
+ gap: calc(var(--spacing, 0.25rem) * 3);
3048
2828
  }
3049
- .GeckoUIRHFFilePicker--dragging .GeckoUIRHFFilePicker__upload-area {
3050
- --tw-border-opacity: 1;
3051
- border-color: rgb(var(--gecko-ui-primary-400) / var(--tw-border-opacity, 1));
3052
- --tw-bg-opacity: 1;
3053
- background-color: rgb(var(--gecko-ui-surface-hover-strong) / var(--tw-bg-opacity, 1));
2829
+ .GeckoUIRHFFilePicker[data-dragging] .GeckoUIRHFFilePicker__upload-area {
2830
+ border-color: var(--color-primary-400);
2831
+ background-color: var(--color-surface-hover-strong);
3054
2832
  }
3055
- .GeckoUIRHFFilePicker--error .GeckoUIRHFFilePicker__upload-area {
3056
- --tw-border-opacity: 1;
3057
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
2833
+ .GeckoUIRHFFilePicker[data-error] .GeckoUIRHFFilePicker__upload-area {
2834
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
3058
2835
  }
3059
- .GeckoUIRHFFilePicker--loading {
2836
+ .GeckoUIRHFFilePicker[data-loading] {
3060
2837
  cursor: wait;
3061
2838
  }
3062
2839
  .GeckoUIRHFFilePicker__upload-area {
@@ -3066,44 +2843,48 @@
3066
2843
  flex-direction: column;
3067
2844
  align-items: center;
3068
2845
  justify-content: center;
3069
- gap: 0.75rem;
3070
- border-radius: 0.5rem;
2846
+ gap: calc(var(--spacing, 0.25rem) * 3);
2847
+ border-radius: var(--radius-lg, 0.5rem);
2848
+ border-style: var(--tw-border-style);
3071
2849
  border-width: 2px;
2850
+ --tw-border-style: dashed;
3072
2851
  border-style: dashed;
3073
- --tw-border-opacity: 1;
3074
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
3075
- --tw-bg-opacity: 1;
3076
- background-color: rgb(var(--gecko-ui-surface-secondary) / var(--tw-bg-opacity, 1));
3077
- padding: 1.5rem;
2852
+ border-color: var(--color-border-secondary);
2853
+ background-color: var(--color-surface-secondary);
2854
+ padding: calc(var(--spacing, 0.25rem) * 6);
3078
2855
  transition-property:
3079
2856
  color,
3080
2857
  background-color,
3081
2858
  border-color,
2859
+ outline-color,
3082
2860
  text-decoration-color,
3083
2861
  fill,
3084
- stroke;
3085
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2862
+ stroke,
2863
+ --tw-gradient-from,
2864
+ --tw-gradient-via,
2865
+ --tw-gradient-to;
2866
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
2867
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
2868
+ --tw-duration: 200ms;
3086
2869
  transition-duration: 200ms;
3087
2870
  }
3088
2871
  .GeckoUIRHFFilePicker__upload-icon {
3089
- height: 2.5rem;
3090
- width: 2.5rem;
3091
- --tw-text-opacity: 1;
3092
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
2872
+ height: calc(var(--spacing, 0.25rem) * 10);
2873
+ width: calc(var(--spacing, 0.25rem) * 10);
2874
+ color: var(--color-text-muted);
3093
2875
  }
3094
2876
  .GeckoUIRHFFilePicker__upload-text {
3095
2877
  text-align: center;
3096
- font-size: 0.875rem;
3097
- line-height: 1.25rem;
3098
- --tw-text-opacity: 1;
3099
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
2878
+ font-size: var(--text-sm, 0.875rem);
2879
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2880
+ color: var(--color-text-muted);
3100
2881
  }
3101
2882
  .GeckoUIRHFFilePicker__upload-buttons {
3102
2883
  display: flex;
3103
2884
  flex-wrap: wrap;
3104
2885
  align-items: center;
3105
2886
  justify-content: center;
3106
- gap: 0.5rem;
2887
+ gap: calc(var(--spacing, 0.25rem) * 2);
3107
2888
  }
3108
2889
  .GeckoUIRHFFilePicker__browse-button {
3109
2890
  box-sizing: border-box;
@@ -3125,99 +2906,99 @@
3125
2906
  cursor: pointer;
3126
2907
  background-color: transparent;
3127
2908
  background-image: none;
3128
- border-radius: 0.375rem;
2909
+ border-radius: var(--radius-md, 0.375rem);
2910
+ border-style: var(--tw-border-style);
3129
2911
  border-width: 1px;
3130
- --tw-border-opacity: 1;
3131
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
3132
- --tw-bg-opacity: 1;
3133
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
3134
- padding-left: 1rem;
3135
- padding-right: 1rem;
3136
- padding-top: 0.5rem;
3137
- padding-bottom: 0.5rem;
3138
- font-size: 0.875rem;
3139
- line-height: 1.25rem;
3140
- font-weight: 500;
3141
- --tw-text-opacity: 1;
3142
- color: rgb(var(--gecko-ui-text-primary) / var(--tw-text-opacity, 1));
3143
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
3144
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
2912
+ border-color: var(--color-border-secondary);
2913
+ background-color: var(--color-surface-primary);
2914
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
2915
+ padding-block: calc(var(--spacing, 0.25rem) * 2);
2916
+ font-size: var(--text-sm, 0.875rem);
2917
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2918
+ --tw-font-weight: var(--font-weight-medium, 500);
2919
+ font-weight: var(--font-weight-medium, 500);
2920
+ color: var(--color-text-primary);
2921
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3145
2922
  box-shadow:
3146
- var(--tw-ring-offset-shadow, 0 0 #0000),
3147
- var(--tw-ring-shadow, 0 0 #0000),
2923
+ var(--tw-inset-shadow),
2924
+ var(--tw-inset-ring-shadow),
2925
+ var(--tw-ring-offset-shadow),
2926
+ var(--tw-ring-shadow),
3148
2927
  var(--tw-shadow);
3149
2928
  transition-property:
3150
2929
  color,
3151
2930
  background-color,
3152
2931
  border-color,
2932
+ outline-color,
3153
2933
  text-decoration-color,
3154
2934
  fill,
3155
- stroke;
3156
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2935
+ stroke,
2936
+ --tw-gradient-from,
2937
+ --tw-gradient-via,
2938
+ --tw-gradient-to;
2939
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
2940
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
2941
+ --tw-duration: 200ms;
3157
2942
  transition-duration: 200ms;
3158
2943
  }
3159
2944
  .GeckoUIRHFFilePicker__browse-button:hover {
3160
- --tw-bg-opacity: 1;
3161
- background-color: rgb(var(--gecko-ui-surface-tertiary) / var(--tw-bg-opacity, 1));
2945
+ background-color: var(--color-surface-tertiary);
3162
2946
  }
3163
2947
  .GeckoUIRHFFilePicker__browse-button:focus-visible {
3164
- outline: 2px solid transparent;
3165
- outline-offset: 2px;
3166
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3167
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2948
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3168
2949
  box-shadow:
2950
+ var(--tw-inset-shadow),
2951
+ var(--tw-inset-ring-shadow),
3169
2952
  var(--tw-ring-offset-shadow),
3170
2953
  var(--tw-ring-shadow),
3171
- var(--tw-shadow, 0 0 #0000);
3172
- --tw-ring-opacity: 1;
3173
- --tw-ring-color: rgb(var(--gecko-ui-primary-400) / var(--tw-ring-opacity, 1));
2954
+ var(--tw-shadow);
2955
+ --tw-ring-color: var(--color-primary-400);
3174
2956
  --tw-ring-offset-width: 2px;
2957
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2958
+ --tw-outline-style: none;
2959
+ outline-style: none;
3175
2960
  }
3176
2961
  .GeckoUIRHFFilePicker__file-list {
3177
2962
  display: flex;
3178
2963
  max-height: 200px;
3179
2964
  flex-direction: column;
3180
2965
  overflow-y: auto;
3181
- border-radius: 0.5rem;
2966
+ border-radius: var(--radius-lg, 0.5rem);
2967
+ border-style: var(--tw-border-style);
3182
2968
  border-width: 1px;
3183
- --tw-border-opacity: 1;
3184
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
2969
+ border-color: var(--color-border-secondary);
3185
2970
  }
3186
2971
  .GeckoUIRHFFilePicker__file-row {
3187
2972
  display: flex;
3188
2973
  align-items: center;
3189
- gap: 0.75rem;
2974
+ gap: calc(var(--spacing, 0.25rem) * 3);
2975
+ border-bottom-style: var(--tw-border-style);
3190
2976
  border-bottom-width: 1px;
3191
- --tw-border-opacity: 1;
3192
- border-color: rgb(var(--gecko-ui-border-secondary) / var(--tw-border-opacity, 1));
3193
- padding-left: 1rem;
3194
- padding-right: 1rem;
3195
- padding-top: 0.75rem;
3196
- padding-bottom: 0.75rem;
3197
- }
3198
- .GeckoUIRHFFilePicker__file-row:last-child {
3199
- border-bottom-width: 0px;
2977
+ border-color: var(--color-border-secondary);
2978
+ padding-inline: calc(var(--spacing, 0.25rem) * 4);
2979
+ padding-block: calc(var(--spacing, 0.25rem) * 3);
2980
+ &:last-child {
2981
+ border-bottom-style: var(--tw-border-style);
2982
+ border-bottom-width: 0px;
2983
+ }
3200
2984
  }
3201
2985
  .GeckoUIRHFFilePicker__file-row:hover {
3202
- --tw-bg-opacity: 1;
3203
- background-color: rgb(var(--gecko-ui-surface-secondary) / var(--tw-bg-opacity, 1));
2986
+ background-color: var(--color-surface-secondary);
3204
2987
  }
3205
2988
  .GeckoUIRHFFilePicker__file-name {
3206
- flex: 1 1 0%;
2989
+ flex: 1;
3207
2990
  overflow: hidden;
3208
2991
  text-overflow: ellipsis;
3209
2992
  white-space: nowrap;
3210
- font-size: 0.875rem;
3211
- line-height: 1.25rem;
3212
- --tw-text-opacity: 1;
3213
- color: rgb(var(--gecko-ui-text-primary) / var(--tw-text-opacity, 1));
2993
+ font-size: var(--text-sm, 0.875rem);
2994
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
2995
+ color: var(--color-text-primary);
3214
2996
  }
3215
2997
  .GeckoUIRHFFilePicker__file-size {
3216
2998
  flex-shrink: 0;
3217
- font-size: 0.75rem;
3218
- line-height: 1rem;
3219
- --tw-text-opacity: 1;
3220
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
2999
+ font-size: var(--text-xs, 0.75rem);
3000
+ line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
3001
+ color: var(--color-text-muted);
3221
3002
  }
3222
3003
  .GeckoUIRHFFilePicker__file-remove {
3223
3004
  box-sizing: border-box;
@@ -3241,141 +3022,220 @@
3241
3022
  background-image: none;
3242
3023
  flex-shrink: 0;
3243
3024
  border-radius: 0.25rem;
3244
- padding: 0.25rem;
3245
- --tw-text-opacity: 1;
3246
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
3025
+ padding: calc(var(--spacing, 0.25rem) * 1);
3026
+ color: var(--color-text-muted);
3247
3027
  transition-property:
3248
3028
  color,
3249
3029
  background-color,
3250
3030
  border-color,
3031
+ outline-color,
3251
3032
  text-decoration-color,
3252
3033
  fill,
3253
- stroke;
3254
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3034
+ stroke,
3035
+ --tw-gradient-from,
3036
+ --tw-gradient-via,
3037
+ --tw-gradient-to;
3038
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
3039
+ transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
3040
+ --tw-duration: 200ms;
3255
3041
  transition-duration: 200ms;
3256
3042
  }
3257
3043
  .GeckoUIRHFFilePicker__file-remove:hover {
3258
- --tw-bg-opacity: 1;
3259
- background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
3260
- --tw-text-opacity: 1;
3261
- color: rgb(220 38 38 / var(--tw-text-opacity, 1));
3044
+ background-color: var(--color-red-100, oklch(93.6% 0.032 17.717));
3045
+ color: var(--color-red-600, oklch(57.7% 0.245 27.325));
3262
3046
  }
3263
3047
  .GeckoUIRHFFilePicker__file-remove:focus-visible {
3264
- outline: 2px solid transparent;
3265
- outline-offset: 2px;
3266
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3267
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3048
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3268
3049
  box-shadow:
3050
+ var(--tw-inset-shadow),
3051
+ var(--tw-inset-ring-shadow),
3269
3052
  var(--tw-ring-offset-shadow),
3270
3053
  var(--tw-ring-shadow),
3271
- var(--tw-shadow, 0 0 #0000);
3272
- --tw-ring-opacity: 1;
3273
- --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
3054
+ var(--tw-shadow);
3055
+ --tw-ring-color: var(--color-red-400, oklch(70.4% 0.191 22.216));
3056
+ --tw-outline-style: none;
3057
+ outline-style: none;
3274
3058
  }
3275
3059
  .GeckoUIRHFFilePicker__file-remove-icon {
3276
- height: 1rem;
3277
- width: 1rem;
3060
+ height: calc(var(--spacing, 0.25rem) * 4);
3061
+ width: calc(var(--spacing, 0.25rem) * 4);
3278
3062
  }
3279
3063
  .GeckoUIRHFFilePicker__loading-overlay {
3280
3064
  pointer-events: none;
3281
3065
  position: absolute;
3282
- inset: 0px;
3066
+ inset: calc(var(--spacing, 0.25rem) * 0);
3283
3067
  display: flex;
3284
3068
  align-items: center;
3285
3069
  justify-content: center;
3286
- border-radius: 0.5rem;
3287
- background-color: rgb(var(--gecko-ui-surface-primary) / var(--tw-bg-opacity, 1));
3288
- --tw-bg-opacity: 0.5;
3070
+ border-radius: var(--radius-lg, 0.5rem);
3071
+ background-color: color-mix(in srgb, oklch(1 0 none) 50%, transparent);
3072
+ @supports (color: color-mix(in lab, red, red)) {
3073
+ background-color: color-mix(in oklab, var(--color-surface-primary) 50%, transparent);
3074
+ }
3289
3075
  }
3290
- .GeckoUIRHFCounterInput--error .GeckoUICounterInput__button,
3291
- .GeckoUIRHFCounterInput--error .GeckoUICounterInput__input {
3292
- --tw-border-opacity: 1;
3293
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
3076
+ .GeckoUIRHFCounterInput[data-error] .GeckoUICounterInput__button,
3077
+ .GeckoUIRHFCounterInput[data-error] .GeckoUICounterInput__input {
3078
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
3294
3079
  }
3295
- .GeckoUIRHFCounterInput--error:hover .GeckoUICounterInput__button,
3296
- .GeckoUIRHFCounterInput--error:hover .GeckoUICounterInput__input {
3297
- --tw-border-opacity: 1;
3298
- border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
3080
+ .GeckoUIRHFCounterInput[data-error]:hover .GeckoUICounterInput__button,
3081
+ .GeckoUIRHFCounterInput[data-error]:hover .GeckoUICounterInput__input {
3082
+ border-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
3299
3083
  }
3300
- .GeckoUIRHFCounterInput--error:focus-within .GeckoUICounterInput__button,
3301
- .GeckoUIRHFCounterInput--error:focus-within .GeckoUICounterInput__input {
3302
- --tw-border-opacity: 1;
3303
- border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
3084
+ .GeckoUIRHFCounterInput[data-error]:focus-within .GeckoUICounterInput__button,
3085
+ .GeckoUIRHFCounterInput[data-error]:focus-within .GeckoUICounterInput__input {
3086
+ border-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
3304
3087
  }
3305
3088
  .GeckoUIRHFCurrencyInput__currency-symbol,
3306
3089
  .GeckoUIRHFCurrencyInput__currency-code {
3307
- font-size: 0.875rem;
3308
- line-height: 1.25rem;
3309
- font-weight: 400;
3310
- --tw-text-opacity: 1;
3311
- color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
3090
+ font-size: var(--text-sm, 0.875rem);
3091
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
3092
+ --tw-font-weight: var(--font-weight-normal, 400);
3093
+ font-weight: var(--font-weight-normal, 400);
3094
+ color: var(--color-text-muted);
3312
3095
  }
3313
3096
  * {
3314
3097
  box-sizing: border-box;
3315
3098
  }
3316
3099
  :root {
3317
- --gecko-ui-primary-50: 239 246 255;
3318
- --gecko-ui-primary-100: 219 234 254;
3319
- --gecko-ui-primary-200: 191 219 254;
3320
- --gecko-ui-primary-300: 147 197 253;
3321
- --gecko-ui-primary-400: 96 165 250;
3322
- --gecko-ui-primary-500: 59 130 246;
3323
- --gecko-ui-primary-600: 37 99 235;
3324
- --gecko-ui-primary-700: 29 78 216;
3325
- --gecko-ui-primary-800: 30 64 175;
3326
- --gecko-ui-primary-900: 30 58 138;
3327
- --gecko-ui-primary-950: 23 37 84;
3328
- --gecko-ui-surface-primary: 255 255 255;
3329
- --gecko-ui-surface-secondary: 250 250 250;
3330
- --gecko-ui-surface-tertiary: 245 245 245;
3331
- --gecko-ui-surface-hover: 245 245 245;
3332
- --gecko-ui-surface-hover-strong: 235 235 235;
3333
- --gecko-ui-surface-active: 212 212 212;
3334
- --gecko-ui-surface-disabled: 235 235 235;
3335
- --gecko-ui-surface-overlay: 0 0 0;
3336
- --gecko-ui-surface-autofill: 245 245 245;
3337
- --gecko-ui-surface-emphasis: 75 85 99;
3338
- --gecko-ui-text-primary: 23 23 23;
3339
- --gecko-ui-text-secondary: 64 64 64;
3340
- --gecko-ui-text-tertiary: 115 115 115;
3341
- --gecko-ui-text-disabled: 163 163 163;
3342
- --gecko-ui-text-placeholder: 163 163 163;
3343
- --gecko-ui-text-inverse: 250 250 250;
3344
- --gecko-ui-text-muted: 115 115 115;
3345
- --gecko-ui-text-on-primary: 255 255 255;
3346
- --gecko-ui-border-primary: 235 235 235;
3347
- --gecko-ui-border-secondary: 212 212 212;
3348
- --gecko-ui-border-focus: 163 163 163;
3349
- --gecko-ui-border-hover: 212 212 212;
3350
- --gecko-ui-border-disabled: 235 235 235;
3351
- --gecko-ui-scrollbar-track: 0 0 0;
3352
- --gecko-ui-scrollbar-thumb: 209 213 219;
3353
- --gecko-ui-scrollbar-thumb-hover: 156 163 175;
3100
+ --color-primary-50: oklch(0.9705 0.0142 254.6);
3101
+ --color-primary-100: oklch(0.9319 0.0316 255.59);
3102
+ --color-primary-200: oklch(0.8823 0.0571 254.13);
3103
+ --color-primary-300: oklch(0.8091 0.0956 251.81);
3104
+ --color-primary-400: oklch(0.7137 0.1434 254.62);
3105
+ --color-primary-500: oklch(0.6231 0.188 259.81);
3106
+ --color-primary-600: oklch(0.5461 0.2152 262.88);
3107
+ --color-primary-700: oklch(0.4882 0.2172 264.38);
3108
+ --color-primary-800: oklch(0.4244 0.1809 265.64);
3109
+ --color-primary-900: oklch(0.3791 0.1378 265.52);
3110
+ --color-primary-950: oklch(0.2823 0.0874 267.94);
3111
+ --color-surface-primary: oklch(1 0 none);
3112
+ --color-surface-secondary: oklch(0.9851 0 none);
3113
+ --color-surface-tertiary: oklch(0.9702 0 none);
3114
+ --color-surface-hover: oklch(0.9702 0 none);
3115
+ --color-surface-hover-strong: oklch(0.9401 0 none);
3116
+ --color-surface-active: oklch(0.8699 0 none);
3117
+ --color-surface-disabled: oklch(0.9401 0 none);
3118
+ --color-surface-overlay: oklch(0 0 none);
3119
+ --color-surface-autofill: oklch(0.9702 0 none);
3120
+ --color-surface-emphasis: oklch(0.4461 0.0263 256.8);
3121
+ --color-text-primary: oklch(0.2046 0 none);
3122
+ --color-text-secondary: oklch(0.3715 0 none);
3123
+ --color-text-tertiary: oklch(0.5555 0 none);
3124
+ --color-text-disabled: oklch(0.7155 0 none);
3125
+ --color-text-placeholder: oklch(0.7155 0 none);
3126
+ --color-text-inverse: oklch(0.9851 0 none);
3127
+ --color-text-muted: oklch(0.5555 0 none);
3128
+ --color-text-on-primary: oklch(1 0 none);
3129
+ --color-border-primary: oklch(0.9401 0 none);
3130
+ --color-border-secondary: oklch(0.8699 0 none);
3131
+ --color-border-focus: oklch(0.7155 0 none);
3132
+ --color-border-hover: oklch(0.8699 0 none);
3133
+ --color-border-disabled: oklch(0.9401 0 none);
3134
+ --gecko-ui-scrollbar-track: oklch(0 0 none);
3135
+ --gecko-ui-scrollbar-thumb: oklch(0.8717 0.0093 258.34);
3136
+ --gecko-ui-scrollbar-thumb-hover: oklch(0.7137 0.0192 261.32);
3354
3137
  }
3355
3138
  .dark {
3356
- --gecko-ui-surface-primary: 23 23 23;
3357
- --gecko-ui-surface-secondary: 32 32 32;
3358
- --gecko-ui-surface-tertiary: 45 45 45;
3359
- --gecko-ui-surface-hover: 45 45 45;
3360
- --gecko-ui-surface-hover-strong: 64 64 64;
3361
- --gecko-ui-surface-active: 115 115 115;
3362
- --gecko-ui-surface-disabled: 45 45 45;
3363
- --gecko-ui-surface-overlay: 0 0 0;
3364
- --gecko-ui-surface-autofill: 32 32 32;
3365
- --gecko-ui-surface-emphasis: 179 182 185;
3366
- --gecko-ui-text-primary: 250 250 250;
3367
- --gecko-ui-text-secondary: 212 212 212;
3368
- --gecko-ui-text-tertiary: 163 163 163;
3369
- --gecko-ui-text-disabled: 115 115 115;
3370
- --gecko-ui-text-placeholder: 115 115 115;
3371
- --gecko-ui-text-inverse: 23 23 23;
3372
- --gecko-ui-text-muted: 163 163 163;
3373
- --gecko-ui-border-primary: 90 90 90;
3374
- --gecko-ui-border-secondary: 90 90 90;
3375
- --gecko-ui-border-focus: 115 115 115;
3376
- --gecko-ui-border-hover: 163 163 163;
3377
- --gecko-ui-border-disabled: 45 45 45;
3378
- --gecko-ui-scrollbar-track: 0 0 0;
3379
- --gecko-ui-scrollbar-thumb: 75 85 99;
3380
- --gecko-ui-scrollbar-thumb-hover: 107 114 128;
3139
+ --color-surface-primary: oklch(0.2046 0 none);
3140
+ --color-surface-secondary: oklch(0.2435 0 none);
3141
+ --color-surface-tertiary: oklch(0.2972 0 none);
3142
+ --color-surface-hover: oklch(0.2972 0 none);
3143
+ --color-surface-hover-strong: oklch(0.3715 0 none);
3144
+ --color-surface-active: oklch(0.5555 0 none);
3145
+ --color-surface-disabled: oklch(0.2972 0 none);
3146
+ --color-surface-overlay: oklch(0 0 none);
3147
+ --color-surface-autofill: oklch(0.2435 0 none);
3148
+ --color-surface-emphasis: oklch(0.7748 0.0054 247.89);
3149
+ --color-text-primary: oklch(0.9851 0 none);
3150
+ --color-text-secondary: oklch(0.8699 0 none);
3151
+ --color-text-tertiary: oklch(0.7155 0 none);
3152
+ --color-text-disabled: oklch(0.5555 0 none);
3153
+ --color-text-placeholder: oklch(0.5555 0 none);
3154
+ --color-text-inverse: oklch(0.2046 0 none);
3155
+ --color-text-muted: oklch(0.7155 0 none);
3156
+ --color-border-primary: oklch(0.4676 0 none);
3157
+ --color-border-secondary: oklch(0.4676 0 none);
3158
+ --color-border-focus: oklch(0.5555 0 none);
3159
+ --color-border-hover: oklch(0.7155 0 none);
3160
+ --color-border-disabled: oklch(0.2972 0 none);
3161
+ --gecko-ui-scrollbar-track: oklch(0 0 none);
3162
+ --gecko-ui-scrollbar-thumb: oklch(0.4461 0.0263 256.8);
3163
+ --gecko-ui-scrollbar-thumb-hover: oklch(0.551 0.0234 264.36);
3164
+ }
3165
+ @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
3166
+ @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3167
+ @property --tw-shadow-color { syntax: "*"; inherits: false; }
3168
+ @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
3169
+ @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3170
+ @property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
3171
+ @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
3172
+ @property --tw-ring-color { syntax: "*"; inherits: false; }
3173
+ @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3174
+ @property --tw-inset-ring-color { syntax: "*"; inherits: false; }
3175
+ @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3176
+ @property --tw-ring-inset { syntax: "*"; inherits: false; }
3177
+ @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
3178
+ @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
3179
+ @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3180
+ @property --tw-duration { syntax: "*"; inherits: false; }
3181
+ @property --tw-ease { syntax: "*"; inherits: false; }
3182
+ @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
3183
+ @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
3184
+ @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
3185
+ @property --tw-font-weight { syntax: "*"; inherits: false; }
3186
+ @property --tw-rotate-x { syntax: "*"; inherits: false; }
3187
+ @property --tw-rotate-y { syntax: "*"; inherits: false; }
3188
+ @property --tw-rotate-z { syntax: "*"; inherits: false; }
3189
+ @property --tw-skew-x { syntax: "*"; inherits: false; }
3190
+ @property --tw-skew-y { syntax: "*"; inherits: false; }
3191
+ @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
3192
+ @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
3193
+ @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
3194
+ @property --tw-leading { syntax: "*"; inherits: false; }
3195
+ @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
3196
+ @keyframes spin {
3197
+ to {
3198
+ transform: rotate(360deg);
3199
+ }
3200
+ }
3201
+ @layer properties {
3202
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3203
+ *,
3204
+ ::before,
3205
+ ::after,
3206
+ ::backdrop {
3207
+ --tw-border-style: solid;
3208
+ --tw-shadow: 0 0 #0000;
3209
+ --tw-shadow-color: initial;
3210
+ --tw-shadow-alpha: 100%;
3211
+ --tw-inset-shadow: 0 0 #0000;
3212
+ --tw-inset-shadow-color: initial;
3213
+ --tw-inset-shadow-alpha: 100%;
3214
+ --tw-ring-color: initial;
3215
+ --tw-ring-shadow: 0 0 #0000;
3216
+ --tw-inset-ring-color: initial;
3217
+ --tw-inset-ring-shadow: 0 0 #0000;
3218
+ --tw-ring-inset: initial;
3219
+ --tw-ring-offset-width: 0px;
3220
+ --tw-ring-offset-color: #fff;
3221
+ --tw-ring-offset-shadow: 0 0 #0000;
3222
+ --tw-duration: initial;
3223
+ --tw-ease: initial;
3224
+ --tw-scale-x: 1;
3225
+ --tw-scale-y: 1;
3226
+ --tw-scale-z: 1;
3227
+ --tw-font-weight: initial;
3228
+ --tw-rotate-x: initial;
3229
+ --tw-rotate-y: initial;
3230
+ --tw-rotate-z: initial;
3231
+ --tw-skew-x: initial;
3232
+ --tw-skew-y: initial;
3233
+ --tw-translate-x: 0;
3234
+ --tw-translate-y: 0;
3235
+ --tw-translate-z: 0;
3236
+ --tw-leading: initial;
3237
+ --tw-space-x-reverse: 0;
3238
+ }
3239
+ }
3381
3240
  }
3241
+ /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */