@skyux/theme 12.0.0-alpha.8 → 12.0.0-beta.0

package/css/sky.css

@@ -1,5 +1,5 @@
 @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
-@import url("https://sky.blackbaudcdn.net/static/skyux-icons/7.10.0/assets/css/skyux-icons.min.css");
+@import url("https://sky.blackbaudcdn.net/static/skyux-icons/7.21.0/assets/css/skyux-icons.min.css");
 /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
 /* Document
    ========================================================================== */
@@ -546,7 +546,6 @@ a.sky-btn:hover {
   display: inline;
   padding: 0;
   border: none;
-  vertical-align: top;
 }
 
 .sky-btn-link-inline:hover {
@@ -682,7 +681,6 @@ a.sky-btn:hover {
   line-height: inherit;
   display: inline;
   padding: 0;
-  vertical-align: top;
 }
 
 .sky-btn-borderless-inline:hover {
@@ -1722,6 +1720,9 @@ body:not(.sky-theme-modern) {
   flex: 1 0 35px;
   font-size: 18px;
 }
+.sky-switch:not(.sky-theme-modern *) .sky-switch-control.sky-switch-control-icon i {
+  justify-content: center;
+}
 .sky-switch:not(.sky-theme-modern *) .sky-switch-control::before {
   content: "";
 }
@@ -1874,6 +1875,16 @@ mark.sky-highlight-mark {
   outline: none;
 }
 
+#sky-icon-svg-sprite symbol path {
+  fill: currentColor;
+}
+#sky-icon-svg-sprite symbol path.sky-i-path-1 {
+  fill: var(--sky-icon-svg-color-input, currentColor);
+}
+#sky-icon-svg-sprite symbol path.sky-i-path-2 {
+  fill: var(--sky-icon-svg-path-2-color-input, #fff);
+}
+
 .sky-page-heading {
   font-family: "BLKB Sans Condensed", "Helvetica Neue Condensed", "Arial Narrow";
   color: var(--sky-text-color-default);

package/css/themes/modern/styles.css

@@ -173,6 +173,7 @@
   --sky-color-border-danger: var(--modern-color-red-50);
   --sky-color-border-selected_soft: var(--modern-color-blue-30);
   --sky-color-border-selected: var(--modern-color-blue-74);
+  --sky-color-background-icon_matte: var(--modern-color-blue-05);
   --sky-color-background-thumbnail_matte: var(--modern-color-white);
   --sky-color-background-file_drop: var(--modern-color-gray-05);
   --sky-color-background-list-disabled: var(--modern-color-gray-07);
@@ -294,12 +295,15 @@
   --sky-size-illustration-l: var(--modern-size-80);
   --sky-size-illustration-m: var(--modern-size-64);
   --sky-size-illustration-s: var(--modern-size-48);
+  --sky-size-icon-xxxl: var(--modern-size-48);
+  --sky-size-icon-xxl: var(--modern-size-40);
   --sky-size-icon-xl: var(--modern-size-32);
   --sky-size-icon-l: var(--modern-size-24);
   --sky-size-icon-m: var(--modern-size-20);
   --sky-size-icon-s: var(--modern-size-16);
-  --sky-size-icon-xs: var(--modern-size-10);
-  --sky-size-icon-xxs: var(--modern-size-5);
+  --sky-size-icon-xs: var(--modern-size-12);
+  --sky-size-icon-xxs: var(--modern-size-10);
+  --sky-size-icon-xxxs: var(--modern-size-5);
   --sky-size-picker_btn: var(--modern-size-30);
   --sky-size-switch: var(--modern-size-26);
   --sky-space-stacked-xxl: var(--modern-space-xxl);
@@ -381,6 +385,7 @@
   --sky-space-inset-vertical-top-l: var(--modern-space-lg);
   --sky-space-inset-vertical-top-m: var(--modern-space-md);
   --sky-space-inset-vertical-top-s: var(--modern-space-s);
+  --sky-space-inset-thumbnail_matte-xl: var(--modern-size-9);
   --sky-space-inset-thumbnail_matte-l: var(--modern-size-5);
   --sky-space-inset-thumbnail_matte-m: var(--modern-size-3);
   --sky-space-inset-thumbnail_matte-s: var(--modern-size-2);
@@ -476,9 +481,6 @@
   --sky-font-text_decoration-inline_link-hover: underline;
   --sky-font-text_decoration-inline_link-base: none;
   --sky-font-text_decoration-visible_link: underline;
-  --sky-font-weight-metric-l: var(--modern-font-weight-regular);
-  --sky-font-weight-metric-m: var(--modern-font-weight-regular);
-  --sky-font-weight-metric-s: var(--modern-font-weight-bold);
   --sky-font-weight-input-label: var(--modern-font-weight-regular);
   --sky-font-weight-hint-m: var(--modern-font-weight-regular);
   --sky-font-weight-hint-s: var(--modern-font-weight-regular);
@@ -500,9 +502,6 @@
   --sky-font-letter_spacing-input-label: var(--modern-letter_spacing-normal);
   --sky-font-family-monospaced: var(--modern-font-monospaced-family);
   --sky-font-family-primary: var(--modern-font-blkb_sans-family);
-  --sky-font-style-metric-l: var(--modern-font-weight-regular);
-  --sky-font-style-metric-m: var(--modern-font-weight-regular);
-  --sky-font-style-metric-s: var(--modern-font-weight-bold);
   --sky-font-style-input-label: var(--modern-font-style-regular);
   --sky-font-style-hint-m-style: italic;
   --sky-font-style-hint-m-weight: 400;
@@ -524,9 +523,6 @@
   --sky-font-style-emphasized: var(--modern-font-style-semibold);
   --sky-font-style-deemphasized-style: italic;
   --sky-font-style-deemphasized-weight: 400;
-  --sky-font-line_height-metric-l: var(--modern-line_height-normal);
-  --sky-font-line_height-metric-m: var(--modern-line_height-normal);
-  --sky-font-line_height-metric-s: var(--modern-line_height-normal);
   --sky-font-line_height-input-val: var(--modern-line_height-20);
   --sky-font-line_height-input-label: var(--modern-line_height-normal);
   --sky-font-line_height-hint-m: var(--modern-line_height-normal);
@@ -544,9 +540,6 @@
   --sky-font-line_height-body-m: var(--modern-line_height-150);
   --sky-font-line_height-body-s: var(--modern-line_height-normal);
   --sky-font-line_height-data_label: var(--modern-line_height-normal);
-  --sky-font-size-metric-l: var(--sky-font-size-display-1);
-  --sky-font-size-metric-m: var(--sky-font-size-display-3);
-  --sky-font-size-metric-s: var(--sky-font-size-display-4);
   --sky-font-size-input-val: var(--modern-font-size-200);
   --sky-font-size-input-label: var(--modern-font-size-125);
   --sky-font-size-hint-m: var(--modern-font-size-200);
@@ -621,7 +614,7 @@
   overflow: hidden;
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn {
+.sky-theme-modern:not(.sky-theme-brand-base) .sky-btn {
   --sky-override-borderless-icon-size: 26px;
   --sky-override-button-icon-borderless-padding: 1px;
   --sky-override-button-icon-padding: 9px 15px;
@@ -633,42 +626,41 @@
     --sky-text-color-action-primary-hover
   );
   --sky-override-button-link-inline-font-size: var(--sky-font-size-body-m);
-  --sky-override-button-link-inline-vertical-align: top;
   --sky-override-button-padding: 9px 21px;
-  --sky-override-button-primary-disabled-box-shadow: inset 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-primary-disabled-box-shadow:
+    inset 0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-primary-focus),
     var(--sky-elevation-focus);
-  --sky-override-button-icon-disabled-box-shadow: inset 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-icon-disabled-box-shadow:
+    inset 0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-secondary-focus),
     var(--sky-elevation-focus);
