@carbon/styles 1.33.1 → 1.34.0-rc.0

package/scss/components/radio-button/_radio-button.scss

@@ -9,19 +9,18 @@
 // Radio
 //-----------------------------
 
+@use '../form';
+@use '../button/tokens' as *;
+@use '../../config' as *;
+@use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type';
-@use '../form';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/component-reset' as *;
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/convert' as *;
-@use '../../config' as *;
-@use '../../spacing' as *;
-
-@use '../button/tokens' as *;
 
 /// @type Number
 /// @access public

package/scss/components/search/_search.scss

@@ -9,6 +9,7 @@
 // Search
 //-----------------------------
 
+@use '../text-input';
 @use '../../theme' as *;
 @use '../../config' as *;
 @use '../../type';
@@ -122,6 +123,8 @@
   }
 
   .#{$prefix}--search-magnifier-icon {
+    @include reset;
+
     position: absolute;
     z-index: 2;
     top: 50%;
@@ -347,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/select/_select.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../form';
 @use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
@@ -16,7 +17,6 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
-@use '../form';
 
 /// Select styles
 /// @access public

package/scss/components/slider/_slider.scss

@@ -9,21 +9,19 @@
 // Slider
 //-----------------------------
 
+@use '../form';
+@use '../text-input';
 @use '../../config' as *;
 @use '../../colors' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
 
-@use '../form';
-@use '../text-input';
-
 /// Slider styles
 /// @access public
 /// @group slider

package/scss/components/structured-list/_structured-list.scss

@@ -5,16 +5,18 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'mixins' as *;
 @use '../../config' as *;
 @use '../../feature-flags' as *;
-@use '../../type' as *;
+@use '../../layer' as *;
 @use '../../motion';
 @use '../../theme' as *;
+@use '../../type' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
-@use 'mixins' as *;
+@use '../../utilities/component-reset';
 
 @mixin structured-list {
   .#{$prefix}--structured-list--selection .#{$prefix}--structured-list-td,
@@ -26,7 +28,7 @@
   }
 
   .#{$prefix}--structured-list {
-    @include reset;
+    @include component-reset.reset;
 
     display: table;
     width: 100%;
@@ -142,7 +144,7 @@
   }
 
   .#{$prefix}--structured-list-th {
-    @include reset;
+    @include component-reset.reset;
     @include padding-th;
     @include type-style('heading-compact-01');
 
@@ -161,7 +163,7 @@
   }
 
   .#{$prefix}--structured-list-td {
-    @include reset;
+    @include component-reset.reset;
     @include type-style('body-01');
     @include padding-td;
 

package/scss/components/tabs/_tabs.scss

@@ -10,7 +10,8 @@
 //-----------------------------
 
 @use 'vars' as *;
-
+@use '../button/tokens' as button;
+@use '../tooltip';
 @use '../../config' as *;
 @use '../../theme' as *;
 @use '../../colors' as *;
@@ -18,10 +19,11 @@
 @use '../../breakpoint' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
-@use '../button/tokens' as button;
+@use '../../layer' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/rotate' as *;
 @use '../../utilities/box-shadow' as *;
+@use '../../utilities/component-reset';
 @use '../../utilities/component-tokens' as *;
 @use '../../utilities/custom-property';
 @use '../../utilities/skeleton' as *;
@@ -29,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 {
@@ -66,6 +78,8 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     }
 
     .#{$prefix}--tabs__nav {
+      @include component-reset.reset;
+
       display: flex;
     }
 
@@ -237,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
     //-----------------------------
@@ -281,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;
       }
@@ -339,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');
     }
 
     //-----------------------------
@@ -351,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;
@@ -368,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)
@@ -385,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
     //-----------------------------
@@ -401,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;
@@ -412,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
     //-----------------------------
@@ -554,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');
@@ -585,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/text-area/_text-area.scss

