@blackbaud/skyux-design-tokens 3.2.0 → 4.0.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.
@@ -17,7 +17,9 @@
17
17
  --bb-color-black: #000000;
18
18
  --bb-color-blocking: rgba(255, 255, 255, 0.7);
19
19
  --bb-color-blue-100: #eef3fc;
20
- --bb-color-blue-1000: #09152b;
20
+ --bb-color-blue-1000: #0d2040;
21
+ --bb-color-blue-1100: #0b1b35;
22
+ --bb-color-blue-1200: #081325;
21
23
  --bb-color-blue-200: #d5e1f7;
22
24
  --bb-color-blue-25: #fbfcfe;
23
25
  --bb-color-blue-250: #bfd3f2;
@@ -29,84 +31,109 @@
29
31
  --bb-color-blue-700: #2256aa;
30
32
  --bb-color-blue-800: #1a4080;
31
33
  --bb-color-blue-900: #112b55;
34
+ --bb-color-brand-impact_green: #0cd973;
32
35
  --bb-color-brand-trusted_blue: #004054;
33
- --bb-color-gray-100: #d3d5d6;
36
+ --bb-color-gray-100: #eeeeef;
34
37
  --bb-color-gray-1000: #1e2229;
35
38
  --bb-color-gray-1100: #161a1f;
36
39
  --bb-color-gray-1200: #0f1114;
37
- --bb-color-gray-200: #bebfc2;
38
- --bb-color-gray-25: #f9f9f9;
39
- --bb-color-gray-300: #a8aaad;
40
- --bb-color-gray-400: #929599;
41
- --bb-color-gray-50: #eeeeef;
42
- --bb-color-gray-500: #7c8085;
43
- --bb-color-gray-600: #666b70;
40
+ --bb-color-gray-200: #e0e1e2;
41
+ --bb-color-gray-25: #fbfbfb;
42
+ --bb-color-gray-300: #c2c4c6;
43
+ --bb-color-gray-400: #a3a6a9;
44
+ --bb-color-gray-50: #f4f4f5;
45
+ --bb-color-gray-500: #85888d;
46
+ --bb-color-gray-600: #6b6f74;
44
47
  --bb-color-gray-700: #51555c;
45
48
  --bb-color-gray-800: #3b4047;
46
49
  --bb-color-gray-900: #252b33;
47
- --bb-color-green-100: #ecfcf4;
48
- --bb-color-green-1000: #022b17;
49
- --bb-color-green-200: #cef7e3;
50
- --bb-color-green-300: #9ef0c7;
51
- --bb-color-green-400: #6de8ab;
52
- --bb-color-green-500: #3de18f;
53
- --bb-color-green-600: #0cd973;
54
- --bb-color-green-700: #0aa959;
55
- --bb-color-green-800: #078245;
56
- --bb-color-green-900: #05572e;
57
- --bb-color-orange-100: #fef3eb;
58
- --bb-color-orange-1000: #311400;
59
- --bb-color-orange-200: #fde0cc;
60
- --bb-color-orange-300: #fbc299;
61
- --bb-color-orange-400: #f9a366;
62
- --bb-color-orange-500: #f78533;
63
- --bb-color-orange-600: #f56600;
64
- --bb-color-orange-700: #c45200;
65
- --bb-color-orange-800: #933d00;
50
+ --bb-color-green-100: #d8f9e9;
51
+ --bb-color-green-1000: #033019;
52
+ --bb-color-green-1100: #022312;
53
+ --bb-color-green-1200: #01160b;
54
+ --bb-color-green-200: #a8f1cd;
55
+ --bb-color-green-25: #fafefc;
56
+ --bb-color-green-300: #6de8ab;
57
+ --bb-color-green-400: #0cd973;
58
+ --bb-color-green-50: #ecfcf4;
59
+ --bb-color-green-500: #0abb63;
60
+ --bb-color-green-600: #099c53;
61
+ --bb-color-green-700: #077e43;
62
+ --bb-color-green-800: #055f33;
63
+ --bb-color-green-900: #044525;
64
+ --bb-color-orange-100: #feede0;
65
+ --bb-color-orange-1000: #451d00;
66
+ --bb-color-orange-1100: #311400;
67
+ --bb-color-orange-1200: #1d0c00;
68
+ --bb-color-orange-200: #fcd7bd;
69
+ --bb-color-orange-25: #fffcfa;
70
+ --bb-color-orange-300: #fab98a;
71
+ --bb-color-orange-400: #f8944d;
72
+ --bb-color-orange-50: #fef6f0;
73
+ --bb-color-orange-500: #f56600;
74
+ --bb-color-orange-600: #ce5600;
75
+ --bb-color-orange-700: #a74500;
76
+ --bb-color-orange-800: #7f3500;
66
77
  --bb-color-orange-900: #622900;
