@carbon/styles 0.17.0 → 1.0.1

package/scss/components/breadcrumb/_breadcrumb.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/button/_button.scss

@@ -5,9 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../../config' as *;
 @use 'vars' as *;
 @use 'mixins' as *;
-@use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
@@ -219,8 +219,6 @@
       color: $text-on-color;
     }
 
-    // TODO: deprecate single dash tertiary
-    &-tertiary,
     &--tertiary {
       @include button-theme(
         transparent,
@@ -259,8 +257,6 @@
       }
     }
 
-    // TODO: deprecate single dash ghost
-    &-ghost,
     &--ghost {
       @include button-theme(
         transparent,
@@ -312,15 +308,13 @@
     padding: $button-padding-sm;
   }
 
-  // V11: change xl to 2xl
-  .#{$prefix}--btn--xl:not(.#{$prefix}--btn--icon-only) {
+  .#{$prefix}--btn--2xl:not(.#{$prefix}--btn--icon-only) {
     @include button-padding-large;
 
     min-height: rem(80px);
   }
 
-  // V11: change lg to xl
-  .#{$prefix}--btn--lg:not(.#{$prefix}--btn--icon-only) {
+  .#{$prefix}--btn--xl:not(.#{$prefix}--btn--icon-only) {
     @include button-padding-large;
 
     min-height: rem(64px);

package/scss/components/button/_tokens.scss

@@ -6,6 +6,7 @@
 //
 
 @use 'sass:map';
+@use '../../config';
 @use '../../themes';
 @use '../../utilities/component-tokens';
 

package/scss/components/code-snippet/_code-snippet.scss

@@ -67,7 +67,7 @@ $copy-btn-feedback: $background-inverse !default;
     position: relative;
     display: inline;
     padding: 0;
-    border: 2px solid transparent;
+    border: 1px solid transparent;
     background-color: $layer;
     border-radius: 4px;
     color: $text-primary;
@@ -82,7 +82,7 @@ $copy-btn-feedback: $background-inverse !default;
     }
 
     &:focus {
-      border: 2px solid $focus;
+      border: 1px solid $focus;
       outline: none;
     }
 
@@ -90,6 +90,8 @@ $copy-btn-feedback: $background-inverse !default;
       @include tooltip--caret;
 
       display: none;
+
+      border: none;
     }
 
     .#{$prefix}--copy-btn__feedback {
@@ -101,8 +103,6 @@ $copy-btn-feedback: $background-inverse !default;
       margin: auto;
       clip: auto;
     }
-
-    @include tooltip--placement('icon', 'bottom', 'center');
   }
 
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating::before,
@@ -257,12 +257,9 @@ $copy-btn-feedback: $background-inverse !default;
     transition: all $duration-fast-01 motion(standard, productive);
   }
 
-  .#{$prefix}--snippet-button {
+  .#{$prefix}--copy-btn {
     @include reset;
 
-    position: absolute;
-    top: 0;
-    right: 0;
     display: flex;
     overflow: visible;
     width: $spacing-08;
@@ -282,48 +279,44 @@ $copy-btn-feedback: $background-inverse !default;
     }
   }
 
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-button {
-    top: $spacing-03;
-    right: $spacing-03;
-    width: $spacing-07;
-    height: $spacing-07;
-  }
+  // TODO: remove copy button styles above
+  .#{$prefix}--snippet .#{$prefix}--popover-container {
+    @include font-family('sans');
 
-  .#{$prefix}--snippet-button:hover {
-    background: $layer-hover;
+    position: absolute;
+    top: 0;
+    right: 0;
   }
 
-  .#{$prefix}--snippet-button:active {
-    background-color: $copy-active;
+  // Overrides for codesnippet copy btn
+  // TLDR: Copy/CopyButton now uses IconButton, which uses Carbon buttons under the hood
+  // v10 opy just used native html button so it didn't have extra carbon styles that needed overriding
+  .#{$prefix}--snippet--inline.#{$prefix}--btn--md.#{$prefix}--btn--icon-only {
+    padding-right: 0;
+    padding-left: 0;
   }
 
