@carbon/styles 0.14.0 → 0.15.1

package/scss/components/search/_search.scss

@@ -40,7 +40,7 @@
 
   .#{$prefix}--search-input {
     @include reset;
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
     @include focus-outline('reset');
 
     width: 100%;
@@ -99,24 +99,21 @@
     left: rem(8px);
   }
 
-  // Large styles
-  // V11: change lg to md
-  .#{$prefix}--search--lg .#{$prefix}--search-input,
-  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+  // Medium styles
+  .#{$prefix}--search--md .#{$prefix}--search-input,
+  .#{$prefix}--search--md.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
     height: rem(40px);
     // 12px padding on either side of icon + 16px icon (40px)
     padding: 0 $spacing-08;
   }
-
-  // V11: change lg to md
-  .#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon {
+  .#{$prefix}--search--md .#{$prefix}--search-magnifier-icon {
     left: rem(12px);
   }
 
-  // V11: change xl to lg
-  .#{$prefix}--search--xl .#{$prefix}--search-input,
-  .#{$prefix}--search--xl.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+  // Large styles
+  .#{$prefix}--search--lg .#{$prefix}--search-input,
+  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
     height: rem(48px);
     // 16px padding on either side of icon + 16px icon (48px)
@@ -245,6 +242,7 @@
     @include focus-outline('outline');
   }
 
+  // Small
   .#{$prefix}--search--sm {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
@@ -259,8 +257,8 @@
     }
   }
 
-  // V11: change lg to md
-  .#{$prefix}--search--lg {
+  // Medium
+  .#{$prefix}--search--md {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
@@ -274,8 +272,8 @@
     }
   }
 
-  // V11: change xl to lg
-  .#{$prefix}--search--xl {
+  // Large
+  .#{$prefix}--search--lg {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
@@ -294,9 +292,8 @@
     visibility: hidden;
   }
 
-  // V11: change xl to lg, lg to md
-  .#{$prefix}--search--xl.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
+  .#{$prefix}--search--md.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
     @include skeleton;
 

package/scss/components/select/_select.scss

@@ -40,7 +40,7 @@
   }
 
   .#{$prefix}--select-input {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     display: block;
@@ -175,10 +175,15 @@
     opacity: 1;
   }
 
-  .#{$prefix}--select-optgroup,
+  optgroup.#{$prefix}--select-optgroup,
   .#{$prefix}--select-option {
     // For the options to show in IE11
+    background-color: $background-hover;
     color: $text-primary;
+
+    &:disabled {
+      color: $text-disabled;
+    }
   }
 
   .#{$prefix}--select--inline {
@@ -214,6 +219,7 @@
     color: $text-primary;
   }
 
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus,
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus option,
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus optgroup {
     background-color: $background;

package/scss/components/slider/_slider.scss

@@ -38,7 +38,9 @@
     width: 100%;
     min-width: rem(200px);
     max-width: rem(640px);
+    padding: $spacing-05 0;
     margin: 0 $spacing-05;
+    cursor: pointer;
   }
 
   .#{$prefix}--slider__range-label {
@@ -57,7 +59,6 @@
     width: 100%;
     height: rem(2px);
     background: $border-subtle;
-    cursor: pointer;
     transform: translate(0%, -50%);
   }
 
@@ -87,13 +88,11 @@
   .#{$prefix}--slider__thumb {
     position: absolute;
     z-index: 3;
-    top: 0;
     width: rem(14px);
     height: rem(14px);
     background: $layer-selected-inverse;
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
-    cursor: pointer;
     outline: none;
     transform: translate(-50%, -50%);
     transition: transform $duration-fast-02 motion(standard, productive),
@@ -150,6 +149,10 @@
     color: $text-disabled;
   }
 
+  .#{$prefix}--slider--disabled.#{$prefix}--slider {
+    cursor: not-allowed;
+  }
+
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
     background-color: $border-subtle;
 
@@ -177,7 +180,6 @@
     .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}--slider__filled-track {
     background-color: $border-subtle;
-    cursor: not-allowed;
   }
 
   .#{$prefix}--slider--disabled

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

