@carbon/styles 1.98.0 → 1.99.0-rc.0

package/scss/components/notification/_inline-notification.scss

@@ -19,36 +19,176 @@
 @use '../../utilities/focus-outline' as *;
 @use './tokens' as *;
 
-/// Inline notification styles
+/// Inline notification base styles
 /// @access public
 /// @group notification
-@mixin inline-notification {
-  .#{$prefix}--inline-notification {
-    @include reset;
+@mixin inline-notification-base {
+  @include reset;
 
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    block-size: auto;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  block-size: auto;
 
-    color: $text-inverse;
-    inline-size: 100%;
-    max-inline-size: convert.to-rem(288px);
-    min-block-size: convert.to-rem(48px);
-    min-inline-size: convert.to-rem(288px);
+  color: $text-inverse;
+  inline-size: 100%;
+  max-inline-size: convert.to-rem(288px);
+  min-block-size: convert.to-rem(48px);
+  min-inline-size: convert.to-rem(288px);
 
-    @include breakpoint(md) {
-      flex-wrap: nowrap;
-      max-inline-size: convert.to-rem(608px);
-    }
+  @include breakpoint(md) {
+    flex-wrap: nowrap;
+    max-inline-size: convert.to-rem(608px);
+  }
 
-    @include breakpoint(lg) {
-      max-inline-size: convert.to-rem(736px);
-    }
+  @include breakpoint(lg) {
+    max-inline-size: convert.to-rem(736px);
+  }
 
-    @include breakpoint(max) {
-      max-inline-size: convert.to-rem(832px);
-    }
+  @include breakpoint(max) {
+    max-inline-size: convert.to-rem(832px);
+  }
+}
+
+/// Inline notification low contrast ::before styles
+/// @access public
+/// @group notification
+@mixin inline-notification-low-contrast-before {
+  position: absolute;
+  box-sizing: border-box;
+  border-width: 1px 1px 1px 0;
+  border-style: solid;
+  block-size: 100%;
+  content: '';
+  filter: opacity(0.4);
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+}
+
+/// Inline notification low-contrast error variant styles
+/// @access public
+/// @group notification
+@mixin inline-notification-low-contrast-error {
+  @include notification--experimental(
+    $support-error,
+    $notification-background-error
+  );
+
+  &::before {
+    border-color: $support-error;
+  }
+}
+
+/// Inline notification low-contrast success variant styles
+/// @access public
+/// @group notification
+@mixin inline-notification-low-contrast-success {
+  @include notification--experimental(
+    $support-success,
+    $notification-background-success
+  );
+
+  &::before {
+    border-color: $support-success;
+  }
+}
+
+/// Inline notification low-contrast info variant styles
+/// @access public
+/// @group notification
+@mixin inline-notification-low-contrast-info {
+  @include notification--experimental(
+    $support-info,
+    $notification-background-info
+  );
+
+  &::before {
+    border-color: $support-info;
+  }
+}
+
+/// Inline notification low-contrast warning variant styles
+/// @access public
+/// @group notification
+@mixin inline-notification-low-contrast-warning {
+  @include notification--experimental(
+    $support-warning,
+    $notification-background-warning
+  );
+
+  &::before {
+    border-color: $support-warning;
+  }
+}
+
+/// Inline notification low-contrast base styles
+/// @access public
+/// @group notification
+@mixin inline-notification-low-contrast-base {
+  color: $text-primary;
+
+  .#{$prefix}--inline-notification__close-button:focus {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--inline-notification__close-button
+    .#{$prefix}--inline-notification__close-icon {
+    fill: $icon-primary;
+  }
+
+  &::before {
+    @include inline-notification-low-contrast-before;
+  }
+}
+
+/// Inline notification error variant base styles
+/// @access public
+/// @group notification
+@mixin inline-notification-error-base {
+  @include notification--experimental(
+    $support-error-inverse,
+    $background-inverse
+  );
+}
+
+/// Inline notification success variant base styles
+/// @access public
+/// @group notification
+@mixin inline-notification-success-base {
+  @include notification--experimental(
+    $support-success-inverse,
+    $background-inverse
+  );
+}
+
+/// Inline notification info variant base styles
+/// @access public
+/// @group notification
+@mixin inline-notification-info-base {
+  @include notification--experimental(
+    $support-info-inverse,
+    $background-inverse
+  );
+}
+
+/// Inline notification warning variant base styles
+/// @access public
+/// @group notification
+@mixin inline-notification-warning-base {
+  @include notification--experimental(
+    $support-warning-inverse,
+    $background-inverse
+  );
+}
+
+/// Inline notification styles
+/// @access public
+/// @group notification
+@mixin inline-notification {
+  .#{$prefix}--inline-notification {
+    @include inline-notification-base;
   }
 
   .#{$prefix}--inline-notification:not(
