@carbon/ibm-products 2.8.1 → 2.9.0

package/css/index-without-carbon.css

@@ -368,31 +368,31 @@
   display: block;
 }
 
-.cds--popover--tab-tip > .cds--popover .cds--popover-caret {
+.cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
   display: none;
 }
 
-.cds--popover--bottom > .cds--popover .cds--popover-content {
+.cds--popover--bottom > .cds--popover > .cds--popover-content {
   bottom: 0;
   left: 50%;
   transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--bottom-left > .cds--popover .cds--popover-content {
+.cds--popover--bottom-left > .cds--popover > .cds--popover-content {
   bottom: 0;
   left: 0;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--bottom-right > .cds--popover .cds--popover-content {
+.cds--popover--bottom-right > .cds--popover > .cds--popover-content {
   right: 0;
   bottom: 0;
   transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--bottom > .cds--popover .cds--popover-content::before,
-.cds--popover--bottom-left > .cds--popover .cds--popover-content::before,
-.cds--popover--bottom-right > .cds--popover .cds--popover-content::before {
+.cds--popover--bottom > .cds--popover > .cds--popover-content::before,
+.cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
+.cds--popover--bottom-right > .cds--popover > .cds--popover-content::before {
   top: 0;
   right: 0;
   left: 0;
@@ -400,9 +400,9 @@
   transform: translateY(-100%);
 }
 
-.cds--popover--bottom > .cds--popover .cds--popover-caret,
-.cds--popover--bottom-left > .cds--popover .cds--popover-caret,
-.cds--popover--bottom-right > .cds--popover .cds--popover-caret {
+.cds--popover--bottom > .cds--popover > .cds--popover-caret,
+.cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
+.cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
   bottom: 0;
   left: 50%;
   width: var(--cds-popover-caret-width, 0.75rem);
@@ -411,27 +411,27 @@
   transform: translate(-50%, var(--cds-popover-offset, 0rem));
 }
 
-.cds--popover--top > .cds--popover .cds--popover-content {
+.cds--popover--top > .cds--popover > .cds--popover-content {
   top: 0;
   left: 50%;
   transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--top-left > .cds--popover .cds--popover-content {
+.cds--popover--top-left > .cds--popover > .cds--popover-content {
   top: 0;
   left: 0;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--top-right > .cds--popover .cds--popover-content {
+.cds--popover--top-right > .cds--popover > .cds--popover-content {
   top: 0;
   right: 0;
   transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--top > .cds--popover .cds--popover-content::before,
-.cds--popover--top-left > .cds--popover .cds--popover-content::before,
-.cds--popover--top-right > .cds--popover .cds--popover-content::before {
+.cds--popover--top > .cds--popover > .cds--popover-content::before,
+.cds--popover--top-left > .cds--popover > .cds--popover-content::before,
+.cds--popover--top-right > .cds--popover > .cds--popover-content::before {
   right: 0;
   bottom: 0;
   left: 0;
@@ -439,9 +439,9 @@
   transform: translateY(100%);
 }
 
-.cds--popover--top > .cds--popover .cds--popover-caret,
-.cds--popover--top-left > .cds--popover .cds--popover-caret,
-.cds--popover--top-right > .cds--popover .cds--popover-caret {
+.cds--popover--top > .cds--popover > .cds--popover-caret,
+.cds--popover--top-left > .cds--popover > .cds--popover-caret,
+.cds--popover--top-right > .cds--popover > .cds--popover-caret {
   top: 0;
   left: 50%;
   width: var(--cds-popover-caret-width, 0.75rem);
@@ -450,27 +450,27 @@
   transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--right > .cds--popover .cds--popover-content {
+.cds--popover--right > .cds--popover > .cds--popover-content {
   top: 50%;
   left: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), -50%);
 }
 
-.cds--popover--right-top > .cds--popover .cds--popover-content {
+.cds--popover--right-top > .cds--popover > .cds--popover-content {
   top: 50%;
   left: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
 }
 
-.cds--popover--right-bottom > .cds--popover .cds--popover-content {
+.cds--popover--right-bottom > .cds--popover > .cds--popover-content {
   bottom: 50%;
   left: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
-.cds--popover--right > .cds--popover .cds--popover-content::before,
-.cds--popover--right-top > .cds--popover .cds--popover-content::before,
-.cds--popover--right-bottom > .cds--popover .cds--popover-content::before {
+.cds--popover--right > .cds--popover > .cds--popover-content::before,
+.cds--popover--right-top > .cds--popover > .cds--popover-content::before,
+.cds--popover--right-bottom > .cds--popover > .cds--popover-content::before {
   top: 0;
   bottom: 0;
   left: 0;
@@ -478,9 +478,9 @@
   transform: translateX(-100%);
 }
 
-.cds--popover--right > .cds--popover .cds--popover-caret,
-.cds--popover--right-top > .cds--popover .cds--popover-caret,
-.cds--popover--right-bottom > .cds--popover .cds--popover-caret {
+.cds--popover--right > .cds--popover > .cds--popover-caret,
+.cds--popover--right-top > .cds--popover > .cds--popover-caret,
+.cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
   top: 50%;
   left: 100%;
   width: var(--cds-popover-caret-height, 0.375rem);
@@ -489,27 +489,27 @@
   transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
 }
 
-.cds--popover--left > .cds--popover .cds--popover-content {
+.cds--popover--left > .cds--popover > .cds--popover-content {
   top: 50%;
   right: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
 }
 
-.cds--popover--left-top > .cds--popover .cds--popover-content {
+.cds--popover--left-top > .cds--popover > .cds--popover-content {
   top: -50%;
   right: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
-.cds--popover--left-bottom > .cds--popover .cds--popover-content {
+.cds--popover--left-bottom > .cds--popover > .cds--popover-content {
   right: 100%;
   bottom: -50%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
 }
 
-.cds--popover--left > .cds--popover .cds--popover-content::before,
-.cds--popover--left-top > .cds--popover .cds--popover-content::before,
-.cds--popover--left-bottom > .cds--popover .cds--popover-content::before {
+.cds--popover--left > .cds--popover > .cds--popover-content::before,
+.cds--popover--left-top > .cds--popover > .cds--popover-content::before,
+.cds--popover--left-bottom > .cds--popover > .cds--popover-content::before {
   top: 0;
   right: 0;
   bottom: 0;
@@ -517,9 +517,9 @@
   transform: translateX(100%);
 }
 
-.cds--popover--left > .cds--popover .cds--popover-caret,
-.cds--popover--left-top > .cds--popover .cds--popover-caret,
-.cds--popover--left-bottom > .cds--popover .cds--popover-caret {
+.cds--popover--left > .cds--popover > .cds--popover-caret,
+.cds--popover--left-top > .cds--popover > .cds--popover-caret,
+.cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
   top: 50%;
   right: 100%;
   width: var(--cds-popover-caret-height, 0.375rem);
@@ -528,7 +528,7 @@
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
 }
 
-.cds--popover--tab-tip > .cds--popover .cds--popover-content {
+.cds--popover--tab-tip > .cds--popover > .cds--popover-content {
   border-radius: 0;
 }
 
@@ -847,14 +847,14 @@
   padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
 }
 .cds--btn--ghost:hover {
-  background-color: var(--cds-layer-hover);
+  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
 }
 .cds--btn--ghost:focus {
   border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
   box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
 .cds--btn--ghost:active {
-  background-color: var(--cds-layer-active);
+  background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
 }
 .cds--btn--ghost .cds--btn__icon,
 .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
@@ -14531,71 +14531,71 @@ th.c4p--datagrid__select-all-toggle-on.button {
   }
 }
 :root {
-  --cds-layer:var(--cds-layer-01, #f4f4f4);
-  --cds-layer-active:var(--cds-layer-active-01, #c6c6c6);
-  --cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);
-  --cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);
-  --cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);
-  --cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);
-  --cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);
-  --cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);
-  --cds-field:var(--cds-field-01, #f4f4f4);
-  --cds-field-hover:var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);
-  --cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);
-  --cds-border-strong:var(--cds-border-strong-01, #8d8d8d);
-  --cds-border-tile:var(--cds-border-tile-01, #c6c6c6);
+  --cds-layer: var(--cds-layer-01, #f4f4f4);
+  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
+  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
+  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
+  --cds-field: var(--cds-field-01, #f4f4f4);
+  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
 }
 
 .cds--layer-one {
-  --cds-layer:var(--cds-layer-01, #f4f4f4);
-  --cds-layer-active:var(--cds-layer-active-01, #c6c6c6);
-  --cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);
-  --cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);
-  --cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);
-  --cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);
-  --cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);
-  --cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);
-  --cds-field:var(--cds-field-01, #f4f4f4);
-  --cds-field-hover:var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);
-  --cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);
-  --cds-border-strong:var(--cds-border-strong-01, #8d8d8d);
-  --cds-border-tile:var(--cds-border-tile-01, #c6c6c6);
+  --cds-layer: var(--cds-layer-01, #f4f4f4);
+  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
+  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
+  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
+  --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
+  --cds-field: var(--cds-field-01, #f4f4f4);
+  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
 }
 
 .cds--layer-two {
-  --cds-layer:var(--cds-layer-02, #ffffff);
-  --cds-layer-active:var(--cds-layer-active-02, #c6c6c6);
-  --cds-layer-hover:var(--cds-layer-hover-02, #e8e8e8);
-  --cds-layer-selected:var(--cds-layer-selected-02, #e0e0e0);
-  --cds-layer-selected-hover:var(--cds-layer-selected-hover-02, #d1d1d1);
-  --cds-layer-accent:var(--cds-layer-accent-02, #e0e0e0);
-  --cds-layer-accent-hover:var(--cds-layer-accent-hover-02, #d1d1d1);
-  --cds-layer-accent-active:var(--cds-layer-accent-active-02, #a8a8a8);
-  --cds-field:var(--cds-field-02, #ffffff);
-  --cds-field-hover:var(--cds-field-hover-02, #e8e8e8);
-  --cds-border-subtle:var(--cds-border-subtle-01, #c6c6c6);
-  --cds-border-subtle-selected:var(--cds-border-subtle-selected-02, #c6c6c6);
-  --cds-border-strong:var(--cds-border-strong-02, #8d8d8d);
-  --cds-border-tile:var(--cds-border-tile-02, #a8a8a8);
+  --cds-layer: var(--cds-layer-02, #ffffff);
+  --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
+  --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
+  --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
+  --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
+  --cds-field: var(--cds-field-02, #ffffff);
+  --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
 }
 
 .cds--layer-three {
-  --cds-layer:var(--cds-layer-03, #f4f4f4);
-  --cds-layer-active:var(--cds-layer-active-03, #c6c6c6);
-  --cds-layer-hover:var(--cds-layer-hover-03, #e8e8e8);
-  --cds-layer-selected:var(--cds-layer-selected-03, #e0e0e0);
-  --cds-layer-selected-hover:var(--cds-layer-selected-hover-03, #d1d1d1);
-  --cds-layer-accent:var(--cds-layer-accent-03, #e0e0e0);
-  --cds-layer-accent-hover:var(--cds-layer-accent-hover-03, #d1d1d1);
-  --cds-layer-accent-active:var(--cds-layer-accent-active-03, #a8a8a8);
-  --cds-field:var(--cds-field-03, #f4f4f4);
-  --cds-field-hover:var(--cds-field-hover-03, #e8e8e8);
-  --cds-border-subtle:var(--cds-border-subtle-02, #e0e0e0);
-  --cds-border-subtle-selected:var(--cds-border-subtle-selected-03, #c6c6c6);
-  --cds-border-strong:var(--cds-border-strong-03, #8d8d8d);
-  --cds-border-tile:var(--cds-border-tile-03, #c6c6c6);
+  --cds-layer: var(--cds-layer-03, #f4f4f4);
+  --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
+  --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
+  --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
+  --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
+  --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
+  --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
+  --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
+  --cds-field: var(--cds-field-03, #f4f4f4);
+  --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
+  --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
+  --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
+  --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
+  --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
 }
 
 .cds--side-nav {
@@ -15106,154 +15106,154 @@ a.cds--side-nav__link--current::before {
   }
 }
 .cds--layout--size-xs {
-  --cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);
-  --cds-layout-size-height:var(--cds-layout-size-height-context);
+  --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
 .cds--layout-constraint--size__default-xs {
-  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
 }
 
 .cds--layout-constraint--size__min-xs {
-  --cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem);
+  --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
 }
 
 .cds--layout-constraint--size__max-xs {
-  --cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem);
+  --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
 }
 
 .cds--layout--size-sm {
-  --cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);
-  --cds-layout-size-height:var(--cds-layout-size-height-context);
+  --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
 .cds--layout-constraint--size__default-sm {
-  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
 }
 
 .cds--layout-constraint--size__min-sm {
-  --cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem);
+  --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
 }
 
 .cds--layout-constraint--size__max-sm {
-  --cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem);
+  --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
 }
 
 .cds--layout--size-md {
-  --cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);
-  --cds-layout-size-height:var(--cds-layout-size-height-context);
+  --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
 .cds--layout-constraint--size__default-md {
-  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
 }
 
 .cds--layout-constraint--size__min-md {
-  --cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem);
+  --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
 }
 
 .cds--layout-constraint--size__max-md {
-  --cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem);
+  --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
 }
 
 .cds--layout--size-lg {
-  --cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);
-  --cds-layout-size-height:var(--cds-layout-size-height-context);
+  --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
 .cds--layout-constraint--size__default-lg {
-  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
 }
 
 .cds--layout-constraint--size__min-lg {
-  --cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem);
+  --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
 }
 
 .cds--layout-constraint--size__max-lg {
-  --cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem);
+  --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
 }
 
 .cds--layout--size-xl {
-  --cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);
-  --cds-layout-size-height:var(--cds-layout-size-height-context);
+  --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
 .cds--layout-constraint--size__default-xl {
-  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
 }
 
 .cds--layout-constraint--size__min-xl {
-  --cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem);
+  --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
 }
 
 .cds--layout-constraint--size__max-xl {
-  --cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem);
+  --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
 }
 
 .cds--layout--size-2xl {
-  --cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);
-  --cds-layout-size-height:var(--cds-layout-size-height-context);
+  --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
 .cds--layout-constraint--size__default-2xl {
-  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
+  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
 }
 
 .cds--layout-constraint--size__min-2xl {
-  --cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem);
+  --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
 }
 
 .cds--layout-constraint--size__max-2xl {
-  --cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem);
+  --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
 }
 
 .cds--layout--density-condensed {
-  --cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
-  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
+  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
 }
 
 .cds--layout-constraint--density__default-condensed {
-  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
 }
 
 .cds--layout-constraint--density__min-condensed {
-  --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
 }
 
 .cds--layout-constraint--density__max-condensed {
-  --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
+  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
 }
 
 .cds--layout--density-normal {
-  --cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);
-  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
+  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
 }
 
 .cds--layout-constraint--density__default-normal {
-  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
 }
 
 .cds--layout-constraint--density__min-normal {
-  --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem);
+  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
 }
 
 .cds--layout-constraint--density__max-normal {
-  --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem);
+  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
 }
 
 :root {
-  --cds-layout-size-height-xs:1.5rem;
-  --cds-layout-size-height-sm:2rem;
-  --cds-layout-size-height-md:2.5rem;
-  --cds-layout-size-height-lg:3rem;
-  --cds-layout-size-height-xl:4rem;
-  --cds-layout-size-height-2xl:5rem;
-  --cds-layout-size-height-min:0px;
-  --cds-layout-size-height-max:999999999px;
-  --cds-layout-density-padding-inline-condensed:0.5rem;
-  --cds-layout-density-padding-inline-normal:1rem;
-  --cds-layout-density-padding-inline-min:0px;
-  --cds-layout-density-padding-inline-max:999999999px;
+  --cds-layout-size-height-xs: 1.5rem;
+  --cds-layout-size-height-sm: 2rem;
+  --cds-layout-size-height-md: 2.5rem;
+  --cds-layout-size-height-lg: 3rem;
+  --cds-layout-size-height-xl: 4rem;
+  --cds-layout-size-height-2xl: 5rem;
+  --cds-layout-size-height-min: 0px;
+  --cds-layout-size-height-max: 999999999px;
+  --cds-layout-density-padding-inline-condensed: 0.5rem;
+  --cds-layout-density-padding-inline-normal: 1rem;
+  --cds-layout-density-padding-inline-min: 0px;
+  --cds-layout-density-padding-inline-max: 999999999px;
 }
 
 .c4p--action-set {