67
- --bb-color-pink-100: #fef2fd;
68
- --bb-color-pink-1000: #30132f;
69
- --bb-color-pink-200: #fcdffb;
78
+ --bb-color-pink-100: #fdecfd;
79
+ --bb-color-pink-1000: #3f193d;
80
+ --bb-color-pink-1100: #30132f;
81
+ --bb-color-pink-1200: #1d0c1c;
82
+ --bb-color-pink-200: #fcd9fa;
83
+ --bb-color-pink-25: #fef9fe;
70
84
  --bb-color-pink-300: #fac0f7;
71
- --bb-color-pink-400: #f7a0f3;
72
- --bb-color-pink-500: #f581ef;
73
- --bb-color-pink-600: #f261eb;
74
- --bb-color-pink-700: #c24ebc;
75
- --bb-color-pink-800: #913a8d;
76
- --bb-color-pink-900: #61275e;
77
- --bb-color-purple-100: #f9f2fe;
78
- --bb-color-purple-1000: #231330;
79
- --bb-color-purple-200: #efdffc;
80
- --bb-color-purple-300: #dfc0fa;
85
+ --bb-color-pink-400: #f697f2;
86
+ --bb-color-pink-50: #fef2fd;
87
+ --bb-color-pink-500: #f261eb;
88
+ --bb-color-pink-600: #c650c1;
89
+ --bb-color-pink-700: #a542a0;
90
+ --bb-color-pink-800: #853581;
91
+ --bb-color-pink-900: #5c2559;
92
+ --bb-color-purple-100: #f2e6fd;
93
+ --bb-color-purple-1000: #351d49;
94
+ --bb-color-purple-1100: #271535;
95
+ --bb-color-purple-1200: #190e22;
96
+ --bb-color-purple-200: #e9d3fb;
97
+ --bb-color-purple-25: #fdfbff;
98
+ --bb-color-purple-300: #debdfa;
81
99
  --bb-color-purple-400: #d0a0f7;
100
+ --bb-color-purple-50: #f9f2fe;
82
101
  --bb-color-purple-500: #c081f5;
83
102
  --bb-color-purple-600: #b061f2;
84
103
  --bb-color-purple-700: #8d4ec2;
85
- --bb-color-purple-800: #6a3a91;
86
- --bb-color-purple-900: #462761;
87
- --bb-color-red-100: #fcefef;
88
- --bb-color-red-1000: #2b0c0c;
89
- --bb-color-red-200: #f7d8d8;
90
- --bb-color-red-300: #f0b0b1;
91
- --bb-color-red-400: #e8898b;
92
- --bb-color-red-500: #e16164;
104
+ --bb-color-purple-800: #6d3c96;
105
+ --bb-color-purple-900: #4d2b6a;
106
+ --bb-color-red-100: #fae7e8;
107
+ --bb-color-red-1000: #4a1415;
108
+ --bb-color-red-1100: #380f10;
109
+ --bb-color-red-1200: #270a0b;
110
+ --bb-color-red-200: #f5cccd;
111
+ --bb-color-red-25: #fefbfb;
112
+ --bb-color-red-300: #f1b4b5;
113
+ --bb-color-red-400: #ea9596;
114
+ --bb-color-red-50: #fdf3f3;
115
+ --bb-color-red-500: #e36d6f;
93
116
  --bb-color-red-600: #d93a3d;
94
117
  --bb-color-red-700: #ae2e31;
95
118
  --bb-color-red-800: #822325;
96
- --bb-color-red-900: #571718;
119
+ --bb-color-red-900: #641b1c;
97
120
  --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
98
121
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
99
122
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
100
- --bb-color-sky-100: #ebfbff;
123
+ --bb-color-sky-100: #d6f7ff;
101
124
  --bb-color-sky-1000: #002933;
102
- --bb-color-sky-200: #ccf5ff;
103
- --bb-color-sky-300: #99ecff;
104
- --bb-color-sky-400: #66e2ff;
105
- --bb-color-sky-500: #33d9ff;
106
- --bb-color-sky-600: #00cfff;
107
- --bb-color-sky-700: #00a6cc;
108
- --bb-color-sky-800: #007c99;
109
- --bb-color-sky-900: #005366;
125
+ --bb-color-sky-1100: #002129;
126
+ --bb-color-sky-1200: #001519;
127
+ --bb-color-sky-200: #a8efff;
128
+ --bb-color-sky-25: #fafeff;
129
+ --bb-color-sky-300: #66e2ff;
130
+ --bb-color-sky-400: #00cfff;
131
+ --bb-color-sky-50: #ebfbff;
132
+ --bb-color-sky-500: #00b2db;
133
+ --bb-color-sky-600: #0095b8;
134
+ --bb-color-sky-700: #007894;
135
+ --bb-color-sky-800: #005b70;
136
+ --bb-color-sky-900: #004252;
110
137
  --bb-color-slate-100: #f1f3f7;
111
138
  --bb-color-slate-1000: #1a2231;
112
139
  --bb-color-slate-1100: #141b26;
@@ -122,28 +149,36 @@
122
149
  --bb-color-slate-700: #42597e;
