@carbon/styles 1.58.0-rc.0 → 1.59.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.58.0-rc.0",
+  "version": "1.59.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "@carbon/grid": "^11.23.0",
     "@carbon/layout": "^11.22.0",
     "@carbon/motion": "^11.18.0",
-    "@carbon/themes": "^11.35.0",
+    "@carbon/themes": "^11.36.0",
     "@carbon/type": "^11.27.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/telemetry-js": "^1.5.0"
@@ -68,5 +68,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "23f19271f964a10a9fbc4616a43b05f5cc14e7d1"
+  "gitHead": "6269fa19f0ce2930b21a2fda05974a597126ec6b"
 }

package/scss/__tests__/theme-test.js

@@ -105,6 +105,7 @@ describe('@carbon/styles/scss/theme', () => {
         "link-primary",
         "link-primary-hover",
         "link-secondary",
+        "link-inverse-visited",
         "link-visited",
         "link-inverse",
         "link-inverse-active",

package/scss/components/accordion/_accordion.scss

@@ -59,12 +59,27 @@ $content-padding: 0 0 0 $spacing-05 !default;
     display: list-item;
     overflow: visible;
     border-block-start: 1px solid $border-subtle;
+    transition: border-color motion(standard, productive) $duration-fast-02;
 
     &:last-child {
       border-block-end: 1px solid $border-subtle;
     }
   }
 
+  .#{$prefix}--accordion__item:not(.#{$prefix}--accordion__item--active) {
+    // Blend border on hover
+    &:hover,
+    // Blend top border of the next component on hover
+    &:hover + .#{$prefix}--accordion__item {
+      border-block-start-color: $layer-hover;
+    }
+
+    // Blend bottom border of last item on hover
+    &:last-child:hover {
+      border-block-end-color: $layer-hover;
+    }
+  }
+
   .#{$prefix}--accordion__heading {
     @include button-reset.reset;
 
@@ -83,11 +98,15 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     &:hover {
       background-color: $layer-hover;
+      outline: none;
     }
 
     &:focus {
-      box-shadow: /* Border top */ 0 -1px 0 0 $focus, inset 0 1px 0 0 $focus,
-        /* Border right */ inset 2px 0 0 0 $focus,
+      position: relative;
+      z-index: 2;
+      box-shadow:
+        /* Border top */ 0 -1px 0 0 $focus,
+        inset 0 1px 0 0 $focus, /* Border right */ inset 2px 0 0 0 $focus,
         /* Border bottom */ 0 1px 0 0 $focus, inset 0 -1px 0 0 $focus,
         /* Border left */ inset -2px 0 0 0 $focus;
       outline: none;
@@ -213,6 +232,79 @@ $content-padding: 0 0 0 $spacing-05 !default;
     }
   }
 
+  // flush
+  .#{$prefix}--accordion--flush .#{$prefix}--accordion__item {
+    position: relative;
+    border-color: transparent;
+
+    &:last-child,
+    &:hover,
+    &:last-child:hover,
+    &:hover + .#{$prefix}--accordion__item {
+      border-color: transparent;
+    }
+
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      block-size: 1px;
+      content: '';
+      inline-size: calc(100% - $spacing-05 - $spacing-05);
+      margin-inline-start: $spacing-05;
+      transition: background motion(standard, productive) $duration-fast-02;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &::before {
+      background: $border-subtle;
+      inset-block-start: -1px;
+    }
+
+    &:last-child::after {
+      background: $border-subtle;
+      inset-block-end: -1px;
+    }
+  }
+
+  .#{$prefix}--accordion--flush .#{$prefix}--accordion__heading:hover {
+    position: relative;
+    z-index: 1;
+
+    // blend top/bottom border into heading hover state
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      background: $layer-hover;
+      block-size: 1px;
+      content: '';
+      inline-size: 100%;
+      inset-inline-start: 0;
+      transition: background motion(standard, productive) $duration-fast-02;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &::before {
+      inset-block-start: -1px;
+    }
+
+    &::after {
+      inset-block-end: -1px;
+    }
+
+    &:focus::after,
+    &:focus::before {
+      background: none;
+    }
+  }
+
   // Skeleton state
   .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__heading,
   .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__button {
@@ -234,7 +326,9 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion.#{$prefix}--skeleton
-    .#{$prefix}--accordion__heading:hover::before {
+    .#{$prefix}--accordion__heading:hover::before,
+  .#{$prefix}--accordion.#{$prefix}--skeleton
+    .#{$prefix}--accordion__heading:hover {
     background-color: transparent;
   }
 
