@carbon/styles 1.52.0 → 1.53.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.52.0",
+  "version": "1.53.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -19,7 +19,8 @@
   "files": [
     "css",
     "scss",
-    "index.scss"
+    "index.scss",
+    "telemetry.yml"
   ],
   "publishConfig": {
     "access": "public",
@@ -27,7 +28,8 @@
   },
   "scripts": {
     "build": "yarn clean && node tasks/build-css.js",
-    "clean": "rimraf css"
+    "clean": "rimraf css",
+    "postinstall": "ibmtelemetry --config=telemetry.yml"
   },
   "peerDependencies": {
     "sass": "^1.33.0"
@@ -38,14 +40,15 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.20.0",
-    "@carbon/feature-flags": "^0.17.0",
-    "@carbon/grid": "^11.21.0",
-    "@carbon/layout": "^11.20.0",
-    "@carbon/motion": "^11.16.0",
-    "@carbon/themes": "^11.32.0",
-    "@carbon/type": "^11.25.0",
-    "@ibm/plex": "6.0.0-next.6"
+    "@carbon/colors": "^11.21.0",
+    "@carbon/feature-flags": "^0.18.0",
+    "@carbon/grid": "^11.22.0",
+    "@carbon/layout": "^11.21.0",
+    "@carbon/motion": "^11.17.0",
+    "@carbon/themes": "^11.33.0",
+    "@carbon/type": "^11.26.0",
+    "@ibm/plex": "6.0.0-next.6",
+    "@ibm/telemetry-js": "^1.2.1"
   },
   "devDependencies": {
     "@carbon/test-utils": "^10.30.0",
@@ -65,5 +68,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "4f119eac6b9dbcf910a64cd89fddacbc9c61ef8c"
+  "gitHead": "7920f5261d5867837e0b7e6092c98a6597ac0771"
 }

package/scss/__tests__/theme-test.js

@@ -132,25 +132,8 @@ describe('@carbon/styles/scss/theme', () => {
         "slug-background-hover",
         "slug-gradient-hover",
         "slug-hollow-hover",
-        "slug-callout-gradient-top",
-        "slug-callout-gradient-bottom",
-        "slug-callout-aura-start",
-        "slug-callout-aura-end",
-        "slug-callout-gradient-top-hover",
-        "slug-callout-gradient-bottom-hover",
-        "slug-callout-aura-start-hover-01",
-        "slug-callout-aura-start-hover-02",
-        "slug-callout-aura-end-hover-01",
-        "slug-callout-aura-end-hover-02",
-        "slug-callout-gradient-top-selected",
-        "slug-callout-gradient-bottom-selected",
-        "slug-callout-aura-start-selected",
-        "slug-callout-aura-end-selected",
-        "ai-gradient-start-01",
-        "ai-gradient-start-02",
-        "ai-gradient-end",
-        "slug-callout-shadow-outer-01",
-        "slug-callout-shadow-outer-02",
+        "ai-popover-shadow-outer-01",
+        "ai-popover-shadow-outer-02",
         "ai-inner-shadow",
         "ai-aura-start",
         "ai-aura-start-table",
@@ -165,10 +148,10 @@ describe('@carbon/styles/scss/theme', () => {
         "ai-skeleton-background",
         "ai-skeleton-element-background",
         "ai-overlay",
-        "slug-callout-caret-center",
-        "slug-callout-caret-bottom",
-        "slug-callout-caret-bottom-background",
-        "slug-callout-caret-bottom-background-actions",
+        "ai-popover-caret-center",
+        "ai-popover-caret-bottom",
+        "ai-popover-caret-bottom-background",
+        "ai-popover-caret-bottom-background-actions",
         "chat-prompt-background",
         "chat-prompt-border-start",
         "chat-prompt-border-end",
@@ -178,6 +161,14 @@ describe('@carbon/styles/scss/theme', () => {
         "chat-avatar-bot",
         "chat-avatar-agent",
         "chat-avatar-user",
+        "chat-shell-background",
+        "chat-header-background",
+        "chat-button",
+        "chat-button-hover",
+        "chat-button-text-hover",
+        "chat-button-active",
+        "chat-button-selected",
+        "chat-button-text-selected",
         "highlight",
         "overlay",
         "toggle-off",

package/scss/_feature-flags.scss

@@ -12,6 +12,7 @@
     'enable-css-grid': true,
     'enable-v11-release': true,
     'enable-experimental-tile-contrast': false,
+    'enable-v12-tile-radio-icons': false,
   )
   !default
 );

package/scss/components/chat-button/_chat-button.scss

@@ -31,12 +31,21 @@
   // Quick action button
   .#{$prefix}--chat-btn--quick-action {
     align-items: center;
-    border: 1px solid $link-primary;
+    border: 1px solid $chat-button;
+    background: transparent;
+    color: $chat-button;
   }
 
   .#{$prefix}--chat-btn--quick-action:hover:not(:active):not([disabled]) {
     border-color: transparent;
-    background: $background-hover;
+    background: $chat-button-hover;
+    color: $chat-button-text-hover;
+  }
+
+  .#{$prefix}--chat-btn--quick-action:active {
+    border-color: transparent;
+    background: $chat-button-active;
+    color: $chat-button-text-hover;
   }
 
   .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:focus {
@@ -59,12 +68,17 @@
   .#{$prefix}--chat-btn--quick-action--selected[disabled],
   .#{$prefix}--chat-btn--quick-action--selected[disabled]:hover {
     border-color: transparent;
-    background: $background-selected;
-    color: $text-secondary;
+    background: $chat-button-selected;
+    color: $chat-button-text-selected;
   }
 
-  .#{$prefix}--chat-btn--quick-action--selected:hover {
-    color: $text-secondary;
+  .#{$prefix}--chat-btn--quick-action.#{$prefix}--chat-btn--quick-action--selected:not(
+      [disabled]
+    ):hover,
+  .#{$prefix}--chat-btn--quick-action.#{$prefix}--chat-btn--quick-action--selected:not(
+      [disabled]
+    ):active {
+    color: $chat-button-text-selected;
   }
 
   .#{$prefix}--chat-btn.#{$prefix}--skeleton {

