@channel.io/bezier-tokens 0.3.3-beta.4 → 0.3.3-beta.5

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