@carbon/web-components 2.0.0-rc.1 → 2.0.0-rc.3

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;
   }
 }

package/scss/components/notification/inline-notification.scss

@@ -9,15 +9,19 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/components/notification/index' as *;
+@use '@carbon/styles/scss/components/notification/mixins' as *;
 @use '@carbon/styles/scss/components/button';
+@use '../../globals/mixins/temp-layout' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include inline-notification;
 
 :host(#{$prefix}-inline-notification) {
   @extend .#{$prefix}--inline-notification;
+  @include emit-layout-tokens();
 
   display: none;
   outline: none;
@@ -27,6 +31,20 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-inline-notification[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}-inline-notification[open]) {
   display: flex;
 }
@@ -38,47 +56,47 @@ $css--plex: true !default;
 
 :host(#{$prefix}-inline-notification[kind='success']) {
   @extend .#{$prefix}--inline-notification--success;
+}
 
-  &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast,
-      .#{$prefix}--inline-notification--success;
+:host(#{$prefix}-inline-notification[kind='success'][low-contrast]) {
+  @extend .#{$prefix}--inline-notification--low-contrast,
+    .#{$prefix}--inline-notification--success;
+
+  @include notification--experimental(
+    $support-success,
+    $notification-background-success
+  );
+
+  &::before {
+    border-color: $support-success;
   }
 }
 
 :host(#{$prefix}-inline-notification[kind='info']) {
   @extend .#{$prefix}--inline-notification--info;
-
-  &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast,
-      .#{$prefix}--inline-notification--info;
-  }
 }
 
 :host(#{$prefix}-inline-notification[kind='info-square']) {
   @extend .#{$prefix}--inline-notification--info-square;
-
-  &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast,
-      .#{$prefix}--inline-notification--info-square;
-  }
 }
 
-:host(#{$prefix}-inline-notification[kind='warning']) {
-  @extend .#{$prefix}--inline-notification--warning;
+:host(#{$prefix}-inline-notification[kind='info'][low-contrast]),
+:host(#{$prefix}-inline-notification[kind='info-square'][low-contrast]) {
+  @extend .#{$prefix}--inline-notification--low-contrast,
+    .#{$prefix}--inline-notification--info;
 
-  &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast,
-      .#{$prefix}--inline-notification--warning;
+  @include notification--experimental(
+    $support-info,
+    $notification-background-info
+  );
+
+  &::before {
+    border-color: $support-info;
   }
 }
 
-:host(#{$prefix}-inline-notification[kind='error']) {
-  @extend .#{$prefix}--inline-notification--error;
-
-  &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast,
-      .#{$prefix}--inline-notification--error;
-  }
+:host(#{$prefix}-inline-notification[kind='warning']) {
+  @extend .#{$prefix}--inline-notification--warning;
 }
 
 :host(#{$prefix}-inline-notification[kind='warning-alt']) {
@@ -96,3 +114,36 @@ $css--plex: true !default;
     fill: $black-100;
   }
 }
+
+:host(#{$prefix}-inline-notification[kind='warning'][low-contrast]),
+:host(#{$prefix}-inline-notification[kind='warning-alt'][low-contrast]) {
+  @extend .#{$prefix}--inline-notification--low-contrast,
+    .#{$prefix}--inline-notification--warning;
+
+  @include notification--experimental(
+    $support-warning,
+    $notification-background-warning
+  );
+
+  &::before {
+    border-color: $support-warning;
+  }
+}
+
+:host(#{$prefix}-inline-notification[kind='error']) {
+  @extend .#{$prefix}--inline-notification--error;
+}
+
+:host(#{$prefix}-inline-notification[kind='error'][low-contrast]) {
+  @extend .#{$prefix}--inline-notification--low-contrast,
+    .#{$prefix}--inline-notification--error;
+
+  @include notification--experimental(
+    $support-error,
+    $notification-background-error
+  );
+
+  &::before {
+    border-color: $support-error;
+  }
+}

package/scss/components/notification/toast-notification.scss

@@ -9,14 +9,18 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/notification/mixins' as *;
 @use '@carbon/styles/scss/components/notification/index' as *;
 @use '@carbon/styles/scss/components/button';
+@use '../../globals/mixins/temp-layout' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include toast-notification;
 
 :host(#{$prefix}-toast-notification) {
   @extend .#{$prefix}--toast-notification;
+  @include emit-layout-tokens();
 
   display: none;
   outline: none;
@@ -33,48 +37,44 @@ $css--plex: true !default;
 
 :host(#{$prefix}-toast-notification[kind='success']) {
   @extend .#{$prefix}--toast-notification--success;
+}
 
-  &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast,
-      .#{$prefix}--toast-notification--success;
-  }
+:host(#{$prefix}-toast-notification[kind='success'][low-contrast]) {
+  @extend .#{$prefix}--toast-notification--low-contrast,
+    .#{$prefix}--toast-notification--success;
+
+  @include notification--experimental(
+    $support-success,
+    $notification-background-success
+  );
 }
 
 :host(#{$prefix}-toast-notification[kind='info']) {
   @extend .#{$prefix}--toast-notification--info;
-
-  &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast,
-      .#{$prefix}--toast-notification--info;
-  }
 }
 
 :host(#{$prefix}-toast-notification[kind='info-square']) {
   @extend .#{$prefix}--toast-notification--info-square;
+}
 
-  &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast,
-      .#{$prefix}--toast-notification--info;
-  }
+:host(#{$prefix}-toast-notification[kind='info'][low-contrast]),
+:host(#{$prefix}-toast-notification[kind='info-square'][low-contrast]) {
+  @extend .#{$prefix}--toast-notification--low-contrast,
+    .#{$prefix}--toast-notification--info;
+
+  @include notification--experimental(
+    $support-info,
+    $notification-background-info
+  );
 }
 
 :host(#{$prefix}-toast-notification[kind='warning']) {
   @extend .#{$prefix}--toast-notification--warning;
-
-  &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast,
-      .#{$prefix}--toast-notification--warning;
-  }
 }
 
 :host(#{$prefix}-toast-notification[kind='warning-alt']) {
   @extend .#{$prefix}--toast-notification--warning-alt;
 
-  &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast,
-      .#{$prefix}--toast-notification--warning;
-  }
-
   /* TODO: Remove this once the following issue with icon fill is resolved: 
   ** https://github.com/carbon-design-system/carbon/issues/13616
   */
