@blackbaud/skyux-design-tokens 3.0.0 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +44 -1
  4. package/assets/scss/blackbaud.css +6 -1
  5. package/assets/scss/modern.css +1 -1
  6. package/bundles/base.css +44 -1
  7. package/bundles/blackbaud.css +6 -1
  8. package/bundles/modern.css +1 -1
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  - Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
4
4
 
5
+ ## [3.1.1](https://github.com/blackbaud/skyux-design-tokens/compare/3.1.0...3.1.1) (2025-10-15)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * use rgba tokens for linear gradient ([#291](https://github.com/blackbaud/skyux-design-tokens/issues/291)) ([1e0827f](https://github.com/blackbaud/skyux-design-tokens/commit/1e0827faf9d46ab07d5140d842821c39b695924c))
11
+
12
+ ## [3.1.0](https://github.com/blackbaud/skyux-design-tokens/compare/3.0.0...3.1.0) (2025-10-14)
13
+
14
+
15
+ ### Features
16
+
17
+ * add tokens for omnibar elements ([#289](https://github.com/blackbaud/skyux-design-tokens/issues/289)) ([1a74b25](https://github.com/blackbaud/skyux-design-tokens/commit/1a74b259e96274d95b2f5ce3ffdbcb79e3e2151e))
18
+
5
19
  ## [3.0.0](https://github.com/blackbaud/skyux-design-tokens/compare/3.0.0-alpha.4...3.0.0) (2025-09-15)
6
20
 
7
21
 
package/assets/assets.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "fonts": [],
3
3
  "images": {
4
4
  "favicon": {
5
- "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/scss/base.css CHANGED
@@ -94,6 +94,8 @@
94
94
  --bb-color-red-700: #ae2e31;
95
95
  --bb-color-red-800: #822325;
96
96
  --bb-color-red-900: #571718;
97
+ --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
98
+ --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
97
99
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
98
100
  --bb-color-sky-100: #ebfbff;
99
101
  --bb-color-sky-1000: #002933;
@@ -167,7 +169,7 @@
167
169
  --bb-font-weight-light: 300;
168
170
  --bb-font-weight-regular: 400;
169
171
  --bb-font-weight-semibold: 600;
170
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0/assets/images/bb-logo.png');
172
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/assets/images/bb-logo.png');
171
173
  --bb-letter_spacing-normal: normal;
172
174
  --bb-letter_spacing-wider: 0.16px;
173
175
  --bb-line_height-300: calc(18/13);
@@ -229,6 +231,7 @@
229
231
  --bb-space-8: 24px;
230
232
  --bb-space-9: 36px;
231
233
  --bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
234
+ --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40), var(--bb-color-rgba-purple-600-40));
232
235
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
233
236
  --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);
234
237
  --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);
@@ -280,6 +283,7 @@
280
283
  --sky-color-background-container-info: var(--bb-color-blue-800);
281
284
  --sky-color-background-container-menu: var(--bb-color-gray-900);
282
285
  --sky-color-background-container-success: var(--bb-color-green-900);
286
+ --sky-color-background-container-tooltip: var(--bb-color-gray-25);
283
287
  --sky-color-background-container-warning: var(--bb-color-yellow-800);
284
288
  --sky-color-background-file_drop: var(--bb-color-gray-1000);
285
289
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
@@ -421,6 +425,11 @@
421
425
  }
