@skyux/theme 11.7.0 → 11.9.0

package/css/themes/modern/styles.css

@@ -3,6 +3,7 @@
   --modern-border-style-solid: solid;
   --modern-border-radius-pill: 10rem;
   --modern-border-radius-md: 6px;
+  --modern-border-radius-0: 0rem;
   --modern-shadow-size-24: 0 7px 27px 3px var(--modern-color-shadow_color);
   --modern-shadow-size-16: 0 3px 25px 2px var(--modern-color-shadow_color);
   --modern-shadow-size-8: 0 2px 15px 2px var(--modern-color-shadow_color);
@@ -11,11 +12,11 @@
   --modern-shadow-size-1: 0 1px 3px 0 var(--modern-color-shadow_color);
   --modern-shadow-size-0: 0 0 0 0 #000000;
   --modern-letter_spacing-normal: normal;
-  --modern-line-height-normal: normal;
-  --modern-line-height-150: 1.5;
-  --modern-line-height-115: 1.15;
-  --modern-line-height-110: 1.1;
-  --modern-line-height-20: 20px;
+  --modern-line_height-normal: normal;
+  --modern-line_height-150: 1.5;
+  --modern-line_height-115: 1.15;
+  --modern-line_height-110: 1.1;
+  --modern-line_height-20: 20px;
   --modern-font-blkb_sans-family: var(--modern-font-blkb_sans-name), var(--modern-font-blkb_sans-fallback);
   --modern-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
   --modern-font-blkb_sans-name: BLKB Sans;
@@ -210,33 +211,15 @@
 }
 
 .sky-theme-modern {
-  --sky-font_face-blkb_sans-bold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff) format("woff");
-  --sky-font_face-blkb_sans-bold-weight: 700;
-  --sky-font_face-blkb_sans-bold-style: normal;
-  --sky-font_face-blkb_sans-semibold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff) format("woff");
-  --sky-font_face-blkb_sans-semibold-weight: 600;
-  --sky-font_face-blkb_sans-semibold-style: normal;
-  --sky-font_face-blkb_sans-light-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff) format("woff");
-  --sky-font_face-blkb_sans-light-weight: 300;
-  --sky-font_face-blkb_sans-light-style: normal;
-  --sky-font_face-blkb_sans-thin-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff) format("woff");
-  --sky-font_face-blkb_sans-thin-weight: 100;
-  --sky-font_face-blkb_sans-thin-style: normal;
-  --sky-font_face-blkb_sans-italic-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff) format("woff");
-  --sky-font_face-blkb_sans-italic-weight: 400;
-  --sky-font_face-blkb_sans-italic-style: italic;
-  --sky-font_face-blkb_sans-regular-src: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff") format("woff");
-  --sky-font_face-blkb_sans-regular-weight: 400;
-  --sky-font_face-blkb_sans-regular-style: normal;
-  --sky-font_face-blkb_sans-name: var(--modern-font-blkb_sans-name);
   --sky-border-style-separator-row: var(--modern-border-style-dotted);
   --sky-border-style-separator-dark: var(--modern-border-style-solid);
   --sky-border-style-elevation: var(--modern-border-style-solid);
   --sky-border-style-divider: var(--modern-border-style-solid);
   --sky-border-style-accent: var(--modern-border-style-solid);
   --sky-border-radius-pill: var(--modern-border-radius-pill);
-  --sky-border-radius-m: var(--modern-size-6);
-  --sky-border-radius-s: var(--modern-size-6);
+  --sky-border-radius-m: var(--modern-border-radius-md);
+  --sky-border-radius-s: var(--modern-border-radius-md);
+  --sky-border-radius-0: var(--modern-border-radius-0);
   --sky-border-width-separator-row: var(--modern-size-1);
   --sky-border-width-separator-dark: var(--modern-size-1);
   --sky-border-width-input-disabled: var(--modern-size-1);