@@ -44,7 +44,6 @@
     border-collapse: collapse;
     border-spacing: 0;
     overflow-x: auto;
-    overflow-y: hidden;
 
     // Condensed list
     &.#{$prefix}--structured-list--condensed .#{$prefix}--structured-list-td,
@@ -134,7 +133,7 @@
   .#{$prefix}--structured-list-th {
     @include reset;
     @include padding-th;
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     display: table-cell;
     height: rem(40px);
@@ -152,7 +151,7 @@
 
   .#{$prefix}--structured-list-td {
     @include reset;
-    @include type-style('body-long-01');
+    @include type-style('body-01');
     @include padding-td;
 
     position: relative;

package/scss/components/tabs/_tabs.scss

@@ -38,31 +38,27 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
 @mixin tabs {
   .#{$prefix}--tabs {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
+    position: relative;
     display: flex;
     width: 100%;
     height: auto;
     min-height: rem(40px);
+    max-height: 4rem;
     color: $text-primary;
 
     &.#{$prefix}--tabs--contained {
       min-height: rem(48px);
     }
 
-    .#{$prefix}--tabs__nav {
+    .#{$prefix}--tab--list {
       display: flex;
-      overflow: auto hidden;
-      width: auto;
-      max-width: 100%;
-      flex-direction: row;
-      padding: 0;
-      margin: 0;
-      list-style: none;
-      outline: 0;
-      // hide scroll bars
+      width: 100%;
+      overflow-x: auto;
+      scroll-behavior: smooth;
       scrollbar-width: none;
-      transition: max-height $duration-fast-01 motion(standard, productive);
+      will-change: scroll-position;
 
       &::-webkit-scrollbar {
         display: none;
@@ -72,37 +68,121 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     //-----------------------------
     // Overflow Nav Buttons
     //-----------------------------
-    .#{$prefix}--tabs__overflow-indicator--left,
-    .#{$prefix}--tabs__overflow-indicator--right {
+    .#{$prefix}--tab--overflow-nav-button {
+      @include button-reset.reset;
+
+      display: flex;
+      width: $spacing-08;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      background-color: $background;
+
+      &:focus {
+        @include focus-outline('outline');
+      }
+    }
+
+    .#{$prefix}--tab--overflow-nav-button--hidden {
+      display: none;
+    }
+
+    &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
+      width: $spacing-09;
+      margin: 0;
+      background-color: $layer-accent;
+    }
+
+    .#{$prefix}--tab--overflow-nav-button svg {
+      fill: $icon-primary;
+    }
+
+    .#{$prefix}--tab--overflow-nav-button--next {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    .#{$prefix}--tab--overflow-nav-button--next::before {
+      position: absolute;
       z-index: 1;
+      left: -$spacing-03;
       width: $spacing-03;
-      flex: 1 0 auto;
+      height: 100%;
+      background: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $background
+      );
+      content: '';
     }
 
-    .#{$prefix}--tabs__overflow-indicator--left {
-      margin-right: -$spacing-03;
-      background-image: linear-gradient(to left, transparent, $background);
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tab--overflow-nav-button--next::before {
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
-    .#{$prefix}--tabs__overflow-indicator--right {
-      margin-left: -$spacing-03;
-      background-image: linear-gradient(to right, transparent, $background);
+    .#{$prefix}--tab--overflow-nav-button--previous {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    .#{$prefix}--tab--overflow-nav-button--previous::before {
+      position: absolute;
+      z-index: 1;
+      right: -$spacing-03;
+      width: $spacing-03;
+      height: 100%;
+      background: linear-gradient(to left, rgba(255, 255, 255, 0), $background);
+      content: '';
+    }
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tab--overflow-nav-button--previous::before {
+      background-image: linear-gradient(
+        to left,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
     .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--left {
-      background-image: linear-gradient(to left, transparent, $layer);
+      background-image: linear-gradient(
+        to left,
+        rgba(255, 255, 255, 0),
+        $layer
+      );
     }
 
     .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--right {
-      background-image: linear-gradient(to right, transparent, $layer);
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $layer
+      );
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--left {
-      background-image: linear-gradient(to left, transparent, $layer-accent);
+      background-image: linear-gradient(
+        to left,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--right {
-      background-image: linear-gradient(to right, transparent, $layer-accent);
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
     // Safari-only media query
@@ -146,34 +226,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
     }
 
-    .#{$prefix}--tab--overflow-nav-button {
-      @include button-reset.reset;
-
-      display: flex;
-      width: $spacing-08;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-
-      &:focus {
-        @include focus-outline('outline');
-      }
-    }
-
-    .#{$prefix}--tab--overflow-nav-button--hidden {
-      display: none;
-    }
-
-    &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
-      width: $spacing-09;
-      margin: 0;
-      background-color: $layer-accent;
-    }
-
-    .#{$prefix}--tab--overflow-nav-button svg {
-      fill: $icon-primary;
-    }
-
     //-----------------------------
     // Item
     //-----------------------------
