@carbon/styles 0.12.0 → 0.14.0

package/scss/components/link/_link.scss

@@ -11,8 +11,19 @@
 @use '../../theme' as *;
 @use '../../type';
 @use '../../utilities/component-reset';
+@use '../../utilities/custom-property';
 @use '../../utilities/focus-outline' as *;
 
+$link-text-color: custom-property.get-var('link-text-color', $link-primary);
+$link-hover-text-color: custom-property.get-var(
+  'link-hover-text-color',
+  $link-primary-hover
+);
+$link-focus-text-color: custom-property.get-var(
+  'link-focus-text-color',
+  $focus
+);
+
 /// Link styles
 /// @access public
 /// @group link
@@ -22,13 +33,13 @@
     @include type.type-style('body-short-01');
 
     display: inline-flex;
-    color: $link-primary;
+    color: $link-text-color;
     outline: none;
     text-decoration: none;
     transition: color $duration-fast-01 motion(standard, productive);
 
     &:hover {
-      color: $link-primary-hover;
+      color: $link-hover-text-color;
       text-decoration: underline;
     }
 
@@ -41,6 +52,8 @@
 
     &:focus {
       @include focus-outline;
+
+      outline-color: $link-focus-text-color;
     }
 
     &:visited {

package/scss/components/list-box/_list-box.scss

@@ -92,8 +92,6 @@ $list-box-menu-width: rem(300px);
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl,
   .#{$prefix}--list-box--lg {
     height: rem(48px);
     max-height: rem(48px);
@@ -114,7 +112,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--expanded:hover.#{$prefix}--list-box--light:hover {
-    background-color: $field-02;
+    background-color: $field;
   }
 
   .#{$prefix}--list-box .#{$prefix}--text-input {
@@ -155,21 +153,21 @@ $list-box-menu-width: rem(300px);
   // V11: Possibly deprecate
   // Light variation for 'list-box'
   .#{$prefix}--list-box--light {
-    background-color: $field-02;
+    background-color: $field;
 
     &:hover {
-      background-color: $layer-hover-02;
+      background-color: $layer-hover;
     }
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
-    background: $field-02;
+    background: $field;
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle-02;
+    border-top-color: $border-subtle;
   }
 
   .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
@@ -183,7 +181,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light.#{$prefix}--list-box--disabled {
-    background-color: $field-02;
+    background-color: $field;
   }
 
   .#{$prefix}--list-box--disabled,
@@ -479,7 +477,7 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection--multi {
-    @include tag-theme($text-disabled, $field-disabled);
+    @include tag-theme($text-disabled, $field);
 
     > svg {
       fill: $icon-disabled;
@@ -524,9 +522,6 @@ $list-box-menu-width: rem(300px);
     max-height: rem(220px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--xl
-    .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg
     .#{$prefix}--list-box__menu {
     // 48px item height * 5.5 items shown
@@ -561,15 +556,13 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
-    background-color: $layer-hover-02;
+    background-color: $layer-hover;
   }
 
   .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item,
   .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item {
     height: rem(48px);
   }
@@ -580,8 +573,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:active {
-    // To Do: What should this variable be?
-    // background-color: $selected-light-ui;
+    background-color: $layer-selected;
   }
 
   .#{$prefix}--list-box--disabled
@@ -653,8 +645,6 @@ $list-box-menu-width: rem(300px);
     padding-bottom: rem(7px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item__option,
   .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option {
     height: rem(48px);
     padding-top: rem(15px);
@@ -736,9 +726,8 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item--active {
-    // To Do: What should this token be?
-    // border-bottom-color: $selected-light-ui;
-    // background-color: $selected-light-ui;
+    border-bottom-color: $layer-selected;
+    background-color: $layer-selected;
   }
 
   .#{$prefix}--list-box__menu-item--active:hover,
@@ -803,11 +792,6 @@ $list-box-menu-width: rem(300px);
     bottom: 2rem;
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--up.#{$prefix}--dropdown--xl
-    .#{$prefix}--list-box__menu,
-  .#{$prefix}--list-box--up.#{$prefix}--list-box--xl
-    .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--up.#{$prefix}--dropdown--lg
     .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--up.#{$prefix}--list-box--lg

package/scss/components/modal/_modal.scss

@@ -57,7 +57,8 @@
     .#{$prefix}--dropdown,
     .#{$prefix}--dropdown-list,
     .#{$prefix}--number input[type='number'],
-    .#{$prefix}--date-picker__input {
+    .#{$prefix}--date-picker__input,
+    .#{$prefix}--multi-select {
       background-color: $field-02;
     }
   }
@@ -67,6 +68,9 @@
     transition: transform $duration-moderate-02 motion(entrance, expressive);
   }
 
+  // -----------------------------
+  // Modal container
+  // -----------------------------
   .#{$prefix}--modal-container {
     position: fixed;
     top: 0;
@@ -90,17 +94,6 @@
       width: 84%;
       height: auto;
       max-height: 90%;
-
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
-      .#{$prefix}--modal-content__regular-content {
-        padding-right: 20%;
-      }
-
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
     }
 
     @include breakpoint(lg) {
@@ -113,30 +106,81 @@
     }
   }
 
