@carbon/styles 1.67.0 → 1.68.0-rc.0

package/scss/components/tabs/_tabs.scss

@@ -137,6 +137,14 @@
       &:focus {
         @include focus-outline('outline');
       }
+
+      &:hover {
+        background-color: $background-hover;
+      }
+
+      &:active {
+        background-color: $background-active;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button--hidden {
@@ -147,16 +155,29 @@
       margin: 0;
       background-color: $layer-accent;
       inline-size: $spacing-09;
+
+      &:hover {
+        background-color: $layer-accent-hover;
+      }
+
+      &:active {
+        background-color: $layer-accent-active;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button svg {
       z-index: 2;
       fill: $icon-primary;
+
+      &:active,
+      &:hover {
+        fill: $icon-primary;
+      }
     }
 
     .#{$prefix}--tab--overflow-nav-button--next {
-      position: absolute;
-      inset-block: 0 0;
+      position: relative;
+      inset-block: 0;
       inset-inline-end: 0;
     }
 
@@ -187,9 +208,9 @@
     }
 
     .#{$prefix}--tab--overflow-nav-button--previous {
-      position: absolute;
+      position: relative;
       z-index: 1;
-      inset-block: 0 0;
+      inset-block: 0;
       inset-inline-start: 0;
     }
 
@@ -504,6 +525,10 @@
       overflow-x: visible;
     }
 
+    .#{$prefix}--tabs__nav-item--icon-only {
+      margin-inline-end: convert.to-rem(1px);
+    }
+
     .#{$prefix}--tabs__nav-item--icon-only,
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon-only {
       display: flex;

package/scss/components/tag/_tag.scss

@@ -396,8 +396,12 @@
     border-color: currentColor;
   }
 
+  .#{$prefix}--tag--filter .#{$prefix}--slug {
+    min-inline-size: convert.to-rem(32.14px);
+  }
+
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--tag {
     @include high-contrast-mode('outline');
   }
@@ -424,7 +428,6 @@
     + .#{$prefix}--tag-label-tooltip {
     max-inline-size: convert.to-rem(158px);
   }
-  /* stylelint-enable */
 
   .#{$prefix}--interactive--tag-children {
     display: inline-flex;

package/scss/components/toggle/_toggle.scss

@@ -186,7 +186,6 @@
     @include high-contrast-mode('outline');
   }
 
-  // stylelint-disable-next-line no-duplicate-selectors
   .#{$prefix}--toggle__button:focus
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__switch,

package/scss/components/treeview/_treeview.scss

@@ -40,6 +40,10 @@
     }
   }
 
+  .#{$prefix}--tree-node--hidden {
+    display: none;
+  }
+
   .#{$prefix}--tree-node__children {
     @include component-reset.reset;
 

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

@@ -35,7 +35,7 @@
     block-size: mini-units(6);
     border-block-end: 1px solid $border-subtle;
     inset-block-start: 0;
-    inset-inline: 0 0;
+    inset-inline: 0;
   }
 
   .#{$prefix}--header__action {

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -36,7 +36,7 @@
     background-color: $background;
     color: $text-secondary;
     inline-size: mini-units(6);
-    inset-block: 0 0;
+    inset-block: 0;
     inset-inline-start: 0;
     max-inline-size: mini-units(32);
     // TODO: sync with motion work
@@ -270,7 +270,7 @@
       background-color: $border-interactive;
       content: '';
       inline-size: 3px;
-      inset-block: 0 0;
+      inset-block: 0;
       inset-inline-start: 0;
     }
   }
@@ -381,7 +381,7 @@
     background-color: $border-interactive;
     content: '';
     inline-size: 3px;
-    inset-block: 0 0;
+    inset-block: 0;
     inset-inline-start: 0;
   }
 

package/scss/utilities/_convert.scss

@@ -19,8 +19,8 @@ $base-font-size: 16px !default;
 /// @access public
 /// @group utilities
 @function to-rem($px) {
-  @if unit($px) != 'px' {
-    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  @if math.unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
   }
 
   @return math.div($px, $base-font-size) * 1rem;
@@ -34,8 +34,8 @@ $base-font-size: 16px !default;
 /// @deprecated
 /// @group @carbon/layout
 @function rem($px) {
-  @if unit($px) != 'px' {
-    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  @if math.unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
   }
 
   @return math.div($px, $base-font-size) * 1rem;
@@ -47,8 +47,8 @@ $base-font-size: 16px !default;
 /// @access public
 /// @group utilities
 @function em($px) {
-  @if unit($px) != 'px' {
-    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  @if math.unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
   }
 
   @return math.div($px, $base-font-size) * 1em;

package/scss/utilities/_skeleton.scss

@@ -36,6 +36,7 @@
     block-size: 100%;
     content: '';
     inline-size: 100%;
+    inset-inline-start: 0;
     will-change: transform-origin, transform, opacity;
 
     @media (prefers-reduced-motion: reduce) {

package/scss/utilities/_tooltip.scss

@@ -320,11 +320,8 @@
       transform: translate(100%, -50%);
     }
     @if ($position == 'bottom') {
-      border-width: 0
-        convert.to-rem(4px)
-        convert.to-rem(5px)
-        convert.to-rem(4px);
-      border-color: transparent transparent $background-inverse transparent;
+      border-width: 0 convert.to-rem(4px) convert.to-rem(5px);
+      border-color: transparent transparent $background-inverse;
       inset-block-end: -$caret-spacing;
       transform: translate(-50%, 100%);
     }

package/scss/utilities/_z-index.scss

@@ -4,7 +4,7 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-
+@use 'sass:map';
 /// @access public
 /// @type Map
 /// @group utilities
@@ -30,9 +30,9 @@ $z-indexes: (
 ///     z-index: z('modal');
 ///   }
 @function z($layer) {
-  @if not map-has-key($z-indexes, $layer) {
+  @if not map.has-key($z-indexes, $layer) {
     @warn 'No layer found for `#{$layer}` in $z-indexes map. Property omitted.';
   }
 
-  @return map-get($z-indexes, $layer);
+  @return map.get($z-indexes, $layer);
 }

package/telemetry.yml

@@ -1,7 +1,7 @@
 # yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
 version: 1
 projectId: d2574dfc-6ec7-4d1a-9c7a-b22cc16dc747
-endpoint: https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics
+endpoint: https://www-api.ibm.com/ibm-telemetry/v1/metrics
 collect:
   npm:
     dependencies: null