@@ -76,97 +216,43 @@
   }
 
   .#{$prefix}--inline-notification--low-contrast {
-    color: $text-primary;
-
-    &::before {
-      position: absolute;
-      box-sizing: border-box;
-      border-width: 1px 1px 1px 0;
-      border-style: solid;
-      block-size: 100%;
-      content: '';
-      filter: opacity(0.4);
-      inline-size: 100%;
-      inset-block-start: 0;
-      inset-inline-start: 0;
-      pointer-events: none;
-    }
+    @include inline-notification-low-contrast-base;
   }
 
   .#{$prefix}--inline-notification--error {
-    @include notification--experimental(
-      $support-error-inverse,
-      $background-inverse
-    );
+    @include inline-notification-error-base;
   }
 
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error {
-    @include notification--experimental(
-      $support-error,
-      $notification-background-error
-    );
-
-    &::before {
-      border-color: $support-error;
-    }
+    @include inline-notification-low-contrast-error;
   }
 
   .#{$prefix}--inline-notification--success {
-    @include notification--experimental(
-      $support-success-inverse,
-      $background-inverse
-    );
+    @include inline-notification-success-base;
   }
 
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success {
-    @include notification--experimental(
-      $support-success,
-      $notification-background-success
-    );
-
-    &::before {
-      border-color: $support-success;
-    }
+    @include inline-notification-low-contrast-success;
   }
 
   .#{$prefix}--inline-notification--info,
   .#{$prefix}--inline-notification--info-square {
-    @include notification--experimental(
-      $support-info-inverse,
-      $background-inverse
-    );
+    @include inline-notification-info-base;
   }
 
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info,
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info-square {
-    @include notification--experimental(
-      $support-info,
-      $notification-background-info
-    );
-
-    &::before {
-      border-color: $support-info;
-    }
+    @include inline-notification-low-contrast-info;
   }
 
   .#{$prefix}--inline-notification--warning,
   .#{$prefix}--inline-notification--warning-alt {
-    @include notification--experimental(
-      $support-warning-inverse,
-      $background-inverse
-    );
+    @include inline-notification-warning-base;
   }
 
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning,
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning-alt {
-    @include notification--experimental(
-      $support-warning,
-      $notification-background-warning
-    );
-
-    &::before {
-      border-color: $support-warning;
-    }
+    @include inline-notification-low-contrast-warning;
   }
 
   .#{$prefix}--inline-notification--warning
@@ -295,17 +381,6 @@
     }
   }
 
-  .#{$prefix}--inline-notification--low-contrast
-    .#{$prefix}--inline-notification__close-button:focus {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--inline-notification--low-contrast
-    .#{$prefix}--inline-notification__close-button
-    .#{$prefix}--inline-notification__close-icon {
-    fill: $icon-primary;
-  }
-
   // Windows HCM fix
 
   .#{$prefix}--inline-notification {

package/scss/components/notification/_toast-notification.scss

@@ -21,23 +21,131 @@
 @use '../../utilities/focus-outline' as *;
 @use './tokens' as *;
 