-  .#{$prefix}--modal-header,
+  // -----------------------------
+  // Modal content
+  // -----------------------------
   .#{$prefix}--modal-content {
+    @include type-style('body-long-01');
+
+    position: relative;
+    // Required to accommodate focus outline's negative offset:
+    padding-top: $spacing-03;
+    // anything besides text/p spans full width, with just 16px padding
+    padding-right: $spacing-05;
     padding-left: $spacing-05;
+    margin-bottom: $spacing-09;
+    color: $text-primary;
+    font-weight: 400;
+    grid-column: 1/-1;
+    grid-row: 2/-2;
+    overflow-y: auto;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
   }
 
-  .#{$prefix}--modal-header,
-  .#{$prefix}--modal-content,
+  //TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated
+  // text/p gets 20% right padding
+  .#{$prefix}--modal-content p,
   .#{$prefix}--modal-content__regular-content {
-    padding-right: $spacing-05;
+    padding-right: 20%;
+    @include type-style('body-long-01');
   }
 
+  //TO-DO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\
+  // anything besides text/p spans full width, with just 16px padding
   .#{$prefix}--modal-content--with-form {
     padding-right: $spacing-05;
   }
 
+  // -----------------------------
+  // Modal header
+  // -----------------------------
+  .#{$prefix}--modal-header {
+    padding-top: $spacing-05;
+    padding-right: $spacing-09;
+    padding-left: $spacing-05;
+    margin-bottom: $spacing-03;
+    grid-column: 1/-1;
+    grid-row: 1/1;
+  }
+
+  .#{$prefix}--modal-header__label {
+    @include type-style('label-01');
+
+    margin-bottom: $spacing-02;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--modal-header__heading {
+    @include type-style('productive-heading-03');
+
+    color: $text-primary;
+  }
+
+  // -----------------------------
+  // XS Modal
+  // -----------------------------
   .#{$prefix}--modal-container--xs {
-    .#{$prefix}--modal-header {
-      padding-right: $spacing-09;
+    //text always spans full width in xs modals
+    .#{$prefix}--modal-content__regular-content {
+      padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
+    .#{$prefix}--modal-content p {
+      //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
+      padding-right: 0;
     }
 
     @include breakpoint(md) {
@@ -153,15 +197,18 @@
     }
   }
 
+  // -----------------------------
+  // SM Modal
+  // -----------------------------
   .#{$prefix}--modal-container--sm {
-    .#{$prefix}--modal-header {
-      padding-right: $spacing-09;
+    //text spans full width in sm modals below 1056
+    .#{$prefix}--modal-content__regular-content {
+      padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
+    .#{$prefix}--modal-content p {
+      //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
+      padding-right: 0;
     }
 
     @include breakpoint(md) {
@@ -171,48 +218,24 @@
     @include breakpoint(lg) {
       width: 42%;
       max-height: 72%;
-    }
 
-    @include breakpoint(xlg) {
-      width: 36%;
-
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
+      .#{$prefix}--modal-content p,
       .#{$prefix}--modal-content__regular-content {
         padding-right: 20%;
       }
+    }
 
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
+    @include breakpoint(xlg) {
+      width: 36%;
     }
   }
 