@@ -255,6 +349,10 @@ $content-padding: 0 0 0 $spacing-05 !default;
     margin-block-end: 0;
   }
 
+  .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__title {
+    margin-inline-start: $spacing-05;
+  }
+
   // Windows HCM fix
   .#{$prefix}--accordion__arrow,
   .#{$prefix}--accordion__item--active .#{$prefix}--accordion__arrow {
@@ -284,24 +382,3 @@ $content-padding: 0 0 0 $spacing-05 !default;
   opacity: 0;
   visibility: hidden;
 }
-
-// flush
-.#{$prefix}--accordion--flush .#{$prefix}--accordion__title {
-  margin-inline-start: 0;
-}
-
-.#{$prefix}--accordion--flush .#{$prefix}--accordion__arrow {
-  margin-inline-end: 0;
-}
-
-.#{$prefix}--accordion--flush .#{$prefix}--accordion__content {
-  padding-inline-start: 0;
-}
-
-.#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton)
-  .#{$prefix}--accordion__heading:hover::before,
-.#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton)
-  .#{$prefix}--accordion__heading:focus::before {
-  inline-size: calc(100% + 32px);
-  inset-inline-start: -1rem;
-}

package/scss/components/checkbox/_checkbox.scss

@@ -385,4 +385,29 @@
     line-height: inherit;
     margin-block-start: convert.to-rem(-1px);
   }
+
+  // horizontal checkbox group
+  .#{$prefix}--checkbox-group--horizontal {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+
+    .#{$prefix}--form-item {
+      flex: none;
+      margin-block-end: 0;
+
+      &:not(:last-of-type) {
+        margin-inline-end: $spacing-05;
+      }
+    }
+
+    .#{$prefix}--checkbox-label-text {
+      padding-inline-start: $spacing-03;
+    }
+
+    .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+      margin-block-start: 0;
+    }
+  }
 }

package/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -153,6 +153,24 @@
     inset-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--text-input--fluid .#{$prefix}--toggle-password-tooltip {
+    @include focus-outline('reset');
+
+    position: absolute;
+    block-size: convert.to-rem(64px);
+    cursor: pointer;
+    inline-size: convert.to-rem(48px);
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    transition: outline $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--toggle-password-tooltip
+    .#{$prefix}--popover {
+    inset-inline-start: 0;
+  }
+
   .#{$prefix}--text-input--fluid
     .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
     block-size: convert.to-rem(32px);

package/scss/components/menu/_menu.scss

@@ -77,19 +77,11 @@
     &:focus {
       @include focus-outline('outline');
     }
-
-    svg {
-      color: $icon-secondary;
-    }
   }
 
   .#{$prefix}--menu-item:hover {
     background-color: $layer-hover;
     color: $text-primary;
-
-    svg {
-      color: $icon-primary;
-    }
   }
 
   $supported-sizes: (

package/scss/components/tag/_tag.scss

@@ -48,7 +48,7 @@
     margin: $spacing-02;
     cursor: default;
     // restricts size of contained elements
-    max-inline-size: 100%;
+    max-inline-size: convert.to-rem(208px);
     min-block-size: layout.size('height');
     // ensures tag stays pill shaped;
     min-inline-size: convert.to-rem(32px);
@@ -72,30 +72,31 @@
       padding-inline-start: $spacing-03;
     }
 
+    &:not(.#{$prefix}--tag--selectable) {
+      border: 0;
+    }
+
     &:not(:first-child) {
       margin-inline-start: 0;
     }
   }
 
+  .#{$prefix}--tag--operational > span,
+  .#{$prefix}--tag--selectable > span,
   .#{$prefix}--tag__label {
+    display: block;
     overflow: hidden;
-    max-inline-size: 100%;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .#{$prefix}--tag--interactive:focus {
-    box-shadow: inset 0 0 0 1px $focus;
-    outline: none;
-  }
-
-  .#{$prefix}--tag--interactive:hover {
-    cursor: pointer;
+    outline: 2px solid $focus;
+    outline-offset: 1px;
   }
 
   // tags used for filtering
   .#{$prefix}--tag--filter {
-    cursor: pointer;
     padding-block-end: 0;
     padding-block-start: 0;
     padding-inline-end: 0;
@@ -105,11 +106,6 @@
     }
   }
 
-  .#{$prefix}--interactive--tag-children {
-    display: inline-flex;
-    place-items: center;
-  }
-
   .#{$prefix}--tag--selectable {
     border: 1px solid $border-inverse;
     background-color: $layer;