+/// Toast notification base styles
+/// @access public
+/// @group notification
+@mixin toast-notification-base {
+  @include reset;
+
+  display: flex;
+  block-size: auto;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+  color: $text-inverse;
+  inline-size: convert.to-rem(288px);
+  padding-inline-start: convert.to-rem(13px);
+
+  @include breakpoint(max) {
+    inline-size: convert.to-rem(352px);
+  }
+}
+
+/// Toast notification low-contrast base styles
+/// @access public
+/// @group notification
+@mixin toast-notification-low-contrast-base {
+  color: $text-primary;
+
+  .#{$prefix}--toast-notification__subtitle,
+  .#{$prefix}--toast-notification__caption {
+    color: $text-primary;
+  }
+
+  .#{$prefix}--toast-notification__close-button
+    .#{$prefix}--toast-notification__close-icon {
+    fill: $icon-primary;
+  }
+
+  .#{$prefix}--toast-notification__close-button:focus {
+    @include focus-outline('outline');
+  }
+}
+
+/// Toast notification error variant base styles
+/// @access public
+/// @group notification
+@mixin toast-notification-error-base {
+  @include notification--experimental(
+    $support-error-inverse,
+    $background-inverse
+  );
+}
+
+/// Toast notification success variant base styles
+/// @access public
+/// @group notification
+@mixin toast-notification-success-base {
+  @include notification--experimental(
+    $support-success-inverse,
+    $background-inverse
+  );
+}
+
+/// Toast notification info variant base styles
+/// @access public
+/// @group notification
+@mixin toast-notification-info-base {
+  @include notification--experimental(
+    $support-info-inverse,
+    $background-inverse
+  );
+}
+
+/// Toast notification warning variant base styles
+/// @access public
+/// @group notification
+@mixin toast-notification-warning-base {
+  @include notification--experimental(
+    $support-warning-inverse,
+    $background-inverse
+  );
+}
+
+/// Toast notification low-contrast error variant styles
+/// @access public
+/// @group notification
+@mixin toast-notification-low-contrast-error {
+  @include notification--experimental(
+    $support-error,
+    $notification-background-error
+  );
+}
+
+/// Toast notification low-contrast success variant styles
+/// @access public
+/// @group notification
+@mixin toast-notification-low-contrast-success {
+  @include notification--experimental(
+    $support-success,
+    $notification-background-success
+  );
+}
+
+/// Toast notification low-contrast info variant styles
+/// @access public
+/// @group notification
+@mixin toast-notification-low-contrast-info {
+  @include notification--experimental(
+    $support-info,
+    $notification-background-info
+  );
+}
+
+/// Toast notification low-contrast warning variant styles
+/// @access public
+/// @group notification
+@mixin toast-notification-low-contrast-warning {
+  @include notification--experimental(
+    $support-warning,
+    $notification-background-warning
+  );
+}
+
 /// Toast notification styles
 /// @access public
 /// @group notification
 @mixin toast-notification {
   .#{$prefix}--toast-notification {
-    @include reset;
-
-    display: flex;
-    block-size: auto;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
-    color: $text-inverse;
-    inline-size: convert.to-rem(288px);
-    padding-inline-start: convert.to-rem(13px);
-
-    @include breakpoint(max) {
-      inline-size: convert.to-rem(352px);
-    }
+    @include toast-notification-base;
   }
 
   .#{$prefix}--toast-notification:not(
@@ -65,67 +173,43 @@
   }
 
   .#{$prefix}--toast-notification--low-contrast {
-    color: $text-primary;
+    @include toast-notification-low-contrast-base;
   }
 
   .#{$prefix}--toast-notification--error {
-    @include notification--experimental(
-      $support-error-inverse,
-      $background-inverse
-    );
+    @include toast-notification-error-base;
   }
 
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
-    @include notification--experimental(
-      $support-error,
-      $notification-background-error
-    );
+    @include toast-notification-low-contrast-error;
   }
 
   .#{$prefix}--toast-notification--success {
-    @include notification--experimental(
-      $support-success-inverse,
-      $background-inverse
-    );
+    @include toast-notification-success-base;
   }
 
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
-    @include notification--experimental(
-      $support-success,
-      $notification-background-success
-    );
+    @include toast-notification-low-contrast-success;
   }
 
   .#{$prefix}--toast-notification--info,
   .#{$prefix}--toast-notification--info-square {
-    @include notification--experimental(
-      $support-info-inverse,
-      $background-inverse
-    );
+    @include toast-notification-info-base;
   }
 
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info,
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info-square {
-    @include notification--experimental(
-      $support-info,
-      $notification-background-info
-    );
+    @include toast-notification-low-contrast-info;
   }
 
   .#{$prefix}--toast-notification--warning,
   .#{$prefix}--toast-notification--warning-alt {
-    @include notification--experimental(
-      $support-warning-inverse,
-      $background-inverse
-    );
+    @include toast-notification-warning-base;
   }
 
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning,
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt {
-    @include notification--experimental(
-      $support-warning,
-      $notification-background-warning
-    );
+    @include toast-notification-low-contrast-warning;
   }
 
   .#{$prefix}--toast-notification--warning
