@skyux/theme 13.0.0-alpha.2 → 13.0.0-alpha.3

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 +33 -23
  2. package/package.json +2 -2
package/css/themes/modern/styles.css CHANGED
@@ -133,6 +133,7 @@
133
133
  --bb-font-size-400: 0.9375rem;
134
134
  --bb-font-size-500: 1.0625rem;
135
135
  --bb-font-size-600: 1.1875rem;
136
+ --bb-font-size-650: 1.3125rem;
136
137
  --bb-font-size-700: 1.5rem;
137
138
  --bb-font-size-800: 1.6875rem;
138
139
  --bb-font-style-italic-style: italic;
@@ -150,15 +151,16 @@
150
151
  --bb-font-weight-light: 300;
151
152
  --bb-font-weight-regular: 400;
152
153
  --bb-font-weight-semibold: 600;
153
- --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.4/assets/images/bb-logo.png");
154
+ --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.5/assets/images/bb-logo.png");
154
155
  --bb-letter_spacing-normal: normal;
155
156
  --bb-letter_spacing-wider: 0.16px;
156
157
  --bb-line_height-300: calc(18/13);
157
158
  --bb-line_height-400: calc(20/15);
158
159
  --bb-line_height-500: calc(24/17);
159
160
  --bb-line_height-600: calc(28/19);
161
+ --bb-line_height-650: calc(28/21);
160
162
  --bb-line_height-700: calc(32/24);
161
- --bb-line_height-800: calc(36/26);
163
+ --bb-line_height-800: calc(36/27);
162
164
  --bb-opacity-600: .6;
163
165
  --bb-shadow-blue-0: 0 0 0 0 rgba(0, 0, 0, 0);
164
166
  --bb-size-0: 0rem;
@@ -305,9 +307,10 @@
305
307
  --sky-color-background-tab-disabled: var(--bb-color-gray-700);
306
308
  --sky-color-background-tab-focus: var(--bb-color-transparent);
307
309
  --sky-color-background-tab-hover: var(--bb-color-transparent);
310
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
308
311
  --sky-color-background-text_highlight: var(--bb-color-yellow-800);
309
312
  --sky-color-background-thumb-base: var(--bb-color-white);
310
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
313
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
311
314
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
312
315
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
313
316
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
@@ -469,9 +472,10 @@
469
472
  --sky-color-background-tab-disabled: var(--bb-color-gray-50);
470
473
  --sky-color-background-tab-focus: var(--bb-color-transparent);
471
474
  --sky-color-background-tab-hover: var(--bb-color-transparent);
475
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
472
476
  --sky-color-background-text_highlight: var(--bb-color-yellow-400);
473
477
  --sky-color-background-thumb-base: var(--bb-color-white);
474
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
478
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-25);
475
479
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
476
480
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
477
481
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
@@ -1087,9 +1091,9 @@
1087
1091
  --sky-font-line_height-body-m: var(--bb-line_height-400);
1088
1092
  --sky-font-line_height-body-s: var(--bb-line_height-300);
1089
1093
  --sky-font-line_height-display-1: var(--bb-line_height-700);
1090
- --sky-font-line_height-display-2: var(--bb-line_height-600);
1091
- --sky-font-line_height-display-3: var(--bb-line_height-500);
1092
- --sky-font-line_height-display-4: var(--bb-line_height-400);
1094
+ --sky-font-line_height-display-2: var(--bb-line_height-650);
1095
+ --sky-font-line_height-display-3: var(--bb-line_height-600);
1096
+ --sky-font-line_height-display-4: var(--bb-line_height-500);
1093
1097
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1094
1098
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1095
1099
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1103,9 +1107,9 @@
1103
1107
  --sky-font-size-body-m: var(--bb-font-size-400);
1104
1108
  --sky-font-size-body-s: var(--bb-font-size-300);
1105
1109
  --sky-font-size-display-1: var(--bb-font-size-700);
1106
- --sky-font-size-display-2: var(--bb-font-size-600);
1107
- --sky-font-size-display-3: var(--bb-font-size-500);
1108
- --sky-font-size-display-4: var(--bb-font-size-400);
1110
+ --sky-font-size-display-2: var(--bb-font-size-650);
1111
+ --sky-font-size-display-3: var(--bb-font-size-600);
1112
+ --sky-font-size-display-4: var(--bb-font-size-500);
1109
1113
  --sky-font-size-heading-1: var(--bb-font-size-800);
1110
1114
  --sky-font-size-heading-2: var(--bb-font-size-600);
1111
1115
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1118,10 +1122,10 @@
1118
1122
  --sky-font-style-body-l: var(--bb-font-style-regular);
1119
1123
  --sky-font-style-body-m: var(--bb-font-style-regular);
1120
1124
  --sky-font-style-body-s: var(--bb-font-style-regular);
1121
- --sky-font-style-display-1: var(--bb-font-style-regular);
1122
- --sky-font-style-display-2: var(--bb-font-style-regular);
1123
- --sky-font-style-display-3: var(--bb-font-style-regular);
1124
- --sky-font-style-display-4: var(--bb-font-style-regular);
1125
+ --sky-font-style-display-1: var(--bb-font-style-semibold);
1126
+ --sky-font-style-display-2: var(--bb-font-style-semibold);
1127
+ --sky-font-style-display-3: var(--bb-font-style-semibold);
1128
+ --sky-font-style-display-4: var(--bb-font-style-semibold);
1125
1129
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1126
1130
  --sky-font-style-heading-1: var(--bb-font-style-regular);
1127
1131
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
@@ -1132,8 +1136,8 @@
1132
1136
  --sky-font-weight-body-l: var(--bb-font-weight-regular);
