@skyux/theme 12.13.2 → 12.14.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 (3) hide show
  1. package/css/sky.css +1 -1
  2. package/css/themes/modern/styles.css +43 -10
  3. package/package.json +2 -2
package/css/sky.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
2
- @import url("https://sky.blackbaudcdn.net/static/skyux-icons/7.24.0/assets/css/skyux-icons.min.css");
2
+ @import url("https://sky.blackbaudcdn.net/static/skyux-icons/8.0.0/assets/css/skyux-icons.min.css");
3
3
  /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
4
4
  /* Document
5
5
  ========================================================================== */
package/css/themes/modern/styles.css CHANGED
@@ -1376,6 +1376,10 @@
1376
1376
 
1377
1377
  .sky-theme-modern:not(.sky-theme-brand-base) .sky-btn {
1378
1378
  --sky-override-borderless-icon-size: 26px;
1379
+ --sky-override-button-default-box-shadow-focus:
1380
+ inset 0 0 0 var(--sky-border-width-action-focus)
1381
+ var(--sky-color-border-action-secondary-focus),
1382
+ var(--sky-elevation-focus);
1379
1383
  --sky-override-button-icon-borderless-padding: 1px;
1380
1384
  --sky-override-button-icon-padding: 9px 15px;
1381
1385
  --sky-override-button-link-inline-border-radius: 0;
@@ -1387,6 +1391,10 @@
1387
1391
  );
1388
1392
  --sky-override-button-link-inline-font-size: var(--sky-font-size-body-m);
1389
1393
  --sky-override-button-padding: 9px 21px;
1394
+ --sky-override-button-primary-box-shadow-focus:
1395
+ inset 0 0 0 var(--sky-border-width-action-focus)
1396
+ var(--sky-color-border-action-primary-focus),
1397
+ var(--sky-elevation-focus);
1390
1398
  --sky-override-button-primary-disabled-box-shadow:
1391
1399
  inset 0 0 0 var(--sky-border-width-action-focus)
1392
1400
  var(--sky-color-border-action-primary-focus),
@@ -1395,18 +1403,34 @@
1395
1403
  inset 0 0 0 var(--sky-border-width-action-focus)
1396
1404
  var(--sky-color-border-action-secondary-focus),
1397
1405
  var(--sky-elevation-focus);
1406
+ --sky-override-button-danger-box-shadow-focus:
1407
+ inset 0 0 0 var(--sky-border-width-action-focus)
1408
+ var(--sky-color-border-action-danger-focus),
1409
+ var(--sky-elevation-focus);
1398
1410
  --sky-override-button-danger-disabled-box-shadow:
1399
1411
  inset 0 0 0 var(--sky-border-width-action-focus)
1400
1412
  var(--sky-color-border-action-danger-focus),
1401
1413
  var(--sky-elevation-focus);
1414
+ --sky-override-button-tertiary-box-shadow-focus:
1415
+ inset 0 0 0 var(--sky-border-width-action-focus)
1416
+ var(--sky-color-border-action-tertiary-focus),
1417
+ var(--sky-elevation-focus);
1402
1418
  --sky-override-button-tertiary-disabled-box-shadow:
1403
1419
  inset 0 0 0 var(--sky-border-width-action-focus)
1404
1420
  var(--sky-color-border-action-tertiary-focus),
1405
1421
  var(--sky-elevation-focus,);
1422
+ --sky-override-button-link-inline-box-shadow-focus:
1423
+ 0 0 0 var(--sky-border-width-action-focus)
1424
+ var(--sky-color-border-action-tertiary-focus),
1425
+ var(--sky-elevation-focus);
1406
1426
  --sky-override-button-link-inline-disabled-box-shadow:
1407
1427
  0 0 0 var(--sky-border-width-action-focus)
1408
1428
  var(--sky-color-border-action-tertiary-focus),
1409
1429
  var(--sky-elevation-focus);
1430
+ --sky-override-button-borderless-inline-box-shadow-focus:
1431
+ 0 0 0 var(--sky-border-width-action-focus)
1432
+ var(--sky-color-border-action-tertiary-focus),
1433
+ var(--sky-elevation-focus);
1410
1434
  --sky-override-button-borderless-inline-disabled-box-shadow:
1411
1435
  0 0 0 var(--sky-border-width-action-focus)
1412
1436
  var(--sky-color-border-action-tertiary-focus),
@@ -1422,6 +1446,7 @@
1422
1446
  }
1423
1447
 
