@carbon/styles 0.8.0 → 0.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "@carbon/grid": "^10.39.0",
     "@carbon/layout": "^10.34.0",
     "@carbon/motion": "^10.26.0",
-    "@carbon/themes": "^10.46.0",
+    "@carbon/themes": "^10.47.0",
     "@carbon/type": "^10.38.0",
     "@ibm/plex": "6.0.0-next.6"
   },
@@ -33,5 +33,5 @@
     "@carbon/test-utils": "^10.20.0",
     "css": "^3.0.0"
   },
-  "gitHead": "f6352a1010117000ce4ca9f71315b67b1ec8e396"
+  "gitHead": "505af1963e6f78a204212e4f322c247f4eb4f217"
 }

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/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/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/number-input/_number-input.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/skeleton' as *;
 @use '../../utilities/button-reset';
@@ -280,7 +280,7 @@
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__controls
     .#{$prefix}--number__rule-divider:first-of-type {
-    background-color: $decorative-01;
+    background-color: $border-subtle-02;
   }
 
   .#{$prefix}--number
@@ -385,7 +385,7 @@
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before,
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {
-    background-color: $hover-light-ui;
+    background-color: $layer-hover-02;
   }
 
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before,

package/scss/components/overflow-menu/_overflow-menu.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 '../button/tokens' as button;
 @use '../../utilities/box-shadow' as *;
@@ -16,6 +16,7 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/z-index' as *;
 
 /// Overflow menu styles
 /// @access public
@@ -230,7 +231,7 @@
   }
 
   .#{$prefix}--overflow-menu--light .#{$prefix}--overflow-menu--divider {
-    border-top: 1px solid $decorative-01;
+    border-top: 1px solid $border-subtle-02;
   }
 
   a.#{$prefix}--overflow-menu-options__btn::before {
@@ -252,7 +253,7 @@
     padding: 0 $spacing-05;
     border: none;
     background-color: transparent;
-    color: $text-02;
+    color: $text-secondary;
     cursor: pointer;
     font-family: inherit;
     font-weight: 400;
@@ -262,7 +263,7 @@
       color $duration-fast-02 motion(entrance, productive);
 
     &:hover {
-      color: $text-01;
+      color: $text-primary;
     }
 
     &:focus {