@carbon/styles 1.53.0-rc.0 → 1.53.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.53.0-rc.0",
+  "version": "1.53.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.21.0-rc.0",
-    "@carbon/feature-flags": "^0.18.0-rc.0",
-    "@carbon/grid": "^11.22.0-rc.0",
-    "@carbon/layout": "^11.21.0-rc.0",
-    "@carbon/motion": "^11.17.0-rc.0",
-    "@carbon/themes": "^11.33.0-rc.0",
-    "@carbon/type": "^11.26.0-rc.0",
+    "@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"
   },
@@ -68,5 +68,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "fd9030978919c8d2ce0c102db94aeabf88563c34"
+  "gitHead": "7920f5261d5867837e0b7e6092c98a6597ac0771"
 }

package/scss/__tests__/theme-test.js

@@ -163,6 +163,12 @@ describe('@carbon/styles/scss/theme', () => {
         "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/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/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
@@ -48,7 +52,7 @@ $link-focus-text-color: custom-property.get-var(
     &:active:visited:hover {
       @include focus-outline;
 
-      color: $text-primary;
+      color: $link-text-color;
       outline-color: $link-focus-text-color;
       text-decoration: underline;
     }
@@ -61,11 +65,11 @@ $link-focus-text-color: custom-property.get-var(
     }
 
     &:visited {
-      color: $link-primary;
+      color: $link-visited-text-color;
     }
 
     &:visited:hover {
-      color: $link-primary-hover;
+      color: $link-visited-text-color;
     }
   }
 
@@ -81,11 +85,11 @@ $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 {

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/toggletip/_toggletip.scss

@@ -63,6 +63,10 @@
       'link-hover-text-color',
       theme.$link-inverse
     );
+    @include custom-property.declaration(
+      'link-visited-text-color',
+      theme.$link-inverse
+    );
     @include custom-property.declaration(
       'link-focus-text-color',
       theme.$focus-inverse