1424
1448
  .sky-theme-modern:not(.sky-theme-brand-base) .sky-btn-tab {
1449
+ --sky-override-tab-box-shadow-focus-elevation: var(--sky-elevation-focus);
1425
1450
  --sky-override-tab-selected-background-color: var(--modern-color-transparent);
1426
1451
  --sky-override-tab-selected-border-bottom-size: var(--modern-size-3);
1427
1452
  --sky-override-tab-hover-border-bottom-color: var(--modern-color-blue-50);
@@ -1429,6 +1454,9 @@
1429
1454
  --sky-override-tab-disabled-font-size: 15px;
1430
1455
  --sky-override-tab-button-radius: 0;
1431
1456
  --sky-override-tab-line-height: 1.8;
1457
+ --sky-override-tab-item-box-shadow-focus-elevation: var(
1458
+ --sky-elevation-focus
1459
+ );
1432
1460
  --sky-override-selected-dropdown-item-border-width: var(--modern-size-3);
1433
1461
  --sky-override-selected-dropdown-background-color: var(
1434
1462
  --modern-color-transparent
@@ -1695,7 +1723,7 @@
1695
1723
  .sky-theme-modern .sky-btn-default:focus-visible:not(:active),
1696
1724
  .sky-theme-modern .sky-btn-icon:focus-visible:not(:active) {
1697
1725
  background-color: var(--sky-color-background-action-secondary-focus);
1698
- box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus), var(--sky-elevation-focus);
1726
+ box-shadow: var(--sky-override-button-default-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus));
1699
1727
  }
1700
1728
  .sky-theme-modern .sky-btn-default.sky-btn-disabled, .sky-theme-modern .sky-btn-default.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-default.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-default.sky-btn-disabled:active, .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-default[disabled], .sky-theme-modern .sky-btn-default[disabled]:hover, .sky-theme-modern .sky-btn-default[disabled]:focus-visible, .sky-theme-modern .sky-btn-default[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-default[disabled]:active, .sky-theme-modern .sky-btn-default[disabled].sky-btn-active,
1701
1729
  .sky-theme-modern .sky-btn-icon.sky-btn-disabled,
@@ -1743,7 +1771,7 @@
1743
1771
  }
1744
1772
  .sky-theme-modern .sky-btn-primary:focus-visible:not(:active) {
1745
1773
  background-color: var(--sky-color-background-action-primary-focus);
1746
- box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-primary-focus), var(--sky-elevation-focus);
1774
+ box-shadow: var(--sky-override-button-primary-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-primary-focus));
1747
1775
  }
1748
1776
  .sky-theme-modern .sky-btn-primary.sky-btn-disabled, .sky-theme-modern .sky-btn-primary.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-primary.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-primary.sky-btn-disabled:active, .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-primary[disabled], .sky-theme-modern .sky-btn-primary[disabled]:hover, .sky-theme-modern .sky-btn-primary[disabled]:focus-visible, .sky-theme-modern .sky-btn-primary[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-primary[disabled]:active, .sky-theme-modern .sky-btn-primary[disabled].sky-btn-active {
1749
1777
  box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-primary-disabled);
@@ -1767,7 +1795,7 @@
1767
1795
  }
1768
1796
  .sky-theme-modern .sky-btn-danger:focus-visible:not(:active) {
1769
1797
  background-color: var(--sky-color-background-action-danger-focus);
1770
- box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-danger-focus), var(--sky-elevation-focus);
1798
+ box-shadow: var(--sky-override-button-danger-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-danger-focus));
1771
1799
  }
1772
1800
  .sky-theme-modern .sky-btn-danger.sky-btn-disabled, .sky-theme-modern .sky-btn-danger.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-danger.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-danger.sky-btn-disabled:active, .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-danger[disabled], .sky-theme-modern .sky-btn-danger[disabled]:hover, .sky-theme-modern .sky-btn-danger[disabled]:focus-visible, .sky-theme-modern .sky-btn-danger[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-danger[disabled]:active, .sky-theme-modern .sky-btn-danger[disabled].sky-btn-active {
1773
1801
  box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-danger-disabled);
@@ -1813,7 +1841,7 @@
1813
1841
  .sky-theme-modern .sky-btn-borderless:focus-visible:not(:active),
1814
1842
  .sky-theme-modern .sky-btn-icon-borderless:focus-visible:not(:active) {
1815
1843
  background-color: var(--sky-color-background-action-tertiary-focus);
1816
- box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);
1844
+ box-shadow: var(--sky-override-button-tertiary-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));
1817
1845
  }
1818
1846
  .sky-theme-modern .sky-btn-link.sky-btn-disabled, .sky-theme-modern .sky-btn-link.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-link.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-link.sky-btn-disabled:active, .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-link[disabled], .sky-theme-modern .sky-btn-link[disabled]:hover, .sky-theme-modern .sky-btn-link[disabled]:focus-visible, .sky-theme-modern .sky-btn-link[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-link[disabled]:active, .sky-theme-modern .sky-btn-link[disabled].sky-btn-active,
1819
1847
  .sky-theme-modern .sky-btn-borderless.sky-btn-disabled,
@@ -1879,7 +1907,7 @@
1879
1907
  }
1880
1908
  .sky-theme-modern .sky-btn-link-inline:focus-visible:not(:active) {
1881
1909
  background-color: var(--sky-color-background-action-tertiary-focus);
1882
- box-shadow: 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);
1910
+ box-shadow: var(--sky-override-button-link-inline-box-shadow-focus, 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));
1883
1911
  }