422
426
  .sky-theme-modern.sky-theme-brand-base {
423
427
  --sky-brand-name: var(--bb-brand-name);
428
+ --sky-color-background-action-accent-active: var(--bb-color-blue-100);
429
+ --sky-color-background-action-accent-base: var(--bb-color-white);
430
+ --sky-color-background-action-accent-disabled: var(--bb-color-gray-50);
431
+ --sky-color-background-action-accent-focus: var(--bb-color-white);
432
+ --sky-color-background-action-accent-hover: var(--bb-color-blue-50);
424
433
  --sky-color-background-action-danger-active: var(--bb-color-red-800);
425
434
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
426
435
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
@@ -453,6 +462,7 @@
453
462
  --sky-color-background-container-info: var(--bb-color-blue-200);
454
463
  --sky-color-background-container-menu: var(--bb-color-white);
455
464
  --sky-color-background-container-success: var(--bb-color-green-300);
465
+ --sky-color-background-container-tooltip: var(--bb-color-gray-900);
456
466
  --sky-color-background-container-warning: var(--bb-color-yellow-300);
457
467
  --sky-color-background-file_drop: var(--bb-color-gray-25);
458
468
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
@@ -492,6 +502,11 @@
492
502
  --sky-color-background-thumb-base: var(--bb-color-white);
493
503
  --sky-color-background-thumb-disabled: var(--bb-color-gray-25);
494
504
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
505
+ --sky-color-border-action-accent-active: var(--bb-color-blue-600);
506
+ --sky-color-border-action-accent-base: var(--bb-color-gray-200);
507
+ --sky-color-border-action-accent-disabled: var(--bb-color-gray-200);
508
+ --sky-color-border-action-accent-focus: var(--bb-color-blue-600);
509
+ --sky-color-border-action-accent-hover: var(--bb-color-blue-600);
495
510
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
496
511
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
497
512
  --sky-color-border-action-danger-disabled: var(--bb-color-gray-200);
@@ -783,6 +798,14 @@
783
798
  --sky-comp-dropdown-option-space-inset-left: var(--bb-size-fluid-100);
784
799
  --sky-comp-dropdown-option-space-inset-right: var(--bb-size-fluid-100);
785
800
  --sky-comp-dropdown-option-space-inset-top: var(--bb-size-fluid-50);
801
+ --sky-comp-dropdown-separator-space-inset-bottom: var(--bb-size-fluid-75);
802
+ --sky-comp-dropdown-separator-space-inset-left: var(--bb-size-fluid-100);
803
+ --sky-comp-dropdown-separator-space-inset-right: var(--bb-size-fluid-100);
804
+ --sky-comp-dropdown-separator-space-inset-top: var(--bb-size-fluid-75);
805
+ --sky-comp-dropdown-subheader-space-inset-bottom: var(--bb-size-fluid-25);
806
+ --sky-comp-dropdown-subheader-space-inset-left: var(--bb-size-fluid-100);
807
+ --sky-comp-dropdown-subheader-space-inset-right: var(--bb-size-fluid-100);
808
+ --sky-comp-dropdown-subheader-space-inset-top: var(--bb-size-fluid-75);
786
809
  --sky-comp-file_drop-content-space-inset-bottom: var(--bb-size-fluid-50);
787
810
  --sky-comp-file_drop-content-space-inset-left: var(--bb-size-fluid-50);
788
811
  --sky-comp-file_drop-content-space-inset-right: var(--bb-size-fluid-50);
@@ -951,6 +974,22 @@
951
974
  --sky-comp-navbar_item-space-inset-left: var(--bb-size-fluid-50);
952
975
  --sky-comp-navbar_item-space-inset-right: var(--bb-size-fluid-50);
953
976
  --sky-comp-navbar_item-space-inset-top: var(--bb-size-fluid-75);
977
+ --sky-comp-omnibar-vertical-item-space-inset-bottom: var(--bb-size-fixed-50);
978
+ --sky-comp-omnibar-vertical-item-space-inset-left: var(--bb-size-fixed-50);
979
+ --sky-comp-omnibar-vertical-item-space-inset-right: var(--bb-size-fixed-50);
980
+ --sky-comp-omnibar-vertical-item-space-inset-top: var(--bb-size-fixed-50);
981
+ --sky-comp-omnibar-vertical-menu-space-inset-bottom: var(--bb-size-fixed-75);
982
+ --sky-comp-omnibar-vertical-menu-space-inset-left: var(--bb-size-fixed-75);
983
+ --sky-comp-omnibar-vertical-menu-space-inset-right: var(--bb-size-fixed-75);
984
+ --sky-comp-omnibar-vertical-menu-space-inset-top: var(--bb-size-fixed-75);
985
+ --sky-comp-omnibar-vertical-subitem-space-inset-bottom: var(--bb-size-fluid-50);
986
+ --sky-comp-omnibar-vertical-subitem-space-inset-left: var(--bb-size-fluid-100);
987
+ --sky-comp-omnibar-vertical-subitem-space-inset-right: var(--bb-size-fluid-100);
988
+ --sky-comp-omnibar-vertical-subitem-space-inset-top: var(--bb-size-fluid-50);
989
+ --sky-comp-omnibar-vertical-submenu-space-inset-bottom: var(--bb-size-fluid-50);
990
+ --sky-comp-omnibar-vertical-submenu-space-inset-left: var(--bb-size-fluid-100);
991
+ --sky-comp-omnibar-vertical-submenu-space-inset-right: var(--bb-size-0);
992
+ --sky-comp-omnibar-vertical-submenu-space-inset-top: var(--bb-size-0);
954
993
  --sky-comp-paging_button-space-inset-bottom: var(--bb-size-fluid-25);
955
994
  --sky-comp-paging_button-space-inset-left: var(--bb-size-fluid-50);
956
995
  --sky-comp-paging_button-space-inset-right: var(--bb-size-fluid-50);
@@ -1103,6 +1142,10 @@
1103
1142
  --sky-comp-toolbar-space-inset-left: var(--bb-size-fluid-50);
1104
1143
  --sky-comp-toolbar-space-inset-right: var(--bb-size-fluid-50);
1105
1144
  --sky-comp-toolbar-space-inset-top: var(--bb-size-fluid-50);
1145
+ --sky-comp-tooltip-space-inset-bottom: var(--bb-size-fluid-25);
1146
+ --sky-comp-tooltip-space-inset-left: var(--bb-size-fluid-50);
1147
+ --sky-comp-tooltip-space-inset-right: var(--bb-size-fluid-50);
1148
+ --sky-comp-tooltip-space-inset-top: var(--bb-size-fluid-25);
1106
1149
  --sky-comp-tree-child-space-inset-bottom: var(--bb-size-0);
1107
1150
  --sky-comp-tree-child-space-inset-left: var(--bb-size-fluid-150);
1108
1151
  --sky-comp-tree-child-space-inset-right: var(--bb-size-0);
package/assets/scss/blackbaud.css CHANGED
@@ -94,6 +94,8 @@
94
94
  --bb-color-red-700: #ae2e31;
95
95
  --bb-color-red-800: #822325;
96
96
  --bb-color-red-900: #571718;
97
+ --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
98
+ --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
97
99
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
98
100
  --bb-color-sky-100: #ebfbff;
99
101
  --bb-color-sky-1000: #002933;
@@ -167,7 +169,7 @@
167
169
  --bb-font-weight-light: 300;
168
170
  --bb-font-weight-regular: 400;
169
171
  --bb-font-weight-semibold: 600;
170
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0/assets/images/bb-logo.png');
172
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/assets/images/bb-logo.png');
171
173
  --bb-letter_spacing-normal: normal;
172
174
  --bb-letter_spacing-wider: 0.16px;
173
175
  --bb-line_height-300: calc(18/13);
@@ -229,6 +231,7 @@
229
231
  --bb-space-8: 24px;
230
232
  --bb-space-9: 36px;
231
233
  --bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
234
+ --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40), var(--bb-color-rgba-purple-600-40));
232
235
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
233
236
  --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);
