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

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,694 +1,696 @@
1
1
 
2
- $beta-backdrop-large: 60px !default;
3
- $beta-backdrop-small: 6px !default;
4
- $beta-border-default: 0 0 0 1px #ffffff1f !default;
5
- $beta-border-bottom: 0 -1px 0 0 #ffffff1f !default;
6
- $beta-border-right: -1px 0 0 0 #ffffff1f !default;
7
- $beta-border-left: 1px 0 0 0 #ffffff1f !default;
8
- $beta-border-top: 0 1px 0 0 #ffffff1f !default;
9
- $beta-border-white-high: 0 0 0 1px #2a2a2dff !default;
10
- $beta-border-white-higher: 0 0 0 1px #303035ff !default;
11
- $beta-border-white-highest: 0 0 0 1px #37373cff !default;
12
- $beta-elevation-1: 0 1px 2px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
13
- $beta-elevation-2: 0 2px 6px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
14
- $beta-elevation-3: 0 4px 12px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
15
- $beta-elevation-4: 0 4px 24px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
16
- $beta-elevation-5: 0 6px 40px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
17
- $beta-elevation-6: 0 12px 60px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
18
- $beta-layer-z-index-base: 0 !default;
19
- $beta-layer-z-index-floating: 1 !default;
20
- $beta-layer-z-index-overlay: 1000 !default;
21
- $beta-layer-z-index-modal: 1100 !default;
22
- $beta-layer-z-index-toast: 1200 !default;
23
- $beta-layer-z-index-tooltip: 1300 !default;
24
- $beta-layer-z-index-hidden: -1 !default;
25
- $beta-layer-z-index-important: 2000 !default;
26
- $beta-motion-transition-fast: 150ms cubic-bezier(0.3, 0, 0, 1) !default;
27
- $beta-motion-transition-default: 300ms cubic-bezier(0.3, 0, 0, 1) !default;
28
- $beta-motion-transition-slow: 450ms cubic-bezier(0.3, 0, 0, 1) !default;
29
- $beta-opacity-disabled: 40% !default;
30
- $beta-radius-2: 2px !default;
31
- $beta-radius-3: 3px !default;
32
- $beta-radius-4: 4px !default;
33
- $beta-radius-6: 6px !default;
34
- $beta-radius-7: 7px !default;
35
- $beta-radius-8: 8px !default;
36
- $beta-radius-10: 10px !default;
37
- $beta-radius-12: 12px !default;
38
- $beta-radius-14: 14px !default;
39
- $beta-radius-16: 16px !default;
40
- $beta-radius-20: 20px !default;
41
- $beta-radius-32: 32px !default;
42
- $beta-state-error: 0 0 0 1px #f79847ff !default;
43
- $beta-state-active: 0 0 0 1px #6b6effff !default;
44
- $beta-state-input-default: 0 1px 2px 0 #0000000d, inset 0 0 0 1px #ffffff33 !default;
45
- $beta-state-input-hovered: 0 2px 6px 0 #0000000d, inset 0 0 0 1px #6b6effff !default;
46
- $beta-state-input-active: 0 2px 6px 0 #0000000d, 0 0 0 3px #6b6eff73, inset 0 0 0 1px #6b6effff !default;
47
- $beta-state-input-error: 0 2px 6px 0 #0000000d, 0 0 0 3px #f798474d, inset 0 0 0 1px #f79847ff !default;
48
- $beta-typography-heading-font-family: 'Inter', 'NotoSansKR', 'Noto Sans KR', 'NotoSansJP', 'Noto Sans JP', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif' !default;
49
- $beta-typography-heading-size-xlarge: 24px !default;
50
- $beta-typography-heading-size-large: 22px !default;
51
- $beta-typography-heading-size-medium: 18px !default;
52
- $beta-typography-heading-size-small: 17px !default;
53
- $beta-typography-heading-size-xsmall: 16px !default;
54
- $beta-typography-heading-size-2xsmall: 15px !default;
55
- $beta-typography-heading-weight-bold: 700 !default;
56
- $beta-typography-heading-letter-spacing: 0 !default;
57
- $beta-typography-heading-letter-spacing-tight: -0.1px !default;
58
- $beta-typography-heading-letter-spacing-tighter: -0.4px !default;
59
- $beta-typography-heading-line-height-xlarge: 32px !default;
60
- $beta-typography-heading-line-height-large: 28px !default;
61
- $beta-typography-heading-line-height-medium: 24px !default;
62
- $beta-typography-heading-line-height-small: 24px !default;
63
- $beta-typography-heading-line-height-xsmall: 24px !default;
64
- $beta-typography-heading-line-height-2xsmall: 20px !default;
65
- $beta-typography-text-font-family: 'Inter', 'NotoSansKR', 'Noto Sans KR', 'NotoSansJP', 'Noto Sans JP', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif' !default;
66
- $beta-typography-text-size-2xlarge: 17px !default;
67
- $beta-typography-text-size-xlarge: 16px !default;
68
- $beta-typography-text-size-large: 15px !default;
69
- $beta-typography-text-size-medium: 14px !default;
70
- $beta-typography-text-size-small: 13px !default;
71
- $beta-typography-text-size-xsmall: 12px !default;
72
- $beta-typography-text-size-2xsmall: 11px !default;
73
- $beta-typography-text-weight-bold: 700 !default;
74
- $beta-typography-text-weight-regular: 400 !default;
75
- $beta-typography-text-letter-spacing: 0 !default;
76
- $beta-typography-text-letter-spacing-tight: -0.1px !default;
77
- $beta-typography-text-line-height-2xlarge: 24px !default;
78
- $beta-typography-text-line-height-xlarge: 24px !default;
79
- $beta-typography-text-line-height-large: 20px !default;
80
- $beta-typography-text-line-height-medium: 18px !default;
81
- $beta-typography-text-line-height-small: 18px !default;
82
- $beta-typography-text-line-height-xsmall: 16px !default;
83
- $beta-typography-text-line-height-2xsmall: 16px !default;
84
- $beta-typography-display-font-family: 'Inter', 'NotoSansKR', 'Noto Sans KR', 'NotoSansJP', 'Noto Sans JP', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif' !default;
85
- $beta-typography-display-size-large: 36px !default;
86
- $beta-typography-display-size-medium: 30px !default;
87
- $beta-typography-display-weight-bold: 700 !default;
88
- $beta-typography-display-letter-spacing-tighter: -0.4px !default;
89
- $beta-typography-display-line-height-large: 44px !default;
90
- $beta-typography-display-line-height-medium: 36px !default;
91
- $beta-typography-code-font-family: 'ui-monospace', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'monospace' !default;
92
- $beta-typography-code-size-medium: 14px !default;
93
- $beta-typography-code-size-small: 13px !default;
94
- $beta-typography-code-weight-regular: 400 !default;
95
- $beta-typography-code-letter-spacing: 0 !default;
96
- $beta-typography-code-line-height-medium: 18px !default;
97
- $beta-typography-code-line-height-small: 18px !default;
98
- $beta-color-text-action: #6b6effff !default;
99
- $beta-color-text-success: #4bc16cff !default;
100
- $beta-color-text-highlight: #5cadefff !default;
101
- $beta-color-text-warning: #f79847ff !default;
102
- $beta-color-text-critical: #f26060ff !default;
103
- $beta-color-text-neutral-heaviest: #ffffffff !default;
104
- $beta-color-text-neutral: #ffffffcc !default;
105
- $beta-color-text-neutral-light: #ffffff99 !default;
106
- $beta-color-text-neutral-lighter: #ffffff66 !default;
107
- $beta-color-text-accent-blue: #6b6effff !default;
108
- $beta-color-text-accent-cobalt: #5cadefff !default;
109
- $beta-color-text-accent-green: #4bc16cff !default;
110
- $beta-color-text-accent-red: #f26060ff !default;
111
- $beta-color-text-accent-orange: #f79847ff !default;
112
- $beta-color-text-accent-yellow: #f0be27ff !default;
113
- $beta-color-text-accent-teal: #40d3c5ff !default;
114
- $beta-color-text-accent-navy: #6f7bc8ff !default;
115
- $beta-color-text-accent-purple: #a970ffff !default;
116
- $beta-color-text-accent-pink: #ec6fd3ff !default;
117
- $beta-color-text-absolute-white: #ffffffff !default;
118
- $beta-color-text-absolute-black: #000000ff !default;
119
- $beta-color-icon-action: #6b6effff !default;
120
- $beta-color-icon-success: #4bc16cff !default;
121
- $beta-color-icon-highlight: #5cadefff !default;
122
- $beta-color-icon-warning: #f79847ff !default;
123
- $beta-color-icon-critical: #f26060ff !default;
124
- $beta-color-icon-neutral: #ffffff66 !default;
125
- $beta-color-icon-neutral-heavy: #ffffff99 !default;
126
- $beta-color-icon-neutral-heavier: #ffffffcc !default;
127
- $beta-color-icon-accent-blue: #6b6effff !default;
128
- $beta-color-icon-accent-cobalt: #5cadefff !default;
129
- $beta-color-icon-accent-green: #4bc16cff !default;
130
- $beta-color-icon-accent-red: #f26060ff !default;
131
- $beta-color-icon-accent-orange: #f79847ff !default;
132
- $beta-color-icon-accent-yellow: #f0be27ff !default;
133
- $beta-color-icon-accent-olive: #b7c427ff !default;
134
- $beta-color-icon-accent-teal: #40d3c5ff !default;
135
- $beta-color-icon-accent-navy: #6f7bc8ff !default;
136
- $beta-color-icon-accent-purple: #a970ffff !default;
137
- $beta-color-icon-accent-pink: #ec6fd3ff !default;
138
- $beta-color-icon-absolute-white: #ffffffff !default;
139
- $beta-color-icon-absolute-black: #000000ff !default;
140
- $beta-color-fill-neutral-heaviest: #ffffffe6 !default;
141
- $beta-color-fill-neutral-heavier: #ffffff66 !default;
142
- $beta-color-fill-neutral-heavy: #ffffff33 !default;
143
- $beta-color-fill-neutral-light: #ffffff14 !default;
144
- $beta-color-fill-neutral-lighter: #ffffff0d !default;
145
- $beta-color-fill-neutral-lightest: #ffffff08 !default;
146
- $beta-color-fill-neutral-transparent: #ffffff00 !default;
147
- $beta-color-fill-action: #6b6effff !default;
148
- $beta-color-fill-action-light: #6b6eff4d !default;
149
- $beta-color-fill-action-lighter: #6b6eff2e !default;
150
- $beta-color-fill-action-transparent: #6b6eff00 !default;
151
- $beta-color-fill-success: #4bc16cff !default;
152
- $beta-color-fill-success-light: #4bc16c4d !default;
153
- $beta-color-fill-success-lighter: #4bc16c2e !default;
154
- $beta-color-fill-success-transparent: #4bc16c00 !default;
155
- $beta-color-fill-highlight: #5cadefff !default;
156
- $beta-color-fill-highlight-light: #5cadef4d !default;
157
- $beta-color-fill-highlight-lighter: #5cadef2e !default;
158
- $beta-color-fill-highlight-transparent: #5cadef00 !default;
159
- $beta-color-fill-warning: #f79847ff !default;
160
- $beta-color-fill-warning-light: #f798474d !default;
161
- $beta-color-fill-warning-lighter: #f798472e !default;
162
- $beta-color-fill-warning-transparent: #f7984700 !default;
163
- $beta-color-fill-critical: #f26060ff !default;
164
- $beta-color-fill-critical-light: #f260604d !default;
165
- $beta-color-fill-critical-lighter: #f260602e !default;
166
- $beta-color-fill-critical-transparent: #f2606000 !default;
167
- $beta-color-fill-grey: #2a2a2dff !default;
168
- $beta-color-fill-grey-heavy: #303035ff !default;
169
- $beta-color-fill-grey-heavier: #37373cff !default;
170
- $beta-color-fill-accent-blue: #6b6eff2e !default;
171
- $beta-color-fill-accent-blue-heavy: #6b6eff4d !default;
172
- $beta-color-fill-accent-blue-heavier: #6b6effff !default;
173
- $beta-color-fill-accent-blue-transparent: #6b6eff00 !default;
174
- $beta-color-fill-accent-cobalt: #5cadef2e !default;
175
- $beta-color-fill-accent-cobalt-heavy: #5cadef4d !default;
176
- $beta-color-fill-accent-cobalt-heavier: #5cadefff !default;
177
- $beta-color-fill-accent-cobalt-transparent: #5cadef00 !default;
178
- $beta-color-fill-accent-green: #4bc16c2e !default;
179
- $beta-color-fill-accent-green-heavy: #4bc16c4d !default;
180
- $beta-color-fill-accent-green-heavier: #4bc16cff !default;
181
- $beta-color-fill-accent-green-transparent: #4bc16c00 !default;
182
- $beta-color-fill-accent-red: #f260602e !default;
183
- $beta-color-fill-accent-red-heavy: #f260604d !default;
184
- $beta-color-fill-accent-red-heavier: #f26060ff !default;
185
- $beta-color-fill-accent-red-transparent: #f2606000 !default;
186
- $beta-color-fill-accent-orange: #f798472e !default;
187
- $beta-color-fill-accent-orange-heavy: #f798474d !default;
188
- $beta-color-fill-accent-orange-heavier: #f79847ff !default;
189
- $beta-color-fill-accent-orange-transparent: #f7984700 !default;
190
- $beta-color-fill-accent-yellow: #f0be272e !default;
191
- $beta-color-fill-accent-yellow-heavy: #f0be274d !default;
192
- $beta-color-fill-accent-yellow-heavier: #f0be27ff !default;
193
- $beta-color-fill-accent-yellow-transparent: #f0be2700 !default;
194
- $beta-color-fill-accent-olive: #b7c4272e !default;
195
- $beta-color-fill-accent-olive-heavy: #b7c4274d !default;
196
- $beta-color-fill-accent-olive-heavier: #b7c427ff !default;
197
- $beta-color-fill-accent-olive-transparent: #b7c42700 !default;
198
- $beta-color-fill-accent-teal: #40d3c52e !default;
199
- $beta-color-fill-accent-teal-heavy: #40d3c54d !default;
200
- $beta-color-fill-accent-teal-heavier: #40d3c5ff !default;
201
- $beta-color-fill-accent-teal-transparent: #40d3c500 !default;
202
- $beta-color-fill-accent-navy: #6f7bc82e !default;
203
- $beta-color-fill-accent-navy-heavy: #6f7bc84d !default;
204
- $beta-color-fill-accent-navy-heavier: #6f7bc8ff !default;
205
- $beta-color-fill-accent-navy-transparent: #6f7bc800 !default;
206
- $beta-color-fill-accent-purple: #a970ff2e !default;
207
- $beta-color-fill-accent-purple-heavy: #a970ff4d !default;
208
- $beta-color-fill-accent-purple-heavier: #a970ffff !default;
209
- $beta-color-fill-accent-purple-transparent: #a970ff00 !default;
210
- $beta-color-fill-accent-pink: #ec6fd32e !default;
211
- $beta-color-fill-accent-pink-heavy: #ec6fd34d !default;
212
- $beta-color-fill-accent-pink-heavier: #ec6fd3ff !default;
213
- $beta-color-fill-accent-pink-transparent: #ec6fd300 !default;
214
- $beta-color-fill-absolute-white: #ffffffff !default;
215
- $beta-color-fill-absolute-white-light: #ffffff33 !default;
216
- $beta-color-fill-absolute-white-transparent: #ffffff00 !default;
217
- $beta-color-fill-absolute-black: #000000ff !default;
218
- $beta-color-fill-absolute-black-light: #00000033 !default;
219
- $beta-color-fill-absolute-black-transparent: #00000000 !default;
220
- $beta-color-border-neutral: #ffffff1f !default;
221
- $beta-color-border-neutral-heavy: #ffffff33 !default;
222
- $beta-color-border-neutral-heavier: #ffffff66 !default;
223
- $beta-color-border-detach: #242428ff !default;
224
- $beta-color-border-detach-highest: #454549ff !default;
225
- $beta-color-border-detach-higher: #303035ff !default;
226
- $beta-color-border-detach-high: #2a2a2dff !default;
227
- $beta-color-border-detach-low: #1a1a1cff !default;
228
- $beta-color-border-absolute-white: #ffffffff !default;
229
- $beta-color-surface: #242428ff !default;
230
- $beta-color-surface-highest: #37373cff !default;
231
- $beta-color-surface-higher: #303035ff !default;
232
- $beta-color-surface-high: #2a2a2dff !default;
233
- $beta-color-surface-low: #1a1a1cff !default;
234
- $beta-color-surface-glass: #303035e6 !default;
235
- $beta-color-surface-glass-highest: #454549e6 !default;
236
- $beta-color-surface-glass-higher: #303035e6 !default;
237
- $beta-color-surface-glass-high: #2a2a2de6 !default;
238
- $beta-color-surface-accent-blue: #6b6effff !default;
239
- $beta-color-surface-accent-cobalt: #5cadefff !default;
240
- $beta-color-surface-accent-green: #4bc16cff !default;
241
- $beta-color-surface-accent-red: #f26060ff !default;
242
- $beta-color-surface-accent-orange: #f79847ff !default;
243
- $beta-color-surface-accent-yellow: #f0be27ff !default;
244
- $beta-color-surface-accent-olive: #b7c427ff !default;
245
- $beta-color-surface-accent-teal: #40d3c5ff !default;
246
- $beta-color-surface-accent-navy: #6f7bc8ff !default;
247
- $beta-color-surface-accent-purple: #a970ffff !default;
248
- $beta-color-surface-accent-pink: #ec6fd3ff !default;
249
- $beta-color-dim-absolute-black: #00000066 !default;
250
- $beta-color-dim-absolute-black-heavy: #00000099 !default;
251
- $beta-color-dim-absolute-white: #ffffff66 !default;
252
- $beta-color-dim-absolute-white-heavy: #ffffff99 !default;
253
- $beta-color-gradient-green: #20ab55ff !default;
254
- $beta-color-gradient-green-heavy: #4bc16cff !default;
255
- $beta-color-state-default: #ffffff33 !default;
256
- $beta-color-state-action: #6b6effff !default;
257
- $beta-color-state-action-light: #6b6eff73 !default;
258
- $beta-color-state-warning: #f79847ff !default;
259
- $beta-color-state-warning-light: #f798474d !default;
260
- $beta-color-elevation-xlarge: #0000004d !default;
261
- $beta-color-elevation-large: #00000038 !default;
262
- $beta-color-elevation-medium: #00000026 !default;
263
- $beta-color-elevation-small: #00000014 !default;
264
- $beta-color-elevation-base: #0000000d !default;
265
- $beta-color-elevation-base-inner: #ffffff1f !default;
2
+ $backdrop-large: 60px !default;
3
+ $backdrop-small: 6px !default;
4
+ $border-default: 0 0 0 1px #ffffff1f !default;
5
+ $border-bottom: 0 -1px 0 0 #ffffff1f !default;
6
+ $border-right: -1px 0 0 0 #ffffff1f !default;
7
+ $border-left: 1px 0 0 0 #ffffff1f !default;
8
+ $border-top: 0 1px 0 0 #ffffff1f !default;
9
+ $border-white-high: 0 0 0 1px #2a2a2dff !default;
10
+ $border-white-higher: 0 0 0 1px #303035ff !default;
11
+ $border-white-highest: 0 0 0 1px #37373cff !default;
12
+ $elevation-1: 0 1px 2px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
13
+ $elevation-2: 0 2px 6px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
14
+ $elevation-3: 0 4px 12px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
15
+ $elevation-4: 0 4px 24px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
16
+ $elevation-5: 0 6px 40px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
17
+ $elevation-6: 0 12px 60px 0 #00000014, 0 0 2px 1px #0000000d, inset 0 0 2px 0 #ffffff1f !default;
18
+ $layer-z-index-base: 0 !default;
19
+ $layer-z-index-floating: 1 !default;
20
+ $layer-z-index-overlay: 1000 !default;
21
+ $layer-z-index-modal: 1100 !default;
22
+ $layer-z-index-toast: 1200 !default;
23
+ $layer-z-index-tooltip: 1300 !default;
24
+ $layer-z-index-hidden: -1 !default;
25
+ $layer-z-index-important: 2000 !default;
26
+ $motion-transition-fast: 150ms cubic-bezier(0.3, 0, 0, 1) !default;
27
+ $motion-transition-default: 300ms cubic-bezier(0.3, 0, 0, 1) !default;
28
+ $motion-transition-slow: 450ms cubic-bezier(0.3, 0, 0, 1) !default;
29
+ $opacity-disabled: 40% !default;
30
+ $radius-2: 2px !default;
31
+ $radius-3: 3px !default;
32
+ $radius-4: 4px !default;
33
+ $radius-6: 6px !default;
34
+ $radius-7: 7px !default;
35
+ $radius-8: 8px !default;
36
+ $radius-10: 10px !default;
37
+ $radius-12: 12px !default;
38
+ $radius-14: 14px !default;
39
+ $radius-16: 16px !default;
40
+ $radius-20: 20px !default;
41
+ $radius-32: 32px !default;
42
+ $state-error: 0 0 0 1px #f79847ff !default;
43
+ $state-active: 0 0 0 1px #6b6effff !default;
44
+ $state-input-default: 0 1px 2px 0 #0000000d, inset 0 0 0 1px #fff3 !default;
45
+ $state-input-hovered: 0 2px 6px 0 #0000000d, inset 0 0 0 1px #6b6effff !default;
46
+ $state-input-active: 0 2px 6px 0 #0000000d, 0 0 0 3px #6b6eff73, inset 0 0 0 1px #6b6effff !default;
47
+ $state-input-error: 0 2px 6px 0 #0000000d, 0 0 0 3px #f798474d, inset 0 0 0 1px #f79847ff !default;
48
+ $typography-heading-font-family: 'Inter', 'NotoSansKR', 'Noto Sans KR', 'NotoSansJP', 'Noto Sans JP', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif' !default;
49
+ $typography-heading-size-xlarge: 24px !default;
50
+ $typography-heading-size-large: 22px !default;
51
+ $typography-heading-size-medium: 18px !default;
52
+ $typography-heading-size-small: 17px !default;
53
+ $typography-heading-size-xsmall: 16px !default;
54
+ $typography-heading-size-2xsmall: 15px !default;
55
+ $typography-heading-weight-bold: 700 !default;
56
+ $typography-heading-letter-spacing: 0 !default;
57
+ $typography-heading-letter-spacing-tight: -0.1px !default;
58
+ $typography-heading-letter-spacing-tighter: -0.4px !default;
59
+ $typography-heading-line-height-xlarge: 32px !default;
60
+ $typography-heading-line-height-large: 28px !default;
61
+ $typography-heading-line-height-medium: 24px !default;
62
+ $typography-heading-line-height-small: 24px !default;
63
+ $typography-heading-line-height-xsmall: 24px !default;
64
+ $typography-heading-line-height-2xsmall: 20px !default;
65
+ $typography-text-font-family: 'Inter', 'NotoSansKR', 'Noto Sans KR', 'NotoSansJP', 'Noto Sans JP', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif' !default;
66
+ $typography-text-size-2xlarge: 17px !default;
67
+ $typography-text-size-xlarge: 16px !default;
68
+ $typography-text-size-large: 15px !default;
69
+ $typography-text-size-medium: 14px !default;
70
+ $typography-text-size-small: 13px !default;
71
+ $typography-text-size-xsmall: 12px !default;
72
+ $typography-text-size-2xsmall: 11px !default;
73
+ $typography-text-weight-bold: 700 !default;
74
+ $typography-text-weight-regular: 400 !default;
75
+ $typography-text-letter-spacing: 0 !default;
76
+ $typography-text-letter-spacing-tight: -0.1px !default;
77
+ $typography-text-line-height-2xlarge: 24px !default;
78
+ $typography-text-line-height-xlarge: 24px !default;
79
+ $typography-text-line-height-large: 20px !default;
80
+ $typography-text-line-height-medium: 18px !default;
81
+ $typography-text-line-height-small: 18px !default;
82
+ $typography-text-line-height-xsmall: 16px !default;
83
+ $typography-text-line-height-2xsmall: 16px !default;
84
+ $typography-display-font-family: 'Inter', 'NotoSansKR', 'Noto Sans KR', 'NotoSansJP', 'Noto Sans JP', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif' !default;
85
+ $typography-display-size-large: 36px !default;
86
+ $typography-display-size-medium: 30px !default;
87
+ $typography-display-weight-bold: 700 !default;
88
+ $typography-display-letter-spacing-tighter: -0.4px !default;
89
+ $typography-display-line-height-large: 44px !default;
90
+ $typography-display-line-height-medium: 36px !default;
91
+ $typography-code-font-family: 'ui-monospace', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'monospace' !default;
92
+ $typography-code-size-medium: 14px !default;
93
+ $typography-code-size-small: 13px !default;
94
+ $typography-code-weight-regular: 400 !default;
95
+ $typography-code-letter-spacing: 0 !default;
96
+ $typography-code-line-height-medium: 18px !default;
97
+ $typography-code-line-height-small: 18px !default;
98
+ $color-text-action: #6b6effff !default;
99
+ $color-text-success: #4bc16cff !default;
100
+ $color-text-highlight: #5cadefff !default;
101
+ $color-text-warning: #f79847ff !default;
102
+ $color-text-critical: #f26060ff !default;
103
+ $color-text-neutral-heaviest: #ffff !default;
104
+ $color-text-neutral: #fffc !default;
105
+ $color-text-neutral-light: #fff9 !default;
106
+ $color-text-neutral-lighter: #fff6 !default;
107
+ $color-text-accent-blue: #6b6effff !default;
108
+ $color-text-accent-cobalt: #5cadefff !default;
109
+ $color-text-accent-green: #4bc16cff !default;
110
+ $color-text-accent-red: #f26060ff !default;
111
+ $color-text-accent-orange: #f79847ff !default;
112
+ $color-text-accent-yellow: #f0be27ff !default;
113
+ $color-text-accent-olive: #b7c427ff !default;
114
+ $color-text-accent-teal: #40d3c5ff !default;
115
+ $color-text-accent-navy: #6f7bc8ff !default;
116
+ $color-text-accent-purple: #a970ffff !default;
117
+ $color-text-accent-pink: #ec6fd3ff !default;
118
+ $color-text-absolute-white: #ffff !default;
119
+ $color-text-absolute-black: #000f !default;
120
+ $color-icon-action: #6b6effff !default;
121
+ $color-icon-success: #4bc16cff !default;
122
+ $color-icon-highlight: #5cadefff !default;
123
+ $color-icon-warning: #f79847ff !default;
124
+ $color-icon-critical: #f26060ff !default;
125
+ $color-icon-neutral: #fff6 !default;
126
+ $color-icon-neutral-heavy: #fff9 !default;
127
+ $color-icon-neutral-heavier: #fffc !default;
128
+ $color-icon-accent-blue: #6b6effff !default;
129
+ $color-icon-accent-cobalt: #5cadefff !default;
130
+ $color-icon-accent-green: #4bc16cff !default;
131
+ $color-icon-accent-red: #f26060ff !default;
132
+ $color-icon-accent-orange: #f79847ff !default;
133
+ $color-icon-accent-yellow: #f0be27ff !default;
134
+ $color-icon-accent-olive: #b7c427ff !default;
135
+ $color-icon-accent-teal: #40d3c5ff !default;
136
+ $color-icon-accent-navy: #6f7bc8ff !default;
137
+ $color-icon-accent-purple: #a970ffff !default;
138
+ $color-icon-accent-pink: #ec6fd3ff !default;
139
+ $color-icon-absolute-white: #ffff !default;
140
+ $color-icon-absolute-black: #000f !default;
141
+ $color-fill-neutral-heaviest: #ffffffe6 !default;
142
+ $color-fill-neutral-heavier: #fff6 !default;
143
+ $color-fill-neutral-heavy: #fff3 !default;
144
+ $color-fill-neutral-light: #ffffff14 !default;
145
+ $color-fill-neutral-lighter: #ffffff0d !default;
146
+ $color-fill-neutral-lightest: #ffffff08 !default;
147
+ $color-fill-neutral-transparent: #fff0 !default;
148
+ $color-fill-action: #6b6effff !default;
149
+ $color-fill-action-light: #6b6eff4d !default;
150
+ $color-fill-action-lighter: #6b6eff2e !default;
151
+ $color-fill-action-transparent: #6b6eff00 !default;
152
+ $color-fill-success: #4bc16cff !default;
153
+ $color-fill-success-light: #4bc16c4d !default;
154
+ $color-fill-success-lighter: #4bc16c2e !default;
155
+ $color-fill-success-transparent: #4bc16c00 !default;
156
+ $color-fill-highlight: #5cadefff !default;
157
+ $color-fill-highlight-light: #5cadef4d !default;
158
+ $color-fill-highlight-lighter: #5cadef2e !default;
159
+ $color-fill-highlight-transparent: #5cadef00 !default;
160
+ $color-fill-warning: #f79847ff !default;
161
+ $color-fill-warning-light: #f798474d !default;
162
+ $color-fill-warning-lighter: #f798472e !default;
163
+ $color-fill-warning-transparent: #f7984700 !default;
164
+ $color-fill-critical: #f26060ff !default;
165
+ $color-fill-critical-light: #f260604d !default;
166
+ $color-fill-critical-lighter: #f260602e !default;
167
+ $color-fill-critical-transparent: #f2606000 !default;
168
+ $color-fill-grey: #2a2a2dff !default;
169
+ $color-fill-grey-heavy: #303035ff !default;
170
+ $color-fill-grey-heavier: #37373cff !default;
171
+ $color-fill-accent-blue: #6b6eff2e !default;
172
+ $color-fill-accent-blue-heavy: #6b6eff4d !default;
173
+ $color-fill-accent-blue-heavier: #6b6effff !default;
174
+ $color-fill-accent-blue-transparent: #6b6eff00 !default;
175
+ $color-fill-accent-cobalt: #5cadef2e !default;
176
+ $color-fill-accent-cobalt-heavy: #5cadef4d !default;
177
+ $color-fill-accent-cobalt-heavier: #5cadefff !default;
178
+ $color-fill-accent-cobalt-transparent: #5cadef00 !default;
179
+ $color-fill-accent-green: #4bc16c2e !default;
180
+ $color-fill-accent-green-heavy: #4bc16c4d !default;
181
+ $color-fill-accent-green-heavier: #4bc16cff !default;
182
+ $color-fill-accent-green-transparent: #4bc16c00 !default;
183
+ $color-fill-accent-red: #f260602e !default;
184
+ $color-fill-accent-red-heavy: #f260604d !default;
185
+ $color-fill-accent-red-heavier: #f26060ff !default;
186
+ $color-fill-accent-red-transparent: #f2606000 !default;
187
+ $color-fill-accent-orange: #f798472e !default;
188
+ $color-fill-accent-orange-heavy: #f798474d !default;
189
+ $color-fill-accent-orange-heavier: #f79847ff !default;
190
+ $color-fill-accent-orange-transparent: #f7984700 !default;
191
+ $color-fill-accent-yellow: #f0be272e !default;
192
+ $color-fill-accent-yellow-heavy: #f0be274d !default;
193
+ $color-fill-accent-yellow-heavier: #f0be27ff !default;
194
+ $color-fill-accent-yellow-transparent: #f0be2700 !default;
195
+ $color-fill-accent-olive: #b7c4272e !default;
196
+ $color-fill-accent-olive-heavy: #b7c4274d !default;
197
+ $color-fill-accent-olive-heavier: #b7c427ff !default;
198
+ $color-fill-accent-olive-transparent: #b7c42700 !default;
199
+ $color-fill-accent-teal: #40d3c52e !default;
200
+ $color-fill-accent-teal-heavy: #40d3c54d !default;
201
+ $color-fill-accent-teal-heavier: #40d3c5ff !default;
202
+ $color-fill-accent-teal-transparent: #40d3c500 !default;
203
+ $color-fill-accent-navy: #6f7bc82e !default;
204
+ $color-fill-accent-navy-heavy: #6f7bc84d !default;
205
+ $color-fill-accent-navy-heavier: #6f7bc8ff !default;
206
+ $color-fill-accent-navy-transparent: #6f7bc800 !default;
207
+ $color-fill-accent-purple: #a970ff2e !default;
208
+ $color-fill-accent-purple-heavy: #a970ff4d !default;
209
+ $color-fill-accent-purple-heavier: #a970ffff !default;
210
+ $color-fill-accent-purple-transparent: #a970ff00 !default;
211
+ $color-fill-accent-pink: #ec6fd32e !default;
212
+ $color-fill-accent-pink-heavy: #ec6fd34d !default;
213
+ $color-fill-accent-pink-heavier: #ec6fd3ff !default;
214
+ $color-fill-accent-pink-transparent: #ec6fd300 !default;
215
+ $color-fill-absolute-white: #ffff !default;
216
+ $color-fill-absolute-white-light: #fff3 !default;
217
+ $color-fill-absolute-white-transparent: #fff0 !default;
218
+ $color-fill-absolute-black: #000f !default;
219
+ $color-fill-absolute-black-light: #0003 !default;
220
+ $color-fill-absolute-black-transparent: #0000 !default;
221
+ $color-border-neutral: #ffffff1f !default;
222
+ $color-border-neutral-heavy: #fff3 !default;
223
+ $color-border-neutral-heavier: #fff6 !default;
224
+ $color-border-detach: #242428ff !default;
225
+ $color-border-detach-highest: #454549ff !default;
226
+ $color-border-detach-higher: #303035ff !default;
227
+ $color-border-detach-high: #2a2a2dff !default;
228
+ $color-border-detach-low: #1a1a1cff !default;
229
+ $color-border-absolute-white: #ffff !default;
230
+ $color-surface: #242428ff !default;
231
+ $color-surface-highest: #37373cff !default;
232
+ $color-surface-higher: #303035ff !default;
233
+ $color-surface-high: #2a2a2dff !default;
234
+ $color-surface-low: #1a1a1cff !default;
235
+ $color-surface-glass: #303035e6 !default;
236
+ $color-surface-glass-highest: #454549e6 !default;
237
+ $color-surface-glass-higher: #303035e6 !default;
238
+ $color-surface-glass-high: #2a2a2de6 !default;
239
+ $color-surface-accent-blue: #6b6effff !default;
240
+ $color-surface-accent-cobalt: #5cadefff !default;
241
+ $color-surface-accent-green: #4bc16cff !default;
242
+ $color-surface-accent-red: #f26060ff !default;
243
+ $color-surface-accent-orange: #f79847ff !default;
244
+ $color-surface-accent-yellow: #f0be27ff !default;
245
+ $color-surface-accent-olive: #b7c427ff !default;
246
+ $color-surface-accent-teal: #40d3c5ff !default;
247
+ $color-surface-accent-navy: #6f7bc8ff !default;
248
+ $color-surface-accent-purple: #a970ffff !default;
249
+ $color-surface-accent-pink: #ec6fd3ff !default;
250
+ $color-dim-absolute-black: #0006 !default;
251
+ $color-dim-absolute-black-heavy: #0009 !default;
252
+ $color-dim-absolute-white: #fff6 !default;
253
+ $color-dim-absolute-white-heavy: #fff9 !default;
254
+ $color-gradient-green: #20ab55ff !default;
255
+ $color-gradient-green-heavy: #4bc16cff !default;
256
+ $color-state-default: #fff3 !default;
257
+ $color-state-action: #6b6effff !default;
258
+ $color-state-action-light: #6b6eff73 !default;
259
+ $color-state-warning: #f79847ff !default;
260
+ $color-state-warning-light: #f798474d !default;
261
+ $color-elevation-xlarge: #0000004d !default;
262
+ $color-elevation-large: #00000038 !default;
263
+ $color-elevation-medium: #00000026 !default;
264
+ $color-elevation-small: #00000014 !default;
265
+ $color-elevation-base: #0000000d !default;
266
+ $color-elevation-base-inner: #ffffff1f !default;
266
267
 
