@skyux/theme 15.0.0-alpha.5 → 15.0.0-alpha.7

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 (2) hide show
  1. package/css/themes/modern/styles.css +67 -25
  2. package/package.json +2 -2
package/css/themes/modern/styles.css CHANGED
@@ -51,6 +51,7 @@
51
51
  --bb-border-radius-pill: 999rem;
52
52
  --bb-border-radius-round: 50%;
53
53
  --bb-border-style-dotted: dotted;
54
+ --bb-border-style-none: none;
54
55
  --bb-border-style-solid: solid;
55
56
  --bb-brand-name: 'Blackbaud';
56
57
  --bb-color-black: #000000;
@@ -230,6 +231,7 @@
230
231
  --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
231
232
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
232
233
  --bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
234
+ --bb-color-rgba-steel-fusion-1100-70: rgba(28, 34, 40, 0.7);
233
235
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
234
236
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
235
237
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -370,15 +372,15 @@
370
372
  --bb-font-weight-light: 300;
371
373
  --bb-font-weight-regular: 400;
372
374
  --bb-font-weight-semibold: 600;
373
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/bb-logo.png');
374
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-base-dark.svg');
375
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-base-light.svg');
376
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-bb-dark.svg');
377
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-bb-light.svg');
378
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
379
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
380
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
381
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
375
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/bb-logo.png');
376
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-base-dark.svg');
377
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-base-light.svg');
378
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-bb-dark.svg');
379
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-bb-light.svg');
380
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
381
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
382
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
383
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
382
384
  --bb-letter_spacing-normal: normal;
383
385
  --bb-letter_spacing-wider: 0.01rem;
384
386
  --bb-letter_spacing-widest: 0.046875rem;
@@ -487,7 +489,7 @@
487
489
  --bb-color-scrollbar-bb-dark-track: #1c2228;
488
490
  }
489
491
 
