@carbon/styles 0.15.0 → 0.16.0

package/scss/components/list-box/_list-box.scss

@@ -156,13 +156,13 @@ $list-box-menu-width: rem(300px);
     background-color: $field;
 
     &:hover {
-      background-color: $layer-hover;
+      background-color: $field-hover;
     }
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
-    background: $field;
+    background: $layer;
   }
 
   // V11: Possibly deprecate
@@ -237,7 +237,7 @@ $list-box-menu-width: rem(300px);
     background-color: transparent;
 
     &:hover {
-      background-color: $field-hover;
+      background-color: $layer-hover;
     }
   }
 
@@ -477,7 +477,7 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection--multi {
-    @include tag-theme($text-disabled, $field);
+    @include tag-theme($text-disabled, $layer);
 
     > svg {
       fill: $icon-disabled;
@@ -701,7 +701,7 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item--highlighted {
     border-color: transparent;
-    background-color: $layer-hover;
+    background-color: $layer-selected;
     color: $text-primary;
   }
 
@@ -730,8 +730,7 @@ $list-box-menu-width: rem(300px);
     background-color: $layer-selected;
   }
 
-  .#{$prefix}--list-box__menu-item--active:hover,
-  .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted {
+  .#{$prefix}--list-box__menu-item--active:hover {
     border-bottom-color: $layer-selected-hover;
     background-color: $layer-selected-hover;
   }

package/scss/components/loading/_animation.scss

@@ -20,6 +20,10 @@
     animation-duration: 10ms;
     animation-name: init-stroke;
     animation-timing-function: motion.$standard-easing;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }
 
@@ -35,5 +39,9 @@
     animation-fill-mode: forwards;
     animation-name: stroke-end;
     animation-timing-function: motion.$ease-out;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }

package/scss/components/modal/_modal.scss

@@ -45,6 +45,10 @@
       transition: opacity $duration-moderate-02 motion(entrance, expressive),
         visibility 0ms linear;
       visibility: inherit;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     // V11: Question for design: do we have an updated tokens for fields that exist on `layer`?

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

@@ -79,8 +79,6 @@
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl.#{$prefix}--number input[type='number'],
   .#{$prefix}--number--lg.#{$prefix}--number input[type='number'] {
     padding-right: rem(144px);
   }
@@ -307,8 +305,6 @@
     fill: $support-error;
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__invalid,
   .#{$prefix}--number--lg .#{$prefix}--number__invalid {
     right: rem(112px);
   }
@@ -322,10 +318,6 @@
     right: rem(80px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl
-    .#{$prefix}--number__invalid
-    + .#{$prefix}--number__rule-divider,
   .#{$prefix}--number--lg
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__rule-divider {
@@ -391,20 +383,14 @@
   }
 
   // Size Variant styles
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl input[type='number'],
   .#{$prefix}--number--lg input[type='number'] {
     height: rem(48px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__controls,
   .#{$prefix}--number--lg .#{$prefix}--number__controls {
     width: rem(96px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__control-btn,
   .#{$prefix}--number--lg .#{$prefix}--number__control-btn {
     width: rem(48px);
 

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -52,8 +52,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu--xl,
   .#{$prefix}--overflow-menu--lg {
     width: rem(48px);
     height: rem(48px);
@@ -111,6 +109,10 @@
       content: '';
       transition: background-color $duration-fast-02
         motion(entrance, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 
@@ -170,8 +172,6 @@
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu-options--xl.#{$prefix}--overflow-menu-options,
   .#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options {
     &[data-floating-menu-direction='bottom']::after,
     &[data-floating-menu-direction='top']::after {
@@ -221,9 +221,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu-options--xl
-    .#{$prefix}--overflow-menu-options__option,
   .#{$prefix}--overflow-menu-options--lg
     .#{$prefix}--overflow-menu-options__option {
     height: rem(48px);

package/scss/components/pagination/_pagination.scss

@@ -182,6 +182,10 @@
 
   span.#{$prefix}--pagination__text {
     margin-left: $spacing-05;
+    color: $text-primary;
+  }
+
+  span.#{$prefix}--pagination__text.#{$prefix}--pagination__items-count {
     color: $text-secondary;
   }
 

package/scss/components/pagination-nav/_mixins.scss

@@ -22,10 +22,14 @@
       display: block;
       width: 0;
       height: $spacing-02;
-      background-color: $background-brand;
+      background-color: $border-interactive;
       content: '';
       opacity: 0;
       transition: width $duration-fast-02 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -32,8 +32,8 @@
 /// @param {Number} $select-icon-top-position [$spacing-05]
 /// @param {Number} $select-icon-left-position [$spacing-05]
 @mixin pagination-nav(
-  $color: $text-secondary,
-  $text-color-active: $text-secondary,
+  $color: $text-primary,
+  $text-color-active: $text-primary,
   $background-color-hover: $background-hover,
   $background-color-active: initial,
   $font-weight: 400,
@@ -78,7 +78,7 @@
     min-width: $button-min-width;
     padding: $button-padding;
     border-radius: 0;
-    color: $text-secondary;
+    color: $text-primary;
     font-weight: $font-weight;
     line-height: 1;
     outline: 0;
@@ -90,7 +90,7 @@
 
     &:hover {
       background-color: $background-color-hover;
-      color: $text-secondary;
+      color: $text-primary;
     }
 
     &:focus {

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

@@ -45,7 +45,7 @@
     height: 100%;
     background-color: $interactive;
     transform: scaleX(0);
-    transform-origin: 0 50%;
+    transform-origin: 0 center #{'/*rtl:100% center*/'};
     transition: transform $duration-fast-02 motion(standard, productive);
   }
 

package/scss/components/radio-button/_radio-button.scss

@@ -123,7 +123,7 @@ $radio-border-width: 1px !default;
   }
 
   .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
-    color: $button-disabled;
+    color: $text-disabled;
     cursor: not-allowed;
   }
 
@@ -133,10 +133,11 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button:disabled:checked
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    border-color: $border-disabled;
+    // Disabled radio button, checkbox fix #10913
+    border-color: $icon-disabled;
 
     &::before {
-      background-color: $button-disabled;
+      background-color: $text-disabled;
     }
   }
 

package/scss/components/search/_search.scss

@@ -151,6 +151,10 @@
       content: '';
       transition: background-color $duration-fast-02
         motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &:hover {

package/scss/components/select/_select.scss

@@ -62,7 +62,7 @@
     transition: outline $duration-fast-01 motion(standard, productive);
 
     &:hover {
-      background-color: $background-hover;
+      background-color: $field-hover;
     }
 
     // Hide default select arrow in IE10+
@@ -89,7 +89,7 @@
 
     &:disabled,
     &:hover:disabled {
-      border-bottom-color: $border-disabled;
+      border-bottom-color: transparent;
       background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
@@ -101,8 +101,6 @@
     max-height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--select-input--xl,
   .#{$prefix}--select-input--lg {
     height: rem(48px);
     max-height: rem(48px);
@@ -115,7 +113,7 @@
 
   .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input,
   .#{$prefix}--select--warning .#{$prefix}--select-input {
-    padding-right: carbon--mini-units(9);
+    padding-right: $spacing-10;
   }
 
   .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
@@ -123,15 +121,15 @@
   }
 
   .#{$prefix}--select--light .#{$prefix}--select-input {
-    background-color: $field-02;
+    background-color: $field;
 
     &:hover {
-      background-color: $background-hover;
+      background-color: $field-hover;
     }
 
     &:disabled,
     &:hover:disabled {
-      background-color: $field-02;
+      background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
     }
@@ -178,7 +176,7 @@
   optgroup.#{$prefix}--select-optgroup,
   .#{$prefix}--select-option {
     // For the options to show in IE11
-    background-color: $background-hover;
+    background-color: $layer-hover;
     color: $text-primary;
 
     &:disabled {

package/scss/components/tabs/_tabs.scss

@@ -40,69 +40,153 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     @include reset;
     @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;
       }
     }
 
