@carbon/styles 1.33.0 → 1.33.1

package/scss/components/slider/_slider.scss

@@ -9,19 +9,21 @@
 // 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,18 +5,16 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'mixins' as *;
 @use '../../config' as *;
 @use '../../feature-flags' as *;
-@use '../../layer' as *;
+@use '../../type' 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 '../../utilities/component-reset';
+@use 'mixins' as *;
 
 @mixin structured-list {
   .#{$prefix}--structured-list--selection .#{$prefix}--structured-list-td,
@@ -28,7 +26,7 @@
   }
 
   .#{$prefix}--structured-list {
-    @include component-reset.reset;
+    @include reset;
 
     display: table;
     width: 100%;
@@ -144,7 +142,7 @@
   }
 
   .#{$prefix}--structured-list-th {
-    @include component-reset.reset;
+    @include reset;
     @include padding-th;
     @include type-style('heading-compact-01');
 
@@ -163,7 +161,7 @@
   }
 
   .#{$prefix}--structured-list-td {
-    @include component-reset.reset;
+    @include reset;
     @include type-style('body-01');
     @include padding-td;
 

package/scss/components/tabs/_tabs.scss

@@ -10,8 +10,7 @@
 //-----------------------------
 
 @use 'vars' as *;
-@use '../button/tokens' as button;
-@use '../tooltip';
+
 @use '../../config' as *;
 @use '../../theme' as *;
 @use '../../colors' as *;
@@ -19,11 +18,10 @@
 @use '../../breakpoint' as *;
 @use '../../spacing' as *;
 @use '../../motion' as *;
-@use '../../layer' as *;
+@use '../button/tokens' as button;
 @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 *;
@@ -68,8 +66,6 @@ $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,7 +12,6 @@
 @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 *;
@@ -23,7 +22,7 @@
 /// @group text-area
 @mixin text-area {
   .#{$prefix}--text-area {
-    @include component-reset.reset;
+    @include 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,8 +22,10 @@
 @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
@@ -32,7 +34,8 @@
   .#{$prefix}--text-input {
     @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');
     @include layout.use('density', $default: 'normal');
-    @include component-reset.reset;
+
+    @include reset;
     @include type-style('body-compact-01');
     @include focus-outline('reset');
 

package/scss/components/tile/_tile.scss

@@ -5,16 +5,14 @@
 // 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 *;
@@ -32,7 +30,6 @@ $-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;
@@ -44,6 +41,8 @@ $-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');
     }
@@ -56,10 +55,6 @@ $-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);
 
@@ -69,6 +64,8 @@ $-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,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../text-input';
-@use '../select';
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -50,10 +48,6 @@
     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,7 +5,6 @@
 // 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,12 +5,10 @@
 // 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,14 +5,12 @@
 // 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 *;
 
@@ -21,8 +19,6 @@
 /// @group treeview
 @mixin treeview {
   .#{$prefix}--tree {
-    @include component-reset.reset;
-
     overflow: hidden;
   }
 
@@ -40,12 +36,6 @@
     }
   }
 
-  .#{$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,18 +5,15 @@
 // 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 *;
 
@@ -25,8 +22,6 @@
 /// @group ui-shell
 @mixin header {
   .#{$prefix}--header {
-    @include component-reset.reset;
-
     position: fixed;
     z-index: z('header');
     top: 0;
@@ -206,8 +201,6 @@
   }
 
   .#{$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,7 +7,6 @@
 
 @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,13 +9,11 @@
 @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 *;
@@ -126,8 +124,6 @@
   // Side-nav > Navigation > Item(s)
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__items {
-    @include component-reset.reset;
-
     overflow: hidden;
     flex: 1 1 0%;
     padding: 1rem 0 0;
@@ -190,7 +186,6 @@
     height: 1px;
     margin: $spacing-03 $spacing-05;
     background-color: $border-subtle;
-    list-style-type: none;
   }
 
   //----------------------------------------------------------------------------
@@ -282,8 +277,6 @@
   }
 
   .#{$prefix}--side-nav__menu {
-    @include component-reset.reset;
-
     display: block;
     max-height: 0;
     visibility: hidden;
@@ -446,8 +439,6 @@
   }
 
   .#{$prefix}--side-nav__header-navigation {
-    @include component-reset.reset;
-
     display: none;
 
     @include breakpoint-down('lg') {

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

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