1884
1912
  .sky-theme-modern .sky-btn-link-inline:active {
1885
1913
  background-color: var(--sky-color-background-action-tertiary-active);
@@ -1903,7 +1931,7 @@
1903
1931
  font-size: var(--sky-override-button-link-inline-font-size, inherit);
1904
1932
  }
1905
1933
  .sky-theme-modern .sky-btn-borderless-inline:focus-visible:not(:active) {
1906
- box-shadow: 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);
1934
+ box-shadow: var(--sky-override-button-borderless-inline-box-shadow-focus, 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));
1907
1935
  }
1908
1936
  .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled, .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:active, .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-borderless-inline[disabled], .sky-theme-modern .sky-btn-borderless-inline[disabled]:hover, .sky-theme-modern .sky-btn-borderless-inline[disabled]:focus-visible, .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-borderless-inline[disabled]:active, .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-active {
1909
1937
  box-shadow: inset 0 0 0 0 var(--sky-color-border-action-tertiary-disabled);
@@ -1959,7 +1987,7 @@
1959
1987
  color: var(--sky-color-text-default);
1960
1988
  outline: solid var(--sky-border-width-selected-m) var(--sky-color-border-selected);
1961
1989
  outline-offset: calc(var(--sky-border-width-selected-m) * -1);
1962
- box-shadow: var(--sky-elevation-focus);
1990
+ box-shadow: var(--sky-override-tab-box-shadow-focus-elevation, none);
1963
1991
  }
1964
1992
  .sky-theme-modern .sky-btn-tab:active {
1965
1993
  color: var(--sky-color-text-default);
@@ -2017,7 +2045,7 @@
2017
2045
  }
2018
2046
  .sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab:focus-visible:not(:active) {
2019
2047
  background-color: transparent;
2020
- box-shadow: var(--sky-elevation-focus);
2048
+ box-shadow: var(--sky-override-tab-item-box-shadow-focus-elevation, none);
2021
2049
  outline: solid var(--sky-border-width-action-active) var(--sky-color-border-action-secondary-focus);
2022
2050
  outline-offset: calc(var(--sky-border-width-action-active) * -1);
2023
2051
  }
@@ -2097,6 +2125,7 @@
2097
2125
  --sky-override-switch-background-color-success: rgb(209.802919708, 231.7737226277, 192.2262773723);
2098
2126
  --sky-override-switch-background-color-warning: rgb(255, 233.5961538462, 202);
2099
2127
  --sky-override-switch-border-color: var(--modern-color-blue-74);
2128
+ --sky-override-switch-box-shadow-focus-elevation: var(--sky-elevation-focus);
2100
2129
  --sky-override-switch-checked-color: var(--sky-color-icon-action);
2101
2130
  --sky-override-switch-icon-checked-color-no-group: var(
2102
2131
  --sky-color-text-default
@@ -2180,7 +2209,7 @@
2180
2209
  border-color: var(--sky-color-border-input-focus);
2181
2210
  }
2182
2211
  .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus-visible:not(:active) + .sky-switch-control {
2183
- box-shadow: var(--sky-elevation-focus);
2212
+ box-shadow: var(--sky-override-switch-box-shadow-focus-elevation, none);
2184
2213
  outline: none;
2185
2214
  }
2186
2215
  .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):enabled:not(:hover):not(:active):not(:focus-visible):checked + .sky-switch-control.sky-switch-control-success, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):enabled:not(:hover):not(:active):not(:focus-visible)[type=checkbox]:indeterminate + .sky-switch-control.sky-switch-control-success {
@@ -2280,6 +2309,10 @@
2280
2309
 
2281
2310
  .sky-theme-modern:not(.sky-theme-brand-base) {
2282
2311
  --sky-override-a-border-radius: 0;
2312
+ --sky-override-a-box-shadow-focus:
2313
+ 0 0 0 var(--sky-border-width-action-focus)
2314
+ var(--sky-color-border-action-tertiary-focus),
2315
+ var(--sky-elevation-focus);
2283
2316
  --sky-override-a-color-hover-active: var(
2284
2317
  --sky-text-color-action-primary-hover
2285
2318
  );
@@ -2313,7 +2346,7 @@ html:has(.sky-theme-brand-base) {
2313
2346
  }
2314
2347
  .sky-theme-modern a:focus-visible:not(:active) {
2315
2348
  outline: none;
2316
- box-shadow: 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);
2349
+ box-shadow: var(--sky-override-a-box-shadow-focus, 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));
2317
2350
  }
2318
2351
  .sky-theme-modern h1,
2319
2352
  .sky-theme-modern .sky-font-heading-1 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "12.13.2",
3
+ "version": "12.14.1",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@blackbaud/skyux-design-tokens": "0.0.55",
24
- "@skyux/icons": "7.24.0",
24
+ "@skyux/icons": "8.0.0",
25
25
  "fontfaceobserver": "2.3.0",
26
26
  "tslib": "^2.8.1"
27
27
  },