123
150
  --bb-color-slate-800: #32435e;
124
151
  --bb-color-slate-900: #212c3f;
125
- --bb-color-teal-100: #ebfaf9;
126
- --bb-color-teal-1000: #012625;
127
- --bb-color-teal-200: #cdf2f1;
128
- --bb-color-teal-300: #9ce5e3;
129
- --bb-color-teal-400: #6ad8d4;
130
- --bb-color-teal-500: #39cbc6;
131
- --bb-color-teal-600: #07beb8;
132
- --bb-color-teal-700: #069893;
133
- --bb-color-teal-800: #04726e;
134
- --bb-color-teal-900: #034c4a;
152
+ --bb-color-teal-100: #dcf6f5;
153
+ --bb-color-teal-1000: #022a28;
154
+ --bb-color-teal-1100: #011e1d;
155
+ --bb-color-teal-1200: #011312;
156
+ --bb-color-teal-200: #abe9e7;
157
+ --bb-color-teal-25: #fafefe;
158
+ --bb-color-teal-300: #60d5d2;
159
+ --bb-color-teal-400: #07beb8;
160
+ --bb-color-teal-50: #ebfaf9;
161
+ --bb-color-teal-500: #06a39e;
162
+ --bb-color-teal-600: #058984;
163
+ --bb-color-teal-700: #046e6b;
164
+ --bb-color-teal-800: #035755;
165
+ --bb-color-teal-900: #02413f;
135
166
  --bb-color-transparent: rgba(0, 0, 0, 0);
136
167
  --bb-color-white: #ffffff;
137
- --bb-color-yellow-100: #fff9ef;
168
+ --bb-color-yellow-100: #feefd6;
138
169
  --bb-color-yellow-1000: #32230a;
139
- --bb-color-yellow-200: #feefd6;
140
- --bb-color-yellow-300: #fddfae;
141
- --bb-color-yellow-400: #fdd085;
142
- --bb-color-yellow-500: #fcc05d;
143
- --bb-color-yellow-600: #fbb034;
144
- --bb-color-yellow-700: #c98d2a;
145
- --bb-color-yellow-800: #976a1f;
146
- --bb-color-yellow-900: #644615;
170
+ --bb-color-yellow-1100: #231907;
171
+ --bb-color-yellow-1200: #191205;
172
+ --bb-color-yellow-200: #fddfae;
173
+ --bb-color-yellow-25: #fffcf7;
174
+ --bb-color-yellow-300: #fccb79;
175
+ --bb-color-yellow-400: #fbb034;
176
+ --bb-color-yellow-50: #fff6e7;
177
+ --bb-color-yellow-500: #d8972d;
178
+ --bb-color-yellow-600: #b57f25;
179
+ --bb-color-yellow-700: #92661e;
180
+ --bb-color-yellow-800: #6e4d17;
181
+ --bb-color-yellow-900: #503811;
147
182
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
148
183
  --bb-font-blkb_sans-name: BLKB Sans;
149
184
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
@@ -166,13 +201,15 @@
166
201
  --bb-font-style-semibold: 600;
167
202
  --bb-font-style-semibold-italic-style: italic;
168
203
  --bb-font-style-semibold-italic-weight: 600;
204
+ --bb-font-text_transform-uppercase: uppercase;
169
205
  --bb-font-weight-bold: 700;
170
206
  --bb-font-weight-light: 300;
171
207
  --bb-font-weight-regular: 400;
172
208
  --bb-font-weight-semibold: 600;
173
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
209
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.0.0/assets/images/bb-logo.png');
174
210
  --bb-letter_spacing-normal: normal;
175
- --bb-letter_spacing-wider: 0.16px;
211
+ --bb-letter_spacing-wider: 0.01rem;
212
+ --bb-letter_spacing-widest: 0.046875rem;
176
213
  --bb-line_height-200: calc(16/11);
177
214
  --bb-line_height-300: calc(18/13);
178
215
  --bb-line_height-400: calc(20/15);
@@ -291,6 +328,7 @@
291
328
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
292
329
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
293
330
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
331
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
294
332
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
295
333
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
296
334
  --sky-color-background-input-base: var(--bb-color-gray-900);
@@ -397,6 +435,7 @@
397
435
  --sky-color-icon-danger: var(--bb-color-red-400);
398
436
  --sky-color-icon-deemphasized: var(--bb-color-gray-300);
399
437
  --sky-color-icon-default: var(--bb-color-gray-25);
438
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
400
439
  --sky-color-icon-info: var(--bb-color-blue-600);
401
440
  --sky-color-icon-input-action: var(--bb-color-sky-600);
402
441
  --sky-color-icon-inverse: var(--bb-color-gray-1100);
@@ -434,73 +473,74 @@
434
473
  --sky-color-background-action-accent-hover: var(--bb-color-blue-50);
435
474
  --sky-color-background-action-danger-active: var(--bb-color-red-800);