@@ -251,7 +247,9 @@
     );
   }
 
-  .#{$prefix}--tag--outline:not(.#{$prefix}--tag--operational) {
+  .#{$prefix}--tag--outline:not(.#{$prefix}--tag--operational):not(span):not(
+      [disabled]
+    ) {
     @include tag-theme($background, $text-primary, $layer-hover);
 
     outline: 1px solid $background-inverse;
@@ -408,5 +406,56 @@
   .#{$prefix}--tag__close-icon:focus {
     @include high-contrast-mode('focus');
   }
+
+  .#{$prefix}--tag-label-tooltip {
+    max-inline-size: -webkit-fill-available;
+  }
+
+  .#{$prefix}--tag__custom-icon + .#{$prefix}--tag-label-tooltip {
+    max-inline-size: convert.to-rem(176px);
+  }
+
+  .#{$prefix}--tag--filter
+    .#{$prefix}--tag__custom-icon
+    + .#{$prefix}--tag-label-tooltip {
+    max-inline-size: convert.to-rem(158px);
+  }
   /* stylelint-enable */
+
+  .#{$prefix}--interactive--tag-children {
+    display: inline-flex;
+    max-inline-size: convert.to-rem(200px);
+    place-items: center;
+  }
+
+  .#{$prefix}--tag--filter
+    .#{$prefix}--tag__custom-icon
+    + span
+    > .#{$prefix}--interactive--tag-children {
+    max-inline-size: convert.to-rem(184px);
+  }
+
+  .#{$prefix}--tag .#{$prefix}--definition-term {
+    -webkit-border-after: none;
+    border-block-end: none;
+    cursor: default;
+    max-inline-size: convert.to-rem(192px);
+  }
+
+  .#{$prefix}--tag
+    .#{$prefix}--tag__custom-icon
+    + span
+    > .#{$prefix}--definition-term {
+    max-inline-size: convert.to-rem(176px);
+  }
+
+  .#{$prefix}--tag > .#{$prefix}--popover-container {
+    display: flex;
+  }
+
+  .#{$prefix}--toggletip-button:has(
+      .#{$prefix}--tag--operational.#{$prefix}--tag--disabled
+    ) {
+    pointer-events: none;
+  }
 }

package/scss/components/tile/_tile.scss

@@ -232,6 +232,12 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     inline-size: $-icon-container-size;
     inset-block-end: 0;
     inset-inline-end: 0;
+    @if (
+      enabled('enable-experimental-tile-contrast') or
+        $enable-experimental-tile-contrast
+    ) {
+      border: 1px solid $border-disabled;
+    }
 
     &:focus {
       outline: 2px solid $focus;
@@ -271,6 +277,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--expandable.#{$prefix}--tile--expandable--interactive {
+    border: none;
     cursor: default;
     transition: max-height $duration-moderate-01 motion(standard, productive);
 
@@ -391,6 +398,24 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
+    > .#{$prefix}--slug {
+    inset-inline-end: $spacing-05;
+    transition: inset-inline-end $duration-fast-02 motion(standard, productive);
+
+    @if (
+      enabled('enable-v12-tile-radio-icons') or
+        $enable-experimental-tile-contrast
+    ) {
+      inset-inline-end: $spacing-08;
+    }
+  }
+
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
+    > .#{$prefix}--slug {
+    inset-inline-end: $spacing-08;
+  }
+
   .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
     pointer-events: none;
   }
@@ -435,7 +460,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:focus,
-  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:focus {
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:focus,
+  .#{$prefix}--tile-input:focus + .#{$prefix}--tile--slug.#{$prefix}--tile {
     outline-offset: -1px;
   }
 
@@ -463,10 +489,23 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable
     .#{$prefix}--tile-content {
     position: relative;
-    z-index: 1;
     cursor: pointer;
   }
 
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable .#{$prefix}--tile-content,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile__checkmark,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected .#{$prefix}--slug {
+    z-index: 1;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    .#{$prefix}--slug:has(> .cds--popover--open) {
+    z-index: 2;
+  }
+
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--slug,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     > .#{$prefix}--tile__checkmark {

package/scss/components/toggletip/_toggletip.scss

@@ -61,11 +61,11 @@
     );
     @include custom-property.declaration(
       'link-hover-text-color',
-      theme.$link-inverse
+      theme.$link-inverse-hover
     );
     @include custom-property.declaration(
       'link-visited-text-color',
-      theme.$link-inverse
+      theme.$link-inverse-visited
     );
     @include custom-property.declaration(
       'link-focus-text-color',