@carbon/web-components 2.0.0-rc.2 → 2.0.0-rc.4

package/scss/components/breadcrumb/breadcrumb.scss

@@ -8,6 +8,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/motion' as *;
 @use '@carbon/styles/scss/utilities' as *;
@@ -27,6 +28,12 @@ $css--plex: true !default;
 :host(#{$prefix}-breadcrumb-item),
 :host(#{$prefix}-breadcrumb-item-skeleton) {
   @extend .#{$prefix}--breadcrumb-item;
+
+  &::after {
+    margin-left: $spacing-03;
+    color: $text-primary;
+    content: '/';
+  }
 }
 
 :host(#{$prefix}-breadcrumb-overflow-menu) {

package/scss/components/button/button.scss

@@ -11,17 +11,18 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/button' as *;
 @use '@carbon/styles/scss/components/popover/index';
 @use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
 @use '@carbon/styles/scss/components/tooltip';
+@use '../../globals/mixins/temp-layout' as *;
 
 @include code-snippet;
 
 :host(#{$prefix}-button),
 :host(#{$prefix}-modal-footer-button) {
-  @include layer-tokens.emit-layer-tokens(1);
+  @include emit-layout-tokens();
+
   display: inline-flex;
 
   ::slotted([slot='icon']) {
@@ -34,6 +35,10 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-button-skeleton) {
+  @include emit-layout-tokens();
+}
+
 :host(#{$prefix}-button[isExpressive]) ::slotted([slot='icon']),
 :host(#{$prefix}-modal-footer-button[isExpressive]) ::slotted([slot='icon']) {
   width: rem(20px);

package/scss/components/code-snippet/code-snippet.scss

@@ -13,19 +13,13 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
-@use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
+@use '@carbon/styles/scss/components/code-snippet/index';
 @use '@carbon/styles/scss/components/copy-button/copy-button';
 
-// https://github.com/carbon-design-system/carbon/issues/11408
-@include code-snippet;
-
 :host(#{$prefix}-code-snippet),
 :host(#{$prefix}-code-snippet-skeleton) {
   @extend .#{$prefix}--snippet;
 
-  @include layer-tokens.emit-layer-tokens(1);
-
   .#{$prefix}--snippet-container {
     @extend .#{$prefix}--snippet-container;
   }
@@ -57,7 +51,11 @@ $css--plex: true !default;
   }
 
   #{$prefix}-copy-button {
-    @extend .#{$prefix}--snippet, .#{$prefix}--popover-container;
+    @include font-family('sans');
+
+    position: absolute;
+    top: 0;
+    right: 0;
 
     code: {
       overflow: hidden;

package/scss/components/combo-box/combo-box.scss

@@ -11,7 +11,6 @@ $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/combo-box/combo-box';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/text-input/text-input';
@@ -20,8 +19,6 @@ $css--plex: true !default;
 :host(#{$prefix}-combo-box) {
   @extend :host(#{$prefix}-dropdown);
 
-  @include layer-tokens.emit-layer-tokens(1);
-
   outline: none;
 
   .#{$prefix}--assistive-text {
@@ -30,13 +27,6 @@ $css--plex: true !default;
     top: -100%;
   }
 
-  .#{$prefix}--list-box__field,
-  // To get more specifity than:
-  // https://github.com/carbon-design-system/carbon/blob/v10.16.0/packages/components/src/components/list-box/_list-box.scss#L126
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
-    padding: 0;
-  }
-
   .#{$prefix}--list-box__menu {
     outline: none;
     top: 100%;

package/scss/components/content-switcher/content-switcher.scss

@@ -10,16 +10,15 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/content-switcher/content-switcher' as *;
+@use '../../globals/mixins/temp-layout' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include content-switcher;
 
 :host(#{$prefix}-content-switcher) {
   @extend .#{$prefix}--content-switcher;
-
-  @include layer-tokens.emit-layer-tokens(1);
+  @include emit-layout-tokens();
 }
 
 :host(#{$prefix}-content-switcher[icon]) {
@@ -27,19 +26,22 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-content-switcher[size='sm']) {
-  @extend .#{$prefix}--content-switcher--sm;
+  @extend .#{$prefix}--layout--size-sm;
 }
 
 :host(#{$prefix}-content-switcher[size='lg']) {
-  @extend .#{$prefix}--content-switcher--lg;
+  @extend .#{$prefix}--layout--size-lg;
 }
 
 :host(#{$prefix}-content-switcher-item) {
-  width: 100%;
   outline: none;
+  width: 100%;
 
   .#{$prefix}--content-switcher-btn {
     height: 100%;
+    width: 100%;
+    align-items: center;
+    padding: 0.5rem var(--cds-layout-density-padding-inline-local);
 
     &:first-child,
     &:last-child {
@@ -72,21 +74,6 @@ $css--plex: true !default;
       border-bottom-color: $border-inverse;
     }
   }
-
-  &[icon] {
-    width: initial;
-
-    .#{$prefix}--content-switcher-btn {
-      padding-left: rem(11px);
-      padding-right: rem(11px);
-      height: rem(40px);
-    }
-
-    .#{$prefix}--content-switcher__label {
-      display: flex;
-      align-items: center;
-    }
-  }
 }
 
 :host(#{$prefix}-content-switcher-item)[icon] {

package/scss/components/copy-button/copy-button.scss

@@ -12,19 +12,19 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/utilities/keyframes' as *;
 @use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/button';
 @use '@carbon/styles/scss/components/tooltip';
 @use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
 @use '@carbon/styles/scss/components/copy-button/index';
+@use '../../globals/mixins/temp-layout' as *;
 
 @include code-snippet;
 
 :host(#{$prefix}-copy-button) {
+  @include emit-layout-tokens();
+
   display: inline-flex;
   outline: none;
-
-  @include layer-tokens.emit-layer-tokens(1);
 }
 
 .#{$prefix}--snippet__icon {

package/scss/components/data-table/_table-action.scss

@@ -50,6 +50,10 @@
   @extend .#{$prefix}--toolbar-action;
   @extend .#{$prefix}--toolbar-search-container-expandable;
 
+  &:hover {
+    background-color: $field-hover;
+  }
+
   flex: none;
   transition: flex 175ms $standard-easing;
 

package/scss/components/data-table/_table-core.scss

@@ -10,8 +10,6 @@
 //
 
 :host(#{$prefix}-table) {
-  @include layer-tokens.emit-layer-tokens(1);
-
   @extend .#{$prefix}--data-table;
 
   display: table;

package/scss/components/data-table/data-table.scss

@@ -12,7 +12,6 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/checkbox';

package/scss/components/date-picker/date-picker.scss

@@ -11,7 +11,6 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/date-picker/date-picker' as *;
 
@@ -21,8 +20,6 @@ $css--plex: true !default;
 :host(#{$prefix}-date-picker) {
   @extend .#{$prefix}--date-picker;
 
-  @include layer-tokens.emit-layer-tokens(1);
-
   #floating-menu-container {
     position: absolute;
     width: 100%;

package/scss/components/dropdown/dropdown.scss

@@ -11,7 +11,6 @@ $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/list-box/list-box' as *;
 @use '@carbon/styles/scss/components/dropdown' as *;
 @use '@carbon/styles/scss/components/form';
@@ -22,7 +21,6 @@ $css--plex: true !default;
 @include list-box;
 
 :host(#{$prefix}-dropdown) {
-  @include layer-tokens.emit-layer-tokens(1);
   outline: none;
 
   .#{$prefix}--assistive-text {
@@ -67,6 +65,7 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-combo-box[direction='top']),
 :host(#{$prefix}-dropdown[direction='top']) {
   @extend .#{$prefix}--list-box--up;
 

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

@@ -9,8 +9,8 @@
 @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 *;
+@use '../../globals/mixins/temp-layout' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include file-uploader;
@@ -23,15 +23,11 @@
 
 :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;
@@ -59,6 +55,8 @@
 }
 
 :host(#{$prefix}-file-uploader) {
+  @include emit-layout-tokens();
+
   .#{$prefix}--label-description,
   .#{$prefix}--file--label {
     margin-top: 0;

package/scss/components/icon-button/icon-button.scss

@@ -10,5 +10,10 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
+@use '../../globals/mixins/temp-layout' as *;
 @use '../tooltip/tooltip';
 @use '../button/button';
+
+:host(#{$prefix}-icon-button) {
+  @include emit-layout-tokens();
+}

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

@@ -7,7 +7,6 @@
 
 @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 *;
@@ -16,6 +15,4 @@
 
 :host(#{$prefix}-inline-loading) {
   @extend .#{$prefix}--inline-loading;
-
-  @include layer-tokens.emit-layer-tokens(1);
 }

package/scss/components/modal/modal.scss

@@ -11,7 +11,6 @@
 @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 *;
@@ -24,8 +23,6 @@
 
 :host(#{$prefix}-modal) {
   @extend .#{$prefix}--modal;
-
-  @include layer-tokens.emit-layer-tokens(1);
 }
 
 :host(#{$prefix}-modal[full-width]) {
@@ -102,6 +99,7 @@
 
 :host(#{$prefix}-modal-footer-button) {
   .#{$prefix}--btn {
+    height: 100%;
     width: 100%;
     max-width: none;
 
@@ -123,5 +121,4 @@
   width: 50%;
   height: rem(64px);
   margin: 0;
-  padding-bottom: $spacing-07;
 }

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

@@ -11,7 +11,6 @@ $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';
@@ -19,8 +18,6 @@ $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 {

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

@@ -12,14 +12,17 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/notification/index' as *;
+@use '@carbon/styles/scss/components/notification/mixins' as *;
 @use '@carbon/styles/scss/components/button';
 @use '@carbon/styles/scss/components/button/mixins' as button-mixins;
 @use '@carbon/styles/scss/components/button/vars' as button-vars;
+@use '../../globals/mixins/temp-layout' as *;
 
 @include actionable-notification;
 
 :host(#{$prefix}-actionable-notification) {
   @extend .#{$prefix}--actionable-notification;
+  @include emit-layout-tokens();
 
   display: none;
   outline: none;
@@ -89,6 +92,20 @@ $css--plex: true !default;
   @extend .#{$prefix}--actionable-notification--toast;
 }
 
+:host(#{$prefix}-actionable-notification[inline][low-contrast])::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-width: 1px 1px 1px 0;
+  border-style: solid;
+  content: '';
+  filter: opacity(0.4);
+  pointer-events: none;
+}
+
 :host(#{$prefix}-actionable-notification[open]) {
   display: flex;
 }
@@ -100,39 +117,48 @@ $css--plex: true !default;
 
 :host(#{$prefix}-actionable-notification[kind='success']) {
   @extend .#{$prefix}--actionable-notification--success;
+}
+
+:host(#{$prefix}-actionable-notification[kind='success'][low-contrast]) {
+  @extend .#{$prefix}--actionable-notification--low-contrast,
+    .#{$prefix}--actionable-notification--success;
 
-  &[low-contrast] {
-    @extend .#{$prefix}--actionable-notification--low-contrast,
-      .#{$prefix}--actionable-notification--success;
+  @include notification--experimental(
+    $support-success,
+    $notification-background-success
+  );
+
+  &::before {
+    border-color: $support-success;
   }
 }
 
 :host(#{$prefix}-actionable-notification[kind='info']) {
   @extend .#{$prefix}--actionable-notification--info;
-
-  &[low-contrast] {
-    @extend .#{$prefix}--actionable-notification--low-contrast,
-      .#{$prefix}--actionable-notification--info;
-  }
 }
 
 :host(#{$prefix}-actionable-notification[kind='info-square']) {
   @extend .#{$prefix}--actionable-notification--info-square;
+}
+
+:host(#{$prefix}-actionable-notification[kind='info'][low-contrast]),
+:host(#{$prefix}-actionable-notification[kind='info-square'][low-contrast]) {
+  @extend .#{$prefix}--actionable-notification--low-contrast,
+    .#{$prefix}--actionable-notification--info;
 
-  &[low-contrast] {
-    @extend .#{$prefix}--actionable-notification--low-contrast,
-      .#{$prefix}--actionable-notification--info;
+  @include notification--experimental(
+    $support-info,
+    $notification-background-info
+  );
+
+  &::before {
+    border-color: $support-info;
   }
 }
 
 :host(#{$prefix}-actionable-notification[kind='warning']) {
   @extend .#{$prefix}--actionable-notification--warning;
 
-  &[low-contrast] {
-    @extend .#{$prefix}--actionable-notification--low-contrast,
-      .#{$prefix}--actionable-notification--warning;
-  }
-
   /* TODO: Remove this once the following issue with icon fill is resolved:
   ** https://github.com/carbon-design-system/carbon/issues/13616
   */
@@ -145,11 +171,6 @@ $css--plex: true !default;
 :host(#{$prefix}-actionable-notification[kind='warning-alt']) {
   @extend .#{$prefix}--actionable-notification--warning-alt;
 
-  &[low-contrast] {
-    @extend .#{$prefix}--actionable-notification--low-contrast,
-      .#{$prefix}--actionable-notification--warning;
-  }
-
   /* TODO: Remove this once the following issue with icon fill is resolved:
   ** https://github.com/carbon-design-system/carbon/issues/13616
   */
@@ -162,11 +183,35 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-actionable-notification[kind='warning'][low-contrast]),
+:host(#{$prefix}-actionable-notification[kind='warning-alt'][low-contrast]) {
+  @extend .#{$prefix}--actionable-notification--low-contrast,
+    .#{$prefix}--actionable-notification--warning;
+
+  @include notification--experimental(
+    $support-warning,
+    $notification-background-warning
+  );
+
+  &::before {
+    border-color: $support-warning;
+  }
+}
+
 :host(#{$prefix}-actionable-notification[kind='error']) {
   @extend .#{$prefix}--actionable-notification--error;
+}
+
+:host(#{$prefix}-actionable-notification[kind='error'][low-contrast]) {
+  @extend .#{$prefix}--actionable-notification--low-contrast,
+    .#{$prefix}--actionable-notification--error;
+
+  @include notification--experimental(
+    $support-error,
+    $notification-background-error
+  );
 
-  &[low-contrast] {
-    @extend .#{$prefix}--actionable-notification--low-contrast,
-      .#{$prefix}--actionable-notification--error;
+  &::before {
+    border-color: $support-error;
   }
 }