@carbon/styles 0.13.0-rc.0 → 0.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.13.0-rc.0",
+  "version": "0.13.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "@carbon/grid": "^10.40.0",
     "@carbon/layout": "^10.35.0",
     "@carbon/motion": "^10.27.0",
-    "@carbon/themes": "^10.49.0",
+    "@carbon/themes": "^10.50.0",
     "@carbon/type": "^10.40.0",
     "@ibm/plex": "6.0.0-next.6"
   },
@@ -33,5 +33,5 @@
     "@carbon/test-utils": "^10.21.0",
     "css": "^3.0.0"
   },
-  "gitHead": "885c987334058efa5ba30582d615c04de2e631a4"
+  "gitHead": "e76c42ab78cbee043db643597b7b5d79bd387c9b"
 }

package/scss/components/accordion/_accordion.scss

@@ -87,7 +87,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     }
 
     &:hover::before {
-      background-color: $background-hover;
+      background-color: $layer-hover;
     }
 
     &:focus {
@@ -125,11 +125,15 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
   .#{$prefix}--accordion__item--disabled,
   .#{$prefix}--accordion__item--disabled + .#{$prefix}--accordion__item {
-    border-top: 1px solid $border-disabled;
+    // v10 icon doesn't have 1:1 translation, keeping color same as enabled state
+    // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147
+    border-top: 1px solid $border-subtle;
   }
 
   li.#{$prefix}--accordion__item--disabled:last-of-type {
-    border-bottom: 1px solid $border-disabled;
+    // v10 icon doesn't have 1:1 translation, keeping color same as enabled state
+    // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147
+    border-bottom: 1px solid $border-subtle;
   }
 
   .#{$prefix}--accordion__arrow {

package/scss/components/button/_tokens.scss

@@ -230,15 +230,15 @@ $button-tertiary-active: (
 ) !default;
 
 $button-danger-hover: (
-  fallback: #b81921,
+  fallback: #b81922,
   values: (
     (
       theme: themes.$white,
-      value: #b81921,
+      value: #b81922,
     ),
     (
       theme: themes.$g10,
-      value: #b81921,
+      value: #b81922,
     ),
     (
       theme: themes.$g90,
@@ -252,59 +252,59 @@ $button-danger-hover: (
 ) !default;
 
 $button-primary-hover: (
-  fallback: #0353e9,
+  fallback: #0050e6,
   values: (
     (
       theme: themes.$white,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g10,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g90,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g100,
-      value: #0353e9,
+      value: #0050e6,
     ),
   ),
 ) !default;
 
 $button-secondary-hover: (
-  fallback: #4c4c4c,
+  fallback: #474747,
   values: (
     (
       theme: themes.$white,
-      value: #4c4c4c,
+      value: #474747,
     ),
     (
       theme: themes.$g10,
-      value: #4c4c4c,
+      value: #474747,
     ),
     (
       theme: themes.$g90,
-      value: #606060,
+      value: #5e5e5e,
     ),
     (
       theme: themes.$g100,
-      value: #606060,
+      value: #5e5e5e,
     ),
   ),
 ) !default;
 
 $button-tertiary-hover: (
-  fallback: #0353e9,
+  fallback: #0050e6,
   values: (
     (
       theme: themes.$white,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g10,
-      value: #0353e9,
+      value: #0050e6,
     ),
     (
       theme: themes.$g90,

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

@@ -38,13 +38,13 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--disabled,
   .#{$prefix}--snippet--disabled
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
-    background-color: $layer-disabled;
+    background-color: $layer;
     color: $text-disabled;
   }
 
   .#{$prefix}--snippet--disabled .#{$prefix}--snippet-btn--expand:hover,
   .#{$prefix}--snippet--disabled .#{$prefix}--copy-btn:hover {
-    background-color: $layer-disabled;
+    background-color: $layer;
     color: $text-disabled;
     cursor: not-allowed;
   }

package/scss/components/data-table/action/_data-table-action.scss

@@ -80,11 +80,15 @@
 
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
     height: 100%;
-    padding: 0;
     cursor: pointer;
     opacity: 0;
   }
 
+  .#{$prefix}--toolbar-search-container-expandable:not(.#{$prefix}--toolbar-search-container-active)
+    .#{$prefix}--search-input {
+    padding: 0;
+  }
+
   .#{$prefix}--toolbar-search-container-expandable
     .#{$prefix}--search-magnifier-icon {
     left: 0;
@@ -95,7 +99,7 @@
 
   .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
     .#{$prefix}--search-magnifier-icon {
-    background-color: $layer-disabled;
+    background-color: $layer;
     cursor: not-allowed;
     transition: background-color none;
   }

package/scss/components/date-picker/_date-picker.scss

@@ -106,7 +106,7 @@
 
     &:disabled {
       border-bottom: 1px solid transparent;
-      background-color: $field-disabled;
+      background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
     }

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

@@ -479,7 +479,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;

package/scss/components/modal/_modal.scss

@@ -91,8 +91,7 @@
       height: auto;
       max-height: 90%;
 
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
+      .#{$prefix}--modal-content p,
       .#{$prefix}--modal-content__regular-content {
         padding-right: 20%;
       }