@@ -83,11 +83,27 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-toast-notification[kind='warning'][low-contrast]),
+:host(#{$prefix}-toast-notification[kind='warning-alt'][low-contrast]) {
+  @extend .#{$prefix}--toast-notification--low-contrast,
+    .#{$prefix}--toast-notification--warning;
+
+  @include notification--experimental(
+    $support-warning,
+    $notification-background-warning
+  );
+}
+
 :host(#{$prefix}-toast-notification[kind='error']) {
   @extend .#{$prefix}--toast-notification--error;
+}
 
-  &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast,
-      .#{$prefix}--toast-notification--error;
-  }
+:host(#{$prefix}-toast-notification[kind='error'][low-contrast]) {
+  @extend .#{$prefix}--toast-notification--low-contrast,
+    .#{$prefix}--toast-notification--error;
+
+  @include notification--experimental(
+    $support-error,
+    $notification-background-error
+  );
 }

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

@@ -11,13 +11,10 @@ $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,7 +11,6 @@ $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
@@ -19,9 +18,11 @@ $css--plex: true !default;
 
 :host(#{$prefix}-overflow-menu),
 :host(#{$prefix}-breadcrumb-overflow-menu) {
-  @include layer-tokens.emit-layer-tokens(1);
-
   @extend .#{$prefix}--overflow-menu;
+
+  ::slotted(.#{$prefix}--overflow-menu__icon) {
+    @extend .#{$prefix}--overflow-menu__icon;
+  }
 }
 
 :host(#{$prefix}-overflow-menu[size='sm']),
@@ -85,6 +86,10 @@ $css--plex: true !default;
   @extend .#{$prefix}--overflow-menu-options__option;
 
   outline: none;
+
+  button:hover {
+    background-color: $layer-hover;
+  }
 }
 
 :host(#{$prefix}-overflow-menu-item[size='sm']) {

package/scss/components/pagination/pagination.scss

@@ -12,13 +12,10 @@ $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;
@@ -38,3 +35,11 @@ $css--plex: true !default;
     transform: rotate(0) #{'/*rtl:rotate(180deg)*/'};
   }
 }
+
+:host(#{$prefix}-pagination[size='sm']) {
+  @extend .#{$prefix}--pagination--sm;
+}
+
+:host(#{$prefix}-pagination[size='lg']) {
+  @extend .#{$prefix}--pagination--lg;
+}

package/scss/components/popover/popover.scss

@@ -12,12 +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}-tooltip),
 :host(#{$prefix}-popover) {
-  @include layer-tokens.emit-layer-tokens(1);
+  ::slotted(.#{$prefix}--popover--tab-tip__button) {
+    @extend .#{$prefix}--popover--tab-tip__button;
+  }
 }
 
 :host(#{$prefix}-tooltip[highContrast]),

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

@@ -8,9 +8,4 @@
 $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,7 +10,6 @@ $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 *;
 
@@ -19,8 +18,6 @@ $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/radio-button/radio-button.scss

@@ -18,7 +18,7 @@ $css--plex: true !default;
 @include radio-button;
 
 :host(#{$prefix}-radio-button-group) {
-  @extend .#{$prefix}--radio-button-group;
+  @extend .#{$prefix}--form-item;
 }
 
 :host(#{$prefix}-radio-button-group[label-position='left']) {
@@ -29,6 +29,25 @@ $css--plex: true !default;
   @extend .#{$prefix}--radio-button-group--vertical;
 }
 
+:host(#{$prefix}-radio-button-group[invalid]),
+:host(#{$prefix}-radio-button-group[warn]) {
+  .#{$prefix}--radio-button__validation-msg {
+    display: flex;
+
+    .#{$prefix}--form-requirement {
+      display: block;
+      overflow: visible;
+      max-height: 100%;
+      margin-top: 0;
+      margin-left: $spacing-03;
+    }
+  }
+}
+
+:host(#{$prefix}-radio-button-group[invalid]) .#{$prefix}--form-requirement {
+  color: $text-error;
+}
+
 :host(#{$prefix}-radio-button) {
   @extend .#{$prefix}--radio-button-wrapper;
 
@@ -39,6 +58,10 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-radio-button[invalid]) .#{$prefix}--radio-button__appearance {
+  border-color: $support-error;
+}
+
 :host(#{$prefix}-radio-button[data-table]) {
   .#{$prefix}--radio-button__label {
     width: rem(28px);