@carbon/styles 0.7.0 → 0.9.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.33.0",
+    "@carbon/colors": "^10.34.0",
     "@carbon/feature-flags": "^0.6.0",
-    "@carbon/grid": "^10.38.0",
-    "@carbon/layout": "^10.33.0",
-    "@carbon/motion": "^10.25.0",
-    "@carbon/themes": "^10.45.0",
-    "@carbon/type": "^10.37.0",
+    "@carbon/grid": "^10.39.0",
+    "@carbon/layout": "^10.34.0",
+    "@carbon/motion": "^10.26.0",
+    "@carbon/themes": "^10.47.0",
+    "@carbon/type": "^10.38.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.19.0",
+    "@carbon/test-utils": "^10.20.0",
     "css": "^3.0.0"
   },
-  "gitHead": "3c9fdbcc12116759c47605ad562aa4d3be78b9d5"
+  "gitHead": "1836ce1cac8d9a08314b62058a5ed258798901a8"
 }

package/scss/_feature-flags.scss

@@ -5,4 +5,11 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/feature-flags';
+@forward '@carbon/feature-flags' with (
+  $feature-flags: (
+    'enable-css-custom-properties': true,
+    'enable-use-controlled-state-with-value': true,
+    'enable-css-grid': true,
+    'enable-v11-release': true,
+  ) !default
+);

package/scss/_spacing.scss

@@ -7,6 +7,7 @@
 
 @forward '@carbon/layout/scss/modules/spacing'
 show
+  $spacing,
   $spacing-01,
   $spacing-02,
   $spacing-03,

package/scss/_type.scss

@@ -11,6 +11,7 @@
   reset,
   type-style,
   font-family,
+  default-type,
 
   // Variables
   $caption-01,

package/scss/components/_index.scss

@@ -43,6 +43,7 @@
 @use 'select';
 @use 'skeleton-styles';
 @use 'slider';
+@use 'stack';
 @use 'structured-list';
 @use 'tabs';
 @use 'tag';

package/scss/components/button/_button.scss

@@ -525,4 +525,13 @@
   .#{$prefix}--btn:focus {
     @include high-contrast-mode('focus');
   }
+
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
+    .#{$prefix}--btn__icon
+    path:not([data-icon-path]):not([fill='none']),
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
+    @include high-contrast-mode('icon-fill');
+  }
 }

package/scss/components/checkbox/_checkbox.scss

@@ -17,6 +17,7 @@
 @mixin checkbox {
   // Spacing between checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+    position: relative;
     margin-bottom: $spacing-02;
   }
 

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

@@ -8,7 +8,7 @@
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
 @use '../copy-button';
 @use '../../utilities/convert' as *;
@@ -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: $hover-light-ui;
+    background-color: $layer-hover-02;
   }
 
   .#{$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: $active-light-ui;
+    background-color: $layer-active-02;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,

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

@@ -341,6 +341,7 @@
 
   .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
+    width: 2.5rem;
     // spacing between checkbox / chevron and next cell should be 8px / 0.5rem
     padding-right: rem(4px);
     padding-left: 1rem;

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

@@ -8,7 +8,7 @@
 @use '../../../config' as *;
 @use '../../../motion' as *;
 @use '../../../spacing' as *;
-@use '../../../compat/theme' as *;
+@use '../../../theme' as *;
 @use '../../../utilities/button-reset';
 @use '../../../utilities/convert' as *;
 @use '../../../utilities/focus-outline' as *;
@@ -226,7 +226,7 @@
   }
 
   .#{$prefix}--table-expand__svg {
-    fill: $ui-05;
+    fill: $layer-selected-inverse;
     transform: rotate(90deg);
     transition: transform $duration-moderate-01 motion(standard, productive);
   }

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

@@ -8,7 +8,7 @@
 @use '../../colors' as *;
 @use '../../config' as *;
 @use '../../motion' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../spacing' as *;
 @use '../../type' as *;
 @use '../form/form';

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

