@chayns-ui/tokens 0.3.0 → 0.5.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.
- package/dist/baseline.css +52 -0
- package/package.json +1 -1
- package/src/foundations.tokens.json +141 -0
package/dist/baseline.css
CHANGED
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
--btn-py: calc(11 * var(--u));
|
|
14
14
|
--btn-px: calc(22 * var(--u));
|
|
15
15
|
--ctrl-h: calc(42 * var(--u));
|
|
16
|
+
--input-py: calc(13 * var(--u));
|
|
17
|
+
--input-px: calc(16 * var(--u));
|
|
16
18
|
--icon: calc(16 * var(--u));
|
|
17
19
|
--icon-lg: calc(19 * var(--u));
|
|
18
20
|
--avatar: calc(42 * var(--u));
|
|
@@ -59,6 +61,16 @@
|
|
|
59
61
|
--fs-meta: calc(13 * var(--u));
|
|
60
62
|
--fs-caption: calc(12 * var(--u));
|
|
61
63
|
--fs-micro: calc(11 * var(--u));
|
|
64
|
+
--grey-000: #ffffff;
|
|
65
|
+
--grey-001: #f7f7f7;
|
|
66
|
+
--grey-002: #e5e5e5;
|
|
67
|
+
--grey-003: #bfbfbf;
|
|
68
|
+
--grey-004: #999999;
|
|
69
|
+
--grey-005: #7f7f7f;
|
|
70
|
+
--grey-006: #666666;
|
|
71
|
+
--grey-007: #3f3f3f;
|
|
72
|
+
--grey-008: #191919;
|
|
73
|
+
--grey-009: #000000;
|
|
62
74
|
--page: #f4f6f6;
|
|
63
75
|
--surface: #ffffff;
|
|
64
76
|
--surface-2: #fbfcfc;
|
|
@@ -76,7 +88,22 @@
|
|
|
76
88
|
--accent-active: #0a4e5b;
|
|
77
89
|
--on-accent: #ffffff;
|
|
78
90
|
--accent-rgb: 15, 109, 126;
|
|
91
|
+
--on-accent-rgb: 255, 255, 255;
|
|
92
|
+
--accent-100: #eef7f8;
|
|
93
|
+
--accent-200: #d3e7eb;
|
|
94
|
+
--accent-300: #a8c3ca;
|
|
95
|
+
--accent-400: #629fac;
|
|
96
|
+
--accent-500: #3f93a1;
|
|
97
|
+
--accent-600: #278090;
|
|
98
|
+
--accent-700: #0d6271;
|
|
99
|
+
--accent-800: #0c5765;
|
|
100
|
+
--tint: #eef7f8;
|
|
101
|
+
--toggle-bg: #e9eded;
|
|
79
102
|
--danger: #a31919;
|
|
103
|
+
--success: #039855;
|
|
104
|
+
--success-bg: #e7f6ee;
|
|
105
|
+
--warning: #dc6803;
|
|
106
|
+
--warning-bg: #fef3e7;
|
|
80
107
|
--danger-bg: #fdeceb;
|
|
81
108
|
--danger-bg-hover: #f7d3cf;
|
|
82
109
|
--disabled-bg: #cdd6d8;
|
|
@@ -94,6 +121,16 @@
|
|
|
94
121
|
}
|
|
95
122
|
|
|
96
123
|
.chayns-theme--dark {
|
|
124
|
+
--grey-000: #000000;
|
|
125
|
+
--grey-001: #070707;
|
|
126
|
+
--grey-002: #191919;
|
|
127
|
+
--grey-003: #3f3f3f;
|
|
128
|
+
--grey-004: #666666;
|
|
129
|
+
--grey-005: #7f7f7f;
|
|
130
|
+
--grey-006: #999999;
|
|
131
|
+
--grey-007: #bfbfbf;
|
|
132
|
+
--grey-008: #e5e5e5;
|
|
133
|
+
--grey-009: #ffffff;
|
|
97
134
|
--page: #0e171b;
|
|
98
135
|
--surface: #16242a;
|
|
99
136
|
--surface-2: #101b20;
|
|
@@ -111,7 +148,22 @@
|
|
|
111
148
|
--accent-active: #3eaec4;
|
|
112
149
|
--on-accent: #0d161a;
|
|
113
150
|
--accent-rgb: 85, 191, 212;
|
|
151
|
+
--on-accent-rgb: 14, 23, 27;
|
|
152
|
+
--accent-100: #e2f7fa;
|
|
153
|
+
--accent-200: #caeff3;
|
|
154
|
+
--accent-300: #aee4ed;
|
|
155
|
+
--accent-400: #90d8e5;
|
|
156
|
+
--accent-500: #72cbdd;
|
|
157
|
+
--accent-600: #55bfd4;
|
|
158
|
+
--accent-700: #3eaec4;
|
|
159
|
+
--accent-800: #2f90a3;
|
|
160
|
+
--tint: #1a3138;
|
|
161
|
+
--toggle-bg: #22333a;
|
|
114
162
|
--danger: #ffb3ae;
|
|
163
|
+
--success: #32d583;
|
|
164
|
+
--success-bg: rgba(50, 213, 131, 0.22);
|
|
165
|
+
--warning: #fdb022;
|
|
166
|
+
--warning-bg: rgba(253, 176, 34, 0.22);
|
|
115
167
|
--danger-bg: rgba(249, 112, 102, 0.22);
|
|
116
168
|
--danger-bg-hover: rgba(249, 112, 102, 0.34);
|
|
117
169
|
--disabled-bg: #2d3f46;
|
package/package.json
CHANGED
|
@@ -75,6 +75,18 @@
|
|
|
75
75
|
"$extensions": { "chayns": { "cssName": "--ctrl-h" } }
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
|
+
"input": {
|
|
79
|
+
"padding-block": {
|
|
80
|
+
"$type": "string",
|
|
81
|
+
"$value": "calc(13 * var(--u))",
|
|
82
|
+
"$extensions": { "chayns": { "cssName": "--input-py" } }
|
|
83
|
+
},
|
|
84
|
+
"padding-inline": {
|
|
85
|
+
"$type": "string",
|
|
86
|
+
"$value": "calc(16 * var(--u))",
|
|
87
|
+
"$extensions": { "chayns": { "cssName": "--input-px" } }
|
|
88
|
+
}
|
|
89
|
+
},
|
|
78
90
|
"geometry": {
|
|
79
91
|
"icon": {
|
|
80
92
|
"$type": "string",
|
|
@@ -310,6 +322,56 @@
|
|
|
310
322
|
}
|
|
311
323
|
},
|
|
312
324
|
"color": {
|
|
325
|
+
"grey-000": {
|
|
326
|
+
"$type": "color",
|
|
327
|
+
"$value": "#ffffff",
|
|
328
|
+
"$extensions": { "chayns": { "cssName": "--grey-000", "dark": "#000000" } }
|
|
329
|
+
},
|
|
330
|
+
"grey-001": {
|
|
331
|
+
"$type": "color",
|
|
332
|
+
"$value": "#f7f7f7",
|
|
333
|
+
"$extensions": { "chayns": { "cssName": "--grey-001", "dark": "#070707" } }
|
|
334
|
+
},
|
|
335
|
+
"grey-002": {
|
|
336
|
+
"$type": "color",
|
|
337
|
+
"$value": "#e5e5e5",
|
|
338
|
+
"$extensions": { "chayns": { "cssName": "--grey-002", "dark": "#191919" } }
|
|
339
|
+
},
|
|
340
|
+
"grey-003": {
|
|
341
|
+
"$type": "color",
|
|
342
|
+
"$value": "#bfbfbf",
|
|
343
|
+
"$extensions": { "chayns": { "cssName": "--grey-003", "dark": "#3f3f3f" } }
|
|
344
|
+
},
|
|
345
|
+
"grey-004": {
|
|
346
|
+
"$type": "color",
|
|
347
|
+
"$value": "#999999",
|
|
348
|
+
"$extensions": { "chayns": { "cssName": "--grey-004", "dark": "#666666" } }
|
|
349
|
+
},
|
|
350
|
+
"grey-005": {
|
|
351
|
+
"$type": "color",
|
|
352
|
+
"$value": "#7f7f7f",
|
|
353
|
+
"$extensions": { "chayns": { "cssName": "--grey-005", "dark": "#7f7f7f" } }
|
|
354
|
+
},
|
|
355
|
+
"grey-006": {
|
|
356
|
+
"$type": "color",
|
|
357
|
+
"$value": "#666666",
|
|
358
|
+
"$extensions": { "chayns": { "cssName": "--grey-006", "dark": "#999999" } }
|
|
359
|
+
},
|
|
360
|
+
"grey-007": {
|
|
361
|
+
"$type": "color",
|
|
362
|
+
"$value": "#3f3f3f",
|
|
363
|
+
"$extensions": { "chayns": { "cssName": "--grey-007", "dark": "#bfbfbf" } }
|
|
364
|
+
},
|
|
365
|
+
"grey-008": {
|
|
366
|
+
"$type": "color",
|
|
367
|
+
"$value": "#191919",
|
|
368
|
+
"$extensions": { "chayns": { "cssName": "--grey-008", "dark": "#e5e5e5" } }
|
|
369
|
+
},
|
|
370
|
+
"grey-009": {
|
|
371
|
+
"$type": "color",
|
|
372
|
+
"$value": "#000000",
|
|
373
|
+
"$extensions": { "chayns": { "cssName": "--grey-009", "dark": "#ffffff" } }
|
|
374
|
+
},
|
|
313
375
|
"page": {
|
|
314
376
|
"$type": "color",
|
|
315
377
|
"$value": "#f4f6f6",
|
|
@@ -395,6 +457,61 @@
|
|
|
395
457
|
"$value": "15, 109, 126",
|
|
396
458
|
"$extensions": { "chayns": { "cssName": "--accent-rgb", "dark": "85, 191, 212" } }
|
|
397
459
|
},
|
|
460
|
+
"on-accent-rgb": {
|
|
461
|
+
"$type": "string",
|
|
462
|
+
"$value": "255, 255, 255",
|
|
463
|
+
"$extensions": { "chayns": { "cssName": "--on-accent-rgb", "dark": "14, 23, 27" } }
|
|
464
|
+
},
|
|
465
|
+
"accent-100": {
|
|
466
|
+
"$type": "color",
|
|
467
|
+
"$value": "#eef7f8",
|
|
468
|
+
"$extensions": { "chayns": { "cssName": "--accent-100", "dark": "#e2f7fa" } }
|
|
469
|
+
},
|
|
470
|
+
"accent-200": {
|
|
471
|
+
"$type": "color",
|
|
472
|
+
"$value": "#d3e7eb",
|
|
473
|
+
"$extensions": { "chayns": { "cssName": "--accent-200", "dark": "#caeff3" } }
|
|
474
|
+
},
|
|
475
|
+
"accent-300": {
|
|
476
|
+
"$type": "color",
|
|
477
|
+
"$value": "#a8c3ca",
|
|
478
|
+
"$extensions": { "chayns": { "cssName": "--accent-300", "dark": "#aee4ed" } }
|
|
479
|
+
},
|
|
480
|
+
"accent-400": {
|
|
481
|
+
"$type": "color",
|
|
482
|
+
"$value": "#629fac",
|
|
483
|
+
"$extensions": { "chayns": { "cssName": "--accent-400", "dark": "#90d8e5" } }
|
|
484
|
+
},
|
|
485
|
+
"accent-500": {
|
|
486
|
+
"$type": "color",
|
|
487
|
+
"$value": "#3f93a1",
|
|
488
|
+
"$extensions": { "chayns": { "cssName": "--accent-500", "dark": "#72cbdd" } }
|
|
489
|
+
},
|
|
490
|
+
"accent-600": {
|
|
491
|
+
"$type": "color",
|
|
492
|
+
"$value": "#278090",
|
|
493
|
+
"$extensions": { "chayns": { "cssName": "--accent-600", "dark": "#55bfd4" } }
|
|
494
|
+
},
|
|
495
|
+
"accent-700": {
|
|
496
|
+
"$type": "color",
|
|
497
|
+
"$value": "#0d6271",
|
|
498
|
+
"$extensions": { "chayns": { "cssName": "--accent-700", "dark": "#3eaec4" } }
|
|
499
|
+
},
|
|
500
|
+
"accent-800": {
|
|
501
|
+
"$type": "color",
|
|
502
|
+
"$value": "#0c5765",
|
|
503
|
+
"$extensions": { "chayns": { "cssName": "--accent-800", "dark": "#2f90a3" } }
|
|
504
|
+
},
|
|
505
|
+
"tint": {
|
|
506
|
+
"$type": "color",
|
|
507
|
+
"$value": "#eef7f8",
|
|
508
|
+
"$extensions": { "chayns": { "cssName": "--tint", "dark": "#1a3138" } }
|
|
509
|
+
},
|
|
510
|
+
"toggle-bg": {
|
|
511
|
+
"$type": "color",
|
|
512
|
+
"$value": "#e9eded",
|
|
513
|
+
"$extensions": { "chayns": { "cssName": "--toggle-bg", "dark": "#22333a" } }
|
|
514
|
+
},
|
|
398
515
|
"danger": {
|
|
399
516
|
"$type": "color",
|
|
400
517
|
"$value": "#a31919",
|
|
@@ -407,6 +524,30 @@
|
|
|
407
524
|
}
|
|
408
525
|
}
|
|
409
526
|
},
|
|
527
|
+
"success": {
|
|
528
|
+
"$type": "color",
|
|
529
|
+
"$value": "#039855",
|
|
530
|
+
"$extensions": { "chayns": { "cssName": "--success", "dark": "#32d583" } }
|
|
531
|
+
},
|
|
532
|
+
"success-background": {
|
|
533
|
+
"$type": "color",
|
|
534
|
+
"$value": "#e7f6ee",
|
|
535
|
+
"$extensions": {
|
|
536
|
+
"chayns": { "cssName": "--success-bg", "dark": "rgba(50, 213, 131, 0.22)" }
|
|
537
|
+
}
|
|
538
|
+
},
|
|
539
|
+
"warning": {
|
|
540
|
+
"$type": "color",
|
|
541
|
+
"$value": "#dc6803",
|
|
542
|
+
"$extensions": { "chayns": { "cssName": "--warning", "dark": "#fdb022" } }
|
|
543
|
+
},
|
|
544
|
+
"warning-background": {
|
|
545
|
+
"$type": "color",
|
|
546
|
+
"$value": "#fef3e7",
|
|
547
|
+
"$extensions": {
|
|
548
|
+
"chayns": { "cssName": "--warning-bg", "dark": "rgba(253, 176, 34, 0.22)" }
|
|
549
|
+
}
|
|
550
|
+
},
|
|
410
551
|
"danger-background": {
|
|
411
552
|
"$type": "color",
|
|
412
553
|
"$value": "#fdeceb",
|