234
237
  --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);
@@ -249,6 +252,7 @@
249
252
  }
250
253
  .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
251
254
  --sky-brand-name: var(--bb-brand-name);
255
+ --sky-color-background-action-accent-base: var(--bb-color-blue-25);
252
256
  --sky-color-background-container-dimmed: var(--bb-color-slate-25);
253
257
  --sky-color-background-file_drop: var(--bb-color-slate-25);
254
258
  --sky-color-background-input-base: var(--bb-color-slate-25);
@@ -296,6 +300,7 @@
296
300
  --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
297
301
  --sky-opacity-wait: var(--bb-opacity-600);
298
302
  --sky-color-background-selected-switch-base: var(--bb-color-gradient-blue);
303
+ --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
299
304
  --sky-elevation-action-danger-base: var(--bb-shadow-slate-50);
300
305
  --sky-elevation-action-danger-focus: var(--bb-shadow-slate-50);
301
306
  --sky-elevation-action-danger-hover: var(--bb-shadow-slate-50);
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.0.0/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/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;
package/bundles/base.css CHANGED
@@ -94,6 +94,8 @@
94
94
  --bb-color-red-700: #ae2e31;
95
95
  --bb-color-red-800: #822325;
96
96
  --bb-color-red-900: #571718;
97
+ --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
98
+ --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
97
99
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
98
100
  --bb-color-sky-100: #ebfbff;