490
- .sky-theme-modern.sky-theme-brand-base {
492
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-light {
491
493
  --sky-brand-name: var(--bb-brand-name);
492
494
  --sky-color-background-action-accent-active: var(--bb-color-blue-100);
493
495
  --sky-color-background-action-accent-base: var(--bb-color-white);
@@ -774,12 +776,13 @@
774
776
  --sky-elevation-raised-100: var(--bb-shadow-gray-100);
775
777
  }
776
778
 
777
- :root:has(body.sky-theme-modern.sky-theme-brand-base) {
779
+ :root:has(body.sky-theme-modern.sky-theme-brand-base.sky-theme-mode-light) {
778
780
  --sky-color-scrollbar-thumb: var(--bb-color-scrollbar-base-light-thumb);
779
781
  --sky-color-scrollbar-track: var(--bb-color-scrollbar-base-light-track);
780
782
  }
781
783
 
782
784
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
785
+ --sky-brand-name: var(--bb-brand-name);
783
786
  --sky-color-background-action-accent-active: var(--bb-color-gray-600);
784
787
  --sky-color-background-action-accent-base: var(--bb-color-blue-900);
785
788
  --sky-color-background-action-accent-focus: var(--bb-color-gray-700);
@@ -804,7 +807,7 @@
804
807
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
805
808
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
806
809
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
807
- --sky-color-background-blocking: var(--bb-color-rgba-black-70);
810
+ --sky-color-background-blocking: var(--bb-color-rgba-steel-fusion-1100-70);
808
811
  --sky-color-background-container-backdrop: var(--bb-color-gray-900);
809
812
  --sky-color-background-container-base: var(--bb-color-gray-1000);
810
813
  --sky-color-background-container-danger: var(--bb-color-red-800);
@@ -892,7 +895,6 @@
892
895
  --sky-color-border-progress_step: var(--bb-color-gray-600);
893
896
  --sky-color-border-selected: var(--bb-color-blue-400);
894
897
  --sky-color-border-selected_soft: var(--bb-color-blue-500);
895
- --sky-color-border-separator-dark: var(--bb-color-gray-800);
896
898
  --sky-color-border-separator-light: var(--bb-color-gray-700);
897
899
  --sky-color-border-separator-row: var(--bb-color-gray-800);
898
900
  --sky-color-border-success: var(--bb-color-green-400);
@@ -997,6 +999,7 @@
997
999
  --sky-color-viz-sequence-7: var(--bb-color-teal-400);
998
1000
  --sky-color-viz-sequence-8: var(--bb-color-teal-300);
999
1001
  --sky-color-viz-sequence-9: var(--bb-color-teal-200);
1002
+ --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
1000
1003
  --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
1001
1004
  --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
1002
1005
  --sky-opacity-wait: var(--bb-opacity-600);
@@ -1022,7 +1025,39 @@
1022
1025
  --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
1023
1026
  --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
1024
1027
  --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
1028
+ --sky-elevation-action-danger-active: var(--bb-shadow-gray-0);
1029
+ --sky-elevation-action-danger-base: var(--bb-shadow-gray-0);
1030
+ --sky-elevation-action-danger-disabled: var(--bb-shadow-gray-0);
1031
+ --sky-elevation-action-danger-focus: var(--bb-shadow-gray-0);
1032
+ --sky-elevation-action-danger-hover: var(--bb-shadow-gray-0);
1033
+ --sky-elevation-action-input-active: var(--bb-shadow-gray-0);
1034
+ --sky-elevation-action-input-base: var(--bb-shadow-gray-0);
1035
+ --sky-elevation-action-input-disabled: var(--bb-shadow-gray-0);
1036
+ --sky-elevation-action-input-focus: var(--bb-shadow-gray-0);
1037
+ --sky-elevation-action-input-hover: var(--bb-shadow-gray-0);
1038
+ --sky-elevation-action-primary-active: var(--bb-shadow-gray-0);
1039
+ --sky-elevation-action-primary-base: var(--bb-shadow-gray-0);
1040
+ --sky-elevation-action-primary-disabled: var(--bb-shadow-gray-0);
1041
+ --sky-elevation-action-primary-focus: var(--bb-shadow-gray-0);
1042
+ --sky-elevation-action-primary-hover: var(--bb-shadow-gray-0);
1043
+ --sky-elevation-action-secondary-active: var(--bb-shadow-gray-0);
1044
+ --sky-elevation-action-secondary-base: var(--bb-shadow-gray-0);
1045
+ --sky-elevation-action-secondary-disabled: var(--bb-shadow-gray-0);
1046
+ --sky-elevation-action-secondary-focus: var(--bb-shadow-gray-0);
1047
+ --sky-elevation-action-secondary-hover: var(--bb-shadow-gray-0);
1048
+ --sky-elevation-action-tertiary-active: var(--bb-shadow-gray-0);
1049
+ --sky-elevation-action-tertiary-base: var(--bb-shadow-gray-0);
1050
+ --sky-elevation-action-tertiary-disabled: var(--bb-shadow-gray-0);
1051
+ --sky-elevation-action-tertiary-focus: var(--bb-shadow-gray-0);
1052
+ --sky-elevation-action-tertiary-hover: var(--bb-shadow-gray-0);
1053
+ --sky-elevation-action-toolbar-active: var(--bb-shadow-gray-0);
1054
+ --sky-elevation-action-toolbar-base: var(--bb-shadow-gray-0);
1055
+ --sky-elevation-action-toolbar-disabled: var(--bb-shadow-gray-0);
1056
+ --sky-elevation-action-toolbar-focus: var(--bb-shadow-gray-0);
1057
+ --sky-elevation-action-toolbar-hover: var(--bb-shadow-gray-0);
1025
1058
  --sky-elevation-focus: var(--bb-shadow-gray-200);
1059
+ --sky-elevation-input-base: var(--bb-shadow-gray-0);
1060
+ --sky-elevation-input-disabled: var(--bb-shadow-gray-0);
1026
1061
  --sky-elevation-none: var(--bb-shadow-gray-0);
1027
1062
  --sky-elevation-overflow: var(--bb-shadow-gray-200);
1028
1063
  --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
@@ -1068,6 +1103,7 @@
1068
1103
  --sky-border-radius-thumb: var(--bb-border-radius-round);
1069
1104
  --sky-border-radius-xs: var(--bb-border-radius-012);
1070
1105
  --sky-border-style-accent: var(--bb-border-style-solid);
1106
+ --sky-border-style-container-overlay: var(--bb-border-style-none);
1071
1107
  --sky-border-style-divider: var(--bb-border-style-solid);
1072
1108
  --sky-border-style-elevation: var(--bb-border-style-solid);
1073
1109
  --sky-border-style-separator-dark: var(--bb-border-style-solid);
@@ -1772,6 +1808,10 @@
1772
1808
  --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/20 'var(--bb-font-blkb_sans-name)';
1773
1809
  }
1774
1810
 
1811
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
1812
+ --sky-border-style-container-overlay: var(--bb-border-style-solid);
1813
+ }
1814
+
1775
1815
  @property --bb-image-logo-primary-src {
1776
1816
  syntax: "<url>";
1777
1817
  inherits: true;
@@ -1825,6 +1865,7 @@
1825
1865
  --bb-border-radius-pill: 999rem;
1826
1866
  --bb-border-radius-round: 50%;
1827
1867
  --bb-border-style-dotted: dotted;
1868
+ --bb-border-style-none: none;
1828
1869
  --bb-border-style-solid: solid;
1829
1870
  --bb-brand-name: 'Blackbaud';
1830
1871
  --bb-color-black: #000000;
@@ -2004,6 +2045,7 @@
2004
2045
  --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
2005
2046
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
2006
2047
  --bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
2048
+ --bb-color-rgba-steel-fusion-1100-70: rgba(28, 34, 40, 0.7);
2007
2049
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
2008
2050
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
2009
2051
  --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
@@ -2144,15 +2186,15 @@
2144
2186
  --bb-font-weight-light: 300;
2145
2187
  --bb-font-weight-regular: 400;
2146
2188
  --bb-font-weight-semibold: 600;
2147
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/bb-logo.png');
2148
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-base-dark.svg');
2149
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-base-light.svg');
2150
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-bb-dark.svg');
2151
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-bb-light.svg');
2152
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
2153
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
2154
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
2155
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.1/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
2189
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/bb-logo.png');
2190
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-base-dark.svg');
2191
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-base-light.svg');
2192
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-bb-dark.svg');
2193
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-bb-light.svg');
2194
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
2195
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
2196
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
2197
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/7.0.0-alpha.3/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
2156
2198
  --bb-letter_spacing-normal: normal;
2157
2199
  --bb-letter_spacing-wider: 0.01rem;
2158
2200
  --bb-letter_spacing-widest: 0.046875rem;
@@ -2261,7 +2303,7 @@
2261
2303
  --bb-color-scrollbar-bb-dark-track: #1c2228;
2262
2304
  }
