@carbon/web-components 2.0.0-beta.4 → 2.0.0-beta.5

package/scss/components/file-uploader/file-uploader.scss

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/file-uploader/file-uploader' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
@@ -22,11 +23,15 @@
 
 :host(#{$prefix}-file-drop-container) {
   @extend .#{$prefix}--file;
+
+  @include layer-tokens.emit-layer-tokens(1);
 }
 
 :host(#{$prefix}-file-uploader-item) {
   @extend .#{$prefix}--file__selected-file;
 
+  @include layer-tokens.emit-layer-tokens(1);
+
   .#{$prefix}--file-filename {
     margin-top: 0;
     margin-bottom: 0;
@@ -35,22 +40,22 @@
   .#{$prefix}--form-requirement[hidden] {
     display: none;
   }
+}
 
-  &[invalid] {
-    @extend .#{$prefix}--file__selected-file--invalid;
+:host(#{$prefix}-file-uploader-item[invalid]) {
+  @extend .#{$prefix}--file__selected-file--invalid;
 
-    .#{$prefix}--form-requirement__supplement {
-      margin: 0;
-    }
+  .#{$prefix}--form-requirement__supplement {
+    margin: 0;
   }
+}
 
-  &[size='md'] {
-    @extend .#{$prefix}--file__selected-file--md;
-  }
+:host(#{$prefix}-file-uploader-item[size='md']) {
+  @extend .#{$prefix}--file__selected-file--md;
+}
 
-  &[size='sm'] {
-    @extend .#{$prefix}--file__selected-file--sm;
-  }
+:host(#{$prefix}-file-uploader-item[size='sm']) {
+  @extend .#{$prefix}--file__selected-file--sm;
 }
 
 :host(#{$prefix}-file-uploader) {

package/scss/components/inline-loading/inline-loading.scss

@@ -7,6 +7,7 @@
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/components/loading';
 @use '@carbon/styles/scss/components/inline-loading/inline-loading' as *;
@@ -15,4 +16,6 @@
 
 :host(#{$prefix}-inline-loading) {
   @extend .#{$prefix}--inline-loading;
+
+  @include layer-tokens.emit-layer-tokens(1);
 }

package/scss/components/layer/layer.scss

@@ -10,14 +10,14 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/layer' as *;
 @use '@carbon/styles/scss/config' as *;
 
-:host(#{$prefix}-layer) {
-  &[level='0'] {
-    @extend .#{$prefix}--layer-one;
-  }
-  &[level='1'] {
-    @extend .#{$prefix}--layer-two;
-  }
-  &[level='2'] {
-    @extend .#{$prefix}--layer-three;
-  }
+:host(#{$prefix}-layer[level='0']) {
+  @extend .#{$prefix}--layer-one;
+}
+
+:host(#{$prefix}-layer[level='1']) {
+  @extend .#{$prefix}--layer-two;
+}
+
+:host(#{$prefix}-layer[level='2']) {
+  @extend .#{$prefix}--layer-three;
 }

package/scss/components/modal/modal.scss

@@ -11,23 +11,27 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/layer' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/modal' as *;
 @use '@carbon/styles/scss/components/button' as *;
 
+:host(#{$prefix}-modal[open]) {
+  @extend .#{$prefix}--modal;
+  @extend .is-visible;
+}
+
 :host(#{$prefix}-modal) {
   @extend .#{$prefix}--modal;
 
-  &[full-width] {
-    ::slotted(#{$prefix}-modal-body) {
-      margin: 0;
-      padding: 0;
-    }
-  }
+  @include layer-tokens.emit-layer-tokens(1);
+}
 
-  &[open] {
-    @extend .#{$prefix}--modal, .is-visible;
+:host(#{$prefix}-modal[full-width]) {
+  ::slotted(#{$prefix}-modal-body) {
+    margin: 0;
+    padding: 0;
   }
 }
 
@@ -74,37 +78,29 @@
 
   display: block;
   padding-right: calc(20% - #{$spacing-07});
+}
 
-  &[description] {
-    margin-bottom: $spacing-05;
-  }
+:host(#{$prefix}-modal-body-content[description]) {
+  margin-bottom: $spacing-05;
 }
 
 :host(#{$prefix}-modal-footer) {
   @extend .#{$prefix}--modal-footer;
+}
 
-  &[has-three-buttons] {
-    @extend .#{$prefix}--modal-footer--three-button;
+:host(#{$prefix}-modal-footer[has-three-buttons]) {
+  @extend .#{$prefix}--modal-footer--three-button;
 
-    ::slotted(#{$prefix}-modal-footer-button) {
-      flex: 0 1 25%;
-    }
+  ::slotted(#{$prefix}-modal-footer-button) {
+    flex: 0 1 25%;
   }
 }
 
-:host(#{$prefix}-modal-footer-button) {
-  &,
-  &:first-of-type {
-    .#{$prefix}--btn {
-      box-shadow: inherit;
-
-      &:focus {
-        box-shadow: inset 0 0 0 $button-outline-width $focus,
-          inset 0 0 0 $button-border-width $background;
-      }
-    }
-  }
+:host(#{$prefix}-modal-footer-button:first-of-type) .#{$prefix}--btn {
+  box-shadow: inherit;
+}
 
+:host(#{$prefix}-modal-footer-button) {
   .#{$prefix}--btn {
     width: 100%;
     max-width: none;
@@ -112,6 +108,11 @@
     padding-top: rem(16px);
     padding-bottom: rem(32px);
     box-shadow: rem(-1px) 0 0 0 $button-separator;
+
+    &:focus {
+      box-shadow: inset 0 0 0 $button-outline-width $focus,
+        inset 0 0 0 $button-border-width $background;
+    }
   }
 }
 

package/scss/components/multi-select/multi-select.scss

@@ -11,6 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/list-box/list-box';
 @use '@carbon/styles/scss/components/multiselect/index';
 @use '@carbon/styles/scss/components/form';
@@ -18,6 +19,8 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/tag';
 
 :host(#{$prefix}-multi-select) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   outline: none;
 
   .#{$prefix}--assistive-text {
@@ -44,52 +47,52 @@ $css--plex: true !default;
     }
   }
 
-  &[filterable] {
-    .#{$prefix}--list-box__field:focus-within {
-      outline: 2px solid $focus;
-      outline-offset: -2px;
-    }
+  .#{$prefix}--tag--disabled {
+    @extend .#{$prefix}--tag--disabled;
   }
 
-  &[direction='top'] {
-    @extend .#{$prefix}--list-box--up;
-
-    .#{$prefix}--list-box__menu {
-      top: auto;
-    }
+  .#{$prefix}--list-box__field:focus {
+    @extend .#{$prefix}--multi-select--filterable--input-focused;
   }
