@carbon/styles 1.32.0 → 1.33.0

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%;

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 *;
@@ -66,6 +68,8 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     }
 
     .#{$prefix}--tabs__nav {
+      @include component-reset.reset;
+
       display: flex;
     }
 

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;
 

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';

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;
   }

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;