package/scss/components/checkbox/_checkbox.scss

@@ -76,6 +76,10 @@
   .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox-label::after {
     box-sizing: border-box;
+
+    @media print {
+      print-color-adjust: exact;
+    }
   }
 
   // Spacing for presentational checkbox

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

@@ -225,7 +225,6 @@ $copy-btn-feedback: $background-inverse !default;
 
   // collapsed pre
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
-    padding-block-end: convert.to-rem(24px);
     padding-inline-end: $spacing-08;
   }
 

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

@@ -1002,6 +1002,8 @@
   tr.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--slug-row,
   tr.#{$prefix}--data-table--selected.#{$prefix}--parent-row.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--slug-row {
     @include ai-table-gradient('hover');
+
+    background-attachment: fixed;
   }
 
   tr.#{$prefix}--parent-row.cds--data-table--selected.#{$prefix}--data-table--slug-row,
@@ -1009,6 +1011,8 @@
   tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row
     + .#{$prefix}--expandable-row {
     @include ai-table-gradient('selected');
+
+    background-attachment: fixed;
   }
 
   tr.#{$prefix}--data-table--slug-row.#{$prefix}--data-table--selected td,

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -330,4 +330,32 @@
     .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty) {
     padding-inline-end: $spacing-12;
   }
+
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__selection {
+    inset-inline-end: convert.to-rem(41px);
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--invalid[data-invalid] {
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)
+      .#{$prefix}--list-box__selection::before {
+      position: absolute;
+      background-color: transparent;
+      block-size: convert.to-rem(16px);
+      content: '';
+      inline-size: convert.to-rem(1px);
+      margin-inline-end: convert.to-rem(33px);
+    }
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--multi-select)
+    .#{$prefix}--list-box__menu-icon {
+    inset-inline-end: calc($spacing-04);
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--dropdown)
+    .#{$prefix}--list-box__menu-icon {
+    inset-inline-end: calc($spacing-04);
+  }
 }

