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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,694 @@
1
+
2
+ $beta-backdrop-large: 60px !default;
3
+ $beta-backdrop-small: 6px !default;
4
+ $beta-border-default: 0 0 0 1px #00000014 !default;
5
+ $beta-border-bottom: 0 -1px 0 0 #00000014 !default;
6
+ $beta-border-right: -1px 0 0 0 #00000014 !default;
7
+ $beta-border-left: 1px 0 0 0 #00000014 !default;
8
+ $beta-border-top: 0 1px 0 0 #00000014 !default;
9
+ $beta-border-white-high: 0 0 0 1px #ffffffff !default;
10
+ $beta-border-white-higher: 0 0 0 1px #ffffffff !default;
11
+ $beta-border-white-highest: 0 0 0 1px #ffffffff !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 #e67f2bff !default;
43
+ $beta-state-active: 0 0 0 1px #6157eaff !default;
44
+ $beta-state-input-default: 0 1px 2px 0 #0000000d, inset 0 0 0 1px #00000026 !default;
45
+ $beta-state-input-hovered: 0 2px 6px 0 #0000000d, inset 0 0 0 1px #6157eaff !default;
46
+ $beta-state-input-active: 0 2px 6px 0 #0000000d, 0 0 0 3px #6157ea4d, inset 0 0 0 1px #6157eaff !default;
47
+ $beta-state-input-error: 0 2px 6px 0 #0000000d, 0 0 0 3px #e67f2b4d, inset 0 0 0 1px #e67f2bff !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: #6157eaff !default;
99
+ $beta-color-text-success: #20ab55ff !default;
100
+ $beta-color-text-highlight: #3292e3ff !default;
101
+ $beta-color-text-warning: #e67f2bff !default;
102
+ $beta-color-text-critical: #e1535dff !default;
103
+ $beta-color-text-neutral-heaviest: #000000ff !default;
104
+ $beta-color-text-neutral: #000000d9 !default;
105
+ $beta-color-text-neutral-light: #00000099 !default;
106
+ $beta-color-text-neutral-lighter: #00000066 !default;
107
+ $beta-color-text-accent-blue: #6157eaff !default;
108
+ $beta-color-text-accent-cobalt: #3292e3ff !default;
109
+ $beta-color-text-accent-green: #20ab55ff !default;
110
+ $beta-color-text-accent-red: #e1535dff !default;
111
+ $beta-color-text-accent-orange: #e67f2bff !default;
112
+ $beta-color-text-accent-yellow: #edae0dff !default;
113
+ $beta-color-text-accent-teal: #09b2acff !default;
114
+ $beta-color-text-accent-navy: #424fabff !default;
115
+ $beta-color-text-accent-purple: #8e57e7ff !default;
116
+ $beta-color-text-accent-pink: #d64bb5ff !default;
117
+ $beta-color-text-absolute-white: #ffffffff !default;
118
+ $beta-color-text-absolute-black: #000000ff !default;
119
+ $beta-color-icon-action: #6157eaff !default;
120
+ $beta-color-icon-success: #20ab55ff !default;
121
+ $beta-color-icon-highlight: #3292e3ff !default;
122
+ $beta-color-icon-warning: #e67f2bff !default;
123
+ $beta-color-icon-critical: #e1535dff !default;
124
+ $beta-color-icon-neutral: #00000066 !default;
125
+ $beta-color-icon-neutral-heavy: #00000099 !default;
126
+ $beta-color-icon-neutral-heavier: #000000d9 !default;
127
+ $beta-color-icon-accent-blue: #6157eaff !default;
128
+ $beta-color-icon-accent-cobalt: #3292e3ff !default;
129
+ $beta-color-icon-accent-green: #20ab55ff !default;
130
+ $beta-color-icon-accent-red: #e1535dff !default;
131
+ $beta-color-icon-accent-orange: #e67f2bff !default;
132
+ $beta-color-icon-accent-yellow: #edae0dff !default;
133
+ $beta-color-icon-accent-olive: #a9b110ff !default;
134
+ $beta-color-icon-accent-teal: #09b2acff !default;
135
+ $beta-color-icon-accent-navy: #424fabff !default;
136
+ $beta-color-icon-accent-purple: #8e57e7ff !default;
137
+ $beta-color-icon-accent-pink: #d64bb5ff !default;
138
+ $beta-color-icon-absolute-white: #ffffffff !default;
139
+ $beta-color-icon-absolute-black: #000000ff !default;
140
+ $beta-color-fill-neutral-heaviest: #000000d9 !default;
141
+ $beta-color-fill-neutral-heavier: #00000066 !default;
142
+ $beta-color-fill-neutral-heavy: #00000026 !default;
143
+ $beta-color-fill-neutral-light: #0000000d !default;
144
+ $beta-color-fill-neutral-lighter: #00000008 !default;
145
+ $beta-color-fill-neutral-lightest: #00000003 !default;
146
+ $beta-color-fill-neutral-transparent: #00000000 !default;
147
+ $beta-color-fill-action: #6157eaff !default;
148
+ $beta-color-fill-action-light: #6157ea33 !default;
149
+ $beta-color-fill-action-lighter: #6157ea1a !default;
150
+ $beta-color-fill-action-transparent: #6157ea00 !default;
151
+ $beta-color-fill-success: #20ab55ff !default;
152
+ $beta-color-fill-success-light: #20ab5533 !default;
153
+ $beta-color-fill-success-lighter: #20ab551a !default;
154
+ $beta-color-fill-success-transparent: #20ab5500 !default;
155
+ $beta-color-fill-highlight: #3292e3ff !default;
156
+ $beta-color-fill-highlight-light: #3292e333 !default;
157
+ $beta-color-fill-highlight-lighter: #3292e31a !default;
158
+ $beta-color-fill-highlight-transparent: #3292e300 !default;
159
+ $beta-color-fill-warning: #e67f2bff !default;
160
+ $beta-color-fill-warning-light: #e67f2b33 !default;
161
+ $beta-color-fill-warning-lighter: #e67f2b1a !default;
162
+ $beta-color-fill-warning-transparent: #e67f2b00 !default;
163
+ $beta-color-fill-critical: #e1535dff !default;
164
+ $beta-color-fill-critical-light: #e1535d33 !default;
165
+ $beta-color-fill-critical-lighter: #e1535d1a !default;
166
+ $beta-color-fill-critical-transparent: #e1535d00 !default;
167
+ $beta-color-fill-grey: #fbfbfbff !default;
168
+ $beta-color-fill-grey-heavy: #f7f7f8ff !default;
169
+ $beta-color-fill-grey-heavier: #efeff0ff !default;
170
+ $beta-color-fill-accent-blue: #6157ea1a !default;
171
+ $beta-color-fill-accent-blue-heavy: #6157ea33 !default;
172
+ $beta-color-fill-accent-blue-heavier: #6157eaff !default;
173
+ $beta-color-fill-accent-blue-transparent: #6157ea00 !default;
174
+ $beta-color-fill-accent-cobalt: #3292e31a !default;
175
+ $beta-color-fill-accent-cobalt-heavy: #3292e333 !default;
176
+ $beta-color-fill-accent-cobalt-heavier: #3292e3ff !default;
177
+ $beta-color-fill-accent-cobalt-transparent: #3292e300 !default;
178
+ $beta-color-fill-accent-green: #20ab551a !default;
179
+ $beta-color-fill-accent-green-heavy: #20ab5533 !default;
180
+ $beta-color-fill-accent-green-heavier: #20ab55ff !default;
181
+ $beta-color-fill-accent-green-transparent: #20ab5500 !default;
182
+ $beta-color-fill-accent-red: #e1535d1a !default;
183
+ $beta-color-fill-accent-red-heavy: #e1535d33 !default;
184
+ $beta-color-fill-accent-red-heavier: #e1535dff !default;
185
+ $beta-color-fill-accent-red-transparent: #e1535d00 !default;
186
+ $beta-color-fill-accent-orange: #e67f2b1a !default;
187
+ $beta-color-fill-accent-orange-heavy: #e67f2b33 !default;
188
+ $beta-color-fill-accent-orange-heavier: #e67f2bff !default;
189
+ $beta-color-fill-accent-orange-transparent: #e67f2b00 !default;
190
+ $beta-color-fill-accent-yellow: #edae0d1a !default;
191
+ $beta-color-fill-accent-yellow-heavy: #edae0d33 !default;
192
+ $beta-color-fill-accent-yellow-heavier: #edae0dff !default;
193
+ $beta-color-fill-accent-yellow-transparent: #edae0d00 !default;
194
+ $beta-color-fill-accent-olive: #a9b1101a !default;
195
+ $beta-color-fill-accent-olive-heavy: #a9b11033 !default;
196
+ $beta-color-fill-accent-olive-heavier: #a9b110ff !default;
197
+ $beta-color-fill-accent-olive-transparent: #a9b11000 !default;
198
+ $beta-color-fill-accent-teal: #09b2ac1a !default;
199
+ $beta-color-fill-accent-teal-heavy: #09b2ac33 !default;
200
+ $beta-color-fill-accent-teal-heavier: #09b2acff !default;
201
+ $beta-color-fill-accent-teal-transparent: #09b2ac00 !default;
202
+ $beta-color-fill-accent-navy: #424fab1a !default;
203
+ $beta-color-fill-accent-navy-heavy: #424fab33 !default;
204
+ $beta-color-fill-accent-navy-heavier: #424fabff !default;
205
+ $beta-color-fill-accent-navy-transparent: #424fab00 !default;
206
+ $beta-color-fill-accent-purple: #8e57e71a !default;
207
+ $beta-color-fill-accent-purple-heavy: #8e57e733 !default;
208
+ $beta-color-fill-accent-purple-heavier: #8e57e7ff !default;
209
+ $beta-color-fill-accent-purple-transparent: #8e57e700 !default;
210
+ $beta-color-fill-accent-pink: #d64bb51a !default;
211
+ $beta-color-fill-accent-pink-heavy: #d64bb533 !default;
212
+ $beta-color-fill-accent-pink-heavier: #d64bb5ff !default;
213
+ $beta-color-fill-accent-pink-transparent: #d64bb500 !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: #00000014 !default;
221
+ $beta-color-border-neutral-heavy: #00000026 !default;
222
+ $beta-color-border-neutral-heavier: #00000066 !default;
223
+ $beta-color-border-detach: #ffffffff !default;
224
+ $beta-color-border-detach-highest: #ffffffff !default;
225
+ $beta-color-border-detach-higher: #ffffffff !default;
226
+ $beta-color-border-detach-high: #ffffffff !default;
227
+ $beta-color-border-detach-low: #fbfbfbff !default;
228
+ $beta-color-border-absolute-white: #ffffffff !default;
229
+ $beta-color-surface: #ffffffff !default;
230
+ $beta-color-surface-highest: #ffffffff !default;
231
+ $beta-color-surface-higher: #ffffffff !default;
232
+ $beta-color-surface-high: #ffffffff !default;
233
+ $beta-color-surface-low: #fbfbfbff !default;
234
+ $beta-color-surface-glass: #ffffffe6 !default;
235
+ $beta-color-surface-glass-highest: #efeff0e6 !default;
236
+ $beta-color-surface-glass-higher: #f7f7f8e6 !default;
237
+ $beta-color-surface-glass-high: #ffffffe6 !default;
238
+ $beta-color-surface-accent-blue: #6157eaff !default;
239
+ $beta-color-surface-accent-cobalt: #3292e3ff !default;
240
+ $beta-color-surface-accent-green: #20ab55ff !default;
241
+ $beta-color-surface-accent-red: #e1535dff !default;
242
+ $beta-color-surface-accent-orange: #e67f2bff !default;
243
+ $beta-color-surface-accent-yellow: #edae0dff !default;
244
+ $beta-color-surface-accent-olive: #a9b110ff !default;
245
+ $beta-color-surface-accent-teal: #09b2acff !default;
246
+ $beta-color-surface-accent-navy: #424fabff !default;
247
+ $beta-color-surface-accent-purple: #8e57e7ff !default;
248
+ $beta-color-surface-accent-pink: #d64bb5ff !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: #00000026 !default;
256
+ $beta-color-state-action: #6157eaff !default;
257
+ $beta-color-state-action-light: #6157ea4d !default;
258
+ $beta-color-state-warning: #e67f2bff !default;
259
+ $beta-color-state-warning-light: #e67f2b4d !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;
266
+
267
+ $tokens: (
268
+ 'backdrop': (
269
+ 'large': $beta-backdrop-large,
270
+ 'small': $beta-backdrop-small
271
+ ),
272
+ '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
281
+ ),
282
+ '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
289
+ ),
290
+ 'layer': (
291
+ '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
300
+ )
301
+ ),
302
+ 'motion': (
303
+ 'transition': (
304
+ 'fast': $beta-motion-transition-fast,
305
+ 'default': $beta-motion-transition-default,
306
+ 'slow': $beta-motion-transition-slow
307
+ )
308
+ ),
309
+ 'opacity': (
310
+ 'disabled': $beta-opacity-disabled
311
+ ),
312
+ '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
325
+ ),
326
+ 'state': (
327
+ 'error': $beta-state-error,
328
+ 'active': $beta-state-active,
329
+ '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
334
+ )
335
+ ),
336
+ 'typography': (
337
+ 'heading': (
338
+ 'font-family': $beta-typography-heading-font-family,
339
+ '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
346
+ ),
347
+ 'weight': (
348
+ 'bold': $beta-typography-heading-weight-bold
349
+ ),
350
+ '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
354
+ ),
355
+ '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
362
+ )
363
+ ),
364
+ 'text': (
365
+ 'font-family': $beta-typography-text-font-family,
366
+ '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
374
+ ),
375
+ 'weight': (
376
+ 'bold': $beta-typography-text-weight-bold,
377
+ 'regular': $beta-typography-text-weight-regular
378
+ ),
379
+ 'letter-spacing': (
380
+ 'normal': $beta-typography-text-letter-spacing,
381
+ 'tight': $beta-typography-text-letter-spacing-tight
382
+ ),
383
+ '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
391
+ )
392
+ ),
393
+ 'display': (
394
+ 'font-family': $beta-typography-display-font-family,
395
+ 'size': (
396
+ 'large': $beta-typography-display-size-large,
397
+ 'medium': $beta-typography-display-size-medium
398
+ ),
399
+ 'weight': (
400
+ 'bold': $beta-typography-display-weight-bold
401
+ ),
402
+ 'letter-spacing': (
403
+ 'tighter': $beta-typography-display-letter-spacing-tighter
404
+ ),
405
+ 'line-height': (
406
+ 'large': $beta-typography-display-line-height-large,
407
+ 'medium': $beta-typography-display-line-height-medium
408
+ )
409
+ ),
410
+ 'code': (
411
+ 'font-family': $beta-typography-code-font-family,
412
+ 'size': (
413
+ 'medium': $beta-typography-code-size-medium,
414
+ 'small': $beta-typography-code-size-small
415
+ ),
416
+ 'weight': (
417
+ 'regular': $beta-typography-code-weight-regular
418
+ ),
419
+ 'letter-spacing': (
420
+ 'normal': $beta-typography-code-letter-spacing
421
+ ),
422
+ 'line-height': (
423
+ 'medium': $beta-typography-code-line-height-medium,
424
+ 'small': $beta-typography-code-line-height-small
425
+ )
426
+ )
427
+ ),
428
+ 'color': (
429
+ '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,
435
+ '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
440
+ ),
441
+ '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
452
+ ),
453
+ 'absolute': (
454
+ 'white': $beta-color-text-absolute-white,
455
+ 'black': $beta-color-text-absolute-black
456
+ )
457
+ ),
458
+ '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,
464
+ 'neutral': (
465
+ 'normal': $beta-color-icon-neutral,
466
+ 'heavy': $beta-color-icon-neutral-heavy,
467
+ 'heavier': $beta-color-icon-neutral-heavier
468
+ ),
469
+ '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
481
+ ),
482
+ 'absolute': (
483
+ 'white': $beta-color-icon-absolute-white,
484
+ 'black': $beta-color-icon-absolute-black
485
+ )
486
+ ),
487
+ 'fill': (
488
+ '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
496
+ ),
497
+ '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
502
+ ),
503
+ '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
508
+ ),
509
+ '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
514
+ ),
515
+ '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
520
+ ),
521
+ '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
526
+ ),
527
+ 'grey': (
528
+ 'normal': $beta-color-fill-grey,
529
+ 'heavy': $beta-color-fill-grey-heavy,
530
+ 'heavier': $beta-color-fill-grey-heavier
531
+ ),
532
+ 'accent': (
533
+ '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
538
+ ),
539
+ '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
544
+ ),
545
+ '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
550
+ ),
551
+ '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
556
+ ),
557
+ '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
562
+ ),
563
+ '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
568
+ ),
569
+ '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
574
+ ),
575
+ '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
580
+ ),
581
+ '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
586
+ ),
587
+ '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
592
+ ),
593
+ '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
598
+ )
599
+ ),
600
+ 'absolute': (
601
+ 'white': (
602
+ 'normal': $beta-color-fill-absolute-white,
603
+ 'light': $beta-color-fill-absolute-white-light,
604
+ 'transparent': $beta-color-fill-absolute-white-transparent
605
+ ),
606
+ 'black': (
607
+ 'normal': $beta-color-fill-absolute-black,
608
+ 'light': $beta-color-fill-absolute-black-light,
609
+ 'transparent': $beta-color-fill-absolute-black-transparent
610
+ )
611
+ )
612
+ ),
613
+ 'border': (
614
+ 'neutral': (
615
+ 'normal': $beta-color-border-neutral,
616
+ 'heavy': $beta-color-border-neutral-heavy,
617
+ 'heavier': $beta-color-border-neutral-heavier
618
+ ),
619
+ '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
625
+ ),
626
+ 'absolute': (
627
+ 'white': $beta-color-border-absolute-white
628
+ )
629
+ ),
630
+ '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,
636
+ '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
641
+ ),
642
+ '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
654
+ )
655
+ ),
656
+ 'dim': (
657
+ 'absolute': (
658
+ 'black': (
659
+ 'normal': $beta-color-dim-absolute-black,
660
+ 'heavy': $beta-color-dim-absolute-black-heavy
661
+ ),
662
+ 'white': (
663
+ 'normal': $beta-color-dim-absolute-white,
664
+ 'heavy': $beta-color-dim-absolute-white-heavy
665
+ )
666
+ )
667
+ ),
668
+ 'gradient': (
669
+ 'green': (
670
+ 'normal': $beta-color-gradient-green,
671
+ 'heavy': $beta-color-gradient-green-heavy
672
+ )
673
+ ),
674
+ 'state': (
675
+ 'default': $beta-color-state-default,
676
+ 'action': (
677
+ 'normal': $beta-color-state-action,
678
+ 'light': $beta-color-state-action-light
679
+ ),
680
+ 'warning': (
681
+ 'normal': $beta-color-state-warning,
682
+ 'light': $beta-color-state-warning-light
683
+ )
684
+ ),
685
+ '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
692
+ )
693
+ )
694
+ );