@carbon/styles 0.16.2 → 1.0.0-rc.0

package/scss/components/notification/_inline-notification.scss

@@ -34,10 +34,6 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    @if not enabled('enable-v11-release') {
-      margin-top: $spacing-05;
-      margin-bottom: $spacing-05;
-    }
 
     color: $text-inverse;
 
@@ -181,10 +177,10 @@
   .#{$prefix}--inline-notification__details {
     display: flex;
     flex-grow: 1;
-    margin: 0 $spacing-09 0 $spacing-05;
+    margin: 0 $spacing-09 0 rem(13px);
 
     @include breakpoint(md) {
-      margin: 0 $spacing-05;
+      margin: 0 rem(13px);
     }
   }
 
@@ -200,24 +196,16 @@
     padding: rem(15px) 0;
   }
 
-  @if feature-flags.enabled('enable-v11-release') {
-    .#{$prefix}--inline-notification__content {
-      @include type-style('body-compact-01');
-
-      word-break: break-word;
-    }
-  } @else {
-    .#{$prefix}--inline-notification__title {
-      @include type-style('heading-compact-01');
+  .#{$prefix}--inline-notification__title {
+    @include type-style('heading-compact-01');
 
-      margin: 0 $spacing-02 0 0;
-    }
+    margin: 0 $spacing-02 0 0;
+  }
 
-    .#{$prefix}--inline-notification__subtitle {
-      @include type-style('body-compact-01');
+  .#{$prefix}--inline-notification__subtitle {
+    @include type-style('body-compact-01');
 
-      word-break: break-word;
-    }
+    word-break: break-word;
   }
 
   .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {

package/scss/components/notification/_toast-notification.scss

@@ -31,22 +31,11 @@
     display: flex;
     width: rem(288px);
     height: auto;
-    padding-left: $spacing-05;
-    @if not enabled('enable-v11-release') {
-      margin-top: $spacing-03;
-      margin-right: $spacing-05;
-      margin-bottom: $spacing-03;
-    }
+    padding-left: rem(13px);
 
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $text-inverse;
 
-    @if not enabled('enable-v11-release') {
-      &:first-child {
-        margin-top: $spacing-05;
-      }
-    }
-
     @include breakpoint(max) {
       width: rem(352px);
     }
@@ -151,24 +140,8 @@
     margin-right: $spacing-05;
   }
 
-  @if feature-flags.enabled('enable-v11-release') {
-    .#{$prefix}--toast-notification__content {
-      @include type-style('body-compact-01');
-
-      margin-top: $spacing-05;
-      margin-right: $spacing-05;
-      margin-bottom: $spacing-05;
-      word-break: break-word;
-    }
-
-    .#{$prefix}--toast-notification--low-contrast
-      .#{$prefix}--toast-notification__content {
-      color: $text-primary;
-    }
-  } @else {
-    .#{$prefix}--toast-notification__details {
-      margin-right: $spacing-05;
-    }
+  .#{$prefix}--toast-notification__details {
+    margin-right: $spacing-05;
   }
 
   .#{$prefix}--toast-notification__close-button {
@@ -210,41 +183,39 @@
     fill: $icon-primary;
   }
 
-  @if not feature-flags.enabled('enable-v11-release') {
-    .#{$prefix}--toast-notification__title {
-      @include type-style('heading-compact-01');
+  .#{$prefix}--toast-notification__title {
+    @include type-style('heading-compact-01');
 
-      margin-top: $spacing-05;
-      font-weight: 600;
-      word-break: break-word;
-    }
+    margin-top: $spacing-05;
+    font-weight: 600;
+    word-break: break-word;
+  }
 
-    .#{$prefix}--toast-notification__subtitle {
-      @include type-style('body-compact-01');
+  .#{$prefix}--toast-notification__subtitle {
+    @include type-style('body-compact-01');
 
-      margin-top: 0;
-      margin-bottom: $spacing-05;
-      color: $text-inverse;
-      word-break: break-word;
-    }
+    margin-top: 0;
+    margin-bottom: $spacing-05;
+    color: $text-inverse;
+    word-break: break-word;
+  }
 
-    .#{$prefix}--toast-notification--low-contrast
-      .#{$prefix}--toast-notification__subtitle {
-      color: $text-primary;
-    }
+  .#{$prefix}--toast-notification--low-contrast
+    .#{$prefix}--toast-notification__subtitle {
+    color: $text-primary;
+  }
 
-    .#{$prefix}--toast-notification__caption {
-      @include type-style('body-compact-01');
+  .#{$prefix}--toast-notification__caption {
+    @include type-style('body-compact-01');
 
-      padding-top: $spacing-03;
-      margin-bottom: $spacing-05;
-      color: $text-inverse;
-    }
+    padding-top: $spacing-03;
+    margin-bottom: $spacing-05;
+    color: $text-inverse;
+  }
 
-    .#{$prefix}--toast-notification--low-contrast
-      .#{$prefix}--toast-notification__caption {
-      color: $text-primary;
-    }
+  .#{$prefix}--toast-notification--low-contrast
+    .#{$prefix}--toast-notification__caption {
+    color: $text-primary;
   }
 
   // Windows HCM fix

package/scss/components/notification/_tokens.scss

@@ -7,7 +7,8 @@
 
 @use 'sass:color';
 @use "sass:map";