@@ -414,7 +397,7 @@
   --sky-font-weight-heading-5: var(--modern-font-weight-semibold);
   --sky-font-weight-heading-4: var(--modern-font-weight-semibold);
   --sky-font-weight-heading-3: var(--modern-font-weight-regular);
-  --sky-font-weight-heading-2: var(--modern-font-weight-light);
+  --sky-font-weight-heading-2: var(--modern-font-weight-regular);
   --sky-font-weight-heading-1: var(--modern-font-weight-light);
   --sky-font-weight-display-4: var(--modern-font-weight-bold);
   --sky-font-weight-display-3: var(--modern-font-weight-regular);
@@ -440,7 +423,7 @@
   --sky-font-style-heading-5: var(--modern-font-style-semibold);
   --sky-font-style-heading-4: var(--modern-font-style-semibold);
   --sky-font-style-heading-3: var(--modern-font-style-regular);
-  --sky-font-style-heading-2: var(--modern-font-style-light);
+  --sky-font-style-heading-2: var(--modern-font-style-regular);
   --sky-font-style-heading-1: var(--modern-font-style-light);
   --sky-font-style-display-4: var(--modern-font-style-bold);
   --sky-font-style-display-3: var(--modern-font-style-regular);
@@ -453,26 +436,26 @@
   --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);
-  --sky-font-line_height-hint-s: var(--modern-line-height-normal);
-  --sky-font-line_height-heading-5: var(--modern-line-height-110);
-  --sky-font-line_height-heading-4: var(--modern-line-height-110);
-  --sky-font-line_height-heading-3: var(--modern-line-height-110);
-  --sky-font-line_height-heading-2: var(--modern-line-height-110);
-  --sky-font-line_height-heading-1: var(--modern-line-height-110);
-  --sky-font-line_height-display-4: var(--modern-line-height-110);
-  --sky-font-line_height-display-3: var(--modern-line-height-110);
-  --sky-font-line_height-display-2: var(--modern-line-height-110);
-  --sky-font-line_height-display-1: var(--modern-line-height-110);
-  --sky-font-line_height-body-l: var(--modern-line-height-normal);
-  --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-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);
+  --sky-font-line_height-hint-s: var(--modern-line_height-normal);
+  --sky-font-line_height-heading-5: var(--modern-line_height-110);
+  --sky-font-line_height-heading-4: var(--modern-line_height-110);
+  --sky-font-line_height-heading-3: var(--modern-line_height-110);
+  --sky-font-line_height-heading-2: var(--modern-line_height-110);
+  --sky-font-line_height-heading-1: var(--modern-line_height-110);
+  --sky-font-line_height-display-4: var(--modern-line_height-110);
+  --sky-font-line_height-display-3: var(--modern-line_height-110);
+  --sky-font-line_height-display-2: var(--modern-line_height-110);
+  --sky-font-line_height-display-1: var(--modern-line_height-110);
+  --sky-font-line_height-body-l: var(--modern-line_height-normal);
+  --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);
@@ -1214,10 +1197,27 @@
   color: #fbfcfe;
 }
 
-.sky-theme-modern,
+:is(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) {
+  --sky-override-font-size: var(--sky-font-size-body-m);
+  --sky-override-form-font-weight: var(--sky-font-weight-body-m);
+  --sky-override-p-line-height: var(--sky-font-line_height-body-m);
+}
+
+html:has(.sky-theme-brand-blackbaud) {
+  font-size: initial;
+}
+
+.sky-theme-modern {
+  font-size: var(--sky-override-font-size, initial);
+  font-weight: var(--sky-font-weight-body-m);
+  font-family: var(--sky-font-family-primary);
+  color: var(--sky-color-text-default);
+  transition: background-color 150ms, color 150ms;
+}
+
 .sky-theme-modern form {
-  font-size: 16px;
-  font-weight: 400;
+  font-size: var(--sky-override-font-size, initial);
+  font-weight: var(--sky-override-form-font-weight, initial);
   transition: background-color 150ms, color 150ms;
 }
 