436
475
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
437
- --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
476
+ --sky-color-background-action-danger-disabled: var(--bb-color-gray-100);
438
477
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
439
478
  --sky-color-background-action-danger-hover: var(--bb-color-red-700);
440
479
  --sky-color-background-action-input-active: var(--bb-color-blue-100);
441
480
  --sky-color-background-action-input-base: var(--bb-color-white);
442
- --sky-color-background-action-input-disabled: var(--bb-color-gray-50);
481
+ --sky-color-background-action-input-disabled: var(--bb-color-gray-100);
443
482
  --sky-color-background-action-input-focus: var(--bb-color-white);
444
483
  --sky-color-background-action-input-hover: var(--bb-color-blue-50);
445
484
  --sky-color-background-action-primary-active: var(--bb-color-blue-800);
446
485
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
447
- --sky-color-background-action-primary-disabled: var(--bb-color-gray-50);
486
+ --sky-color-background-action-primary-disabled: var(--bb-color-gray-100);
448
487
  --sky-color-background-action-primary-focus: var(--bb-color-blue-600);
449
488
  --sky-color-background-action-primary-hover: var(--bb-color-blue-700);
450
489
  --sky-color-background-action-secondary-active: var(--bb-color-blue-100);
451
490
  --sky-color-background-action-secondary-base: var(--bb-color-white);
452
- --sky-color-background-action-secondary-disabled: var(--bb-color-gray-50);
491
+ --sky-color-background-action-secondary-disabled: var(--bb-color-gray-100);
453
492
  --sky-color-background-action-secondary-focus: var(--bb-color-white);
454
493
  --sky-color-background-action-secondary-hover: var(--bb-color-blue-50);
455
494
  --sky-color-background-action-tertiary-active: var(--bb-color-blue-100);
456
495
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
457
- --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
496
+ --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-100);
458
497
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
459
498
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
460
499
  --sky-color-background-blocking: var(--bb-color-blocking);
461
500
  --sky-color-background-container-base: var(--bb-color-white);
462
- --sky-color-background-container-danger: var(--bb-color-red-300);
501
+ --sky-color-background-container-danger: var(--bb-color-red-200);
463
502
  --sky-color-background-container-dimmed: var(--bb-color-gray-25);
464
503
  --sky-color-background-container-info: var(--bb-color-blue-200);
465
504
  --sky-color-background-container-menu: var(--bb-color-white);
466
- --sky-color-background-container-success: var(--bb-color-green-300);
505
+ --sky-color-background-container-success: var(--bb-color-green-200);
467
506
  --sky-color-background-container-tooltip: var(--bb-color-gray-900);
468
- --sky-color-background-container-warning: var(--bb-color-yellow-300);
507
+ --sky-color-background-container-warning: var(--bb-color-yellow-200);
469
508
  --sky-color-background-file_drop: var(--bb-color-gray-25);
470
509
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
471
510
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
472
511
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
473
- --sky-color-background-icon_matte-success: var(--bb-color-green-700);
512
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
513
+ --sky-color-background-icon_matte-success: var(--bb-color-green-600);
474
514
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
475
515
  --sky-color-background-input-base: var(--bb-color-white);
476
- --sky-color-background-input-disabled: var(--bb-color-gray-50);
516
+ --sky-color-background-input-disabled: var(--bb-color-gray-100);
477
517
  --sky-color-background-nav-active: var(--bb-color-blue-100);
478
518
  --sky-color-background-nav-base: var(--bb-color-transparent);
479
- --sky-color-background-nav-disabled: var(--bb-color-gray-50);
519
+ --sky-color-background-nav-disabled: var(--bb-color-gray-100);
480
520
  --sky-color-background-nav-focus: var(--bb-color-transparent);
481
521
  --sky-color-background-nav-hover: var(--bb-color-blue-50);
482
- --sky-color-background-page: var(--bb-color-gray-50);
522
+ --sky-color-background-page: var(--bb-color-gray-100);
483
523
  --sky-color-background-row-active: var(--bb-color-blue-100);
484
524
  --sky-color-background-row-base: var(--bb-color-white);
485
- --sky-color-background-row-disabled: var(--bb-color-gray-50);
525
+ --sky-color-background-row-disabled: var(--bb-color-gray-100);
486
526
  --sky-color-background-row-focus: var(--bb-color-white);
487
527
  --sky-color-background-row-hover: var(--bb-color-blue-50);
488
528
  --sky-color-background-scrim: var(--bb-color-scrim);
489
- --sky-color-background-selected-danger: var(--bb-color-red-300);
529
+ --sky-color-background-selected-danger: var(--bb-color-red-200);
490
530
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
491
531
  --sky-color-background-selected-soft: var(--bb-color-blue-100);
492
- --sky-color-background-selected-success: var(--bb-color-green-300);
532
+ --sky-color-background-selected-success: var(--bb-color-green-200);
493
533
  --sky-color-background-selected-switch-base: var(--bb-color-blue-600);