@@ -176,8 +175,7 @@
     @include breakpoint(xlg) {
       width: 36%;
 
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
+      .#{$prefix}--modal-content p,
       .#{$prefix}--modal-content__regular-content {
         padding-right: 20%;
       }
@@ -203,8 +201,7 @@
     @include breakpoint(md) {
       width: 96%;
 
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
+      .#{$prefix}--modal-content p,
       .#{$prefix}--modal-content__regular-content {
         padding-right: 20%;
       }

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;
@@ -75,7 +83,16 @@
   .#{$prefix}--pagination .#{$prefix}--select-input {
     width: auto;
     min-width: auto;
-    height: 3rem;
+    height: 100%;
+    line-height: rem(40px);
+  }
+
+  .#{$prefix}--pagination--sm .#{$prefix}--select-input {
+    line-height: rem(32px);
+  }
+
+  .#{$prefix}--pagination--lg .#{$prefix}--select-input {
+    line-height: rem(48px);
   }
 
   .#{$prefix}--pagination
@@ -85,7 +102,18 @@
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input:hover {
-    background: $background-hover;
+    background: $layer-hover;
+  }
+
+  .#{$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 +136,7 @@
   .#{$prefix}--pagination__left,
   .#{$prefix}--pagination__right {
     display: flex;
-    height: 3rem;
+    height: 100%;
     align-items: center;
   }
 
@@ -155,8 +183,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 +198,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/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;
     }
@@ -221,7 +221,7 @@
 
   .#{$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;

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

@@ -216,7 +216,7 @@
     @include focus-outline('reset');
 
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $text-disabled;
     cursor: not-allowed;
     // Needed to fix disabled text in Safari #6673

package/scss/components/tile/_tile.scss

@@ -93,7 +93,7 @@
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled,
   .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
     display: block;
-    background-color: $layer-disabled;
+    background-color: $layer;
     color: $text-disabled;
   }
 

package/scss/components/toggle/_toggle.scss

@@ -302,7 +302,7 @@
       + .#{$prefix}--toggle__label
       .#{$prefix}--toggle__appearance {
       &::before {
-        background-color: $layer-disabled;
+        background-color: $layer;
       }
 
       &::after {
@@ -581,7 +581,7 @@
     .#{$prefix}--toggle-input--small:disabled:checked
       + .#{$prefix}--toggle-input__label
       .#{$prefix}--toggle__check {
-      fill: $layer-disabled;
+      fill: $layer;
     }
 
     //----------------------------------------------

package/scss/components/tooltip/_index.scss

@@ -10,3 +10,4 @@
 
 @include tooltip.tooltip;
 @include tooltip.icon-tooltip;
+@include tooltip.definition-tooltip;

package/scss/components/tooltip/_tooltip.scss

@@ -11,6 +11,8 @@
 @use '../../type';
 @use '../../utilities/custom-property';
 @use '../../utilities/convert';
+@use '../../utilities/button-reset';
+@use '../../utilities/focus-outline';
 
 $tooltip-padding-block: custom-property.get-var(
   'tooltip-padding-block',
@@ -37,6 +39,34 @@ $tooltip-padding-inline: custom-property.get-var(
   }
 }
 
+@mixin definition-tooltip {
+  .#{$prefix}--definition-term {
+    @include button-reset.reset;
+
+    border-bottom: 1px dotted theme.$border-strong;
+    border-radius: 0;
+
+    color: theme.$text-primary;
+  }
+
+  .#{$prefix}--definition-term:focus {
+    @include focus-outline.focus-outline;
+
+    border-bottom-color: theme.$border-interactive;
+  }
+
+  .#{$prefix}--definition-term:hover {
+    border-bottom-color: theme.$border-interactive;
+  }
+
+  .#{$prefix}--definition-tooltip {
+    @include type.type-style('body-long-01');
+
+    max-width: convert.rem(176px);
+    padding: convert.rem(8px) convert.rem(16px);
+  }
+}
+
 @mixin icon-tooltip {
   .#{$prefix}--icon-tooltip {
     @include custom-property.declaration(