@carbon/styles 0.8.0-rc.0 → 0.10.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.8.0-rc.0",
+  "version": "0.10.0-rc.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.39.0-rc.0",
-    "@carbon/layout": "^10.34.0-rc.0",
-    "@carbon/motion": "^10.25.0",
-    "@carbon/themes": "^10.46.0-rc.0",
-    "@carbon/type": "^10.38.0-rc.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": "b5f01ac2dbf9e5acb901cfc939b4ddd4d951a35e"
+  "gitHead": "919fcfc3b4e247d057c6112f8cacf8aec33fe234"
 }

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/components/button/_button.scss

@@ -15,7 +15,6 @@
 @use '../../utilities/focus-outline';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
-@use '../../utilities/tooltip' as *;
 @use '../../utilities/visually-hidden' as *;
 @use 'tokens' as *;
 
@@ -145,118 +144,9 @@
     &.#{$prefix}--btn--md {
       padding: $button-padding-ghost-field;
     }
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
-    @include tooltip--trigger('icon', 'bottom');
-
-    svg,
-    &:hover svg,
-    &:focus svg {
-      fill: currentColor;
-    }
-
-    &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::before,
-    &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::after,
-    &.#{$prefix}--btn--disabled .#{$prefix}--assistive-text {
-      overflow: hidden;
-      margin: -1px;
-      clip: rect(0, 0, 0, 0);
-      opacity: 0;
-    }
-  }
-
-  // Allow pointer events on tooltip when tooltip is visible
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only:not(.#{$prefix}--tooltip--hidden)
-    .#{$prefix}--assistive-text {
-    pointer-events: all;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
-    border-color: $focus;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:active:not([disabled]) {
-    border-color: transparent;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
-    svg {
-    outline-color: transparent;
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:hover,
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:focus,
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:active {
-    cursor: not-allowed;
-    fill: $icon-on-color-disabled;
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--top {
-    @include tooltip--trigger('icon', 'top');
-    @include tooltip--placement('icon', 'top', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'top', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'top', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'top', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--right {
-    @include tooltip--trigger('icon', 'right');
-    @include tooltip--placement('icon', 'right', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'right', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'right', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'right', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--bottom {
-    @include tooltip--trigger('icon', 'bottom');
-    @include tooltip--placement('icon', 'bottom', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'bottom', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'bottom', 'center');
-    }
-
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'bottom', 'end');
-    }
-  }
-
-  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--left {
-    @include tooltip--trigger('icon', 'left');
-    @include tooltip--placement('icon', 'left', 'center');
-
-    &.#{$prefix}--tooltip--align-start {
-      @include tooltip--placement('icon', 'left', 'start');
-    }
-
-    &.#{$prefix}--tooltip--align-center {
-      @include tooltip--placement('icon', 'left', 'center');
-    }
 
-    &.#{$prefix}--tooltip--align-end {
-      @include tooltip--placement('icon', 'left', 'end');
+    &:not([disabled]) svg {
+      fill: $icon-primary;
     }
   }
 

package/scss/components/button/_tokens.scss

@@ -62,11 +62,11 @@ $button-secondary: (
     ),
     (
       theme: themes.$g10,
-      value: #6f6f6f,
+      value: #393939,
     ),
     (
       theme: themes.$g90,
-      value: #393939,
+      value: #6f6f6f,
     ),
     (
       theme: themes.$g100,

package/scss/components/checkbox/_checkbox.scss

@@ -41,6 +41,9 @@
   // to match the specs.
   .#{$prefix}--checkbox {
     @include visually-hidden;
+    //even though its hidden, positioning is for native validation to be aligned to checkbox
+    top: 1.25rem;
+    left: 0.7rem;
   }
 
   // The label corresponds to the content inside of the `label` tag. Since we're

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/form/_form.scss

@@ -50,16 +50,19 @@ $input-label-weight: 400 !default;
     @include type-style('label-01');
 
     display: inline-block;
-    @if not enabled('enable-v11-release') {
-      margin-bottom: $spacing-03;
-    }
-
+    margin-bottom: $spacing-03;
     color: $text-secondary;
     font-weight: $input-label-weight;
     line-height: 1rem;
     vertical-align: baseline;
   }
 
+  @if enabled('enable-v11-release') {
+    .#{$prefix}--label--no-margin {
+      margin-bottom: 0;
+    }
+  }
+
   .#{$prefix}--label .#{$prefix}--tooltip__trigger {
     // When tooltip trigger is put in form label the trigger button should fit in the size of label
     // https://github.com/IBM/carbon-components-react/issues/115

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 {

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 *;
@@ -200,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 *;
@@ -151,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');
 
@@ -210,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');