@carbon/styles 1.63.1 → 1.64.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.63.1",
+  "version": "1.64.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,25 +40,25 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.24.0",
-    "@carbon/feature-flags": "^0.21.0",
-    "@carbon/grid": "^11.25.0",
-    "@carbon/layout": "^11.24.0",
-    "@carbon/motion": "^11.20.0",
-    "@carbon/themes": "^11.38.0",
-    "@carbon/type": "^11.29.0",
+    "@carbon/colors": "^11.25.0",
+    "@carbon/feature-flags": "^0.22.0",
+    "@carbon/grid": "^11.26.0",
+    "@carbon/layout": "^11.25.0",
+    "@carbon/motion": "^11.21.0",
+    "@carbon/themes": "^11.39.0",
+    "@carbon/type": "^11.30.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.30.0",
+    "@carbon/test-utils": "^10.31.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
     "cssnano": "^7.0.0",
     "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "rimraf": "^5.0.0",
+    "rimraf": "^6.0.0",
     "sass": "^1.51.0"
   },
   "sideEffects": [
@@ -67,5 +67,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "512479162a69c214a95c02f9c7c8073195df5a58"
+  "gitHead": "2e82ab9625d65b607a7510b70d2cb4bacf209378"
 }

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

@@ -121,16 +121,16 @@
   }
 
   .#{$prefix}--data-table
-    tr
-    + :not(.#{$prefix}--popover-container):hover
-    .#{$prefix}--link {
+    tr:hover
+    .#{$prefix}--link:not(.#{$prefix}--popover-container .#{$prefix}--link) {
     color: $link-secondary;
   }
 
   .#{$prefix}--data-table
-    tr
-    + :not(.#{$prefix}--popover-container):hover
-    .#{$prefix}--link--disabled {
+    tr:hover
+    .#{$prefix}--link--disabled:not(
+      .#{$prefix}--popover-container .#{$prefix}--link
+    ) {
     color: $text-disabled;
   }
 

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

@@ -145,9 +145,9 @@
   }
 
   .flatpickr-calendar.inline {
-    position: relative;
+    position: absolute;
     display: block;
-    inset-block-start: convert.to-rem(2px);
+    inset-block-start: auto;
   }
 
   .flatpickr-calendar.static {

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -15,6 +15,7 @@
 @use '../../utilities/button-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/layout';
 @use '../../utilities/visually-hidden' as *;
 
 /// Pagination nav base styles
@@ -26,9 +27,9 @@
 /// @param {Color} $background-color-active [initial]
 /// @param {Number} $font-weight [400]
 /// @param {Number} $item-padding [0]
-/// @param {Number} $button-min-width [$spacing-09]
-/// @param {Value} $button-padding [1.0625rem $spacing-02]
-/// @param {Number} $button-direction-size [$spacing-09]
+/// @param {Number} $button-min-width [$spacing-09] TODO: remove in v12
+/// @param {Value} $button-padding [1.0625rem $spacing-02] TODO: remove in v12
+/// @param {Number} $button-direction-size [$spacing-09] TODO: remove in v12
 /// @param {Number} $select-icon-top-position [$spacing-05]
 /// @param {Number} $select-icon-left-position [$spacing-05]
 @mixin pagination-nav(
@@ -47,6 +48,8 @@
   .#{$prefix}--pagination-nav {
     @include reset;
     @include type-style('body-compact-01');
+    @include layout.use('size', $default: 'lg', $min: 'sm', $max: 'lg');
+    @include layout.use('density', $default: 'normal');
 
     line-height: 0;
   }
@@ -75,12 +78,13 @@
 
     position: relative;
     display: block;
-    padding: $button-padding;
+    // subtract 0.875rem to account for font-size 14px
+    padding: calc((layout.size('height') - 0.875rem) / 2) $spacing-02;
     border-radius: 0;
     color: $text-primary;
     font-weight: $font-weight;
     line-height: 1;
-    min-inline-size: $button-min-width;
+    min-inline-size: layout.size('height');
     outline: 0;
     text-align: center;
     text-decoration: none;
@@ -119,6 +123,7 @@
     }
   }
 
+  // TODO: remove in v12
   .#{$prefix}--pagination-nav__page--direction {
     display: flex;
     align-items: center;
@@ -134,7 +139,7 @@
 
   .#{$prefix}--pagination-nav__page--select {
     appearance: none;
-    max-block-size: $button-min-width;
+    max-block-size: layout.size('height');
     text-indent: calc(50% - 4.5px);
     // Override some Firefox user-agent styles
     @-moz-document url-prefix() {
@@ -160,7 +165,7 @@
 
   .#{$prefix}--pagination-nav__select-icon {
     position: absolute;
-    inset-block-start: calc(50% - #{$select-icon-top-position * 0.5});
+    inset-block-start: calc(50% - #{$select-icon-top-position * 0.25});
     inset-inline-start: calc(50% - #{$select-icon-top-position * 0.5});
     pointer-events: none;
   }

package/scss/components/tabs/_tabs.scss

@@ -700,10 +700,6 @@
 
   .#{$prefix}--tabs--contained ~ .#{$prefix}--tab-content {
     background: $layer;
-
-    > * {
-      @include layer-tokens.emit-layer-tokens(2);
-    }
   }
 
   .#{$prefix}--tabs--vertical ~ .#{$prefix}--tab-content {

package/scss/components/text-input/_text-input.scss

@@ -206,6 +206,22 @@
     }
   }
 
+  .#{$prefix}--text-input--password__visibility__toggle:disabled.#{$prefix}--tooltip__trigger {
+    svg {
+      fill: $icon-disabled;
+    }
+
+    cursor: default;
+  }
+
+  .#{$prefix}--text-input--password__visibility__toggle:disabled.#{$prefix}--tooltip__trigger:hover {
+    svg {
+      fill: $icon-disabled;
+    }
+
+    cursor: default;
+  }
+
   .#{$prefix}--text-input__counter-alert {
     position: absolute;
     overflow: hidden;
@@ -354,6 +370,7 @@
     > .#{$prefix}--text-input--warning:focus {
     outline: none;
   }
+
   //-----------------------------
   // Inline Text Input
   //-----------------------------

package/scss/components/ui-shell/header-panel/_header-panel.scss

@@ -38,5 +38,6 @@
     border-inline-end: 1px solid $border-subtle;
     border-inline-start: 1px solid $border-subtle;
     inline-size: mini-units(32);
+    overflow-y: auto;
   }
 }