494
- --sky-color-background-selected-switch-disabled: var(--bb-color-gray-50);
495
- --sky-color-background-selected-warning: var(--bb-color-yellow-300);
534
+ --sky-color-background-selected-switch-disabled: var(--bb-color-gray-100);
535
+ --sky-color-background-selected-warning: var(--bb-color-yellow-200);
496
536
  --sky-color-background-tab-active: var(--bb-color-transparent);
497
537
  --sky-color-background-tab-base: var(--bb-color-transparent);
498
- --sky-color-background-tab-disabled: var(--bb-color-gray-50);
538
+ --sky-color-background-tab-disabled: var(--bb-color-gray-100);
499
539
  --sky-color-background-tab-focus: var(--bb-color-transparent);
500
540
  --sky-color-background-tab-hover: var(--bb-color-transparent);
501
541
  --sky-color-background-tab-selected: var(--bb-color-transparent);
502
542
  --sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
503
- --sky-color-background-text_highlight: var(--bb-color-yellow-400);
543
+ --sky-color-background-text_highlight: var(--bb-color-yellow-300);
504
544
  --sky-color-background-thumb-base: var(--bb-color-white);
505
545
  --sky-color-background-thumb-disabled: var(--bb-color-gray-25);
506
546
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
@@ -511,70 +551,70 @@
511
551
  --sky-color-border-action-accent-hover: var(--bb-color-blue-600);
512
552
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
513
553
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
514
- --sky-color-border-action-danger-disabled: var(--bb-color-gray-200);
554
+ --sky-color-border-action-danger-disabled: var(--bb-color-gray-300);
515
555
  --sky-color-border-action-danger-focus: var(--bb-color-red-1000);
516
556
  --sky-color-border-action-danger-hover: var(--bb-color-red-1000);
517
557
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
518
- --sky-color-border-action-input-base: var(--bb-color-gray-200);
519
- --sky-color-border-action-input-disabled: var(--bb-color-gray-200);
558
+ --sky-color-border-action-input-base: var(--bb-color-gray-300);
559
+ --sky-color-border-action-input-disabled: var(--bb-color-gray-300);
520
560
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
521
561
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
522
562
  --sky-color-border-action-primary-active: var(--bb-color-blue-1000);
523
563
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
524
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-200);
564
+ --sky-color-border-action-primary-disabled: var(--bb-color-gray-300);
525
565
  --sky-color-border-action-primary-focus: var(--bb-color-blue-1000);
526
566
  --sky-color-border-action-primary-hover: var(--bb-color-blue-1000);
527
567
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
528
- --sky-color-border-action-secondary-base: var(--bb-color-gray-200);
529
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-200);
568
+ --sky-color-border-action-secondary-base: var(--bb-color-gray-300);
569
+ --sky-color-border-action-secondary-disabled: var(--bb-color-gray-300);
530
570
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
531
571
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
532
572
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
533
573
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
534
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-200);
574
+ --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-300);
535
575
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
536
576
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
537
577
  --sky-color-border-column_divider: var(--bb-color-blue-600);
538
- --sky-color-border-container-base: var(--bb-color-gray-100);
578
+ --sky-color-border-container-base: var(--bb-color-gray-200);
539
579
  --sky-color-border-danger: var(--bb-color-red-600);
540
- --sky-color-border-divider: var(--bb-color-gray-200);
541
- --sky-color-border-elevation: var(--bb-color-gray-100);
580
+ --sky-color-border-divider: var(--bb-color-gray-300);
581
+ --sky-color-border-elevation: var(--bb-color-gray-200);
542
582
  --sky-color-border-info: var(--bb-color-blue-600);
543
583
  --sky-color-border-input-active: var(--bb-color-blue-600);
544
- --sky-color-border-input-base: var(--bb-color-gray-200);
545
- --sky-color-border-input-disabled: var(--bb-color-gray-200);
584
+ --sky-color-border-input-base: var(--bb-color-gray-300);
585
+ --sky-color-border-input-disabled: var(--bb-color-gray-300);
546
586
  --sky-color-border-input-error: var(--bb-color-red-600);
547
587
  --sky-color-border-input-focus: var(--bb-color-blue-600);
548
588
  --sky-color-border-input-hover: var(--bb-color-blue-600);
549
589
  --sky-color-border-nav-active: var(--bb-color-blue-600);
550
590
  --sky-color-border-nav-base: var(--bb-color-transparent);
551
- --sky-color-border-nav-disabled: var(--bb-color-gray-200);
591
+ --sky-color-border-nav-disabled: var(--bb-color-gray-300);
552
592
  --sky-color-border-nav-focus: var(--bb-color-blue-600);
553
593
  --sky-color-border-nav-hover: var(--bb-color-blue-600);
554
594
  --sky-color-border-progress_step: var(--bb-color-gray-400);
555
595
  --sky-color-border-selected: var(--bb-color-blue-600);
