@carbon/styles 1.33.0 → 1.34.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.33.0",
+  "version": "1.34.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -37,13 +37,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.17.0",
+    "@carbon/colors": "^11.18.0-rc.0",
     "@carbon/feature-flags": "^0.15.0",
-    "@carbon/grid": "^11.16.0",
-    "@carbon/layout": "^11.16.0",
-    "@carbon/motion": "^11.13.0",
-    "@carbon/themes": "^11.21.0",
-    "@carbon/type": "^11.20.0",
+    "@carbon/grid": "^11.17.0-rc.0",
+    "@carbon/layout": "^11.17.0-rc.0",
+    "@carbon/motion": "^11.14.0-rc.0",
+    "@carbon/themes": "^11.22.0-rc.0",
+    "@carbon/type": "^11.21.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -64,5 +64,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "3a58934eed5588f5e8ee1facbb09584a41adc089"
+  "gitHead": "52fd3db75951b341e4abb3af2e7441da6639bfa4"
 }

package/scss/components/button/_button.scss

@@ -302,6 +302,11 @@
   //expressive styles
   .#{$prefix}--btn--expressive {
     @include type-style('body-compact-02');
+
+    padding-block: min(
+      calc((layout.size('height') - var(--temp-expressive-1lh)) / 2 - rem(1px)),
+      var(--temp-padding-block-max)
+    );
   }
 
   .#{$prefix}--btn--icon-only.#{$prefix}--btn--expressive {

package/scss/components/button/_mixins.scss

@@ -29,6 +29,12 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
         map.get($body-compact-01, line-height)
       )} * 1em
   );
+  --temp-expressive-1lh: (
+    #{custom-property.get-var(
+        'body-compact-02-line-height',
+        map.get($body-compact-02, line-height)
+      )} * 1em
+  );
   // -1px to compensate for border width
   --temp-padding-block-max: calc(
     (#{custom-property.get-var('layout-size-height-lg')} - var(--temp-1lh)) / 2 -
@@ -42,7 +48,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   display: inline-flex;
   width: max-content;
   max-width: rem(320px);
-  height: layout.size('height');
+  min-height: layout.size('height');
   flex-shrink: 0;
   justify-content: space-between;
   // Fix to remove added margins on buttons in safari (see #5155)
@@ -51,7 +57,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   cursor: pointer;
   outline: none;
   // -1px to compensate for border width
-  padding-block-start: min(
+  padding-block: min(
     calc((layout.size('height') - var(--temp-1lh)) / 2 - rem(1px)),
     var(--temp-padding-block-max)
   );

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

@@ -306,6 +306,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--inline.#{$prefix}--btn {
     width: initial;
     height: 1.25rem;
+    min-height: 1.25rem;
     padding-inline: 0;
   }
 
@@ -334,6 +335,7 @@ $copy-btn-feedback: $background-inverse !default;
     right: 0;
     bottom: 0;
     display: inline-flex;
+    height: rem(32px);
     align-items: center;
 
     padding: $spacing-03 $spacing-05;

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -35,6 +35,7 @@
     display: flex;
     width: rem(40px);
     height: rem(40px);
+    min-height: rem(40px);
     align-items: center;
     justify-content: center;
     cursor: pointer;

package/scss/components/popover/_popover.scss

@@ -392,6 +392,10 @@ $popover-caret-height: custom-property.get-var(
     border-radius: 0;
   }
 
+  .#{$prefix}--popover--tab-tip .#{$prefix}--popover {
+    will-change: filter;
+  }
+
   .#{$prefix}--popover--tab-tip__button {
     @include button-reset.reset;
 

package/scss/components/search/_search.scss

@@ -350,6 +350,10 @@
   .#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
     position: absolute;
     cursor: pointer;
+
+    &:focus {
+      outline: 2px solid $focus;
+    }
   }
 
   .#{$prefix}--search--expandable .#{$prefix}--search-magnifier:hover {

package/scss/components/tabs/_tabs.scss

@@ -31,27 +31,37 @@
 @use '../../utilities/button-reset';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
-
-$icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
+@use '../../utilities/layout';
 
 /// Tabs styles
 /// @access public
 /// @group tabs
 @mixin tabs {
+  .#{$prefix}--tabs,
+  .#{$prefix}--tab-content {
+    @include layout.use('density', $default: 'normal');
+  }
+
+  .#{$prefix}--tabs.#{$prefix}--tabs--tall,
+  .#{$prefix}--tabs.#{$prefix}--tabs--contained.#{$prefix}--tabs--tall {
+    @include layout.use('size', $min: 'lg', $max: 'xl', $default: 'xl');
+  }
+
   .#{$prefix}--tabs {
     @include reset;
     @include type-style('body-compact-01');
+    @include layout.use('size', $min: 'sm', $max: 'lg', $default: 'md');
 
     position: relative;
     display: flex;
     width: 100%;
     height: auto;
