@blackbaud/skyux-design-tokens 6.0.1 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/README.md +6 -2
- package/assets/assets.json +1 -1
- package/assets/scss/base.css +180 -52
- package/assets/scss/blackbaud.css +276 -133
- package/bundles/base.css +180 -52
- package/bundles/blackbaud.css +276 -133
- package/bundles/public-api.css +5 -5
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,20 @@
|
|
|
5
5
|
|
|
6
6
|
* add omnibar toaster padding ([#342](https://github.com/blackbaud/skyux-design-tokens/issues/342)) ([4095f97](https://github.com/blackbaud/skyux-design-tokens/commit/4095f97ba31a2f619444bf41dd6d279475258066))
|
|
7
7
|
|
|
8
|
+
## [6.1.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.0.2...6.1.0) (2026-07-16)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* new dark mode colors ([#359](https://github.com/blackbaud/skyux-design-tokens/issues/359)) ([f6184a5](https://github.com/blackbaud/skyux-design-tokens/commit/f6184a56f26a56420ab5d4549215f9d369d56b3f))
|
|
14
|
+
|
|
15
|
+
## [6.0.2](https://github.com/blackbaud/skyux-design-tokens/compare/6.0.1...6.0.2) (2026-05-12)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* assign default custom property values in root ([#356](https://github.com/blackbaud/skyux-design-tokens/issues/356)) ([950f764](https://github.com/blackbaud/skyux-design-tokens/commit/950f7645419850447e13fe9a70546400be697713))
|
|
21
|
+
|
|
8
22
|
## [6.0.1](https://github.com/blackbaud/skyux-design-tokens/compare/6.0.0...6.0.1) (2026-04-23)
|
|
9
23
|
|
|
10
24
|
|
package/README.md
CHANGED
|
@@ -20,6 +20,10 @@ To create these result files locally, clone this repository, run `npm install` a
|
|
|
20
20
|
|
|
21
21
|
If you see a test failure that indicates the test is "obsolete," it means that the outputted tokens have changed and the snapshot test failed. To update the snapshot, run `vitest run --update` and review the changes to the snapshot file to ensure they are all expected. If you do not have `vitest` installed, run `npm i -g vitest`.
|
|
22
22
|
|
|
23
|
-
## Testing
|
|
23
|
+
## Testing with local preview
|
|
24
24
|
|
|
25
|
-
To
|
|
25
|
+
To view local tokens changes in production SPAs, ensure you have a `.env.local` file and run the command `npm run dev`. The local preview will apply to all SPAs at the same domain as the `VITE_LAUNCH_URL` specified in your `.env.local`. The preview will refresh when you edit and save a file.
|
|
26
|
+
|
|
27
|
+
If you do not have an `.env.local` file, reach out to someone on the team for help setting it up.
|
|
28
|
+
|
|
29
|
+
To add additional CSS to any SPA you are locally previewing, create a file `src/dev/extra-styles.css`. This stylesheet will be added to the SPA and can be used to override styles for testing purposes. It is a regular CSS file, so Angular selectors like `:ng-deep` and `:host` and SCSS nesting syntax will not work. `!important` will work, and will be helpful for testing.
|
package/assets/assets.json
CHANGED
package/assets/scss/base.css
CHANGED
|
@@ -79,6 +79,16 @@
|
|
|
79
79
|
--bb-color-blue-800: #1a4080;
|
|
80
80
|
--bb-color-blue-850: #16366b;
|
|
81
81
|
--bb-color-blue-900: #112b55;
|
|
82
|
+
--bb-color-blue-dark-100: #ddf0ff;
|
|
83
|
+
--bb-color-blue-dark-1000: #00112b;
|
|
84
|
+
--bb-color-blue-dark-200: #b4dbff;
|
|
85
|
+
--bb-color-blue-dark-300: #83c1ff;
|
|
86
|
+
--bb-color-blue-dark-400: #59a6ff;
|
|
87
|
+
--bb-color-blue-dark-500: #2885ef;
|
|
88
|
+
--bb-color-blue-dark-600: #0066cd;
|
|
89
|
+
--bb-color-blue-dark-700: #0049a1;
|
|
90
|
+
--bb-color-blue-dark-800: #003275;
|
|
91
|
+
--bb-color-blue-dark-900: #00204b;
|
|
82
92
|
--bb-color-brand-impact_green: #0cd973;
|
|
83
93
|
--bb-color-brand-trusted_blue: #004054;
|
|
84
94
|
--bb-color-gray-100: #eeeeef;
|
|
@@ -111,6 +121,17 @@
|
|
|
111
121
|
--bb-color-green-700: #077e43;
|
|
112
122
|
--bb-color-green-800: #055f33;
|
|
113
123
|
--bb-color-green-900: #044525;
|
|
124
|
+
--bb-color-green-dark-100: #daf7e3;
|
|
125
|
+
--bb-color-green-dark-1000: #001905;
|
|
126
|
+
--bb-color-green-dark-200: #aee8c1;
|
|
127
|
+
--bb-color-green-dark-300: #72d699;
|
|
128
|
+
--bb-color-green-dark-400: #35c177;
|
|
129
|
+
--bb-color-green-dark-500: #00a452;
|
|
130
|
+
--bb-color-green-dark-600: #008435;
|
|
131
|
+
--bb-color-green-dark-700: #00641f;
|
|
132
|
+
--bb-color-green-dark-800: #004712;
|
|
133
|
+
--bb-color-green-dark-900: #002d0c;
|
|
134
|
+
--bb-color-oklch-blue-375: #79adf1;
|
|
114
135
|
--bb-color-orange-100: #feede0;
|
|
115
136
|
--bb-color-orange-1000: #451d00;
|
|
116
137
|
--bb-color-orange-1100: #311400;
|
|
@@ -125,6 +146,16 @@
|
|
|
125
146
|
--bb-color-orange-700: #a74500;
|
|
126
147
|
--bb-color-orange-800: #7f3500;
|
|
127
148
|
--bb-color-orange-900: #622900;
|
|
149
|
+
--bb-color-orange-dark-100: #ffe9df;
|
|
150
|
+
--bb-color-orange-dark-1000: #200b03;
|
|
151
|
+
--bb-color-orange-dark-200: #fbccb6;
|
|
152
|
+
--bb-color-orange-dark-300: #f3aa88;
|
|
153
|
+
--bb-color-orange-dark-400: #e5895d;
|
|
154
|
+
--bb-color-orange-dark-500: #ca6633;
|
|
155
|
+
--bb-color-orange-dark-600: #a74500;
|
|
156
|
+
--bb-color-orange-dark-700: #822f00;
|
|
157
|
+
--bb-color-orange-dark-800: #5c2000;
|
|
158
|
+
--bb-color-orange-dark-900: #3a1503;
|
|
128
159
|
--bb-color-pink-100: #fdecfd;
|
|
129
160
|
--bb-color-pink-1000: #3f193d;
|
|
130
161
|
--bb-color-pink-1100: #30132f;
|
|
@@ -139,6 +170,16 @@
|
|
|
139
170
|
--bb-color-pink-700: #a542a0;
|
|
140
171
|
--bb-color-pink-800: #853581;
|
|
141
172
|
--bb-color-pink-900: #5c2559;
|
|
173
|
+
--bb-color-pink-dark-100: #fbe8f9;
|
|
174
|
+
--bb-color-pink-dark-1000: #1b0a1b;
|
|
175
|
+
--bb-color-pink-dark-200: #f0c9ec;
|
|
176
|
+
--bb-color-pink-dark-300: #e3a6de;
|
|
177
|
+
--bb-color-pink-dark-400: #d285cd;
|
|
178
|
+
--bb-color-pink-dark-500: #b562b1;
|
|
179
|
+
--bb-color-pink-dark-600: #923f8f;
|
|
180
|
+
--bb-color-pink-dark-700: #722c70;
|
|
181
|
+
--bb-color-pink-dark-800: #501d4f;
|
|
182
|
+
--bb-color-pink-dark-900: #331431;
|
|
142
183
|
--bb-color-purple-100: #f2e6fd;
|
|
143
184
|
--bb-color-purple-1000: #351d49;
|
|
144
185
|
--bb-color-purple-1100: #271535;
|
|
@@ -153,6 +194,16 @@
|
|
|
153
194
|
--bb-color-purple-700: #8d4ec2;
|
|
154
195
|
--bb-color-purple-800: #6d3c96;
|
|
155
196
|
--bb-color-purple-900: #4d2b6a;
|
|
197
|
+
--bb-color-purple-dark-100: #f4e9ff;
|
|
198
|
+
--bb-color-purple-dark-1000: #170b23;
|
|
199
|
+
--bb-color-purple-dark-200: #e3ccff;
|
|
200
|
+
--bb-color-purple-dark-300: #d0aafb;
|
|
201
|
+
--bb-color-purple-dark-400: #bc89f1;
|
|
202
|
+
--bb-color-purple-dark-500: #9f65d7;
|
|
203
|
+
--bb-color-purple-dark-600: #7a3daf;
|
|
204
|
+
--bb-color-purple-dark-700: #622e8f;
|
|
205
|
+
--bb-color-purple-dark-800: #441f65;
|
|
206
|
+
--bb-color-purple-dark-900: #2b153f;
|
|
156
207
|
--bb-color-red-100: #fae7e8;
|
|
157
208
|
--bb-color-red-1000: #4a1415;
|
|
158
209
|
--bb-color-red-1100: #380f10;
|
|
@@ -167,11 +218,33 @@
|
|
|
167
218
|
--bb-color-red-700: #ae2e31;
|
|
168
219
|
--bb-color-red-800: #822325;
|
|
169
220
|
--bb-color-red-900: #641b1c;
|
|
221
|
+
--bb-color-red-dark-100: #fdecea;
|
|
222
|
+
--bb-color-red-dark-1000: #27090a;
|
|
223
|
+
--bb-color-red-dark-200: #facac8;
|
|
224
|
+
--bb-color-red-dark-300: #f59a98;
|
|
225
|
+
--bb-color-red-dark-400: #e96063;
|
|
226
|
+
--bb-color-red-dark-500: #d93a3d;
|
|
227
|
+
--bb-color-red-dark-600: #b52f32;
|
|
228
|
+
--bb-color-red-dark-700: #912528;
|
|
229
|
+
--bb-color-red-dark-800: #6d1b1d;
|
|
230
|
+
--bb-color-red-dark-900: #4a1213;
|
|
170
231
|
--bb-color-rgba-black-70: rgba(0, 0, 0, 0.7);
|
|
232
|
+
--bb-color-rgba-blue-600-25: rgba(43, 107, 213, 0.25);
|
|
233
|
+
--bb-color-rgba-blue-600-35: rgba(43, 107, 213, 0.35);
|
|
234
|
+
--bb-color-rgba-blue-600-50: rgba(43, 107, 213, 0.5);
|
|
235
|
+
--bb-color-rgba-green-600-35: rgba(9, 156, 83, 0.35);
|
|
236
|
+
--bb-color-rgba-green-600-50: rgba(9, 156, 83, 0.5);
|
|
171
237
|
--bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
|
|
238
|
+
--bb-color-rgba-red-dark-600-35: rgba(181, 47, 50, 0.35);
|
|
239
|
+
--bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
|
|
172
240
|
--bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
|
|
241
|
+
--bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
|
|
242
|
+
--bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
|
|
173
243
|
--bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
|
|
174
|
-
--bb-color-
|
|
244
|
+
--bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
|
|
245
|
+
--bb-color-rgba-yellow-dark-600-35: rgba(162, 81, 0, 0.35);
|
|
246
|
+
--bb-color-scrim-heavy: rgba(0, 0, 0, 0.6);
|
|
247
|
+
--bb-color-scrim-soft: rgba(37, 43, 51, 0.5);
|
|
175
248
|
--bb-color-sky-100: #d6f7ff;
|
|
176
249
|
--bb-color-sky-1000: #002933;
|
|
177
250
|
--bb-color-sky-1100: #002129;
|
|
@@ -186,6 +259,16 @@
|
|
|
186
259
|
--bb-color-sky-700: #007894;
|
|
187
260
|
--bb-color-sky-800: #005b70;
|
|
188
261
|
--bb-color-sky-900: #004252;
|
|
262
|
+
--bb-color-sky-dark-100: #e3f1f7;
|
|
263
|
+
--bb-color-sky-dark-1000: #051419;
|
|
264
|
+
--bb-color-sky-dark-200: #bfdde9;
|
|
265
|
+
--bb-color-sky-dark-300: #96c6d9;
|
|
266
|
+
--bb-color-sky-dark-400: #6fafc7;
|
|
267
|
+
--bb-color-sky-dark-500: #4791ab;
|
|
268
|
+
--bb-color-sky-dark-600: #005f78;
|
|
269
|
+
--bb-color-sky-dark-700: #0c556b;
|
|
270
|
+
--bb-color-sky-dark-800: #083b4b;
|
|
271
|
+
--bb-color-sky-dark-900: #09252f;
|
|
189
272
|
--bb-color-slate-100: #f1f3f7;
|
|
190
273
|
--bb-color-slate-1000: #1a2231;
|
|
191
274
|
--bb-color-slate-1100: #141b26;
|
|
@@ -202,6 +285,20 @@
|
|
|
202
285
|
--bb-color-slate-800: #32435e;
|
|
203
286
|
--bb-color-slate-850: #2a384f;
|
|
204
287
|
--bb-color-slate-900: #212c3f;
|
|
288
|
+
--bb-color-steel-fusion-100: #f3f6f9;
|
|
289
|
+
--bb-color-steel-fusion-1000: #2a313c;
|
|
290
|
+
--bb-color-steel-fusion-1050: #21282f;
|
|
291
|
+
--bb-color-steel-fusion-1100: #1c2228;
|
|
292
|
+
--bb-color-steel-fusion-1150: #181e25;
|
|
293
|
+
--bb-color-steel-fusion-1200: #141a1f;
|
|
294
|
+
--bb-color-steel-fusion-200: #e0e4e8;
|
|
295
|
+
--bb-color-steel-fusion-300: #c8cdd3;
|
|
296
|
+
--bb-color-steel-fusion-400: #b0b6bc;
|
|
297
|
+
--bb-color-steel-fusion-500: #929ba4;
|
|
298
|
+
--bb-color-steel-fusion-600: #757e88;
|
|
299
|
+
--bb-color-steel-fusion-700: #5e6770;
|
|
300
|
+
--bb-color-steel-fusion-800: #4a5259;
|
|
301
|
+
--bb-color-steel-fusion-900: #363d44;
|
|
205
302
|
--bb-color-teal-100: #dcf6f5;
|
|
206
303
|
--bb-color-teal-1000: #022a28;
|
|
207
304
|
--bb-color-teal-1100: #011e1d;
|
|
@@ -216,6 +313,16 @@
|
|
|
216
313
|
--bb-color-teal-700: #046e6b;
|
|
217
314
|
--bb-color-teal-800: #035755;
|
|
218
315
|
--bb-color-teal-900: #02413f;
|
|
316
|
+
--bb-color-teal-dark-100: #e1f3f1;
|
|
317
|
+
--bb-color-teal-dark-1000: #031514;
|
|
318
|
+
--bb-color-teal-dark-200: #bce0dd;
|
|
319
|
+
--bb-color-teal-dark-300: #8fcbc7;
|
|
320
|
+
--bb-color-teal-dark-400: #63b5b0;
|
|
321
|
+
--bb-color-teal-dark-500: #359793;
|
|
322
|
+
--bb-color-teal-dark-600: #047e7a;
|
|
323
|
+
--bb-color-teal-dark-700: #005b57;
|
|
324
|
+
--bb-color-teal-dark-800: #003f3d;
|
|
325
|
+
--bb-color-teal-dark-900: #022826;
|
|
219
326
|
--bb-color-transparent: rgba(0, 0, 0, 0);
|
|
220
327
|
--bb-color-white: #ffffff;
|
|
221
328
|
--bb-color-yellow-100: #feefd6;
|
|
@@ -232,6 +339,16 @@
|
|
|
232
339
|
--bb-color-yellow-700: #92661e;
|
|
233
340
|
--bb-color-yellow-800: #6e4d17;
|
|
234
341
|
--bb-color-yellow-900: #503811;
|
|
342
|
+
--bb-color-yellow-dark-100: #fff8ec;
|
|
343
|
+
--bb-color-yellow-dark-1000: #200c00;
|
|
344
|
+
--bb-color-yellow-dark-200: #fef0d0;
|
|
345
|
+
--bb-color-yellow-dark-300: #fde0a8;
|
|
346
|
+
--bb-color-yellow-dark-400: #fbb034;
|
|
347
|
+
--bb-color-yellow-dark-500: #c37000;
|
|
348
|
+
--bb-color-yellow-dark-600: #a25100;
|
|
349
|
+
--bb-color-yellow-dark-700: #7d3800;
|
|
350
|
+
--bb-color-yellow-dark-800: #5a2500;
|
|
351
|
+
--bb-color-yellow-dark-900: #391800;
|
|
235
352
|
--bb-duration-150: 150ms;
|
|
236
353
|
--bb-duration-250: 250ms;
|
|
237
354
|
--bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
|
|
@@ -262,15 +379,15 @@
|
|
|
262
379
|
--bb-font-weight-light: 300;
|
|
263
380
|
--bb-font-weight-regular: 400;
|
|
264
381
|
--bb-font-weight-semibold: 600;
|
|
265
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.0
|
|
266
|
-
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.0
|
|
267
|
-
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.0
|
|
268
|
-
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.0
|
|
269
|
-
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.0
|
|
270
|
-
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.0
|
|
271
|
-
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.0
|
|
272
|
-
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.0
|
|
273
|
-
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.0
|
|
382
|
+
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.1.0/assets/images/bb-logo.png');
|
|
383
|
+
--bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.1.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
|
|
384
|
+
--bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.1.0/assets/images/chevron_up_down_20_fill-base-light.svg');
|
|
385
|
+
--bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.1.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
|
|
386
|
+
--bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.1.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
|
|
387
|
+
--bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.1.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
|
|
388
|
+
--bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.1.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
|
|
389
|
+
--bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.1.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
|
|
390
|
+
--bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.1.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
|
|
274
391
|
--bb-letter_spacing-normal: normal;
|
|
275
392
|
--bb-letter_spacing-wider: 0.01rem;
|
|
276
393
|
--bb-letter_spacing-widest: 0.046875rem;
|
|
@@ -285,8 +402,6 @@
|
|
|
285
402
|
--bb-line_height-700: calc(32/24);
|
|
286
403
|
--bb-line_height-800: calc(36/27);
|
|
287
404
|
--bb-opacity-600: .6;
|
|
288
|
-
--bb-shadow-gray-0: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
289
|
-
--bb-shadow-slate-0: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
290
405
|
--bb-size-0: 0rem;
|
|
291
406
|
--bb-size-fixed-100: 16px;
|
|
292
407
|
--bb-size-fixed-12: 2px;
|
|
@@ -337,8 +452,10 @@
|
|
|
337
452
|
--bb-space-8: 24px;
|
|
338
453
|
--bb-space-9: 36px;
|
|
339
454
|
--bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
|
|
340
|
-
--bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40), var(--bb-color-rgba-purple-600-40));
|
|
455
|
+
--bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40) , var(--bb-color-rgba-purple-600-40));
|
|
456
|
+
--bb-color-gradient-container-primary: linear-gradient(90deg, var(--bb-color-steel-fusion-700), var(--bb-color-steel-fusion-800));
|
|
341
457
|
--bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
|
|
458
|
+
--bb-shadow-gray-0: 0 0 0 0 rgba(22, 26, 31, 0);
|
|
342
459
|
--bb-shadow-gray-100: 0 1px 3px 0 rgba(22, 26, 31, 0.2), 0 2px 1px -1px rgba(22, 26, 31, 0.12), 0 1px 1px 0 rgba(22, 26, 31, 0.14);
|
|
343
460
|
--bb-shadow-gray-1600: 0 8px 10px -5px rgba(22, 26, 31, 0.2), 0 6px 30px 5px rgba(22, 26, 31, 0.12), 0 16px 24px 2px rgba(30, 34, 41, 0.14);
|
|
344
461
|
--bb-shadow-gray-200: 0 1px 8px 0 rgba(22, 26, 31, 0.2), 0 3px 3px -2px rgba(22, 26, 31, 0.12), 0 3px 4px 0 rgba(22, 26, 31, 0.14);
|
|
@@ -348,15 +465,26 @@
|
|
|
348
465
|
--bb-shadow-gray-50: 0 1px 1px 0 rgba(22, 26, 31, 0.12), 0 1.5px 1px -1px rgba(22, 26, 31, 0.12);
|
|
349
466
|
--bb-shadow-gray-800: 0 5px 5px -3px rgba(22, 26, 31, 0.2), 0 3px 14px 2px rgba(22, 26, 31, 0.12), 0 8px 10px 1px rgba(22, 26, 31, 0.14);
|
|
350
467
|
--bb-shadow-gray-simple-400: 1px 2px 4px 0 rgba(22, 26, 31, 0.5);
|
|
351
|
-
--bb-shadow-
|
|
352
|
-
--bb-shadow-
|
|
353
|
-
--bb-shadow-
|
|
354
|
-
--bb-shadow-
|
|
355
|
-
--bb-shadow-
|
|
356
|
-
--bb-shadow-
|
|
357
|
-
--bb-shadow-
|
|
358
|
-
--bb-shadow-
|
|
359
|
-
--bb-shadow-
|
|
468
|
+
--bb-shadow-heavy-black-0: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
469
|
+
--bb-shadow-heavy-black-100: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .25), 0 1px 1px 0 rgba(0, 0, 0, .28);
|
|
470
|
+
--bb-shadow-heavy-black-1600: 0 8px 10px -5px rgba(0, 0, 0, 0.36), 0 6px 30px 5px rgba(0, 0, 0, 0.22), 0 16px 24px 2px rgba(0, 0, 0, 0.25);
|
|
471
|
+
--bb-shadow-heavy-black-200: 0 1px 8px 0 rgba(0, 0, 0, 0.5), 0 3px 3px -2px rgba(0, 0, 0, 0.3), 0 3px 4px 0 rgba(0, 0, 0, 0.35);
|
|
472
|
+
--bb-shadow-heavy-black-2400: 0 11px 15px -7px rgba(0, 0, 0, 0.34), 0 9px 46px 8px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.24);
|
|
473
|
+
--bb-shadow-heavy-black-25: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
|
|
474
|
+
--bb-shadow-heavy-black-400: 0 2px 4px -1px rgba(0, 0, 0, 0.24), 0 1px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 5px 0 rgba(0, 0, 0, 0.21);
|
|
475
|
+
--bb-shadow-heavy-black-50: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1.5px 1px -1px rgba(0, 0, 0, 0.6);
|
|
476
|
+
--bb-shadow-heavy-black-800: 0 5px 5px -3px rgba(0, 0, 0, 0.24), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.1);
|
|
477
|
+
--bb-shadow-heavy-black-simple-400: 1px 2px 4px 0 rgba(0, 0, 0, 0.65);
|
|
478
|
+
--bb-shadow-slate-0: 0 0 0 0 rgba(12, 16, 22, 0);
|
|
479
|
+
--bb-shadow-slate-100: 0 1px 3px 0 rgba(12, 16, 22, 0.2), 0 2px 1px -1px rgba(12, 16, 22, 0.12), 0 1px 1px 0 rgba(12, 16, 22, 0.14);
|
|
480
|
+
--bb-shadow-slate-1600: 0 8px 10px -5px rgba(12, 16, 22, 0.2), 0 6px 30px 5px rgba(12, 16, 22, 0.12), 0 16px 24px 2px rgba(12, 16, 22, 0.14);
|
|
481
|
+
--bb-shadow-slate-200: 0 1px 8px 0 rgba(12, 16, 22, 0.2), 0 3px 3px -2px rgba(12, 16, 22, 0.12), 0 3px 4px 0 rgba(12, 16, 22, 0.14);
|
|
482
|
+
--bb-shadow-slate-2400: 0 11px 15px -7px rgba(12, 16, 22, 0.2), 0 9px 46px 8px rgba(12, 16, 22, 0.12), 0 24px 38px 3px rgba(12, 16, 22, 0.14);
|
|
483
|
+
--bb-shadow-slate-25: 0 1px 1px 0 rgba(12, 16, 22, 0.05);
|
|
484
|
+
--bb-shadow-slate-400: 0 2px 4px -1px rgba(12, 16, 22, 0.2), 0 1px 10px 0 rgba(12, 16, 22, 0.12), 0 4px 5px 0 rgba(12, 16, 22, 0.14);
|
|
485
|
+
--bb-shadow-slate-50: 0 1px 1px 0 rgba(12, 16, 22, 0.05), 0 1.5px 1px -1px rgba(12, 16, 22, 0.12);
|
|
486
|
+
--bb-shadow-slate-800: 0 5px 5px -3px rgba(12, 16, 22, 0.2), 0 3px 14px 2px rgba(12, 16, 22, 0.12), 0 8px 10px 1px rgba(12, 16, 22, 0.14);
|
|
487
|
+
--bb-shadow-slate-simple-400: 1px 2px 4px 0 rgba(12, 16, 22, 0.5);
|
|
360
488
|
}
|
|
361
489
|
.sky-theme-modern.sky-theme-brand-base {
|
|
362
490
|
--sky-brand-name: var(--bb-brand-name);
|
|
@@ -412,7 +540,7 @@
|
|
|
412
540
|
--sky-color-background-row-base: var(--bb-color-white);
|
|
413
541
|
--sky-color-background-row-focus: var(--bb-color-white);
|
|
414
542
|
--sky-color-background-row-hover: var(--bb-color-blue-50);
|
|
415
|
-
--sky-color-background-scrim: var(--bb-color-scrim);
|
|
543
|
+
--sky-color-background-scrim: var(--bb-color-scrim-soft);
|
|
416
544
|
--sky-color-background-selected-danger: var(--bb-color-red-200);
|
|
417
545
|
--sky-color-background-selected-heavy: var(--bb-color-blue-600);
|
|
418
546
|
--sky-color-background-selected-soft: var(--bb-color-blue-100);
|
|
@@ -576,6 +704,32 @@
|
|
|
576
704
|
--sky-color-viz-sequence-7: var(--bb-color-teal-700);
|
|
577
705
|
--sky-color-viz-sequence-8: var(--bb-color-teal-800);
|
|
578
706
|
--sky-color-viz-sequence-9: var(--bb-color-teal-900);
|
|
707
|
+
--sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
|
|
708
|
+
--sky-image-select_icon-base: var(--bb-image-select_icon-base-light-src);
|
|
709
|
+
--sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-light-src);
|
|
710
|
+
--sky-opacity-wait: var(--bb-opacity-600);
|
|
711
|
+
--sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
|
|
712
|
+
--sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
|
|
713
|
+
--sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
|
|
714
|
+
--sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
|
|
715
|
+
--sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
|
|
716
|
+
--sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
|
|
717
|
+
--sky-color-background-input-disabled: var(--sky-color-background-disabled);
|
|
718
|
+
--sky-color-background-nav-disabled: var(--sky-color-background-disabled);
|
|
719
|
+
--sky-color-background-row-disabled: var(--sky-color-background-disabled);
|
|
720
|
+
--sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
|
|
721
|
+
--sky-color-background-tab-disabled: var(--sky-color-background-disabled);
|
|
722
|
+
--sky-color-border-action-accent-disabled: var(--sky-color-border-disabled);
|
|
723
|
+
--sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
|
|
724
|
+
--sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
|
|
725
|
+
--sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
|
|
726
|
+
--sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
|
|
727
|
+
--sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
|
|
728
|
+
--sky-color-border-input-disabled: var(--sky-color-border-disabled);
|
|
729
|
+
--sky-color-border-nav-disabled: var(--sky-color-border-disabled);
|
|
730
|
+
--sky-color-border-switch-disabled: var(--sky-color-border-disabled);
|
|
731
|
+
--sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
|
|
732
|
+
--sky-color-border-tab-disabled: var(--sky-color-border-disabled);
|
|
579
733
|
--sky-elevation-action-danger-active: var(--bb-shadow-gray-0);
|
|
580
734
|
--sky-elevation-action-danger-base: var(--bb-shadow-gray-0);
|
|
581
735
|
--sky-elevation-action-danger-disabled: var(--bb-shadow-gray-0);
|
|
@@ -606,36 +760,10 @@
|
|
|
606
760
|
--sky-elevation-action-toolbar-disabled: var(--bb-shadow-gray-0);
|
|
607
761
|
--sky-elevation-action-toolbar-focus: var(--bb-shadow-gray-0);
|
|
608
762
|
--sky-elevation-action-toolbar-hover: var(--bb-shadow-gray-0);
|
|
763
|
+
--sky-elevation-focus: var(--bb-shadow-gray-200);
|
|
609
764
|
--sky-elevation-input-base: var(--bb-shadow-gray-0);
|
|
610
765
|
--sky-elevation-input-disabled: var(--bb-shadow-gray-0);
|
|
611
766
|
--sky-elevation-none: var(--bb-shadow-gray-0);
|
|
612
|
-
--sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
|
|
613
|
-
--sky-image-select_icon-base: var(--bb-image-select_icon-base-light-src);
|
|
614
|
-
--sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-light-src);
|
|
615
|
-
--sky-opacity-wait: var(--bb-opacity-600);
|
|
616
|
-
--sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
|
|
617
|
-
--sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
|
|
618
|
-
--sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
|
|
619
|
-
--sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
|
|
620
|
-
--sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
|
|
621
|
-
--sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
|
|
622
|
-
--sky-color-background-input-disabled: var(--sky-color-background-disabled);
|
|
623
|
-
--sky-color-background-nav-disabled: var(--sky-color-background-disabled);
|
|
624
|
-
--sky-color-background-row-disabled: var(--sky-color-background-disabled);
|
|
625
|
-
--sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
|
|
626
|
-
--sky-color-background-tab-disabled: var(--sky-color-background-disabled);
|
|
627
|
-
--sky-color-border-action-accent-disabled: var(--sky-color-border-disabled);
|
|
628
|
-
--sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
|
|
629
|
-
--sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
|
|
630
|
-
--sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
|
|
631
|
-
--sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
|
|
632
|
-
--sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
|
|
633
|
-
--sky-color-border-input-disabled: var(--sky-color-border-disabled);
|
|
634
|
-
--sky-color-border-nav-disabled: var(--sky-color-border-disabled);
|
|
635
|
-
--sky-color-border-switch-disabled: var(--sky-color-border-disabled);
|
|
636
|
-
--sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
|
|
637
|
-
--sky-color-border-tab-disabled: var(--sky-color-border-disabled);
|
|
638
|
-
--sky-elevation-focus: var(--bb-shadow-gray-200);
|
|
639
767
|
--sky-elevation-overflow: var(--bb-shadow-gray-200);
|
|
640
768
|
--sky-elevation-overlay-100: var(--bb-shadow-gray-400);
|
|
641
769
|
--sky-elevation-overlay-200: var(--bb-shadow-gray-800);
|
|
@@ -697,7 +825,7 @@
|
|
|
697
825
|
--sky-color-background-row-base: var(--bb-color-gray-1000);
|
|
698
826
|
--sky-color-background-row-focus: var(--bb-color-gray-1000);
|
|
699
827
|
--sky-color-background-row-hover: var(--bb-color-transparent);
|
|
700
|
-
--sky-color-background-scrim: var(--bb-color-scrim);
|
|
828
|
+
--sky-color-background-scrim: var(--bb-color-scrim-heavy);
|
|
701
829
|
--sky-color-background-selected-danger: var(--bb-color-red-900);
|
|
702
830
|
--sky-color-background-selected-heavy: var(--bb-color-blue-600);
|
|
703
831
|
--sky-color-background-selected-soft: var(--bb-color-blue-900);
|
|
@@ -862,7 +990,6 @@
|
|
|
862
990
|
--sky-color-viz-sequence-7: var(--bb-color-teal-400);
|
|
863
991
|
--sky-color-viz-sequence-8: var(--bb-color-teal-300);
|
|
864
992
|
--sky-color-viz-sequence-9: var(--bb-color-teal-200);
|
|
865
|
-
--sky-elevation-none: var(--bb-shadow-gray-0);
|
|
866
993
|
--sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
|
|
867
994
|
--sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
|
|
868
995
|
--sky-opacity-wait: var(--bb-opacity-600);
|
|
@@ -889,6 +1016,7 @@
|
|
|
889
1016
|
--sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
|
|
890
1017
|
--sky-color-border-tab-disabled: var(--sky-color-border-disabled);
|
|
891
1018
|
--sky-elevation-focus: var(--bb-shadow-gray-200);
|
|
1019
|
+
--sky-elevation-none: var(--bb-shadow-gray-0);
|
|
892
1020
|
--sky-elevation-overflow: var(--bb-shadow-gray-200);
|
|
893
1021
|
--sky-elevation-overlay-100: var(--bb-shadow-gray-400);
|
|
894
1022
|
--sky-elevation-overlay-200: var(--bb-shadow-gray-800);
|