package/scss/components/fluid-search/_fluid-search.scss

@@ -59,6 +59,7 @@
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-magnifier-icon {
+    color: $icon-primary;
     inset: auto 1rem convert.to-rem(13px) auto;
     transform: none;
   }
@@ -71,16 +72,6 @@
     transition: background-color $duration-fast-01 motion(standard, productive);
   }
 
-  .#{$prefix}--search--fluid .#{$prefix}--search-close::before {
-    position: absolute;
-    display: block;
-    background: $border-subtle;
-    block-size: 1rem;
-    content: '';
-    inline-size: convert.to-rem(1px);
-    inset: auto convert.to-rem(-1px) convert.to-rem(14px) auto;
-  }
-
   .#{$prefix}--search--fluid
     .#{$prefix}--search-input:focus
     ~ .#{$prefix}--search-close:hover {

package/scss/components/link/_link.scss

@@ -19,6 +19,10 @@ $link-hover-text-color: custom-property.get-var(
   'link-hover-text-color',
   $link-primary-hover
 );
+$link-visited-text-color: custom-property.get-var(
+  'link-visited-text-color',
+  $link-visited
+);
 $link-focus-text-color: custom-property.get-var(
   'link-focus-text-color',
   $focus
@@ -46,7 +50,10 @@ $link-focus-text-color: custom-property.get-var(
     &:active,
     &:active:visited,
     &:active:visited:hover {
-      color: $text-primary;
+      @include focus-outline;
+
+      color: $link-text-color;
+      outline-color: $link-focus-text-color;
       text-decoration: underline;
     }
 
@@ -54,14 +61,15 @@ $link-focus-text-color: custom-property.get-var(
       @include focus-outline;
 
       outline-color: $link-focus-text-color;
+      text-decoration: underline;
     }
 
     &:visited {
-      color: $link-primary;
+      color: $link-visited-text-color;
     }
 
     &:visited:hover {
-      color: $link-primary-hover;
+      color: $link-visited-text-color;
     }
   }
 
@@ -77,21 +85,16 @@ $link-focus-text-color: custom-property.get-var(
   }
 
   .#{$prefix}--link.#{$prefix}--link--visited:visited {
-    color: $link-visited;
+    color: $link-visited-text-color;
   }
 
   .#{$prefix}--link.#{$prefix}--link--visited:visited:hover {
-    color: $link-primary-hover;
+    color: $link-hover-text-color;
   }
 
   .#{$prefix}--link.#{$prefix}--link--inline {
     display: inline;
     text-decoration: underline;
-
-    &:focus,
-    &:visited {
-      text-decoration: none;
-    }
   }
 
   .#{$prefix}--link--disabled.#{$prefix}--link--inline {

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

@@ -331,7 +331,7 @@ $list-box-menu-width: convert.to-rem(300px);
 
   // populated input field
   .#{$prefix}--list-box__field .#{$prefix}--text-input {
-    padding-inline-end: convert.to-rem(72px);
+    padding-inline-end: convert.to-rem(80px);
   }
 
   // invalid && populated input field
@@ -342,7 +342,7 @@ $list-box-menu-width: convert.to-rem(300px);
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input {
     // to account for clear input button outline
-    padding-inline-end: convert.to-rem(98px);
+    padding-inline-end: convert.to-rem(105px);
   }
 
   .#{$prefix}--list-box[data-invalid]
@@ -354,7 +354,7 @@ $list-box-menu-width: convert.to-rem(300px);
     .#{$prefix}--text-input
     + .#{$prefix}--list-box__invalid-icon {
     // to account for clear input button outline
-    inset-inline-end: convert.to-rem(66px);
+    inset-inline-end: convert.to-rem(82px);
   }
 
   // empty input field
@@ -434,7 +434,7 @@ $list-box-menu-width: convert.to-rem(300px);
     inline-size: convert.to-rem(24px);
     inset-block-start: 50%;
     /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
-    inset-inline-end: convert.to-rem(36px);
+    inset-inline-end: convert.to-rem(45px);
     transform: translateY(-50%);
     transition: background-color $duration-fast-01 motion(standard, productive);
     user-select: none;