@@ -1229,129 +1229,165 @@
 }
 .sky-theme-modern h1,
 .sky-theme-modern .sky-font-heading-1 {
-  font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
-  font-size: 32px;
-  font-weight: 300;
+  color: var(--sky-color-text-heading);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-heading-1);
+  font-weight: var(--sky-font-weight-heading-1);
 }
 .sky-theme-modern h2,
 .sky-theme-modern .sky-font-heading-2 {
-  font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
-  font-size: 24px;
-  font-weight: 400;
+  color: var(--sky-color-text-heading);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-heading-2);
+  font-weight: var(--sky-font-weight-heading-2);
 }
 .sky-theme-modern h3,
 .sky-theme-modern .sky-font-heading-3 {
-  color: var(--sky-text-color-default);
-  font-size: 20px;
-  font-weight: 400;
+  color: var(--sky-color-text-heading);
+  font-size: var(--sky-font-size-heading-3);
+  font-weight: var(--sky-font-weight-heading-3);
 }
 .sky-theme-modern h4,
 .sky-theme-modern .sky-font-heading-4 {
-  color: var(--sky-text-color-default);
-  font-size: 16px;
-  font-weight: var(--sky-theme-modern-font-heading-4-weight);
+  color: var(--sky-color-text-heading);
+  font-size: var(--sky-font-size-heading-4);
+  font-weight: var(--sky-font-weight-heading-4);
   text-transform: none;
 }
 .sky-theme-modern h5,
 .sky-theme-modern .sky-font-heading-5 {
-  color: var(--sky-text-color-default);
-  font-size: 14px;
-  font-weight: var(--sky-theme-modern-font-heading-5-weight);
+  color: var(--sky-color-text-heading);
+  font-size: var(--sky-font-size-heading-5);
+  font-weight: var(--sky-font-weight-heading-5);
   text-transform: none;
 }
 .sky-theme-modern p {
-  line-height: 1.5;
+  line-height: var(--sky-override-p-line-height);
 }
 .sky-theme-modern mark.sky-highlight-mark {
   background-color: var(--sky-background-color-danger-dark);
   color: var(--sky-text-color-on-dark);
 }
