@carbon/styles 0.17.0 → 1.0.1

package/scss/components/tabs/_tabs.scss

@@ -283,6 +283,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
       color: $text-secondary;
+      text-align: left;
       text-decoration: none;
       text-overflow: ellipsis;
       transition: border $duration-fast-01 motion(standard, productive),
@@ -301,7 +302,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       border-bottom: 0;
       // height - vertical padding
       line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
-      text-align: left;
     }
 
     //-----------------------------

package/scss/components/tag/_tokens.scss

@@ -6,6 +6,7 @@
 //
 
 @use 'sass:color';
+@use '../../config';
 @use '../../colors';
 @use '../../themes';
 @use '../../theme' as *;

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

@@ -56,8 +56,6 @@
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--text-input--xl,
   .#{$prefix}--text-input--lg {
     height: rem(48px);
   }
@@ -124,8 +122,6 @@
     @include tooltip--placement('icon', 'bottom', 'center');
   }
 
-  .#{$prefix}--text-input--password__visibility,
-  // TODO: remove selector above
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
     @include focus-outline('reset');
 
@@ -188,11 +184,8 @@
     padding-right: rem(64px);
   }
 
-  .#{$prefix}--text-input--invalid +
-    .#{$prefix}--text-input--password__visibility,
-  // TODO: remove selector above
-  .#{$prefix}--text-input--invalid +
-    .#{$prefix}--text-input--password__visibility__toggle {
+  .#{$prefix}--text-input--invalid
+    + .#{$prefix}--text-input--password__visibility__toggle {
     right: $spacing-05;
   }
 
@@ -201,11 +194,8 @@
   }
 
   .#{$prefix}--text-input:disabled
-    + .#{$prefix}--text-input--password__visibility
-    svg,
-  // TODO: remove selector above
-  .#{$prefix}--text-input:disabled
-    + .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger svg {
+    + .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
+    svg {
     cursor: not-allowed;
     fill: $icon-disabled;
 
@@ -246,8 +236,6 @@
 
     box-shadow: none;
 
-    .#{$prefix}--text-input--password__visibility,
-    // TODO: remove selector above
     .#{$prefix}--text-input--password__visibility__toggle {
       right: $spacing-08;
     }
@@ -355,8 +343,6 @@
     margin-top: rem(9px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--xl,
   .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--lg {
     margin-top: rem(17px);
   }
@@ -396,10 +382,9 @@
   }
 
   // Windows HCM fix
-  .#{$prefix}--text-input--password__visibility,
-    // TODO: remove selector above
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger svg,
-    .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
+    svg,
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
     svg {
     @include high-contrast-mode('icon-fill');
   }

package/scss/components/tile/_tile.scss

@@ -11,6 +11,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../button/tokens' as button;
+@use '../../utilities/button-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
@@ -44,8 +45,7 @@
   }
 
   .#{$prefix}--tile--clickable,
-  .#{$prefix}--tile--selectable,
-  .#{$prefix}--tile--expandable {
+  .#{$prefix}--tile--selectable {
     cursor: pointer;
     transition: $duration-moderate-01 motion(standard, productive);
 
@@ -54,8 +54,13 @@
     }
   }
 
-  .#{$prefix}--tile--clickable,
-  .#{$prefix}--tile--expandable {
+  .#{$prefix}--tile--clickable {
+    @include reset;
+    @include type-style('body-compact-01');
+
+    color: $text-primary;
+    text-decoration: none;
+
     &:focus {
       @include focus-outline('outline');
     }
@@ -73,14 +78,6 @@
     border: 0;
   }
 
-  .#{$prefix}--tile--clickable {
-    @include reset;
-    @include type-style('body-compact-01');
-
-    color: $text-primary;
-    text-decoration: none;
-  }
-
   .#{$prefix}--tile--clickable:hover,
   .#{$prefix}--tile--clickable:active,
   .#{$prefix}--tile--clickable:visited,
@@ -102,19 +99,15 @@
     border: 1px solid transparent;
   }
 
-  .#{$prefix}--tile__checkmark,
-  .#{$prefix}--tile__chevron {
-    position: absolute;
-    border: none;
-    background: transparent;
-    transition: $duration-fast-02 motion(standard, productive);
-  }
-
   .#{$prefix}--tile__checkmark {
+    position: absolute;
     top: 1rem;
     right: 1rem;
     height: 1rem;
+    border: none;
+    background: transparent;
     opacity: 0;
+    transition: $duration-fast-02 motion(standard, productive);
 
     svg {
       border-radius: 50%;
@@ -132,14 +125,15 @@
 
   .#{$prefix}--tile__chevron {
     position: absolute;
-    right: $spacing-05;
-    bottom: $spacing-05;
+    right: 0;
+    bottom: 0;
     display: flex;
-    height: 1rem;
-    align-items: flex-end;
+    width: $spacing-09;
+    height: $spacing-09;
+    align-items: center;
+    justify-content: center;
 
     svg {
-      margin-left: $spacing-03;
       fill: $icon-primary;
       transform-origin: center;
       transition: $duration-fast-02 motion(standard, productive);
@@ -155,13 +149,28 @@
         fill: ButtonText;
       }
     }
+  }
 
-    &:hover {
-      cursor: pointer;
-    }
+  .#{$prefix}--tile__chevron--interactive {
+    @include button-reset.reset;
+
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    width: $spacing-09;
+    height: $spacing-09;
+    align-items: center;
+    justify-content: center;
 
     &:focus {
-      outline: none;
+      outline: 2px solid $focus;
+      outline-offset: -2px;
+    }
+
+    &:hover {
+      background-color: $layer-hover;
+      cursor: pointer;
     }
   }
 
@@ -171,10 +180,32 @@
     width: 100%;
     border: 0;
     color: inherit;
+    cursor: pointer;
     font-family: inherit;
     font-size: inherit;
     text-align: left;
     transition: max-height $duration-moderate-01 motion(standard, productive);
+
+    &:hover {
+      background: $layer-hover;
+    }
+  }
+
+  .#{$prefix}--tile--expandable.#{$prefix}--tile--expandable--interactive {
+    cursor: default;
+    transition: max-height $duration-moderate-01 motion(standard, productive);
+
+    &:hover {
+      background-color: $layer;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .#{$prefix}--tile--expandable--interactive:focus {
+    @include focus-outline('outline');
   }
 
   .#{$prefix}--tile-content__above-the-fold {

package/scss/components/toggletip/_toggletip.scss

@@ -19,7 +19,6 @@
     @include type.type-style('label-01');
 
     margin-right: spacing.$spacing-03;
-
     color: theme.$text-secondary;
   }
 
@@ -64,7 +63,7 @@
       'link-focus-text-color',
       theme.$focus-inverse
     );
-    @include type.type-style('body-compact-01');
+    @include type.type-style('body-01');
 
     display: grid;
     max-width: 18rem;