@skyux/theme 12.13.1 → 12.14.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.
Files changed (3) hide show
  1. package/css/sky.css +1 -1
  2. package/css/themes/modern/styles.css +46 -11
  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,13 +1446,19 @@
1422
1446
  }
1423
1447
 
1424
1448
  .sky-theme-modern:not(.sky-theme-brand-base) .sky-btn-tab {
1425
- --sky-override-tab-selected-background-color: var(--modern-color-transparent);
1449
+ --sky-override-tab-box-shadow-focus-elevation: var(--sky-elevation-focus)
1450
+ --sky-override-tab-selected-background-color: var(
1451
+ --modern-color-transparent
1452
+ );
1426
1453
  --sky-override-tab-selected-border-bottom-size: var(--modern-size-3);
1427
1454
  --sky-override-tab-hover-border-bottom-color: var(--modern-color-blue-50);
1428
1455
  --sky-override-tab-disabled-background-color: var(--modern-color-transparent);
1429
1456
  --sky-override-tab-disabled-font-size: 15px;
1430
1457
  --sky-override-tab-button-radius: 0;
1431
1458
  --sky-override-tab-line-height: 1.8;
1459
+ --sky-override-tab-item-box-shadow-focus-elevation: var(
1460
+ --sky-elevation-focus
1461
+ );
1432
1462
  --sky-override-selected-dropdown-item-border-width: var(--modern-size-3);
1433
1463
  --sky-override-selected-dropdown-background-color: var(
1434
1464
  --modern-color-transparent
@@ -1695,7 +1725,7 @@
1695
1725
  .sky-theme-modern .sky-btn-default:focus-visible:not(:active),
1696
1726
  .sky-theme-modern .sky-btn-icon:focus-visible:not(:active) {
1697
1727
  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);
1728
+ 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
1729
  }
1700
1730
  .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
1731
  .sky-theme-modern .sky-btn-icon.sky-btn-disabled,
@@ -1743,7 +1773,7 @@
1743
1773
  }
1744
1774
  .sky-theme-modern .sky-btn-primary:focus-visible:not(:active) {
1745
1775
  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);
1776
+ 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
1777
  }
1748
1778
  .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
1779
  box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-primary-disabled);
@@ -1767,7 +1797,7 @@
1767
1797
  }
1768
1798
  .sky-theme-modern .sky-btn-danger:focus-visible:not(:active) {
1769
1799
  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);
1800
+ 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
1801
  }
1772
1802
  .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
1803
  box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-danger-disabled);
@@ -1813,7 +1843,7 @@
1813
1843
  .sky-theme-modern .sky-btn-borderless:focus-visible:not(:active),
1814
1844
  .sky-theme-modern .sky-btn-icon-borderless:focus-visible:not(:active) {
1815
1845
  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);
1846
+ 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
1847
  }
1818
1848
  .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
1849
  .sky-theme-modern .sky-btn-borderless.sky-btn-disabled,
@@ -1879,7 +1909,7 @@
1879
1909
  }
1880
1910
  .sky-theme-modern .sky-btn-link-inline:focus-visible:not(:active) {
1881
1911
  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);
1912
+ 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
1913
  }
1884
1914
  .sky-theme-modern .sky-btn-link-inline:active {
1885
1915
  background-color: var(--sky-color-background-action-tertiary-active);
@@ -1903,7 +1933,7 @@
1903
1933
  font-size: var(--sky-override-button-link-inline-font-size, inherit);
1904
1934
  }
1905
1935
  .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);
1936
+ 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
1937
  }
1908
1938
  .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
1939
  box-shadow: inset 0 0 0 0 var(--sky-color-border-action-tertiary-disabled);
@@ -1959,7 +1989,7 @@
1959
1989
  color: var(--sky-color-text-default);
1960
1990
  outline: solid var(--sky-border-width-selected-m) var(--sky-color-border-selected);
1961
1991
  outline-offset: calc(var(--sky-border-width-selected-m) * -1);
1962
- box-shadow: var(--sky-elevation-focus);
1992
+ box-shadow: var(--sky-override-tab-box-shadow-focus-elevation, none);
1963
1993
  }
1964
1994
  .sky-theme-modern .sky-btn-tab:active {
1965
1995
  color: var(--sky-color-text-default);
@@ -2017,7 +2047,7 @@
2017
2047
  }
2018
2048
  .sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab:focus-visible:not(:active) {
2019
2049
  background-color: transparent;
2020
- box-shadow: var(--sky-elevation-focus);
2050
+ box-shadow: var(--sky-override-tab-item-box-shadow-focus-elevation, none);
2021
2051
  outline: solid var(--sky-border-width-action-active) var(--sky-color-border-action-secondary-focus);
2022
2052
  outline-offset: calc(var(--sky-border-width-action-active) * -1);
2023
2053
  }
@@ -2097,6 +2127,7 @@
2097
2127
  --sky-override-switch-background-color-success: rgb(209.802919708, 231.7737226277, 192.2262773723);
2098
2128
  --sky-override-switch-background-color-warning: rgb(255, 233.5961538462, 202);
2099
2129
  --sky-override-switch-border-color: var(--modern-color-blue-74);
2130
+ --sky-override-switch-box-shadow-focus-elevation: var(--sky-elevation-focus);
2100
2131
  --sky-override-switch-checked-color: var(--sky-color-icon-action);
2101
2132
  --sky-override-switch-icon-checked-color-no-group: var(
2102
2133
  --sky-color-text-default
@@ -2180,7 +2211,7 @@
2180
2211
  border-color: var(--sky-color-border-input-focus);
2181
2212
  }
2182
2213
  .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus-visible:not(:active) + .sky-switch-control {
2183
- box-shadow: var(--sky-elevation-focus);
2214
+ box-shadow: var(--sky-override-switch-box-shadow-focus-elevation, none);
2184
2215
  outline: none;
2185
2216
  }
2186
2217
  .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 +2311,10 @@
2280
2311
 
2281
2312
  .sky-theme-modern:not(.sky-theme-brand-base) {
2282
2313
  --sky-override-a-border-radius: 0;
2314
+ --sky-override-a-box-shadow-focus:
2315
+ 0 0 0 var(--sky-border-width-action-focus)
2316
+ var(--sky-color-border-action-tertiary-focus),
2317
+ var(--sky-elevation-focus);
2283
2318
  --sky-override-a-color-hover-active: var(
2284
2319
  --sky-text-color-action-primary-hover
2285
2320
  );
@@ -2313,7 +2348,7 @@ html:has(.sky-theme-brand-base) {
2313
2348
  }
2314
2349
  .sky-theme-modern a:focus-visible:not(:active) {
2315
2350
  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);
2351
+ 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
2352
  }
2318
2353
  .sky-theme-modern h1,
2319
2354
  .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.1",
3
+ "version": "12.14.0",
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
  },