-@use "sass:list";
+@use 'sass:list';
+@use '../../config';
 @use '../../colors';
 @use '../../themes';
 @use '../../theme';

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -78,7 +78,7 @@
   .#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open,
   .#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open
     .#{$prefix}--overflow-menu__trigger {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--overflow-menu__icon {
@@ -121,15 +121,15 @@
   }
 
   .#{$prefix}--overflow-menu-options--light {
-    background-color: $field-02;
+    background-color: $layer;
 
     &::after {
-      background-color: $field-02;
+      background-color: $layer;
     }
   }
 
   .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open:hover {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not(.#{$prefix}--breadcrumb-menu-options)::after {
@@ -231,7 +231,7 @@
   }
 
   .#{$prefix}--overflow-menu--light .#{$prefix}--overflow-menu--divider {
-    border-top: 1px solid $border-subtle-02;
+    border-top: 1px solid $border-subtle;
   }
 
   a.#{$prefix}--overflow-menu-options__btn::before {

package/scss/components/pagination/_unstable_pagination.scss

@@ -5,8 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../breakpoint' as *;
 @use '../../config' as *;
+@use '../../breakpoint' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;

package/scss/components/popover/_popover.scss

@@ -79,14 +79,6 @@ $popover-caret-height: custom-property.get-var(
 
   /// Modifiers
 
-  // Light modifier
-  .#{$prefix}--popover--light .#{$prefix}--popover-content {
-    @include custom-property.declaration(
-      'popover-background-color',
-      theme.$layer-02
-    );
-  }
-
   // High contrast modifier
   .#{$prefix}--popover--high-contrast .#{$prefix}--popover {
     @include custom-property.declaration(

package/scss/components/progress-bar/_progress-bar.scss

@@ -11,6 +11,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/visually-hidden' as *;
 
 /// Progress Bar styles
 /// @access public
@@ -87,4 +88,24 @@
       background-position-x: -105%;
     }
   }
+
+  .#{$prefix}--progress-bar--inline {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__label {
+    flex-shrink: 0;
+    margin-bottom: 0;
+    margin-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__helper-text {
+    @include visually-hidden;
+  }
+
+  .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__label,
+  .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__helper-text {
+    padding-inline: $spacing-05;
+  }
 }

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -57,7 +57,7 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     position: absolute;
     left: 0;
     width: rem(128px);
-    height: 1px;
+    height: 2px;
     border: $progress-indicator-bar-width;
   }
 
@@ -97,8 +97,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
   }
 
   .#{$prefix}--progress-label:hover {
-    box-shadow: 0 rem(1px) $link-primary;
-    color: $link-primary;
+    box-shadow: 0 rem(1px) $link-primary-hover;
+    color: $link-primary-hover;
     cursor: pointer;
   }
 
@@ -115,8 +115,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
 
   .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable)
     .#{$prefix}--progress-label:active {
-    box-shadow: 0 rem(3px) 0 0 $background-brand;
-    color: $background-brand;
+    box-shadow: 0 rem(3px) 0 0 $text-primary;
+    color: $text-primary;
   }
 
   //OVERFLOW STYLING

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

@@ -15,6 +15,7 @@
 @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 *;
@@ -109,16 +110,7 @@ $radio-border-width: 1px !default;
       transform: scale(0.5);
 
       // Allow the selected button to be seen in Windows HCM for IE/Edge
-      @media screen and (-ms-high-contrast: active) {
-        // Utilize a system color variable to accommodate any user HCM theme
-        background-color: WindowText;
-      }
-
-      // Firefox only HCM solution
-      @media screen and (prefers-contrast) {
-        // Utilize a system color variable to accommodate any user HCM theme
-        border: 2px solid WindowText;
-      }
+      @include high-contrast-mode('icon-fill');
     }
   }
 

package/scss/components/search/_search.scss

@@ -107,10 +107,16 @@
     // 12px padding on either side of icon + 16px icon (40px)
     padding: 0 $spacing-08;
   }
+
   .#{$prefix}--search--md .#{$prefix}--search-magnifier-icon {
     left: rem(12px);
   }
 
+  .#{$prefix}--search--md:not(.#{$prefix}--toolbar-search-container-active)
+    .#{$prefix}--search-magnifier-icon {
+    left: 0;
+  }
+
   // Large styles
   .#{$prefix}--search--lg .#{$prefix}--search-input,
   .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded

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/time-picker/_time-picker.scss

@@ -83,9 +83,6 @@
     max-height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--time-picker--xl .#{$prefix}--select-input,
-  .#{$prefix}--time-picker--xl .#{$prefix}--time-picker__input-field,
   .#{$prefix}--time-picker--lg .#{$prefix}--select-input,
   .#{$prefix}--time-picker--lg .#{$prefix}--time-picker__input-field {
     height: rem(48px);

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;

package/scss/components/treeview/_treeview.scss

@@ -171,7 +171,7 @@
     }
   }
 
-  .#{$prefix}--tree--compact .#{$prefix}--tree-node__label {
+  .#{$prefix}--tree--xs .#{$prefix}--tree-node__label {
     min-height: rem(24px);
   }
 }

package/scss/components/ui-shell/content/_content.scss

@@ -15,7 +15,6 @@
 @mixin content {
   .#{$prefix}--content {
     padding: 2rem;
-    background: $layer;
     color: $text-primary;
     will-change: margin-left;
   }