@@ -179,17 +263,6 @@
     }
   }
 
-  .#{$prefix}--toast-notification--low-contrast
-    .#{$prefix}--toast-notification__close-button:focus {
-    @include focus-outline('outline');
-  }
-
-  .#{$prefix}--toast-notification--low-contrast
-    .#{$prefix}--toast-notification__close-button
-    .#{$prefix}--toast-notification__close-icon {
-    fill: $icon-primary;
-  }
-
   .#{$prefix}--toast-notification__title {
     @include type-style('heading-compact-01');
 
@@ -206,11 +279,6 @@
     word-break: break-word;
   }
 
-  .#{$prefix}--toast-notification--low-contrast
-    .#{$prefix}--toast-notification__subtitle {
-    color: $text-primary;
-  }
-
   .#{$prefix}--toast-notification__caption {
     @include type-style('body-compact-01');
 
@@ -218,11 +286,6 @@
     padding-block-start: $spacing-03;
   }
 
-  .#{$prefix}--toast-notification--low-contrast
-    .#{$prefix}--toast-notification__caption {
-    color: $text-primary;
-  }
-
   // Windows HCM fix
 
   .#{$prefix}--toast-notification {

package/scss/components/popover/_popover.scss

@@ -85,6 +85,50 @@ $popover-caret-height: custom-property.get-var(
   convert.to-rem(6px)
 );
 
+/// Mixin for applying base popover styles
+@mixin popover-base {
+  position: absolute;
+  z-index: z('floating');
+  inset: 0;
+  pointer-events: none;
+}
+
+/// Mixin for applying base highcontrast popover styles
+@mixin popover-highcontrast-base {
+  @include custom-property.declaration(
+    'popover-background-color',
+    theme.$background-inverse
+  );
+  @include custom-property.declaration(
+    'popover-text-color',
+    theme.$text-inverse
+  );
+}
+
+/// Mixin for applying popover tab-tip button styles
+@mixin popover-tab-tip-button {
+  @include button-reset.reset;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: convert.to-rem(32px);
+  inline-size: convert.to-rem(32px);
+
+  &:focus {
+    @include focus-outline('outline');
+  }
+
+  &:hover {
+    background-color: theme.$layer-hover;
+  }
+
+  svg {
+    fill: theme.$icon-primary;
+  }
+}
+
 @mixin popover {
   // Container
   .#{$prefix}--popover-container {
@@ -102,14 +146,7 @@ $popover-caret-height: custom-property.get-var(
 
   // High contrast modifier
   .#{$prefix}--popover--high-contrast .#{$prefix}--popover {
-    @include custom-property.declaration(
-      'popover-background-color',
-      theme.$background-inverse
-    );
-    @include custom-property.declaration(
-      'popover-text-color',
-      theme.$text-inverse
-    );
+    @include popover-highcontrast-base;
   }
 
   // Drop shadow modifier
@@ -135,10 +172,7 @@ $popover-caret-height: custom-property.get-var(
 
   // Popover, this element contains both the caret and the popover content
   .#{$prefix}--popover {
-    position: absolute;
-    z-index: z('floating');
-    inset: 0;
-    pointer-events: none;
+    @include popover-base;
   }
 
   // Popover content
@@ -1417,22 +1451,7 @@ $popover-caret-height: custom-property.get-var(
   }
 
   .#{$prefix}--popover--tab-tip__button {
-    @include button-reset.reset;
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: convert.to-rem(32px);
-    inline-size: convert.to-rem(32px);
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &:hover {
-      background-color: theme.$layer-hover;
-    }
+    @include popover-tab-tip-button;
   }
 
   .#{$prefix}--popover--tab-tip.#{$prefix}--popover--open

package/scss/components/treeview/_treeview.scss

@@ -298,7 +298,10 @@
   .#{$prefix}--tree-node__label .#{$prefix}--popover-container {
     inline-size: 100%;
   }
-  .#{$prefix}--tooltip-trigger__wrapper .#{$prefix}--btn--ghost:focus {
+  .#{$prefix}--tree
+    .#{$prefix}--tree-node__label
+    .#{$prefix}--tooltip-trigger__wrapper
+    .#{$prefix}--btn--ghost:focus {
     box-shadow: none;
     outline: 2px solid $focus;
   }