@@ -893,10 +893,30 @@ $list-box-menu-width: convert.to-rem(300px);
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: $spacing-08;
+    inset-inline-end: calc($spacing-08 + 9px);
+    margin-block-start: convert.to-rem(0.5px);
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::after,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::before {
+    position: absolute;
+    background-color: $border-subtle-01;
+    block-size: convert.to-rem(16px);
+    content: '';
+    inline-size: convert.to-rem(1px);
+  }
+
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::before {
+    display: none;
+    inset-inline-start: convert.to-rem(-9px);
+  }
+
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::after {
+    display: block;
+    inset-inline-end: convert.to-rem(-9px);
+  }
+
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box:not(:has(.#{$prefix}--slug--revert)) {
     @include ai-gradient;
@@ -939,33 +959,50 @@ $list-box-menu-width: convert.to-rem(300px);
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty) {
-    padding-inline-end: convert.to-rem(120px);
+    padding-inline-end: convert.to-rem(141px);
   }
 
   .#{$prefix}--list-box__wrapper--slug
-    .#{$prefix}--list-box--invalid
-    .#{$prefix}--slug,
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--text-input--empty
+    + .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__invalid-icon.#{$prefix}--list-box__invalid-icon--warning {
+    inset-inline-end: convert.to-rem(83px);
+  }
+
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--slug::before,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
-    .#{$prefix}--slug {
-    inset-inline-end: $spacing-10;
+    .#{$prefix}--slug::before {
+    display: block;
   }
 
   .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--slug,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
     ~ .#{$prefix}--slug {
-    inset-inline-end: $spacing-10;
+    inset-inline-end: calc($spacing-10 + 18px);
   }
 
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid
     .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
-    ~ .#{$prefix}--slug,
+    .#{$prefix}--list-box__invalid-icon,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
-    ~ .#{$prefix}--slug {
-    inset-inline-end: convert.to-rem(88px);
+    .#{$prefix}--list-box__invalid-icon {
+    inset-inline-end: convert.to-rem(116px);
   }
 
   // Windows HCM fix
@@ -987,4 +1024,37 @@ $list-box-menu-width: convert.to-rem(300px);
   .#{$prefix}--list-box__selection--multi > svg {
     @include high-contrast-mode('icon-fill');
   }
+
+  .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)
+    .#{$prefix}--list-box__selection::after {
+    position: absolute;
+    background-color: $border-subtle-01;
+    block-size: convert.to-rem(16px);
+    content: '';
+    inline-size: convert.to-rem(1px);
+    margin-inline-start: convert.to-rem(33px);
+  }
+
+  .#{$prefix}--list-box--warning,
+  .#{$prefix}--list-box--invalid[data-invalid] {
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)
+      .#{$prefix}--list-box__selection::before {
+      position: absolute;
+      background-color: $border-subtle-01;
+      block-size: convert.to-rem(16px);
+      content: '';
+      inline-size: convert.to-rem(1px);
+      margin-inline-end: convert.to-rem(33px);
+    }
+  }
+
+  .#{$prefix}--list-box__wrapper--slug:has(.#{$prefix}--multi-select)
+    .#{$prefix}--list-box__menu-icon {
+    inset-inline-end: calc($spacing-04 - 4px);
+  }
+
+  .#{$prefix}--list-box__wrapper--slug:has(.#{$prefix}--dropdown)
+    .#{$prefix}--list-box__menu-icon {
+    inset-inline-end: calc($spacing-04 - 4px);
+  }
 }

package/scss/components/modal/_modal.scss

@@ -439,7 +439,8 @@
   .#{$prefix}--body--with-modal-open .#{$prefix}--modal .#{$prefix}--tooltip,
   .#{$prefix}--body--with-modal-open
     .#{$prefix}--modal
-    .#{$prefix}--overflow-menu-options {
+    .#{$prefix}--overflow-menu-options,
+  .#{$prefix}--body--with-modal-open .#{$prefix}--overflow-menu-options {
     z-index: z('modal');
   }
 
