@carbon/styles 1.29.0 → 1.30.0

package/scss/components/structured-list/_structured-list.scss

@@ -21,14 +21,8 @@
   .#{$prefix}--structured-list--selection .#{$prefix}--structured-list-th {
     @include padding--data-structured-list;
   }
-  @if enabled('enable-v11-release') {
-    .#{$prefix}--structured-list-row--focused-within {
-      @include focus-outline('outline');
-    }
-  } @else {
-    .#{$prefix}--structured-list-input {
-      display: none;
-    }
+  .#{$prefix}--structured-list-row--focused-within {
+    @include focus-outline('outline');
   }
 
   .#{$prefix}--structured-list {
@@ -36,9 +30,6 @@
 
     display: table;
     width: 100%;
-    @if not enabled('enable-v11-release') {
-      margin-bottom: 5rem;
-    }
 
     background-color: transparent;
     border-collapse: collapse;
@@ -96,14 +87,18 @@
   }
 
   .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected) {
+    .#{$prefix}--structured-list-row:hover:not(
+      .#{$prefix}--structured-list-row--header-row
+    ):not(.#{$prefix}--structured-list-row--selected) {
     border-color: $layer-hover;
     background-color: $layer-hover;
     cursor: pointer;
   }
 
   .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected)
+    .#{$prefix}--structured-list-row:hover:not(
+      .#{$prefix}--structured-list-row--header-row
+    ):not(.#{$prefix}--structured-list-row--selected)
     + .#{$prefix}--structured-list-row {
     border-color: $layer-hover;
   }
@@ -130,13 +125,10 @@
     cursor: inherit;
   }
 
-  @if not enabled('enable-v11-release') {
-    .#{$prefix}--structured-list-row:focus:not(.#{$prefix}--structured-list-row--header-row) {
-      @include focus-outline('outline');
-    }
-  }
   .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
+    .#{$prefix}--structured-list-row:hover:not(
+      .#{$prefix}--structured-list-row--header-row
+    )
     > .#{$prefix}--structured-list-td,
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected

package/scss/components/tabs/_tabs.scss

@@ -276,10 +276,60 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     //-----------------------------
     // Icon
     //-----------------------------
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled)
+      .#{$prefix}--tabs__nav-item--icon
+      .#{$prefix}--tabs__nav-item--close-icon {
+      padding: $spacing-05;
+      margin-top: -$spacing-03;
+      margin-right: -$spacing-05;
+      margin-left: -$spacing-05;
+
+      &:hover {
+        background-color: inherit;
+      }
+
+      svg {
+        width: 24px;
+        height: 24px;
+        padding: $spacing-02;
+        margin: -$spacing-02;
+      }
+
+      svg:hover {
+        background-color: $layer-accent-hover;
+      }
+    }
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tabs__nav-item:not(
+        .#{$prefix}--tabs__nav-item--disabled
+      ).#{$prefix}--tabs__nav-item--selected
+      .#{$prefix}--tabs__nav-item--icon
+      .#{$prefix}--tabs__nav-item--close-icon
+      svg:hover {
+      background-color: $layer-hover;
+    }
+
+    .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled)
+      .#{$prefix}--tabs__nav-item--icon
+      .#{$prefix}--tabs__nav-item--close-icon:hover {
+      background-color: $background-hover;
+    }
+
     .#{$prefix}--tabs__nav-item--icon {
       display: flex;
       align-items: center;
       padding-left: $spacing-03;
+
+      .#{$prefix}--tabs__nav-item--close-icon {
+        padding: $spacing-02;
+        margin: -$spacing-02;
+        cursor: pointer;
+        line-height: 0;
+        pointer-events: auto;
+      }
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
@@ -294,10 +344,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       @include focus-outline('reset');
       @include type-style('body-compact-01');
 
-      @if not feature-flag-enabled('enable-v11-release') {
-        width: rem(160px);
-      }
-
       overflow: hidden;
       padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
@@ -368,13 +414,19 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     // Item Hover
     //-----------------------------
     &:not(.#{$prefix}--tabs--contained)
-      .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):hover {
+      .#{$prefix}--tabs__nav-item:not(
+        .#{$prefix}--tabs__nav-item--selected
+      ):not(.#{$prefix}--tabs__nav-item--disabled):hover {
       border-bottom: $tab-underline-color-hover;
       color: $text-primary;
     }
 
     &.#{$prefix}--tabs--contained
-      .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled):hover {
+      .#{$prefix}--tabs__nav-item:not(
+        .#{$prefix}--tabs__nav-item--selected
+      ):not(.#{$prefix}--tabs__nav-item--disabled):not(
+        .#{$prefix}--tabs__nav-item--hover-off
+      ):hover {
       background-color: $layer-accent-hover;
       color: $text-primary;
     }

package/scss/components/tile/_tile.scss

@@ -20,7 +20,7 @@
 /// Tile styles
 /// @access public
 /// @group tile