@@ -181,6 +233,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       @include reset;
 
       display: flex;
+      flex: 1 0 auto;
       padding: 0;
       cursor: pointer;
       transition: background-color $duration-fast-01
@@ -215,7 +268,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     .#{$prefix}--tabs__nav-link {
       @include button-reset.reset($width: false);
       @include focus-outline('reset');
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       @if not feature-flag-enabled('enable-v11-release') {
         width: rem(160px);
@@ -298,7 +351,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       .#{$prefix}--tabs__nav-link:focus,
     .#{$prefix}--tabs__nav-item--selected:active
       .#{$prefix}--tabs__nav-link:active {
-      @include type-style('productive-heading-01');
+      @include type-style('heading-compact-01');
 
       color: $text-primary;
     }

package/scss/components/tag/_tag.scss

@@ -178,6 +178,7 @@
     cursor: pointer;
     transition: background-color $duration-fast-01 motion(standard, productive),
       box-shadow $duration-fast-01 motion(standard, productive);
+
     svg {
       fill: currentColor;
     }

package/scss/components/text-area/_text-area.scss

@@ -22,7 +22,7 @@
 @mixin text-area {
   .#{$prefix}--text-area {
     @include reset;
-    @include type-style('body-long-01');
+    @include type-style('body-01');
     @include focus-outline('reset');
 
     width: 100%;
@@ -47,7 +47,7 @@
 
   .#{$prefix}--text-area::placeholder {
     @include placeholder-colors;
-    @include type-style('body-long-01');
+    @include type-style('body-01');
   }
 
   // V11: Possibly deprecate

package/scss/components/text-input/_text-input.scss

@@ -32,7 +32,7 @@
 @mixin text-input {
   .#{$prefix}--text-input {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     width: 100%;
@@ -96,15 +96,19 @@
     width: 100%;
   }
 
-  .#{$prefix}--text-input__invalid-icon {
+  .#{$prefix}--text-input__invalid-icon,
+  .#{$prefix}--text-input__readonly-icon {
     position: absolute;
     // top/transform used to center invalid icon in IE11
     top: 50%;
     right: $spacing-05;
-    fill: $support-error;
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--text-input__invalid-icon {
+    fill: $support-error;
+  }
+
   .#{$prefix}--text-input__invalid-icon--warning {
     fill: $support-warning;
   }
@@ -175,7 +179,8 @@
   }
 
   .#{$prefix}--text-input--invalid,
-  .#{$prefix}--text-input--warning {
+  .#{$prefix}--text-input--warning,
+  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
     padding-right: $spacing-08;
   }
 
@@ -381,6 +386,15 @@
     flex-direction: column;
   }
 
+  //-----------------------------
+  // Readonly
+  //-----------------------------
+
+  .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--readonly,
+  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
+    background: transparent;
+  }
+
   // Windows HCM fix
   .#{$prefix}--text-input--password__visibility,
     // TODO: remove selector above

package/scss/components/tile/_tile.scss

@@ -40,7 +40,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--tile--light {
-    background-color: $layer-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--tile--clickable,
@@ -75,7 +75,7 @@
 
   .#{$prefix}--tile--clickable {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     color: $text-primary;
     text-decoration: none;

package/scss/components/toggle/_toggle.scss

@@ -85,7 +85,7 @@
     }
 
     .#{$prefix}--toggle__text {