@@ -455,7 +456,7 @@
   }
 
   .#{$prefix}--modal--slug .#{$prefix}--modal-container {
-    @include callout-gradient('default', 0, 'layer');
+    @include ai-popover-gradient('default', 0, 'layer');
 
     border: 1px solid transparent;
     background-color: $layer;
@@ -465,7 +466,7 @@
 
   .#{$prefix}--modal--slug
     .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) {
-    @include callout-gradient('default', 64px, 'layer');
+    @include ai-popover-gradient('default', 64px, 'layer');
 
     box-shadow: inset 0 -80px 0 -16px $layer,
       inset 0 -160px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow;

package/scss/components/popover/_popover.scss

@@ -125,6 +125,18 @@ $popover-caret-height: custom-property.get-var(
 
   // Popover content
   .#{$prefix}--popover-content {
+    // The layout.redefine-tokens is been included here because it is been redifined in _tag.scss
+    @include layout.redefine-tokens(
+      (
+        size: (
+          height: (
+            sm: convert.to-rem(32px),
+            md: convert.to-rem(40px),
+            lg: convert.to-rem(48px),
+          ),
+        ),
+      )
+    );
     @include component-reset.reset;
 
     position: absolute;

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

@@ -123,6 +123,10 @@ $radio-border-width: 1px !default;
       @include high-contrast-mode('icon-fill') {
         background-color: ButtonText;
       }
+
+      @media print {
+        print-color-adjust: exact;
+      }
     }
   }
 

package/scss/components/slug/_slug.scss

@@ -327,14 +327,14 @@ $sizes: (
 
   // Slug callout styles
   .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-content {
-    @include callout-gradient();
+    @include ai-popover-gradient();
 
     border: 1px solid transparent;
     border-radius: convert.to-rem(8px);
     // Need to make tokens
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
-      -40px 30px 100px -25px $slug-callout-shadow-outer-01,
-      -60px 80px 60px -45px $slug-callout-shadow-outer-02;
+      -40px 30px 100px -25px $ai-popover-shadow-outer-01,
+      -60px 80px 60px -45px $ai-popover-shadow-outer-02;
     color: $text-primary;
     min-inline-size: convert.to-rem(280px);
   }
@@ -417,7 +417,7 @@ $sizes: (
     }
 
     &::after {
-      background: $slug-callout-caret-bottom-background;
+      background: $ai-popover-caret-bottom-background;
       block-size: convert.to-rem(2px);
       border-end-end-radius: 50%;
       border-end-start-radius: 50%;
@@ -530,8 +530,8 @@ $sizes: (
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     &::before {
-      border-color: $slug-callout-caret-bottom;
-      background: $slug-callout-caret-bottom-background;
+      border-color: $ai-popover-caret-bottom;
+      background: $ai-popover-caret-bottom-background;
     }
   }
 
@@ -547,7 +547,7 @@ $sizes: (
     > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
     > .#{$prefix}--popover-caret {
     &::before {
-      background: $slug-callout-caret-bottom-background-actions;
+      background: $ai-popover-caret-bottom-background-actions;
     }
   }
 
@@ -560,7 +560,7 @@ $sizes: (
     > .#{$prefix}--popover
     > .#{$prefix}--popover-caret {
     &::before {
-      border-color: $slug-callout-caret-center;
+      border-color: $ai-popover-caret-center;
     }
   }
 

package/scss/components/tag/_mixins.scss

@@ -8,11 +8,23 @@
 
 /// @access private
 /// @group tag
-@mixin tag-theme($bg-color, $text-color, $filter-hover-color: $bg-color) {
+@mixin tag-theme(
+  $bg-color,
+  $text-color,
+  $filter-hover-color: $bg-color,
+  $border-color: $bg-color
+) {
   background-color: $bg-color;
   color: $text-color;
 
-  &.#{$prefix}--tag--interactive,
+  &.#{$prefix}--tag--operational {
+    border: 1px solid $border-color;
+
+    &:hover {
+      background-color: $filter-hover-color;
+    }
+  }
+
   .#{$prefix}--tag__close-icon {
     &:hover {
       background-color: $filter-hover-color;