@carbon/styles 1.53.0-rc.0 → 1.53.0

package/css/styles.css

@@ -2809,6 +2809,12 @@ em {
   --cds-chat-bubble-agent: #ffffff;
   --cds-chat-bubble-agent-border: #e0e0e0;
   --cds-chat-bubble-user: #e0e0e0;
+  --cds-chat-button: #0f62fe;
+  --cds-chat-button-active: rgba(141, 141, 141, 0.5);
+  --cds-chat-button-hover: rgba(141, 141, 141, 0.12);
+  --cds-chat-button-selected: rgba(141, 141, 141, 0.2);
+  --cds-chat-button-text-hover: #0043ce;
+  --cds-chat-button-text-selected: #525252;
   --cds-chat-header-background: #ffffff;
   --cds-chat-prompt-background: #ffffff;
   --cds-chat-prompt-border-end: rgba(244, 244, 244, 0);
@@ -3027,6 +3033,12 @@ em {
   --cds-chat-bubble-agent: #ffffff;
   --cds-chat-bubble-agent-border: #e0e0e0;
   --cds-chat-bubble-user: #e0e0e0;
+  --cds-chat-button: #0f62fe;
+  --cds-chat-button-active: rgba(141, 141, 141, 0.5);
+  --cds-chat-button-hover: rgba(141, 141, 141, 0.12);
+  --cds-chat-button-selected: rgba(141, 141, 141, 0.2);
+  --cds-chat-button-text-hover: #0043ce;
+  --cds-chat-button-text-selected: #525252;
   --cds-chat-header-background: #ffffff;
   --cds-chat-prompt-background: #ffffff;
   --cds-chat-prompt-border-end: rgba(244, 244, 244, 0);
@@ -3245,6 +3257,12 @@ em {
   --cds-chat-bubble-agent: #262626;
   --cds-chat-bubble-agent-border: #525252;
   --cds-chat-bubble-user: #393939;
+  --cds-chat-button: #78a9ff;
+  --cds-chat-button-active: rgba(141, 141, 141, 0.4);
+  --cds-chat-button-hover: rgba(141, 141, 141, 0.16);
+  --cds-chat-button-selected: rgba(141, 141, 141, 0.24);
+  --cds-chat-button-text-hover: #a6c8ff;
+  --cds-chat-button-text-selected: #c6c6c6;
   --cds-chat-header-background: #262626;
   --cds-chat-prompt-background: #161616;
   --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
@@ -3462,6 +3480,12 @@ em {
   --cds-chat-bubble-agent: #262626;
   --cds-chat-bubble-agent-border: #525252;
   --cds-chat-bubble-user: #393939;
+  --cds-chat-button: #78a9ff;
+  --cds-chat-button-active: rgba(141, 141, 141, 0.4);
+  --cds-chat-button-hover: rgba(141, 141, 141, 0.16);
+  --cds-chat-button-selected: rgba(141, 141, 141, 0.24);
+  --cds-chat-button-text-hover: #a6c8ff;
+  --cds-chat-button-text-selected: #c6c6c6;
   --cds-chat-header-background: #262626;
   --cds-chat-prompt-background: #161616;
   --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
@@ -5561,7 +5585,7 @@ a.cds--overflow-menu-options__btn::before {
 }
 .cds--link:active, .cds--link:active:visited, .cds--link:active:visited:hover {
   outline: 1px solid var(--cds-focus, #0f62fe);
-  color: var(--cds-text-primary, #161616);
+  color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
   outline-color: var(--cds-link-focus-text-color, var(--cds-focus, #0f62fe));
   text-decoration: underline;
 }
@@ -5581,10 +5605,10 @@ a.cds--overflow-menu-options__btn::before {
   }
 }
 .cds--link:visited {
-  color: var(--cds-link-primary, #0f62fe);
+  color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
 }
 .cds--link:visited:hover {
-  color: var(--cds-link-primary-hover, #0043ce);
+  color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
 }
 
 .cds--link--disabled,
@@ -5615,11 +5639,11 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .cds--link.cds--link--visited:visited {
-  color: var(--cds-link-visited, #8a3ffc);
+  color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
 }
 
 .cds--link.cds--link--visited:visited:hover {
-  color: var(--cds-link-primary-hover, #0043ce);
+  color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce));
 }
 
 .cds--link.cds--link--inline {
@@ -5670,12 +5694,21 @@ a.cds--overflow-menu-options__btn::before {
 
 .cds--chat-btn--quick-action {
   align-items: center;
-  border: 1px solid var(--cds-link-primary, #0f62fe);
+  border: 1px solid var(--cds-chat-button, #0f62fe);
+  background: transparent;
+  color: var(--cds-chat-button, #0f62fe);
 }
 
 .cds--chat-btn--quick-action:hover:not(:active):not([disabled]) {
   border-color: transparent;
-  background: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
+  background: var(--cds-chat-button-hover, rgba(141, 141, 141, 0.12));
+  color: var(--cds-chat-button-text-hover, #0043ce);
+}
+
+.cds--chat-btn--quick-action:active {
+  border-color: transparent;
+  background: var(--cds-chat-button-active, rgba(141, 141, 141, 0.5));
+  color: var(--cds-chat-button-text-hover, #0043ce);
 }
 
 .cds--chat-btn--quick-action.cds--btn--ghost:focus {
@@ -5698,12 +5731,13 @@ a.cds--overflow-menu-options__btn::before {
 .cds--chat-btn--quick-action--selected[disabled],
 .cds--chat-btn--quick-action--selected[disabled]:hover {
   border-color: transparent;
-  background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
-  color: var(--cds-text-secondary, #525252);
+  background: var(--cds-chat-button-selected, rgba(141, 141, 141, 0.2));
+  color: var(--cds-chat-button-text-selected, #525252);
 }
 
-.cds--chat-btn--quick-action--selected:hover {
-  color: var(--cds-text-secondary, #525252);
+.cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):hover,
+.cds--chat-btn--quick-action.cds--chat-btn--quick-action--selected:not([disabled]):active {
+  color: var(--cds-chat-button-text-selected, #525252);
 }
 
 .cds--chat-btn.cds--skeleton {
@@ -8484,17 +8518,17 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--list-box__field .cds--text-input {
-  padding-inline-end: 4.5rem;
+  padding-inline-end: 5rem;
 }
 
 .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input,
 .cds--list-box--warning .cds--list-box__field .cds--text-input {
-  padding-inline-end: 6.125rem;
+  padding-inline-end: 6.5625rem;
 }
 
 .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon,
 .cds--list-box--warning .cds--list-box__field .cds--text-input + .cds--list-box__invalid-icon {
-  inset-inline-end: 4.125rem;
+  inset-inline-end: 5.125rem;
 }
 
 .cds--list-box__field .cds--text-input--empty {
@@ -8598,7 +8632,7 @@ fieldset[disabled] .cds--form__helper-text {
   inline-size: 1.5rem;
   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: 2.25rem;
+  inset-inline-end: 2.8125rem;
   transform: translateY(-50%);
   transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
   -webkit-user-select: none;
@@ -9028,10 +9062,30 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--list-box__wrapper--slug .cds--slug {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-end: 2.5rem;
+  inset-inline-end: calc(2.5rem + 9px);
+  margin-block-start: 0.03125rem;
   transform: translateY(-50%);
 }
 
+.cds--list-box__wrapper--slug .cds--slug::after,
+.cds--list-box__wrapper--slug .cds--slug::before {
+  position: absolute;
+  background-color: var(--cds-border-subtle-01, #c6c6c6);
+  block-size: 1rem;
+  content: "";
+  inline-size: 0.0625rem;
+}
+
+.cds--list-box__wrapper--slug .cds--slug::before {
+  display: none;
+  inset-inline-start: -0.5625rem;
+}
+
+.cds--list-box__wrapper--slug .cds--slug::after {
+  display: block;
+  inset-inline-end: -0.5625rem;
+}
+
 .cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) {
   background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
   border-block-end-color: var(--cds-ai-border-strong, #4589ff);
@@ -9059,21 +9113,28 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input:not(.cds--text-input--empty),
 .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty) {
-  padding-inline-end: 7.5rem;
+  padding-inline-end: 8.8125rem;
 }
 
-.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug,
-.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug {
-  inset-inline-end: 4rem;
+.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty + .cds--list-box__invalid-icon,
+.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__invalid-icon,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__invalid-icon.cds--list-box__invalid-icon--warning {
+  inset-inline-end: 5.1875rem;
 }
 
-.cds--list-box__wrapper--slug .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug {
-  inset-inline-end: 4rem;
+.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--slug::before,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug::before {
+  display: block;
 }
 
-.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug,
+.cds--list-box__wrapper--slug .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug,
 .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug {
-  inset-inline-end: 5.5rem;
+  inset-inline-end: calc(4rem + 18px);
+}
+
+.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon {
+  inset-inline-end: 7.25rem;
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -9101,6 +9162,33 @@ fieldset[disabled] .cds--form__helper-text {
   }
 }
 
+.cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::after {
+  position: absolute;
+  background-color: var(--cds-border-subtle-01, #c6c6c6);
+  block-size: 1rem;
+  content: "";
+  inline-size: 0.0625rem;
+  margin-inline-start: 2.0625rem;
+}
+
+.cds--list-box--warning .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before,
+.cds--list-box--invalid[data-invalid] .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before {
+  position: absolute;
+  background-color: var(--cds-border-subtle-01, #c6c6c6);
+  block-size: 1rem;
+  content: "";
+  inline-size: 0.0625rem;
+  margin-inline-end: 2.0625rem;
+}
+
+.cds--list-box__wrapper--slug:has(.cds--multi-select) .cds--list-box__menu-icon {
+  inset-inline-end: calc(0.75rem - 4px);
+}
+
+.cds--list-box__wrapper--slug:has(.cds--dropdown) .cds--list-box__menu-icon {
+  inset-inline-end: calc(0.75rem - 4px);
+}
+
 .cds--combo-box:hover {
   background-color: var(--cds-field);
 }
@@ -14950,6 +15038,28 @@ button.cds--dropdown-text:focus {
   padding-inline-end: 6rem;
 }
 
+.cds--list-box__wrapper--fluid .cds--list-box__selection {
+  inset-inline-end: 2.5625rem;
+}
+
+.cds--list-box__wrapper--fluid .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before,
+.cds--list-box__wrapper--fluid .cds--list-box--invalid[data-invalid] .cds--list-box__field:has(.cds--list-box__menu-icon) .cds--list-box__selection::before {
+  position: absolute;
+  background-color: transparent;
+  block-size: 1rem;
+  content: "";
+  inline-size: 0.0625rem;
+  margin-inline-end: 2.0625rem;
+}
+
+.cds--list-box__wrapper--fluid:has(.cds--multi-select) .cds--list-box__menu-icon {
+  inset-inline-end: 0.75rem;
+}
+
+.cds--list-box__wrapper--fluid:has(.cds--dropdown) .cds--list-box__menu-icon {
+  inset-inline-end: 0.75rem;
+}
+
 .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field {
   overflow: visible;
   padding: 0;
@@ -16123,6 +16233,7 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--search--fluid .cds--search-magnifier-icon {
+  color: var(--cds-icon-primary, #161616);
   inset: auto 1rem 0.8125rem auto;
   transform: none;
 }
@@ -16135,16 +16246,6 @@ button.cds--dropdown-text:focus {
   transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-.cds--search--fluid .cds--search-close::before {
-  position: absolute;
-  display: block;
-  background: var(--cds-border-subtle);
-  block-size: 1rem;
-  content: "";
-  inline-size: 0.0625rem;
-  inset: auto -0.0625rem 0.875rem auto;
-}
-
 .cds--search--fluid .cds--search-input:focus ~ .cds--search-close:hover {
   outline: none;
 }
@@ -20902,6 +21003,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   --cds-button-focus-color: var(--cds-focus-inverse, #ffffff);
   --cds-link-text-color: var(--cds-link-inverse, #78a9ff);
   --cds-link-hover-text-color: var(--cds-link-inverse, #78a9ff);
+  --cds-link-visited-text-color: var(--cds-link-inverse, #78a9ff);
   --cds-link-focus-text-color: var(--cds-focus-inverse, #ffffff);
   font-size: var(--cds-body-01-font-size, 0.875rem);
   font-weight: var(--cds-body-01-font-weight, 400);