-@mixin tile($local-enable-experimental-tile-contrast: false) {
+@mixin tile($enable-experimental-tile-contrast: false) {
   .#{$prefix}--tile-group {
     @include reset;
   }
@@ -65,7 +65,7 @@
 
     @if (
       enabled('enable-experimental-tile-contrast') or
-        $local-enable-experimental-tile-contrast
+        $enable-experimental-tile-contrast
     ) {
       border: 1px solid $border-tile;
     }
@@ -102,6 +102,36 @@
     padding: $spacing-05;
     background-color: $layer;
     color: $text-disabled;
+    cursor: not-allowed;
+
+    @if (
+      enabled('enable-experimental-tile-contrast') or
+        $enable-experimental-tile-contrast
+    ) {
+      border: 1px solid $border-disabled;
+    }
+  }
+
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--icon,
+  .#{$prefix}--tile--clickable.#{$prefix}--link--disabled
+    .#{$prefix}--tile--disabled-icon {
+    position: absolute;
+    right: 1rem;
+    bottom: 1rem;
+  }
+
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--icon {
+    fill: $icon-interactive;
+  }
+
+  .#{$prefix}--tile--clickable.#{$prefix}--link--disabled
+    .#{$prefix}--tile--disabled-icon {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--tile--clickable.#{$prefix}--link--disabled
+    .#{$prefix}--tile--icon {
+    display: none;
   }
 
   .#{$prefix}--tile--selectable {
@@ -110,7 +140,7 @@
 
     @if (
       enabled('enable-experimental-tile-contrast') or
-        $local-enable-experimental-tile-contrast
+        $enable-experimental-tile-contrast
     ) {
       border: 1px solid $border-tile;
     }
@@ -207,7 +237,7 @@
 
     @if (
       enabled('enable-experimental-tile-contrast') or
-        $local-enable-experimental-tile-contrast
+        $enable-experimental-tile-contrast
     ) {
       border: 1px solid $border-tile;
     }
@@ -307,6 +337,13 @@
     background-color: $layer;
     color: $text-disabled;
     cursor: not-allowed;
+
+    @if (
+      enabled('enable-experimental-tile-contrast') or
+        $enable-experimental-tile-contrast
+    ) {
+      border: 1px solid $border-disabled;
+    }
   }
 
   // V11: Possibly deprecate
@@ -315,7 +352,7 @@
   }
 
   .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {
-    border-color: button.$button-disabled;
+    border-color: $border-disabled;
   }
 
   .#{$prefix}--tile--disabled .#{$prefix}--tile__checkmark svg {

package/scss/components/ui-shell/header/_header.scss

@@ -254,12 +254,11 @@
   a.#{$prefix}--header__menu-item[aria-current='page']::after,
   .#{$prefix}--header__menu-item--current::after {
     position: absolute;
-    top: 0;
-    right: 0;
     bottom: -2px;
-    left: 0;
-    width: 100%;
-    border-bottom: 3px solid $border-interactive;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: 3px;
+    background-color: $border-interactive;
     content: '';
   }
 
@@ -271,16 +270,21 @@
   .#{$prefix}--header__submenu .#{$prefix}--header__menu {
     a.#{$prefix}--header__menu-item[aria-current='page']::after,
     .#{$prefix}--header__menu-item--current::after {
-      bottom: 0;
+      top: -2px;
       left: -2px;
-      border-bottom: none;
-      border-left: 3px solid $border-interactive;
+      width: 3px;
+      height: calc(100% + 4px);
+      background-color: $border-interactive;
     }
 
     a.#{$prefix}--header__menu-item[aria-current='page']:focus::after,
     .#{$prefix}--header__menu-item--current:focus::after {
-      left: 0;
-      border-left: 3px solid $border-interactive;
+      top: -2px;
+      left: -2px;
+      // extra, hidden width prevents flickering on focus change
+      width: 5px;
+      height: calc(100% + 4px);
+      background-color: $border-interactive;
     }
   }
 
@@ -351,6 +355,17 @@
     color: $text-primary;
   }
 
+  .#{$prefix}--header__menu-title[aria-expanded='true']
+    + .#{$prefix}--header__menu
+    .#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current {
+    // used for both desktop and mobile
+    background-color: $layer-selected;
+
+    &:hover {
+      background-color: $layer-selected-hover;
+    }
+  }
+
   .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
     height: mini-units(6);
   }

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -68,7 +68,9 @@
     width: 0;
   }
 
-  .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
+  .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(
+      .#{$prefix}--side-nav--fixed
+    ):hover,
   .#{$prefix}--side-nav--expanded {
     width: mini-units(32);
   }
@@ -155,7 +157,9 @@
   .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
     > .#{$prefix}--side-nav__link:hover,
   .#{$prefix}--side-nav__menu
-    a.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
+    a.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not(
+      [aria-current='page']
+    ):hover,
   .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover,
   .#{$prefix}--side-nav
     .#{$prefix}--header__menu-title[aria-expanded='true']:hover {
@@ -491,6 +495,21 @@
       background-color: $background-hover;
       color: $text-primary;
     }
+
+    // non-hover, selected state inherited from `_header.scss`
+    a.#{$prefix}--header__menu-item--current:hover {
+      background-color: $layer-selected-hover;
+    }
+  }
+
+  .#{$prefix}--side-nav
+    .#{$prefix}--side-nav__header-navigation
+    a.#{$prefix}--header__menu-item[aria-current='page']::after,
+  .#{$prefix}--side-nav
+    .#{$prefix}--side-nav__header-navigation
+    .#{$prefix}--header__menu-item--current::after {
+    width: 3px;
+    height: calc(100% + 4px);
   }
 
   .#{$prefix}--side-nav

package/scss/type/_index.scss

@@ -19,6 +19,7 @@
 
   // Variables
   $caption-01,
+  $caption-02,
   $label-01,
   $label-02,
   $helper-text-01,