@workday/canvas-tokens-web 1.1.1 → 1.2.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.
@@ -1,8 +1,691 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 11 Mar 2024 16:43:19 GMT
3
+ * Generated on Thu, 21 Mar 2024 03:34:06 GMT
4
4
  */
5
5
 
6
+ export declare const color = {
7
+ "bg": {
8
+ /**
9
+ * #ffffff
10
+ *
11
+ * Main background color
12
+ *
13
+ */
14
+ "default": "--cnvs-sys-color-bg-default",
15
+ /**
16
+ * rgba(#ffffff, 0)
17
+ *
18
+ * Transparent background
19
+ */
20
+ "transparent": "--cnvs-sys-color-bg-transparent",
21
+ /**
22
+ * rgba(#000000,0.64)
23
+ *
24
+ * Overlay background
25
+ */
26
+ "overlay": "--cnvs-sys-color-bg-overlay",
27
+ /**
28
+ * rgba(#000000 ,0.84)
29
+ *
30
+ * Tooltip, Status Indicator
31
+ */
32
+ "translucent": "--cnvs-sys-color-bg-translucent",
33
+ "alt": {
34
+ /**
35
+ * #e8ebed
36
+ *
37
+ * Hover states
38
+ */
39
+ "default": "--cnvs-sys-color-bg-alt-default",
40
+ /**
41
+ * #F0F1F2
42
+ *
43
+ * Page background
44
+ */
45
+ "soft": "--cnvs-sys-color-bg-alt-soft",
46
+ /**
47
+ * #DFE2E6
48
+ *
49
+ * Active states
50
+ */
51
+ "strong": "--cnvs-sys-color-bg-alt-strong",
52
+ /**
53
+ * #ced3d9
54
+ *
55
+ * Active states
56
+ */
57
+ "stronger": "--cnvs-sys-color-bg-alt-stronger",
58
+ },
59
+ "muted": {
60
+ /** #5E6A75 */
61
+ "default": "--cnvs-sys-color-bg-muted-default",
62
+ /** #A1AAB3 */
63
+ "soft": "--cnvs-sys-color-bg-muted-soft",
64
+ /** #333d47 */
65
+ "strong": "--cnvs-sys-color-bg-muted-strong",
66
+ },
67
+ "contrast": {
68
+ /**
69
+ * #333333
70
+ *
71
+ * Contrast backgrounds, like Secondary Buttons
72
+ */
73
+ "default": "--cnvs-sys-color-bg-contrast-default",
74
+ /**
75
+ * #1e1e1e
76
+ *
77
+ * Contrast backgrounds, like Secondary Buttons
78
+ */
79
+ "strong": "--cnvs-sys-color-bg-contrast-strong",
80
+ },
81
+ "primary": {
82
+ /**
83
+ * #0875E1
84
+ *
85
+ * Primary brand color
86
+ */
87
+ "default": "--cnvs-sys-color-bg-primary-default",
88
+ /**
89
+ * #A6D2FF
90
+ *
91
+ * Brand selected background
92
+ */
93
+ "soft": "--cnvs-sys-color-bg-primary-soft",
94
+ /**
95
+ * #005cb9
96
+ *
97
+ * Brand hover background
98
+ */
99
+ "strong": "--cnvs-sys-color-bg-primary-strong",
100
+ /**
101
+ * #004387
102
+ *
103
+ * Brand active background
104
+ */
105
+ "stronger": "--cnvs-sys-color-bg-primary-stronger",
106
+ },
107
+ "positive": {
108
+ /**
109
+ * #43c463
110
+ *
111
+ * Disabled success background
112
+ */
113
+ "default": "--cnvs-sys-color-bg-positive-default",
114
+ /**
115
+ * #ebfff0
116
+ *
117
+ * Default success background
118
+ */
119
+ "soft": "--cnvs-sys-color-bg-positive-soft",
120
+ /**
121
+ * #319c4c
122
+ *
123
+ * Hover success background
124
+ */
125
+ "strong": "--cnvs-sys-color-bg-positive-strong",
126
+ /**
127
+ * #217a37
128
+ *
129
+ * Active success background
130
+ */
131
+ "stronger": "--cnvs-sys-color-bg-positive-stronger",
132
+ },
133
+ "caution": {
134
+ /**
135
+ * #ffa126
136
+ *
137
+ * Default warning background
138
+ */
139
+ "default": "--cnvs-sys-color-bg-caution-default",
140
+ /**
141
+ * #ffeed9
142
+ *
143
+ * Disabled warning background
144
+ */
145
+ "softer": "--cnvs-sys-color-bg-caution-softer",
146
+ /**
147
+ * #f38b00
148
+ *
149
+ * Strong warning background
150
+ */
151
+ "strong": "--cnvs-sys-color-bg-caution-strong",
152
+ /**
153
+ * #c06c00
154
+ *
155
+ * Stronger warning background
156
+ */
157
+ "stronger": "--cnvs-sys-color-bg-caution-stronger",
158
+ },
159
+ "critical": {
160
+ /**
161
+ * #de2e21
162
+ *
163
+ * Default error background
164
+ */
165
+ "default": "--cnvs-sys-color-bg-critical-default",
166
+ /**
167
+ * #ffefee
168
+ *
169
+ * Disabled error background
170
+ */
171
+ "softer": "--cnvs-sys-color-bg-critical-softer",
172
+ /**
173
+ * #a31b12
174
+ *
175
+ * Strong error background
176
+ */
177
+ "strong": "--cnvs-sys-color-bg-critical-strong",
178
+ /**
179
+ * #80160E
180
+ *
181
+ * Stronger error background
182
+ */
183
+ "stronger": "--cnvs-sys-color-bg-critical-stronger",
184
+ },
185
+ },
186
+ "text": {
187
+ /**
188
+ * #494949
189
+ *
190
+ * Default text color
191
+ */
192
+ "default": "--cnvs-sys-color-text-default",
193
+ /**
194
+ * #A1AAB3
195
+ *
196
+ * Disabled text color
197
+ */
198
+ "disabled": "--cnvs-sys-color-text-disabled",
199
+ /**
200
+ * #5E6A75
201
+ *
202
+ * Hint text color
203
+ */
204
+ "hint": "--cnvs-sys-color-text-hint",
205
+ /**
206
+ * #333333
207
+ *
208
+ * Heading text color
209
+ */
210
+ "strong": "--cnvs-sys-color-text-strong",
211
+ /**
212
+ * #1e1e1e
213
+ *
214
+ * Heading hover text color
215
+ */
216
+ "stronger": "--cnvs-sys-color-text-stronger",
217
+ /**
218
+ * #ffffff
219
+ *
220
+ * Inverse text color
221
+ */
222
+ "inverse": "--cnvs-sys-color-text-inverse",
223
+ "critical": {
224
+ /**
225
+ * #de2e21
226
+ *
227
+ * Error text
228
+ */
229
+ "default": "--cnvs-sys-color-text-critical-default",
230
+ },
231
+ "primary": {
232
+ /**
233
+ * #0875E1
234
+ *
235
+ * Branded text
236
+ */
237
+ "default": "--cnvs-sys-color-text-primary-default",
238
+ /**
239
+ * #005cb9
240
+ *
241
+ * Branded hover text
242
+ */
243
+ "strong": "--cnvs-sys-color-text-primary-strong",
244
+ },
245
+ "caution": {
246
+ /**
247
+ * #333333
248
+ *
249
+ * Warning text
250
+ */
251
+ "default": "--cnvs-sys-color-text-caution-default",
252
+ /**
253
+ * #1e1e1e
254
+ *
255
+ * Strong warning text
256
+ */
257
+ "strong": "--cnvs-sys-color-text-caution-strong",
258
+ },
259
+ },
260
+ "icon": {
261
+ /**
262
+ * #7b858f
263
+ *
264
+ * Default icon color
265
+ */
266
+ "default": "--cnvs-sys-color-icon-default",
267
+ /**
268
+ * #A1AAB3
269
+ *
270
+ * Disabled icon color
271
+ */
272
+ "soft": "--cnvs-sys-color-icon-soft",
273
+ /**
274
+ * #333d47
275
+ *
276
+ * Hover icon color
277
+ */
278
+ "strong": "--cnvs-sys-color-icon-strong",
279
+ /**
280
+ * #ffffff
281
+ *
282
+ * Inverse icon color
283
+ */
284
+ "inverse": "--cnvs-sys-color-icon-inverse",
285
+ "primary": {
286
+ /**
287
+ * #0875E1
288
+ *
289
+ * Brand icon color
290
+ */
291
+ "default": "--cnvs-sys-color-icon-primary-default",
292
+ /**
293
+ * #005cb9
294
+ *
295
+ * Stronger brand icon color
296
+ */
297
+ "strong": "--cnvs-sys-color-icon-primary-strong",
298
+ },
299
+ "positive": {
300
+ /**
301
+ * #319c4c
302
+ *
303
+ * Success icon color
304
+ */
305
+ "default": "--cnvs-sys-color-icon-positive-default",
306
+ },
307
+ "critical": {
308
+ /**
309
+ * #de2e21
310
+ *
311
+ * Error icon color
312
+ */
313
+ "default": "--cnvs-sys-color-icon-critical-default",
314
+ },
315
+ "caution": {
316
+ /**
317
+ * #333333
318
+ *
319
+ * Caution icon color
320
+ */
321
+ "default": "--cnvs-sys-color-icon-caution-default",
322
+ /**
323
+ * #1e1e1e
324
+ *
325
+ * Strong caution icon color
326
+ */
327
+ "strong": "--cnvs-sys-color-icon-caution-strong",
328
+ },
329
+ },
330
+ "fg": {
331
+ /**
332
+ * #494949
333
+ *
334
+ * Body
335
+ */
336
+ "default": "--cnvs-sys-color-fg-default",
337
+ /**
338
+ * #333333
339
+ *
340
+ * Headings
341
+ */
342
+ "strong": "--cnvs-sys-color-fg-strong",
343
+ /**
344
+ * #1e1e1e
345
+ *
346
+ * Heading on hover
347
+ */
348
+ "stronger": "--cnvs-sys-color-fg-stronger",
349
+ /**
350
+ * #A1AAB3
351
+ *
352
+ * Disabled
353
+ */
354
+ "disabled": "--cnvs-sys-color-fg-disabled",
355
+ /**
356
+ * #ffffff
357
+ *
358
+ * Inverse
359
+ */
360
+ "inverse": "--cnvs-sys-color-fg-inverse",
361
+ "critical": {
362
+ /**
363
+ * #de2e21
364
+ *
365
+ * Error
366
+ */
367
+ "default": "--cnvs-sys-color-fg-critical-default",
368
+ },
369
+ "muted": {
370
+ /**
371
+ * #5E6A75
372
+ *
373
+ * Hint text
374
+ */
375
+ "default": "--cnvs-sys-color-fg-muted-default",
376
+ /** #4a5561 */
377
+ "strong": "--cnvs-sys-color-fg-muted-strong",
378
+ /** #333d47 */
379
+ "stronger": "--cnvs-sys-color-fg-muted-stronger",
380
+ },
381
+ "primary": {
382
+ /**
383
+ * #0875E1
384
+ *
385
+ * Interactive foreground elements
386
+ */
387
+ "default": "--cnvs-sys-color-fg-primary-default",
388
+ /**
389
+ * #005cb9
390
+ *
391
+ * Hover interactive foregrounds
392
+ */
393
+ "strong": "--cnvs-sys-color-fg-primary-strong",
394
+ },
395
+ "caution": {
396
+ /**
397
+ * #333333
398
+ *
399
+ * Warning
400
+ */
401
+ "default": "--cnvs-sys-color-fg-caution-default",
402
+ /**
403
+ * #1e1e1e
404
+ *
405
+ * Warning on hover
406
+ */
407
+ "strong": "--cnvs-sys-color-fg-caution-strong",
408
+ },
409
+ "contrast": {
410
+ /**
411
+ * #333333
412
+ *
413
+ * Contrast
414
+ */
415
+ "default": "--cnvs-sys-color-fg-contrast-default",
416
+ /**
417
+ * #1e1e1e
418
+ *
419
+ * Strong contrast
420
+ */
421
+ "strong": "--cnvs-sys-color-fg-contrast-strong",
422
+ },
423
+ },
424
+ "border": {
425
+ "input": {
426
+ /**
427
+ * #A1AAB3
428
+ *
429
+ * Disabled inputs
430
+ */
431
+ "disabled": "--cnvs-sys-color-border-input-disabled",
432
+ /**
433
+ * #7b858f
434
+ *
435
+ * Inputs
436
+ */
437
+ "default": "--cnvs-sys-color-border-input-default",
438
+ /**
439
+ * #333d47
440
+ *
441
+ * Input hover
442
+ */
443
+ "strong": "--cnvs-sys-color-border-input-strong",
444
+ },
445
+ "contrast": {
446
+ /**
447
+ * #333333
448
+ *
449
+ * Secondary Button
450
+ */
451
+ "default": "--cnvs-sys-color-border-contrast-default",
452
+ /**
453
+ * #1e1e1e
454
+ *
455
+ * Secondary Button Hover
456
+ */
457
+ "strong": "--cnvs-sys-color-border-contrast-strong",
458
+ },
459
+ "primary": {
460
+ /**
461
+ * #0875E1
462
+ *
463
+ * Brand, Focus
464
+ */
465
+ "default": "--cnvs-sys-color-border-primary-default",
466
+ },
467
+ "critical": {
468
+ /**
469
+ * #de2e21
470
+ *
471
+ * Error
472
+ */
473
+ "default": "--cnvs-sys-color-border-critical-default",
474
+ },
475
+ "caution": {
476
+ /**
477
+ * #ffa126
478
+ *
479
+ * Warning inner
480
+ */
481
+ "default": "--cnvs-sys-color-border-caution-default",
482
+ /**
483
+ * #c06c00
484
+ *
485
+ * Warning outer (box shadow)
486
+ */
487
+ "strong": "--cnvs-sys-color-border-caution-strong",
488
+ },
489
+ /**
490
+ * rgba(#ffffff, 0%)
491
+ *
492
+ * Transparent
493
+ */
494
+ "transparent": "--cnvs-sys-color-border-transparent",
495
+ /**
496
+ * #ffffff
497
+ *
498
+ * Inverse
499
+ */
500
+ "inverse": "--cnvs-sys-color-border-inverse",
501
+ /**
502
+ * #DFE2E6
503
+ *
504
+ * Dividers
505
+ */
506
+ "divider": "--cnvs-sys-color-border-divider",
507
+ /**
508
+ * #ced3d9
509
+ *
510
+ * Cards, Toasts
511
+ */
512
+ "container": "--cnvs-sys-color-border-container",
513
+ },
514
+ "shadow": {
515
+ /**
516
+ * #1f262e
517
+ *
518
+ * First shadow color
519
+ */
520
+ "1": "--cnvs-sys-color-shadow-1",
521
+ /**
522
+ * #1f262e
523
+ *
524
+ * Second shadow color
525
+ */
526
+ "2": "--cnvs-sys-color-shadow-2",
527
+ /**
528
+ * #1f262e
529
+ *
530
+ * Main shadow color
531
+ */
532
+ "default": "--cnvs-sys-color-shadow-default",
533
+ },
534
+ "static": {
535
+ "blue": {
536
+ /**
537
+ * #0875E1
538
+ *
539
+ * Blue
540
+ */
541
+ "default": "--cnvs-sys-color-static-blue-default",
542
+ /**
543
+ * #D7EAFC
544
+ *
545
+ * Light blue
546
+ */
547
+ "soft": "--cnvs-sys-color-static-blue-soft",
548
+ /**
549
+ * #005cb9
550
+ *
551
+ * Stronger blue
552
+ */
553
+ "strong": "--cnvs-sys-color-static-blue-strong",
554
+ },
555
+ "green": {
556
+ /**
557
+ * #43c463
558
+ *
559
+ * Default green
560
+ */
561
+ "default": "--cnvs-sys-color-static-green-default",
562
+ /**
563
+ * #ebfff0
564
+ *
565
+ * Light green
566
+ */
567
+ "soft": "--cnvs-sys-color-static-green-soft",
568
+ /**
569
+ * #217a37
570
+ *
571
+ * Stronger green
572
+ */
573
+ "strong": "--cnvs-sys-color-static-green-strong",
574
+ },
575
+ "red": {
576
+ /**
577
+ * #de2e21
578
+ *
579
+ * Red
580
+ */
581
+ "default": "--cnvs-sys-color-static-red-default",
582
+ /**
583
+ * #ffefee
584
+ *
585
+ * Light red
586
+ */
587
+ "soft": "--cnvs-sys-color-static-red-soft",
588
+ /**
589
+ * #a31b12
590
+ *
591
+ * Strong red
592
+ */
593
+ "strong": "--cnvs-sys-color-static-red-strong",
594
+ },
595
+ "orange": {
596
+ /**
597
+ * #f38b00
598
+ *
599
+ * Orange
600
+ */
601
+ "default": "--cnvs-sys-color-static-orange-default",
602
+ /**
603
+ * #ffeed9
604
+ *
605
+ * Soft orange
606
+ */
607
+ "soft": "--cnvs-sys-color-static-orange-soft",
608
+ /**
609
+ * #c06c00
610
+ *
611
+ * Stronger orange
612
+ */
613
+ "strong": "--cnvs-sys-color-static-orange-strong",
614
+ },
615
+ "gray": {
616
+ /**
617
+ * #5E6A75
618
+ *
619
+ * Gray
620
+ */
621
+ "default": "--cnvs-sys-color-static-gray-default",
622
+ /**
623
+ * #e8ebed
624
+ *
625
+ * Light gray
626
+ */
627
+ "soft": "--cnvs-sys-color-static-gray-soft",
628
+ /**
629
+ * #4a5561
630
+ *
631
+ * Stronger gray
632
+ */
633
+ "strong": "--cnvs-sys-color-static-gray-strong",
634
+ /**
635
+ * #333d47
636
+ *
637
+ * Strongerer gray
638
+ */
639
+ "stronger": "--cnvs-sys-color-static-gray-stronger",
640
+ },
641
+ /**
642
+ * #ffffff
643
+ *
644
+ * Just white
645
+ */
646
+ "white": "--cnvs-sys-color-static-white",
647
+ /**
648
+ * #000000
649
+ *
650
+ * Just black
651
+ */
652
+ "black": "--cnvs-sys-color-static-black",
653
+ },
654
+ } as const;
655
+
656
+ export declare const breakpoints = {
657
+ /**
658
+ * 0
659
+ *
660
+ * Use to set a media query `min-width` below small.
661
+ */
662
+ "zero": "--cnvs-sys-breakpoints-zero",
663
+ /**
664
+ * 20rem (320px)
665
+ *
666
+ * The `min-width` for mobile devices, such as phones and tablets.
667
+ */
668
+ "s": "--cnvs-sys-breakpoints-s",
669
+ /**
670
+ * 48rem (768px)
671
+ *
672
+ * Medium screens, such as laptops.
673
+ */
674
+ "m": "--cnvs-sys-breakpoints-m",
675
+ /**
676
+ * 64rem (1024px)
677
+ *
678
+ * Large screens, such as desktops.
679
+ */
680
+ "l": "--cnvs-sys-breakpoints-l",
681
+ /**
682
+ * 90rem (1440px)
683
+ *
684
+ * Used for extra large screens, such as wide monitors and TVs.
685
+ */
686
+ "xl": "--cnvs-sys-breakpoints-xl",
687
+ } as const;
688
+
6
689
  export declare const depth = {
7
690
  /**
8
691
  * 0 0.0625rem 0.25rem 0 rgba(#1f262e,0.12), 0 0.125rem 0.5rem 0 rgba(#1f262e,0.08)
@@ -45,12 +728,50 @@ export declare const depth = {
45
728
  } as const;
46
729
 
47
730
  export declare const opacity = {
731
+ /**
732
+ * 0
733
+ *
734
+ * Dev only
735
+ */
736
+ "zero": "--cnvs-sys-opacity-zero",
48
737
  /**
49
738
  * 0.4
50
739
  *
51
- * State layer added on top of disabled elements.
740
+ * Disabled states
52
741
  */
53
742
  "disabled": "--cnvs-sys-opacity-disabled",
743
+ /**
744
+ * 0.64
745
+ *
746
+ * Overlay
747
+ */
748
+ "overlay": "--cnvs-sys-opacity-overlay",
749
+ /**
750
+ * 0.84
751
+ *
752
+ * Tooltips, Status Indicator
753
+ */
754
+ "contrast": "--cnvs-sys-opacity-contrast",
755
+ /**
756
+ * 1
757
+ *
758
+ * Dev only
759
+ */
760
+ "full": "--cnvs-sys-opacity-full",
761
+ "shadow": {
762
+ /**
763
+ * 0.12
764
+ *
765
+ * Alpha on first shadow
766
+ */
767
+ "first": "--cnvs-sys-opacity-shadow-first",
768
+ /**
769
+ * 0.08
770
+ *
771
+ * Alpha on second shadow
772
+ */
773
+ "second": "--cnvs-sys-opacity-shadow-second",
774
+ },
54
775
  } as const;
55
776
 
56
777
  export declare const shape = {