@carbon/styles 0.15.1 → 0.16.1

package/docs/sass.md

@@ -122,28 +122,45 @@ to `false`:
 
 ## Grid
 
-| Import                             | Filepath          |
-| :--------------------------------- | :---------------- |
-| `@use '@carbon/styles/scss/grid';` | `scss/_grid.scss` |
+| Import                                     | Filepath                  |
+| :----------------------------------------- | :------------------------ |
+| `@use '@carbon/styles/scss/grid';`         | `scss/grid/_index.scss`   |
+| `@use '@carbon/styles/scss/grid/flexbox';` | `scss/grid/_flexbox.scss` |
 
 ### Using the grid
 
 This package `@forward`s the styles defined in the
 [`@carbon/grid`](https://github.com/carbon-design-system/carbon/tree/main/packages/grid)
-package. The full source for Carbon grid styles can be found there alongside
-more comprehensive documentation on package contents, configuration, and usage.
+package. For full documentation, visit the
+[Sass Documentation](../../grid/docs/sass.md) for the package.
 
 To use the grid via `@carbon/styles`, it must be brought in directly or the grid
 specific style sheet must be imported:
 
 ```scss
-/* All the grid styles are included through this central entrypoint */
+// All the grid styles are included through this central entrypoint
 @use '@carbon/styles';
 
-/* Alternatively, the grid styles can be brought in on their own */
+// Alternatively, the grid styles can be brought in on their own
 @use '@carbon/styles/scss/grid';
 ```
 
+By default, the emitted grid will be a CSS Grid based implementation. If you
+prefer to use flexbox version, you can configure the package by writing the
+following:
+
+```scss
+@use '@carbon/styles' with (
+  $use-flexbox-grid: true,
+);
+```
+
+Or you can import the flexbox grid directly:
+
+```scss
+@use '@carbon/styles/scss/grid/flexbox';
+```
+
 ### Classes provided
 
 In either case, you will then have access to the grid classes and mixins
@@ -172,22 +189,6 @@ prefix:
 </div>
 ```
 
-### Grid Mixins
-
-In the event that you'd like to configure your own classes for portions of the
-grid, there are a few mixins that can be used.
-
-- `css-grid()` provides the base grid definition
-- `subgrid()` provides the subgrid definition
-- `carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios)` generates the
-  CSS classname utilities for the aspect ratios
-
-```scss
-.custom-grid-class {
-  @include css-grid();
-}
-```
-
 ## Motion
 
 The motion package provides helper functions, mixins, and duration tokens to add

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.15.1",
+  "version": "0.16.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,16 +22,16 @@
   "dependencies": {
     "@carbon/colors": "^10.37.0",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^10.42.0",
+    "@carbon/grid": "^10.43.0",
     "@carbon/layout": "^10.37.0",
     "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.52.0",
-    "@carbon/type": "^10.42.0",
+    "@carbon/themes": "^10.53.1",
+    "@carbon/type": "^10.43.1",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
     "@carbon/test-utils": "^10.21.0",
     "css": "^3.0.0"
   },
-  "gitHead": "1069a16ffb50905034b9ef3640fd4d098a37437f"
+  "gitHead": "e2c445f242cdd201c73e55dc10a998f3dec73ec4"
 }

package/scss/_config.scss

@@ -54,3 +54,8 @@ $prefix: 'cds' !default;
 /// @access public
 /// @group @carbon/grid
 $flex-grid-columns: 16 !default;
+
+/// Specify if the default grid type should be the flexbox grid
+/// @type Boolean
+/// @group config
+$use-flexbox-grid: false !default;

package/scss/_reset.scss

@@ -6,7 +6,7 @@
 //
 
 @use 'config';
-@use 'type';
+@use 'type/reset' as type;
 
 @mixin reset {
   /// http://meyerweb.com/eric/tools/css/reset/

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -97,6 +97,10 @@
       content: '';
       opacity: 0;
       transition: opacity $duration-fast-01 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

package/scss/components/code-snippet/_code-snippet.scss

@@ -68,17 +68,17 @@ $copy-btn-feedback: $background-inverse !default;
     display: inline;
     padding: 0;
     border: 2px solid transparent;
-    background-color: $field;
+    background-color: $layer;
     border-radius: 4px;
     color: $text-primary;
     cursor: pointer;
 
     &:hover {
-      background-color: $layer-accent;
+      background-color: $layer-hover;
     }
 
     &:active {
-      background-color: $copy-active;
+      background-color: $layer-active;
     }
 
     &:focus {
@@ -131,13 +131,13 @@ $copy-btn-feedback: $background-inverse !default;
     display: inline-block;
 
     &:hover {
-      background-color: $field;
+      background-color: $layer;
       cursor: auto;
     }
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy:hover {
-    background-color: $field-02;
+    background-color: $layer-hover;
     cursor: auto;
   }
 
@@ -241,7 +241,7 @@ $copy-btn-feedback: $background-inverse !default;
     width: rem(16px);
     height: 100%;
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($field, 0), $field);
+    background-image: linear-gradient(to right, rgba($layer, 0), $layer);
     content: '';
   }
 
@@ -271,7 +271,7 @@ $copy-btn-feedback: $background-inverse !default;
     justify-content: center;
     padding: 0;
     border: none;
-    background-color: $field;
+    background-color: $layer;
     cursor: pointer;
     outline: none;
 
@@ -290,7 +290,7 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet-button:hover {
-    background: $field-hover;
+    background: $layer-hover;
   }
 
   .#{$prefix}--snippet-button:active {
@@ -340,7 +340,7 @@ $copy-btn-feedback: $background-inverse !default;
 
     padding: $spacing-03 $spacing-05;
     border: 0;
-    background-color: $field;
+    background-color: $layer;
     color: $text-primary;
   }
 
@@ -361,12 +361,12 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet-btn--expand:hover {
-    background: $field-hover;
+    background: $layer-hover;
     color: $text-primary;
   }
 
   .#{$prefix}--snippet-btn--expand:active {
-    background-color: $copy-active;
+    background-color: $layer-active;
   }
 
   .#{$prefix}--snippet-btn--expand:focus {
@@ -387,7 +387,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light .#{$prefix}--snippet-button,
   .#{$prefix}--snippet--light .#{$prefix}--btn.#{$prefix}--snippet-btn--expand,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
@@ -395,7 +395,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
-    background-color: $layer-hover-02;
+    background-color: $layer-hover;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:active,
@@ -403,7 +403,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:active,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn:active {
-    background-color: $layer-active-02;
+    background-color: $layer-active;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
@@ -411,7 +411,7 @@ $copy-btn-feedback: $background-inverse !default;
     .#{$prefix}--snippet-container
     pre::after {
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($field-02, 0), $field-02);
+    background-image: linear-gradient(to right, rgba($layer, 0), $layer);
   }
 
   // Skeleton State
@@ -469,13 +469,13 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet__overflow-indicator--left {
     order: 0;
     margin-right: -$spacing-05;
-    background-image: linear-gradient(to left, transparent, $field);
+    background-image: linear-gradient(to left, transparent, $layer);
   }
 
   .#{$prefix}--snippet__overflow-indicator--right {
     order: 2;
     margin-left: -$spacing-05;
-    background-image: linear-gradient(to right, transparent, $field);
+    background-image: linear-gradient(to right, transparent, $layer);
   }
 
   .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right,
@@ -507,11 +507,11 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--left {
-    background-image: linear-gradient(to left, transparent, $field-02);
+    background-image: linear-gradient(to left, transparent, $layer);
   }
 
   .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--right {
-    background-image: linear-gradient(to right, transparent, $field-02);
+    background-image: linear-gradient(to right, transparent, $layer);
   }
 
   // Safari-only media query
@@ -520,11 +520,11 @@ $copy-btn-feedback: $background-inverse !default;
   @media not all and (min-resolution: 0.001dpcm) {
     @supports (-webkit-appearance: none) and (stroke-color: transparent) {
       .#{$prefix}--snippet__overflow-indicator--left {
-        background-image: linear-gradient(to left, rgba($field, 0), $field);
+        background-image: linear-gradient(to left, rgba($layer, 0), $layer);
       }
 
       .#{$prefix}--snippet__overflow-indicator--right {
-        background-image: linear-gradient(to right, rgba($field, 0), $field);
+        background-image: linear-gradient(to right, rgba($layer, 0), $layer);
       }
     }
   }

package/scss/components/code-snippet/_mixins.scss

@@ -7,6 +7,7 @@
 
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/convert' as *;
 
 /// Code snippet base styles
 /// @access private
@@ -17,5 +18,5 @@
   position: relative;
   width: 100%;
   max-width: rem(768px);
-  background-color: $field;
+  background-color: $layer;
 }

package/scss/components/combo-box/_combo-box.scss

@@ -19,7 +19,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--combo-box.#{$prefix}--list-box--light:hover {
-    background-color: $field-02;
+    background-color: $field;
   }
 
   .#{$prefix}--combo-box .#{$prefix}--text-input::-ms-clear {

package/scss/components/data-table/_data-table.scss

@@ -100,17 +100,30 @@
     color: $text-primary;
   }
 
-  .#{$prefix}--data-table tbody tr:hover td .#{$prefix}--link,
-  .#{$prefix}--data-table tbody tr:hover th .#{$prefix}--link {
+  .#{$prefix}--data-table tr:hover .#{$prefix}--link {
     color: $link-secondary;
   }
 
+  .#{$prefix}--data-table tr:hover .#{$prefix}--link--disabled {
+    color: $text-disabled;
+  }
+
   .#{$prefix}--data-table th,
   .#{$prefix}--data-table td {
     text-align: left;
     vertical-align: middle;
   }
 
+  .#{$prefix}--data-table th[align='right'],
+  .#{$prefix}--data-table td[align='right'] {
+    text-align: right;
+  }
+
+  .#{$prefix}--data-table th[align='center'],
+  .#{$prefix}--data-table td[align='center'] {
+    text-align: center;
+  }
+
   .#{$prefix}--data-table th {
     padding-right: $spacing-05;
     padding-left: $spacing-05;
@@ -238,7 +251,8 @@
     }
   }
 
-  .#{$prefix}--data-table--selected .#{$prefix}--link {
+  .#{$prefix}--data-table--selected
+    .#{$prefix}--link:not(.#{$prefix}--link--disabled) {
     color: $link-secondary;
   }
 
@@ -403,10 +417,6 @@
     padding-top: $spacing-05;
   }
 
-  .#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
-    background: $data-table-column-hover;
-  }
-
   //----------------------------------------------------------------------------
   // Radio
   //----------------------------------------------------------------------------
@@ -725,6 +735,10 @@
     width: auto;
   }
 
+  .#{$prefix}--data-table-container--static {
+    width: fit-content;
+  }
+
   // -------------
   // Sticky header
   // -------------

package/scss/components/data-table/action/_data-table-action.scss

@@ -26,9 +26,8 @@
     // Need for batch actions
     position: relative;
     display: flex;
-    overflow: hidden;
     width: 100%;
-    height: $spacing-09;
+    min-height: $spacing-09;
     background-color: $layer;
   }
 
@@ -375,17 +374,14 @@
   //-------------------------------------------------
   .#{$prefix}--batch-actions {
     position: absolute;
-    top: 0;
+    right: 0;
+    bottom: 0;
     left: 0;
     display: flex;
-    width: 100%;
-    height: 100%;
     align-items: center;
-    padding-right: $spacing-06;
-    padding-left: $spacing-06;
+    justify-content: space-between;
     background-color: $background-brand;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-    overflow-x: auto;
     pointer-events: none;
     transform: translate3d(0, 48px, 0);
     transition: transform $duration-fast-02 motion(standard, productive),
@@ -399,6 +395,7 @@
   }
 
   .#{$prefix}--batch-actions--active {
+    overflow: auto hidden;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     pointer-events: all;
     transform: translate3d(0, 0, 0);
@@ -406,15 +403,14 @@
 
   //btns container
   .#{$prefix}--action-list {
-    position: absolute;
-    right: 0;
     display: flex;
+    align-items: center;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn {
-    min-width: 0;
     padding: $button-padding-ghost;
     color: $text-on-color;
+    white-space: nowrap;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn:disabled {
@@ -479,22 +475,24 @@
     transition: opacity $transition-base $standard-easing;
   }
 
-  // cancel btn
-  .#{$prefix}--batch-summary__cancel {
-    position: relative;
-    padding-right: $spacing-05;
-  }
-
   // items selected text
   .#{$prefix}--batch-summary {
-    position: absolute;
+    position: sticky;
+    z-index: 100000;
     left: 0;
     display: flex;
+    min-height: 3rem;
     align-items: center;
-    margin-left: $spacing-05;
+    padding: 0 $spacing-05;
+    background-color: $background-brand;
+
     color: $text-on-color;
   }
 
+  .#{$prefix}--batch-summary__scroll {
+    box-shadow: 0.5px 0 0.2px $link-primary-hover;
+  }
+
   .#{$prefix}--batch-summary__para {
     @include type-style('body-compact-01');
   }

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -45,6 +45,7 @@
     color: $text-primary;
     font: inherit;
     line-height: 1;
+    text-align: left;
     transition: background-color $duration-fast-01 motion(entrance, productive),
       outline $duration-fast-01 motion(entrance, productive);
   }

package/scss/components/date-picker/_date-picker.scss

@@ -125,8 +125,6 @@
   }
 
   // Size variant styles
-  // TODO V11: Remove xl selector
-  .#{$prefix}--date-picker__input--xl,
   .#{$prefix}--date-picker__input--lg {
     height: rem(48px);
   }

package/scss/components/date-picker/_flatpickr.scss

@@ -138,6 +138,10 @@
 
   .flatpickr-calendar.animate.open {
     animation: fp-fade-in-down $duration-fast-02 motion(entrance, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 
   .flatpickr-calendar.inline {
@@ -230,8 +234,12 @@
     // Windows HCM fix
     @include high-contrast-mode('icon-fill');
 
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
     &:hover {
-      background-color: $background-hover;
+      background-color: $layer-hover;
     }
   }
 
@@ -261,7 +269,7 @@
     margin-left: $spacing-02;
 
     &:hover {
-      background-color: $background-hover;
+      background-color: $layer-hover;
     }
   }
 
@@ -313,7 +321,7 @@
     border-bottom: 0;
 
     &::after {
-      border-bottom: rem(4px) solid $border-subtle;
+      border-bottom: rem(4px) solid $icon-primary;
     }
   }
 
@@ -321,7 +329,7 @@
     top: rem(11px);
 
     &::after {
-      border-top: rem(4px) solid $border-subtle;
+      border-top: rem(4px) solid $icon-primary;
     }
   }
 
@@ -437,7 +445,7 @@
     transition: all $duration-fast-01 motion(standard, productive);
 
     &:hover {
-      background: $background-hover;
+      background: $layer-hover;
     }
 
     &:focus {

package/scss/components/dropdown/_dropdown.scss

@@ -132,10 +132,10 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--dropdown--light {
-    background-color: $field-02;
+    background-color: $field;
 
     &:hover {
-      background-color: $layer-hover-02;
+      background-color: $field-hover;
     }
   }
 
@@ -202,7 +202,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--dropdown--light .#{$prefix}--dropdown-list {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--dropdown:not(.#{$prefix}--dropdown--open)
@@ -354,7 +354,7 @@
 
     // V11: Possibly deprecate
     &.#{$prefix}--dropdown--light:hover {
-      background-color: $field-02;
+      background-color: $field;
     }
   }
 
@@ -377,7 +377,7 @@
     transition: background $duration-fast-01 motion(entrance, productive);
 
     &:hover {
-      background-color: $field-hover;
+      background-color: $layer-hover;
     }
 
     &.#{$prefix}--dropdown--disabled {
@@ -433,11 +433,11 @@
 
   .#{$prefix}--dropdown--show-selected .#{$prefix}--dropdown--selected {
     display: block;
-    background-color: $layer-hover;
+    background-color: $layer-selected;
     color: $text-primary;
 
     &:hover {
-      background-color: $layer-selected;
+      background-color: $layer-selected-hover;
     }
 
     .#{$prefix}--dropdown-link {

package/scss/components/file-uploader/_file-uploader.scss

@@ -10,6 +10,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
@@ -170,8 +171,6 @@
     }
   }
 
-  // V11: Remove --field
-  .#{$prefix}--file__selected-file--field,
   .#{$prefix}--file__selected-file--md {
     min-height: rem(40px);
     gap: $spacing-03 $spacing-05;
@@ -202,8 +201,6 @@
     padding: $spacing-02 0;
   }
 
-  // V11: Remove --field
-  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field,
   .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md {
     padding: $spacing-03 0;
   }
@@ -218,9 +215,6 @@
     padding-top: rem(7px);
   }
 
-  // V11: Remove --field
-  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field
-    .#{$prefix}--form-requirement,
   .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md
     .#{$prefix}--form-requirement {
     padding-top: rem(11px);
@@ -330,6 +324,7 @@
     justify-content: space-between;
     padding: $spacing-05;
     border: 1px dashed $border-strong;
+    @include type-style('body-compact-01');
   }
 
   .#{$prefix}--file__drop-container--drag-over {

package/scss/components/form/_form.scss

@@ -21,16 +21,6 @@ $input-label-weight: 400 !default;
 @mixin form {
   .#{$prefix}--fieldset {
     @include reset;
-
-    @if not enabled('enable-v11-release') {
-      margin-bottom: $spacing-07;
-    }
-  }
-
-  @if not enabled('enable-v11-release') {
-    .#{$prefix}--fieldset--no-margin {
-      margin-bottom: 0;
-    }
   }
 
   .#{$prefix}--form-item {
@@ -57,10 +47,8 @@ $input-label-weight: 400 !default;
     vertical-align: baseline;
   }
 
-  @if enabled('enable-v11-release') {
-    .#{$prefix}--label--no-margin {
-      margin-bottom: 0;
-    }
+  .#{$prefix}--label--no-margin {
+    margin-bottom: 0;
   }
 
   .#{$prefix}--label .#{$prefix}--tooltip__trigger {

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

@@ -65,6 +65,10 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
     }
 
+    .#{$prefix}--tabs__nav {
+      display: flex;
+    }
+
     //-----------------------------
     // Overflow Nav Buttons
     //-----------------------------

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();
+}

package/scss/{_type.scss → type/_index.scss}

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'config';
+@use '../config';
 @forward '@carbon/type' show
   // Mixins
   reset,

package/scss/type/_reset.scss

@@ -0,0 +1,8 @@
+//
+// 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 '@carbon/type/scss/modules/reset';

package/scss/utilities/_tooltip.scss

@@ -127,6 +127,10 @@
   &::before,
   &::after {
     transition: opacity $duration-fast-01 motion(standard, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &.#{$prefix}--tooltip--a11y::before,