@cas-smartdesign/design-tokens 1.7.1

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,1479 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>SmartDesign design tokens</title>
8
+ <style>.markdown-body {
9
+ box-sizing: border-box;
10
+ min-width: 200px;
11
+ max-width: 980px;
12
+ margin: 0 auto !important;
13
+ padding-bottom: 45px;
14
+ }
15
+
16
+ th,
17
+ td {
18
+ font-family: "Courier New", Courier, monospace;
19
+ height: 40px;
20
+ padding: 4px 8px;
21
+ }
22
+
23
+ th {
24
+ background: var(--color-base-grey-200);
25
+ }
26
+
27
+ .color-block {
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ }
32
+
33
+ .color-box {
34
+ width: 16px;
35
+ height: 16px;
36
+ display: inline-flex;
37
+ border: 1px solid var(--color-font-tertiary);
38
+ }
39
+
40
+ .color-block span {
41
+ margin-left: 4px;
42
+ }
43
+
44
+ :root {
45
+ --color-base-red-50: #ffeeef;
46
+ --color-base-red-100: #ffe2e5;
47
+ --color-base-red-150: #ffccd2;
48
+ --color-base-red-200: #ffb7bf;
49
+ --color-base-red-300: #ff97a3;
50
+ --color-base-red-400: #f96778;
51
+ --color-base-red-450: #f14558;
52
+ --color-base-red-500: #ea2138;
53
+ --color-base-red-600: #e2001a;
54
+ --color-base-red-700: #cc0017;
55
+ --color-base-red-800: #b50015;
56
+ --color-base-red-900: #9f0012;
57
+ --color-base-orange-50: #fff5ef;
58
+ --color-base-orange-100: #ffefe5;
59
+ --color-base-orange-150: #ffe3d1;
60
+ --color-base-orange-200: #ffd7be;
61
+ --color-base-orange-300: #ffc19b;
62
+ --color-base-orange-400: #ffa670;
63
+ --color-base-orange-450: #ff9250;
64
+ --color-base-orange-500: #ff7e30;
65
+ --color-base-orange-600: #ff6b11;
66
+ --color-base-orange-700: #e95f0c;
67
+ --color-base-orange-800: #d65404;
68
+ --color-base-orange-900: #bf4800;
69
+ --color-base-yellow-50: #fffaeb;
70
+ --color-base-yellow-100: #fff6de;
71
+ --color-base-yellow-150: #fff0cc;
72
+ --color-base-yellow-200: #ffeab6;
73
+ --color-base-yellow-300: #ffe39d;
74
+ --color-base-yellow-400: #ffd97b;
75
+ --color-base-yellow-450: #ffcf58;
76
+ --color-base-yellow-500: #ffc434;
77
+ --color-base-yellow-600: #ffbb11;
78
+ --color-base-yellow-700: #e9aa0c;
79
+ --color-base-yellow-800: #d69a04;
80
+ --color-base-yellow-900: #bf8800;
81
+ --color-base-green-50: #f6faec;
82
+ --color-base-green-100: #f0f7df;
83
+ --color-base-green-150: #e8f2d0;
84
+ --color-base-green-200: #deedbc;
85
+ --color-base-green-300: #cee49c;
86
+ --color-base-green-400: #bedb79;
87
+ --color-base-green-450: #add154;
88
+ --color-base-green-500: #9bc730;
89
+ --color-base-green-600: #8abd0c;
90
+ --color-base-green-700: #7baa0b;
91
+ --color-base-green-800: #6e970a;
92
+ --color-base-green-900: #618508;
93
+ --color-base-dark-green-50: #eaf4ec;
94
+ --color-base-dark-green-100: #dff2e3;
95
+ --color-base-dark-green-150: #ccecd3;
96
+ --color-base-dark-green-200: #b1dfbb;
97
+ --color-base-dark-green-300: #93d3a2;
98
+ --color-base-dark-green-400: #72c584;
99
+ --color-base-dark-green-450: #4cb563;
100
+ --color-base-dark-green-500: #26a642;
101
+ --color-base-dark-green-600: #009621;
102
+ --color-base-dark-green-700: #00871e;
103
+ --color-base-dark-green-800: #00781a;
104
+ --color-base-dark-green-900: #006917;
105
+ --color-base-cyan-50: #e3f0f5;
106
+ --color-base-cyan-100: #d5eff8;
107
+ --color-base-cyan-150: #c2e8f3;
108
+ --color-base-cyan-200: #aee0ef;
109
+ --color-base-cyan-300: #92d4e7;
110
+ --color-base-cyan-400: #70c7e0;
111
+ --color-base-cyan-450: #43b4d6;
112
+ --color-base-cyan-500: #19a3cb;
113
+ --color-base-cyan-600: #0099c5;
114
+ --color-base-cyan-700: #008ab2;
115
+ --color-base-cyan-800: #007a9e;
116
+ --color-base-cyan-900: #006b8a;
117
+ --color-base-blue-50: #e7f1fa;
118
+ --color-base-blue-100: #d6eeff;
119
+ --color-base-blue-150: #c7e7ff;
120
+ --color-base-blue-200: #b1deff;
121
+ --color-base-blue-300: #8ecfff;
122
+ --color-base-blue-400: #6ac0ff;
123
+ --color-base-blue-450: #4ab2ff;
124
+ --color-base-blue-500: #2ba4ff;
125
+ --color-base-blue-600: #0d98ff;
126
+ --color-base-blue-700: #0c88e6;
127
+ --color-base-blue-800: #0a77ca;
128
+ --color-base-blue-900: #0968af;
129
+ --color-base-dark-blue-50: #e1ebf6;
130
+ --color-base-dark-blue-100: #d3e6fa;
131
+ --color-base-dark-blue-150: #b9d7f5;
132
+ --color-base-dark-blue-200: #9bc6f2;
133
+ --color-base-dark-blue-300: #77afe7;
134
+ --color-base-dark-blue-400: #5198e0;
135
+ --color-base-dark-blue-450: #3a85d1;
136
+ --color-base-dark-blue-500: #2576c7;
137
+ --color-base-dark-blue-600: #1467ba;
138
+ --color-base-dark-blue-700: #125da8;
139
+ --color-base-dark-blue-800: #105295;
140
+ --color-base-dark-blue-900: #0e4883;
141
+ --color-base-pink-50: #fce6f3;
142
+ --color-base-pink-100: #fad5eb;
143
+ --color-base-pink-150: #f7bbdd;
144
+ --color-base-pink-200: #f2a1cf;
145
+ --color-base-pink-300: #ec78ba;
146
+ --color-base-pink-400: #e755a8;
147
+ --color-base-pink-450: #d94397;
148
+ --color-base-pink-500: #cc2f89;
149
+ --color-base-pink-600: #c41579;
150
+ --color-base-pink-700: #b4136e;
151
+ --color-base-pink-800: #a01163;
152
+ --color-base-pink-900: #8a0f55;
153
+ --color-base-purple-50: #f4e2f6;
154
+ --color-base-purple-100: #eccff0;
155
+ --color-base-purple-150: #dab2e0;
156
+ --color-base-purple-200: #c792cf;
157
+ --color-base-purple-300: #ab66b4;
158
+ --color-base-purple-400: #93459e;
159
+ --color-base-purple-450: #823591;
160
+ --color-base-purple-500: #772386;
161
+ --color-base-purple-600: #6c127b;
162
+ --color-base-purple-700: #5e106b;
163
+ --color-base-purple-800: #530d5e;
164
+ --color-base-purple-900: #450b4f;
165
+ --color-base-brown-50: #f2eae4;
166
+ --color-base-brown-100: #eadcd2;
167
+ --color-base-brown-150: #d8c4b3;
168
+ --color-base-brown-200: #bca38d;
169
+ --color-base-brown-300: #a08165;
170
+ --color-base-brown-400: #8b6747;
171
+ --color-base-brown-450: #755438;
172
+ --color-base-brown-500: #65472b;
173
+ --color-base-brown-600: #593b20;
174
+ --color-base-brown-700: #4f351d;
175
+ --color-base-brown-800: #462f1b;
176
+ --color-base-brown-900: #3f2915;
177
+ --color-base-grey-50: #f9f9f9;
178
+ --color-base-grey-100: #f3f3f3;
179
+ --color-base-grey-150: #eeeeee;
180
+ --color-base-grey-200: #e5e5e5;
181
+ --color-base-grey-300: #d9d9d9;
182
+ --color-base-grey-400: #cccccc;
183
+ --color-base-grey-450: #bbbbbb;
184
+ --color-base-grey-500: #aaaaaa;
185
+ --color-base-grey-600: #999999;
186
+ --color-base-grey-700: #777777;
187
+ --color-base-grey-800: #666666;
188
+ --color-base-grey-900: #555555;
189
+ --color-base-white: #ffffff;
190
+ --color-base-black: #111111;
191
+ --color-font-base: #111111;
192
+ --color-font-secondary: #555555;
193
+ --color-font-tertiary: #999999;
194
+ --color-font-warn: #555555;
195
+ --color-font-suggest: #bf8800;
196
+ --color-font-error: #cc0017;
197
+ --size-font-tiny: 12px;
198
+ --size-font-small: 13px;
199
+ --size-font-medium: 16px;
200
+ --size-font-large: 20px;
201
+ --size-font-xl: 24px;
202
+ --size-font-xxl: 32px;
203
+ --size-font-xxxl: 48px;
204
+ --size-font-base: 16px;
205
+ --font-family-base: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
206
+ --time-transition-short: 275ms;
207
+ --time-transition-base: 300ms;
208
+ --time-transition-long: 600ms;
209
+ --time-transition-xl: 1000ms;
210
+ }
211
+
212
+ /*light*/
213
+
214
+ .markdown-body {
215
+ -ms-text-size-adjust: 100%;
216
+ -webkit-text-size-adjust: 100%;
217
+ margin: 0;
218
+ color: #1F2328;
219
+ background-color: #ffffff;
220
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
221
+ font-size: 16px;
222
+ line-height: 1.5;
223
+ word-wrap: break-word;
224
+ }
225
+
226
+ .markdown-body .octicon {
227
+ display: inline-block;
228
+ fill: currentColor;
229
+ vertical-align: text-bottom;
230
+ }
231
+
232
+ .markdown-body h1:hover .anchor .octicon-link:before,
233
+ .markdown-body h2:hover .anchor .octicon-link:before,
234
+ .markdown-body h3:hover .anchor .octicon-link:before,
235
+ .markdown-body h4:hover .anchor .octicon-link:before,
236
+ .markdown-body h5:hover .anchor .octicon-link:before,
237
+ .markdown-body h6:hover .anchor .octicon-link:before {
238
+ width: 16px;
239
+ height: 16px;
240
+ content: ' ';
241
+ display: inline-block;
242
+ background-color: currentColor;
243
+ -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
244
+ mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
245
+ }
246
+
247
+ .markdown-body details,
248
+ .markdown-body figcaption,
249
+ .markdown-body figure {
250
+ display: block;
251
+ }
252
+
253
+ .markdown-body summary {
254
+ display: list-item;
255
+ }
256
+
257
+ .markdown-body [hidden] {
258
+ display: none !important;
259
+ }
260
+
261
+ .markdown-body a {
262
+ background-color: transparent;
263
+ color: #0969da;
264
+ text-decoration: none;
265
+ }
266
+
267
+ .markdown-body abbr[title] {
268
+ border-bottom: none;
269
+ -webkit-text-decoration: underline dotted;
270
+ text-decoration: underline dotted;
271
+ }
272
+
273
+ .markdown-body b,
274
+ .markdown-body strong {
275
+ font-weight: 600;
276
+ }
277
+
278
+ .markdown-body dfn {
279
+ font-style: italic;
280
+ }
281
+
282
+ .markdown-body h1 {
283
+ margin: .67em 0;
284
+ font-weight: 600;
285
+ padding-bottom: .3em;
286
+ font-size: 2em;
287
+ border-bottom: 1px solid hsla(210,18%,87%,1);
288
+ }
289
+
290
+ .markdown-body mark {
291
+ background-color: #fff8c5;
292
+ color: #1F2328;
293
+ }
294
+
295
+ .markdown-body small {
296
+ font-size: 90%;
297
+ }
298
+
299
+ .markdown-body sub,
300
+ .markdown-body sup {
301
+ font-size: 75%;
302
+ line-height: 0;
303
+ position: relative;
304
+ vertical-align: baseline;
305
+ }
306
+
307
+ .markdown-body sub {
308
+ bottom: -0.25em;
309
+ }
310
+
311
+ .markdown-body sup {
312
+ top: -0.5em;
313
+ }
314
+
315
+ .markdown-body img {
316
+ border-style: none;
317
+ max-width: 100%;
318
+ box-sizing: content-box;
319
+ background-color: #ffffff;
320
+ }
321
+
322
+ .markdown-body code,
323
+ .markdown-body kbd,
324
+ .markdown-body pre,
325
+ .markdown-body samp {
326
+ font-family: monospace;
327
+ font-size: 1em;
328
+ }
329
+
330
+ .markdown-body figure {
331
+ margin: 1em 40px;
332
+ }
333
+
334
+ .markdown-body hr {
335
+ box-sizing: content-box;
336
+ overflow: hidden;
337
+ background: transparent;
338
+ border-bottom: 1px solid hsla(210,18%,87%,1);
339
+ height: .25em;
340
+ padding: 0;
341
+ margin: 24px 0;
342
+ background-color: #d0d7de;
343
+ border: 0;
344
+ }
345
+
346
+ .markdown-body input {
347
+ font: inherit;
348
+ margin: 0;
349
+ overflow: visible;
350
+ font-family: inherit;
351
+ font-size: inherit;
352
+ line-height: inherit;
353
+ }
354
+
355
+ .markdown-body [type=button],
356
+ .markdown-body [type=reset],
357
+ .markdown-body [type=submit] {
358
+ -webkit-appearance: button;
359
+ appearance: button;
360
+ }
361
+
362
+ .markdown-body [type=checkbox],
363
+ .markdown-body [type=radio] {
364
+ box-sizing: border-box;
365
+ padding: 0;
366
+ }
367
+
368
+ .markdown-body [type=number]::-webkit-inner-spin-button,
369
+ .markdown-body [type=number]::-webkit-outer-spin-button {
370
+ height: auto;
371
+ }
372
+
373
+ .markdown-body [type=search]::-webkit-search-cancel-button,
374
+ .markdown-body [type=search]::-webkit-search-decoration {
375
+ -webkit-appearance: none;
376
+ appearance: none;
377
+ }
378
+
379
+ .markdown-body ::-webkit-input-placeholder {
380
+ color: inherit;
381
+ opacity: .54;
382
+ }
383
+
384
+ .markdown-body ::-webkit-file-upload-button {
385
+ -webkit-appearance: button;
386
+ appearance: button;
387
+ font: inherit;
388
+ }
389
+
390
+ .markdown-body a:hover {
391
+ text-decoration: underline;
392
+ }
393
+
394
+ .markdown-body ::placeholder {
395
+ color: #6e7781;
396
+ opacity: 1;
397
+ }
398
+
399
+ .markdown-body hr::before {
400
+ display: table;
401
+ content: "";
402
+ }
403
+
404
+ .markdown-body hr::after {
405
+ display: table;
406
+ clear: both;
407
+ content: "";
408
+ }
409
+
410
+ .markdown-body table {
411
+ border-spacing: 0;
412
+ border-collapse: collapse;
413
+ display: block;
414
+ width: max-content;
415
+ max-width: 100%;
416
+ overflow: auto;
417
+ }
418
+
419
+ .markdown-body td,
420
+ .markdown-body th {
421
+ padding: 0;
422
+ }
423
+
424
+ .markdown-body details summary {
425
+ cursor: pointer;
426
+ }
427
+
428
+ .markdown-body details:not([open])>*:not(summary) {
429
+ display: none !important;
430
+ }
431
+
432
+ .markdown-body a:focus,
433
+ .markdown-body [role=button]:focus,
434
+ .markdown-body input[type=radio]:focus,
435
+ .markdown-body input[type=checkbox]:focus {
436
+ outline: 2px solid #0969da;
437
+ outline-offset: -2px;
438
+ box-shadow: none;
439
+ }
440
+
441
+ .markdown-body a:focus:not(:focus-visible),
442
+ .markdown-body [role=button]:focus:not(:focus-visible),
443
+ .markdown-body input[type=radio]:focus:not(:focus-visible),
444
+ .markdown-body input[type=checkbox]:focus:not(:focus-visible) {
445
+ outline: solid 1px transparent;
446
+ }
447
+
448
+ .markdown-body a:focus-visible,
449
+ .markdown-body [role=button]:focus-visible,
450
+ .markdown-body input[type=radio]:focus-visible,
451
+ .markdown-body input[type=checkbox]:focus-visible {
452
+ outline: 2px solid #0969da;
453
+ outline-offset: -2px;
454
+ box-shadow: none;
455
+ }
456
+
457
+ .markdown-body a:not([class]):focus,
458
+ .markdown-body a:not([class]):focus-visible,
459
+ .markdown-body input[type=radio]:focus,
460
+ .markdown-body input[type=radio]:focus-visible,
461
+ .markdown-body input[type=checkbox]:focus,
462
+ .markdown-body input[type=checkbox]:focus-visible {
463
+ outline-offset: 0;
464
+ }
465
+
466
+ .markdown-body kbd {
467
+ display: inline-block;
468
+ padding: 3px 5px;
469
+ font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
470
+ line-height: 10px;
471
+ color: #1F2328;
472
+ vertical-align: middle;
473
+ background-color: #f6f8fa;
474
+ border: solid 1px rgba(175,184,193,0.2);
475
+ border-bottom-color: rgba(175,184,193,0.2);
476
+ border-radius: 6px;
477
+ box-shadow: inset 0 -1px 0 rgba(175,184,193,0.2);
478
+ }
479
+
480
+ .markdown-body h1,
481
+ .markdown-body h2,
482
+ .markdown-body h3,
483
+ .markdown-body h4,
484
+ .markdown-body h5,
485
+ .markdown-body h6 {
486
+ margin-top: 24px;
487
+ margin-bottom: 16px;
488
+ font-weight: 600;
489
+ line-height: 1.25;
490
+ }
491
+
492
+ .markdown-body h2 {
493
+ font-weight: 600;
494
+ padding-bottom: .3em;
495
+ font-size: 1.5em;
496
+ border-bottom: 1px solid hsla(210,18%,87%,1);
497
+ }
498
+
499
+ .markdown-body h3 {
500
+ font-weight: 600;
501
+ font-size: 1.25em;
502
+ }
503
+
504
+ .markdown-body h4 {
505
+ font-weight: 600;
506
+ font-size: 1em;
507
+ }
508
+
509
+ .markdown-body h5 {
510
+ font-weight: 600;
511
+ font-size: .875em;
512
+ }
513
+
514
+ .markdown-body h6 {
515
+ font-weight: 600;
516
+ font-size: .85em;
517
+ color: #656d76;
518
+ }
519
+
520
+ .markdown-body p {
521
+ margin-top: 0;
522
+ margin-bottom: 10px;
523
+ }
524
+
525
+ .markdown-body blockquote {
526
+ margin: 0;
527
+ padding: 0 1em;
528
+ color: #656d76;
529
+ border-left: .25em solid #d0d7de;
530
+ }
531
+
532
+ .markdown-body ul,
533
+ .markdown-body ol {
534
+ margin-top: 0;
535
+ margin-bottom: 0;
536
+ padding-left: 2em;
537
+ }
538
+
539
+ .markdown-body ol ol,
540
+ .markdown-body ul ol {
541
+ list-style-type: lower-roman;
542
+ }
543
+
544
+ .markdown-body ul ul ol,
545
+ .markdown-body ul ol ol,
546
+ .markdown-body ol ul ol,
547
+ .markdown-body ol ol ol {
548
+ list-style-type: lower-alpha;
549
+ }
550
+
551
+ .markdown-body dd {
552
+ margin-left: 0;
553
+ }
554
+
555
+ .markdown-body tt,
556
+ .markdown-body code,
557
+ .markdown-body samp {
558
+ font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
559
+ font-size: 12px;
560
+ }
561
+
562
+ .markdown-body pre {
563
+ margin-top: 0;
564
+ margin-bottom: 0;
565
+ font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
566
+ font-size: 12px;
567
+ word-wrap: normal;
568
+ }
569
+
570
+ .markdown-body .octicon {
571
+ display: inline-block;
572
+ overflow: visible !important;
573
+ vertical-align: text-bottom;
574
+ fill: currentColor;
575
+ }
576
+
577
+ .markdown-body input::-webkit-outer-spin-button,
578
+ .markdown-body input::-webkit-inner-spin-button {
579
+ margin: 0;
580
+ -webkit-appearance: none;
581
+ appearance: none;
582
+ }
583
+
584
+ .markdown-body .mr-2 {
585
+ margin-right: 8px !important;
586
+ }
587
+
588
+ .markdown-body::before {
589
+ display: table;
590
+ content: "";
591
+ }
592
+
593
+ .markdown-body::after {
594
+ display: table;
595
+ clear: both;
596
+ content: "";
597
+ }
598
+
599
+ .markdown-body>*:first-child {
600
+ margin-top: 0 !important;
601
+ }
602
+
603
+ .markdown-body>*:last-child {
604
+ margin-bottom: 0 !important;
605
+ }
606
+
607
+ .markdown-body a:not([href]) {
608
+ color: inherit;
609
+ text-decoration: none;
610
+ }
611
+
612
+ .markdown-body .absent {
613
+ color: #d1242f;
614
+ }
615
+
616
+ .markdown-body .anchor {
617
+ float: left;
618
+ padding-right: 4px;
619
+ margin-left: -20px;
620
+ line-height: 1;
621
+ }
622
+
623
+ .markdown-body .anchor:focus {
624
+ outline: none;
625
+ }
626
+
627
+ .markdown-body p,
628
+ .markdown-body blockquote,
629
+ .markdown-body ul,
630
+ .markdown-body ol,
631
+ .markdown-body dl,
632
+ .markdown-body table,
633
+ .markdown-body pre,
634
+ .markdown-body details {
635
+ margin-top: 0;
636
+ margin-bottom: 16px;
637
+ }
638
+
639
+ .markdown-body blockquote>:first-child {
640
+ margin-top: 0;
641
+ }
642
+
643
+ .markdown-body blockquote>:last-child {
644
+ margin-bottom: 0;
645
+ }
646
+
647
+ .markdown-body h1 .octicon-link,
648
+ .markdown-body h2 .octicon-link,
649
+ .markdown-body h3 .octicon-link,
650
+ .markdown-body h4 .octicon-link,
651
+ .markdown-body h5 .octicon-link,
652
+ .markdown-body h6 .octicon-link {
653
+ color: #1F2328;
654
+ vertical-align: middle;
655
+ visibility: hidden;
656
+ }
657
+
658
+ .markdown-body h1:hover .anchor,
659
+ .markdown-body h2:hover .anchor,
660
+ .markdown-body h3:hover .anchor,
661
+ .markdown-body h4:hover .anchor,
662
+ .markdown-body h5:hover .anchor,
663
+ .markdown-body h6:hover .anchor {
664
+ text-decoration: none;
665
+ }
666
+
667
+ .markdown-body h1:hover .anchor .octicon-link,
668
+ .markdown-body h2:hover .anchor .octicon-link,
669
+ .markdown-body h3:hover .anchor .octicon-link,
670
+ .markdown-body h4:hover .anchor .octicon-link,
671
+ .markdown-body h5:hover .anchor .octicon-link,
672
+ .markdown-body h6:hover .anchor .octicon-link {
673
+ visibility: visible;
674
+ }
675
+
676
+ .markdown-body h1 tt,
677
+ .markdown-body h1 code,
678
+ .markdown-body h2 tt,
679
+ .markdown-body h2 code,
680
+ .markdown-body h3 tt,
681
+ .markdown-body h3 code,
682
+ .markdown-body h4 tt,
683
+ .markdown-body h4 code,
684
+ .markdown-body h5 tt,
685
+ .markdown-body h5 code,
686
+ .markdown-body h6 tt,
687
+ .markdown-body h6 code {
688
+ padding: 0 .2em;
689
+ font-size: inherit;
690
+ }
691
+
692
+ .markdown-body summary h1,
693
+ .markdown-body summary h2,
694
+ .markdown-body summary h3,
695
+ .markdown-body summary h4,
696
+ .markdown-body summary h5,
697
+ .markdown-body summary h6 {
698
+ display: inline-block;
699
+ }
700
+
701
+ .markdown-body summary h1 .anchor,
702
+ .markdown-body summary h2 .anchor,
703
+ .markdown-body summary h3 .anchor,
704
+ .markdown-body summary h4 .anchor,
705
+ .markdown-body summary h5 .anchor,
706
+ .markdown-body summary h6 .anchor {
707
+ margin-left: -40px;
708
+ }
709
+
710
+ .markdown-body summary h1,
711
+ .markdown-body summary h2 {
712
+ padding-bottom: 0;
713
+ border-bottom: 0;
714
+ }
715
+
716
+ .markdown-body ul.no-list,
717
+ .markdown-body ol.no-list {
718
+ padding: 0;
719
+ list-style-type: none;
720
+ }
721
+
722
+ .markdown-body ol[type="a s"] {
723
+ list-style-type: lower-alpha;
724
+ }
725
+
726
+ .markdown-body ol[type="A s"] {
727
+ list-style-type: upper-alpha;
728
+ }
729
+
730
+ .markdown-body ol[type="i s"] {
731
+ list-style-type: lower-roman;
732
+ }
733
+
734
+ .markdown-body ol[type="I s"] {
735
+ list-style-type: upper-roman;
736
+ }
737
+
738
+ .markdown-body ol[type="1"] {
739
+ list-style-type: decimal;
740
+ }
741
+
742
+ .markdown-body div>ol:not([type]) {
743
+ list-style-type: decimal;
744
+ }
745
+
746
+ .markdown-body ul ul,
747
+ .markdown-body ul ol,
748
+ .markdown-body ol ol,
749
+ .markdown-body ol ul {
750
+ margin-top: 0;
751
+ margin-bottom: 0;
752
+ }
753
+
754
+ .markdown-body li>p {
755
+ margin-top: 16px;
756
+ }
757
+
758
+ .markdown-body li+li {
759
+ margin-top: .25em;
760
+ }
761
+
762
+ .markdown-body dl {
763
+ padding: 0;
764
+ }
765
+
766
+ .markdown-body dl dt {
767
+ padding: 0;
768
+ margin-top: 16px;
769
+ font-size: 1em;
770
+ font-style: italic;
771
+ font-weight: 600;
772
+ }
773
+
774
+ .markdown-body dl dd {
775
+ padding: 0 16px;
776
+ margin-bottom: 16px;
777
+ }
778
+
779
+ .markdown-body table th {
780
+ font-weight: 600;
781
+ }
782
+
783
+ .markdown-body table th,
784
+ .markdown-body table td {
785
+ padding: 6px 13px;
786
+ border: 1px solid #d0d7de;
787
+ }
788
+
789
+ .markdown-body table td>:last-child {
790
+ margin-bottom: 0;
791
+ }
792
+
793
+ .markdown-body table tr {
794
+ background-color: #ffffff;
795
+ border-top: 1px solid hsla(210,18%,87%,1);
796
+ }
797
+
798
+ .markdown-body table tr:nth-child(2n) {
799
+ background-color: #f6f8fa;
800
+ }
801
+
802
+ .markdown-body table img {
803
+ background-color: transparent;
804
+ }
805
+
806
+ .markdown-body img[align=right] {
807
+ padding-left: 20px;
808
+ }
809
+
810
+ .markdown-body img[align=left] {
811
+ padding-right: 20px;
812
+ }
813
+
814
+ .markdown-body .emoji {
815
+ max-width: none;
816
+ vertical-align: text-top;
817
+ background-color: transparent;
818
+ }
819
+
820
+ .markdown-body span.frame {
821
+ display: block;
822
+ overflow: hidden;
823
+ }
824
+
825
+ .markdown-body span.frame>span {
826
+ display: block;
827
+ float: left;
828
+ width: auto;
829
+ padding: 7px;
830
+ margin: 13px 0 0;
831
+ overflow: hidden;
832
+ border: 1px solid #d0d7de;
833
+ }
834
+
835
+ .markdown-body span.frame span img {
836
+ display: block;
837
+ float: left;
838
+ }
839
+
840
+ .markdown-body span.frame span span {
841
+ display: block;
842
+ padding: 5px 0 0;
843
+ clear: both;
844
+ color: #1F2328;
845
+ }
846
+
847
+ .markdown-body span.align-center {
848
+ display: block;
849
+ overflow: hidden;
850
+ clear: both;
851
+ }
852
+
853
+ .markdown-body span.align-center>span {
854
+ display: block;
855
+ margin: 13px auto 0;
856
+ overflow: hidden;
857
+ text-align: center;
858
+ }
859
+
860
+ .markdown-body span.align-center span img {
861
+ margin: 0 auto;
862
+ text-align: center;
863
+ }
864
+
865
+ .markdown-body span.align-right {
866
+ display: block;
867
+ overflow: hidden;
868
+ clear: both;
869
+ }
870
+
871
+ .markdown-body span.align-right>span {
872
+ display: block;
873
+ margin: 13px 0 0;
874
+ overflow: hidden;
875
+ text-align: right;
876
+ }
877
+
878
+ .markdown-body span.align-right span img {
879
+ margin: 0;
880
+ text-align: right;
881
+ }
882
+
883
+ .markdown-body span.float-left {
884
+ display: block;
885
+ float: left;
886
+ margin-right: 13px;
887
+ overflow: hidden;
888
+ }
889
+
890
+ .markdown-body span.float-left span {
891
+ margin: 13px 0 0;
892
+ }
893
+
894
+ .markdown-body span.float-right {
895
+ display: block;
896
+ float: right;
897
+ margin-left: 13px;
898
+ overflow: hidden;
899
+ }
900
+
901
+ .markdown-body span.float-right>span {
902
+ display: block;
903
+ margin: 13px auto 0;
904
+ overflow: hidden;
905
+ text-align: right;
906
+ }
907
+
908
+ .markdown-body code,
909
+ .markdown-body tt {
910
+ padding: .2em .4em;
911
+ margin: 0;
912
+ font-size: 85%;
913
+ white-space: break-spaces;
914
+ background-color: rgba(175,184,193,0.2);
915
+ border-radius: 6px;
916
+ }
917
+
918
+ .markdown-body code br,
919
+ .markdown-body tt br {
920
+ display: none;
921
+ }
922
+
923
+ .markdown-body del code {
924
+ text-decoration: inherit;
925
+ }
926
+
927
+ .markdown-body samp {
928
+ font-size: 85%;
929
+ }
930
+
931
+ .markdown-body pre code {
932
+ font-size: 100%;
933
+ }
934
+
935
+ .markdown-body pre>code {
936
+ padding: 0;
937
+ margin: 0;
938
+ word-break: normal;
939
+ white-space: pre;
940
+ background: transparent;
941
+ border: 0;
942
+ }
943
+
944
+ .markdown-body .highlight {
945
+ margin-bottom: 16px;
946
+ }
947
+
948
+ .markdown-body .highlight pre {
949
+ margin-bottom: 0;
950
+ word-break: normal;
951
+ }
952
+
953
+ .markdown-body .highlight pre,
954
+ .markdown-body pre {
955
+ padding: 16px;
956
+ overflow: auto;
957
+ font-size: 85%;
958
+ line-height: 1.45;
959
+ color: #1F2328;
960
+ background-color: #f6f8fa;
961
+ border-radius: 6px;
962
+ }
963
+
964
+ .markdown-body pre code,
965
+ .markdown-body pre tt {
966
+ display: inline;
967
+ max-width: auto;
968
+ padding: 0;
969
+ margin: 0;
970
+ overflow: visible;
971
+ line-height: inherit;
972
+ word-wrap: normal;
973
+ background-color: transparent;
974
+ border: 0;
975
+ }
976
+
977
+ .markdown-body .csv-data td,
978
+ .markdown-body .csv-data th {
979
+ padding: 5px;
980
+ overflow: hidden;
981
+ font-size: 12px;
982
+ line-height: 1;
983
+ text-align: left;
984
+ white-space: nowrap;
985
+ }
986
+
987
+ .markdown-body .csv-data .blob-num {
988
+ padding: 10px 8px 9px;
989
+ text-align: right;
990
+ background: #ffffff;
991
+ border: 0;
992
+ }
993
+
994
+ .markdown-body .csv-data tr {
995
+ border-top: 0;
996
+ }
997
+
998
+ .markdown-body .csv-data th {
999
+ font-weight: 600;
1000
+ background: #f6f8fa;
1001
+ border-top: 0;
1002
+ }
1003
+
1004
+ .markdown-body [data-footnote-ref]::before {
1005
+ content: "[";
1006
+ }
1007
+
1008
+ .markdown-body [data-footnote-ref]::after {
1009
+ content: "]";
1010
+ }
1011
+
1012
+ .markdown-body .footnotes {
1013
+ font-size: 12px;
1014
+ color: #656d76;
1015
+ border-top: 1px solid #d0d7de;
1016
+ }
1017
+
1018
+ .markdown-body .footnotes ol {
1019
+ padding-left: 16px;
1020
+ }
1021
+
1022
+ .markdown-body .footnotes ol ul {
1023
+ display: inline-block;
1024
+ padding-left: 16px;
1025
+ margin-top: 16px;
1026
+ }
1027
+
1028
+ .markdown-body .footnotes li {
1029
+ position: relative;
1030
+ }
1031
+
1032
+ .markdown-body .footnotes li:target::before {
1033
+ position: absolute;
1034
+ top: -8px;
1035
+ right: -8px;
1036
+ bottom: -8px;
1037
+ left: -24px;
1038
+ pointer-events: none;
1039
+ content: "";
1040
+ border: 2px solid #0969da;
1041
+ border-radius: 6px;
1042
+ }
1043
+
1044
+ .markdown-body .footnotes li:target {
1045
+ color: #1F2328;
1046
+ }
1047
+
1048
+ .markdown-body .footnotes .data-footnote-backref g-emoji {
1049
+ font-family: monospace;
1050
+ }
1051
+
1052
+ .markdown-body .pl-c {
1053
+ color: #57606a;
1054
+ }
1055
+
1056
+ .markdown-body .pl-c1,
1057
+ .markdown-body .pl-s .pl-v {
1058
+ color: #0550ae;
1059
+ }
1060
+
1061
+ .markdown-body .pl-e,
1062
+ .markdown-body .pl-en {
1063
+ color: #6639ba;
1064
+ }
1065
+
1066
+ .markdown-body .pl-smi,
1067
+ .markdown-body .pl-s .pl-s1 {
1068
+ color: #24292f;
1069
+ }
1070
+
1071
+ .markdown-body .pl-ent {
1072
+ color: #116329;
1073
+ }
1074
+
1075
+ .markdown-body .pl-k {
1076
+ color: #cf222e;
1077
+ }
1078
+
1079
+ .markdown-body .pl-s,
1080
+ .markdown-body .pl-pds,
1081
+ .markdown-body .pl-s .pl-pse .pl-s1,
1082
+ .markdown-body .pl-sr,
1083
+ .markdown-body .pl-sr .pl-cce,
1084
+ .markdown-body .pl-sr .pl-sre,
1085
+ .markdown-body .pl-sr .pl-sra {
1086
+ color: #0a3069;
1087
+ }
1088
+
1089
+ .markdown-body .pl-v,
1090
+ .markdown-body .pl-smw {
1091
+ color: #953800;
1092
+ }
1093
+
1094
+ .markdown-body .pl-bu {
1095
+ color: #82071e;
1096
+ }
1097
+
1098
+ .markdown-body .pl-ii {
1099
+ color: #f6f8fa;
1100
+ background-color: #82071e;
1101
+ }
1102
+
1103
+ .markdown-body .pl-c2 {
1104
+ color: #f6f8fa;
1105
+ background-color: #cf222e;
1106
+ }
1107
+
1108
+ .markdown-body .pl-sr .pl-cce {
1109
+ font-weight: bold;
1110
+ color: #116329;
1111
+ }
1112
+
1113
+ .markdown-body .pl-ml {
1114
+ color: #3b2300;
1115
+ }
1116
+
1117
+ .markdown-body .pl-mh,
1118
+ .markdown-body .pl-mh .pl-en,
1119
+ .markdown-body .pl-ms {
1120
+ font-weight: bold;
1121
+ color: #0550ae;
1122
+ }
1123
+
1124
+ .markdown-body .pl-mi {
1125
+ font-style: italic;
1126
+ color: #24292f;
1127
+ }
1128
+
1129
+ .markdown-body .pl-mb {
1130
+ font-weight: bold;
1131
+ color: #24292f;
1132
+ }
1133
+
1134
+ .markdown-body .pl-md {
1135
+ color: #82071e;
1136
+ background-color: #ffebe9;
1137
+ }
1138
+
1139
+ .markdown-body .pl-mi1 {
1140
+ color: #116329;
1141
+ background-color: #dafbe1;
1142
+ }
1143
+
1144
+ .markdown-body .pl-mc {
1145
+ color: #953800;
1146
+ background-color: #ffd8b5;
1147
+ }
1148
+
1149
+ .markdown-body .pl-mi2 {
1150
+ color: #eaeef2;
1151
+ background-color: #0550ae;
1152
+ }
1153
+
1154
+ .markdown-body .pl-mdr {
1155
+ font-weight: bold;
1156
+ color: #8250df;
1157
+ }
1158
+
1159
+ .markdown-body .pl-ba {
1160
+ color: #57606a;
1161
+ }
1162
+
1163
+ .markdown-body .pl-sg {
1164
+ color: #8c959f;
1165
+ }
1166
+
1167
+ .markdown-body .pl-corl {
1168
+ text-decoration: underline;
1169
+ color: #0a3069;
1170
+ }
1171
+
1172
+ .markdown-body g-emoji {
1173
+ display: inline-block;
1174
+ min-width: 1ch;
1175
+ font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
1176
+ font-size: 1em;
1177
+ font-style: normal !important;
1178
+ font-weight: 400;
1179
+ line-height: 1;
1180
+ vertical-align: -0.075em;
1181
+ }
1182
+
1183
+ .markdown-body g-emoji img {
1184
+ width: 1em;
1185
+ height: 1em;
1186
+ }
1187
+
1188
+ .markdown-body .task-list-item {
1189
+ list-style-type: none;
1190
+ }
1191
+
1192
+ .markdown-body .task-list-item label {
1193
+ font-weight: 400;
1194
+ }
1195
+
1196
+ .markdown-body .task-list-item.enabled label {
1197
+ cursor: pointer;
1198
+ }
1199
+
1200
+ .markdown-body .task-list-item+.task-list-item {
1201
+ margin-top: 4px;
1202
+ }
1203
+
1204
+ .markdown-body .task-list-item .handle {
1205
+ display: none;
1206
+ }
1207
+
1208
+ .markdown-body .task-list-item-checkbox {
1209
+ margin: 0 .2em .25em -1.4em;
1210
+ vertical-align: middle;
1211
+ }
1212
+
1213
+ .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
1214
+ margin: 0 -1.6em .25em .2em;
1215
+ }
1216
+
1217
+ .markdown-body .contains-task-list {
1218
+ position: relative;
1219
+ }
1220
+
1221
+ .markdown-body .contains-task-list:hover .task-list-item-convert-container,
1222
+ .markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
1223
+ display: block;
1224
+ width: auto;
1225
+ height: 24px;
1226
+ overflow: visible;
1227
+ clip: auto;
1228
+ }
1229
+
1230
+ .markdown-body ::-webkit-calendar-picker-indicator {
1231
+ filter: invert(50%);
1232
+ }
1233
+
1234
+ .markdown-body .markdown-alert {
1235
+ padding: 8px 16px;
1236
+ margin-bottom: 16px;
1237
+ color: inherit;
1238
+ border-left: .25em solid #d0d7de;
1239
+ }
1240
+
1241
+ .markdown-body .markdown-alert>:first-child {
1242
+ margin-top: 0;
1243
+ }
1244
+
1245
+ .markdown-body .markdown-alert>:last-child {
1246
+ margin-bottom: 0;
1247
+ }
1248
+
1249
+ .markdown-body .markdown-alert .markdown-alert-title {
1250
+ display: flex;
1251
+ font-weight: 500;
1252
+ align-items: center;
1253
+ line-height: 1;
1254
+ }
1255
+
1256
+ .markdown-body .markdown-alert.markdown-alert-note {
1257
+ border-left-color: #0969da;
1258
+ }
1259
+
1260
+ .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
1261
+ color: #0969da;
1262
+ }
1263
+
1264
+ .markdown-body .markdown-alert.markdown-alert-important {
1265
+ border-left-color: #8250df;
1266
+ }
1267
+
1268
+ .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
1269
+ color: #8250df;
1270
+ }
1271
+
1272
+ .markdown-body .markdown-alert.markdown-alert-warning {
1273
+ border-left-color: #9a6700;
1274
+ }
1275
+
1276
+ .markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
1277
+ color: #9a6700;
1278
+ }
1279
+
1280
+ .markdown-body .markdown-alert.markdown-alert-tip {
1281
+ border-left-color: #1f883d;
1282
+ }
1283
+
1284
+ .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
1285
+ color: #1a7f37;
1286
+ }
1287
+
1288
+ .markdown-body .markdown-alert.markdown-alert-caution {
1289
+ border-left-color: #cf222e;
1290
+ }
1291
+
1292
+ .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
1293
+ color: #d1242f;
1294
+ }
1295
+ </style>
1296
+ </head>
1297
+ <body>
1298
+ <div class="markdown-body">
1299
+ <div id="markdown-container"><h1>@cas-smartdesign/design-tokens</h1>
1300
+ <p>A shared package providing design tokens to create SmartDesign like components and apps.</p>
1301
+ <h2>Entry points and bundles</h2>
1302
+ <p>The design tokens are provided as</p>
1303
+ <ul>
1304
+ <li>JSON</li>
1305
+ <li>JavaScript module (commonjs, es6)</li>
1306
+ <li>CSS Variables</li>
1307
+ </ul>
1308
+ <h2>Tokens</h2>
1309
+ </div>
1310
+ <table>
1311
+ <tr><th colspan="3">color</th></tr><tr><th>name</th><th>css variable</th><th>value</th></tr><tr><td><span>color-base-red-50</span></td><td><span>--color-base-red-50</span></td><td><div class="color-block"><div class="color-box" style="background: #ffeeef"></div><span>#FFEEEF</span></div></td></tr>
1312
+ <tr><td><span>color-base-red-100</span></td><td><span>--color-base-red-100</span></td><td><div class="color-block"><div class="color-box" style="background: #ffe2e5"></div><span>#FFE2E5</span></div></td></tr>
1313
+ <tr><td><span>color-base-red-150</span></td><td><span>--color-base-red-150</span></td><td><div class="color-block"><div class="color-box" style="background: #ffccd2"></div><span>#FFCCD2</span></div></td></tr>
1314
+ <tr><td><span>color-base-red-200</span></td><td><span>--color-base-red-200</span></td><td><div class="color-block"><div class="color-box" style="background: #ffb7bf"></div><span>#FFB7BF</span></div></td></tr>
1315
+ <tr><td><span>color-base-red-300</span></td><td><span>--color-base-red-300</span></td><td><div class="color-block"><div class="color-box" style="background: #ff97a3"></div><span>#FF97A3</span></div></td></tr>
1316
+ <tr><td><span>color-base-red-400</span></td><td><span>--color-base-red-400</span></td><td><div class="color-block"><div class="color-box" style="background: #f96778"></div><span>#F96778</span></div></td></tr>
1317
+ <tr><td><span>color-base-red-450</span></td><td><span>--color-base-red-450</span></td><td><div class="color-block"><div class="color-box" style="background: #f14558"></div><span>#F14558</span></div></td></tr>
1318
+ <tr><td><span>color-base-red-500</span></td><td><span>--color-base-red-500</span></td><td><div class="color-block"><div class="color-box" style="background: #ea2138"></div><span>#EA2138</span></div></td></tr>
1319
+ <tr><td><span>color-base-red-600</span></td><td><span>--color-base-red-600</span></td><td><div class="color-block"><div class="color-box" style="background: #e2001a"></div><span>#E2001A</span></div></td></tr>
1320
+ <tr><td><span>color-base-red-700</span></td><td><span>--color-base-red-700</span></td><td><div class="color-block"><div class="color-box" style="background: #cc0017"></div><span>#CC0017</span></div></td></tr>
1321
+ <tr><td><span>color-base-red-800</span></td><td><span>--color-base-red-800</span></td><td><div class="color-block"><div class="color-box" style="background: #b50015"></div><span>#B50015</span></div></td></tr>
1322
+ <tr><td><span>color-base-red-900</span></td><td><span>--color-base-red-900</span></td><td><div class="color-block"><div class="color-box" style="background: #9f0012"></div><span>#9F0012</span></div></td></tr>
1323
+ <tr><td><span>color-base-orange-50</span></td><td><span>--color-base-orange-50</span></td><td><div class="color-block"><div class="color-box" style="background: #fff5ef"></div><span>#FFF5EF</span></div></td></tr>
1324
+ <tr><td><span>color-base-orange-100</span></td><td><span>--color-base-orange-100</span></td><td><div class="color-block"><div class="color-box" style="background: #ffefe5"></div><span>#FFEFE5</span></div></td></tr>
1325
+ <tr><td><span>color-base-orange-150</span></td><td><span>--color-base-orange-150</span></td><td><div class="color-block"><div class="color-box" style="background: #ffe3d1"></div><span>#FFE3D1</span></div></td></tr>
1326
+ <tr><td><span>color-base-orange-200</span></td><td><span>--color-base-orange-200</span></td><td><div class="color-block"><div class="color-box" style="background: #ffd7be"></div><span>#FFD7BE</span></div></td></tr>
1327
+ <tr><td><span>color-base-orange-300</span></td><td><span>--color-base-orange-300</span></td><td><div class="color-block"><div class="color-box" style="background: #ffc19b"></div><span>#FFC19B</span></div></td></tr>
1328
+ <tr><td><span>color-base-orange-400</span></td><td><span>--color-base-orange-400</span></td><td><div class="color-block"><div class="color-box" style="background: #ffa670"></div><span>#FFA670</span></div></td></tr>
1329
+ <tr><td><span>color-base-orange-450</span></td><td><span>--color-base-orange-450</span></td><td><div class="color-block"><div class="color-box" style="background: #ff9250"></div><span>#FF9250</span></div></td></tr>
1330
+ <tr><td><span>color-base-orange-500</span></td><td><span>--color-base-orange-500</span></td><td><div class="color-block"><div class="color-box" style="background: #ff7e30"></div><span>#FF7E30</span></div></td></tr>
1331
+ <tr><td><span>color-base-orange-600</span></td><td><span>--color-base-orange-600</span></td><td><div class="color-block"><div class="color-box" style="background: #ff6b11"></div><span>#FF6B11</span></div></td></tr>
1332
+ <tr><td><span>color-base-orange-700</span></td><td><span>--color-base-orange-700</span></td><td><div class="color-block"><div class="color-box" style="background: #e95f0c"></div><span>#E95F0C</span></div></td></tr>
1333
+ <tr><td><span>color-base-orange-800</span></td><td><span>--color-base-orange-800</span></td><td><div class="color-block"><div class="color-box" style="background: #d65404"></div><span>#D65404</span></div></td></tr>
1334
+ <tr><td><span>color-base-orange-900</span></td><td><span>--color-base-orange-900</span></td><td><div class="color-block"><div class="color-box" style="background: #bf4800"></div><span>#BF4800</span></div></td></tr>
1335
+ <tr><td><span>color-base-yellow-50</span></td><td><span>--color-base-yellow-50</span></td><td><div class="color-block"><div class="color-box" style="background: #fffaeb"></div><span>#FFFAEB</span></div></td></tr>
1336
+ <tr><td><span>color-base-yellow-100</span></td><td><span>--color-base-yellow-100</span></td><td><div class="color-block"><div class="color-box" style="background: #fff6de"></div><span>#FFF6DE</span></div></td></tr>
1337
+ <tr><td><span>color-base-yellow-150</span></td><td><span>--color-base-yellow-150</span></td><td><div class="color-block"><div class="color-box" style="background: #fff0cc"></div><span>#FFF0CC</span></div></td></tr>
1338
+ <tr><td><span>color-base-yellow-200</span></td><td><span>--color-base-yellow-200</span></td><td><div class="color-block"><div class="color-box" style="background: #ffeab6"></div><span>#FFEAB6</span></div></td></tr>
1339
+ <tr><td><span>color-base-yellow-300</span></td><td><span>--color-base-yellow-300</span></td><td><div class="color-block"><div class="color-box" style="background: #ffe39d"></div><span>#FFE39D</span></div></td></tr>
1340
+ <tr><td><span>color-base-yellow-400</span></td><td><span>--color-base-yellow-400</span></td><td><div class="color-block"><div class="color-box" style="background: #ffd97b"></div><span>#FFD97B</span></div></td></tr>
1341
+ <tr><td><span>color-base-yellow-450</span></td><td><span>--color-base-yellow-450</span></td><td><div class="color-block"><div class="color-box" style="background: #ffcf58"></div><span>#FFCF58</span></div></td></tr>
1342
+ <tr><td><span>color-base-yellow-500</span></td><td><span>--color-base-yellow-500</span></td><td><div class="color-block"><div class="color-box" style="background: #ffc434"></div><span>#FFC434</span></div></td></tr>
1343
+ <tr><td><span>color-base-yellow-600</span></td><td><span>--color-base-yellow-600</span></td><td><div class="color-block"><div class="color-box" style="background: #ffbb11"></div><span>#FFBB11</span></div></td></tr>
1344
+ <tr><td><span>color-base-yellow-700</span></td><td><span>--color-base-yellow-700</span></td><td><div class="color-block"><div class="color-box" style="background: #e9aa0c"></div><span>#E9AA0C</span></div></td></tr>
1345
+ <tr><td><span>color-base-yellow-800</span></td><td><span>--color-base-yellow-800</span></td><td><div class="color-block"><div class="color-box" style="background: #d69a04"></div><span>#D69A04</span></div></td></tr>
1346
+ <tr><td><span>color-base-yellow-900</span></td><td><span>--color-base-yellow-900</span></td><td><div class="color-block"><div class="color-box" style="background: #bf8800"></div><span>#BF8800</span></div></td></tr>
1347
+ <tr><td><span>color-base-green-50</span></td><td><span>--color-base-green-50</span></td><td><div class="color-block"><div class="color-box" style="background: #f6faec"></div><span>#F6FAEC</span></div></td></tr>
1348
+ <tr><td><span>color-base-green-100</span></td><td><span>--color-base-green-100</span></td><td><div class="color-block"><div class="color-box" style="background: #f0f7df"></div><span>#F0F7DF</span></div></td></tr>
1349
+ <tr><td><span>color-base-green-150</span></td><td><span>--color-base-green-150</span></td><td><div class="color-block"><div class="color-box" style="background: #e8f2d0"></div><span>#E8F2D0</span></div></td></tr>
1350
+ <tr><td><span>color-base-green-200</span></td><td><span>--color-base-green-200</span></td><td><div class="color-block"><div class="color-box" style="background: #deedbc"></div><span>#DEEDBC</span></div></td></tr>
1351
+ <tr><td><span>color-base-green-300</span></td><td><span>--color-base-green-300</span></td><td><div class="color-block"><div class="color-box" style="background: #cee49c"></div><span>#CEE49C</span></div></td></tr>
1352
+ <tr><td><span>color-base-green-400</span></td><td><span>--color-base-green-400</span></td><td><div class="color-block"><div class="color-box" style="background: #bedb79"></div><span>#BEDB79</span></div></td></tr>
1353
+ <tr><td><span>color-base-green-450</span></td><td><span>--color-base-green-450</span></td><td><div class="color-block"><div class="color-box" style="background: #add154"></div><span>#ADD154</span></div></td></tr>
1354
+ <tr><td><span>color-base-green-500</span></td><td><span>--color-base-green-500</span></td><td><div class="color-block"><div class="color-box" style="background: #9bc730"></div><span>#9BC730</span></div></td></tr>
1355
+ <tr><td><span>color-base-green-600</span></td><td><span>--color-base-green-600</span></td><td><div class="color-block"><div class="color-box" style="background: #8abd0c"></div><span>#8ABD0C</span></div></td></tr>
1356
+ <tr><td><span>color-base-green-700</span></td><td><span>--color-base-green-700</span></td><td><div class="color-block"><div class="color-box" style="background: #7baa0b"></div><span>#7BAA0B</span></div></td></tr>
1357
+ <tr><td><span>color-base-green-800</span></td><td><span>--color-base-green-800</span></td><td><div class="color-block"><div class="color-box" style="background: #6e970a"></div><span>#6E970A</span></div></td></tr>
1358
+ <tr><td><span>color-base-green-900</span></td><td><span>--color-base-green-900</span></td><td><div class="color-block"><div class="color-box" style="background: #618508"></div><span>#618508</span></div></td></tr>
1359
+ <tr><td><span>color-base-dark-green-50</span></td><td><span>--color-base-dark-green-50</span></td><td><div class="color-block"><div class="color-box" style="background: #eaf4ec"></div><span>#EAF4EC</span></div></td></tr>
1360
+ <tr><td><span>color-base-dark-green-100</span></td><td><span>--color-base-dark-green-100</span></td><td><div class="color-block"><div class="color-box" style="background: #dff2e3"></div><span>#DFF2E3</span></div></td></tr>
1361
+ <tr><td><span>color-base-dark-green-150</span></td><td><span>--color-base-dark-green-150</span></td><td><div class="color-block"><div class="color-box" style="background: #ccecd3"></div><span>#CCECD3</span></div></td></tr>
1362
+ <tr><td><span>color-base-dark-green-200</span></td><td><span>--color-base-dark-green-200</span></td><td><div class="color-block"><div class="color-box" style="background: #b1dfbb"></div><span>#B1DFBB</span></div></td></tr>
1363
+ <tr><td><span>color-base-dark-green-300</span></td><td><span>--color-base-dark-green-300</span></td><td><div class="color-block"><div class="color-box" style="background: #93d3a2"></div><span>#93D3A2</span></div></td></tr>
1364
+ <tr><td><span>color-base-dark-green-400</span></td><td><span>--color-base-dark-green-400</span></td><td><div class="color-block"><div class="color-box" style="background: #72c584"></div><span>#72C584</span></div></td></tr>
1365
+ <tr><td><span>color-base-dark-green-450</span></td><td><span>--color-base-dark-green-450</span></td><td><div class="color-block"><div class="color-box" style="background: #4cb563"></div><span>#4CB563</span></div></td></tr>
1366
+ <tr><td><span>color-base-dark-green-500</span></td><td><span>--color-base-dark-green-500</span></td><td><div class="color-block"><div class="color-box" style="background: #26a642"></div><span>#26A642</span></div></td></tr>
1367
+ <tr><td><span>color-base-dark-green-600</span></td><td><span>--color-base-dark-green-600</span></td><td><div class="color-block"><div class="color-box" style="background: #009621"></div><span>#009621</span></div></td></tr>
1368
+ <tr><td><span>color-base-dark-green-700</span></td><td><span>--color-base-dark-green-700</span></td><td><div class="color-block"><div class="color-box" style="background: #00871e"></div><span>#00871E</span></div></td></tr>
1369
+ <tr><td><span>color-base-dark-green-800</span></td><td><span>--color-base-dark-green-800</span></td><td><div class="color-block"><div class="color-box" style="background: #00781a"></div><span>#00781A</span></div></td></tr>
1370
+ <tr><td><span>color-base-dark-green-900</span></td><td><span>--color-base-dark-green-900</span></td><td><div class="color-block"><div class="color-box" style="background: #006917"></div><span>#006917</span></div></td></tr>
1371
+ <tr><td><span>color-base-cyan-50</span></td><td><span>--color-base-cyan-50</span></td><td><div class="color-block"><div class="color-box" style="background: #e3f0f5"></div><span>#E3F0F5</span></div></td></tr>
1372
+ <tr><td><span>color-base-cyan-100</span></td><td><span>--color-base-cyan-100</span></td><td><div class="color-block"><div class="color-box" style="background: #d5eff8"></div><span>#D5EFF8</span></div></td></tr>
1373
+ <tr><td><span>color-base-cyan-150</span></td><td><span>--color-base-cyan-150</span></td><td><div class="color-block"><div class="color-box" style="background: #c2e8f3"></div><span>#C2E8F3</span></div></td></tr>
1374
+ <tr><td><span>color-base-cyan-200</span></td><td><span>--color-base-cyan-200</span></td><td><div class="color-block"><div class="color-box" style="background: #aee0ef"></div><span>#AEE0EF</span></div></td></tr>
1375
+ <tr><td><span>color-base-cyan-300</span></td><td><span>--color-base-cyan-300</span></td><td><div class="color-block"><div class="color-box" style="background: #92d4e7"></div><span>#92D4E7</span></div></td></tr>
1376
+ <tr><td><span>color-base-cyan-400</span></td><td><span>--color-base-cyan-400</span></td><td><div class="color-block"><div class="color-box" style="background: #70c7e0"></div><span>#70C7E0</span></div></td></tr>
1377
+ <tr><td><span>color-base-cyan-450</span></td><td><span>--color-base-cyan-450</span></td><td><div class="color-block"><div class="color-box" style="background: #43b4d6"></div><span>#43B4D6</span></div></td></tr>
1378
+ <tr><td><span>color-base-cyan-500</span></td><td><span>--color-base-cyan-500</span></td><td><div class="color-block"><div class="color-box" style="background: #19a3cb"></div><span>#19A3CB</span></div></td></tr>
1379
+ <tr><td><span>color-base-cyan-600</span></td><td><span>--color-base-cyan-600</span></td><td><div class="color-block"><div class="color-box" style="background: #0099c5"></div><span>#0099C5</span></div></td></tr>
1380
+ <tr><td><span>color-base-cyan-700</span></td><td><span>--color-base-cyan-700</span></td><td><div class="color-block"><div class="color-box" style="background: #008ab2"></div><span>#008AB2</span></div></td></tr>
1381
+ <tr><td><span>color-base-cyan-800</span></td><td><span>--color-base-cyan-800</span></td><td><div class="color-block"><div class="color-box" style="background: #007a9e"></div><span>#007A9E</span></div></td></tr>
1382
+ <tr><td><span>color-base-cyan-900</span></td><td><span>--color-base-cyan-900</span></td><td><div class="color-block"><div class="color-box" style="background: #006b8a"></div><span>#006B8A</span></div></td></tr>
1383
+ <tr><td><span>color-base-blue-50</span></td><td><span>--color-base-blue-50</span></td><td><div class="color-block"><div class="color-box" style="background: #e7f1fa"></div><span>#E7F1FA</span></div></td></tr>
1384
+ <tr><td><span>color-base-blue-100</span></td><td><span>--color-base-blue-100</span></td><td><div class="color-block"><div class="color-box" style="background: #d6eeff"></div><span>#D6EEFF</span></div></td></tr>
1385
+ <tr><td><span>color-base-blue-150</span></td><td><span>--color-base-blue-150</span></td><td><div class="color-block"><div class="color-box" style="background: #c7e7ff"></div><span>#C7E7FF</span></div></td></tr>
1386
+ <tr><td><span>color-base-blue-200</span></td><td><span>--color-base-blue-200</span></td><td><div class="color-block"><div class="color-box" style="background: #b1deff"></div><span>#B1DEFF</span></div></td></tr>
1387
+ <tr><td><span>color-base-blue-300</span></td><td><span>--color-base-blue-300</span></td><td><div class="color-block"><div class="color-box" style="background: #8ecfff"></div><span>#8ECFFF</span></div></td></tr>
1388
+ <tr><td><span>color-base-blue-400</span></td><td><span>--color-base-blue-400</span></td><td><div class="color-block"><div class="color-box" style="background: #6ac0ff"></div><span>#6AC0FF</span></div></td></tr>
1389
+ <tr><td><span>color-base-blue-450</span></td><td><span>--color-base-blue-450</span></td><td><div class="color-block"><div class="color-box" style="background: #4ab2ff"></div><span>#4AB2FF</span></div></td></tr>
1390
+ <tr><td><span>color-base-blue-500</span></td><td><span>--color-base-blue-500</span></td><td><div class="color-block"><div class="color-box" style="background: #2ba4ff"></div><span>#2BA4FF</span></div></td></tr>
1391
+ <tr><td><span>color-base-blue-600</span></td><td><span>--color-base-blue-600</span></td><td><div class="color-block"><div class="color-box" style="background: #0d98ff"></div><span>#0D98FF</span></div></td></tr>
1392
+ <tr><td><span>color-base-blue-700</span></td><td><span>--color-base-blue-700</span></td><td><div class="color-block"><div class="color-box" style="background: #0c88e6"></div><span>#0C88E6</span></div></td></tr>
1393
+ <tr><td><span>color-base-blue-800</span></td><td><span>--color-base-blue-800</span></td><td><div class="color-block"><div class="color-box" style="background: #0a77ca"></div><span>#0A77CA</span></div></td></tr>
1394
+ <tr><td><span>color-base-blue-900</span></td><td><span>--color-base-blue-900</span></td><td><div class="color-block"><div class="color-box" style="background: #0968af"></div><span>#0968AF</span></div></td></tr>
1395
+ <tr><td><span>color-base-dark-blue-50</span></td><td><span>--color-base-dark-blue-50</span></td><td><div class="color-block"><div class="color-box" style="background: #e1ebf6"></div><span>#E1EBF6</span></div></td></tr>
1396
+ <tr><td><span>color-base-dark-blue-100</span></td><td><span>--color-base-dark-blue-100</span></td><td><div class="color-block"><div class="color-box" style="background: #d3e6fa"></div><span>#D3E6FA</span></div></td></tr>
1397
+ <tr><td><span>color-base-dark-blue-150</span></td><td><span>--color-base-dark-blue-150</span></td><td><div class="color-block"><div class="color-box" style="background: #b9d7f5"></div><span>#B9D7F5</span></div></td></tr>
1398
+ <tr><td><span>color-base-dark-blue-200</span></td><td><span>--color-base-dark-blue-200</span></td><td><div class="color-block"><div class="color-box" style="background: #9bc6f2"></div><span>#9BC6F2</span></div></td></tr>
1399
+ <tr><td><span>color-base-dark-blue-300</span></td><td><span>--color-base-dark-blue-300</span></td><td><div class="color-block"><div class="color-box" style="background: #77afe7"></div><span>#77AFE7</span></div></td></tr>
1400
+ <tr><td><span>color-base-dark-blue-400</span></td><td><span>--color-base-dark-blue-400</span></td><td><div class="color-block"><div class="color-box" style="background: #5198e0"></div><span>#5198E0</span></div></td></tr>
1401
+ <tr><td><span>color-base-dark-blue-450</span></td><td><span>--color-base-dark-blue-450</span></td><td><div class="color-block"><div class="color-box" style="background: #3a85d1"></div><span>#3A85D1</span></div></td></tr>
1402
+ <tr><td><span>color-base-dark-blue-500</span></td><td><span>--color-base-dark-blue-500</span></td><td><div class="color-block"><div class="color-box" style="background: #2576c7"></div><span>#2576C7</span></div></td></tr>
1403
+ <tr><td><span>color-base-dark-blue-600</span></td><td><span>--color-base-dark-blue-600</span></td><td><div class="color-block"><div class="color-box" style="background: #1467ba"></div><span>#1467BA</span></div></td></tr>
1404
+ <tr><td><span>color-base-dark-blue-700</span></td><td><span>--color-base-dark-blue-700</span></td><td><div class="color-block"><div class="color-box" style="background: #125da8"></div><span>#125DA8</span></div></td></tr>
1405
+ <tr><td><span>color-base-dark-blue-800</span></td><td><span>--color-base-dark-blue-800</span></td><td><div class="color-block"><div class="color-box" style="background: #105295"></div><span>#105295</span></div></td></tr>
1406
+ <tr><td><span>color-base-dark-blue-900</span></td><td><span>--color-base-dark-blue-900</span></td><td><div class="color-block"><div class="color-box" style="background: #0e4883"></div><span>#0E4883</span></div></td></tr>
1407
+ <tr><td><span>color-base-pink-50</span></td><td><span>--color-base-pink-50</span></td><td><div class="color-block"><div class="color-box" style="background: #fce6f3"></div><span>#FCE6F3</span></div></td></tr>
1408
+ <tr><td><span>color-base-pink-100</span></td><td><span>--color-base-pink-100</span></td><td><div class="color-block"><div class="color-box" style="background: #fad5eb"></div><span>#FAD5EB</span></div></td></tr>
1409
+ <tr><td><span>color-base-pink-150</span></td><td><span>--color-base-pink-150</span></td><td><div class="color-block"><div class="color-box" style="background: #f7bbdd"></div><span>#F7BBDD</span></div></td></tr>
1410
+ <tr><td><span>color-base-pink-200</span></td><td><span>--color-base-pink-200</span></td><td><div class="color-block"><div class="color-box" style="background: #f2a1cf"></div><span>#F2A1CF</span></div></td></tr>
1411
+ <tr><td><span>color-base-pink-300</span></td><td><span>--color-base-pink-300</span></td><td><div class="color-block"><div class="color-box" style="background: #ec78ba"></div><span>#EC78BA</span></div></td></tr>
1412
+ <tr><td><span>color-base-pink-400</span></td><td><span>--color-base-pink-400</span></td><td><div class="color-block"><div class="color-box" style="background: #e755a8"></div><span>#E755A8</span></div></td></tr>
1413
+ <tr><td><span>color-base-pink-450</span></td><td><span>--color-base-pink-450</span></td><td><div class="color-block"><div class="color-box" style="background: #d94397"></div><span>#D94397</span></div></td></tr>
1414
+ <tr><td><span>color-base-pink-500</span></td><td><span>--color-base-pink-500</span></td><td><div class="color-block"><div class="color-box" style="background: #cc2f89"></div><span>#CC2F89</span></div></td></tr>
1415
+ <tr><td><span>color-base-pink-600</span></td><td><span>--color-base-pink-600</span></td><td><div class="color-block"><div class="color-box" style="background: #c41579"></div><span>#C41579</span></div></td></tr>
1416
+ <tr><td><span>color-base-pink-700</span></td><td><span>--color-base-pink-700</span></td><td><div class="color-block"><div class="color-box" style="background: #b4136e"></div><span>#B4136E</span></div></td></tr>
1417
+ <tr><td><span>color-base-pink-800</span></td><td><span>--color-base-pink-800</span></td><td><div class="color-block"><div class="color-box" style="background: #a01163"></div><span>#A01163</span></div></td></tr>
1418
+ <tr><td><span>color-base-pink-900</span></td><td><span>--color-base-pink-900</span></td><td><div class="color-block"><div class="color-box" style="background: #8a0f55"></div><span>#8A0F55</span></div></td></tr>
1419
+ <tr><td><span>color-base-purple-50</span></td><td><span>--color-base-purple-50</span></td><td><div class="color-block"><div class="color-box" style="background: #f4e2f6"></div><span>#F4E2F6</span></div></td></tr>
1420
+ <tr><td><span>color-base-purple-100</span></td><td><span>--color-base-purple-100</span></td><td><div class="color-block"><div class="color-box" style="background: #eccff0"></div><span>#ECCFF0</span></div></td></tr>
1421
+ <tr><td><span>color-base-purple-150</span></td><td><span>--color-base-purple-150</span></td><td><div class="color-block"><div class="color-box" style="background: #dab2e0"></div><span>#DAB2E0</span></div></td></tr>
1422
+ <tr><td><span>color-base-purple-200</span></td><td><span>--color-base-purple-200</span></td><td><div class="color-block"><div class="color-box" style="background: #c792cf"></div><span>#C792CF</span></div></td></tr>
1423
+ <tr><td><span>color-base-purple-300</span></td><td><span>--color-base-purple-300</span></td><td><div class="color-block"><div class="color-box" style="background: #ab66b4"></div><span>#AB66B4</span></div></td></tr>
1424
+ <tr><td><span>color-base-purple-400</span></td><td><span>--color-base-purple-400</span></td><td><div class="color-block"><div class="color-box" style="background: #93459e"></div><span>#93459E</span></div></td></tr>
1425
+ <tr><td><span>color-base-purple-450</span></td><td><span>--color-base-purple-450</span></td><td><div class="color-block"><div class="color-box" style="background: #823591"></div><span>#823591</span></div></td></tr>
1426
+ <tr><td><span>color-base-purple-500</span></td><td><span>--color-base-purple-500</span></td><td><div class="color-block"><div class="color-box" style="background: #772386"></div><span>#772386</span></div></td></tr>
1427
+ <tr><td><span>color-base-purple-600</span></td><td><span>--color-base-purple-600</span></td><td><div class="color-block"><div class="color-box" style="background: #6c127b"></div><span>#6C127B</span></div></td></tr>
1428
+ <tr><td><span>color-base-purple-700</span></td><td><span>--color-base-purple-700</span></td><td><div class="color-block"><div class="color-box" style="background: #5e106b"></div><span>#5E106B</span></div></td></tr>
1429
+ <tr><td><span>color-base-purple-800</span></td><td><span>--color-base-purple-800</span></td><td><div class="color-block"><div class="color-box" style="background: #530d5e"></div><span>#530D5E</span></div></td></tr>
1430
+ <tr><td><span>color-base-purple-900</span></td><td><span>--color-base-purple-900</span></td><td><div class="color-block"><div class="color-box" style="background: #450b4f"></div><span>#450B4F</span></div></td></tr>
1431
+ <tr><td><span>color-base-brown-50</span></td><td><span>--color-base-brown-50</span></td><td><div class="color-block"><div class="color-box" style="background: #f2eae4"></div><span>#F2EAE4</span></div></td></tr>
1432
+ <tr><td><span>color-base-brown-100</span></td><td><span>--color-base-brown-100</span></td><td><div class="color-block"><div class="color-box" style="background: #eadcd2"></div><span>#EADCD2</span></div></td></tr>
1433
+ <tr><td><span>color-base-brown-150</span></td><td><span>--color-base-brown-150</span></td><td><div class="color-block"><div class="color-box" style="background: #d8c4b3"></div><span>#D8C4B3</span></div></td></tr>
1434
+ <tr><td><span>color-base-brown-200</span></td><td><span>--color-base-brown-200</span></td><td><div class="color-block"><div class="color-box" style="background: #bca38d"></div><span>#BCA38D</span></div></td></tr>
1435
+ <tr><td><span>color-base-brown-300</span></td><td><span>--color-base-brown-300</span></td><td><div class="color-block"><div class="color-box" style="background: #a08165"></div><span>#A08165</span></div></td></tr>
1436
+ <tr><td><span>color-base-brown-400</span></td><td><span>--color-base-brown-400</span></td><td><div class="color-block"><div class="color-box" style="background: #8b6747"></div><span>#8B6747</span></div></td></tr>
1437
+ <tr><td><span>color-base-brown-450</span></td><td><span>--color-base-brown-450</span></td><td><div class="color-block"><div class="color-box" style="background: #755438"></div><span>#755438</span></div></td></tr>
1438
+ <tr><td><span>color-base-brown-500</span></td><td><span>--color-base-brown-500</span></td><td><div class="color-block"><div class="color-box" style="background: #65472b"></div><span>#65472B</span></div></td></tr>
1439
+ <tr><td><span>color-base-brown-600</span></td><td><span>--color-base-brown-600</span></td><td><div class="color-block"><div class="color-box" style="background: #593b20"></div><span>#593B20</span></div></td></tr>
1440
+ <tr><td><span>color-base-brown-700</span></td><td><span>--color-base-brown-700</span></td><td><div class="color-block"><div class="color-box" style="background: #4f351d"></div><span>#4F351D</span></div></td></tr>
1441
+ <tr><td><span>color-base-brown-800</span></td><td><span>--color-base-brown-800</span></td><td><div class="color-block"><div class="color-box" style="background: #462f1b"></div><span>#462F1B</span></div></td></tr>
1442
+ <tr><td><span>color-base-brown-900</span></td><td><span>--color-base-brown-900</span></td><td><div class="color-block"><div class="color-box" style="background: #3f2915"></div><span>#3F2915</span></div></td></tr>
1443
+ <tr><td><span>color-base-grey-50</span></td><td><span>--color-base-grey-50</span></td><td><div class="color-block"><div class="color-box" style="background: #f9f9f9"></div><span>#F9F9F9</span></div></td></tr>
1444
+ <tr><td><span>color-base-grey-100</span></td><td><span>--color-base-grey-100</span></td><td><div class="color-block"><div class="color-box" style="background: #f3f3f3"></div><span>#F3F3F3</span></div></td></tr>
1445
+ <tr><td><span>color-base-grey-150</span></td><td><span>--color-base-grey-150</span></td><td><div class="color-block"><div class="color-box" style="background: #eeeeee"></div><span>#EEEEEE</span></div></td></tr>
1446
+ <tr><td><span>color-base-grey-200</span></td><td><span>--color-base-grey-200</span></td><td><div class="color-block"><div class="color-box" style="background: #e5e5e5"></div><span>#E5E5E5</span></div></td></tr>
1447
+ <tr><td><span>color-base-grey-300</span></td><td><span>--color-base-grey-300</span></td><td><div class="color-block"><div class="color-box" style="background: #d9d9d9"></div><span>#D9D9D9</span></div></td></tr>
1448
+ <tr><td><span>color-base-grey-400</span></td><td><span>--color-base-grey-400</span></td><td><div class="color-block"><div class="color-box" style="background: #cccccc"></div><span>#CCCCCC</span></div></td></tr>
1449
+ <tr><td><span>color-base-grey-450</span></td><td><span>--color-base-grey-450</span></td><td><div class="color-block"><div class="color-box" style="background: #bbbbbb"></div><span>#BBBBBB</span></div></td></tr>
1450
+ <tr><td><span>color-base-grey-500</span></td><td><span>--color-base-grey-500</span></td><td><div class="color-block"><div class="color-box" style="background: #aaaaaa"></div><span>#AAAAAA</span></div></td></tr>
1451
+ <tr><td><span>color-base-grey-600</span></td><td><span>--color-base-grey-600</span></td><td><div class="color-block"><div class="color-box" style="background: #999999"></div><span>#999999</span></div></td></tr>
1452
+ <tr><td><span>color-base-grey-700</span></td><td><span>--color-base-grey-700</span></td><td><div class="color-block"><div class="color-box" style="background: #777777"></div><span>#777777</span></div></td></tr>
1453
+ <tr><td><span>color-base-grey-800</span></td><td><span>--color-base-grey-800</span></td><td><div class="color-block"><div class="color-box" style="background: #666666"></div><span>#666666</span></div></td></tr>
1454
+ <tr><td><span>color-base-grey-900</span></td><td><span>--color-base-grey-900</span></td><td><div class="color-block"><div class="color-box" style="background: #555555"></div><span>#555555</span></div></td></tr>
1455
+ <tr><td><span>color-base-white</span></td><td><span>--color-base-white</span></td><td><div class="color-block"><div class="color-box" style="background: #ffffff"></div><span>#FFFFFF</span></div></td></tr>
1456
+ <tr><td><span>color-base-black</span></td><td><span>--color-base-black</span></td><td><div class="color-block"><div class="color-box" style="background: #111111"></div><span>#111111</span></div></td></tr>
1457
+ <tr><td><span>color-font-base</span></td><td><span>--color-font-base</span></td><td><div class="color-block"><div class="color-box" style="background: #111111"></div><span>#111111</span></div></td></tr>
1458
+ <tr><td><span>color-font-secondary</span></td><td><span>--color-font-secondary</span></td><td><div class="color-block"><div class="color-box" style="background: #555555"></div><span>#555555</span></div></td></tr>
1459
+ <tr><td><span>color-font-tertiary</span></td><td><span>--color-font-tertiary</span></td><td><div class="color-block"><div class="color-box" style="background: #999999"></div><span>#999999</span></div></td></tr>
1460
+ <tr><td><span>color-font-warn</span></td><td><span>--color-font-warn</span></td><td><div class="color-block"><div class="color-box" style="background: #555555"></div><span>#555555</span></div></td></tr>
1461
+ <tr><td><span>color-font-suggest</span></td><td><span>--color-font-suggest</span></td><td><div class="color-block"><div class="color-box" style="background: #bf8800"></div><span>#BF8800</span></div></td></tr>
1462
+ <tr><td><span>color-font-error</span></td><td><span>--color-font-error</span></td><td><div class="color-block"><div class="color-box" style="background: #cc0017"></div><span>#CC0017</span></div></td></tr>
1463
+ <tr><th colspan="3">size</th></tr><tr><th>name</th><th>css variable</th><th>value</th></tr><tr><td><span>size-font-tiny</span></td><td><span>--size-font-tiny</span></td><td><span>12px</span></td></tr>
1464
+ <tr><td><span>size-font-small</span></td><td><span>--size-font-small</span></td><td><span>13px</span></td></tr>
1465
+ <tr><td><span>size-font-medium</span></td><td><span>--size-font-medium</span></td><td><span>16px</span></td></tr>
1466
+ <tr><td><span>size-font-large</span></td><td><span>--size-font-large</span></td><td><span>20px</span></td></tr>
1467
+ <tr><td><span>size-font-xl</span></td><td><span>--size-font-xl</span></td><td><span>24px</span></td></tr>
1468
+ <tr><td><span>size-font-xxl</span></td><td><span>--size-font-xxl</span></td><td><span>32px</span></td></tr>
1469
+ <tr><td><span>size-font-xxxl</span></td><td><span>--size-font-xxxl</span></td><td><span>48px</span></td></tr>
1470
+ <tr><td><span>size-font-base</span></td><td><span>--size-font-base</span></td><td><span>16px</span></td></tr>
1471
+ <tr><th colspan="3">font</th></tr><tr><th>name</th><th>css variable</th><th>value</th></tr><tr><td><span>font-family-base</span></td><td><span>--font-family-base</span></td><td><span>"Segoe UI", Tahoma, Geneva, Verdana, sans-serif</span></td></tr>
1472
+ <tr><th colspan="3">time</th></tr><tr><th>name</th><th>css variable</th><th>value</th></tr><tr><td><span>time-transition-short</span></td><td><span>--time-transition-short</span></td><td><span>275ms</span></td></tr>
1473
+ <tr><td><span>time-transition-base</span></td><td><span>--time-transition-base</span></td><td><span>300ms</span></td></tr>
1474
+ <tr><td><span>time-transition-long</span></td><td><span>--time-transition-long</span></td><td><span>600ms</span></td></tr>
1475
+ <tr><td><span>time-transition-xl</span></td><td><span>--time-transition-xl</span></td><td><span>1000ms</span></td></tr>
1476
+ </table>
1477
+ </div>
1478
+ </body>
1479
+ </html>