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

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;
@@ -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);
 }
@@ -1737,7 +1811,7 @@ button:active {
 }
 
 a.sky-btn:hover {
-  text-decoration: none;
+  text-decoration-line: none;
 }
 
 .sky-btn-default {
@@ -1807,6 +1881,10 @@ a.sky-btn:hover {
   text-decoration: underline;
   outline: none;
 }
+.sky-btn-link:hover.sky-btn-disabled, .sky-btn-link-inline:hover.sky-btn-disabled, .sky-btn-link:hover[disabled], .sky-btn-link-inline:hover[disabled] {
+  color: var(--sky-text-color-action-primary);
+  text-decoration-line: none;
+}
 
 .sky-btn-link-inline {
   font-size: inherit;
@@ -1942,6 +2020,9 @@ a.sky-btn:hover {
   color: rgb(55.5616438356, 57.698630137, 61.4383561644);
   transition: color var(--sky-global-duration-short);
 }
+.sky-btn-borderless:hover[disabled], .sky-btn-borderless-inline:hover[disabled], .sky-btn-borderless:hover.sky-btn-disabled, .sky-btn-borderless-inline:hover.sky-btn-disabled {
+  color: #686c73;
+}
 .sky-btn-borderless, .sky-btn-borderless-inline {
   border: none;
 }
@@ -1969,6 +2050,9 @@ a.sky-btn:hover {
   color: rgb(55.5616438356, 57.698630137, 61.4383561644);
   transition: color var(--sky-global-duration-short);
 }
+.sky-btn-icon-borderless:hover[disabled], .sky-btn-icon-borderless:hover.sky-btn-disabled {
+  color: #686c73;
+}
 .sky-btn-icon-borderless {
   height: 26px;
   width: 26px;
@@ -1976,6 +2060,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;
@@ -2432,6 +2549,30 @@ body:not(.sky-theme-modern) {
       var(--sky-comp-layout-header-list-space-inset-xs-bottom)
       var(--sky-comp-layout-header-list-space-inset-xs-left)
   );
+  --sky-comp-override-toolbar-space-inset-top: var(
+    --sky-comp-toolbar-space-inset-top
+  );
+  --sky-comp-override-toolbar-space-inset-right: var(
+    --sky-comp-toolbar-space-inset-right
+  );
+  --sky-comp-override-toolbar-space-inset-left: var(
+    --sky-comp-toolbar-space-inset-left
+  );
+  --sky-comp-override-toolbar-section-space-inset-top: var(
+    --sky-comp-toolbar-space-inset-top
+  );
+  --sky-comp-override-toolbar-section-space-inset-right: var(
+    --sky-comp-toolbar-space-inset-right
+  );
+  --sky-comp-override-toolbar-section-space-inset-left: var(
+    --sky-comp-toolbar-space-inset-left
+  );
+  --sky-comp-override-list-summary-space-inset-right: var(
+    --sky-comp-list_summary-space-inset-right
+  );
+  --sky-comp-override-list-summary-space-inset-left: var(
+    --sky-comp-list_summary-space-inset-left
+  );
 }
 .sky-layout-host-tabs {
   --sky-layout-host-content-spacing: 0;
@@ -3190,15 +3331,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 {