@@ -5,9 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// @use '../../config' as *;
 @use '../../motion' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../spacing' as *;
 @use '../../type' as *;
 @use '../../utilities/box-shadow' as *;
@@ -15,6 +14,8 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 
+@use '../button/tokens' as *;
+
 @keyframes fpFadeInDown {
   from {
     opacity: 0;
@@ -121,7 +122,7 @@
     padding: $spacing-02 $spacing-02 $spacing-03 $spacing-02;
     border: none;
     margin-top: rem(-2px);
-    background-color: $ui-01;
+    background-color: $layer-01;
 
     &:focus {
       @include focus-outline('border');
@@ -198,7 +199,7 @@
     height: rem(40px);
     align-items: center;
     background-color: transparent;
-    color: $text-01;
+    color: $text-primary;
     line-height: 1;
     text-align: center;
   }
@@ -213,7 +214,7 @@
     justify-content: center;
     padding: 0;
     cursor: pointer;
-    fill: $icon-01;
+    fill: $icon-primary;
     line-height: 16px;
     text-decoration: none;
     transform: scale(1, 1) #{'/*rtl: scale(-1,1)*/'};
@@ -222,19 +223,19 @@
     @include high-contrast-mode('icon-fill');
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
   }
 
   .flatpickr-next-month.disabled svg,
   .flatpickr-prev-month.disabled svg {
     cursor: not-allowed;
-    fill: $ui-05;
+    fill: $icon-disabled;
   }
 
   .flatpickr-next-month.disabled:hover svg,
   .flatpickr-prev-month.disabled:hover svg {
-    fill: $ui-05;
+    fill: $icon-disabled;
   }
 
   .flatpickr-current-month {
@@ -252,7 +253,7 @@
     margin-left: $spacing-02;
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
   }
 
@@ -261,7 +262,7 @@
     width: rem(60px);
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
   }
 
@@ -274,7 +275,7 @@
     // Added in when upgraded to Flatpickr 4.5.5 (#1977)
     -moz-appearance: textfield; /* Firefox */
     background-color: $field-01;
-    color: $text-01;
+    color: $text-primary;
     cursor: default;
     font-family: inherit;
     font-size: inherit;
@@ -293,8 +294,8 @@
 
     &[disabled],
     &[disabled]:hover {
-      background-color: $ui-01;
-      color: $disabled-02;
+      background-color: $layer-01;
+      color: $text-disabled;
       pointer-events: none;
     }
   }
@@ -304,7 +305,7 @@
     border-bottom: 0;
 
     &::after {
-      border-bottom: rem(4px) solid $icon-01;
+      border-bottom: rem(4px) solid $border-subtle;
     }
   }
 
@@ -312,7 +313,7 @@
     top: rem(11px);
 
     &::after {
-      border-top: rem(4px) solid $icon-01;
+      border-top: rem(4px) solid $border-subtle;
     }
   }
 
@@ -338,22 +339,22 @@
     }
 
     &:hover::after {
-      border-top-color: $interactive-01;
-      border-bottom-color: $interactive-01;
+      border-top-color: $button-primary;
+      border-bottom-color: $button-primary;
     }
 
     &:active::after {
-      border-top-color: $interactive-04;
-      border-bottom-color: $interactive-04;
+      border-top-color: $border-interactive;
+      border-bottom-color: $border-interactive;
     }
   }
 
   .numInput[disabled] ~ .arrowUp::after {
-    border-bottom-color: $disabled-02;
+    border-bottom-color: $text-disabled;
   }
 
   .numInput[disabled] ~ .arrowDown::after {
-    border-top-color: $disabled-02;
+    border-top-color: $text-disabled;
   }
 
   .numInputWrapper:hover .arrowUp,
@@ -381,7 +382,7 @@
     @include type-style('body-short-01');
 
     flex: 1;