+  // -----------------------------
+  // LG Modal
+  // -----------------------------
   .#{$prefix}--modal-container--lg {
-    .#{$prefix}--modal-header {
-      padding-right: $spacing-09;
-    }
-
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
-    }
-
     @include breakpoint(md) {
       width: 96%;
-
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
-      .#{$prefix}--modal-content__regular-content {
-        padding-right: 20%;
-      }
-
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
     }
 
     @include breakpoint(lg) {
@@ -225,49 +248,9 @@
     }
   }
 
-  .#{$prefix}--modal-header {
-    padding-top: $spacing-05;
-    padding-right: $spacing-09;
-    margin-bottom: $spacing-03;
-    grid-column: 1/-1;
-    grid-row: 1/1;
-  }
-
-  .#{$prefix}--modal-header__label {
-    @include type-style('label-01');
-
-    margin-bottom: $spacing-02;
-    color: $text-secondary;
-  }
-
-  .#{$prefix}--modal-header__heading {
-    @include type-style('productive-heading-03');
-
-    color: $text-primary;
-  }
-
-  .#{$prefix}--modal-content {
-    @include type-style('body-long-01');
-
-    position: relative;
-    // Required to accommodate focus outline's negative offset:
-    padding-top: $spacing-03;
-    margin-bottom: $spacing-09;
-    color: $text-primary;
-    font-weight: 400;
-    grid-column: 1/-1;
-    grid-row: 2/-2;
-    overflow-y: auto;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
-  .#{$prefix}--modal-content > p {
-    @include type-style('body-long-01');
-  }
-
+  // -----------------------------
+  // Modal overflow
+  // -----------------------------
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
     padding-bottom: $spacing-07;
@@ -313,6 +296,9 @@
     }
   }
 
+  // -----------------------------
+  // Modal footer
+  // -----------------------------
   .#{$prefix}--modal-footer {
     display: flex;
     height: rem(64px);
@@ -336,6 +322,9 @@
     align-items: flex-start;
   }
 
+  // -----------------------------
+  // Modal close btn
+  // -----------------------------
   .#{$prefix}--modal-close {
     position: absolute;
     z-index: 2;

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

@@ -324,5 +324,8 @@
   .#{$prefix}--inline-notification__icon {
     @include high-contrast-mode('icon-fill');
   }
+  .#{$prefix}--inline-notification__close-icon {
+    @include high-contrast-mode('icon-fill');
+  }
   /* stylelint-enable */
 }

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

@@ -255,6 +255,9 @@
   .#{$prefix}--toast-notification__close-button:focus {
     @include high-contrast-mode('focus');
   }
+  .#{$prefix}--toast-notification__close-icon {
+    @include high-contrast-mode('icon-fill');
+  }
   .#{$prefix}--toast-notification__icon {
     @include high-contrast-mode('icon-fill');
   }

package/scss/components/number-input/_number-input.scss

@@ -91,7 +91,7 @@
   .#{$prefix}--number input[type='number']:disabled,
   .#{$prefix}--number--readonly input[type='number'] {
     border-bottom-color: transparent;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $text-disabled;
     cursor: not-allowed;
   }

package/scss/components/pagination/_pagination.scss

@@ -26,11 +26,11 @@
 
   .#{$prefix}--pagination {
     @include component-reset.reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: flex;
     width: calc(100% - 1px);
-    min-height: 3rem;
+    min-height: rem(40px);
     align-items: center;
     justify-content: space-between;
     border-top: 1px solid $border-subtle;
@@ -62,6 +62,14 @@
     }
   }
 
+  .#{$prefix}--pagination--sm {
+    min-height: rem(32px);
+  }
+
+  .#{$prefix}--pagination--lg {
+    min-height: rem(48px);
+  }
+
   .#{$prefix}--pagination .#{$prefix}--select {
     height: 100%;
     align-items: center;
