@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.
Files changed (9) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +241 -139
  4. package/assets/scss/blackbaud.css +120 -82
  5. package/assets/scss/modern.css +1 -1
  6. package/bundles/base.css +241 -139
  7. package/bundles/blackbaud.css +120 -82
  8. package/bundles/modern.css +1 -1
  9. package/package.json +1 -1
package/assets/scss/blackbaud.css CHANGED
@@ -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);
@@ -277,8 +314,8 @@
277
314
  --sky-color-category-teal: var(--bb-color-teal-400);
278
315
  --sky-color-category-yellow: var(--bb-color-yellow-300);
279
316
  --sky-color-icon-input-action: var(--bb-color-blue-600);
280
- --sky-color-illustration-fill-heavy: var(--bb-color-green-400);
281
- --sky-color-illustration-fill-soft: var(--bb-color-green-100);
317
+ --sky-color-illustration-fill-heavy: var(--bb-color-green-300);
318
+ --sky-color-illustration-fill-soft: var(--bb-color-green-50);
282
319
  --sky-color-illustration-fill-softest: var(--bb-color-white);
283
320
  --sky-color-illustration-stroke: var(--bb-color-brand-trusted_blue);
284
321
  --sky-color-text-heading: var(--bb-color-blue-900);
@@ -365,6 +402,7 @@
365
402
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
366
403
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
367
404
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
405
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
368
406
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
369
407
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
370
408
  --sky-color-background-input-base: var(--bb-color-gray-900);
package/assets/scss/modern.css CHANGED
@@ -77,7 +77,7 @@
77
77
  --modern-font-weight-light: 300;
78
78
  --modern-font-weight-regular: 400;
79
79
  --modern-font-weight-semibold: 600;
80
- --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.0.0/assets/images/bb-logo.png');
81
81
  --modern-letter_spacing-normal: normal;
82
82
  --modern-line_height-110: 1.1;
83
83
  --modern-line_height-115: 1.15;