-    color: $text-01;
+    color: $text-primary;
     cursor: default;
   }
 
@@ -423,29 +424,29 @@
     height: rem(40px);
     align-items: center;
     justify-content: center;
-    color: $text-01;
+    color: $text-primary;
     cursor: pointer;
     transition: all $duration-fast-01 motion(standard, productive);
 
     &:hover {
-      background: $hover-ui;
+      background: $background-hover;
     }
 
     &:focus {
       @include focus-outline('outline');
 
-      outline-color: $interactive-01;
+      outline-color: $button-primary;
     }
   }
 
   .nextMonthDay,
   .prevMonthDay {
-    color: $text-05;
+    color: $text-helper;
   }
 
   .flatpickr-day.today {
     position: relative;
-    color: $link-01;
+    color: $link-primary;
     font-weight: 600;
 
     &::after {
@@ -455,7 +456,7 @@
       display: block;
       width: rem(4px);
       height: rem(4px);
-      background-color: $link-01;
+      background-color: $link-primary;
       content: '';
       transform: translateX(-50%);
     }
@@ -475,18 +476,18 @@
 
   .flatpickr-day.inRange {
     background-color: $highlight;
-    color: $text-01;
+    color: $text-primary;
   }
 
   .flatpickr-day.selected {
-    background-color: $interactive-01;
-    color: $text-04;
+    background-color: $button-primary;
+    color: $text-on-color;
     @include high-contrast-mode('focus') {
       outline-style: dotted;
     }
 
     &:focus {
-      outline: rem(1px) solid $ui-02;
+      outline: rem(1px) solid $layer-02;
       outline-offset: rem(-3px);
     }
   }
@@ -501,23 +502,23 @@
     @include focus-outline('outline');
 
     z-index: 3;
-    background: $ui-01;
+    background: $layer-01;
   }
 
   .flatpickr-day.endRange:hover {
     @include focus-outline('outline');
 
-    background: $ui-01;
-    color: $text-01;
+    background: $layer-01;
+    color: $text-primary;
   }
 
   .flatpickr-day.endRange.inRange.selected {
-    background: $interactive-01;
-    color: $text-04;
+    background: $button-primary;
+    color: $text-on-color;
   }
 
   .flatpickr-day.flatpickr-disabled {
-    color: $disabled-02;
+    color: $text-disabled;
     cursor: not-allowed;
 
     &:hover {

package/scss/components/dropdown/_dropdown.scss

@@ -9,7 +9,7 @@
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/convert' as *;
@@ -139,7 +139,7 @@
     background-color: $field-02;
 
     &:hover {
-      background-color: $hover-light-ui;
+      background-color: $layer-hover-02;
     }
   }
 
@@ -262,13 +262,13 @@
 
     &:hover {
       border-color: transparent;
-      color: $text-01;
+      color: $text-primary;
     }
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--dropdown--light .#{$prefix}--dropdown-link {
-    border-top-color: $decorative-01;
+    border-top-color: $border-subtle-02;
   }
 
   .#{$prefix}--dropdown--sm .#{$prefix}--dropdown-link {

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

@@ -62,7 +62,10 @@
     display: inline-block;
     width: 100%;
     max-width: rem(320px);
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-03;
+    }
+
     color: $link-primary;
     cursor: pointer;
     outline: 2px solid transparent;

package/scss/components/form/_form.scss

@@ -22,11 +22,15 @@ $input-label-weight: 400 !default;
   .#{$prefix}--fieldset {
     @include reset;
 
-    margin-bottom: $spacing-07;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-07;
+    }
   }
 
-  .#{$prefix}--fieldset--no-margin {
-    margin-bottom: 0;
+  @if not enabled('enable-v11-release') {
+    .#{$prefix}--fieldset--no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .#{$prefix}--form-item {
@@ -46,7 +50,10 @@ $input-label-weight: 400 !default;
     @include type-style('label-01');
 
     display: inline-block;
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-03;
+    }
+
     color: $text-secondary;
     font-weight: $input-label-weight;
     line-height: 1rem;