@@ -12,6 +12,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/placeholder-colors' as *;
@@ -22,7 +23,7 @@
 /// @group text-area
 @mixin text-area {
   .#{$prefix}--text-area {
-    @include reset;
+    @include component-reset.reset;
     @include type-style('body-01');
     @include focus-outline('reset');
 

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

@@ -8,13 +8,13 @@
 //-----------------------------
 // Text
 //-----------------------------
+@use '../form';
 @use '../../config' as *;
 @use '../../colors' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
-
 @use '../../utilities/component-reset';
 @use '../../utilities/placeholder-colors' as *;
 @use '../../utilities/tooltip' as *;
@@ -22,10 +22,8 @@
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/layout';
-
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/button-reset';
-@use '../form';
 
 /// Text input styles
 /// @access public
@@ -34,8 +32,7 @@
   .#{$prefix}--text-input {
     @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');
     @include layout.use('density', $default: 'normal');
-
-    @include reset;
+    @include component-reset.reset;
     @include type-style('body-compact-01');
     @include focus-outline('reset');
 

package/scss/components/tile/_tile.scss

@@ -5,14 +5,16 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../button/tokens' as button;
 @use '../../config' as *;
 @use '../../feature-flags' as *;
+@use '../../layer' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../button/tokens' as button;
 @use '../../utilities/button-reset';
+@use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
@@ -30,6 +32,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile {
+    @include type-style('body-compact-01');
     @include layout.use('density', $default: 'normal');
 
     position: relative;
@@ -41,8 +44,6 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     outline: 2px solid transparent;
     outline-offset: -2px;
 
-    @include type-style('body-compact-01');
-
     &:focus {
       @include focus-outline('outline');
     }
@@ -55,6 +56,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile--clickable,
   .#{$prefix}--tile--selectable {
+    @include component-reset.reset;
+    @include type-style('body-compact-01');
+
+    padding: layout.density('padding-inline');
     cursor: pointer;
     transition: $duration-moderate-01 motion(standard, productive);
 
@@ -64,8 +69,6 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--clickable {
-    @include reset;
-
     color: $text-primary;
     text-decoration: none;
 
@@ -105,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/time-picker/_time-picker.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../text-input';
+@use '../select';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -48,6 +50,10 @@
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--time-picker__error__icon .#{$prefix}--checkbox__invalid-icon {
+    fill: $support-error;
+  }
+
   .#{$prefix}--time-picker .#{$prefix}--select-input {
     width: auto;
     min-width: auto;

package/scss/components/toggletip/_toggletip.scss

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../button';
 @use '../../config' as *;
 @use '../../spacing';
 @use '../../theme';
@@ -71,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/tooltip/_tooltip.scss

@@ -5,10 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../popover';
 @use '../../config' as *;
 @use '../../spacing';
 @use '../../theme';
 @use '../../type';
+@use '../../layer' as *;
 @use '../../utilities/custom-property';
 @use '../../utilities/convert';
 @use '../../utilities/button-reset';

package/scss/components/treeview/_treeview.scss

@@ -5,12 +5,14 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../form';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
 
@@ -19,6 +21,8 @@
 /// @group treeview
 @mixin treeview {
   .#{$prefix}--tree {
+    @include component-reset.reset;
+
     overflow: hidden;
   }
 
@@ -36,6 +40,12 @@
     }
   }
 
+  .#{$prefix}--tree-node__children {
+    @include component-reset.reset;
+
+    list-style-type: none;
+  }
+
   .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-node {
     margin-left: $spacing-03;
   }
@@ -88,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);
@@ -206,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;
   }
 }

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

@@ -5,15 +5,18 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../../button';
 @use '../mixins' as *;
 @use '../functions' as *;
 @use '../../../breakpoint' as *;
 @use '../../../config' as *;
+@use '../../../layer' as *;
 @use '../../../motion' as *;
 @use '../../../spacing' as *;
 @use '../../../theme' as *;
 @use '../../../type' as *;
 @use '../../../utilities/button-reset';
+@use '../../../utilities/component-reset';
 @use '../../../utilities/convert' as *;
 @use '../../../utilities/z-index' as *;
 
@@ -22,6 +25,8 @@
 /// @group ui-shell
 @mixin header {
   .#{$prefix}--header {
+    @include component-reset.reset;
+
     position: fixed;
     z-index: z('header');
     top: 0;
@@ -201,6 +206,8 @@
   }
 
   .#{$prefix}--header__menu-bar {
+    @include component-reset.reset;
+
     display: flex;
     height: 100%;
     padding: 0;

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

@@ -7,6 +7,7 @@
 
 @use '../functions' as *;
 @use '../../../config' as *;
+@use '../../../layer' as *;
 @use '../../../motion' as *;
 @use '../../../theme' as *;
 @use '../../../utilities/z-index' as *;

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

@@ -9,11 +9,13 @@
 @use '../functions' as *;
 @use '../../../breakpoint' as *;
 @use '../../../config' as *;
+@use '../../../layer' as *;
 @use '../../../motion' as *;
 @use '../../../spacing' as *;
 @use '../../../theme' as *;
 @use '../../../type' as *;
 @use '../../../utilities/button-reset';
+@use '../../../utilities/component-reset';
 @use '../../../utilities/convert' as *;
 @use '../../../utilities/focus-outline' as *;
 @use '../../../utilities/high-contrast-mode' as *;
@@ -124,6 +126,8 @@
   // Side-nav > Navigation > Item(s)
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__items {
+    @include component-reset.reset;
+
     overflow: hidden;
     flex: 1 1 0%;
     padding: 1rem 0 0;
@@ -186,6 +190,7 @@
     height: 1px;
     margin: $spacing-03 $spacing-05;
     background-color: $border-subtle;
+    list-style-type: none;
   }
 
   //----------------------------------------------------------------------------
@@ -277,6 +282,8 @@
   }
 
   .#{$prefix}--side-nav__menu {
+    @include component-reset.reset;
+
     display: block;
     max-height: 0;
     visibility: hidden;
@@ -439,6 +446,8 @@
   }
 
   .#{$prefix}--side-nav__header-navigation {
+    @include component-reset.reset;
+
     display: none;
 
     @include breakpoint-down('lg') {

package/scss/components/ui-shell/switcher/_switcher.scss

@@ -9,6 +9,7 @@
 @use '../../../spacing' as *;
 @use '../../../theme' as *;
 @use '../../../type' as *;
+@use '../../../utilities/component-reset';
 @use '../../../utilities/convert' as *;
 
 /// UI shell side nav
@@ -19,6 +20,8 @@
   // Header Switcher
   //----------------------------------------------------------------------------
   .#{$prefix}--switcher {
+    @include component-reset.reset;
+
     display: flex;
     flex-direction: column;
     align-items: center;