2263
2305
 
2264
- .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
2306
+ .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud.sky-theme-mode-light {
2265
2307
  --sky-brand-name: var(--bb-brand-name);
2266
2308
  --sky-color-background-action-accent-base: var(--bb-color-blue-25);
2267
2309
  --sky-color-background-container-backdrop: var(--bb-color-slate-200);
@@ -2364,7 +2406,8 @@
2364
2406
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
2365
2407
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
2366
2408
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
2367
- --sky-color-background-blocking: var(--bb-color-rgba-black-70);
2409
+ --sky-color-background-blocking: var(--bb-color-rgba-steel-fusion-1100-70);
2410
+ --sky-color-background-container-backdrop: var(--bb-color-steel-fusion-1000);
2368
2411
  --sky-color-background-container-base: var(--bb-color-steel-fusion-1100);
2369
2412
  --sky-color-background-container-danger: var(--bb-color-rgba-red-dark-600-35);
2370
2413
  --sky-color-background-container-dimmed: var(--bb-color-steel-fusion-1050);
@@ -2459,7 +2502,6 @@
2459
2502
  --sky-color-border-progress_step: var(--bb-color-gray-600);
2460
2503
  --sky-color-border-selected: var(--bb-color-blue-400);
2461
2504
  --sky-color-border-selected_soft: var(--bb-color-blue-600);
2462
- --sky-color-border-separator-dark: var(--bb-color-gray-800);
2463
2505
  --sky-color-border-separator-light: var(--bb-color-gray-700);
2464
2506
  --sky-color-border-separator-row: var(--bb-color-gray-800);
2465
2507
  --sky-color-border-success: var(--bb-color-green-500);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "15.0.0-alpha.5",
3
+ "version": "15.0.0-alpha.7",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -20,7 +20,7 @@
20
20
  "@angular/core": "^22.1.2"
21
21
  },
22
22
  "dependencies": {
23
- "@blackbaud/skyux-design-tokens": "7.0.0-alpha.1",
23
+ "@blackbaud/skyux-design-tokens": "7.0.0-alpha.3",
24
24
  "fontfaceobserver": "2.3.0",
25
25
  "tslib": "^2.8.1"
26
26
  },