@@ -129,8 +136,10 @@ $input-label-weight: 400 !default;
     display: block;
   }
 
-  .#{$prefix}--form--fluid .#{$prefix}--fieldset {
-    margin: 0;
+  @if not enabled('enable-v11-release') {
+    .#{$prefix}--form--fluid .#{$prefix}--fieldset {
+      margin: 0;
+    }
   }
 
   .#{$prefix}--form--fluid input[data-invalid] {

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

@@ -11,7 +11,7 @@
 @use '../tag/mixins' as *;
 @use '../../config' as *;
 @use '../../colors' as *;
-@use '../../compat/theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
@@ -158,7 +158,7 @@ $list-box-menu-width: rem(300px);
     background-color: $field-02;
 
     &:hover {
-      background-color: $hover-light-ui;
+      background-color: $layer-hover-02;
     }
   }
 
@@ -169,7 +169,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $decorative-01;
+    border-top-color: $border-subtle-02;
   }
 
   .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
@@ -561,7 +561,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
-    background-color: $hover-light-ui;
+    background-color: $layer-hover-02;
   }
 
   .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
@@ -668,6 +668,36 @@ $list-box-menu-width: rem(300px);
     color: $text-disabled;
   }
 
+  .#{$prefix}--list-box__menu-item[disabled],
+  .#{$prefix}--list-box__menu-item[disabled] *,
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item[disabled]:hover {
+    color: $text-disabled;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]:hover {
+    background-color: revert;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--checkbox-label::before {
+    border-color: $text-disabled;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle;
+  }
+
   .#{$prefix}--list-box.#{$prefix}--list-box--inline
     .#{$prefix}--list-box__menu-item__option {
     margin: 0 $spacing-03;

package/scss/components/notification/_actionable-notification.scss

@@ -36,8 +36,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $spacing-05;
-    margin-bottom: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-05;
+    }
+
     color: $text-inverse;
 
     @include breakpoint(md) {

package/scss/components/notification/_inline-notification.scss

@@ -8,7 +8,7 @@
 @use '../../breakpoint' as *;
 @use '../../colors' as *;
 @use '../../config' as *;
-@use '../../feature-flags' as *;
+@use '../../feature-flags';
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -34,8 +34,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $spacing-05;
-    margin-bottom: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-05;
+    }
+
     color: $text-inverse;
 
     @include breakpoint(md) {
@@ -197,7 +200,7 @@
     padding: rem(15px) 0;
   }
 
-  @if feature-flag-enabled('enable-v11-release') {
+  @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--inline-notification__content {
       @include type-style('body-short-01');
 

package/scss/components/notification/_toast-notification.scss

@@ -10,7 +10,7 @@
 @use '../../breakpoint' as *;
 @use '../../colors' as *;
 @use '../../config' as *;
-@use '../../feature-flags' as *;
+@use '../../feature-flags';
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -32,14 +32,19 @@
     width: rem(288px);
     height: auto;
     padding-left: $spacing-05;
-    margin-top: $spacing-03;
-    margin-right: $spacing-05;
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-03;
+      margin-right: $spacing-05;
+      margin-bottom: $spacing-03;
+    }
+
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $text-inverse;
 
-    &:first-child {
-      margin-top: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      &:first-child {
+        margin-top: $spacing-05;
+      }
     }
 
     @include breakpoint(max) {
@@ -146,7 +151,7 @@
     margin-right: $spacing-05;
   }
 
-  @if feature-flag-enabled('enable-v11-release') {
+  @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toast-notification__content {
       @include type-style('body-short-01');
 
@@ -205,7 +210,7 @@
     fill: $icon-primary;
   }
 
-  @if not feature-flag-enabled('enable-v11-release') {
+  @if not feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toast-notification__title {
       @include type-style('productive-heading-01');