@channel.io/bezier-tokens 0.2.13 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,530 @@
1
+
2
+ $blue-300: #6687FF !default;
3
+ $blue-400: #5E56F0 !default;
4
+ $blue-500: #4E40C9 !default;
5
+ $blue-300-40: #6687FF66 !default;
6
+ $blue-300-30: #6687FF4D !default;
7
+ $blue-300-20: #6687FF33 !default;
8
+ $blue-400-30: #5E56F04D !default;
9
+ $blue-400-20: #5E56F033 !default;
10
+ $blue-400-10: #5E56F01A !default;
11
+ $cobalt-300: #47C8FF !default;
12
+ $cobalt-400: #329BE7 !default;
13
+ $cobalt-500: #327AB8 !default;
14
+ $cobalt-300-40: #47C8FF66 !default;
15
+ $cobalt-300-30: #47C8FF4D !default;
16
+ $cobalt-300-20: #47C8FF33 !default;
17
+ $cobalt-400-30: #329BE74D !default;
18
+ $cobalt-400-20: #329BE733 !default;
19
+ $cobalt-400-10: #329BE71A !default;
20
+ $teal-300: #3CDDCD !default;
21
+ $teal-400: #0FB3A3 !default;
22
+ $teal-500: #449C8A !default;
23
+ $teal-300-40: #3CDDCD66 !default;
24
+ $teal-300-30: #3CDDCD4D !default;
25
+ $teal-300-20: #3CDDCD33 !default;
26
+ $teal-400-30: #0FB3A34D !default;
27
+ $teal-400-20: #0FB3A333 !default;
28
+ $teal-400-10: #0FB3A31A !default;
29
+ $green-300: #3ACF5A !default;
30
+ $green-400: #31A552 !default;
31
+ $green-500: #41904F !default;
32
+ $green-300-40: #3ACF5A66 !default;
33
+ $green-300-30: #3ACF5A4D !default;
34
+ $green-300-20: #3ACF5A33 !default;
35
+ $green-400-30: #31A5524D !default;
36
+ $green-400-20: #31A55233 !default;
37
+ $green-400-10: #31A5521A !default;
38
+ $olive-300: #CAD548 !default;
39
+ $olive-400: #A0A540 !default;
40
+ $olive-500: #818628 !default;
41
+ $olive-300-40: #CAD54866 !default;
42
+ $olive-300-30: #CAD5484D !default;
43
+ $olive-300-20: #CAD54833 !default;
44
+ $olive-400-30: #A0A5404D !default;
45
+ $olive-400-20: #A0A54033 !default;
46
+ $olive-400-10: #A0A5401A !default;
47
+ $yellow-300: #FDD353 !default;
48
+ $yellow-400: #EDBC40 !default;
49
+ $yellow-500: #C39E37 !default;
50
+ $yellow-300-40: #FDD35366 !default;
51
+ $yellow-300-30: #FDD3534D !default;
52
+ $yellow-300-20: #FDD35333 !default;
53
+ $yellow-400-30: #EDBC404D !default;
54
+ $yellow-400-20: #EDBC4033 !default;
55
+ $yellow-400-10: #EDBC401A !default;
56
+ $orange-300: #FFAB5C !default;
57
+ $orange-400: #F4800B !default;
58
+ $orange-500: #C57417 !default;
59
+ $orange-300-40: #FFAB5C66 !default;
60
+ $orange-300-30: #FFAB5C4D !default;
61
+ $orange-300-20: #FFAB5C33 !default;
62
+ $orange-400-30: #F4800B4D !default;
63
+ $orange-400-20: #F4800B33 !default;
64
+ $orange-400-10: #F4800B1A !default;
65
+ $red-300: #FF5C5C !default;
66
+ $red-400: #E94E58 !default;
67
+ $red-500: #AC3E46 !default;
68
+ $red-300-40: #FF5C5C66 !default;
69
+ $red-300-30: #FF5C5C4D !default;
70
+ $red-300-20: #FF5C5C33 !default;
71
+ $red-400-30: #E94E584D !default;
72
+ $red-400-20: #E94E5833 !default;
73
+ $red-400-10: #E94E581A !default;
74
+ $pink-300: #EC6FD3 !default;
75
+ $pink-400: #CB48AD !default;
76
+ $pink-500: #A32E92 !default;
77
+ $pink-300-40: #EC6FD366 !default;
78
+ $pink-300-30: #EC6FD34D !default;
79
+ $pink-300-20: #EC6FD333 !default;
80
+ $pink-400-30: #CB48AD4D !default;
81
+ $pink-400-20: #CB48AD33 !default;
82
+ $pink-400-10: #CB48AD1A !default;
83
+ $purple-300: #B570FF !default;
84
+ $purple-400: #915CE0 !default;
85
+ $purple-500: #6B23B3 !default;
86
+ $purple-300-40: #B570FF66 !default;
87
+ $purple-300-30: #B570FF4D !default;
88
+ $purple-300-20: #B570FF33 !default;
89
+ $purple-400-30: #915CE04D !default;
90
+ $purple-400-20: #915CE033 !default;
91
+ $purple-400-10: #915CE01A !default;
92
+ $navy-300: #647CC9 !default;
93
+ $navy-400: #3A4F8D !default;
94
+ $navy-500: #333D5B !default;
95
+ $navy-300-40: #647CC966 !default;
96
+ $navy-300-30: #647CC94D !default;
97
+ $navy-300-20: #647CC933 !default;
98
+ $navy-400-30: #3A4F8D4D !default;
99
+ $navy-400-20: #3A4F8D33 !default;
100
+ $navy-400-10: #3A4F8D1A !default;
101
+ $grey-50: #FCFCFC !default;
102
+ $grey-100: #F7F7F8 !default;
103
+ $grey-200: #EFEFF0 !default;
104
+ $grey-500: #A7A7AA !default;
105
+ $grey-700: #464748 !default;
106
+ $grey-800: #313234 !default;
107
+ $grey-850: #2A2B2D !default;
108
+ $grey-900: #242428 !default;
109
+ $grey-50-80: #FCFCFCCC !default;
110
+ $grey-100-90: #F7F7F8E6 !default;
111
+ $grey-100-80: #F7F7F8CC !default;
112
+ $grey-200-80: #EFEFF0CC !default;
113
+ $grey-700-80: #464748CC !default;
114
+ $grey-800-90: #313234E6 !default;
115
+ $grey-800-80: #313234CC !default;
116
+ $grey-850-80: #2A2B2DCC !default;
117
+ $grey-900-90: #242428E6 !default;
118
+ $white-5: #FFFFFF0D !default;
119
+ $white-8: #FFFFFF14 !default;
120
+ $white-12: #FFFFFF1F !default;
121
+ $white-20: #FFFFFF33 !default;
122
+ $white-40: #FFFFFF66 !default;
123
+ $white-60: #FFFFFF99 !default;
124
+ $white-80: #FFFFFFCC !default;
125
+ $white-90: #FFFFFFE6 !default;
126
+ $white-100: #FFFFFF !default;
127
+ $black-3: #00000008 !default;
128
+ $black-5: #0000000D !default;
129
+ $black-8: #00000014 !default;
130
+ $black-15: #00000026 !default;
131
+ $black-20: #00000033 !default;
132
+ $black-22: #00000038 !default;
133
+ $black-30: #0000004D !default;
134
+ $black-40: #00000066 !default;
135
+ $black-60: #00000099 !default;
136
+ $black-85: #000000D9 !default;
137
+ $black-100: #000000 !default;
138
+ $font-size-11: 1.1rem !default;
139
+ $font-size-12: 1.2rem !default;
140
+ $font-size-13: 1.3rem !default;
141
+ $font-size-14: 1.4rem !default;
142
+ $font-size-15: 1.5rem !default;
143
+ $font-size-16: 1.6rem !default;
144
+ $font-size-17: 1.7rem !default;
145
+ $font-size-18: 1.8rem !default;
146
+ $font-size-22: 2.2rem !default;
147
+ $font-size-24: 2.4rem !default;
148
+ $font-size-30: 3rem !default;
149
+ $font-size-36: 3.6rem !default;
150
+ $font-line-height-16: 1.6rem !default;
151
+ $font-line-height-18: 1.8rem !default;
152
+ $font-line-height-20: 2rem !default;
153
+ $font-line-height-22: 2.2rem !default;
154
+ $font-line-height-24: 2.4rem !default;
155
+ $font-line-height-28: 2.8rem !default;
156
+ $font-line-height-32: 3.2rem !default;
157
+ $font-line-height-36: 3.6rem !default;
158
+ $font-line-height-44: 4.4rem !default;
159
+ $font-weight-400: 400 !default;
160
+ $font-weight-700: 700 !default;
161
+ $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' !default;
162
+ $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' !default;
163
+ $font-family-mono: 'ui-monospace', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'monospace' !default;
164
+ $font-letter-spacing-1: -0.01rem !default;
165
+ $font-letter-spacing-2: -0.04rem !default;
166
+ $opacity-disabled: 0.4 !default;
167
+ $radius-2: 2px !default;
168
+ $radius-3: 3px !default;
169
+ $radius-4: 4px !default;
170
+ $radius-6: 6px !default;
171
+ $radius-8: 8px !default;
172
+ $radius-12: 12px !default;
173
+ $radius-16: 16px !default;
174
+ $radius-20: 20px !default;
175
+ $radius-32: 32px !default;
176
+ $radius-44: 44px !default;
177
+ $radius-42-p: 42% !default;
178
+ $transition-timing-function-default: cubic-bezier(0.3, 0, 0, 1) !default;
179
+ $transition-duration-s: 150ms !default;
180
+ $transition-duration-m: 300ms !default;
181
+ $transition-duration-l: 450ms !default;
182
+ $transition-s: 150ms cubic-bezier(0.3, 0, 0, 1) !default;
183
+ $transition-m: 300ms cubic-bezier(0.3, 0, 0, 1) !default;
184
+ $transition-l: 450ms cubic-bezier(0.3, 0, 0, 1) !default;
185
+ $typography-size-11-font-size: 1.1rem !default;
186
+ $typography-size-11-line-height: 1.6rem !default;
187
+ $typography-size-12-font-size: 1.2rem !default;
188
+ $typography-size-12-line-height: 1.6rem !default;
189
+ $typography-size-13-font-size: 1.3rem !default;
190
+ $typography-size-13-line-height: 1.8rem !default;
191
+ $typography-size-14-font-size: 1.4rem !default;
192
+ $typography-size-14-line-height: 1.8rem !default;
193
+ $typography-size-15-font-size: 1.5rem !default;
194
+ $typography-size-15-line-height: 2rem !default;
195
+ $typography-size-15-letter-spacing: -0.01rem !default;
196
+ $typography-size-16-font-size: 1.6rem !default;
197
+ $typography-size-16-line-height: 2.2rem !default;
198
+ $typography-size-16-letter-spacing: -0.01rem !default;
199
+ $typography-size-17-font-size: 1.7rem !default;
200
+ $typography-size-17-line-height: 2.2rem !default;
201
+ $typography-size-17-letter-spacing: -0.01rem !default;
202
+ $typography-size-18-font-size: 1.8rem !default;
203
+ $typography-size-18-line-height: 2.4rem !default;
204
+ $typography-size-22-font-size: 2.2rem !default;
205
+ $typography-size-22-line-height: 2.8rem !default;
206
+ $typography-size-22-letter-spacing: -0.04rem !default;
207
+ $typography-size-24-font-size: 2.4rem !default;
208
+ $typography-size-24-line-height: 3.2rem !default;
209
+ $typography-size-24-letter-spacing: -0.04rem !default;
210
+ $typography-size-30-font-size: 3rem !default;
211
+ $typography-size-30-line-height: 3.6rem !default;
212
+ $typography-size-30-letter-spacing: -0.04rem !default;
213
+ $typography-size-36-font-size: 3.6rem !default;
214
+ $typography-size-36-line-height: 4.4rem !default;
215
+ $typography-size-36-letter-spacing: -0.04rem !default;
216
+ $z-index-hidden: -1 !default;
217
+ $z-index-base: 0 !default;
218
+ $z-index-floating: 1 !default;
219
+ $z-index-overlay: 1000 !default;
220
+ $z-index-modal: 1100 !default;
221
+ $z-index-toast: 1200 !default;
222
+ $z-index-tooltip: 1300 !default;
223
+ $z-index-important: 2000 !default;
224
+
225
+ $tokens: (
226
+ 'blue': (
227
+ '300': $blue-300,
228
+ '400': $blue-400,
229
+ '500': $blue-500,
230
+ '300-40': $blue-300-40,
231
+ '300-30': $blue-300-30,
232
+ '300-20': $blue-300-20,
233
+ '400-30': $blue-400-30,
234
+ '400-20': $blue-400-20,
235
+ '400-10': $blue-400-10
236
+ ),
237
+ 'cobalt': (
238
+ '300': $cobalt-300,
239
+ '400': $cobalt-400,
240
+ '500': $cobalt-500,
241
+ '300-40': $cobalt-300-40,
242
+ '300-30': $cobalt-300-30,
243
+ '300-20': $cobalt-300-20,
244
+ '400-30': $cobalt-400-30,
245
+ '400-20': $cobalt-400-20,
246
+ '400-10': $cobalt-400-10
247
+ ),
248
+ 'teal': (
249
+ '300': $teal-300,
250
+ '400': $teal-400,
251
+ '500': $teal-500,
252
+ '300-40': $teal-300-40,
253
+ '300-30': $teal-300-30,
254
+ '300-20': $teal-300-20,
255
+ '400-30': $teal-400-30,
256
+ '400-20': $teal-400-20,
257
+ '400-10': $teal-400-10
258
+ ),
259
+ 'green': (
260
+ '300': $green-300,
261
+ '400': $green-400,
262
+ '500': $green-500,
263
+ '300-40': $green-300-40,
264
+ '300-30': $green-300-30,
265
+ '300-20': $green-300-20,
266
+ '400-30': $green-400-30,
267
+ '400-20': $green-400-20,
268
+ '400-10': $green-400-10
269
+ ),
270
+ 'olive': (
271
+ '300': $olive-300,
272
+ '400': $olive-400,
273
+ '500': $olive-500,
274
+ '300-40': $olive-300-40,
275
+ '300-30': $olive-300-30,
276
+ '300-20': $olive-300-20,
277
+ '400-30': $olive-400-30,
278
+ '400-20': $olive-400-20,
279
+ '400-10': $olive-400-10
280
+ ),
281
+ 'yellow': (
282
+ '300': $yellow-300,
283
+ '400': $yellow-400,
284
+ '500': $yellow-500,
285
+ '300-40': $yellow-300-40,
286
+ '300-30': $yellow-300-30,
287
+ '300-20': $yellow-300-20,
288
+ '400-30': $yellow-400-30,
289
+ '400-20': $yellow-400-20,
290
+ '400-10': $yellow-400-10
291
+ ),
292
+ 'orange': (
293
+ '300': $orange-300,
294
+ '400': $orange-400,
295
+ '500': $orange-500,
296
+ '300-40': $orange-300-40,
297
+ '300-30': $orange-300-30,
298
+ '300-20': $orange-300-20,
299
+ '400-30': $orange-400-30,
300
+ '400-20': $orange-400-20,
301
+ '400-10': $orange-400-10
302
+ ),
303
+ 'red': (
304
+ '300': $red-300,
305
+ '400': $red-400,
306
+ '500': $red-500,
307
+ '300-40': $red-300-40,
308
+ '300-30': $red-300-30,
309
+ '300-20': $red-300-20,
310
+ '400-30': $red-400-30,
311
+ '400-20': $red-400-20,
312
+ '400-10': $red-400-10
313
+ ),
314
+ 'pink': (
315
+ '300': $pink-300,
316
+ '400': $pink-400,
317
+ '500': $pink-500,
318
+ '300-40': $pink-300-40,
319
+ '300-30': $pink-300-30,
320
+ '300-20': $pink-300-20,
321
+ '400-30': $pink-400-30,
322
+ '400-20': $pink-400-20,
323
+ '400-10': $pink-400-10
324
+ ),
325
+ 'purple': (
326
+ '300': $purple-300,
327
+ '400': $purple-400,
328
+ '500': $purple-500,
329
+ '300-40': $purple-300-40,
330
+ '300-30': $purple-300-30,
331
+ '300-20': $purple-300-20,
332
+ '400-30': $purple-400-30,
333
+ '400-20': $purple-400-20,
334
+ '400-10': $purple-400-10
335
+ ),
336
+ 'navy': (
337
+ '300': $navy-300,
338
+ '400': $navy-400,
339
+ '500': $navy-500,
340
+ '300-40': $navy-300-40,
341
+ '300-30': $navy-300-30,
342
+ '300-20': $navy-300-20,
343
+ '400-30': $navy-400-30,
344
+ '400-20': $navy-400-20,
345
+ '400-10': $navy-400-10
346
+ ),
347
+ 'grey': (
348
+ '50': $grey-50,
349
+ '100': $grey-100,
350
+ '200': $grey-200,
351
+ '500': $grey-500,
352
+ '700': $grey-700,
353
+ '800': $grey-800,
354
+ '850': $grey-850,
355
+ '900': $grey-900,
356
+ '50-80': $grey-50-80,
357
+ '100-90': $grey-100-90,
358
+ '100-80': $grey-100-80,
359
+ '200-80': $grey-200-80,
360
+ '700-80': $grey-700-80,
361
+ '800-90': $grey-800-90,
362
+ '800-80': $grey-800-80,
363
+ '850-80': $grey-850-80,
364
+ '900-90': $grey-900-90
365
+ ),
366
+ 'white': (
367
+ '5': $white-5,
368
+ '8': $white-8,
369
+ '12': $white-12,
370
+ '20': $white-20,
371
+ '40': $white-40,
372
+ '60': $white-60,
373
+ '80': $white-80,
374
+ '90': $white-90,
375
+ '100': $white-100
376
+ ),
377
+ 'black': (
378
+ '3': $black-3,
379
+ '5': $black-5,
380
+ '8': $black-8,
381
+ '15': $black-15,
382
+ '20': $black-20,
383
+ '22': $black-22,
384
+ '30': $black-30,
385
+ '40': $black-40,
386
+ '60': $black-60,
387
+ '85': $black-85,
388
+ '100': $black-100
389
+ ),
390
+ 'font': (
391
+ 'size': (
392
+ '11': $font-size-11,
393
+ '12': $font-size-12,
394
+ '13': $font-size-13,
395
+ '14': $font-size-14,
396
+ '15': $font-size-15,
397
+ '16': $font-size-16,
398
+ '17': $font-size-17,
399
+ '18': $font-size-18,
400
+ '22': $font-size-22,
401
+ '24': $font-size-24,
402
+ '30': $font-size-30,
403
+ '36': $font-size-36
404
+ ),
405
+ 'line-height': (
406
+ '16': $font-line-height-16,
407
+ '18': $font-line-height-18,
408
+ '20': $font-line-height-20,
409
+ '22': $font-line-height-22,
410
+ '24': $font-line-height-24,
411
+ '28': $font-line-height-28,
412
+ '32': $font-line-height-32,
413
+ '36': $font-line-height-36,
414
+ '44': $font-line-height-44
415
+ ),
416
+ 'weight': (
417
+ '400': $font-weight-400,
418
+ '700': $font-weight-700
419
+ ),
420
+ 'family': (
421
+ 'sans': (
422
+ 'kr': $font-family-sans-kr,
423
+ 'jp': $font-family-sans-jp
424
+ ),
425
+ 'mono': $font-family-mono
426
+ ),
427
+ 'letter-spacing': (
428
+ '1': $font-letter-spacing-1,
429
+ '2': $font-letter-spacing-2
430
+ )
431
+ ),
432
+ 'opacity': (
433
+ 'disabled': $opacity-disabled
434
+ ),
435
+ 'radius': (
436
+ '2': $radius-2,
437
+ '3': $radius-3,
438
+ '4': $radius-4,
439
+ '6': $radius-6,
440
+ '8': $radius-8,
441
+ '12': $radius-12,
442
+ '16': $radius-16,
443
+ '20': $radius-20,
444
+ '32': $radius-32,
445
+ '44': $radius-44,
446
+ '42-p': $radius-42-p
447
+ ),
448
+ 'transition': (
449
+ 'timing-function': (
450
+ 'default': $transition-timing-function-default
451
+ ),
452
+ 'duration': (
453
+ 's': $transition-duration-s,
454
+ 'm': $transition-duration-m,
455
+ 'l': $transition-duration-l
456
+ ),
457
+ 's': $transition-s,
458
+ 'm': $transition-m,
459
+ 'l': $transition-l
460
+ ),
461
+ 'typography': (
462
+ 'size': (
463
+ '11': (
464
+ 'font-size': $typography-size-11-font-size,
465
+ 'line-height': $typography-size-11-line-height
466
+ ),
467
+ '12': (
468
+ 'font-size': $typography-size-12-font-size,
469
+ 'line-height': $typography-size-12-line-height
470
+ ),
471
+ '13': (
472
+ 'font-size': $typography-size-13-font-size,
473
+ 'line-height': $typography-size-13-line-height
474
+ ),
475
+ '14': (
476
+ 'font-size': $typography-size-14-font-size,
477
+ 'line-height': $typography-size-14-line-height
478
+ ),
479
+ '15': (
480
+ 'font-size': $typography-size-15-font-size,
481
+ 'line-height': $typography-size-15-line-height,
482
+ 'letter-spacing': $typography-size-15-letter-spacing
483
+ ),
484
+ '16': (
485
+ 'font-size': $typography-size-16-font-size,
486
+ 'line-height': $typography-size-16-line-height,
487
+ 'letter-spacing': $typography-size-16-letter-spacing
488
+ ),
489
+ '17': (
490
+ 'font-size': $typography-size-17-font-size,
491
+ 'line-height': $typography-size-17-line-height,
492
+ 'letter-spacing': $typography-size-17-letter-spacing
493
+ ),
494
+ '18': (
495
+ 'font-size': $typography-size-18-font-size,
496
+ 'line-height': $typography-size-18-line-height
497
+ ),
498
+ '22': (
499
+ 'font-size': $typography-size-22-font-size,
500
+ 'line-height': $typography-size-22-line-height,
501
+ 'letter-spacing': $typography-size-22-letter-spacing
502
+ ),
503
+ '24': (
504
+ 'font-size': $typography-size-24-font-size,
505
+ 'line-height': $typography-size-24-line-height,
506
+ 'letter-spacing': $typography-size-24-letter-spacing
507
+ ),
508
+ '30': (
509
+ 'font-size': $typography-size-30-font-size,
510
+ 'line-height': $typography-size-30-line-height,
511
+ 'letter-spacing': $typography-size-30-letter-spacing
512
+ ),
513
+ '36': (
514
+ 'font-size': $typography-size-36-font-size,
515
+ 'line-height': $typography-size-36-line-height,
516
+ 'letter-spacing': $typography-size-36-letter-spacing
517
+ )
518
+ )
519
+ ),
520
+ 'z-index': (
521
+ 'hidden': $z-index-hidden,
522
+ 'base': $z-index-base,
523
+ 'floating': $z-index-floating,
524
+ 'overlay': $z-index-overlay,
525
+ 'modal': $z-index-modal,
526
+ 'toast': $z-index-toast,
527
+ 'tooltip': $z-index-tooltip,
528
+ 'important': $z-index-important
529
+ )
530
+ );
@@ -0,0 +1,9 @@
1
+ @use './dark-theme' as dark-theme;
2
+ @use './global' as global;
3
+ @use './light-theme' as light-theme;
4
+
5
+ $tokens: (
6
+ "dark-theme": dark-theme.$tokens,
7
+ "global": global.$tokens,
8
+ "light-theme": light-theme.$tokens,
9
+ );