99
101
  --bb-color-sky-1000: #002933;
@@ -167,7 +169,7 @@
167
169
  --bb-font-weight-light: 300;
168
170
  --bb-font-weight-regular: 400;
169
171
  --bb-font-weight-semibold: 600;
170
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0/assets/images/bb-logo.png');
172
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/assets/images/bb-logo.png');
171
173
  --bb-letter_spacing-normal: normal;
172
174
  --bb-letter_spacing-wider: 0.16px;
173
175
  --bb-line_height-300: calc(18/13);
@@ -229,6 +231,7 @@
229
231
  --bb-space-8: 24px;
230
232
  --bb-space-9: 36px;
231
233
  --bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
234
+ --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40), var(--bb-color-rgba-purple-600-40));
232
235
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
233
236
  --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);
234
237
  --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);
@@ -280,6 +283,7 @@
280
283
  --sky-color-background-container-info: var(--bb-color-blue-800);
281
284
  --sky-color-background-container-menu: var(--bb-color-gray-900);
282
285
  --sky-color-background-container-success: var(--bb-color-green-900);
286
+ --sky-color-background-container-tooltip: var(--bb-color-gray-25);
283
287
  --sky-color-background-container-warning: var(--bb-color-yellow-800);
284
288
  --sky-color-background-file_drop: var(--bb-color-gray-1000);
285
289
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
@@ -421,6 +425,11 @@
421
425
  }