556
596
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
557
- --sky-color-border-separator-light: var(--bb-color-gray-100);
558
- --sky-color-border-separator-row: var(--bb-color-gray-100);
559
- --sky-color-border-success: var(--bb-color-green-700);
597
+ --sky-color-border-separator-light: var(--bb-color-gray-200);
598
+ --sky-color-border-separator-row: var(--bb-color-gray-200);
599
+ --sky-color-border-success: var(--bb-color-green-600);
560
600
  --sky-color-border-switch-active: var(--bb-color-blue-600);
561
601
  --sky-color-border-switch-base: var(--bb-color-gray-500);
562
- --sky-color-border-switch-disabled: var(--bb-color-gray-200);
602
+ --sky-color-border-switch-disabled: var(--bb-color-gray-300);
563
603
  --sky-color-border-switch-error: var(--bb-color-red-600);
564
604
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
565
605
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
566
606
  --sky-color-border-switch-selected-active: var(--bb-color-blue-1000);
567
607
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
568
- --sky-color-border-switch-selected-disabled: var(--bb-color-gray-200);
608
+ --sky-color-border-switch-selected-disabled: var(--bb-color-gray-300);
569
609
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-1000);
570
610
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
571
611
  --sky-color-border-tab-active: var(--bb-color-blue-600);
572
612
  --sky-color-border-tab-base: var(--bb-color-transparent);
573
- --sky-color-border-tab-disabled: var(--bb-color-gray-200);
613
+ --sky-color-border-tab-disabled: var(--bb-color-gray-300);
574
614
  --sky-color-border-tab-focus: var(--bb-color-blue-600);
575
615
  --sky-color-border-tab-hover: var(--bb-color-blue-600);
576
616
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
577
- --sky-color-border-text_highlight: var(--bb-color-yellow-800);
617
+ --sky-color-border-text_highlight: var(--bb-color-yellow-700);
578
618
  --sky-color-border-warning: var(--bb-color-yellow-600);
579
619
  --sky-color-category-blue: var(--bb-color-sky-300);
580
620
  --sky-color-category-green: var(--bb-color-green-300);
@@ -583,18 +623,33 @@
583
623
  --sky-color-category-red: var(--bb-color-red-300);
584
624
  --sky-color-category-teal: var(--bb-color-teal-400);
585
625
  --sky-color-category-yellow: var(--bb-color-yellow-300);
626
+ --sky-color-classify-1-heavy: var(--bb-color-teal-700);
627
+ --sky-color-classify-1-soft: var(--bb-color-teal-200);
628
+ --sky-color-classify-2-heavy: var(--bb-color-purple-700);
629
+ --sky-color-classify-2-soft: var(--bb-color-purple-200);
630
+ --sky-color-classify-3-heavy: var(--bb-color-blue-700);
631
+ --sky-color-classify-3-soft: var(--bb-color-blue-200);
632
+ --sky-color-classify-4-heavy: var(--bb-color-orange-700);
633
+ --sky-color-classify-4-soft: var(--bb-color-orange-200);
634
+ --sky-color-classify-5-heavy: var(--bb-color-pink-700);
635
+ --sky-color-classify-5-soft: var(--bb-color-pink-200);
636
+ --sky-color-classify-6-heavy: var(--bb-color-green-700);
637
+ --sky-color-classify-6-soft: var(--bb-color-green-200);
638
+ --sky-color-classify-7-heavy: var(--bb-color-red-700);
639
+ --sky-color-classify-7-soft: var(--bb-color-red-200);
586
640
  --sky-color-icon-action: var(--bb-color-blue-600);
587
641
  --sky-color-icon-danger: var(--bb-color-red-600);
588
642
  --sky-color-icon-deemphasized: var(--bb-color-gray-600);
589
643
  --sky-color-icon-default: var(--bb-color-gray-900);
644
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
590
645
  --sky-color-icon-info: var(--bb-color-blue-600);
591
646
  --sky-color-icon-input-action: var(--bb-color-gray-600);
592
647
  --sky-color-icon-inverse: var(--bb-color-white);
593
648
  --sky-color-icon-selected: var(--bb-color-blue-600);
594
- --sky-color-icon-success: var(--bb-color-green-700);
649
+ --sky-color-icon-success: var(--bb-color-green-600);
595
650
  --sky-color-icon-warning: var(--bb-color-yellow-600);
596
- --sky-color-illustration-fill-heavy: var(--bb-color-green-400);
597
- --sky-color-illustration-fill-soft: var(--bb-color-green-100);
651
+ --sky-color-illustration-fill-heavy: var(--bb-color-green-300);
652
+ --sky-color-illustration-fill-soft: var(--bb-color-green-50);
598
653
  --sky-color-illustration-fill-softest: var(--bb-color-white);
599
654
  --sky-color-illustration-stroke: var(--bb-color-brand-trusted_blue);
600
655
  --sky-color-text-action: var(--bb-color-blue-600);
@@ -605,6 +660,47 @@
605
660
  --sky-color-text-heading: var(--bb-color-gray-1100);
606
661
  --sky-color-text-inverse: var(--bb-color-white);
