@carbon/styles 0.15.0 → 0.16.0

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.0",
+  "version": "0.16.0",
   "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.0",
+    "@carbon/type": "^10.43.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
     "@carbon/test-utils": "^10.21.0",
     "css": "^3.0.0"
   },
-  "gitHead": "aadefba8b1097fad433fe63c9c896b1a3e1b589a"
+  "gitHead": "05b57e9181903cb87173d48a0635691a2e942e30"
 }

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/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 {