422
426
  .sky-theme-modern.sky-theme-brand-base {
423
427
  --sky-brand-name: var(--bb-brand-name);
428
+ --sky-color-background-action-accent-active: var(--bb-color-blue-100);
429
+ --sky-color-background-action-accent-base: var(--bb-color-white);
430
+ --sky-color-background-action-accent-disabled: var(--bb-color-gray-50);
431
+ --sky-color-background-action-accent-focus: var(--bb-color-white);
432
+ --sky-color-background-action-accent-hover: var(--bb-color-blue-50);
424
433
  --sky-color-background-action-danger-active: var(--bb-color-red-800);
425
434
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
426
435
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
@@ -453,6 +462,7 @@
453
462
  --sky-color-background-container-info: var(--bb-color-blue-200);
454
463
  --sky-color-background-container-menu: var(--bb-color-white);
455
464
  --sky-color-background-container-success: var(--bb-color-green-300);
465
+ --sky-color-background-container-tooltip: var(--bb-color-gray-900);
456
466
  --sky-color-background-container-warning: var(--bb-color-yellow-300);
457
467
  --sky-color-background-file_drop: var(--bb-color-gray-25);
458
468
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
@@ -492,6 +502,11 @@
492
502
  --sky-color-background-thumb-base: var(--bb-color-white);
493
503
  --sky-color-background-thumb-disabled: var(--bb-color-gray-25);
494
504
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
505
+ --sky-color-border-action-accent-active: var(--bb-color-blue-600);
506
+ --sky-color-border-action-accent-base: var(--bb-color-gray-200);
507
+ --sky-color-border-action-accent-disabled: var(--bb-color-gray-200);
508
+ --sky-color-border-action-accent-focus: var(--bb-color-blue-600);
509
+ --sky-color-border-action-accent-hover: var(--bb-color-blue-600);
495
510
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
496
511
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
497
512
  --sky-color-border-action-danger-disabled: var(--bb-color-gray-200);
@@ -783,6 +798,14 @@
783
798
  --sky-comp-dropdown-option-space-inset-left: var(--bb-size-fluid-100);
784
799
  --sky-comp-dropdown-option-space-inset-right: var(--bb-size-fluid-100);
785
800
  --sky-comp-dropdown-option-space-inset-top: var(--bb-size-fluid-50);
801
+ --sky-comp-dropdown-separator-space-inset-bottom: var(--bb-size-fluid-75);
802
+ --sky-comp-dropdown-separator-space-inset-left: var(--bb-size-fluid-100);
803
+ --sky-comp-dropdown-separator-space-inset-right: var(--bb-size-fluid-100);
804
+ --sky-comp-dropdown-separator-space-inset-top: var(--bb-size-fluid-75);
805
+ --sky-comp-dropdown-subheader-space-inset-bottom: var(--bb-size-fluid-25);
806
+ --sky-comp-dropdown-subheader-space-inset-left: var(--bb-size-fluid-100);
807
+ --sky-comp-dropdown-subheader-space-inset-right: var(--bb-size-fluid-100);
808
+ --sky-comp-dropdown-subheader-space-inset-top: var(--bb-size-fluid-75);
786
809
  --sky-comp-file_drop-content-space-inset-bottom: var(--bb-size-fluid-50);
787
810
  --sky-comp-file_drop-content-space-inset-left: var(--bb-size-fluid-50);
788
811
  --sky-comp-file_drop-content-space-inset-right: var(--bb-size-fluid-50);
@@ -951,6 +974,22 @@
951
974
  --sky-comp-navbar_item-space-inset-left: var(--bb-size-fluid-50);
952
975
  --sky-comp-navbar_item-space-inset-right: var(--bb-size-fluid-50);
953
976
  --sky-comp-navbar_item-space-inset-top: var(--bb-size-fluid-75);
977
+ --sky-comp-omnibar-vertical-item-space-inset-bottom: var(--bb-size-fixed-50);
978
+ --sky-comp-omnibar-vertical-item-space-inset-left: var(--bb-size-fixed-50);
979
+ --sky-comp-omnibar-vertical-item-space-inset-right: var(--bb-size-fixed-50);
980
+ --sky-comp-omnibar-vertical-item-space-inset-top: var(--bb-size-fixed-50);
981
+ --sky-comp-omnibar-vertical-menu-space-inset-bottom: var(--bb-size-fixed-75);
982
+ --sky-comp-omnibar-vertical-menu-space-inset-left: var(--bb-size-fixed-75);
983
+ --sky-comp-omnibar-vertical-menu-space-inset-right: var(--bb-size-fixed-75);
984
+ --sky-comp-omnibar-vertical-menu-space-inset-top: var(--bb-size-fixed-75);
985
+ --sky-comp-omnibar-vertical-subitem-space-inset-bottom: var(--bb-size-fluid-50);
986
+ --sky-comp-omnibar-vertical-subitem-space-inset-left: var(--bb-size-fluid-100);
987
+ --sky-comp-omnibar-vertical-subitem-space-inset-right: var(--bb-size-fluid-100);
988
+ --sky-comp-omnibar-vertical-subitem-space-inset-top: var(--bb-size-fluid-50);
989
+ --sky-comp-omnibar-vertical-submenu-space-inset-bottom: var(--bb-size-fluid-50);
990
+ --sky-comp-omnibar-vertical-submenu-space-inset-left: var(--bb-size-fluid-100);
991
+ --sky-comp-omnibar-vertical-submenu-space-inset-right: var(--bb-size-0);
992
+ --sky-comp-omnibar-vertical-submenu-space-inset-top: var(--bb-size-0);
954
993
  --sky-comp-paging_button-space-inset-bottom: var(--bb-size-fluid-25);
955
994
  --sky-comp-paging_button-space-inset-left: var(--bb-size-fluid-50);
956
995
  --sky-comp-paging_button-space-inset-right: var(--bb-size-fluid-50);
@@ -1103,6 +1142,10 @@
1103
1142
  --sky-comp-toolbar-space-inset-left: var(--bb-size-fluid-50);
1104
1143
  --sky-comp-toolbar-space-inset-right: var(--bb-size-fluid-50);
1105
1144
  --sky-comp-toolbar-space-inset-top: var(--bb-size-fluid-50);
1145
+ --sky-comp-tooltip-space-inset-bottom: var(--bb-size-fluid-25);
1146
+ --sky-comp-tooltip-space-inset-left: var(--bb-size-fluid-50);
1147
+ --sky-comp-tooltip-space-inset-right: var(--bb-size-fluid-50);
1148
+ --sky-comp-tooltip-space-inset-top: var(--bb-size-fluid-25);
1106
1149
  --sky-comp-tree-child-space-inset-bottom: var(--bb-size-0);
1107
1150
  --sky-comp-tree-child-space-inset-left: var(--bb-size-fluid-150);
1108
1151
  --sky-comp-tree-child-space-inset-right: var(--bb-size-0);
package/bundles/blackbaud.css CHANGED
@@ -94,6 +94,8 @@
94
94
  --bb-color-red-700: #ae2e31;
95
95
  --bb-color-red-800: #822325;
96
96
  --bb-color-red-900: #571718;
97
+ --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
98
+ --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
97
99
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
98
100
  --bb-color-sky-100: #ebfbff;
99
101
  --bb-color-sky-1000: #002933;
@@ -167,7 +169,7 @@
167
169
  --bb-font-weight-light: 300;
168
170
  --bb-font-weight-regular: 400;
169
171
  --bb-font-weight-semibold: 600;
170
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.0.0/assets/images/bb-logo.png');
172
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/assets/images/bb-logo.png');
171
173
  --bb-letter_spacing-normal: normal;
172
174
  --bb-letter_spacing-wider: 0.16px;
173
175
  --bb-line_height-300: calc(18/13);
@@ -229,6 +231,7 @@
229
231
  --bb-space-8: 24px;
230
232
  --bb-space-9: 36px;
231
233
  --bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
234
+ --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40), var(--bb-color-rgba-purple-600-40));
232
235
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
233
236
  --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);