-    min-height: rem(40px);
-    max-height: 4rem;
+    min-height: layout.size('height');
+    max-height: custom-property.get-var('layout-size-height-xl');
     color: $text-primary;
 
     &.#{$prefix}--tabs--contained {
-      min-height: rem(48px);
+      @include layout.use('size', $min: 'sm', $max: 'xl', $default: 'lg');
     }
 
     .#{$prefix}--tab--list {
@@ -241,6 +251,12 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       display: flex;
     }
 
+    &:not(.#{$prefix}--tabs--contained)
+      .#{$prefix}--tabs__nav-item-label-wrapper {
+      position: relative;
+      top: rem(1px);
+    }
+
     //-----------------------------
     // Item
     //-----------------------------
@@ -285,11 +301,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled)
       .#{$prefix}--tabs__nav-item--icon
       .#{$prefix}--tabs__nav-item--close-icon {
-      padding: $spacing-05;
-      margin-top: -$spacing-03;
-      margin-right: -$spacing-05;
-      margin-left: -$spacing-05;
-
       &:hover {
         background-color: inherit;
       }
@@ -343,7 +354,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
-      padding-left: $spacing-05;
+      padding-inline-start: layout.density('padding-inline');
     }
 
     //-----------------------------
@@ -355,9 +366,9 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       @include type-style('body-compact-01');
 
       overflow: hidden;
-      padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
       color: $text-secondary;
+      padding-inline: layout.density('padding-inline');
       text-align: left;
       text-decoration: none;
       text-overflow: ellipsis;
@@ -372,9 +383,8 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link {
-      height: rem(48px);
-      padding: $spacing-03 $spacing-05;
       border-bottom: 0;
+      padding-inline: layout.density('padding-inline');
     }
 
     &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)
@@ -389,11 +399,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       min-height: rem(16px);
     }
 
-    &.#{$prefix}--tabs--contained.#{$prefix}--tabs--tall
-      .#{$prefix}--tabs__nav-link {
-      height: rem(64px);
-    }
-
     //-----------------------------
     // Icon Item
     //-----------------------------
@@ -405,8 +410,8 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     .#{$prefix}--tabs__nav-item--icon-only,
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon-only {
       display: flex;
-      width: $icon-tab-size;
-      height: $icon-tab-size;
+      width: layout.size('height');
+      height: layout.size('height');
       align-items: center;
       justify-content: center;
       padding: 0;
@@ -416,10 +421,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
     }
 
-    &.#{$prefix}--tabs__icon--lg {
-      @include custom-property.declaration('icon-tab-size', rem(48px));
-    }
-
     //-----------------------------
     // Item Hover
     //-----------------------------
@@ -558,7 +559,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
   //  Tab Content Container
   //-----------------------------
   .#{$prefix}--tab-content {
-    padding: $spacing-05;
+    padding: layout.density('padding-inline');
 
     &:focus {
       @include focus-outline('outline');
@@ -589,7 +590,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     width: 10rem;
     height: 100%;
     align-items: center;
-    padding: 0 1rem;
+    padding: 0 layout.density('padding-inline');
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link span {

package/scss/components/tile/_tile.scss

@@ -108,6 +108,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled,
   .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
     display: block;
+    padding: layout.density('padding-inline');
     background-color: $layer;
     color: $text-disabled;
     cursor: not-allowed;

package/scss/components/toggletip/_toggletip.scss

@@ -72,6 +72,10 @@
     row-gap: spacing.$spacing-05;
   }
 
+  .#{$prefix}--toggletip-content p {
+    @include type.type-style('body-01');
+  }
+
   .#{$prefix}--toggletip-actions {
     display: flex;
     align-items: center;

package/scss/components/treeview/_treeview.scss

@@ -98,7 +98,8 @@
     }
   }
 
-  .cds--tree-node:not(.cds--tree-parent-node) .#{$prefix}--tree-node__label {
+  .#{$prefix}--tree-node:not(.#{$prefix}--tree-parent-node)
+    .#{$prefix}--tree-node__label {
     // (min-height 32px - single line text height 18px) / 2 = 7px
     padding-top: rem(7px);
     padding-bottom: rem(7px);
@@ -216,9 +217,18 @@
     }
   }
 
+  // xs size variant
   .#{$prefix}--tree--xs .#{$prefix}--tree-node__label {
     min-height: rem(24px);
-    padding-top: rem(4px);
-    padding-bottom: rem(4px);
+  }
+
+  .#{$prefix}--tree--xs
+    .#{$prefix}--tree-node:not(.#{$prefix}--tree-parent-node)
+    .#{$prefix}--tree-node__label {
+    padding: 0;
+  }
+
+  .#{$prefix}--tree--xs .#{$prefix}--tree-parent-node__toggle {
+    margin-top: 0;
   }
 }