+}
 
-  &[invalid] {
-    .#{$prefix}--list-box__field {
-      outline: none;
-    }
-
-    .#{$prefix}--form__helper-text {
-      color: $text-error;
-    }
-  }
+:host(#{$prefix}-multi-select[filterable])
+  .#{$prefix}--list-box__field:focus-within {
+  outline: 2px solid $focus;
+  outline-offset: -2px;
+}
 
-  &[type='inline'] {
-    @extend .#{$prefix}--list-box__wrapper--inline;
+:host(#{$prefix}-multi-select[direction='top']) {
+  @extend .#{$prefix}--list-box--up;
 
-    .#{$prefix}--form__helper-text {
-      grid-column: 2;
-    }
+  .#{$prefix}--list-box__menu {
+    top: auto;
   }
+}
 
-  &[type='inline'][warn] .#{$prefix}--list-box__field {
-    padding-right: rem(56px);
+:host(#{$prefix}-multi-select[invalid]) {
+  .#{$prefix}--list-box__field {
+    outline: none;
   }
 
-  .#{$prefix}--tag--disabled {
-    @extend .#{$prefix}--tag--disabled;
+  .#{$prefix}--form__helper-text {
+    color: $text-error;
   }
+}
 
-  .#{$prefix}--list-box__field:focus {
-    @extend .#{$prefix}--multi-select--filterable--input-focused;
+:host(#{$prefix}-multi-select[type='inline']) {
+  @extend .#{$prefix}--list-box__wrapper--inline;
+
+  .#{$prefix}--form__helper-text {
+    grid-column: 2;
   }
 }
 
+:host(#{$prefix}-multi-select[type='inline'][warn])
+  .#{$prefix}--list-box__field {
+  padding-right: rem(56px);
+}
+
 :host(#{$prefix}-multi-select-item) {
   @extend .#{$prefix}--list-box__menu-item;
 
@@ -118,10 +121,14 @@ $css--plex: true !default;
       flex-direction: row;
     }
   }