234
237
  --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);
@@ -249,6 +252,7 @@
249
252
  }
250
253
  .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
251
254
  --sky-brand-name: var(--bb-brand-name);
255
+ --sky-color-background-action-accent-base: var(--bb-color-blue-25);
252
256
  --sky-color-background-container-dimmed: var(--bb-color-slate-25);
253
257
  --sky-color-background-file_drop: var(--bb-color-slate-25);
254
258
  --sky-color-background-input-base: var(--bb-color-slate-25);
@@ -296,6 +300,7 @@
296
300
  --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
297
301
  --sky-opacity-wait: var(--bb-opacity-600);
298
302
  --sky-color-background-selected-switch-base: var(--bb-color-gradient-blue);
303
+ --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
299
304
  --sky-elevation-action-danger-base: var(--bb-shadow-slate-50);
300
305
  --sky-elevation-action-danger-focus: var(--bb-shadow-slate-50);
301
306
  --sky-elevation-action-danger-hover: var(--bb-shadow-slate-50);
package/bundles/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.0.0/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "3.0.0",
3
+ "version": "3.1.1",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",
@@ -18,7 +18,7 @@
18
18
  },
19
19
  "devDependencies": {
20
20
  "@blackbaud/skyux-branding-builder": "1.0.0",
21
- "@skyux/dev-infra-private": "github:blackbaud/skyux-dev-infra-private-builds#12.0.0-alpha.7",
21
+ "@skyux/dev-infra-private": "github:blackbaud/skyux-dev-infra-private-builds#12.0.0-alpha.10",
22
22
  "@tokens-studio/sd-transforms": "1.3.0",
23
23
  "@types/fs-extra": "11.0.4",
24
24
  "@types/node": "22.15.19",