1133
1137
  --sky-font-weight-body-m: var(--bb-font-weight-regular);
1134
1138
  --sky-font-weight-body-s: var(--bb-font-weight-semibold);
1135
- --sky-font-weight-display-1: var(--bb-font-weight-regular);
1136
- --sky-font-weight-display-2: var(--bb-font-weight-regular);
1139
+ --sky-font-weight-display-1: var(--bb-font-weight-semibold);
1140
+ --sky-font-weight-display-2: var(--bb-font-weight-semibold);
1137
1141
  --sky-font-weight-display-3: var(--bb-font-weight-semibold);
1138
1142
  --sky-font-weight-display-4: var(--bb-font-weight-semibold);
1139
1143
  --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
@@ -1364,7 +1368,7 @@
1364
1368
  --modern-font-weight-light: 300;
1365
1369
  --modern-font-weight-regular: 400;
1366
1370
  --modern-font-weight-semibold: 600;
1367
- --modern-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.4/assets/images/bb-logo.png");
1371
+ --modern-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.5/assets/images/bb-logo.png");
1368
1372
  --modern-letter_spacing-normal: normal;
1369
1373
  --modern-line_height-110: 1.1;
1370
1374
  --modern-line_height-115: 1.15;
@@ -1491,6 +1495,7 @@
1491
1495
  --sky-color-background-tab-disabled: var(--modern-color-transparent);
1492
1496
  --sky-color-background-tab-focus: var(--modern-color-transparent);
1493
1497
  --sky-color-background-tab-hover: var(--modern-color-transparent);
1498
+ --sky-color-background-tab-selected: var(--modern-color-transparent);
1494
1499
  --sky-color-background-text_highlight: var(--modern-color-yellow-40);
1495
1500
  --sky-color-background-thumb-base: var(--modern-color-white);
1496
1501
  --sky-color-background-thumb-disabled: var(--modern-color-gray-07);
@@ -2454,6 +2459,7 @@
2454
2459
  --sky-border-width-selected-s
2455
2460
  )
2456
2461
  );
2462
+ --sky-override-tab-selected-color: var(--sky-color-text-default);
2457
2463
  --sky-override-tab-selected-focus-color: var(--sky-color-text-default);
2458
2464
  --sky-override-tab-selected-focus-background-color: var(
2459
2465
  --sky-color-background-tab-focus
@@ -2999,18 +3005,22 @@
2999
3005
  }
3000
3006
  .sky-theme-modern .sky-btn-tab:focus-visible {
3001
3007
  background-color: var(--sky-color-background-tab-focus);
3002
- color: var(--sky-color-text-default);
3003
3008
  outline: none;
3004
3009
  }
3010
+ .sky-theme-modern .sky-btn-tab:focus-visible:not(.sky-btn-tab-selected) {
3011
+ color: var(--sky-color-text-default);
3012
+ }
3005
3013
  .sky-theme-modern .sky-btn-tab:focus-visible.sky-btn-tab-selected {
3006
3014
  background-color: var(--sky-override-tab-selected-focus-background-color, var(--sky-color-background-selected-soft));
3007
3015
  }
3008
3016
  .sky-theme-modern .sky-btn-tab:focus-visible:not(:active) {
3009
- color: var(--sky-color-text-default);
3010
3017
  outline: solid var(--sky-border-width-selected-m) var(--sky-color-border-tab-focus);
3011
3018
  outline-offset: calc(var(--sky-border-width-selected-m) * -1);
3012
3019
  box-shadow: var(--sky-override-tab-box-shadow-focus-elevation, none);
3013
3020
  }
3021
+ .sky-theme-modern .sky-btn-tab:focus-visible:not(:active):not(.sky-btn-tab-selected) {
3022
+ color: var(--sky-color-text-default);
3023
+ }
3014
3024
  .sky-theme-modern .sky-btn-tab:active, .sky-theme-modern .sky-btn-tab:active:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(:focus-visible) {
3015
3025
  color: var(--sky-color-text-default);
3016
3026
  background-color: var(--sky-color-background-tab-active);
@@ -3036,8 +3046,8 @@
3036
3046
  font-size: var(--sky-font-size-body-m);
3037
3047
  }
3038
3048
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) {
3039
- background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-selected-soft));
3040
- color: var(--sky-color-text-default);
3049
+ background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-tab-selected));
3050
+ color: var(--sky-override-tab-selected-color, var(--sky-color-text-selected));
3041
3051
  box-shadow: none;
3042
3052
  }
3043
3053
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled):not(:active) {
@@ -3045,8 +3055,8 @@
3045
3055
  padding-bottom: calc(var(--sky-comp-tab-horizontal-space-inset-bottom) - var(--sky-override-tab-selected-border-bottom-size, var(--sky-border-width-selected-m)));
3046
3056
  }
3047
3057
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled):hover:not(.sky-btn-tab-disabled) {
3048
- background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-selected-soft));
3049
- color: var(--sky-color-text-default);
3058
+ background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-tab-selected));
3059
+ color: var(--sky-override-tab-selected-color, var(--sky-color-text-selected));
3050
3060
  }
3051
3061
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-btn-tab-close,
3052
3062
  .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-tab-header-count {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "13.0.0-alpha.2",
3
+ "version": "13.0.0-alpha.3",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -20,7 +20,7 @@
20
20
  "@angular/core": "^20.0.5"
21
21
  },
22
22
  "dependencies": {
23
- "@blackbaud/skyux-design-tokens": "2.0.0-alpha.4",
23
+ "@blackbaud/skyux-design-tokens": "2.0.0-alpha.5",
24
24
  "@skyux/icons": "9.0.0",
25
25
  "fontfaceobserver": "2.3.0",
26
26
  "tslib": "^2.8.1"