@skyux/theme 15.0.0-alpha.1 → 15.0.0-alpha.10

package/css/sky.css

@@ -357,6 +357,7 @@ template {
   --sky-theme-font-style-hint-m-weight: 400;
   --sky-theme-font-style-hint-s-style: italic;
   --sky-theme-font-style-hint-s-weight: 400;
+  --sky-theme-font-text_decoration-action-on_status: var(--sky-font-text_decoration-action-tertiary-on_status-base);
   --sky-theme-font-letter_spacing-hint-s: var(--sky-font-letter_spacing-hint-s);
   --sky-theme-font-line_height-body-deemphasized-m: var(--sky-font-line_height-body-m);
   --sky-theme-font-line_height-body-deemphasized-s: var(--sky-font-line_height-body-s);
@@ -446,7 +447,9 @@ template {
   --sky-theme-color-background-container-danger: var(--sky-color-background-container-danger);
   --sky-theme-color-background-container-default: var(--sky-color-background-container-base);
   --sky-theme-color-background-container-dimmed: var(--sky-color-background-container-dimmed);
+  --sky-theme-color-background-container-header-prominent: var(--sky-color-background-container-header-prominent);
   --sky-theme-color-background-container-info: var(--sky-color-background-container-info);
+  --sky-theme-color-background-container-prominent: var(--sky-color-background-container-prominent);
   --sky-theme-color-background-container-success: var(--sky-color-background-container-success);
   --sky-theme-color-background-container-warning: var(--sky-color-background-container-warning);
   --sky-theme-color-background-disabled: var(--sky-color-background-disabled);
@@ -456,7 +459,9 @@ template {
   --sky-theme-color-background-icon_matte-success: var(--sky-color-background-icon_matte-success);
   --sky-theme-color-background-icon_matte-warning: var(--sky-color-background-icon_matte-warning);
   --sky-theme-color-background-page: var(--sky-color-background-page);
+  --sky-theme-color-border-action-on_status-focus: var(--sky-color-border-action-on_status-focus);
   --sky-theme-color-border-container-default: var(--sky-color-border-container-base);
+  --sky-theme-color-border-container-header-prominent: var(--sky-color-border-container-header-prominent);
   --sky-theme-color-border-danger: var(--sky-color-border-danger);
   --sky-theme-color-border-disabled: var(--sky-color-border-disabled);
   --sky-theme-color-border-divider-default: var(--sky-color-border-divider);
@@ -484,13 +489,20 @@ template {
   --sky-theme-color-icon-default: var(--sky-color-icon-default);
   --sky-theme-color-icon-info: var(--sky-color-icon-info);
   --sky-theme-color-icon-inverse: var(--sky-color-icon-inverse);
+  --sky-theme-color-icon-on_prominent-base: var(--sky-color-icon-on_prominent-base);
+  --sky-theme-color-icon-on_prominent-disabled: var(--sky-color-icon-on_prominent-disabled);
+  --sky-theme-color-icon-on_status: var(--sky-color-icon-on_status);
+  --sky-theme-color-icon-on_status_bg: var(--sky-color-icon-on_status_bg);
   --sky-theme-color-icon-success: var(--sky-color-icon-success);
   --sky-theme-color-text-action: var(--sky-color-text-action);
   --sky-theme-color-text-action_contrast: var(--sky-color-text-action_contrast);
+  --sky-theme-color-text-action_on_status: var(--sky-color-text-action_on_status);
   --sky-theme-color-text-deemphasized: var(--sky-color-text-deemphasized);
   --sky-theme-color-text-default: var(--sky-color-text-default);
   --sky-theme-color-text-heading: var(--sky-color-text-heading);
   --sky-theme-color-text-inverse: var(--sky-color-text-inverse);
+  --sky-theme-color-text-on_prominent: var(--sky-color-text-on_prominent);
+  --sky-theme-color-text-on_status: var(--sky-color-text-on_status);
   --sky-theme-color-viz-axis: var(--sky-color-viz-axis);
   --sky-theme-color-viz-category-1: var(--sky-color-viz-category-1);
   --sky-theme-color-viz-category-2: var(--sky-color-viz-category-2);
@@ -536,6 +548,8 @@ template {
 
 .sky-theme-modern.sky-theme-brand-base {
   --sky-theme-border-container-default: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-container-base);
+  --sky-theme-border-container-header-prominent: var(--sky-border-width-emphasized) var(--sky-border-style-divider) var(--sky-color-border-container-header-prominent);
+  --sky-theme-border-container-overlay: var(--sky-border-width-container-base) var(--sky-border-style-container-overlay) var(--sky-color-border-container-base);
   --sky-theme-border-danger: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-danger);
   --sky-theme-border-divider-default: var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider);
   --sky-theme-border-divider-soft: var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row);
@@ -548,6 +562,7 @@ template {
   --sky-theme-border-radius-s: var(--sky-border-radius-s);
   --sky-theme-border-radius-xs: var(--sky-border-radius-xs);
   --sky-theme-border-style-accent: var(--sky-border-style-accent);
+  --sky-theme-border-style-container-overlay: var(--sky-border-style-container-overlay);
   --sky-theme-border-style-divider-default: var(--sky-border-style-divider);
   --sky-theme-border-style-divider-soft: var(--sky-border-style-separator-row);
   --sky-theme-border-width-accent: var(--sky-border-width-accent);
@@ -643,6 +658,7 @@ template {
   --sky-theme-font-style-hint-s-style: italic;
   --sky-theme-font-style-hint-s-weight: 400;
   --sky-theme-font-style-strong: 700;
+  --sky-theme-font-text_decoration-action-on_status: underline;
   --sky-theme-font-weight-body-deemphasized-m: 400;
   --sky-theme-font-weight-body-deemphasized-s: 400;
   --sky-theme-font-weight-body-emphasized-m: 600;
@@ -674,7 +690,9 @@ template {
   --sky-theme-color-background-container-danger: #f7a08f;
   --sky-theme-color-background-container-default: #ffffff;
   --sky-theme-color-background-container-dimmed: #eeeeef;
+  --sky-theme-color-background-container-header-prominent: #32435e;
   --sky-theme-color-background-container-info: #81d4f7;
+  --sky-theme-color-background-container-prominent: #f6f8fa;
   --sky-theme-color-background-container-success: #b7da9b;
   --sky-theme-color-background-container-warning: #ffd597;
   --sky-theme-color-background-disabled: #cdcfd2;
@@ -684,7 +702,9 @@ template {
   --sky-theme-color-background-icon_matte-success: #b7da9b;
   --sky-theme-color-background-icon_matte-warning: #ffd597;
   --sky-theme-color-background-page: #ffffff;
+  --sky-theme-color-border-action-on_status-focus: #212327;
   --sky-theme-color-border-container-default: #cdcfd2;
+  --sky-theme-color-border-container-header-prominent: #7289af;
   --sky-theme-color-border-danger: #ef4044;
   --sky-theme-color-border-disabled: #cdcfd2;
   --sky-theme-color-border-divider-default: #cdcfd2;
@@ -712,13 +732,20 @@ template {
   --sky-theme-color-icon-default: #212327;
   --sky-theme-color-icon-info: #00b4f1;
   --sky-theme-color-icon-inverse: #ffffff;
+  --sky-theme-color-icon-on_prominent-base: #ffffff;
+  --sky-theme-color-icon-on_prominent-disabled: #686c73;
+  --sky-theme-color-icon-on_status: #ffffff;
+  --sky-theme-color-icon-on_status_bg: #212327;
   --sky-theme-color-icon-success: #72bf44;
   --sky-theme-color-text-action: #0974a1;
   --sky-theme-color-text-action_contrast: #0974a1;
+  --sky-theme-color-text-action_on_status: #212327;
   --sky-theme-color-text-deemphasized: #686c73;
   --sky-theme-color-text-default: #212327;
   --sky-theme-color-text-heading: #212327;
   --sky-theme-color-text-inverse: #ffffff;
+  --sky-theme-color-text-on_prominent: #ffffff;
+  --sky-theme-color-text-on_status: #212327;
   --sky-theme-color-viz-axis: #85888d;
   --sky-theme-color-viz-category-1: #06a39e;
   --sky-theme-color-viz-category-2: #6d3c96;
@@ -764,6 +791,8 @@ template {
 
 :root {
   --sky-theme-border-container-default: 1px solid #cdcfd2;
+  --sky-theme-border-container-header-prominent: 1px solid #7289AF;
+  --sky-theme-border-container-overlay: 1px none #cdcfd2;
   --sky-theme-border-danger: 1px solid #ef4044;
   --sky-theme-border-divider-default: 1px solid #cdcfd2;
   --sky-theme-border-divider-soft: 1px solid #cdcfd2;
@@ -774,6 +803,7 @@ template {
   --sky-theme-border-radius-s: 4px;
   --sky-theme-border-radius-xs: 4px;
   --sky-theme-border-style-accent: solid;
+  --sky-theme-border-style-container-overlay: none;
   --sky-theme-border-style-divider-default: solid;
   --sky-theme-border-style-divider-soft: solid;
   --sky-theme-border-success: 1px solid #72bf44;
@@ -1070,7 +1100,7 @@ h4 {
   font-size: var(--sky-theme-font-size-heading-5);
   line-height: var(--sky-theme-font-line_height-heading-5);
   font-family: var(--sky-theme-font-family-heading-5);
-  color: var(--sky-theme-color-text-heading);
+  color: var(--sky-theme-color-text-deemphasized);
 }
 
 h5 {
@@ -1078,7 +1108,7 @@ h5 {
   font-size: var(--sky-theme-font-size-heading-5);
   line-height: var(--sky-theme-font-line_height-heading-5);
   font-family: var(--sky-theme-font-family-heading-5);
-  color: var(--sky-theme-color-text-heading);
+  color: var(--sky-theme-color-text-deemphasized);
 }
 
 .sky-theme-font-body-m {
@@ -1243,6 +1273,14 @@ em {
   background-color: var(--sky-theme-color-background-container-backdrop);
 }
 
+.sky-theme-color-background-container-prominent {
+  background-color: var(--sky-theme-color-background-container-prominent);
+}
+
+.sky-theme-color-background-container-header-prominent {
+  background-color: var(--sky-theme-color-background-container-header-prominent);
+}
+
 .sky-theme-color-background-disabled {
   background-color: var(--sky-theme-color-background-disabled);
 }
@@ -1255,6 +1293,14 @@ em {
   color: var(--sky-theme-color-text-inverse);
 }
 
+.sky-theme-color-text-on_status {
+  color: var(--sky-theme-color-text-on_status);
+}
+
+.sky-theme-color-text-on_prominent {
+  color: var(--sky-theme-color-text-on_prominent);
+}
+
 .sky-theme-color-icon-default {
   color: var(--sky-theme-color-icon-default);
 }
@@ -1271,6 +1317,14 @@ em {
   color: var(--sky-theme-color-icon-inverse);
 }
 
+.sky-theme-color-icon-on_status {
+  color: var(--sky-theme-color-icon-on_status);
+}
+
+.sky-theme-color-icon-on_prominent {
+  color: var(--sky-theme-color-icon-on_prominent-base);
+}
+
 .sky-theme-color-background-icon_matte-action-soft {
   background-color: var(--sky-theme-color-background-icon_matte-action-soft);
 }
@@ -1379,6 +1433,26 @@ em {
   border: var(--sky-theme-border-container-default);
 }
 
+.sky-theme-border-container-header-prominent {
+  border-bottom: var(--sky-theme-border-container-header-prominent);
+}
+
+.sky-theme-border-container-overlay-top {
+  border-top: var(--sky-theme-border-container-overlay);
+}
+
+.sky-theme-border-container-overlay-right {
+  border-right: var(--sky-theme-border-container-overlay);
+}
+
+.sky-theme-border-container-overlay-bottom {
+  border-bottom: var(--sky-theme-border-container-overlay);
+}
+
+.sky-theme-border-container-overlay-left {
+  border-left: var(--sky-theme-border-container-overlay);
+}
+
 .sky-theme-border-divider-default-top {
   border-top: var(--sky-theme-border-divider-default);
 }
@@ -1731,13 +1805,13 @@ button:active {
 }
 .sky-btn.sky-btn-disabled, .sky-btn[disabled] {
   cursor: not-allowed;
-  pointer-events: none;
+  pointer-events: var(--sky-compat-btn-disabled-pointer-events, auto);
   opacity: 0.65;
   box-shadow: none;
 }
 
 a.sky-btn:hover {
-  text-decoration: none;
+  text-decoration-line: none;
 }
 
 .sky-btn-default {
@@ -1976,6 +2050,39 @@ a.sky-btn:hover {
   padding: 0;
 }
 
+.sky-btn-icon-borderless-on_prominent {
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: #ffffff;
+  cursor: pointer;
+  height: 26px;
+  padding: 0;
+  text-align: center;
+  width: 26px;
+}
+.sky-btn-icon-borderless-on_prominent:hover {
+  background-color: #42597e;
+  border: 1px solid #aac4ee;
+  color: #ffffff;
+}
+.sky-btn-icon-borderless-on_prominent:active, .sky-btn-icon-borderless-on_prominent.sky-btn-active {
+  background-color: #536f9d;
+  border: 1px solid #aac4ee;
+  box-shadow: none;
+  color: #ffffff;
+}
+.sky-btn-icon-borderless-on_prominent:focus-visible:not(:active) {
+  background-color: transparent;
+  border: 1px solid #aac4ee;
+  outline: none;
+}
+.sky-btn-icon-borderless-on_prominent.sky-btn-disabled, .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:hover, .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:focus-visible, .sky-btn-icon-borderless-on_prominent.sky-btn-disabled:active, .sky-btn-icon-borderless-on_prominent.sky-btn-disabled.sky-btn-active, .sky-btn-icon-borderless-on_prominent[disabled], .sky-btn-icon-borderless-on_prominent[disabled]:hover, .sky-btn-icon-borderless-on_prominent[disabled]:focus-visible, .sky-btn-icon-borderless-on_prominent[disabled]:active, .sky-btn-icon-borderless-on_prominent[disabled].sky-btn-active {
+  background-color: #51555c;
+  border: 1px solid #3b4047;
+  color: #c2c4c6;
+  opacity: 1;
+}
+
 .sky-btn-block {
   display: block;
   overflow: hidden;
@@ -2166,6 +2273,10 @@ a.sky-btn:hover {
   --sky-override-form-control-color: var(--sky-text-color-default);
 }
 
+select:not(.sky-theme-modern *) {
+  --sky-override-select-icon-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+);
+}
+
 .sky-form-control {
   width: 100%;
   padding: 6px 12px;
@@ -2247,7 +2358,7 @@ fieldset {
 
 select {
   appearance: none;
-  background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right/15px 30px;
+  background: #fff var(--sky-override-select-icon-image, var(--sky-image-select_icon-base)) no-repeat right/15px 30px;
   border-top: 1px solid #e2e3e4;
   border-bottom: 1px solid #e2e3e4;
   border-left: 1px solid #e2e3e4;
@@ -3142,6 +3253,18 @@ body:not(.sky-theme-modern) {
   border-bottom-right-radius: 3px;
 }
 
+html:not(:has(body.sky-theme-modern)) {
+  --sky-override-scrollbar-color-thumb: auto;
+  --sky-override-scrollbar-color-track: auto;
+}
+
+body:not(.sky-theme-modern) {
+  --sky-override-color-illustration-fill-softest: #ffffff;
+  --sky-override-color-illustration-fill-soft: #e7fbf1;
+  --sky-override-color-illustration-fill-heavy: #6de8ab;
+  --sky-override-color-illustration-stroke: #004054;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -3158,6 +3281,10 @@ body {
   color: var(--sky-text-color-default);
 }
 
+html {
+  scrollbar-color: var(--sky-override-scrollbar-color-thumb, var(--sky-color-scrollbar-thumb)) var(--sky-override-scrollbar-color-track, var(--sky-color-scrollbar-track));
+}
+
 h6 {
   font-size: 10px;
   font-weight: 600;
@@ -3170,15 +3297,15 @@ h6 {
 
 a {
   color: var(--sky-text-color-action-primary);
-  text-decoration: none;
+  text-decoration-line: none;
 }
 a:hover, a:active {
   color: var(--sky-text-color-action-primary-hover);
-  text-decoration: underline;
+  text-decoration-line: underline;
 }
 a.sky-href[href=""], a.sky-href[href=""]:hover, a.sky-href[href=""]:active, a.sky-href:not([href]), a.sky-href:not([href]):hover, a.sky-href:not([href]):active {
   color: inherit !important;
-  text-decoration: none !important;
+  text-decoration-line: none !important;
 }
 
 .sky-pull-right {
@@ -3245,16 +3372,16 @@ symbol[id^=sky-i-]:not(.sky-i-branded) *.sky-i-path-2 {
   width: 100%;
 }
 .sky-illustration-svg .sky-illustration-fill-softest {
-  fill: #ffffff;
+  fill: var(--sky-override-color-illustration-fill-softest, var(--sky-color-illustration-fill-softest));
 }
 .sky-illustration-svg .sky-illustration-fill-soft {
-  fill: #e7fbf1;
+  fill: var(--sky-override-color-illustration-fill-soft, var(--sky-color-illustration-fill-soft));
 }
 .sky-illustration-svg .sky-illustration-fill-heavy {
-  fill: #6de8ab;
+  fill: var(--sky-override-color-illustration-fill-heavy, var(--sky-color-illustration-fill-heavy));
 }
 .sky-illustration-svg .sky-illustration-outline {
-  stroke: #004054;
+  stroke: var(--sky-override-color-illustration-stroke, var(--sky-color-illustration-stroke));
 }
 
 .sky-viewkeeper-boundary {