+}
 
-  &[filtered] {
-    display: none;
-  }
+:host(#{$prefix}-multi-select-item:hover) {
+  background-color: $layer-hover;
+}
+
+:host(#{$prefix}-multi-select-item[filtered]) {
+  display: none;
 }
 
 :host(#{$prefix}-multi-select-item[size='sm']) {

package/scss/components/notification/actionable-notification.scss

@@ -25,9 +25,11 @@ $css--plex: true !default;
   outline: none;
 }
 
-:host(#{$prefix}-actionable-notification-button):not(
-    [low-contrast]
-  )[kind='tertiary']
+:host(
+    #{$prefix}-actionable-notification-button:not(
+        [low-contrast]
+      )[kind='tertiary']
+  )
   button {
   @include button-mixins.button-theme(
     transparent,
@@ -57,7 +59,7 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-actionable-notification-button)[low-contrast][kind='ghost']
+:host(#{$prefix}-actionable-notification-button[low-contrast][kind='ghost'])
   button {
   &:hover,
   &:active {
@@ -69,21 +71,21 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-actionable-notification-button):not(
-    [low-contrast]
-  )[kind='ghost']
+:host(
+    #{$prefix}-actionable-notification-button:not([low-contrast])[kind='ghost']
+  )
   button {
   color: $link-inverse;
 }
 
 :host(
-    #{$prefix}-actionable-notification-button
-  )[hide-close-button][kind='ghost']
+    #{$prefix}-actionable-notification-button[hide-close-button][kind='ghost']
+  )
   button {
   margin-right: $spacing-03;
 }
 
-:host(#{$prefix}-actionable-notification):not([inline]) {
+:host(#{$prefix}-actionable-notification:not([inline])) {
   @extend .#{$prefix}--actionable-notification--toast;
 }
 

package/scss/components/number-input/number-input.scss

@@ -11,10 +11,13 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities';
 @use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/number-input/index';
 
 :host(#{$prefix}-number-input),
 :host(#{$prefix}-number-input-skeleton) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   // the base text-input class has a 100% so we need to propagate it up to the host element
   width: 100%;
   outline: none;

package/scss/components/overflow-menu/overflow-menu.scss

@@ -11,6 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/overflow-menu/overflow-menu' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
@@ -18,16 +19,18 @@ $css--plex: true !default;
 
 :host(#{$prefix}-overflow-menu),
 :host(#{$prefix}-breadcrumb-overflow-menu) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   @extend .#{$prefix}--overflow-menu;
 }
 
-:host(#{$prefix}-overflow-menu)[size='sm'],
-:host(#{$prefix}-breadcrumb-overflow-menu)[size='sm'] {
+:host(#{$prefix}-overflow-menu[size='sm']),
+:host(#{$prefix}-breadcrumb-overflow-menu[size='sm']) {
   @extend .#{$prefix}--overflow-menu--sm;
 }
 
-:host(#{$prefix}-overflow-menu)[size='lg'],
-:host(#{$prefix}-breadcrumb-overflow-menu)[size='lg'] {
+:host(#{$prefix}-overflow-menu[size='lg']),
+:host(#{$prefix}-breadcrumb-overflow-menu[size='lg']) {
   @extend .#{$prefix}--overflow-menu--lg;
 }
 

package/scss/components/pagination/pagination.scss

@@ -12,10 +12,13 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/pagination' as *;
 @use '@carbon/styles/scss/utilities/visually-hidden' as *;
 
 :host(#{$prefix}-pagination) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   @extend .#{$prefix}--pagination;
 
   position: relative;

package/scss/components/popover/popover.scss

@@ -12,9 +12,14 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/utilities/custom-property';
 @use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/components/popover';
 
+:host(#{$prefix}-popover) {
+  @include layer-tokens.emit-layer-tokens(1);
+}
+
 :host(#{$prefix}-tooltip[highContrast]),
 :host(#{$prefix}-popover[highContrast]) {
   ::slotted(#{$prefix}-tooltip-content),
@@ -40,17 +45,20 @@ $css--plex: true !default;
   .#{$prefix}--popover-content {
     display: block;
   }
+}
 
-  &[tabTip] {
-    .#{$prefix}--popover-content {
-      border-radius: 0;
-      background: theme.$layer;
-    }
+:host(#{$prefix}-tooltip-content[open][tabTip]),
+:host(#{$prefix}-popover-content[open][tabTip]) {
+  .#{$prefix}--popover-content {
+    border-radius: 0;
+    background: theme.$layer;
   }
-  &[caret] {
-    .#{$prefix}--popover-caret {
-      display: block;
-    }
+}
+
+:host(#{$prefix}-tooltip-content[open][caret]),
+:host(#{$prefix}-popover-content[open][caret]) {
+  .#{$prefix}--popover-caret {
+    display: block;
   }
 }
 

package/scss/components/progress-bar/progress-bar.scss

@@ -7,4 +7,10 @@
 
 $css--plex: true !default;
 
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/progress-bar' as *;
+
+:host(#{$prefix}-progress-bar) {
+  @include layer-tokens.emit-layer-tokens(1);
+}

package/scss/components/progress-indicator/progress-indicator.scss

@@ -10,6 +10,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/utilities/skeleton' as *;
 @use '@carbon/styles/scss/components/progress-indicator/progress-indicator' as *;
 
@@ -18,6 +19,8 @@ $css--plex: true !default;
 
 :host(#{$prefix}-progress-indicator),
 :host(#{$prefix}-progress-indicator-skeleton) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   @extend .#{$prefix}--progress;
 }
 

package/scss/components/search/search.scss

@@ -11,6 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/search' as *;
 
@@ -18,48 +19,50 @@ $css--plex: true !default;
 @include search;
 
 :host(#{$prefix}-search) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   @extend .#{$prefix}--search;
 
   outline: none;
+}
 
-  &[expandable] {
-    @extend .#{$prefix}--search--expandable;
-
-    &[expanded] {
-      @extend .#{$prefix}--search--expanded;
-
-      &[size='sm'] {
-        .#{$prefix}--search-input {
-          padding: 0 $spacing-07;
-        }
-      }
-
-      &[size='md'] {
-        .#{$prefix}--search-input {
-          padding: 0 $spacing-08;
-        }
-      }
-
-      &[size='lg'] {
-        .#{$prefix}--search-input {
-          padding: 0 $spacing-09;
-        }
-      }
-    }
+:host(#{$prefix}-search[expandable]) {
+  @extend .#{$prefix}--search--expandable;
+}
+
+:host(#{$prefix}-search[expandable][expanded]) {
+  @extend .#{$prefix}--search--expanded;
+}
+
+:host(#{$prefix}-search[expandable][expanded][size='sm']) {
+  .#{$prefix}--search-input {
+    padding: 0 $spacing-07;
   }
+}
 
-  &[disabled] {
-    svg {
-      fill: $icon-on-color-disabled;
-    }
+:host(#{$prefix}-search[expandable][expanded][size='md']) {
+  .#{$prefix}--search-input {
+    padding: 0 $spacing-08;
+  }
+}
 
-    .#{$prefix}--search-close {
-      pointer-events: none;
-      outline: none;
+:host(#{$prefix}-search[expandable][expanded][size='lg']) {
+  .#{$prefix}--search-input {
+    padding: 0 $spacing-09;
+  }
+}
+
+:host(#{$prefix}-search[disabled]) {
+  svg {
+    fill: $icon-on-color-disabled;
+  }
+
+  .#{$prefix}--search-close {
+    pointer-events: none;
+    outline: none;
 
-      &::before {
-        background: none;
-      }
+    &::before {
+      background: none;
     }
   }
 }
@@ -78,17 +81,17 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-search),
-:host(#{$prefix}-search-skeleton) {
-  &[size='sm'] {
-    @extend .#{$prefix}--search--sm;
-  }
+:host(#{$prefix}-search[size='sm']),
+:host(#{$prefix}-search-skeleton[size='sm']) {
+  @extend .#{$prefix}--search--sm;
+}
 
-  &[size='md'] {
-    @extend .#{$prefix}--search--md;
-  }
+:host(#{$prefix}-search[size='md']),
+:host(#{$prefix}-search-skeleton[size='md']) {
+  @extend .#{$prefix}--search--md;
+}
 
-  &[size='lg'] {
-    @extend .#{$prefix}--search--lg;
-  }
+:host(#{$prefix}-search[size='lg']),
+:host(#{$prefix}-search-skeleton[size='lg']) {
+  @extend .#{$prefix}--search--lg;
 }