-  .#{$prefix}--btn--copy__feedback {
-    @include type-style('body-compact-01');
-    @include font-family('sans');
-
-    z-index: z('overlay');
-    top: 0.75rem;
-    right: 1.25rem;
-    left: inherit;
-    font-weight: 400;
+  .#{$prefix}--snippet--inline.#{$prefix}--btn--md {
+    min-height: 1.25rem;
   }
 
-  .#{$prefix}--btn--copy__feedback::before,
-  .#{$prefix}--btn--copy__feedback::after {
-    background: $copy-btn-feedback;
+  .#{$prefix}--snippet--inline.#{$prefix}--btn--primary:hover {
+    color: $text-primary;
   }
 
-  .#{$prefix}--btn--copy__feedback::after {
-    border: none;
+  // override multi copy btn styles
+  .#{$prefix}--snippet.#{$prefix}--snippet--multi
+    .#{$prefix}--popover-container {
+    top: 0.5rem;
+    right: 0.5rem;
   }
 
-  // TODO: remove copy button styles above
-  .#{$prefix}--snippet .#{$prefix}--copy-btn {
-    @include font-family('sans');
-
-    position: absolute;
-    top: 0;
-    right: 0;
+  .#{$prefix}--snippet--multi .#{$prefix}--copy-btn.#{$prefix}--btn--md {
+    z-index: 10;
+    width: $spacing-07;
+    height: $spacing-07;
+    min-height: $spacing-07;
+    padding: 0;
   }
 
   // Show more / less button
@@ -435,14 +428,6 @@ $copy-btn-feedback: $background-inverse !default;
     }
   }
 
-  .#{$prefix}--snippet--multi .#{$prefix}--copy-btn {
-    z-index: 10;
-    top: $spacing-03;
-    right: $spacing-03;
-    width: $spacing-07;
-    height: $spacing-07;
-  }
-
   .#{$prefix}--snippet--multi
     .#{$prefix}--snippet-button
     .#{$prefix}--btn--copy__feedback {

package/scss/components/content-switcher/_content-switcher.scss

@@ -26,8 +26,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--content-switcher--xl,
   .#{$prefix}--content-switcher--lg {
     height: rem(48px);
   }

package/scss/components/copy-button/_copy-button.scss

@@ -18,63 +18,6 @@
 @use '../../utilities/visually-hidden' as *;
 
 @mixin copy-button {
-  .#{$prefix}--btn--copy {
-    position: relative;
-    overflow: visible;
-
-    .#{$prefix}--btn__icon {
-      margin-left: rem(5px);
-    }
-  }
-
-  .#{$prefix}--btn--copy__feedback {
-    position: absolute;
-    top: 1.2rem;
-    left: 50%;
-    display: none;
-
-    &::before {
-      @include box-shadow;
-      @include type-style('body-compact-01');
-
-      z-index: 2;
-      top: 1.1rem;
-      padding: $spacing-02;
-      border-radius: 4px;
-      color: $text-inverse;
-      content: attr(data-feedback);
-      font-weight: 400;
-      pointer-events: none;
-      transform: translateX(-50%);
-      white-space: nowrap;
-    }
-
-    &::after {
-      z-index: 1;
-      top: 0.85rem;
-      left: -0.3rem;
-      width: 0.6rem;
-      height: 0.6rem;
-      border-right: 1px solid $background-inverse;
-      border-bottom: 1px solid $background-inverse;
-      content: '';
-      transform: rotate(-135deg);
-    }
-
-    &::before,
-    &::after {
-      position: absolute;
-      display: block;
-      background: $background-inverse;
-    }
-
-    &--displayed {
-      display: inline-flex;
-    }
-  }
-
-  // TODO: deprecate above styles
-
   .#{$prefix}--copy-btn {
     @include reset;
 