@@ -73,19 +81,45 @@
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input {
+    @include type-style('body-compact-01');
+
     width: auto;
     min-width: auto;
-    height: 3rem;
+    height: 100%;
+    line-height: rem(40px);
   }
 
+  // Extra specificity is needed to preserve padding
   .#{$prefix}--pagination
     .#{$prefix}--select--inline
     .#{$prefix}--select-input {
     padding: 0 2.25rem 0 $spacing-05;
   }
 
+  .#{$prefix}--pagination--sm .#{$prefix}--select-input {
+    line-height: rem(32px);
+  }
+
+  .#{$prefix}--pagination--lg .#{$prefix}--select-input {
+    line-height: rem(48px);
+  }
+
   .#{$prefix}--pagination .#{$prefix}--select-input:hover {
-    background: $background-hover;
+    background: $layer-hover;
+  }
+
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus,
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus
+    option,
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus
+    optgroup {
+    background-color: $layer;
   }
 
   .#{$prefix}--pagination .#{$prefix}--select__arrow {
@@ -108,7 +142,7 @@
   .#{$prefix}--pagination__left,
   .#{$prefix}--pagination__right {
     display: flex;
-    height: 3rem;
+    height: 100%;
     align-items: center;
   }
 
@@ -155,8 +189,9 @@
     @include component-reset.reset;
 
     display: flex;
-    width: $spacing-09;
-    height: 100%;
+    width: rem(40px);
+    height: rem(40px);
+    min-height: rem(32px);
     align-items: center;
     justify-content: center;
     border: none;
@@ -169,6 +204,20 @@
       background-color $duration-fast-02 motion(standard, productive);
   }
 
+  .#{$prefix}--pagination--sm .#{$prefix}--pagination__button,
+  .#{$prefix}--pagination--sm
+    .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    width: rem(32px);
+    height: rem(32px);
+  }
+
+  .#{$prefix}--pagination--lg .#{$prefix}--pagination__button,
+  .#{$prefix}--pagination--lg
+    .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    width: rem(48px);
+    height: rem(48px);
+  }
+
   .#{$prefix}--pagination__button:focus,
   .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button {
     @include focus-outline('outline');

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

@@ -34,6 +34,7 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button-group {
     @include reset;
 
+    position: relative;
     display: flex;
     align-items: center;
   }
@@ -54,7 +55,7 @@ $radio-border-width: 1px !default;
 
     .#{$prefix}--radio-button__label {
       margin-right: 0;
-      line-height: carbon-mini-units(2.5);
+      line-height: 1.25;
     }
 
     .#{$prefix}--radio-button__label:not(:last-of-type) {
@@ -69,7 +70,7 @@ $radio-border-width: 1px !default;
   }
 
   .#{$prefix}--radio-button__label {
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     display: flex;
     align-items: center;

package/scss/components/select/_select.scss

@@ -90,7 +90,7 @@
     &:disabled,
     &:hover:disabled {
       border-bottom-color: $border-disabled;
-      background-color: $field-disabled;
+      background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
     }
@@ -214,9 +214,14 @@
     color: $text-primary;
   }
 
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus option,
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus optgroup {
+    background-color: $background;
+  }
+
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled],
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled]:hover {
-    background-color: $field-disabled;
+    background-color: $field;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select__arrow {

package/scss/components/slider/_slider.scss

@@ -185,7 +185,7 @@
     .#{$prefix}--slider-text-input,
   .#{$prefix}--slider--disabled ~ .#{$prefix}--slider-text-input {
     border: none;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $text-disabled;
     cursor: not-allowed;
     transition: none;

package/scss/components/tag/_tag.scss

@@ -123,7 +123,7 @@
   .#{$prefix}--tag--disabled,
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
   .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
-    @include tag-theme($layer-disabled, $text-disabled);
+    @include tag-theme($layer, $text-disabled);
 
     &:hover {
       cursor: not-allowed;

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

@@ -77,7 +77,7 @@
   //-----------------------------
   .#{$prefix}--text-area:disabled {
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $text-disabled;
     cursor: not-allowed;
     outline: none;
@@ -102,4 +102,10 @@
       color: transparent;
     }
   }
+
+  .#{$prefix}--text-area__label-wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }