@carbon/ibm-products 2.2.0 → 2.3.0

package/scss/components/ButtonMenu/_button-menu.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,7 +7,10 @@
 
 // Standard imports.
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/type';
 
 // TODO: @use(s) of Carbon settings and component styles and other
 // related component styles used by ButtonMenu
@@ -17,9 +20,37 @@ $block-class: #{c4p-settings.$pkg-prefix}--button-menu;
 
 .#{$block-class} {
   min-width: 160px;
+  &.#{$block-class}__wrapper--primary,
+  &.#{$block-class}__wrapper--primary.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+    background-color: $button-primary;
+  }
+  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--primary:hover {
+    background-color: $button-primary-hover;
+  }
+
+  &.#{$block-class}__wrapper--tertiary,
+  &.#{$block-class}__wrapper--tertiary.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+    background-color: $button-tertiary;
+  }
+  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--tertiary:hover {
+    background-color: $button-tertiary-hover;
+  }
+
+  &.#{$block-class}__wrapper--ghost,
+  &.#{$block-class}__wrapper--ghost.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+    background-color: transparent;
+  }
+  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--ghost:hover {
+    background-color: $layer-hover;
+  }
 
   .#{$block-class}__trigger {
+    @include type.type-style('body-compact-01');
+
+    display: flex;
     width: 100%;
+    align-items: center;
+    justify-content: space-between;
     padding: 0 $spacing-05;
   }
 }

package/scss/components/Cascade/_storybook-styles.scss

@@ -8,8 +8,9 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 
-#root {
-  width: 100%;
+#storybook-docs .docs-story {
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  padding: 30px 0;
 }
 
 .box {

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -41,13 +41,13 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 }
 
 .#{$block-class} .#{$block-class}__step-subtitle {
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 
   margin-bottom: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__step-description {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 
   margin-bottom: $spacing-06;
 }
@@ -139,7 +139,7 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 }
 
 .#{$block-class} .#{$block-class}__step-title {
-  @include type.type-style('productive-heading-04');
+  @include type.type-style('heading-04');
 
   margin-bottom: $spacing-05;
 }

package/scss/components/CreateModal/_create-modal.scss

@@ -46,20 +46,20 @@
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__title {
-  @include type.type-style('productive-heading-03');
+  @include type.type-style('heading-03');
 
   margin-bottom: $spacing-02;
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__subtitle {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 
   margin-bottom: $spacing-03;
   color: $text-secondary;
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__description {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 
   padding-right: calc(20% - #{$spacing-05});
   margin: $spacing-03 0 $spacing-05 0;

package/scss/components/CreateSidePanel/_create-side-panel.scss

@@ -56,13 +56,13 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 }
 
 .#{$create-side-panel-block-class}__form-title-text {
-  @include type.type-style('productive-heading-02');
+  @include type.type-style('heading-compact-02');
 
   padding-bottom: $spacing-03;
 }
 
 .#{$create-side-panel-block-class}__form-description-text {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 }
 
 .#{$create-side-panel-block-class}.#{$side-panel-block-class}
@@ -71,13 +71,13 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 }
 
 .#{$create-side-panel-block-class}__title {
-  @include type.type-style('productive-heading-03');
+  @include type.type-style('heading-03');
 
   margin-bottom: $spacing-02;
 }
 
 .#{$create-side-panel-block-class}__subtitle {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 
   margin-bottom: $spacing-03;
   color: $text-secondary;

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -133,7 +133,7 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
   .#{$create-tearsheet-block-class}__section--subtitle,
 .#{$create-tearsheet-block-class}
   .#{$create-tearsheet-block-class}__step--subtitle {
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 
   margin-bottom: $spacing-03;
 }
@@ -142,7 +142,7 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
   .#{$create-tearsheet-block-class}__section--description,
 .#{$create-tearsheet-block-class}
   .#{$create-tearsheet-block-class}__step--description {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 
   margin-bottom: $spacing-06;
 }

package/scss/components/CreateTearsheet/_storybook-styles.scss

@@ -13,7 +13,7 @@
 $preview-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step;
 
 .#{$preview-block-class}__description {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 
   padding-bottom: $spacing-04;
 }

package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss

@@ -51,11 +51,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow;
 }
 
 .#{$block-class} .#{$block-class}__form-title-text {
-  @include type.type-style('productive-heading-02');
+  @include type.type-style('heading-compact-02');
 
   padding-bottom: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__form-description-text {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 }

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -56,7 +56,7 @@ $header-cell-background: $layer-accent-01;
 
   .#{$block-class}__th,
   .#{$block-class}__td {
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     width: 100%;
     height: 100%;
@@ -117,13 +117,13 @@ $header-cell-background: $layer-accent-01;
     text-align: left;
   }
   .#{$block-class}__th {
-    @include type.type-style('productive-heading-01');
+    @include type.type-style('heading-compact-01');
 
     color: $text-primary;
     text-align: left;
   }
   .#{$block-class}__cell-editor {
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
     @include utilities.focus-outline('reset');
 
     position: absolute;
@@ -151,7 +151,7 @@ $header-cell-background: $layer-accent-01;
     }
   }
   .#{$block-class}__cell-editor-ruler {
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     position: absolute;
     overflow: hidden;
@@ -167,7 +167,7 @@ $header-cell-background: $layer-accent-01;
     }
   }
   .#{$block-class}__active-cell--highlight {
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
     @include set-body-borders();
 
     position: absolute;

package/scss/components/DataSpreadsheet/_storybook-styles.scss

@@ -4,3 +4,9 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
+$story-anchor: 'data-spreadsheet';
+div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+  overflow: auto;
+  width: 100%;
+}

package/scss/components/Datagrid/_datagrid.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 2022, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -22,6 +22,7 @@
 
 // Datagrid uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by Datagrid
+@use '../ButtonMenu';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
@@ -33,7 +34,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
     display: none;
   }
 
-  .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
+  .#{c4p-settings.$carbon-prefix}--overflow-menu-options
+    > .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
     left: $spacing-01;
     width: 112px;
   }

package/scss/components/Datagrid/_storybook-styles.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 2022, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -20,7 +20,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   height: 100vh;
 }
 
-.sb-show-main.sb-main-centered #root {
+.sb-show-main.sb-main-centered #storybook-root {
   width: 100%;
   height: 100vh;
   padding: $spacing-07;
@@ -66,13 +66,13 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 }
 
 .#{$block-class}__side-panel-value {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 
   padding-left: $spacing-03;
 }
 
 .#{$block-class}__side-panel-section-header {
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 
   padding-bottom: $spacing-02;
 }
@@ -114,3 +114,17 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   margin-right: $spacing-03;
   background-color: $field-01;
 }
+
+.#{c4p-settings.$carbon-prefix}--body--with-modal-open {
+  .#{$block-class}__mobile-toolbar-modal.#{c4p-settings.$carbon-prefix}--modal {
+    top: -$spacing-07;
+    left: -$spacing-07;
+    width: 100vw;
+  }
+}
+
+$story-anchor: 'datagrid';
+div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+  overflow: auto;
+  width: 100%;
+}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -1,10 +1,9 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020 - 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// Copyright IBM Corp. 2020, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
@@ -582,12 +581,6 @@
   width: 100%;
 }
 
-.#{c4p-settings.$carbon-prefix}--body--with-modal-open
-  .#{$block-class}__grid-container {
-  overflow: hidden;
-  height: 100vh;
-}
-
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal {
   width: 100%;
 }
@@ -632,3 +625,23 @@
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap {
   background-color: $layer-accent;
 }
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--action-list
+  .#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$pkg-prefix}--button-menu {
+  padding: 0;
+}
+
+// TODO: Revisit batch action list button and button icon alignment after
+// https: //github.com/carbon-design-system/carbon/issues/14021 is fixed
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--action-list
+  .#{c4p-settings.$carbon-prefix}--btn {
+  align-items: center;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--action-list
+  .#{c4p-settings.$carbon-prefix}--btn__icon {
+  margin-top: 0;
+}

package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss

@@ -75,6 +75,13 @@ $action-set-height: rem(64px);
 }
 
 // Carbon overrides
+.#{variables.$block-class}-filter-flyout__trigger.#{c4p-settings.$carbon-prefix}--btn {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+}
+
 .#{variables.$block-class}-filter-flyout__trigger--open.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--icon-only {
   position: relative;
   background-color: $layer-02;

package/scss/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -124,6 +124,10 @@
 }
 
 .#{c4p-settings.$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
   border-right: 1px solid $layer-accent-01;
   border-bottom: none;
 }

package/scss/components/EditSidePanel/_edit-side-panel.scss

@@ -32,13 +32,13 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
   }
 
   .#{$block-class}__form-title-text {
-    @include type.type-style('productive-heading-02');
+    @include type.type-style('heading-compact-02');
 
     padding-bottom: $spacing-03;
   }
 
   .#{$block-class}__form-description-text {
-    @include type.type-style('body-long-01');
+    @include type.type-style('body-01');
   }
 
   &.#{$side-panel-block-class}

package/scss/components/EditTearsheet/_edit-tearsheet.scss

@@ -115,14 +115,14 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fi
 
 .#{$block-class} .#{$block-class}__section--subtitle,
 .#{$block-class} .#{$block-class}__form--subtitle {
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 
   margin-bottom: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__section--description,
 .#{$block-class} .#{$block-class}__form--description {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 
   margin-bottom: $spacing-06;
 }

package/scss/components/EditTearsheet/_storybook-styles.scss

@@ -16,7 +16,7 @@
 $preview-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit-multi-form;
 
 .#{$preview-block-class}__description {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 
   padding-bottom: $spacing-04;
 }

package/scss/components/ImportModal/_import-modal.scss

@@ -55,7 +55,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--import-modal;
 .#{$block-class} .#{$block-class}__file-drop-header,
 .#{$block-class} .#{$block-class}__label {
   margin-bottom: $spacing-03;
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 }
 
 .#{$block-class}__helper-text {

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -54,7 +54,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   top: $spacing-09;
   right: 0;
   overflow: auto;
-  min-width: 22.75rem;
+  min-width: 20rem;
   max-width: 22.75rem;
   min-height: 38.5rem;
   max-height: 38.5rem;
@@ -82,7 +82,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
       color: $text-primary;
     }
     .#{$block-class}__header {
-      @include type.type-style('productive-heading-01');
+      @include type.type-style('heading-compact-01');
 
       margin: 0;
     }
@@ -252,7 +252,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
     justify-content: center;
     margin-top: $spacing-13;
     .#{c4p-settings.$pkg-prefix}-subtext {
-      @include type.type-style('body-short-01');
+      @include type.type-style('body-compact-01');
     }
   }
   .#{$block-class}__main-section {

package/scss/components/NotificationsPanel/_storybook-styles.scss

@@ -10,6 +10,14 @@
 
 $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
 
-.#{$storybook-block-class}--header {
-  @include theme(themes.$g100);
+.#{$storybook-block-class}--full-height {
+  height: 100vh;
+  max-height: var(--doc-story-height); // set in core if needed;
+}
+
+.#{$storybook-block-class}__add {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
 }

package/scss/components/OptionsTile/_storybook-styles.scss

@@ -18,7 +18,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 }
 
 .#{$block-class}__content p {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 
   margin-bottom: $spacing-06;
 }

package/scss/components/PageHeader/_page-header.scss

@@ -29,7 +29,6 @@ $block-class: #{$pkg-prefix}--page-header;
 $breadcrumb-block-class: #{$pkg-prefix}--breadcrumb-with-overflow;
 
 $raised-z-index: 99;
-/* stylelint-disable-next-line function-no-unknown */
 $z-index-header-minus: utilities.z('header') - 1;
 
 $left-section-std-width: 60%;
@@ -432,7 +431,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__title {
-    @include type.type-style('productive-heading-04');
+    @include type.type-style('heading-04');
 
     min-height: $spacing-08;
     overflow-x: hidden;
@@ -539,11 +538,11 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__subtitle {
-    @include type.type-style('body-long-01');
+    @include type.type-style('body-01');
   }
 
   .#{$block-class}__available-row {
-    @include type.type-style('body-long-01');
+    @include type.type-style('body-01');
 
     margin-top: $spacing-03;
 
@@ -558,7 +557,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   .#{$block-class}__available-row * {
     // default content of available row to body-long-01
-    @include type.type-style('body-long-01');
+    @include type.type-style('body-01');
   }
 
   .#{$block-class}__navigation-row {

package/scss/components/PageHeader/_storybook-styles.scss

@@ -15,15 +15,6 @@
 
 $story-class: 'page-header-stories';
 
-// cspell:disable-next-line
-.sbdocs .#{$story-class}__viewport {
-  max-height: 500px;
-  background-color: $background;
-  box-shadow: 0 0 4px 1px $layer-accent-01;
-  color: $text-primary;
-  overflow-y: auto;
-}
-
 .#{$story-class}__content-switcher {
   justify-content: flex-start;
 }
@@ -66,15 +57,34 @@ $story-class: 'page-header-stories';
   flex-direction: column;
 }
 
-.#{$story-class}__app--whole-page-scroll {
+.#{$story-class}__viewport {
   overflow: hidden;
+  height: 100vh;
 }
 
-.#{$story-class}__content-container {
-  height: 100%;
-  padding: 0;
+.#{$story-class}__viewport--scroll {
+  overflow-y: auto;
 }
 
-.#{$story-class}__app--whole-page-scroll .#{$story-class}__content-container {
+.#{$story-class}__viewport .#{$story-class}__content-container {
+  height: 100%;
   overflow-y: auto;
 }
+
+.#{$story-class}__viewport
+  .#{$story-class}__content-container--with-global-header {
+  height: calc(100% - #{$spacing-09});
+  margin-top: $spacing-09;
+}
+
+.#{$story-class}__viewport--scroll .#{$story-class}__content-container {
+  overflow-y: initial;
+}
+
+// cspell:disable-next-line
+.sbdocs .#{$story-class}__viewport {
+  max-height: 50vh;
+  background-color: $background;
+  box-shadow: 0 0 4px 1px $layer-accent-01;
+  color: $text-primary;
+}

package/scss/components/Saving/_saving.scss

@@ -26,7 +26,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--saving;
 }
 
 .#{$block-class}__text {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 }
 
 .#{$block-class}__buttons {

package/scss/components/SidePanel/_side-panel.scss

@@ -64,7 +64,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   position: fixed;
   // Need to disable stylelint until dart sass namespace support is added
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: utilities.z('modal');
   top: $spacing-09;
   height: calc(100% - 3rem);
@@ -165,7 +164,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     );
   }
   .#{$block-class}__title-text {
-    @include type.type-style('productive-heading-03');
+    @include type.type-style('heading-03');
     @include setCommonTitleStyles();
 
     position: inherit;
@@ -185,7 +184,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     white-space: nowrap;
   }
   .#{$block-class}__collapsed-title-text {
-    @include type.type-style('productive-heading-02');
+    @include type.type-style('heading-compact-02');
     @include setCommonTitleStyles();
 
     position: absolute;
@@ -195,7 +194,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     transform: translateY(var(--#{$block-class}--collapsed-title-y-position));
   }
   .#{$block-class}__subtitle-text {
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     overflow: hidden;
     padding: 0 $spacing-09 $spacing-05 $spacing-05;
@@ -441,7 +440,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 .#{$block-class}__overlay {
   position: fixed;
   // Need to disable stylelint until dart sass namespace support is added
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: utilities.z('overlay');
   width: 100%;
   height: 100%;