@@ -113,8 +56,6 @@
       clip: auto;
     }
 
-    @include tooltip--placement('icon', 'bottom', 'center');
-
     &:focus {
       @include focus-outline('outline');
 

package/scss/components/dropdown/_dropdown.scss

@@ -130,7 +130,6 @@
     transition: max-height $duration-fast-02 motion(entrance, productive);
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--dropdown--light {
     background-color: $field;
 

package/scss/components/modal/_modal.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/notification/_actionable-notification.scss

@@ -78,7 +78,7 @@
   }
 
   .#{$prefix}--actionable-notification a:focus {
-    outline: 1px solid $link-inverse;
+    outline: 1px solid $focus-inverse;
   }
 
   .#{$prefix}--actionable-notification.#{$prefix}--actionable-notification--low-contrast
@@ -88,20 +88,20 @@
 
   .#{$prefix}--actionable-notification--low-contrast {
     color: $text-primary;
+  }
 
-    &::before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      border-width: 1px 1px 1px 0;
-      border-style: solid;
-      content: '';
-      filter: opacity(0.4);
-      pointer-events: none;
-    }
+  .#{$prefix}--actionable-notification--low-contrast:not(.#{$prefix}--actionable-notification--toast)::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border-width: 1px 1px 1px 0;
+    border-style: solid;
+    content: '';
+    filter: opacity(0.4);
+    pointer-events: none;
   }
 
   .#{$prefix}--actionable-notification--error {
@@ -192,13 +192,13 @@
   .#{$prefix}--actionable-notification__details {
     display: flex;
     flex-grow: 1;
-    margin: 0 $spacing-09 0 $spacing-05;
+    margin: 0 $spacing-09 0 rem(13px);
   }
 
   .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--toast)
     .#{$prefix}--actionable-notification__details {
     @include breakpoint(md) {
-      margin: 0 $spacing-05;
+      margin: 0 rem(13px);
     }
   }
 
@@ -220,12 +220,48 @@
     padding: rem(15px) 0;
   }
 
+  .#{$prefix}--actionable-notification--toast
+    .#{$prefix}--actionable-notification__text-wrapper {
+    padding: rem(15px) 0 rem(23px) 0;
+  }
+
   .#{$prefix}--actionable-notification__content {
     @include type-style('body-compact-01');
 
+    display: flex;
     word-break: break-word;
   }
 
+  .#{$prefix}--actionable-notification--toast
+    .#{$prefix}--actionable-notification__content {
+    display: block;
+  }
+
+  .#{$prefix}--actionable-notification__title {
+    @include type-style('heading-compact-01');
+
+    margin-right: $spacing-02;
+    font-weight: 600;
+    word-break: break-word;
+  }
+
+  .#{$prefix}--actionable-notification--toast
+    .#{$prefix}--actionable-notification__title {
+    margin-right: 0;
+  }
+
+  .#{$prefix}--actionable-notification__subtitle {
+    @include type-style('body-compact-01');
+
+    margin-top: 0;
+    color: $text-inverse;
+    word-break: break-word;
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__subtitle {
+    color: $text-primary;
+  }
   /* Ghost action button when inline */
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
     height: rem(32px);
@@ -273,10 +309,13 @@
 
   /* Tertiary action button when not inline (toast) */
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
-    margin-bottom: $spacing-03;
+    padding: 0 $spacing-05;
+    margin-bottom: $spacing-05;
 
-    // Button should be left aligned with text. 20px is the width of the notification icon
-    margin-left: calc(#{$spacing-07} + #{rem(20px)});
+    // Button should be left aligned with text.
+    // 20px is the width of the notification icon
+    // 2px is the width of the left border that should be negated
+    margin-left: calc(#{$spacing-07} + #{rem(20px)} - #{rem(2px)});
   }
 
   // Tertiary button styles by default use mostly "inverse" tokens. Since the non-low-contrast notification

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/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/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');
     }
   }