+    .#{$prefix}--tabs__nav {
+      display: flex;
+    }
+
     //-----------------------------
     // 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--contained
+      .#{$prefix}--tab--overflow-nav-button--next::before {
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
+    }
+
+    .#{$prefix}--tab--overflow-nav-button--previous {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
     }
 
-    .#{$prefix}--tabs__overflow-indicator--left {
-      margin-right: -$spacing-03;
-      background-image: linear-gradient(to left, transparent, $background);
+    .#{$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__overflow-indicator--right {
-      margin-left: -$spacing-03;
-      background-image: linear-gradient(to right, transparent, $background);
+    &.#{$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 +230,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 +237,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

package/scss/components/tile/_tile.scss

@@ -144,6 +144,10 @@
       transform-origin: center;
       transition: $duration-fast-02 motion(standard, productive);
 
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
       // Windows, Firefox HCM Fix
       @media screen and (-ms-high-contrast: active),
         screen and (prefers-contrast) {

package/scss/components/toggle/_toggle.scss

@@ -64,6 +64,10 @@
         border-radius: 50%;
         content: '';
         transition: transform $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -199,6 +203,10 @@
         transition: box-shadow $duration-fast-01 motion(exit, productive),
           background-color $duration-fast-01 motion(exit, productive);
         will-change: box-shadow;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       // Toggle circle
@@ -215,6 +223,10 @@
         content: '';
         cursor: pointer;
         transition: transform $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -313,6 +325,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -432,6 +448,10 @@
         transition: box-shadow $duration-fast-01 motion(exit, productive),
           background-color $duration-fast-01 motion(exit, productive);
         will-change: box-shadow;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       // Toggle circle
@@ -531,6 +551,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 

package/scss/{_grid.scss → grid/_config.scss}

@@ -5,18 +5,14 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'config';
-
+@use '../config';
 @forward '@carbon/grid'
   show css-grid,
-       subgrid,
        flex-grid,
        $grid-gutter,
        $grid-gutter-condensed,
        $grid-breakpoints
   with (
-    $prefix: config.$prefix,
-    $flex-grid-columns: config.$flex-grid-columns,
+    $prefix: config.$prefix !default,
+    $flex-grid-columns: config.$flex-grid-columns !default
   );
-
-@use '@carbon/grid';

package/scss/grid/_flexbox.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'config';
+@use '@carbon/grid';
+
+@include grid.flex-grid();

package/scss/grid/_index.scss

@@ -0,0 +1,16 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'config';
+@use '@carbon/grid';
+@use '../config';
+
+@if config.$use-flexbox-grid == true {
+  @include grid.flex-grid();
+} @else {
+  @include grid.css-grid();
+}