-      @include type-style('body-long-01');
+      @include type-style('body-01');
 
       color: $text-primary;
     }
@@ -232,7 +232,7 @@
 
     .#{$prefix}--toggle__text--left,
     .#{$prefix}--toggle__text--right {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       position: relative;
       margin-left: $spacing-03;
@@ -456,7 +456,7 @@
 
     .#{$prefix}--toggle__text--off,
     .#{$prefix}--toggle__text--on {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       position: absolute;
       // top offset needed to vertically center absolutely positioned flex child in IE11

package/scss/components/toggletip/_toggletip.scss

@@ -64,7 +64,7 @@
       'link-focus-text-color',
       theme.$focus-inverse
     );
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     display: grid;
     max-width: 18rem;

package/scss/components/tooltip/_tooltip.scss

@@ -30,7 +30,7 @@ $tooltip-padding-inline: custom-property.get-var(
   }
 
   .#{$prefix}--tooltip-content {
-    @include type.type-style('body-long-01');
+    @include type.type-style('body-01');
 
     max-width: convert.rem(288px);
     padding: $tooltip-padding-block $tooltip-padding-inline;
@@ -60,7 +60,7 @@ $tooltip-padding-inline: custom-property.get-var(
   }
 
   .#{$prefix}--definition-tooltip {
-    @include type.type-style('body-long-01');
+    @include type.type-style('body-01');
 
     max-width: convert.rem(176px);
     padding: convert.rem(8px) convert.rem(16px);
@@ -85,6 +85,6 @@ $tooltip-padding-inline: custom-property.get-var(
   }
 
   .#{$prefix}--icon-tooltip .#{$prefix}--tooltip-content {
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
   }
 }

package/scss/components/treeview/_treeview.scss

@@ -66,7 +66,7 @@
     }
 
     .#{$prefix}--tree-node__label {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       display: flex;
       min-height: rem(32px);

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

@@ -39,7 +39,7 @@
     display: inline-flex;
     width: mini-units(6);
     height: mini-units(6);
-    border: rem(2px) solid transparent;
+    border: rem(1px) solid transparent;
     transition: background-color $duration-fast-02,
       border-color $duration-fast-02;
   }
@@ -124,7 +124,7 @@
   // Header - Name
   //--------------------------------------------------------------------------
   a.#{$prefix}--header__name {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: flex;
     height: 100%;
@@ -324,7 +324,7 @@
     width: mini-units(25);
     flex-direction: column;
     background-color: $layer;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 50%);
     transform: translateY(100%);
   }
 

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

@@ -81,8 +81,8 @@
     height: 0;
     background-color: transparent;
     opacity: 0;
-    transition: opacity $transition--expansion $standard-easing,
-      background-color $transition--expansion $standard-easing;
+    transition: opacity $transition-expansion $standard-easing,
+      background-color $transition-expansion $standard-easing;
   }
 
   .#{$prefix}--side-nav__overlay-active {
@@ -91,8 +91,8 @@
       height: 100vh;
       background-color: $overlay;
       opacity: 1;
-      transition: opacity $transition--expansion $standard-easing,
-        background-color $transition--expansion $standard-easing;
+      transition: opacity $transition-expansion $standard-easing,
+        background-color $transition-expansion $standard-easing;
     }
   }
 
@@ -192,7 +192,7 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__submenu {
     @include button-reset.reset($width: true);
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
     @include focus-outline('reset');
 
     display: flex;
@@ -254,6 +254,7 @@
     position: relative;
     background-color: $background-selected;
     color: $text-primary;
+
     &::before {
       position: absolute;
       top: 0;
@@ -317,7 +318,7 @@
     .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu {
     @include focus-outline('reset');
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     position: relative;
     display: flex;

package/scss/components/ui-shell/switcher/_switcher.scss

@@ -45,7 +45,7 @@
   }
 
   .#{$prefix}--switcher__item-link {
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     display: block;
     height: $spacing-07;