267
268
  $tokens: (
268
269
  'backdrop': (
269
- 'large': $beta-backdrop-large,
270
- 'small': $beta-backdrop-small
270
+ 'large': $backdrop-large,
271
+ 'small': $backdrop-small
271
272
  ),
272
273
  'border': (
273
- 'default': $beta-border-default,
274
- 'bottom': $beta-border-bottom,
275
- 'right': $beta-border-right,
276
- 'left': $beta-border-left,
277
- 'top': $beta-border-top,
278
- 'white-high': $beta-border-white-high,
279
- 'white-higher': $beta-border-white-higher,
280
- 'white-highest': $beta-border-white-highest
274
+ 'default': $border-default,
275
+ 'bottom': $border-bottom,
276
+ 'right': $border-right,
277
+ 'left': $border-left,
278
+ 'top': $border-top,
279
+ 'white-high': $border-white-high,
280
+ 'white-higher': $border-white-higher,
281
+ 'white-highest': $border-white-highest
281
282
  ),
282
283
  'elevation': (
283
- '1': $beta-elevation-1,
284
- '2': $beta-elevation-2,
285
- '3': $beta-elevation-3,
286
- '4': $beta-elevation-4,
287
- '5': $beta-elevation-5,
288
- '6': $beta-elevation-6
284
+ '1': $elevation-1,
285
+ '2': $elevation-2,
286
+ '3': $elevation-3,
287
+ '4': $elevation-4,
288
+ '5': $elevation-5,
289
+ '6': $elevation-6
289
290
  ),
290
291
  'layer': (
291
292
  'z-index': (
292
- 'base': $beta-layer-z-index-base,
293
- 'floating': $beta-layer-z-index-floating,
294
- 'overlay': $beta-layer-z-index-overlay,
295
- 'modal': $beta-layer-z-index-modal,
296
- 'toast': $beta-layer-z-index-toast,
297
- 'tooltip': $beta-layer-z-index-tooltip,
298
- 'hidden': $beta-layer-z-index-hidden,
299
- 'important': $beta-layer-z-index-important
293
+ 'base': $layer-z-index-base,
294
+ 'floating': $layer-z-index-floating,
295
+ 'overlay': $layer-z-index-overlay,
296
+ 'modal': $layer-z-index-modal,
297
+ 'toast': $layer-z-index-toast,
298
+ 'tooltip': $layer-z-index-tooltip,
299
+ 'hidden': $layer-z-index-hidden,
300
+ 'important': $layer-z-index-important
300
301
  )
301
302
  ),
302
303
  'motion': (
303
304
  'transition': (
304
- 'fast': $beta-motion-transition-fast,
305
- 'default': $beta-motion-transition-default,
306
- 'slow': $beta-motion-transition-slow
305
+ 'fast': $motion-transition-fast,
306
+ 'default': $motion-transition-default,
307
+ 'slow': $motion-transition-slow
307
308
  )
308
309
  ),
309
310
  'opacity': (
310
- 'disabled': $beta-opacity-disabled
311
+ 'disabled': $opacity-disabled
311
312
  ),
312
313
  'radius': (
313
- '2': $beta-radius-2,
314
- '3': $beta-radius-3,
315
- '4': $beta-radius-4,
316
- '6': $beta-radius-6,
317
- '7': $beta-radius-7,
318
- '8': $beta-radius-8,
319
- '10': $beta-radius-10,
320
- '12': $beta-radius-12,
321
- '14': $beta-radius-14,
322
- '16': $beta-radius-16,
323
- '20': $beta-radius-20,
324
- '32': $beta-radius-32
314
+ '2': $radius-2,
315
+ '3': $radius-3,
316
+ '4': $radius-4,
317
+ '6': $radius-6,
318
+ '7': $radius-7,
319
+ '8': $radius-8,
320
+ '10': $radius-10,
321
+ '12': $radius-12,
322
+ '14': $radius-14,
323
+ '16': $radius-16,
324
+ '20': $radius-20,
325
+ '32': $radius-32
325
326
  ),
326
327
  'state': (
327
- 'error': $beta-state-error,
328
- 'active': $beta-state-active,
328
+ 'error': $state-error,
329
+ 'active': $state-active,
329
330
  'input': (
330
- 'default': $beta-state-input-default,
331
- 'hovered': $beta-state-input-hovered,
332
- 'active': $beta-state-input-active,
333
- 'error': $beta-state-input-error
331
+ 'default': $state-input-default,
332
+ 'hovered': $state-input-hovered,
333
+ 'active': $state-input-active,
334
+ 'error': $state-input-error
334
335
  )
335
336
  ),
336
337
  'typography': (
337
338
  'heading': (
338
- 'font-family': $beta-typography-heading-font-family,
339
+ 'font-family': $typography-heading-font-family,
339
340
  'size': (
340
- 'xlarge': $beta-typography-heading-size-xlarge,
341
- 'large': $beta-typography-heading-size-large,
342
- 'medium': $beta-typography-heading-size-medium,
343
- 'small': $beta-typography-heading-size-small,
344
- 'xsmall': $beta-typography-heading-size-xsmall,
345
- '2xsmall': $beta-typography-heading-size-2xsmall
341
+ 'xlarge': $typography-heading-size-xlarge,
342
+ 'large': $typography-heading-size-large,
343
+ 'medium': $typography-heading-size-medium,
344
+ 'small': $typography-heading-size-small,
345
+ 'xsmall': $typography-heading-size-xsmall,
346
+ '2xsmall': $typography-heading-size-2xsmall
346
347
  ),
347
348
  'weight': (
348
- 'bold': $beta-typography-heading-weight-bold
349
+ 'bold': $typography-heading-weight-bold
349
350
  ),
350
351
  'letter-spacing': (
351
- 'normal': $beta-typography-heading-letter-spacing,
352
- 'tight': $beta-typography-heading-letter-spacing-tight,
353
- 'tighter': $beta-typography-heading-letter-spacing-tighter
352
+ 'normal': $typography-heading-letter-spacing,
353
+ 'tight': $typography-heading-letter-spacing-tight,
354
+ 'tighter': $typography-heading-letter-spacing-tighter
354
355
  ),
355
356
  'line-height': (
356
- 'xlarge': $beta-typography-heading-line-height-xlarge,
357
- 'large': $beta-typography-heading-line-height-large,
358
- 'medium': $beta-typography-heading-line-height-medium,
359
- 'small': $beta-typography-heading-line-height-small,
360
- 'xsmall': $beta-typography-heading-line-height-xsmall,
361
- '2xsmall': $beta-typography-heading-line-height-2xsmall
357
+ 'xlarge': $typography-heading-line-height-xlarge,
358
+ 'large': $typography-heading-line-height-large,
359
+ 'medium': $typography-heading-line-height-medium,
360
+ 'small': $typography-heading-line-height-small,
361
+ 'xsmall': $typography-heading-line-height-xsmall,
362
+ '2xsmall': $typography-heading-line-height-2xsmall
362
363
  )
363
364
  ),
364
365
  'text': (
365
- 'font-family': $beta-typography-text-font-family,
366
+ 'font-family': $typography-text-font-family,
366
367
  'size': (
367
- '2xlarge': $beta-typography-text-size-2xlarge,
368
- 'xlarge': $beta-typography-text-size-xlarge,
369
- 'large': $beta-typography-text-size-large,
370
- 'medium': $beta-typography-text-size-medium,
371
- 'small': $beta-typography-text-size-small,
372
- 'xsmall': $beta-typography-text-size-xsmall,
373
- '2xsmall': $beta-typography-text-size-2xsmall
368
+ '2xlarge': $typography-text-size-2xlarge,
369
+ 'xlarge': $typography-text-size-xlarge,
370
+ 'large': $typography-text-size-large,
371
+ 'medium': $typography-text-size-medium,
372
+ 'small': $typography-text-size-small,
373
+ 'xsmall': $typography-text-size-xsmall,
374
+ '2xsmall': $typography-text-size-2xsmall
374
375
  ),
375
376
  'weight': (
376
- 'bold': $beta-typography-text-weight-bold,
377
- 'regular': $beta-typography-text-weight-regular
377
+ 'bold': $typography-text-weight-bold,
378
+ 'regular': $typography-text-weight-regular
378
379
  ),
379
380
  'letter-spacing': (
380
- 'normal': $beta-typography-text-letter-spacing,
381
- 'tight': $beta-typography-text-letter-spacing-tight
381
+ 'normal': $typography-text-letter-spacing,
382
+ 'tight': $typography-text-letter-spacing-tight
382
383
  ),
383
384
  'line-height': (
384
- '2xlarge': $beta-typography-text-line-height-2xlarge,
385
- 'xlarge': $beta-typography-text-line-height-xlarge,
386
- 'large': $beta-typography-text-line-height-large,
387
- 'medium': $beta-typography-text-line-height-medium,
388
- 'small': $beta-typography-text-line-height-small,
389
- 'xsmall': $beta-typography-text-line-height-xsmall,
390
- '2xsmall': $beta-typography-text-line-height-2xsmall
385
+ '2xlarge': $typography-text-line-height-2xlarge,
386
+ 'xlarge': $typography-text-line-height-xlarge,
387
+ 'large': $typography-text-line-height-large,
388
+ 'medium': $typography-text-line-height-medium,
389
+ 'small': $typography-text-line-height-small,
390
+ 'xsmall': $typography-text-line-height-xsmall,
391
+ '2xsmall': $typography-text-line-height-2xsmall
391
392
  )
392
393
  ),
393
394
  'display': (
394
- 'font-family': $beta-typography-display-font-family,
395
+ 'font-family': $typography-display-font-family,
395
396
  'size': (
396
- 'large': $beta-typography-display-size-large,
397
- 'medium': $beta-typography-display-size-medium
397
+ 'large': $typography-display-size-large,
398
+ 'medium': $typography-display-size-medium
398
399
  ),
399
400
  'weight': (
400
- 'bold': $beta-typography-display-weight-bold
401
+ 'bold': $typography-display-weight-bold
401
402
  ),
402
403
  'letter-spacing': (
403
- 'tighter': $beta-typography-display-letter-spacing-tighter
404
+ 'tighter': $typography-display-letter-spacing-tighter
404
405
  ),
405
406
  'line-height': (
406
- 'large': $beta-typography-display-line-height-large,
407
- 'medium': $beta-typography-display-line-height-medium
407
+ 'large': $typography-display-line-height-large,
408
+ 'medium': $typography-display-line-height-medium
408
409
  )
409
410
  ),
410
411
  'code': (
411
- 'font-family': $beta-typography-code-font-family,
412
+ 'font-family': $typography-code-font-family,
412
413
  'size': (
413
- 'medium': $beta-typography-code-size-medium,
414
- 'small': $beta-typography-code-size-small
414
+ 'medium': $typography-code-size-medium,
415
+ 'small': $typography-code-size-small
415
416
  ),
416
417
  'weight': (
417
- 'regular': $beta-typography-code-weight-regular
418
+ 'regular': $typography-code-weight-regular
418
419
  ),
419
420
  'letter-spacing': (
420
- 'normal': $beta-typography-code-letter-spacing
421
+ 'normal': $typography-code-letter-spacing
421
422
  ),
422
423
  'line-height': (
423
- 'medium': $beta-typography-code-line-height-medium,
424
- 'small': $beta-typography-code-line-height-small
424
+ 'medium': $typography-code-line-height-medium,
425
+ 'small': $typography-code-line-height-small
425
426
  )
426
427
  )
427
428
  ),
428
429
  'color': (
429
430
  'text': (
430
- 'action': $beta-color-text-action,
431
- 'success': $beta-color-text-success,
432
- 'highlight': $beta-color-text-highlight,
433
- 'warning': $beta-color-text-warning,
434
- 'critical': $beta-color-text-critical,
431
+ 'action': $color-text-action,
432
+ 'success': $color-text-success,
433
+ 'highlight': $color-text-highlight,
434
+ 'warning': $color-text-warning,
435
+ 'critical': $color-text-critical,
435
436
  'neutral': (
436
- 'heaviest': $beta-color-text-neutral-heaviest,
437
- 'normal': $beta-color-text-neutral,
438
- 'light': $beta-color-text-neutral-light,
439
- 'lighter': $beta-color-text-neutral-lighter
437
+ 'heaviest': $color-text-neutral-heaviest,
438
+ 'normal': $color-text-neutral,
439
+ 'light': $color-text-neutral-light,
440
+ 'lighter': $color-text-neutral-lighter
440
441
  ),
441
442
  'accent': (
442
- 'blue': $beta-color-text-accent-blue,
443
- 'cobalt': $beta-color-text-accent-cobalt,
444
- 'green': $beta-color-text-accent-green,
445
- 'red': $beta-color-text-accent-red,
446
- 'orange': $beta-color-text-accent-orange,
447
- 'yellow': $beta-color-text-accent-yellow,
448
- 'teal': $beta-color-text-accent-teal,
449
- 'navy': $beta-color-text-accent-navy,
450
- 'purple': $beta-color-text-accent-purple,
451
- 'pink': $beta-color-text-accent-pink
443
+ 'blue': $color-text-accent-blue,
444
+ 'cobalt': $color-text-accent-cobalt,
445
+ 'green': $color-text-accent-green,
446
+ 'red': $color-text-accent-red,
447
+ 'orange': $color-text-accent-orange,
448
+ 'yellow': $color-text-accent-yellow,
449
+ 'olive': $color-text-accent-olive,
450
+ 'teal': $color-text-accent-teal,
451
+ 'navy': $color-text-accent-navy,
452
+ 'purple': $color-text-accent-purple,
453
+ 'pink': $color-text-accent-pink
452
454
  ),
453
455
  'absolute': (
454
- 'white': $beta-color-text-absolute-white,
455
- 'black': $beta-color-text-absolute-black
456
+ 'white': $color-text-absolute-white,
457
+ 'black': $color-text-absolute-black
456
458
  )
457
459
  ),
458
460
  'icon': (
459
- 'action': $beta-color-icon-action,
460
- 'success': $beta-color-icon-success,
461
- 'highlight': $beta-color-icon-highlight,
462
- 'warning': $beta-color-icon-warning,
463
- 'critical': $beta-color-icon-critical,
461
+ 'action': $color-icon-action,
462
+ 'success': $color-icon-success,
463
+ 'highlight': $color-icon-highlight,
464
+ 'warning': $color-icon-warning,
465
+ 'critical': $color-icon-critical,
464
466
  'neutral': (
465
- 'normal': $beta-color-icon-neutral,
466
- 'heavy': $beta-color-icon-neutral-heavy,
467
- 'heavier': $beta-color-icon-neutral-heavier
467
+ 'normal': $color-icon-neutral,
468
+ 'heavy': $color-icon-neutral-heavy,
469
+ 'heavier': $color-icon-neutral-heavier
468
470
  ),
469
471
  'accent': (
470
- 'blue': $beta-color-icon-accent-blue,
471
- 'cobalt': $beta-color-icon-accent-cobalt,
472
- 'green': $beta-color-icon-accent-green,
473
- 'red': $beta-color-icon-accent-red,
474
- 'orange': $beta-color-icon-accent-orange,
475
- 'yellow': $beta-color-icon-accent-yellow,
476
- 'olive': $beta-color-icon-accent-olive,
477
- 'teal': $beta-color-icon-accent-teal,
478
- 'navy': $beta-color-icon-accent-navy,
479
- 'purple': $beta-color-icon-accent-purple,
480
- 'pink': $beta-color-icon-accent-pink
472
+ 'blue': $color-icon-accent-blue,
473
+ 'cobalt': $color-icon-accent-cobalt,
474
+ 'green': $color-icon-accent-green,
475
+ 'red': $color-icon-accent-red,
476
+ 'orange': $color-icon-accent-orange,
477
+ 'yellow': $color-icon-accent-yellow,
478
+ 'olive': $color-icon-accent-olive,
479
+ 'teal': $color-icon-accent-teal,
480
+ 'navy': $color-icon-accent-navy,
481
+ 'purple': $color-icon-accent-purple,
482
+ 'pink': $color-icon-accent-pink
481
483
  ),
482
484
  'absolute': (
483
- 'white': $beta-color-icon-absolute-white,
484
- 'black': $beta-color-icon-absolute-black
485
+ 'white': $color-icon-absolute-white,
486
+ 'black': $color-icon-absolute-black
485
487
  )
486
488
  ),
487
489
  'fill': (
488
490
  'neutral': (
489
- 'heaviest': $beta-color-fill-neutral-heaviest,
490
- 'heavier': $beta-color-fill-neutral-heavier,
491
- 'heavy': $beta-color-fill-neutral-heavy,
492
- 'light': $beta-color-fill-neutral-light,
493
- 'lighter': $beta-color-fill-neutral-lighter,
494
- 'lightest': $beta-color-fill-neutral-lightest,
495
- 'transparent': $beta-color-fill-neutral-transparent
491
+ 'heaviest': $color-fill-neutral-heaviest,
492
+ 'heavier': $color-fill-neutral-heavier,
493
+ 'heavy': $color-fill-neutral-heavy,
494
+ 'light': $color-fill-neutral-light,
495
+ 'lighter': $color-fill-neutral-lighter,
496
+ 'lightest': $color-fill-neutral-lightest,
497
+ 'transparent': $color-fill-neutral-transparent
496
498
  ),
497
499
  'action': (
498
- 'normal': $beta-color-fill-action,
499
- 'light': $beta-color-fill-action-light,
500
- 'lighter': $beta-color-fill-action-lighter,
501
- 'transparent': $beta-color-fill-action-transparent
500
+ 'normal': $color-fill-action,
501
+ 'light': $color-fill-action-light,
502
+ 'lighter': $color-fill-action-lighter,
503
+ 'transparent': $color-fill-action-transparent
502
504
  ),
503
505
  'success': (
504
- 'normal': $beta-color-fill-success,
505
- 'light': $beta-color-fill-success-light,
506
- 'lighter': $beta-color-fill-success-lighter,
507
- 'transparent': $beta-color-fill-success-transparent
506
+ 'normal': $color-fill-success,
507
+ 'light': $color-fill-success-light,
508
+ 'lighter': $color-fill-success-lighter,
509
+ 'transparent': $color-fill-success-transparent
508
510
  ),
509
511
  'highlight': (
510
- 'normal': $beta-color-fill-highlight,
511
- 'light': $beta-color-fill-highlight-light,
512
- 'lighter': $beta-color-fill-highlight-lighter,
513
- 'transparent': $beta-color-fill-highlight-transparent
512
+ 'normal': $color-fill-highlight,
513
+ 'light': $color-fill-highlight-light,
514
+ 'lighter': $color-fill-highlight-lighter,
515
+ 'transparent': $color-fill-highlight-transparent
514
516
  ),
515
517
  'warning': (
516
- 'normal': $beta-color-fill-warning,
517
- 'light': $beta-color-fill-warning-light,
518
- 'lighter': $beta-color-fill-warning-lighter,
519
- 'transparent': $beta-color-fill-warning-transparent
518
+ 'normal': $color-fill-warning,
519
+ 'light': $color-fill-warning-light,
520
+ 'lighter': $color-fill-warning-lighter,
521
+ 'transparent': $color-fill-warning-transparent
520
522
  ),
521
523
  'critical': (
522
- 'normal': $beta-color-fill-critical,
523
- 'light': $beta-color-fill-critical-light,
524
- 'lighter': $beta-color-fill-critical-lighter,
525
- 'transparent': $beta-color-fill-critical-transparent
524
+ 'normal': $color-fill-critical,
525
+ 'light': $color-fill-critical-light,
526
+ 'lighter': $color-fill-critical-lighter,
527
+ 'transparent': $color-fill-critical-transparent
526
528
  ),
527
529
  'grey': (
528
- 'normal': $beta-color-fill-grey,
529
- 'heavy': $beta-color-fill-grey-heavy,
530
- 'heavier': $beta-color-fill-grey-heavier
530
+ 'normal': $color-fill-grey,
531
+ 'heavy': $color-fill-grey-heavy,
532
+ 'heavier': $color-fill-grey-heavier
531
533
  ),
532
534
  'accent': (
533
535
  'blue': (
534
- 'normal': $beta-color-fill-accent-blue,
535
- 'heavy': $beta-color-fill-accent-blue-heavy,
536
- 'heavier': $beta-color-fill-accent-blue-heavier,
537
- 'transparent': $beta-color-fill-accent-blue-transparent
536
+ 'normal': $color-fill-accent-blue,
537
+ 'heavy': $color-fill-accent-blue-heavy,
538
+ 'heavier': $color-fill-accent-blue-heavier,
539
+ 'transparent': $color-fill-accent-blue-transparent
538
540
  ),
539
541
  'cobalt': (
540
- 'normal': $beta-color-fill-accent-cobalt,
541
- 'heavy': $beta-color-fill-accent-cobalt-heavy,
542
- 'heavier': $beta-color-fill-accent-cobalt-heavier,
543
- 'transparent': $beta-color-fill-accent-cobalt-transparent
542
+ 'normal': $color-fill-accent-cobalt,
543
+ 'heavy': $color-fill-accent-cobalt-heavy,
544
+ 'heavier': $color-fill-accent-cobalt-heavier,
545
+ 'transparent': $color-fill-accent-cobalt-transparent
544
546
  ),
545
547
  'green': (
546
- 'normal': $beta-color-fill-accent-green,
547
- 'heavy': $beta-color-fill-accent-green-heavy,
548
- 'heavier': $beta-color-fill-accent-green-heavier,
549
- 'transparent': $beta-color-fill-accent-green-transparent
548
+ 'normal': $color-fill-accent-green,
549
+ 'heavy': $color-fill-accent-green-heavy,
550
+ 'heavier': $color-fill-accent-green-heavier,
551
+ 'transparent': $color-fill-accent-green-transparent
550
552
  ),
551
553
  'red': (
552
- 'normal': $beta-color-fill-accent-red,
553
- 'heavy': $beta-color-fill-accent-red-heavy,
554
- 'heavier': $beta-color-fill-accent-red-heavier,
555
- 'transparent': $beta-color-fill-accent-red-transparent
554
+ 'normal': $color-fill-accent-red,
555
+ 'heavy': $color-fill-accent-red-heavy,
556
+ 'heavier': $color-fill-accent-red-heavier,
557
+ 'transparent': $color-fill-accent-red-transparent
556
558
  ),
557
559
  'orange': (
558
- 'normal': $beta-color-fill-accent-orange,
559
- 'heavy': $beta-color-fill-accent-orange-heavy,
560
- 'heavier': $beta-color-fill-accent-orange-heavier,
561
- 'transparent': $beta-color-fill-accent-orange-transparent
560
+ 'normal': $color-fill-accent-orange,
561
+ 'heavy': $color-fill-accent-orange-heavy,
562
+ 'heavier': $color-fill-accent-orange-heavier,
563
+ 'transparent': $color-fill-accent-orange-transparent
562
564
  ),
563
565
  'yellow': (
564
- 'normal': $beta-color-fill-accent-yellow,
565
- 'heavy': $beta-color-fill-accent-yellow-heavy,
566
- 'heavier': $beta-color-fill-accent-yellow-heavier,
567
- 'transparent': $beta-color-fill-accent-yellow-transparent
566
+ 'normal': $color-fill-accent-yellow,
567
+ 'heavy': $color-fill-accent-yellow-heavy,
568
+ 'heavier': $color-fill-accent-yellow-heavier,
569
+ 'transparent': $color-fill-accent-yellow-transparent
568
570
  ),
569
571
  'olive': (
570
- 'normal': $beta-color-fill-accent-olive,
571
- 'heavy': $beta-color-fill-accent-olive-heavy,
572
- 'heavier': $beta-color-fill-accent-olive-heavier,
573
- 'transparent': $beta-color-fill-accent-olive-transparent
572
+ 'normal': $color-fill-accent-olive,
573
+ 'heavy': $color-fill-accent-olive-heavy,
574
+ 'heavier': $color-fill-accent-olive-heavier,
575
+ 'transparent': $color-fill-accent-olive-transparent
574
576
  ),
575
577
  'teal': (
576
- 'normal': $beta-color-fill-accent-teal,
577
- 'heavy': $beta-color-fill-accent-teal-heavy,
578
- 'heavier': $beta-color-fill-accent-teal-heavier,
579
- 'transparent': $beta-color-fill-accent-teal-transparent
578
+ 'normal': $color-fill-accent-teal,
579
+ 'heavy': $color-fill-accent-teal-heavy,
580
+ 'heavier': $color-fill-accent-teal-heavier,
581
+ 'transparent': $color-fill-accent-teal-transparent
580
582
  ),
581
583
  'navy': (
582
- 'normal': $beta-color-fill-accent-navy,
583
- 'heavy': $beta-color-fill-accent-navy-heavy,
584
- 'heavier': $beta-color-fill-accent-navy-heavier,
585
- 'transparent': $beta-color-fill-accent-navy-transparent
584
+ 'normal': $color-fill-accent-navy,
585
+ 'heavy': $color-fill-accent-navy-heavy,
586
+ 'heavier': $color-fill-accent-navy-heavier,
587
+ 'transparent': $color-fill-accent-navy-transparent
586
588
  ),
587
589
  'purple': (
588
- 'normal': $beta-color-fill-accent-purple,
589
- 'heavy': $beta-color-fill-accent-purple-heavy,
590
- 'heavier': $beta-color-fill-accent-purple-heavier,
591
- 'transparent': $beta-color-fill-accent-purple-transparent
590
+ 'normal': $color-fill-accent-purple,
591
+ 'heavy': $color-fill-accent-purple-heavy,
592
+ 'heavier': $color-fill-accent-purple-heavier,
593
+ 'transparent': $color-fill-accent-purple-transparent
592
594
  ),
593
595
  'pink': (
594
- 'normal': $beta-color-fill-accent-pink,
595
- 'heavy': $beta-color-fill-accent-pink-heavy,
596
- 'heavier': $beta-color-fill-accent-pink-heavier,
597
- 'transparent': $beta-color-fill-accent-pink-transparent
596
+ 'normal': $color-fill-accent-pink,
597
+ 'heavy': $color-fill-accent-pink-heavy,
598
+ 'heavier': $color-fill-accent-pink-heavier,
599
+ 'transparent': $color-fill-accent-pink-transparent
598
600
  )
599
601
  ),
600
602
  'absolute': (
601
603
  'white': (
602
- 'normal': $beta-color-fill-absolute-white,
603
- 'light': $beta-color-fill-absolute-white-light,
604
- 'transparent': $beta-color-fill-absolute-white-transparent
604
+ 'normal': $color-fill-absolute-white,
605
+ 'light': $color-fill-absolute-white-light,
606
+ 'transparent': $color-fill-absolute-white-transparent
605
607
  ),
606
608
  'black': (
607
- 'normal': $beta-color-fill-absolute-black,
608
- 'light': $beta-color-fill-absolute-black-light,
609
- 'transparent': $beta-color-fill-absolute-black-transparent
609
+ 'normal': $color-fill-absolute-black,
610
+ 'light': $color-fill-absolute-black-light,
611
+ 'transparent': $color-fill-absolute-black-transparent
610
612
  )
611
613
  )
612
614
  ),
613
615
  'border': (
614
616
  'neutral': (
615
- 'normal': $beta-color-border-neutral,
616
- 'heavy': $beta-color-border-neutral-heavy,
617
- 'heavier': $beta-color-border-neutral-heavier
617
+ 'normal': $color-border-neutral,
618
+ 'heavy': $color-border-neutral-heavy,
619
+ 'heavier': $color-border-neutral-heavier
618
620
  ),
619
621
  'detach': (
620
- 'normal': $beta-color-border-detach,
621
- 'highest': $beta-color-border-detach-highest,
622
- 'higher': $beta-color-border-detach-higher,
623
- 'high': $beta-color-border-detach-high,
624
- 'low': $beta-color-border-detach-low
622
+ 'normal': $color-border-detach,
623
+ 'highest': $color-border-detach-highest,
624
+ 'higher': $color-border-detach-higher,
625
+ 'high': $color-border-detach-high,
626
+ 'low': $color-border-detach-low
625
627
  ),
626
628
  'absolute': (
627
- 'white': $beta-color-border-absolute-white
629
+ 'white': $color-border-absolute-white
628
630
  )
629
631
  ),
630
632
  'surface': (
631
- 'normal': $beta-color-surface,
632
- 'highest': $beta-color-surface-highest,
633
- 'higher': $beta-color-surface-higher,
634
- 'high': $beta-color-surface-high,
635
- 'low': $beta-color-surface-low,
633
+ 'normal': $color-surface,
634
+ 'highest': $color-surface-highest,
635
+ 'higher': $color-surface-higher,
636
+ 'high': $color-surface-high,
637
+ 'low': $color-surface-low,
636
638
  'glass': (
637
- 'normal': $beta-color-surface-glass,
638
- 'highest': $beta-color-surface-glass-highest,
639
- 'higher': $beta-color-surface-glass-higher,
640
- 'high': $beta-color-surface-glass-high
639
+ 'normal': $color-surface-glass,
640
+ 'highest': $color-surface-glass-highest,
641
+ 'higher': $color-surface-glass-higher,
642
+ 'high': $color-surface-glass-high
641
643
  ),
642
644
  'accent': (
643
- 'blue': $beta-color-surface-accent-blue,
644
- 'cobalt': $beta-color-surface-accent-cobalt,
645
- 'green': $beta-color-surface-accent-green,
646
- 'red': $beta-color-surface-accent-red,
647
- 'orange': $beta-color-surface-accent-orange,
648
- 'yellow': $beta-color-surface-accent-yellow,
649
- 'olive': $beta-color-surface-accent-olive,
650
- 'teal': $beta-color-surface-accent-teal,
651
- 'navy': $beta-color-surface-accent-navy,
652
- 'purple': $beta-color-surface-accent-purple,
653
- 'pink': $beta-color-surface-accent-pink
645
+ 'blue': $color-surface-accent-blue,
646
+ 'cobalt': $color-surface-accent-cobalt,
647
+ 'green': $color-surface-accent-green,
648
+ 'red': $color-surface-accent-red,
649
+ 'orange': $color-surface-accent-orange,
650
+ 'yellow': $color-surface-accent-yellow,
651
+ 'olive': $color-surface-accent-olive,
652
+ 'teal': $color-surface-accent-teal,
653
+ 'navy': $color-surface-accent-navy,
654
+ 'purple': $color-surface-accent-purple,
655
+ 'pink': $color-surface-accent-pink
654
656
  )
655
657
  ),
656
658
  'dim': (
657
659
  'absolute': (
658
660
  'black': (
659
- 'normal': $beta-color-dim-absolute-black,
660
- 'heavy': $beta-color-dim-absolute-black-heavy
661
+ 'normal': $color-dim-absolute-black,
662
+ 'heavy': $color-dim-absolute-black-heavy
661
663
  ),
662
664
  'white': (
663
- 'normal': $beta-color-dim-absolute-white,
664
- 'heavy': $beta-color-dim-absolute-white-heavy
665
+ 'normal': $color-dim-absolute-white,
666
+ 'heavy': $color-dim-absolute-white-heavy
665
667
  )
666
668
  )
667
669
  ),
668
670
  'gradient': (
669
671
  'green': (
670
- 'normal': $beta-color-gradient-green,
671
- 'heavy': $beta-color-gradient-green-heavy
672
+ 'normal': $color-gradient-green,
673
+ 'heavy': $color-gradient-green-heavy
672
674
  )
673
675
  ),
674
676
  'state': (
675
- 'default': $beta-color-state-default,
677
+ 'default': $color-state-default,
676
678
  'action': (
677
- 'normal': $beta-color-state-action,
678
- 'light': $beta-color-state-action-light
679
+ 'normal': $color-state-action,
680
+ 'light': $color-state-action-light
679
681
  ),
680
682
  'warning': (
681
- 'normal': $beta-color-state-warning,
682
- 'light': $beta-color-state-warning-light
683
+ 'normal': $color-state-warning,
684
+ 'light': $color-state-warning-light
683
685
  )
684
686
  ),
685
687
  'elevation': (
686
- 'xlarge': $beta-color-elevation-xlarge,
687
- 'large': $beta-color-elevation-large,
688
- 'medium': $beta-color-elevation-medium,
689
- 'small': $beta-color-elevation-small,
690
- 'base': $beta-color-elevation-base,
691
- 'base-inner': $beta-color-elevation-base-inner
688
+ 'xlarge': $color-elevation-xlarge,
689
+ 'large': $color-elevation-large,
690
+ 'medium': $color-elevation-medium,
691
+ 'small': $color-elevation-small,
692
+ 'base': $color-elevation-base,
693
+ 'base-inner': $color-elevation-base-inner
692
694
  )
693
695
  )
694
696
  );