607
662
  --sky-color-text-selected: var(--bb-color-blue-600);
663
+ --sky-color-viz-axis: var(--bb-color-gray-500);
664
+ --sky-color-viz-category-1: var(--bb-color-teal-500);
665
+ --sky-color-viz-category-2: var(--bb-color-purple-800);
666
+ --sky-color-viz-category-3: var(--bb-color-blue-500);
667
+ --sky-color-viz-category-4: var(--bb-color-sky-900);
668
+ --sky-color-viz-category-5: var(--bb-color-orange-600);
669
+ --sky-color-viz-category-6: var(--bb-color-red-800);
670
+ --sky-color-viz-category-7: var(--bb-color-pink-600);
671
+ --sky-color-viz-category-8: var(--bb-color-green-700);
672
+ --sky-color-viz-diverge-neg-1: var(--bb-color-red-100);
673
+ --sky-color-viz-diverge-neg-10: var(--bb-color-red-1000);
674
+ --sky-color-viz-diverge-neg-2: var(--bb-color-red-200);
675
+ --sky-color-viz-diverge-neg-3: var(--bb-color-red-300);
676
+ --sky-color-viz-diverge-neg-4: var(--bb-color-red-400);
677
+ --sky-color-viz-diverge-neg-5: var(--bb-color-red-500);
678
+ --sky-color-viz-diverge-neg-6: var(--bb-color-red-600);
679
+ --sky-color-viz-diverge-neg-7: var(--bb-color-red-700);
680
+ --sky-color-viz-diverge-neg-8: var(--bb-color-red-800);
681
+ --sky-color-viz-diverge-neg-9: var(--bb-color-red-900);
682
+ --sky-color-viz-diverge-pos-1: var(--bb-color-blue-100);
683
+ --sky-color-viz-diverge-pos-10: var(--bb-color-blue-1000);
684
+ --sky-color-viz-diverge-pos-2: var(--bb-color-blue-200);
685
+ --sky-color-viz-diverge-pos-3: var(--bb-color-blue-300);
686
+ --sky-color-viz-diverge-pos-4: var(--bb-color-blue-400);
687
+ --sky-color-viz-diverge-pos-5: var(--bb-color-blue-500);
688
+ --sky-color-viz-diverge-pos-6: var(--bb-color-blue-600);
689
+ --sky-color-viz-diverge-pos-7: var(--bb-color-blue-700);
690
+ --sky-color-viz-diverge-pos-8: var(--bb-color-blue-800);
691
+ --sky-color-viz-diverge-pos-9: var(--bb-color-blue-900);
692
+ --sky-color-viz-gridline: var(--bb-color-gray-200);
693
+ --sky-color-viz-marker: var(--bb-color-gray-900);
694
+ --sky-color-viz-sequence-1: var(--bb-color-teal-100);
695
+ --sky-color-viz-sequence-10: var(--bb-color-teal-1000);
696
+ --sky-color-viz-sequence-2: var(--bb-color-teal-200);
697
+ --sky-color-viz-sequence-3: var(--bb-color-teal-300);
698
+ --sky-color-viz-sequence-4: var(--bb-color-teal-400);
699
+ --sky-color-viz-sequence-5: var(--bb-color-teal-500);
700
+ --sky-color-viz-sequence-6: var(--bb-color-teal-600);
701
+ --sky-color-viz-sequence-7: var(--bb-color-teal-700);
702
+ --sky-color-viz-sequence-8: var(--bb-color-teal-800);
703
+ --sky-color-viz-sequence-9: var(--bb-color-teal-900);
608
704
  --sky-elevation-action-danger-active: var(--bb-shadow-gray-0);
609
705
  --sky-elevation-action-danger-base: var(--bb-shadow-gray-0);
610
706
  --sky-elevation-action-danger-disabled: var(--bb-shadow-gray-0);
@@ -1165,6 +1261,7 @@
1165
1261
  --sky-comp-wizard-tabset-tabs-space-inset-right: var(--bb-size-fluid-150);
1166
1262
  --sky-comp-wizard-tabset-tabs-space-inset-top: var(--bb-size-0);
1167
1263
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
1264
+ --sky-font-letter_spacing-eyebrow: var(--bb-letter_spacing-widest);
1168
1265
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-wider);
1169
1266
  --sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
1170
1267
  --sky-font-line_height-body-l: var(--bb-line_height-500);
@@ -1175,6 +1272,7 @@
1175
1272
  --sky-font-line_height-display-2: var(--bb-line_height-650);
1176
1273
  --sky-font-line_height-display-3: var(--bb-line_height-600);
1177
1274
  --sky-font-line_height-display-4: var(--bb-line_height-500);
1275
+ --sky-font-line_height-eyebrow: var(--bb-line_height-400);
1178
1276
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1179
1277
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1180
1278
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1192,6 +1290,7 @@
1192
1290
  --sky-font-size-display-2: var(--bb-font-size-650);