-  --sky-override-button-danger-disabled-box-shadow: inset 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-danger-disabled-box-shadow:
+    inset 0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-danger-focus),
     var(--sky-elevation-focus);
-  --sky-override-button-tertiary-disabled-box-shadow: inset 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-tertiary-disabled-box-shadow:
+    inset 0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-tertiary-focus),
     var(--sky-elevation-focus,);
-  --sky-override-button-link-inline-disabled-box-shadow: 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-link-inline-disabled-box-shadow:
+    0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-tertiary-focus),
     var(--sky-elevation-focus);
-  --sky-override-button-borderless-inline-disabled-box-shadow: 0 0 0
-      var(--sky-border-width-action-focus)
+  --sky-override-button-borderless-inline-disabled-box-shadow:
+    0 0 0 var(--sky-border-width-action-focus)
       var(--sky-color-border-action-tertiary-focus),
     var(--sky-elevation-focus);
 }
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn:not(.sky-btn-link-inline):not(.sky-btn-borderless-inline) {
+.sky-theme-modern:not(.sky-theme-brand-base) .sky-btn:not(.sky-btn-link-inline):not(.sky-btn-borderless-inline) {
   --sky-override-button-line-height: calc(20 / 14);
 }
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn.sky-btn-link-inline, .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn.sky-btn-borderless-inline {
+.sky-theme-modern:not(.sky-theme-brand-base) .sky-btn.sky-btn-link-inline, .sky-theme-modern:not(.sky-theme-brand-base) .sky-btn.sky-btn-borderless-inline {
   --sky-override-button-line-height: normal;
   --sky-override-button-opacity-disabled: 0.65;
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn-tab {
+.sky-theme-modern:not(.sky-theme-brand-base) .sky-btn-tab {
   --sky-override-tab-selected-background-color: var(--modern-color-transparent);
   --sky-override-tab-selected-border-bottom-size: var(--modern-size-3);
   --sky-override-tab-hover-border-bottom-color: var(--modern-color-blue-50);
@@ -1122,7 +1114,6 @@
   padding: var(--sky-space-inset-balanced-none);
   color: var(--sky-color-text-action);
   font-size: var(--sky-override-button-link-inline-font-size, inherit);
-  vertical-align: var(--sky-override-button-link-inline-vertical-align, "");
 }
 .sky-theme-modern .sky-btn-link-inline:focus-visible:not(:active) {
   background-color: var(--sky-color-background-action-tertiary-focus);
@@ -1148,7 +1139,6 @@
   color: var(--sky-color-text-deemphasized);
   padding: var(--sky-space-inset-balanced-none);
   font-size: var(--sky-override-button-link-inline-font-size, inherit);
-  vertical-align: var(--sky-override-button-link-inline-vertical-align, "");
 }
 .sky-theme-modern .sky-btn-borderless-inline:focus-visible:not(:active) {
   box-shadow: 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);
@@ -1290,11 +1280,11 @@
   box-shadow: var(--sky-elevation-overlay-400);
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) select {
+.sky-theme-modern:not(.sky-theme-brand-base) select {
   --sky-override-select-icon-size: var(--modern-size-15) var(--modern-size-30);
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-error-label {
+.sky-theme-modern:not(.sky-theme-brand-base) .sky-error-label {
   --sky-override-error-label-margin-top: var(--modern-size-5);
 }
 
@@ -1318,7 +1308,7 @@
   background-size: var(--sky-override-select-icon-size, var(--sky-size-icon-s) var(--sky-size-icon-xl));
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) {
+.sky-theme-modern:not(.sky-theme-brand-base) {
   --sky-override-icon-color-group: var(--sky-color-icon-action);
   --sky-override-icon-switch-border-width-disabled: 0;
   --sky-override-icon-switch-font-size: 18px;
@@ -1449,6 +1439,9 @@
   flex: 1 0 var(--sky-override-icon-switch-size, calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m) + var(--sky-space-inset-balanced-s) * 2));
   font-size: var(--sky-override-icon-switch-font-size, var(--sky-size-icon-m));
 }
+.sky-theme-modern .sky-switch .sky-switch-control.sky-switch-control-icon i {
+  justify-content: center;
+}
 .sky-theme-modern .sky-switch .sky-switch-control::before {
   content: "";
 }
@@ -1508,7 +1501,7 @@
   border-radius: var(--sky-border-radius-s);
 }
 
-.sky-theme-modern:not(.sky-theme-brand-blackbaud) {
+.sky-theme-modern:not(.sky-theme-brand-base) {
   --sky-override-a-border-radius: 0;
   --sky-override-a-color-hover-active: var(
     --sky-text-color-action-primary-hover
@@ -1517,8 +1510,9 @@
   --sky-override-p-line-height: var(--sky-font-line_height-body-m);
 }
 
-html:has(.sky-theme-brand-blackbaud) {
+html:has(.sky-theme-brand-base) {
   font-size: initial;
+  line-height: 1.4285714286;
 }
 
 .sky-theme-modern {
@@ -1531,7 +1525,7 @@ html:has(.sky-theme-brand-blackbaud) {
 }
 
 .sky-theme-modern form {
-  font-size: var(--sky-override-font-size, initial);
+  font-size: var(--sky-font-size-body-m);
   font-weight: var(--sky-override-form-font-weight, initial);
   transition: background-color 150ms, color 150ms;
 }
@@ -1593,24 +1587,24 @@ html:has(.sky-theme-brand-blackbaud) {
   border-radius: var(--sky-border-radius-s);
 }
 
-.sky-theme-modern.sky-theme-brand-blackbaud h1,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-1 {
+.sky-theme-modern.sky-theme-brand-base h1,
+.sky-theme-modern.sky-theme-brand-base .sky-font-heading-1 {
   line-height: var(--sky-font-line_height-heading-1);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud h2,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-2 {
+.sky-theme-modern.sky-theme-brand-base h2,
+.sky-theme-modern.sky-theme-brand-base .sky-font-heading-2 {
   line-height: var(--sky-font-line_height-heading-2);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud h3,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-3 {
+.sky-theme-modern.sky-theme-brand-base h3,
+.sky-theme-modern.sky-theme-brand-base .sky-font-heading-3 {
   line-height: var(--sky-font-line_height-heading-3);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud h4,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-4 {
+.sky-theme-modern.sky-theme-brand-base h4,
+.sky-theme-modern.sky-theme-brand-base .sky-font-heading-4 {
   line-height: var(--sky-font-line_height-heading-4);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud h5,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-heading-5 {
+.sky-theme-modern.sky-theme-brand-base h5,
+.sky-theme-modern.sky-theme-brand-base .sky-font-heading-5 {
   line-height: var(--sky-font-line_height-heading-5);
 }
 
@@ -1699,32 +1693,32 @@ html:has(.sky-theme-brand-blackbaud) {
   font-weight: var(--sky-font-weight-display-4);
 }
 
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-body-default {
+.sky-theme-modern.sky-theme-brand-base .sky-font-body-default {
   line-height: var(--sky-font-line_height-body-m);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-body-sm {
+.sky-theme-modern.sky-theme-brand-base .sky-font-body-sm {
   line-height: var(--sky-font-line_height-body-s);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-body-lg {
+.sky-theme-modern.sky-theme-brand-base .sky-font-body-lg {
   line-height: var(--sky-font-line_height-body-l);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-data-label {
+.sky-theme-modern.sky-theme-brand-base .sky-font-data-label {
   line-height: var(--sky-font-line_height-data_label);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-field-label {
+.sky-theme-modern.sky-theme-brand-base .sky-font-field-label {
   line-height: var(--sky-font-line_height-data_label);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-1 {
+.sky-theme-modern.sky-theme-brand-base .sky-font-display-1 {
   line-height: var(--sky-font-line_height-display-1);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-2 {
+.sky-theme-modern.sky-theme-brand-base .sky-font-display-2 {
   line-height: var(--sky-font-line_height-display-2);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-3,
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-headline {
+.sky-theme-modern.sky-theme-brand-base .sky-font-display-3,
+.sky-theme-modern.sky-theme-brand-base .sky-headline {
   line-height: var(--sky-font-line_height-display-3);
 }
-.sky-theme-modern.sky-theme-brand-blackbaud .sky-font-display-4 {
+.sky-theme-modern.sky-theme-brand-base .sky-font-display-4 {
   line-height: var(--sky-font-line_height-display-4);
 }