-.sky-theme-modern.sky-theme-mode-dark h1,
-.sky-theme-modern.sky-theme-mode-dark h2,
-.sky-theme-modern.sky-theme-mode-dark h3,
-.sky-theme-modern.sky-theme-mode-dark h6,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-heading-1,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-heading-2,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-heading-3,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-heading-6 {
-  color: var(--sky-text-color-default);
-}
-.sky-theme-modern.sky-theme-mode-dark h4,
-.sky-theme-modern.sky-theme-mode-dark h5,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-heading-4,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-heading-5 {
-  color: var(--sky-text-color-deemphasized);
-}
 .sky-theme-modern .sky-rounded-corners {
   border-radius: var(--sky-border-radius-s);
 }
 
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) h1,
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-heading-1 {
+  line-height: var(--sky-font-line_height-heading-1);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) h2,
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-heading-2 {
+  line-height: var(--sky-font-line_height-heading-2);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) h3,
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-heading-3 {
+  line-height: var(--sky-font-line_height-heading-3);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) h4,
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-heading-4 {
+  line-height: var(--sky-font-line_height-heading-4);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) h5,
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-heading-5 {
+  line-height: var(--sky-font-line_height-heading-5);
+}
+
 .sky-theme-modern .sky-font-body-default {
-  font-size: 16px;
-  font-weight: 400;
+  color: var(--sky-color-text-default);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-body-m);
+  font-weight: var(--sky-font-weight-body-m);
 }
 .sky-theme-modern .sky-font-body-sm {
-  font-size: 13px;
-  font-weight: 400;
+  color: var(--sky-color-text-default);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-body-s);
+  font-weight: var(--sky-font-weight-body-s);
 }
 .sky-theme-modern .sky-font-body-lg {
-  font-size: 18px;
-  font-weight: 300;
+  color: var(--sky-color-text-default);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-body-l);
+  font-weight: var(--sky-font-weight-body-l);
 }
 .sky-theme-modern .sky-font-data-label {
-  color: #686c73;
-  font-size: 16px;
-  font-weight: 400;
+  color: var(--sky-color-text-deemphasized);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-data_label);
+  font-weight: var(--sky-font-weight-data_label);
 }
 .sky-theme-modern .sky-font-field-label {
-  color: #686c73;
-  font-size: 16px;
-  font-weight: 400;
+  color: var(--sky-color-text-deemphasized);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-data_label);
+  font-weight: var(--sky-font-weight-data_label);
 }
 .sky-theme-modern .sky-font-deemphasized {
-  color: var(--sky-text-color-deemphasized);
-  font-style: italic;
+  color: var(--sky-color-text-deemphasized);
+  font-family: var(--sky-font-family-primary);
+  font-style: var(--sky-font-style-deemphasized-style);
+  font-weight: var(--sky-font-style-deemphasized-weight);
   font-size: inherit;
 }
 .sky-theme-modern .sky-font-emphasized {
-  font-weight: 700;
+  font-family: var(--sky-font-family-primary);
   font-size: inherit;
+  font-weight: var(--sky-font-weight-emphasized);
 }
 .sky-theme-modern .sky-font-display-1 {
-  font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
-  font-size: 48px;
-  font-weight: 400;
+  color: var(--sky-color-text-default);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-display-1);
+  font-weight: var(--sky-font-weight-display-1);
 }
 .sky-theme-modern .sky-font-display-2 {
-  font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
-  font-size: 28px;
-  font-weight: 400;
+  color: var(--sky-color-text-default);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-display-2);
+  font-weight: var(--sky-font-weight-display-2);
 }
 .sky-theme-modern .sky-font-display-3,
 .sky-theme-modern .sky-headline {
-  font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
-  font-size: 20px;
-  font-weight: 400;
+  color: var(--sky-color-text-default);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-display-3);
+  font-weight: var(--sky-font-weight-display-3);
 }
 .sky-theme-modern .sky-font-display-4 {
-  font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
-  font-size: 16px;
-  font-weight: 700;
-}
-.sky-theme-modern.sky-theme-mode-dark .sky-font-data-label,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-display-1,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-display-2,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-display-3,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-display-4,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-emphasized,
-.sky-theme-modern.sky-theme-mode-dark .sky-headline {
-  color: var(--sky-text-color-default);
+  color: var(--sky-color-text-default);
+  font-family: var(--sky-font-family-primary);
+  font-size: var(--sky-font-size-display-4);
+  font-weight: var(--sky-font-weight-display-4);
 }
-.sky-theme-modern.sky-theme-mode-dark .sky-font-deemphasized,
-.sky-theme-modern.sky-theme-mode-dark .sky-field-label,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-data-label,
-.sky-theme-modern.sky-theme-mode-dark .sky-font-field-label {
-  color: var(--sky-text-color-deemphasized);
+
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-body-default {
+  line-height: var(--sky-font-line_height-body-m);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-body-sm {
+  line-height: var(--sky-font-line_height-body-s);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-body-lg {
+  line-height: var(--sky-font-line_height-body-l);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-data-label {
+  line-height: var(--sky-font-line_height-data_label);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-field-label {
+  line-height: var(--sky-font-line_height-data_label);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-display-1 {
+  line-height: var(--sky-font-line_height-display-1);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-display-2 {
+  line-height: var(--sky-font-line_height-display-2);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-display-3,
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-headline {
+  line-height: var(--sky-font-line_height-display-3);
+}
+:is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-display-4 {
+  line-height: var(--sky-font-line_height-display-4);
 }
 
 /*