1193
1291
  --sky-font-size-display-3: var(--bb-font-size-600);
1194
1292
  --sky-font-size-display-4: var(--bb-font-size-500);
1293
+ --sky-font-size-eyebrow: var(--bb-font-size-400);
1195
1294
  --sky-font-size-heading-1: var(--bb-font-size-800);
1196
1295
  --sky-font-size-heading-2: var(--bb-font-size-600);
1197
1296
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1210,12 +1309,14 @@
1210
1309
  --sky-font-style-display-3: var(--bb-font-style-semibold);
1211
1310
  --sky-font-style-display-4: var(--bb-font-style-semibold);
1212
1311
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1312
+ --sky-font-style-eyebrow: var(--bb-font-style-semibold);
1213
1313
  --sky-font-style-heading-1: var(--bb-font-style-regular);
1214
1314
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
1215
1315
  --sky-font-style-heading-3: var(--bb-font-style-semibold);
1216
1316
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
1217
1317
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
1218
1318
  --sky-font-style-input-label: var(--bb-font-style-regular);
1319
+ --sky-font-text_transform-eyebrow: var(--bb-font-text_transform-uppercase);
1219
1320
  --sky-size-avatar-l: var(--bb-size-fluid-550);
1220
1321
  --sky-size-avatar-m: var(--bb-size-fluid-350);
1221
1322
  --sky-size-avatar-s: var(--bb-size-fluid-200);
@@ -1336,24 +1437,25 @@
1336
1437
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
1337
1438
  --sky-space-stacked-xs: var(--bb-size-fluid-25);
1338
1439
  --sky-space-stacked-xxl: var(--bb-size-fluid-300);
1440
+ --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/32 'var(--bb-font-blkb_sans-name)';
1441
+ --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/28 'var(--bb-font-blkb_sans-name)';
1442
+ --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/28 'var(--bb-font-blkb_sans-name)';
1443
+ --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/24 'var(--bb-font-blkb_sans-name)';
1444
+ --sky-type-eyebrow: var(--sky-font-style-eyebrow) var(--sky-font-size-eyebrow)/20 'var(--bb-font-blkb_sans-name)';
1445
+ --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/28 'var(--bb-font-blkb_sans-name)';
1446
+ --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/24 'var(--bb-font-blkb_sans-name)';
1447
+ --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/20 'var(--bb-font-blkb_sans-name)';
1448
+ --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/20 'var(--bb-font-blkb_sans-name)';
1449
+ --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/20 'var(--bb-font-blkb_sans-name)';
1450
+ --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/18 'var(--bb-font-blkb_sans-name)';
1451
+ --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/18 'var(--bb-font-blkb_sans-name)';
1339
1452
  --sky-comp-checkbox-border-radius: var(--sky-border-radius-s);
1340
1453
  --sky-font-family-primary: var(--bb-font-blkb_sans-family);
1341
1454
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
1342
- --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/var(--sky-font-line_height-body-l) var(--sky-font-family-primary);
1343
- --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/var(--sky-font-line_height-body-m) var(--sky-font-family-primary);
1344
- --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/var(--sky-font-line_height-body-s) var(--sky-font-family-primary);
1345
- --sky-type-body-xs: var(--sky-font-style-body-xs) var(--sky-font-size-body-xs)/var(--sky-font-line_height-body-xs) var(--sky-font-family-primary);
1346
- --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/var(--sky-font-line_height-heading-1) var(--sky-font-family-primary);
1347
- --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/var(--sky-font-line_height-input-val) var(--sky-font-family-primary);
1348
- --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/var(--sky-font-line_height-display-1) var(--sky-font-family-primary);
1349
- --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/var(--sky-font-line_height-display-2) var(--sky-font-family-primary);
1350
- --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/var(--sky-font-line_height-display-3) var(--sky-font-family-primary);
1351
- --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/var(--sky-font-line_height-display-4) var(--sky-font-family-primary);
1352
- --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/var(--sky-font-line_height-heading-2) var(--sky-font-family-primary);
1353
- --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/var(--sky-font-line_height-heading-3) var(--sky-font-family-primary);
1354
- --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/var(--sky-font-line_height-heading-4) var(--sky-font-family-primary);
1355
- --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/var(--sky-font-line_height-heading-5) var(--sky-font-family-primary);
1356
- --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-primary);
1357
- --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
1358
- --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/var(--sky-font-line_height-input-label) var(--sky-font-family-primary);
1455
+ --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/24 'var(--bb-font-blkb_sans-name)';
1456
+ --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/20 'var(--bb-font-blkb_sans-name)';
1457
+ --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/18 'var(--bb-font-blkb_sans-name)';
1458
+ --sky-type-body-xs: var(--sky-font-style-body-xs) var(--sky-font-size-body-xs)/16 'var(--bb-font-blkb_sans-name)';
1459
+ --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/36 'var(--bb-font-blkb_sans-name)';
1460
+ --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/20 'var(--bb-font-blkb_sans-name)';
1359
1461
  }