@channel.io/bezier-tokens 0.3.2 → 0.3.3-beta.2

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.
@@ -0,0 +1,1185 @@
1
+ [data-bezier-theme="dark"] {
2
+ --beta-backdrop-large: var(--beta-dimension-60);
3
+ --beta-backdrop-small: var(--beta-dimension-6);
4
+ --beta-border-default: 0 0 0 var(--beta-dimension-1) var(--beta-color-border-neutral);
5
+ --beta-border-bottom: 0 var(--beta-dimension-1-m) 0 0 var(--beta-color-border-neutral);
6
+ --beta-border-right: var(--beta-dimension-1-m) 0 0 0 var(--beta-color-border-neutral);
7
+ --beta-border-left: var(--beta-dimension-1) 0 0 0 var(--beta-color-border-neutral);
8
+ --beta-border-top: 0 var(--beta-dimension-1) 0 0 var(--beta-color-border-neutral);
9
+ --beta-border-white-high: 0 0 0 var(--beta-dimension-1) var(--beta-color-surface-high);
10
+ --beta-border-white-higher: 0 0 0 var(--beta-dimension-1) var(--beta-color-surface-higher);
11
+ --beta-border-white-highest: 0 0 0 var(--beta-dimension-1) var(--beta-color-surface-highest);
12
+ --beta-elevation-1: 0 var(--beta-dimension-1) var(--beta-dimension-2) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
13
+ --beta-elevation-2: 0 var(--beta-dimension-2) var(--beta-dimension-6) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
14
+ --beta-elevation-3: 0 var(--beta-dimension-4) var(--beta-dimension-12) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
15
+ --beta-elevation-4: 0 var(--beta-dimension-4) var(--beta-dimension-24) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
16
+ --beta-elevation-5: 0 var(--beta-dimension-6) var(--beta-dimension-40) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
17
+ --beta-elevation-6: 0 var(--beta-dimension-12) var(--beta-dimension-60) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
18
+ --beta-layer-z-index-base: var(--beta-layer-depth-0);
19
+ --beta-layer-z-index-floating: var(--beta-layer-depth-1);
20
+ --beta-layer-z-index-overlay: var(--beta-layer-depth-1000);
21
+ --beta-layer-z-index-modal: var(--beta-layer-depth-1100);
22
+ --beta-layer-z-index-toast: var(--beta-layer-depth-1200);
23
+ --beta-layer-z-index-tooltip: var(--beta-layer-depth-1300);
24
+ --beta-layer-z-index-hidden: var(--beta-layer-depth-1-m);
25
+ --beta-layer-z-index-important: var(--beta-layer-depth-2000);
26
+ --beta-motion-transition-fast: var(--beta-motion-duration-150) var(--beta-motion-timing-function-easing);
27
+ --beta-motion-transition-default: var(--beta-motion-duration-300) var(--beta-motion-timing-function-easing);
28
+ --beta-motion-transition-slow: var(--beta-motion-duration-450) var(--beta-motion-timing-function-easing);
29
+ --beta-opacity-disabled: var(--beta-dimension-40-p);
30
+ --beta-radius-2: var(--beta-dimension-2);
31
+ --beta-radius-3: var(--beta-dimension-3);
32
+ --beta-radius-4: var(--beta-dimension-4);
33
+ --beta-radius-6: var(--beta-dimension-6);
34
+ --beta-radius-7: var(--beta-dimension-7);
35
+ --beta-radius-8: var(--beta-dimension-8);
36
+ --beta-radius-10: var(--beta-dimension-10);
37
+ --beta-radius-12: var(--beta-dimension-12);
38
+ --beta-radius-14: var(--beta-dimension-14);
39
+ --beta-radius-16: var(--beta-dimension-16);
40
+ --beta-radius-20: var(--beta-dimension-20);
41
+ --beta-radius-32: var(--beta-dimension-32);
42
+ --beta-state-error: 0 0 0 var(--beta-dimension-1) var(--beta-color-state-warning);
43
+ --beta-state-active: 0 0 0 var(--beta-dimension-1) var(--beta-color-state-action);
44
+ --beta-state-input-default: 0 var(--beta-dimension-1) var(--beta-dimension-2) 0 var(--beta-color-elevation-base), inset 0 0 0 var(--beta-dimension-1) var(--beta-color-state-default);
45
+ --beta-state-input-hovered: 0 var(--beta-dimension-2) var(--beta-dimension-6) 0 var(--beta-color-elevation-base), inset 0 0 0 var(--beta-dimension-1) var(--beta-color-state-action);
46
+ --beta-state-input-active: 0 var(--beta-dimension-2) var(--beta-dimension-6) 0 var(--beta-color-elevation-base), 0 0 0 var(--beta-dimension-3) var(--beta-color-state-action-light), inset 0 0 0 var(--beta-dimension-1) var(--beta-color-state-action);
47
+ --beta-state-input-error: 0 var(--beta-dimension-2) var(--beta-dimension-6) 0 var(--beta-color-elevation-base), 0 0 0 var(--beta-dimension-3) var(--beta-color-state-warning-light), inset 0 0 0 var(--beta-dimension-1) var(--beta-color-state-warning);
48
+ --beta-typography-heading-font-family: var(--beta-typography-font-family-sans-kr);
49
+ --beta-typography-heading-size-xlarge: var(--beta-typography-font-size-24);
50
+ --beta-typography-heading-size-large: var(--beta-typography-font-size-22);
51
+ --beta-typography-heading-size-medium: var(--beta-typography-font-size-18);
52
+ --beta-typography-heading-size-small: var(--beta-typography-font-size-17);
53
+ --beta-typography-heading-size-xsmall: var(--beta-typography-font-size-16);
54
+ --beta-typography-heading-size-2xsmall: var(--beta-typography-font-size-15);
55
+ --beta-typography-heading-weight-bold: var(--beta-typography-font-weight-700);
56
+ --beta-typography-heading-letter-spacing: var(--beta-typography-letter-spacing-0);
57
+ --beta-typography-heading-letter-spacing-tight: var(--beta-typography-letter-spacing-0-1);
58
+ --beta-typography-heading-letter-spacing-tighter: var(--beta-typography-letter-spacing-0-4);
59
+ --beta-typography-heading-line-height-xlarge: var(--beta-typography-line-height-32);
60
+ --beta-typography-heading-line-height-large: var(--beta-typography-line-height-28);
61
+ --beta-typography-heading-line-height-medium: var(--beta-typography-line-height-24);
62
+ --beta-typography-heading-line-height-small: var(--beta-typography-line-height-24);
63
+ --beta-typography-heading-line-height-xsmall: var(--beta-typography-line-height-24);
64
+ --beta-typography-heading-line-height-2xsmall: var(--beta-typography-line-height-20);
65
+ --beta-typography-text-font-family: var(--beta-typography-font-family-sans-kr);
66
+ --beta-typography-text-size-2xlarge: var(--beta-typography-font-size-17);
67
+ --beta-typography-text-size-xlarge: var(--beta-typography-font-size-16);
68
+ --beta-typography-text-size-large: var(--beta-typography-font-size-15);
69
+ --beta-typography-text-size-medium: var(--beta-typography-font-size-14);
70
+ --beta-typography-text-size-small: var(--beta-typography-font-size-13);
71
+ --beta-typography-text-size-xsmall: var(--beta-typography-font-size-12);
72
+ --beta-typography-text-size-2xsmall: var(--beta-typography-font-size-11);
73
+ --beta-typography-text-weight-bold: var(--beta-typography-font-weight-700);
74
+ --beta-typography-text-weight-regular: var(--beta-typography-font-weight-400);
75
+ --beta-typography-text-letter-spacing: var(--beta-typography-letter-spacing-0);
76
+ --beta-typography-text-letter-spacing-tight: var(--beta-typography-letter-spacing-0-1);
77
+ --beta-typography-text-line-height-2xlarge: var(--beta-typography-line-height-24);
78
+ --beta-typography-text-line-height-xlarge: var(--beta-typography-line-height-24);
79
+ --beta-typography-text-line-height-large: var(--beta-typography-line-height-20);
80
+ --beta-typography-text-line-height-medium: var(--beta-typography-line-height-18);
81
+ --beta-typography-text-line-height-small: var(--beta-typography-line-height-18);
82
+ --beta-typography-text-line-height-xsmall: var(--beta-typography-line-height-16);
83
+ --beta-typography-text-line-height-2xsmall: var(--beta-typography-line-height-16);
84
+ --beta-typography-display-font-family: var(--beta-typography-font-family-sans-kr);
85
+ --beta-typography-display-size-large: var(--beta-typography-font-size-36);
86
+ --beta-typography-display-size-medium: var(--beta-typography-font-size-30);
87
+ --beta-typography-display-weight-bold: var(--beta-typography-font-weight-700);
88
+ --beta-typography-display-letter-spacing-tighter: var(--beta-typography-letter-spacing-0-4);
89
+ --beta-typography-display-line-height-large: var(--beta-typography-line-height-44);
90
+ --beta-typography-display-line-height-medium: var(--beta-typography-line-height-36);
91
+ --beta-typography-code-font-family: var(--beta-typography-font-family-monospace);
92
+ --beta-typography-code-size-medium: var(--beta-typography-font-size-14);
93
+ --beta-typography-code-size-small: var(--beta-typography-font-size-13);
94
+ --beta-typography-code-weight-regular: var(--beta-typography-font-weight-400);
95
+ --beta-typography-code-letter-spacing: var(--beta-typography-letter-spacing-0);
96
+ --beta-typography-code-line-height-medium: var(--beta-typography-line-height-18);
97
+ --beta-typography-code-line-height-small: var(--beta-typography-line-height-18);
98
+ --beta-color-text-action: var(--beta-color-blue-300);
99
+ --beta-color-text-action-hovered: #8184ffff;
100
+ --beta-color-text-success: var(--beta-color-green-200);
101
+ --beta-color-text-success-hovered: #8ae292ff;
102
+ --beta-color-text-highlight: var(--beta-color-cobalt-300);
103
+ --beta-color-text-highlight-hovered: #6cb8f5ff;
104
+ --beta-color-text-warning: var(--beta-color-orange-200);
105
+ --beta-color-text-warning-hovered: #ffb886ff;
106
+ --beta-color-text-critical: var(--beta-color-red-300);
107
+ --beta-color-text-critical-hovered: #f77171ff;
108
+ --beta-color-text-neutral-heaviest: var(--beta-color-white-100);
109
+ --beta-color-text-neutral-heaviest-hovered: #edededff;
110
+ --beta-color-text-neutral: var(--beta-color-white-80);
111
+ --beta-color-text-neutral-hovered: #edededcc;
112
+ --beta-color-text-neutral-light: var(--beta-color-white-60);
113
+ --beta-color-text-neutral-light-hovered: #ededed99;
114
+ --beta-color-text-neutral-lighter: var(--beta-color-white-40);
115
+ --beta-color-text-neutral-lighter-hovered: #ededed66;
116
+ --beta-color-text-accent-blue: var(--beta-color-blue-300);
117
+ --beta-color-text-accent-blue-hovered: #8184ffff;
118
+ --beta-color-text-accent-cobalt: var(--beta-color-cobalt-300);
119
+ --beta-color-text-accent-cobalt-hovered: #6cb8f5ff;
120
+ --beta-color-text-accent-green: var(--beta-color-green-300);
121
+ --beta-color-text-accent-green-hovered: #56cc77ff;
122
+ --beta-color-text-accent-red: var(--beta-color-red-300);
123
+ --beta-color-text-accent-red-hovered: #f77171ff;
124
+ --beta-color-text-accent-orange: var(--beta-color-orange-300);
125
+ --beta-color-text-accent-orange-hovered: #f8a45cff;
126
+ --beta-color-text-accent-yellow: var(--beta-color-yellow-300);
127
+ --beta-color-text-accent-yellow-hovered: #f7c736ff;
128
+ --beta-color-text-accent-teal: var(--beta-color-teal-300);
129
+ --beta-color-text-accent-teal-hovered: #4cdccfff;
130
+ --beta-color-text-accent-navy: var(--beta-color-navy-300);
131
+ --beta-color-text-accent-navy-hovered: #7b86d3ff;
132
+ --beta-color-text-accent-purple: var(--beta-color-purple-300);
133
+ --beta-color-text-accent-purple-hovered: #b686ffff;
134
+ --beta-color-text-accent-pink: var(--beta-color-pink-300);
135
+ --beta-color-text-accent-pink-hovered: #f27fdbff;
136
+ --beta-color-text-absolute-white: var(--beta-color-white-100);
137
+ --beta-color-text-absolute-white-hovered: #edededff;
138
+ --beta-color-text-absolute-black: var(--beta-color-black-100);
139
+ --beta-color-text-absolute-black-hovered: #0a0a0aff;
140
+ --beta-color-icon-action: var(--beta-color-blue-300);
141
+ --beta-color-icon-action-hovered: #8184ffff;
142
+ --beta-color-icon-success: var(--beta-color-green-300);
143
+ --beta-color-icon-success-hovered: #56cc77ff;
144
+ --beta-color-icon-highlight: var(--beta-color-cobalt-300);
145
+ --beta-color-icon-highlight-hovered: #6cb8f5ff;
146
+ --beta-color-icon-warning: var(--beta-color-orange-300);
147
+ --beta-color-icon-warning-hovered: #f8a45cff;
148
+ --beta-color-icon-critical: var(--beta-color-red-300);
149
+ --beta-color-icon-critical-hovered: #f77171ff;
150
+ --beta-color-icon-neutral: var(--beta-color-white-40);
151
+ --beta-color-icon-neutral-hovered: #ededed66;
152
+ --beta-color-icon-neutral-heavy: var(--beta-color-white-60);
153
+ --beta-color-icon-neutral-heavy-hovered: #ededed99;
154
+ --beta-color-icon-neutral-heavier: var(--beta-color-white-80);
155
+ --beta-color-icon-neutral-heavier-hovered: #edededcc;
156
+ --beta-color-icon-accent-blue: var(--beta-color-blue-300);
157
+ --beta-color-icon-accent-blue-hovered: #8184ffff;
158
+ --beta-color-icon-accent-cobalt: var(--beta-color-cobalt-300);
159
+ --beta-color-icon-accent-cobalt-hovered: #6cb8f5ff;
160
+ --beta-color-icon-accent-green: var(--beta-color-green-300);
161
+ --beta-color-icon-accent-green-hovered: #56cc77ff;
162
+ --beta-color-icon-accent-red: var(--beta-color-red-300);
163
+ --beta-color-icon-accent-red-hovered: #f77171ff;
164
+ --beta-color-icon-accent-orange: var(--beta-color-orange-300);
165
+ --beta-color-icon-accent-orange-hovered: #f8a45cff;
166
+ --beta-color-icon-accent-yellow: var(--beta-color-yellow-300);
167
+ --beta-color-icon-accent-yellow-hovered: #f7c736ff;
168
+ --beta-color-icon-accent-olive: var(--beta-color-olive-300);
169
+ --beta-color-icon-accent-olive-hovered: #ccdb25ff;
170
+ --beta-color-icon-accent-teal: var(--beta-color-teal-300);
171
+ --beta-color-icon-accent-teal-hovered: #4cdccfff;
172
+ --beta-color-icon-accent-navy: var(--beta-color-navy-300);
173
+ --beta-color-icon-accent-navy-hovered: #7b86d3ff;
174
+ --beta-color-icon-accent-purple: var(--beta-color-purple-300);
175
+ --beta-color-icon-accent-purple-hovered: #b686ffff;
176
+ --beta-color-icon-accent-pink: var(--beta-color-pink-300);
177
+ --beta-color-icon-accent-pink-hovered: #f27fdbff;
178
+ --beta-color-icon-absolute-white: var(--beta-color-white-100);
179
+ --beta-color-icon-absolute-white-hovered: #edededff;
180
+ --beta-color-icon-absolute-black: var(--beta-color-black-100);
181
+ --beta-color-icon-absolute-black-hovered: #0a0a0aff;
182
+ --beta-color-fill-neutral-heaviest: var(--beta-color-white-90);
183
+ --beta-color-fill-neutral-heaviest-hovered: #ededede6;
184
+ --beta-color-fill-neutral-heavier: var(--beta-color-white-40);
185
+ --beta-color-fill-neutral-heavier-hovered: #ededed66;
186
+ --beta-color-fill-neutral-heavy: var(--beta-color-white-20);
187
+ --beta-color-fill-neutral-heavy-hovered: #ededed4d;
188
+ --beta-color-fill-neutral-light: var(--beta-color-white-8);
189
+ --beta-color-fill-neutral-light-hovered: #ededed1e;
190
+ --beta-color-fill-neutral-lighter: var(--beta-color-white-5);
191
+ --beta-color-fill-neutral-lighter-hovered: #ededed14;
192
+ --beta-color-fill-neutral-lightest: var(--beta-color-white-3);
193
+ --beta-color-fill-neutral-lightest-hovered: #ededed0c;
194
+ --beta-color-fill-neutral-transparent: var(--beta-color-white-0);
195
+ --beta-color-fill-neutral-transparent-hovered: #ffffff0d;
196
+ --beta-color-fill-action: var(--beta-color-blue-300);
197
+ --beta-color-fill-action-hovered: #8184ffff;
198
+ --beta-color-fill-action-light: var(--beta-color-blue-300-30);
199
+ --beta-color-fill-action-light-hovered: #8184ff4d;
200
+ --beta-color-fill-action-lighter: var(--beta-color-blue-300-18);
201
+ --beta-color-fill-action-lighter-hovered: #8184ff45;
202
+ --beta-color-fill-action-transparent: var(--beta-color-blue-300-0);
203
+ --beta-color-fill-action-transparent-hovered: #6b6eff1a;
204
+ --beta-color-fill-success: var(--beta-color-green-300);
205
+ --beta-color-fill-success-hovered: #56cc77ff;
206
+ --beta-color-fill-success-light: var(--beta-color-green-300-30);
207
+ --beta-color-fill-success-light-hovered: #56cc774d;
208
+ --beta-color-fill-success-lighter: var(--beta-color-green-300-18);
209
+ --beta-color-fill-success-lighter-hovered: #56cc7745;
210
+ --beta-color-fill-success-transparent: var(--beta-color-green-300-0);
211
+ --beta-color-fill-success-transparent-hovered: #4bc16c1a;
212
+ --beta-color-fill-highlight: var(--beta-color-cobalt-300);
213
+ --beta-color-fill-highlight-hovered: #6cb8f5ff;
214
+ --beta-color-fill-highlight-light: var(--beta-color-cobalt-300-30);
215
+ --beta-color-fill-highlight-light-hovered: #6cb8f54d;
216
+ --beta-color-fill-highlight-lighter: var(--beta-color-cobalt-300-18);
217
+ --beta-color-fill-highlight-lighter-hovered: #6cb8f545;
218
+ --beta-color-fill-highlight-transparent: var(--beta-color-cobalt-300-0);
219
+ --beta-color-fill-highlight-transparent-hovered: #5cadef1a;
220
+ --beta-color-fill-warning: var(--beta-color-orange-300);
221
+ --beta-color-fill-warning-hovered: #f8a45cff;
222
+ --beta-color-fill-warning-light: var(--beta-color-orange-300-30);
223
+ --beta-color-fill-warning-light-hovered: #f8a45c4d;
224
+ --beta-color-fill-warning-lighter: var(--beta-color-orange-300-18);
225
+ --beta-color-fill-warning-lighter-hovered: #f8a45c45;
226
+ --beta-color-fill-warning-transparent: var(--beta-color-orange-300-0);
227
+ --beta-color-fill-warning-transparent-hovered: #f798471a;
228
+ --beta-color-fill-critical: var(--beta-color-red-300);
229
+ --beta-color-fill-critical-hovered: #f77171ff;
230
+ --beta-color-fill-critical-light: var(--beta-color-red-300-30);
231
+ --beta-color-fill-critical-light-hovered: #f771714d;
232
+ --beta-color-fill-critical-lighter: var(--beta-color-red-300-18);
233
+ --beta-color-fill-critical-lighter-hovered: #f7717145;
234
+ --beta-color-fill-critical-transparent: var(--beta-color-red-300-0);
235
+ --beta-color-fill-critical-transparent-hovered: #f260601a;
236
+ --beta-color-fill-grey: var(--beta-color-grey-850);
237
+ --beta-color-fill-grey-hovered: #343438ff;
238
+ --beta-color-fill-grey-heavy: var(--beta-color-grey-800);
239
+ --beta-color-fill-grey-heavy-hovered: #3a3a40ff;
240
+ --beta-color-fill-grey-heavier: var(--beta-color-grey-750);
241
+ --beta-color-fill-grey-heavier-hovered: #414147ff;
242
+ --beta-color-fill-accent-blue: var(--beta-color-blue-300-18);
243
+ --beta-color-fill-accent-blue-hovered: #8184ff45;
244
+ --beta-color-fill-accent-blue-heavy: var(--beta-color-blue-300-30);
245
+ --beta-color-fill-accent-blue-heavy-hovered: #8184ff4d;
246
+ --beta-color-fill-accent-blue-heavier: var(--beta-color-blue-300);
247
+ --beta-color-fill-accent-blue-heavier-hovered: #8184ffff;
248
+ --beta-color-fill-accent-blue-transparent: var(--beta-color-blue-300-0);
249
+ --beta-color-fill-accent-blue-transparent-hovered: #6b6eff1a;
250
+ --beta-color-fill-accent-cobalt: var(--beta-color-cobalt-300-18);
251
+ --beta-color-fill-accent-cobalt-hovered: #6cb8f545;
252
+ --beta-color-fill-accent-cobalt-heavy: var(--beta-color-cobalt-300-30);
253
+ --beta-color-fill-accent-cobalt-heavy-hovered: #6cb8f54d;
254
+ --beta-color-fill-accent-cobalt-heavier: var(--beta-color-cobalt-300);
255
+ --beta-color-fill-accent-cobalt-heavier-hovered: #6cb8f5ff;
256
+ --beta-color-fill-accent-cobalt-transparent: var(--beta-color-cobalt-300-0);
257
+ --beta-color-fill-accent-cobalt-transparent-hovered: #5cadef1a;
258
+ --beta-color-fill-accent-green: var(--beta-color-green-300-18);
259
+ --beta-color-fill-accent-green-hovered: #56cc7745;
260
+ --beta-color-fill-accent-green-heavy: var(--beta-color-green-300-30);
261
+ --beta-color-fill-accent-green-heavy-hovered: #56cc774d;
262
+ --beta-color-fill-accent-green-heavier: var(--beta-color-green-300);
263
+ --beta-color-fill-accent-green-heavier-hovered: #56cc77ff;
264
+ --beta-color-fill-accent-green-transparent: var(--beta-color-green-300-0);
265
+ --beta-color-fill-accent-green-transparent-hovered: #4bc16c1a;
266
+ --beta-color-fill-accent-red: var(--beta-color-red-300-18);
267
+ --beta-color-fill-accent-red-hovered: #f7717145;
268
+ --beta-color-fill-accent-red-heavy: var(--beta-color-red-300-30);
269
+ --beta-color-fill-accent-red-heavy-hovered: #f771714d;
270
+ --beta-color-fill-accent-red-heavier: var(--beta-color-red-300);
271
+ --beta-color-fill-accent-red-heavier-hovered: #f77171ff;
272
+ --beta-color-fill-accent-red-transparent: var(--beta-color-red-300-0);
273
+ --beta-color-fill-accent-red-transparent-hovered: #f260601a;
274
+ --beta-color-fill-accent-orange: var(--beta-color-orange-300-18);
275
+ --beta-color-fill-accent-orange-hovered: #f8a45c45;
276
+ --beta-color-fill-accent-orange-heavy: var(--beta-color-orange-300-30);
277
+ --beta-color-fill-accent-orange-heavy-hovered: #f8a45c4d;
278
+ --beta-color-fill-accent-orange-heavier: var(--beta-color-orange-300);
279
+ --beta-color-fill-accent-orange-heavier-hovered: #f8a45cff;
280
+ --beta-color-fill-accent-orange-transparent: var(--beta-color-orange-300-0);
281
+ --beta-color-fill-accent-orange-transparent-hovered: #f798471a;
282
+ --beta-color-fill-accent-yellow: var(--beta-color-yellow-300-18);
283
+ --beta-color-fill-accent-yellow-hovered: #f7c73645;
284
+ --beta-color-fill-accent-yellow-heavy: var(--beta-color-yellow-300-30);
285
+ --beta-color-fill-accent-yellow-heavy-hovered: #f7c7364d;
286
+ --beta-color-fill-accent-yellow-heavier: var(--beta-color-yellow-300);
287
+ --beta-color-fill-accent-yellow-heavier-hovered: #f7c736ff;
288
+ --beta-color-fill-accent-yellow-transparent: var(--beta-color-yellow-300-0);
289
+ --beta-color-fill-accent-yellow-transparent-hovered: #f0be271a;
290
+ --beta-color-fill-accent-olive: var(--beta-color-olive-300-18);
291
+ --beta-color-fill-accent-olive-hovered: #ccdb2545;
292
+ --beta-color-fill-accent-olive-heavy: var(--beta-color-olive-300-30);
293
+ --beta-color-fill-accent-olive-heavy-hovered: #ccdb254d;
294
+ --beta-color-fill-accent-olive-heavier: var(--beta-color-olive-300);
295
+ --beta-color-fill-accent-olive-heavier-hovered: #ccdb25ff;
296
+ --beta-color-fill-accent-olive-transparent: var(--beta-color-olive-300-0);
297
+ --beta-color-fill-accent-olive-transparent-hovered: #b7c4271a;
298
+ --beta-color-fill-accent-teal: var(--beta-color-teal-300-18);
299
+ --beta-color-fill-accent-teal-hovered: #4cdccf45;
300
+ --beta-color-fill-accent-teal-heavy: var(--beta-color-teal-300-30);
301
+ --beta-color-fill-accent-teal-heavy-hovered: #4cdccf4d;
302
+ --beta-color-fill-accent-teal-heavier: var(--beta-color-teal-300);
303
+ --beta-color-fill-accent-teal-heavier-hovered: #4cdccfff;
304
+ --beta-color-fill-accent-teal-transparent: var(--beta-color-teal-300-0);
305
+ --beta-color-fill-accent-teal-transparent-hovered: #40d3c51a;
306
+ --beta-color-fill-accent-navy: var(--beta-color-navy-300-18);
307
+ --beta-color-fill-accent-navy-hovered: #7b86d345;
308
+ --beta-color-fill-accent-navy-heavy: var(--beta-color-navy-300-30);
309
+ --beta-color-fill-accent-navy-heavy-hovered: #7b86d34d;
310
+ --beta-color-fill-accent-navy-heavier: var(--beta-color-navy-300);
311
+ --beta-color-fill-accent-navy-heavier-hovered: #7b86d3ff;
312
+ --beta-color-fill-accent-navy-transparent: var(--beta-color-navy-300-0);
313
+ --beta-color-fill-accent-navy-transparent-hovered: #6f7bc81a;
314
+ --beta-color-fill-accent-purple: var(--beta-color-purple-300-18);
315
+ --beta-color-fill-accent-purple-hovered: #b686ff45;
316
+ --beta-color-fill-accent-purple-heavy: var(--beta-color-purple-300-30);
317
+ --beta-color-fill-accent-purple-heavy-hovered: #b686ff4d;
318
+ --beta-color-fill-accent-purple-heavier: var(--beta-color-purple-300);
319
+ --beta-color-fill-accent-purple-heavier-hovered: #b686ffff;
320
+ --beta-color-fill-accent-purple-transparent: var(--beta-color-purple-300-0);
321
+ --beta-color-fill-accent-purple-transparent-hovered: #a970ff1a;
322
+ --beta-color-fill-accent-pink: var(--beta-color-pink-300-18);
323
+ --beta-color-fill-accent-pink-hovered: #f27fdb45;
324
+ --beta-color-fill-accent-pink-heavy: var(--beta-color-pink-300-30);
325
+ --beta-color-fill-accent-pink-heavy-hovered: #f27fdb4d;
326
+ --beta-color-fill-accent-pink-heavier: var(--beta-color-pink-300);
327
+ --beta-color-fill-accent-pink-heavier-hovered: #f27fdbff;
328
+ --beta-color-fill-accent-pink-transparent: var(--beta-color-pink-300-0);
329
+ --beta-color-fill-accent-pink-transparent-hovered: #ec6fd31a;
330
+ --beta-color-fill-absolute-white: var(--beta-color-white-100);
331
+ --beta-color-fill-absolute-white-hovered: #edededff;
332
+ --beta-color-fill-absolute-white-light: var(--beta-color-white-20);
333
+ --beta-color-fill-absolute-white-light-hovered: #ededed4d;
334
+ --beta-color-fill-absolute-white-transparent: var(--beta-color-white-0);
335
+ --beta-color-fill-absolute-white-transparent-hovered: #ffffff0d;
336
+ --beta-color-fill-absolute-black: var(--beta-color-black-100);
337
+ --beta-color-fill-absolute-black-hovered: #0a0a0aff;
338
+ --beta-color-fill-absolute-black-light: var(--beta-color-black-20);
339
+ --beta-color-fill-absolute-black-light-hovered: #0a0a0a4d;
340
+ --beta-color-fill-absolute-black-transparent: var(--beta-color-black-0);
341
+ --beta-color-fill-absolute-black-transparent-hovered: #0000000d;
342
+ --beta-color-border-neutral: var(--beta-color-white-12);
343
+ --beta-color-border-neutral-hovered: #ededed2f;
344
+ --beta-color-border-neutral-heavy: var(--beta-color-white-20);
345
+ --beta-color-border-neutral-heavy-hovered: #ededed4d;
346
+ --beta-color-border-neutral-heavier: var(--beta-color-white-40);
347
+ --beta-color-border-neutral-heavier-hovered: #ededed66;
348
+ --beta-color-border-detach: var(--beta-color-grey-900);
349
+ --beta-color-border-detach-hovered: #2e2e33ff;
350
+ --beta-color-border-detach-highest: var(--beta-color-grey-700);
351
+ --beta-color-border-detach-highest-hovered: #4f4f54ff;
352
+ --beta-color-border-detach-higher: var(--beta-color-grey-800);
353
+ --beta-color-border-detach-higher-hovered: #3a3a40ff;
354
+ --beta-color-border-detach-high: var(--beta-color-grey-850);
355
+ --beta-color-border-detach-high-hovered: #343438ff;
356
+ --beta-color-border-detach-low: var(--beta-color-grey-950);
357
+ --beta-color-border-detach-low-hovered: #242427ff;
358
+ --beta-color-border-absolute-white: var(--beta-color-white-100);
359
+ --beta-color-border-absolute-white-hovered: #edededff;
360
+ --beta-color-surface: var(--beta-color-grey-900);
361
+ --beta-color-surface-hovered: #2e2e33ff;
362
+ --beta-color-surface-highest: var(--beta-color-grey-750);
363
+ --beta-color-surface-highest-hovered: #414147ff;
364
+ --beta-color-surface-higher: var(--beta-color-grey-800);
365
+ --beta-color-surface-higher-hovered: #3a3a40ff;
366
+ --beta-color-surface-high: var(--beta-color-grey-850);
367
+ --beta-color-surface-high-hovered: #343438ff;
368
+ --beta-color-surface-low: var(--beta-color-grey-950);
369
+ --beta-color-surface-low-hovered: #242427ff;
370
+ --beta-color-surface-glass: var(--beta-color-grey-800-90);
371
+ --beta-color-surface-glass-hovered: #3a3a40e6;
372
+ --beta-color-surface-glass-highest: var(--beta-color-grey-700-90);
373
+ --beta-color-surface-glass-highest-hovered: #4f4f54e6;
374
+ --beta-color-surface-glass-higher: var(--beta-color-grey-800-90);
375
+ --beta-color-surface-glass-higher-hovered: #3a3a40e6;
376
+ --beta-color-surface-glass-high: var(--beta-color-grey-850-90);
377
+ --beta-color-surface-glass-high-hovered: #343438e6;
378
+ --beta-color-surface-accent-blue: var(--beta-color-blue-300);
379
+ --beta-color-surface-accent-blue-hovered: #8184ffff;
380
+ --beta-color-surface-accent-cobalt: var(--beta-color-cobalt-300);
381
+ --beta-color-surface-accent-cobalt-hovered: #6cb8f5ff;
382
+ --beta-color-surface-accent-green: var(--beta-color-green-300);
383
+ --beta-color-surface-accent-green-hovered: #56cc77ff;
384
+ --beta-color-surface-accent-red: var(--beta-color-red-300);
385
+ --beta-color-surface-accent-red-hovered: #f77171ff;
386
+ --beta-color-surface-accent-orange: var(--beta-color-orange-300);
387
+ --beta-color-surface-accent-orange-hovered: #f8a45cff;
388
+ --beta-color-surface-accent-yellow: var(--beta-color-yellow-300);
389
+ --beta-color-surface-accent-yellow-hovered: #f7c736ff;
390
+ --beta-color-surface-accent-olive: var(--beta-color-olive-300);
391
+ --beta-color-surface-accent-olive-hovered: #ccdb25ff;
392
+ --beta-color-surface-accent-teal: var(--beta-color-teal-300);
393
+ --beta-color-surface-accent-teal-hovered: #4cdccfff;
394
+ --beta-color-surface-accent-navy: var(--beta-color-navy-300);
395
+ --beta-color-surface-accent-navy-hovered: #7b86d3ff;
396
+ --beta-color-surface-accent-purple: var(--beta-color-purple-300);
397
+ --beta-color-surface-accent-purple-hovered: #b686ffff;
398
+ --beta-color-surface-accent-pink: var(--beta-color-pink-300);
399
+ --beta-color-surface-accent-pink-hovered: #f27fdbff;
400
+ --beta-color-dim-absolute-black: var(--beta-color-black-40);
401
+ --beta-color-dim-absolute-black-hovered: #0a0a0a66;
402
+ --beta-color-dim-absolute-black-heavy: var(--beta-color-black-60);
403
+ --beta-color-dim-absolute-black-heavy-hovered: #0a0a0a99;
404
+ --beta-color-dim-absolute-white: var(--beta-color-white-40);
405
+ --beta-color-dim-absolute-white-hovered: #ededed66;
406
+ --beta-color-dim-absolute-white-heavy: var(--beta-color-white-60);
407
+ --beta-color-dim-absolute-white-heavy-hovered: #ededed99;
408
+ --beta-color-gradient-green: var(--beta-color-green-400);
409
+ --beta-color-gradient-green-hovered: #1ec35dff;
410
+ --beta-color-gradient-green-heavy: var(--beta-color-green-300);
411
+ --beta-color-gradient-green-heavy-hovered: #56cc77ff;
412
+ --beta-color-state-default: var(--beta-color-white-20);
413
+ --beta-color-state-default-hovered: #ededed4d;
414
+ --beta-color-state-action: var(--beta-color-blue-300);
415
+ --beta-color-state-action-hovered: #8184ffff;
416
+ --beta-color-state-action-light: var(--beta-color-blue-300-45);
417
+ --beta-color-state-action-light-hovered: #8184ff73;
418
+ --beta-color-state-warning: var(--beta-color-orange-300);
419
+ --beta-color-state-warning-hovered: #f8a45cff;
420
+ --beta-color-state-warning-light: var(--beta-color-orange-300-30);
421
+ --beta-color-state-warning-light-hovered: #f8a45c4d;
422
+ --beta-color-elevation-xlarge: var(--beta-color-black-30);
423
+ --beta-color-elevation-xlarge-hovered: #0a0a0a4d;
424
+ --beta-color-elevation-large: var(--beta-color-black-22);
425
+ --beta-color-elevation-large-hovered: #0a0a0a38;
426
+ --beta-color-elevation-medium: var(--beta-color-black-15);
427
+ --beta-color-elevation-medium-hovered: #0a0a0a39;
428
+ --beta-color-elevation-small: var(--beta-color-black-8);
429
+ --beta-color-elevation-small-hovered: #0a0a0a1e;
430
+ --beta-color-elevation-base: var(--beta-color-black-5);
431
+ --beta-color-elevation-base-hovered: #0a0a0a14;
432
+ --beta-color-elevation-base-inner: var(--beta-color-white-12);
433
+ --beta-color-elevation-base-inner-hovered: #ededed2f;
434
+ }
435
+
436
+ :where(:root, :host) {
437
+ --beta-color-blue-100: #b2b7ffff;
438
+ --beta-color-blue-200: #8d93ffff;
439
+ --beta-color-blue-300: #6b6effff;
440
+ --beta-color-blue-400: #6157eaff;
441
+ --beta-color-blue-500: #5139d9ff;
442
+ --beta-color-blue-600: #4134bbff;
443
+ --beta-color-blue-300-0: #6b6eff00;
444
+ --beta-color-blue-300-10: #6b6eff1a;
445
+ --beta-color-blue-300-18: #6b6eff2e;
446
+ --beta-color-blue-300-30: #6b6eff4d;
447
+ --beta-color-blue-300-45: #6b6eff73;
448
+ --beta-color-blue-400-0: #6157ea00;
449
+ --beta-color-blue-400-5: #6157ea0d;
450
+ --beta-color-blue-400-10: #6157ea1a;
451
+ --beta-color-blue-400-20: #6157ea33;
452
+ --beta-color-blue-400-30: #6157ea4d;
453
+ --beta-color-cobalt-100: #a1d5ffff;
454
+ --beta-color-cobalt-200: #8dcafcff;
455
+ --beta-color-cobalt-300: #5cadefff;
456
+ --beta-color-cobalt-400: #3292e3ff;
457
+ --beta-color-cobalt-500: #3176d1ff;
458
+ --beta-color-cobalt-600: #2b59b5ff;
459
+ --beta-color-cobalt-300-0: #5cadef00;
460
+ --beta-color-cobalt-300-10: #5cadef1a;
461
+ --beta-color-cobalt-300-18: #5cadef2e;
462
+ --beta-color-cobalt-300-30: #5cadef4d;
463
+ --beta-color-cobalt-300-45: #5cadef73;
464
+ --beta-color-cobalt-400-0: #3292e300;
465
+ --beta-color-cobalt-400-5: #3292e30d;
466
+ --beta-color-cobalt-400-10: #3292e31a;
467
+ --beta-color-cobalt-400-20: #3292e333;
468
+ --beta-color-cobalt-400-30: #3292e34d;
469
+ --beta-color-green-100: #a4ecb3ff;
470
+ --beta-color-green-200: #7cd985ff;
471
+ --beta-color-green-300: #4bc16cff;
472
+ --beta-color-green-400: #20ab55ff;
473
+ --beta-color-green-500: #358761ff;
474
+ --beta-color-green-600: #327055ff;
475
+ --beta-color-green-300-0: #4bc16c00;
476
+ --beta-color-green-300-10: #4bc16c1a;
477
+ --beta-color-green-300-18: #4bc16c2e;
478
+ --beta-color-green-300-30: #4bc16c4d;
479
+ --beta-color-green-300-45: #4bc16c73;
480
+ --beta-color-green-400-0: #20ab5500;
481
+ --beta-color-green-400-5: #20ab550d;
482
+ --beta-color-green-400-10: #20ab551a;
483
+ --beta-color-green-400-20: #20ab5533;
484
+ --beta-color-green-400-30: #20ab554d;
485
+ --beta-color-red-100: #ffb8b8ff;
486
+ --beta-color-red-200: #ff8683ff;
487
+ --beta-color-red-300: #f26060ff;
488
+ --beta-color-red-400: #e1535dff;
489
+ --beta-color-red-500: #bc3a42ff;
490
+ --beta-color-red-600: #992c34ff;
491
+ --beta-color-red-300-0: #f2606000;
492
+ --beta-color-red-300-10: #f260601a;
493
+ --beta-color-red-300-18: #f260602e;
494
+ --beta-color-red-300-30: #f260604d;
495
+ --beta-color-red-300-45: #f2606073;
496
+ --beta-color-red-400-0: #e1535d00;
497
+ --beta-color-red-400-5: #e1535d0d;
498
+ --beta-color-red-400-10: #e1535d1a;
499
+ --beta-color-red-400-20: #e1535d33;
500
+ --beta-color-red-400-30: #e1535d4d;
501
+ --beta-color-orange-100: #ffc38fff;
502
+ --beta-color-orange-200: #ffab70ff;
503
+ --beta-color-orange-300: #f79847ff;
504
+ --beta-color-orange-400: #e67f2bff;
505
+ --beta-color-orange-500: #c1630dff;
506
+ --beta-color-orange-600: #a1540cff;
507
+ --beta-color-orange-300-0: #f7984700;
508
+ --beta-color-orange-300-10: #f798471a;
509
+ --beta-color-orange-300-18: #f798472e;
510
+ --beta-color-orange-300-30: #f798474d;
511
+ --beta-color-orange-300-45: #f7984773;
512
+ --beta-color-orange-400-0: #e67f2b00;
513
+ --beta-color-orange-400-5: #e67f2b0d;
514
+ --beta-color-orange-400-10: #e67f2b1a;
515
+ --beta-color-orange-400-20: #e67f2b33;
516
+ --beta-color-orange-400-30: #e67f2b4d;
517
+ --beta-color-yellow-100: #ffe38fff;
518
+ --beta-color-yellow-200: #fed968ff;
519
+ --beta-color-yellow-300: #f0be27ff;
520
+ --beta-color-yellow-400: #edae0dff;
521
+ --beta-color-yellow-500: #c38f00ff;
522
+ --beta-color-yellow-600: #9e7504ff;
523
+ --beta-color-yellow-300-0: #f0be2700;
524
+ --beta-color-yellow-300-10: #f0be271a;
525
+ --beta-color-yellow-300-18: #f0be272e;
526
+ --beta-color-yellow-300-30: #f0be274d;
527
+ --beta-color-yellow-300-45: #f0be2773;
528
+ --beta-color-yellow-400-0: #edae0d00;
529
+ --beta-color-yellow-400-5: #edae0d0d;
530
+ --beta-color-yellow-400-10: #edae0d1a;
531
+ --beta-color-yellow-400-20: #edae0d33;
532
+ --beta-color-yellow-400-30: #edae0d4d;
533
+ --beta-color-olive-100: #e7f17cff;
534
+ --beta-color-olive-200: #dbe56eff;
535
+ --beta-color-olive-300: #b7c427ff;
536
+ --beta-color-olive-400: #a9b110ff;
537
+ --beta-color-olive-500: #7b801cff;
538
+ --beta-color-olive-600: #65691cff;
539
+ --beta-color-olive-300-0: #b7c42700;
540
+ --beta-color-olive-300-10: #b7c4271a;
541
+ --beta-color-olive-300-18: #b7c4272e;
542
+ --beta-color-olive-300-30: #b7c4274d;
543
+ --beta-color-olive-300-45: #b7c42773;
544
+ --beta-color-olive-400-0: #a9b11000;
545
+ --beta-color-olive-400-5: #a9b1100d;
546
+ --beta-color-olive-400-10: #a9b1101a;
547
+ --beta-color-olive-400-20: #a9b11033;
548
+ --beta-color-olive-400-30: #a9b1104d;
549
+ --beta-color-teal-100: #9beee6ff;
550
+ --beta-color-teal-200: #72e0d5ff;
551
+ --beta-color-teal-300: #40d3c5ff;
552
+ --beta-color-teal-400: #09b2acff;
553
+ --beta-color-teal-500: #068e95ff;
554
+ --beta-color-teal-600: #06687dff;
555
+ --beta-color-teal-300-0: #40d3c500;
556
+ --beta-color-teal-300-10: #40d3c51a;
557
+ --beta-color-teal-300-18: #40d3c52e;
558
+ --beta-color-teal-300-30: #40d3c54d;
559
+ --beta-color-teal-300-45: #40d3c573;
560
+ --beta-color-teal-400-0: #09b2ac00;
561
+ --beta-color-teal-400-5: #09b2ac0d;
562
+ --beta-color-teal-400-10: #09b2ac1a;
563
+ --beta-color-teal-400-20: #09b2ac33;
564
+ --beta-color-teal-400-30: #09b2ac4d;
565
+ --beta-color-navy-100: #a5b2eeff;
566
+ --beta-color-navy-200: #8b99d9ff;
567
+ --beta-color-navy-300: #6f7bc8ff;
568
+ --beta-color-navy-400: #424fabff;
569
+ --beta-color-navy-500: #353888ff;
570
+ --beta-color-navy-600: #22245bff;
571
+ --beta-color-navy-300-0: #6f7bc800;
572
+ --beta-color-navy-300-10: #6f7bc81a;
573
+ --beta-color-navy-300-18: #6f7bc82e;
574
+ --beta-color-navy-300-30: #6f7bc84d;
575
+ --beta-color-navy-300-45: #6f7bc873;
576
+ --beta-color-navy-400-0: #424fab00;
577
+ --beta-color-navy-400-5: #424fab0d;
578
+ --beta-color-navy-400-10: #424fab1a;
579
+ --beta-color-navy-400-20: #424fab33;
580
+ --beta-color-navy-400-30: #424fab4d;
581
+ --beta-color-purple-100: #d1b5ffff;
582
+ --beta-color-purple-200: #c19affff;
583
+ --beta-color-purple-300: #a970ffff;
584
+ --beta-color-purple-400: #8e57e7ff;
585
+ --beta-color-purple-500: #6735b6ff;
586
+ --beta-color-purple-600: #54278fff;
587
+ --beta-color-purple-300-0: #a970ff00;
588
+ --beta-color-purple-300-10: #a970ff1a;
589
+ --beta-color-purple-300-18: #a970ff2e;
590
+ --beta-color-purple-300-30: #a970ff4d;
591
+ --beta-color-purple-300-45: #a970ff73;
592
+ --beta-color-purple-400-0: #8e57e700;
593
+ --beta-color-purple-400-5: #8e57e70d;
594
+ --beta-color-purple-400-10: #8e57e71a;
595
+ --beta-color-purple-400-20: #8e57e733;
596
+ --beta-color-purple-400-30: #8e57e74d;
597
+ --beta-color-pink-100: #ffafefff;
598
+ --beta-color-pink-200: #f392e0ff;
599
+ --beta-color-pink-300: #ec6fd3ff;
600
+ --beta-color-pink-400: #d64bb5ff;
601
+ --beta-color-pink-500: #b0369eff;
602
+ --beta-color-pink-600: #962c86ff;
603
+ --beta-color-pink-300-0: #ec6fd300;
604
+ --beta-color-pink-300-10: #ec6fd31a;
605
+ --beta-color-pink-300-18: #ec6fd32e;
606
+ --beta-color-pink-300-30: #ec6fd34d;
607
+ --beta-color-pink-300-45: #ec6fd373;
608
+ --beta-color-pink-400-0: #d64bb500;
609
+ --beta-color-pink-400-5: #d64bb50d;
610
+ --beta-color-pink-400-10: #d64bb51a;
611
+ --beta-color-pink-400-20: #d64bb533;
612
+ --beta-color-pink-400-30: #d64bb54d;
613
+ --beta-color-grey-50: #fbfbfbff;
614
+ --beta-color-grey-100: #f7f7f8ff;
615
+ --beta-color-grey-200: #efeff0ff;
616
+ --beta-color-grey-300: #e2e2e4ff;
617
+ --beta-color-grey-400: #cfcfd1ff;
618
+ --beta-color-grey-500: #a7a7aaff;
619
+ --beta-color-grey-600: #79797eff;
620
+ --beta-color-grey-700: #454549ff;
621
+ --beta-color-grey-750: #37373cff;
622
+ --beta-color-grey-800: #303035ff;
623
+ --beta-color-grey-850: #2a2a2dff;
624
+ --beta-color-grey-900: #242428ff;
625
+ --beta-color-grey-950: #1a1a1cff;
626
+ --beta-color-grey-50-80: #fbfbfbcc;
627
+ --beta-color-grey-100-80: #f7f7f8cc;
628
+ --beta-color-grey-100-90: #f7f7f8e6;
629
+ --beta-color-grey-200-80: #efeff0cc;
630
+ --beta-color-grey-200-90: #efeff0e6;
631
+ --beta-color-grey-700-80: #454549cc;
632
+ --beta-color-grey-700-90: #454549e6;
633
+ --beta-color-grey-800-80: #303035cc;
634
+ --beta-color-grey-800-90: #303035e6;
635
+ --beta-color-grey-850-80: #2a2a2dcc;
636
+ --beta-color-grey-850-90: #2a2a2de6;
637
+ --beta-color-grey-900-0: #24242800;
638
+ --beta-color-grey-900-90: #242428e6;
639
+ --beta-color-white-0: #ffffff00;
640
+ --beta-color-white-3: #ffffff08;
641
+ --beta-color-white-5: #ffffff0d;
642
+ --beta-color-white-8: #ffffff14;
643
+ --beta-color-white-12: #ffffff1f;
644
+ --beta-color-white-20: #ffffff33;
645
+ --beta-color-white-22: #ffffff38;
646
+ --beta-color-white-30: #ffffff4d;
647
+ --beta-color-white-40: #ffffff66;
648
+ --beta-color-white-50: #ffffff80;
649
+ --beta-color-white-60: #ffffff99;
650
+ --beta-color-white-80: #ffffffcc;
651
+ --beta-color-white-90: #ffffffe6;
652
+ --beta-color-white-100: #ffffffff;
653
+ --beta-color-black-0: #00000000;
654
+ --beta-color-black-1: #00000003;
655
+ --beta-color-black-3: #00000008;
656
+ --beta-color-black-5: #0000000d;
657
+ --beta-color-black-8: #00000014;
658
+ --beta-color-black-15: #00000026;
659
+ --beta-color-black-20: #00000033;
660
+ --beta-color-black-22: #00000038;
661
+ --beta-color-black-30: #0000004d;
662
+ --beta-color-black-40: #00000066;
663
+ --beta-color-black-50: #00000080;
664
+ --beta-color-black-60: #00000099;
665
+ --beta-color-black-70: #000000b3;
666
+ --beta-color-black-85: #000000d9;
667
+ --beta-color-black-100: #000000ff;
668
+ --beta-dimension-1: 1px;
669
+ --beta-dimension-2: 2px;
670
+ --beta-dimension-3: 3px;
671
+ --beta-dimension-4: 4px;
672
+ --beta-dimension-6: 6px;
673
+ --beta-dimension-7: 7px;
674
+ --beta-dimension-8: 8px;
675
+ --beta-dimension-10: 10px;
676
+ --beta-dimension-12: 12px;
677
+ --beta-dimension-14: 14px;
678
+ --beta-dimension-16: 16px;
679
+ --beta-dimension-20: 20px;
680
+ --beta-dimension-22: 22px;
681
+ --beta-dimension-24: 24px;
682
+ --beta-dimension-28: 28px;
683
+ --beta-dimension-30: 30px;
684
+ --beta-dimension-32: 32px;
685
+ --beta-dimension-36: 36px;
686
+ --beta-dimension-40: 40px;
687
+ --beta-dimension-42: 42px;
688
+ --beta-dimension-44: 44px;
689
+ --beta-dimension-48: 48px;
690
+ --beta-dimension-54: 54px;
691
+ --beta-dimension-60: 60px;
692
+ --beta-dimension-72: 72px;
693
+ --beta-dimension-90: 90px;
694
+ --beta-dimension-120: 120px;
695
+ --beta-dimension-160: 160px;
696
+ --beta-dimension-200: 200px;
697
+ --beta-dimension-240: 240px;
698
+ --beta-dimension-320: 320px;
699
+ --beta-dimension-420: 420px;
700
+ --beta-dimension-540: 540px;
701
+ --beta-dimension-640: 640px;
702
+ --beta-dimension-720: 720px;
703
+ --beta-dimension-800: 800px;
704
+ --beta-dimension-900: 900px;
705
+ --beta-dimension-1-m: -1px;
706
+ --beta-dimension-40-p: 40%;
707
+ --beta-dimension-42-p: 42%;
708
+ --beta-dimension-100-p: 100%;
709
+ --beta-layer-depth-0: 0;
710
+ --beta-layer-depth-1: 1;
711
+ --beta-layer-depth-1000: 1000;
712
+ --beta-layer-depth-1100: 1100;
713
+ --beta-layer-depth-1200: 1200;
714
+ --beta-layer-depth-1300: 1300;
715
+ --beta-layer-depth-2000: 2000;
716
+ --beta-layer-depth-1-m: -1;
717
+ --beta-motion-duration-150: 150ms;
718
+ --beta-motion-duration-300: 300ms;
719
+ --beta-motion-duration-450: 450ms;
720
+ --beta-motion-timing-function-easing: cubic-bezier(0.3, 0, 0, 1);
721
+ --beta-typography-font-family-sans-kr: 'Inter', 'NotoSansKR', 'Noto Sans KR', 'NotoSansJP', 'Noto Sans JP', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif';
722
+ --beta-typography-font-family-sans-jp: 'Inter', 'NotoSansJP', 'Noto Sans JP', 'NotoSansKR', 'Noto Sans KR', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif';
723
+ --beta-typography-font-family-monospace: 'ui-monospace', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'monospace';
724
+ --beta-typography-font-size-11: 11px;
725
+ --beta-typography-font-size-12: 12px;
726
+ --beta-typography-font-size-13: 13px;
727
+ --beta-typography-font-size-14: 14px;
728
+ --beta-typography-font-size-15: 15px;
729
+ --beta-typography-font-size-16: 16px;
730
+ --beta-typography-font-size-17: 17px;
731
+ --beta-typography-font-size-18: 18px;
732
+ --beta-typography-font-size-22: 22px;
733
+ --beta-typography-font-size-24: 24px;
734
+ --beta-typography-font-size-30: 30px;
735
+ --beta-typography-font-size-36: 36px;
736
+ --beta-typography-font-weight-400: 400;
737
+ --beta-typography-font-weight-700: 700;
738
+ --beta-typography-line-height-16: 16px;
739
+ --beta-typography-line-height-18: 18px;
740
+ --beta-typography-line-height-20: 20px;
741
+ --beta-typography-line-height-22: 22px;
742
+ --beta-typography-line-height-24: 24px;
743
+ --beta-typography-line-height-28: 28px;
744
+ --beta-typography-line-height-32: 32px;
745
+ --beta-typography-line-height-36: 36px;
746
+ --beta-typography-line-height-44: 44px;
747
+ --beta-typography-letter-spacing-0: 0;
748
+ --beta-typography-letter-spacing-0-1: -0.1px;
749
+ --beta-typography-letter-spacing-0-4: -0.4px;
750
+ }
751
+
752
+ :where(:root, :host), [data-bezier-theme="light"] {
753
+ --beta-backdrop-large: var(--beta-dimension-60);
754
+ --beta-backdrop-small: var(--beta-dimension-6);
755
+ --beta-border-default: 0 0 0 var(--beta-dimension-1) var(--beta-color-border-neutral);
756
+ --beta-border-bottom: 0 var(--beta-dimension-1-m) 0 0 var(--beta-color-border-neutral);
757
+ --beta-border-right: var(--beta-dimension-1-m) 0 0 0 var(--beta-color-border-neutral);
758
+ --beta-border-left: var(--beta-dimension-1) 0 0 0 var(--beta-color-border-neutral);
759
+ --beta-border-top: 0 var(--beta-dimension-1) 0 0 var(--beta-color-border-neutral);
760
+ --beta-border-white-high: 0 0 0 var(--beta-dimension-1) var(--beta-color-surface-high);
761
+ --beta-border-white-higher: 0 0 0 var(--beta-dimension-1) var(--beta-color-surface-higher);
762
+ --beta-border-white-highest: 0 0 0 var(--beta-dimension-1) var(--beta-color-surface-highest);
763
+ --beta-elevation-1: 0 var(--beta-dimension-1) var(--beta-dimension-2) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
764
+ --beta-elevation-2: 0 var(--beta-dimension-2) var(--beta-dimension-6) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
765
+ --beta-elevation-3: 0 var(--beta-dimension-4) var(--beta-dimension-12) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
766
+ --beta-elevation-4: 0 var(--beta-dimension-4) var(--beta-dimension-24) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
767
+ --beta-elevation-5: 0 var(--beta-dimension-6) var(--beta-dimension-40) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
768
+ --beta-elevation-6: 0 var(--beta-dimension-12) var(--beta-dimension-60) 0 var(--beta-color-elevation-small), 0 0 var(--beta-dimension-2) var(--beta-dimension-1) var(--beta-color-elevation-base), inset 0 0 var(--beta-dimension-2) 0 var(--beta-color-elevation-base-inner);
769
+ --beta-layer-z-index-base: var(--beta-layer-depth-0);
770
+ --beta-layer-z-index-floating: var(--beta-layer-depth-1);
771
+ --beta-layer-z-index-overlay: var(--beta-layer-depth-1000);
772
+ --beta-layer-z-index-modal: var(--beta-layer-depth-1100);
773
+ --beta-layer-z-index-toast: var(--beta-layer-depth-1200);
774
+ --beta-layer-z-index-tooltip: var(--beta-layer-depth-1300);
775
+ --beta-layer-z-index-hidden: var(--beta-layer-depth-1-m);
776
+ --beta-layer-z-index-important: var(--beta-layer-depth-2000);
777
+ --beta-motion-transition-fast: var(--beta-motion-duration-150) var(--beta-motion-timing-function-easing);
778
+ --beta-motion-transition-default: var(--beta-motion-duration-300) var(--beta-motion-timing-function-easing);
779
+ --beta-motion-transition-slow: var(--beta-motion-duration-450) var(--beta-motion-timing-function-easing);
780
+ --beta-opacity-disabled: var(--beta-dimension-40-p);
781
+ --beta-radius-2: var(--beta-dimension-2);
782
+ --beta-radius-3: var(--beta-dimension-3);
783
+ --beta-radius-4: var(--beta-dimension-4);
784
+ --beta-radius-6: var(--beta-dimension-6);
785
+ --beta-radius-7: var(--beta-dimension-7);
786
+ --beta-radius-8: var(--beta-dimension-8);
787
+ --beta-radius-10: var(--beta-dimension-10);
788
+ --beta-radius-12: var(--beta-dimension-12);
789
+ --beta-radius-14: var(--beta-dimension-14);
790
+ --beta-radius-16: var(--beta-dimension-16);
791
+ --beta-radius-20: var(--beta-dimension-20);
792
+ --beta-radius-32: var(--beta-dimension-32);
793
+ --beta-state-error: 0 0 0 var(--beta-dimension-1) var(--beta-color-state-warning);
794
+ --beta-state-active: 0 0 0 var(--beta-dimension-1) var(--beta-color-state-action);
795
+ --beta-state-input-default: 0 var(--beta-dimension-1) var(--beta-dimension-2) 0 var(--beta-color-elevation-base), inset 0 0 0 var(--beta-dimension-1) var(--beta-color-state-default);
796
+ --beta-state-input-hovered: 0 var(--beta-dimension-2) var(--beta-dimension-6) 0 var(--beta-color-elevation-base), inset 0 0 0 var(--beta-dimension-1) var(--beta-color-state-action);
797
+ --beta-state-input-active: 0 var(--beta-dimension-2) var(--beta-dimension-6) 0 var(--beta-color-elevation-base), 0 0 0 var(--beta-dimension-3) var(--beta-color-state-action-light), inset 0 0 0 var(--beta-dimension-1) var(--beta-color-state-action);
798
+ --beta-state-input-error: 0 var(--beta-dimension-2) var(--beta-dimension-6) 0 var(--beta-color-elevation-base), 0 0 0 var(--beta-dimension-3) var(--beta-color-state-warning-light), inset 0 0 0 var(--beta-dimension-1) var(--beta-color-state-warning);
799
+ --beta-typography-heading-font-family: var(--beta-typography-font-family-sans-kr);
800
+ --beta-typography-heading-size-xlarge: var(--beta-typography-font-size-24);
801
+ --beta-typography-heading-size-large: var(--beta-typography-font-size-22);
802
+ --beta-typography-heading-size-medium: var(--beta-typography-font-size-18);
803
+ --beta-typography-heading-size-small: var(--beta-typography-font-size-17);
804
+ --beta-typography-heading-size-xsmall: var(--beta-typography-font-size-16);
805
+ --beta-typography-heading-size-2xsmall: var(--beta-typography-font-size-15);
806
+ --beta-typography-heading-weight-bold: var(--beta-typography-font-weight-700);
807
+ --beta-typography-heading-letter-spacing: var(--beta-typography-letter-spacing-0);
808
+ --beta-typography-heading-letter-spacing-tight: var(--beta-typography-letter-spacing-0-1);
809
+ --beta-typography-heading-letter-spacing-tighter: var(--beta-typography-letter-spacing-0-4);
810
+ --beta-typography-heading-line-height-xlarge: var(--beta-typography-line-height-32);
811
+ --beta-typography-heading-line-height-large: var(--beta-typography-line-height-28);
812
+ --beta-typography-heading-line-height-medium: var(--beta-typography-line-height-24);
813
+ --beta-typography-heading-line-height-small: var(--beta-typography-line-height-24);
814
+ --beta-typography-heading-line-height-xsmall: var(--beta-typography-line-height-24);
815
+ --beta-typography-heading-line-height-2xsmall: var(--beta-typography-line-height-20);
816
+ --beta-typography-text-font-family: var(--beta-typography-font-family-sans-kr);
817
+ --beta-typography-text-size-2xlarge: var(--beta-typography-font-size-17);
818
+ --beta-typography-text-size-xlarge: var(--beta-typography-font-size-16);
819
+ --beta-typography-text-size-large: var(--beta-typography-font-size-15);
820
+ --beta-typography-text-size-medium: var(--beta-typography-font-size-14);
821
+ --beta-typography-text-size-small: var(--beta-typography-font-size-13);
822
+ --beta-typography-text-size-xsmall: var(--beta-typography-font-size-12);
823
+ --beta-typography-text-size-2xsmall: var(--beta-typography-font-size-11);
824
+ --beta-typography-text-weight-bold: var(--beta-typography-font-weight-700);
825
+ --beta-typography-text-weight-regular: var(--beta-typography-font-weight-400);
826
+ --beta-typography-text-letter-spacing: var(--beta-typography-letter-spacing-0);
827
+ --beta-typography-text-letter-spacing-tight: var(--beta-typography-letter-spacing-0-1);
828
+ --beta-typography-text-line-height-2xlarge: var(--beta-typography-line-height-24);
829
+ --beta-typography-text-line-height-xlarge: var(--beta-typography-line-height-24);
830
+ --beta-typography-text-line-height-large: var(--beta-typography-line-height-20);
831
+ --beta-typography-text-line-height-medium: var(--beta-typography-line-height-18);
832
+ --beta-typography-text-line-height-small: var(--beta-typography-line-height-18);
833
+ --beta-typography-text-line-height-xsmall: var(--beta-typography-line-height-16);
834
+ --beta-typography-text-line-height-2xsmall: var(--beta-typography-line-height-16);
835
+ --beta-typography-display-font-family: var(--beta-typography-font-family-sans-kr);
836
+ --beta-typography-display-size-large: var(--beta-typography-font-size-36);
837
+ --beta-typography-display-size-medium: var(--beta-typography-font-size-30);
838
+ --beta-typography-display-weight-bold: var(--beta-typography-font-weight-700);
839
+ --beta-typography-display-letter-spacing-tighter: var(--beta-typography-letter-spacing-0-4);
840
+ --beta-typography-display-line-height-large: var(--beta-typography-line-height-44);
841
+ --beta-typography-display-line-height-medium: var(--beta-typography-line-height-36);
842
+ --beta-typography-code-font-family: var(--beta-typography-font-family-monospace);
843
+ --beta-typography-code-size-medium: var(--beta-typography-font-size-14);
844
+ --beta-typography-code-size-small: var(--beta-typography-font-size-13);
845
+ --beta-typography-code-weight-regular: var(--beta-typography-font-weight-400);
846
+ --beta-typography-code-letter-spacing: var(--beta-typography-letter-spacing-0);
847
+ --beta-typography-code-line-height-medium: var(--beta-typography-line-height-18);
848
+ --beta-typography-code-line-height-small: var(--beta-typography-line-height-18);
849
+ --beta-color-text-action: var(--beta-color-blue-400);
850
+ --beta-color-text-action-hovered: #5146e4ff;
851
+ --beta-color-text-success: var(--beta-color-green-400);
852
+ --beta-color-text-success-hovered: #219c50ff;
853
+ --beta-color-text-highlight: var(--beta-color-cobalt-400);
854
+ --beta-color-text-highlight-hovered: #2589ddff;
855
+ --beta-color-text-warning: var(--beta-color-orange-400);
856
+ --beta-color-text-warning-hovered: #df751fff;
857
+ --beta-color-text-critical: var(--beta-color-red-400);
858
+ --beta-color-text-critical-hovered: #da444fff;
859
+ --beta-color-text-neutral-heaviest: var(--beta-color-black-100);
860
+ --beta-color-text-neutral-heaviest-hovered: #1c1c1cff;
861
+ --beta-color-text-neutral: var(--beta-color-black-85);
862
+ --beta-color-text-neutral-hovered: #1c1c1cd9;
863
+ --beta-color-text-neutral-light: var(--beta-color-black-60);
864
+ --beta-color-text-neutral-light-hovered: #1c1c1c99;
865
+ --beta-color-text-neutral-lighter: var(--beta-color-black-40);
866
+ --beta-color-text-neutral-lighter-hovered: #1c1c1c66;
867
+ --beta-color-text-accent-blue: var(--beta-color-blue-400);
868
+ --beta-color-text-accent-blue-hovered: #5146e4ff;
869
+ --beta-color-text-accent-cobalt: var(--beta-color-cobalt-400);
870
+ --beta-color-text-accent-cobalt-hovered: #2589ddff;
871
+ --beta-color-text-accent-green: var(--beta-color-green-400);
872
+ --beta-color-text-accent-green-hovered: #219c50ff;
873
+ --beta-color-text-accent-red: var(--beta-color-red-400);
874
+ --beta-color-text-accent-red-hovered: #da444fff;
875
+ --beta-color-text-accent-orange: var(--beta-color-orange-400);
876
+ --beta-color-text-accent-orange-hovered: #df751fff;
877
+ --beta-color-text-accent-yellow: var(--beta-color-yellow-400);
878
+ --beta-color-text-accent-yellow-hovered: #d9a010ff;
879
+ --beta-color-text-accent-teal: var(--beta-color-teal-400);
880
+ --beta-color-text-accent-teal-hovered: #08a5a0ff;
881
+ --beta-color-text-accent-navy: var(--beta-color-navy-400);
882
+ --beta-color-text-accent-navy-hovered: #414c9cff;
883
+ --beta-color-text-accent-purple: var(--beta-color-purple-400);
884
+ --beta-color-text-accent-purple-hovered: #8247e1ff;
885
+ --beta-color-text-accent-pink: var(--beta-color-pink-400);
886
+ --beta-color-text-accent-pink-hovered: #cf3eacff;
887
+ --beta-color-text-absolute-white: var(--beta-color-white-100);
888
+ --beta-color-text-absolute-white-hovered: #edededff;
889
+ --beta-color-text-absolute-black: var(--beta-color-black-100);
890
+ --beta-color-text-absolute-black-hovered: #1c1c1cff;
891
+ --beta-color-icon-action: var(--beta-color-blue-400);
892
+ --beta-color-icon-action-hovered: #5146e4ff;
893
+ --beta-color-icon-success: var(--beta-color-green-400);
894
+ --beta-color-icon-success-hovered: #219c50ff;
895
+ --beta-color-icon-highlight: var(--beta-color-cobalt-400);
896
+ --beta-color-icon-highlight-hovered: #2589ddff;
897
+ --beta-color-icon-warning: var(--beta-color-orange-400);
898
+ --beta-color-icon-warning-hovered: #df751fff;
899
+ --beta-color-icon-critical: var(--beta-color-red-400);
900
+ --beta-color-icon-critical-hovered: #da444fff;
901
+ --beta-color-icon-neutral: var(--beta-color-black-40);
902
+ --beta-color-icon-neutral-hovered: #1c1c1c66;
903
+ --beta-color-icon-neutral-heavy: var(--beta-color-black-60);
904
+ --beta-color-icon-neutral-heavy-hovered: #1c1c1c99;
905
+ --beta-color-icon-neutral-heavier: var(--beta-color-black-85);
906
+ --beta-color-icon-neutral-heavier-hovered: #1c1c1cd9;
907
+ --beta-color-icon-accent-blue: var(--beta-color-blue-400);
908
+ --beta-color-icon-accent-blue-hovered: #5146e4ff;
909
+ --beta-color-icon-accent-cobalt: var(--beta-color-cobalt-400);
910
+ --beta-color-icon-accent-cobalt-hovered: #2589ddff;
911
+ --beta-color-icon-accent-green: var(--beta-color-green-400);
912
+ --beta-color-icon-accent-green-hovered: #219c50ff;
913
+ --beta-color-icon-accent-red: var(--beta-color-red-400);
914
+ --beta-color-icon-accent-red-hovered: #da444fff;
915
+ --beta-color-icon-accent-orange: var(--beta-color-orange-400);
916
+ --beta-color-icon-accent-orange-hovered: #df751fff;
917
+ --beta-color-icon-accent-yellow: var(--beta-color-yellow-400);
918
+ --beta-color-icon-accent-yellow-hovered: #d9a010ff;
919
+ --beta-color-icon-accent-olive: var(--beta-color-olive-400);
920
+ --beta-color-icon-accent-olive-hovered: #9ba212ff;
921
+ --beta-color-icon-accent-teal: var(--beta-color-teal-400);
922
+ --beta-color-icon-accent-teal-hovered: #08a5a0ff;
923
+ --beta-color-icon-accent-navy: var(--beta-color-navy-400);
924
+ --beta-color-icon-accent-navy-hovered: #414c9cff;
925
+ --beta-color-icon-accent-purple: var(--beta-color-purple-400);
926
+ --beta-color-icon-accent-purple-hovered: #8247e1ff;
927
+ --beta-color-icon-accent-pink: var(--beta-color-pink-400);
928
+ --beta-color-icon-accent-pink-hovered: #cf3eacff;
929
+ --beta-color-icon-absolute-white: var(--beta-color-white-100);
930
+ --beta-color-icon-absolute-white-hovered: #edededff;
931
+ --beta-color-icon-absolute-black: var(--beta-color-black-100);
932
+ --beta-color-icon-absolute-black-hovered: #1c1c1cff;
933
+ --beta-color-fill-neutral-heaviest: var(--beta-color-black-85);
934
+ --beta-color-fill-neutral-heaviest-hovered: #1c1c1cd9;
935
+ --beta-color-fill-neutral-heavier: var(--beta-color-black-40);
936
+ --beta-color-fill-neutral-heavier-hovered: #1c1c1c66;
937
+ --beta-color-fill-neutral-heavy: var(--beta-color-black-15);
938
+ --beta-color-fill-neutral-heavy-hovered: #1c1c1c39;
939
+ --beta-color-fill-neutral-light: var(--beta-color-black-5);
940
+ --beta-color-fill-neutral-light-hovered: #1c1c1c14;
941
+ --beta-color-fill-neutral-lighter: var(--beta-color-black-3);
942
+ --beta-color-fill-neutral-lighter-hovered: #1c1c1c0c;
943
+ --beta-color-fill-neutral-lightest: var(--beta-color-black-1);
944
+ --beta-color-fill-neutral-lightest-hovered: #1c1c1c05;
945
+ --beta-color-fill-neutral-transparent: var(--beta-color-black-0);
946
+ --beta-color-fill-neutral-transparent-hovered: #0000000d;
947
+ --beta-color-fill-action: var(--beta-color-blue-400);
948
+ --beta-color-fill-action-hovered: #5146e4ff;
949
+ --beta-color-fill-action-light: var(--beta-color-blue-400-20);
950
+ --beta-color-fill-action-light-hovered: #5146e44d;
951
+ --beta-color-fill-action-lighter: var(--beta-color-blue-400-10);
952
+ --beta-color-fill-action-lighter-hovered: #5146e427;
953
+ --beta-color-fill-action-transparent: var(--beta-color-blue-400-0);
954
+ --beta-color-fill-action-transparent-hovered: #6157ea1a;
955
+ --beta-color-fill-success: var(--beta-color-green-400);
956
+ --beta-color-fill-success-hovered: #219c50ff;
957
+ --beta-color-fill-success-light: var(--beta-color-green-400-20);
958
+ --beta-color-fill-success-light-hovered: #219c504d;
959
+ --beta-color-fill-success-lighter: var(--beta-color-green-400-10);
960
+ --beta-color-fill-success-lighter-hovered: #219c5027;
961
+ --beta-color-fill-success-transparent: var(--beta-color-green-400-0);
962
+ --beta-color-fill-success-transparent-hovered: #20ab551a;
963
+ --beta-color-fill-highlight: var(--beta-color-cobalt-400);
964
+ --beta-color-fill-highlight-hovered: #2589ddff;
965
+ --beta-color-fill-highlight-light: var(--beta-color-cobalt-400-20);
966
+ --beta-color-fill-highlight-light-hovered: #2589dd4d;
967
+ --beta-color-fill-highlight-lighter: var(--beta-color-cobalt-400-10);
968
+ --beta-color-fill-highlight-lighter-hovered: #2589dd27;
969
+ --beta-color-fill-highlight-transparent: var(--beta-color-cobalt-400-0);
970
+ --beta-color-fill-highlight-transparent-hovered: #3292e31a;
971
+ --beta-color-fill-warning: var(--beta-color-orange-400);
972
+ --beta-color-fill-warning-hovered: #df751fff;
973
+ --beta-color-fill-warning-light: var(--beta-color-orange-400-20);
974
+ --beta-color-fill-warning-light-hovered: #df751f4d;
975
+ --beta-color-fill-warning-lighter: var(--beta-color-orange-400-10);
976
+ --beta-color-fill-warning-lighter-hovered: #df751f27;
977
+ --beta-color-fill-warning-transparent: var(--beta-color-orange-400-0);
978
+ --beta-color-fill-warning-transparent-hovered: #e67f2b1a;
979
+ --beta-color-fill-critical: var(--beta-color-red-400);
980
+ --beta-color-fill-critical-hovered: #da444fff;
981
+ --beta-color-fill-critical-light: var(--beta-color-red-400-20);
982
+ --beta-color-fill-critical-light-hovered: #da444f4d;
983
+ --beta-color-fill-critical-lighter: var(--beta-color-red-400-10);
984
+ --beta-color-fill-critical-lighter-hovered: #da444f27;
985
+ --beta-color-fill-critical-transparent: var(--beta-color-red-400-0);
986
+ --beta-color-fill-critical-transparent-hovered: #e1535d1a;
987
+ --beta-color-fill-grey: var(--beta-color-grey-50);
988
+ --beta-color-fill-grey-hovered: #e9e9e9ff;
989
+ --beta-color-fill-grey-heavy: var(--beta-color-grey-100);
990
+ --beta-color-fill-grey-heavy-hovered: #e5e5e8ff;
991
+ --beta-color-fill-grey-heavier: var(--beta-color-grey-200);
992
+ --beta-color-fill-grey-heavier-hovered: #dedee0ff;
993
+ --beta-color-fill-accent-blue: var(--beta-color-blue-400-10);
994
+ --beta-color-fill-accent-blue-hovered: #5146e427;
995
+ --beta-color-fill-accent-blue-heavy: var(--beta-color-blue-400-20);
996
+ --beta-color-fill-accent-blue-heavy-hovered: #5146e44d;
997
+ --beta-color-fill-accent-blue-heavier: var(--beta-color-blue-400);
998
+ --beta-color-fill-accent-blue-heavier-hovered: #5146e4ff;
999
+ --beta-color-fill-accent-blue-transparent: var(--beta-color-blue-400-0);
1000
+ --beta-color-fill-accent-blue-transparent-hovered: #6157ea1a;
1001
+ --beta-color-fill-accent-cobalt: var(--beta-color-cobalt-400-10);
1002
+ --beta-color-fill-accent-cobalt-hovered: #2589dd27;
1003
+ --beta-color-fill-accent-cobalt-heavy: var(--beta-color-cobalt-400-20);
1004
+ --beta-color-fill-accent-cobalt-heavy-hovered: #2589dd4d;
1005
+ --beta-color-fill-accent-cobalt-heavier: var(--beta-color-cobalt-400);
1006
+ --beta-color-fill-accent-cobalt-heavier-hovered: #2589ddff;
1007
+ --beta-color-fill-accent-cobalt-transparent: var(--beta-color-cobalt-400-0);
1008
+ --beta-color-fill-accent-cobalt-transparent-hovered: #3292e31a;
1009
+ --beta-color-fill-accent-green: var(--beta-color-green-400-10);
1010
+ --beta-color-fill-accent-green-hovered: #219c5027;
1011
+ --beta-color-fill-accent-green-heavy: var(--beta-color-green-400-20);
1012
+ --beta-color-fill-accent-green-heavy-hovered: #219c504d;
1013
+ --beta-color-fill-accent-green-heavier: var(--beta-color-green-400);
1014
+ --beta-color-fill-accent-green-heavier-hovered: #219c50ff;
1015
+ --beta-color-fill-accent-green-transparent: var(--beta-color-green-400-0);
1016
+ --beta-color-fill-accent-green-transparent-hovered: #20ab551a;
1017
+ --beta-color-fill-accent-red: var(--beta-color-red-400-10);
1018
+ --beta-color-fill-accent-red-hovered: #da444f27;
1019
+ --beta-color-fill-accent-red-heavy: var(--beta-color-red-400-20);
1020
+ --beta-color-fill-accent-red-heavy-hovered: #da444f4d;
1021
+ --beta-color-fill-accent-red-heavier: var(--beta-color-red-400);
1022
+ --beta-color-fill-accent-red-heavier-hovered: #da444fff;
1023
+ --beta-color-fill-accent-red-transparent: var(--beta-color-red-400-0);
1024
+ --beta-color-fill-accent-red-transparent-hovered: #e1535d1a;
1025
+ --beta-color-fill-accent-orange: var(--beta-color-orange-400-10);
1026
+ --beta-color-fill-accent-orange-hovered: #df751f27;
1027
+ --beta-color-fill-accent-orange-heavy: var(--beta-color-orange-400-20);
1028
+ --beta-color-fill-accent-orange-heavy-hovered: #df751f4d;
1029
+ --beta-color-fill-accent-orange-heavier: var(--beta-color-orange-400);
1030
+ --beta-color-fill-accent-orange-heavier-hovered: #df751fff;
1031
+ --beta-color-fill-accent-orange-transparent: var(--beta-color-orange-400-0);
1032
+ --beta-color-fill-accent-orange-transparent-hovered: #e67f2b1a;
1033
+ --beta-color-fill-accent-yellow: var(--beta-color-yellow-400-10);
1034
+ --beta-color-fill-accent-yellow-hovered: #d9a01027;
1035
+ --beta-color-fill-accent-yellow-heavy: var(--beta-color-yellow-400-20);
1036
+ --beta-color-fill-accent-yellow-heavy-hovered: #d9a0104d;
1037
+ --beta-color-fill-accent-yellow-heavier: var(--beta-color-yellow-400);
1038
+ --beta-color-fill-accent-yellow-heavier-hovered: #d9a010ff;
1039
+ --beta-color-fill-accent-yellow-transparent: var(--beta-color-yellow-400-0);
1040
+ --beta-color-fill-accent-yellow-transparent-hovered: #edae0d1a;
1041
+ --beta-color-fill-accent-olive: var(--beta-color-olive-400-10);
1042
+ --beta-color-fill-accent-olive-hovered: #9ba21227;
1043
+ --beta-color-fill-accent-olive-heavy: var(--beta-color-olive-400-20);
1044
+ --beta-color-fill-accent-olive-heavy-hovered: #9ba2124d;
1045
+ --beta-color-fill-accent-olive-heavier: var(--beta-color-olive-400);
1046
+ --beta-color-fill-accent-olive-heavier-hovered: #9ba212ff;
1047
+ --beta-color-fill-accent-olive-transparent: var(--beta-color-olive-400-0);
1048
+ --beta-color-fill-accent-olive-transparent-hovered: #a9b1101a;
1049
+ --beta-color-fill-accent-teal: var(--beta-color-teal-400-10);
1050
+ --beta-color-fill-accent-teal-hovered: #08a5a027;
1051
+ --beta-color-fill-accent-teal-heavy: var(--beta-color-teal-400-20);
1052
+ --beta-color-fill-accent-teal-heavy-hovered: #08a5a04d;
1053
+ --beta-color-fill-accent-teal-heavier: var(--beta-color-teal-400);
1054
+ --beta-color-fill-accent-teal-heavier-hovered: #08a5a0ff;
1055
+ --beta-color-fill-accent-teal-transparent: var(--beta-color-teal-400-0);
1056
+ --beta-color-fill-accent-teal-transparent-hovered: #09b2ac1a;
1057
+ --beta-color-fill-accent-navy: var(--beta-color-navy-400-10);
1058
+ --beta-color-fill-accent-navy-hovered: #414c9c27;
1059
+ --beta-color-fill-accent-navy-heavy: var(--beta-color-navy-400-20);
1060
+ --beta-color-fill-accent-navy-heavy-hovered: #414c9c4d;
1061
+ --beta-color-fill-accent-navy-heavier: var(--beta-color-navy-400);
1062
+ --beta-color-fill-accent-navy-heavier-hovered: #414c9cff;
1063
+ --beta-color-fill-accent-navy-transparent: var(--beta-color-navy-400-0);
1064
+ --beta-color-fill-accent-navy-transparent-hovered: #424fab1a;
1065
+ --beta-color-fill-accent-purple: var(--beta-color-purple-400-10);
1066
+ --beta-color-fill-accent-purple-hovered: #8247e127;
1067
+ --beta-color-fill-accent-purple-heavy: var(--beta-color-purple-400-20);
1068
+ --beta-color-fill-accent-purple-heavy-hovered: #8247e14d;
1069
+ --beta-color-fill-accent-purple-heavier: var(--beta-color-purple-400);
1070
+ --beta-color-fill-accent-purple-heavier-hovered: #8247e1ff;
1071
+ --beta-color-fill-accent-purple-transparent: var(--beta-color-purple-400-0);
1072
+ --beta-color-fill-accent-purple-transparent-hovered: #8e57e71a;
1073
+ --beta-color-fill-accent-pink: var(--beta-color-pink-400-10);
1074
+ --beta-color-fill-accent-pink-hovered: #cf3eac27;
1075
+ --beta-color-fill-accent-pink-heavy: var(--beta-color-pink-400-20);
1076
+ --beta-color-fill-accent-pink-heavy-hovered: #cf3eac4d;
1077
+ --beta-color-fill-accent-pink-heavier: var(--beta-color-pink-400);
1078
+ --beta-color-fill-accent-pink-heavier-hovered: #cf3eacff;
1079
+ --beta-color-fill-accent-pink-transparent: var(--beta-color-pink-400-0);
1080
+ --beta-color-fill-accent-pink-transparent-hovered: #d64bb51a;
1081
+ --beta-color-fill-absolute-white: var(--beta-color-white-100);
1082
+ --beta-color-fill-absolute-white-hovered: #edededff;
1083
+ --beta-color-fill-absolute-white-light: var(--beta-color-white-20);
1084
+ --beta-color-fill-absolute-white-light-hovered: #ededed4d;
1085
+ --beta-color-fill-absolute-white-transparent: var(--beta-color-white-0);
1086
+ --beta-color-fill-absolute-white-transparent-hovered: #ffffff0d;
1087
+ --beta-color-fill-absolute-black: var(--beta-color-black-100);
1088
+ --beta-color-fill-absolute-black-hovered: #1c1c1cff;
1089
+ --beta-color-fill-absolute-black-light: var(--beta-color-black-20);
1090
+ --beta-color-fill-absolute-black-light-hovered: #1c1c1c4d;
1091
+ --beta-color-fill-absolute-black-transparent: var(--beta-color-black-0);
1092
+ --beta-color-fill-absolute-black-transparent-hovered: #0000000d;
1093
+ --beta-color-border-neutral: var(--beta-color-black-8);
1094
+ --beta-color-border-neutral-hovered: #1c1c1c1e;
1095
+ --beta-color-border-neutral-heavy: var(--beta-color-black-15);
1096
+ --beta-color-border-neutral-heavy-hovered: #1c1c1c39;
1097
+ --beta-color-border-neutral-heavier: var(--beta-color-black-40);
1098
+ --beta-color-border-neutral-heavier-hovered: #1c1c1c66;
1099
+ --beta-color-border-detach: var(--beta-color-white-100);
1100
+ --beta-color-border-detach-hovered: #edededff;
1101
+ --beta-color-border-detach-highest: var(--beta-color-white-100);
1102
+ --beta-color-border-detach-highest-hovered: #edededff;
1103
+ --beta-color-border-detach-higher: var(--beta-color-white-100);
1104
+ --beta-color-border-detach-higher-hovered: #edededff;
1105
+ --beta-color-border-detach-high: var(--beta-color-white-100);
1106
+ --beta-color-border-detach-high-hovered: #edededff;
1107
+ --beta-color-border-detach-low: var(--beta-color-grey-50);
1108
+ --beta-color-border-detach-low-hovered: #e9e9e9ff;
1109
+ --beta-color-border-absolute-white: var(--beta-color-white-100);
1110
+ --beta-color-border-absolute-white-hovered: #edededff;
1111
+ --beta-color-surface: var(--beta-color-white-100);
1112
+ --beta-color-surface-hovered: #edededff;
1113
+ --beta-color-surface-highest: var(--beta-color-white-100);
1114
+ --beta-color-surface-highest-hovered: #edededff;
1115
+ --beta-color-surface-higher: var(--beta-color-white-100);
1116
+ --beta-color-surface-higher-hovered: #edededff;
1117
+ --beta-color-surface-high: var(--beta-color-white-100);
1118
+ --beta-color-surface-high-hovered: #edededff;
1119
+ --beta-color-surface-low: var(--beta-color-grey-50);
1120
+ --beta-color-surface-low-hovered: #e9e9e9ff;
1121
+ --beta-color-surface-glass: var(--beta-color-white-90);
1122
+ --beta-color-surface-glass-hovered: #ededede6;
1123
+ --beta-color-surface-glass-highest: var(--beta-color-grey-200-90);
1124
+ --beta-color-surface-glass-highest-hovered: #dedee0e6;
1125
+ --beta-color-surface-glass-higher: var(--beta-color-grey-100-90);
1126
+ --beta-color-surface-glass-higher-hovered: #e5e5e8e6;
1127
+ --beta-color-surface-glass-high: var(--beta-color-white-90);
1128
+ --beta-color-surface-glass-high-hovered: #ededede6;
1129
+ --beta-color-surface-accent-blue: var(--beta-color-blue-400);
1130
+ --beta-color-surface-accent-blue-hovered: #5146e4ff;
1131
+ --beta-color-surface-accent-cobalt: var(--beta-color-cobalt-400);
1132
+ --beta-color-surface-accent-cobalt-hovered: #2589ddff;
1133
+ --beta-color-surface-accent-green: var(--beta-color-green-400);
1134
+ --beta-color-surface-accent-green-hovered: #219c50ff;
1135
+ --beta-color-surface-accent-red: var(--beta-color-red-400);
1136
+ --beta-color-surface-accent-red-hovered: #da444fff;
1137
+ --beta-color-surface-accent-orange: var(--beta-color-orange-400);
1138
+ --beta-color-surface-accent-orange-hovered: #df751fff;
1139
+ --beta-color-surface-accent-yellow: var(--beta-color-yellow-400);
1140
+ --beta-color-surface-accent-yellow-hovered: #d9a010ff;
1141
+ --beta-color-surface-accent-olive: var(--beta-color-olive-400);
1142
+ --beta-color-surface-accent-olive-hovered: #9ba212ff;
1143
+ --beta-color-surface-accent-teal: var(--beta-color-teal-400);
1144
+ --beta-color-surface-accent-teal-hovered: #08a5a0ff;
1145
+ --beta-color-surface-accent-navy: var(--beta-color-navy-400);
1146
+ --beta-color-surface-accent-navy-hovered: #414c9cff;
1147
+ --beta-color-surface-accent-purple: var(--beta-color-purple-400);
1148
+ --beta-color-surface-accent-purple-hovered: #8247e1ff;
1149
+ --beta-color-surface-accent-pink: var(--beta-color-pink-400);
1150
+ --beta-color-surface-accent-pink-hovered: #cf3eacff;
1151
+ --beta-color-dim-absolute-black: var(--beta-color-black-40);
1152
+ --beta-color-dim-absolute-black-hovered: #1c1c1c66;
1153
+ --beta-color-dim-absolute-black-heavy: var(--beta-color-black-60);
1154
+ --beta-color-dim-absolute-black-heavy-hovered: #1c1c1c99;
1155
+ --beta-color-dim-absolute-white: var(--beta-color-white-40);
1156
+ --beta-color-dim-absolute-white-hovered: #ededed66;
1157
+ --beta-color-dim-absolute-white-heavy: var(--beta-color-white-60);
1158
+ --beta-color-dim-absolute-white-heavy-hovered: #ededed99;
1159
+ --beta-color-gradient-green: var(--beta-color-green-400);
1160
+ --beta-color-gradient-green-hovered: #219c50ff;
1161
+ --beta-color-gradient-green-heavy: var(--beta-color-green-300);
1162
+ --beta-color-gradient-green-heavy-hovered: #44b663ff;
1163
+ --beta-color-state-default: var(--beta-color-black-15);
1164
+ --beta-color-state-default-hovered: #1c1c1c39;
1165
+ --beta-color-state-action: var(--beta-color-blue-400);
1166
+ --beta-color-state-action-hovered: #5146e4ff;
1167
+ --beta-color-state-action-light: var(--beta-color-blue-400-30);
1168
+ --beta-color-state-action-light-hovered: #5146e44d;
1169
+ --beta-color-state-warning: var(--beta-color-orange-400);
1170
+ --beta-color-state-warning-hovered: #df751fff;
1171
+ --beta-color-state-warning-light: var(--beta-color-orange-400-30);
1172
+ --beta-color-state-warning-light-hovered: #df751f4d;
1173
+ --beta-color-elevation-xlarge: var(--beta-color-black-30);
1174
+ --beta-color-elevation-xlarge-hovered: #1c1c1c4d;
1175
+ --beta-color-elevation-large: var(--beta-color-black-22);
1176
+ --beta-color-elevation-large-hovered: #1c1c1c38;
1177
+ --beta-color-elevation-medium: var(--beta-color-black-15);
1178
+ --beta-color-elevation-medium-hovered: #1c1c1c39;
1179
+ --beta-color-elevation-small: var(--beta-color-black-8);
1180
+ --beta-color-elevation-small-hovered: #1c1c1c1e;
1181
+ --beta-color-elevation-base: var(--beta-color-black-5);
1182
+ --beta-color-elevation-base-hovered: #1c1c1c14;
1183
+ --beta-color-elevation-base-inner: var(--beta-color-white-12);
1184
+ --beta-color-elevation-base-inner-hovered: #ededed2f;
1185
+ }