@carbon/styles 1.106.0 → 1.107.0-rc.0

package/css/styles.css

@@ -4225,6 +4225,11 @@ em {
   outline: none;
 }
 
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--accordion__heading:focus {
+    outline: 2px solid Highlight;
+  }
+}
 .cds--accordion__heading[disabled] {
   background-color: transparent;
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -4548,6 +4553,18 @@ li.cds--accordion__item--disabled:last-of-type {
   --cds-popover-background-color: var(--cds-background-inverse, #393939);
   --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
 }
+.cds--popover--high-contrast .cds--popover .cds--skeleton,
+.cds--popover--high-contrast .cds--popover .cds--skeleton__text,
+.cds--popover--high-contrast .cds--popover .cds--skeleton__placeholder,
+.cds--popover--high-contrast .cds--popover .cds--icon--skeleton {
+  background: var(--cds-background-inverse-hover, #474747);
+}
+.cds--popover--high-contrast .cds--popover .cds--skeleton::before,
+.cds--popover--high-contrast .cds--popover .cds--skeleton__text::before,
+.cds--popover--high-contrast .cds--popover .cds--skeleton__placeholder::before,
+.cds--popover--high-contrast .cds--popover .cds--icon--skeleton::before {
+  background: var(--cds-background-inverse, #393939);
+}
 
 .cds--popover--drop-shadow .cds--popover {
   filter: var(--cds-popover-drop-shadow, drop-shadow(0 0.125rem 0.125rem rgba(0, 0, 0, 0.2)));
@@ -6116,6 +6133,12 @@ li.cds--accordion__item--disabled:last-of-type {
   fill: var(--cds-icon-primary, #161616);
 }
 
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--toggletip-button:hover svg,
+  .cds--toggletip--open .cds--toggletip-button svg {
+    fill: Highlight;
+  }
+}
 .cds--toggletip-button:focus {
   outline: 1px solid var(--cds-focus, #0f62fe);
 }
@@ -8960,6 +8983,7 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-layer);
   inline-size: 100%;
   max-inline-size: 48rem;
+  min-inline-size: 0;
   display: flex;
   align-items: center;
   block-size: 2.5rem;
@@ -8978,6 +9002,7 @@ fieldset[disabled] .cds--form__helper-text {
   display: flex;
   align-items: center;
   block-size: 100%;
+  min-inline-size: 0;
   overflow-x: auto;
   padding-inline-start: 1rem;
 }
@@ -9015,6 +9040,7 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-layer);
   inline-size: 100%;
   max-inline-size: 48rem;
+  min-inline-size: 0;
   display: flex;
   padding: 1rem;
 }
@@ -16751,6 +16777,10 @@ because the nesting selector cannot represent pseudo-elements. */
   }
 }
 
+.cds--dialog.cds--modal-container {
+  border: none;
+}
+
 .cds--dialog-content {
   position: relative;
   grid-area: content;
@@ -17787,6 +17817,11 @@ button.cds--dropdown-text:focus {
   outline-width: 1px;
 }
 
+.cds--file__selected-file--disabled {
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  cursor: not-allowed;
+}
+
 .cds--file__selected-file--invalid {
   outline: 2px solid var(--cds-support-error, #da1e28);
   outline-offset: -2px;
@@ -17908,9 +17943,17 @@ button.cds--dropdown-text:focus {
   background-color: transparent;
   block-size: 1.5rem;
   cursor: pointer;
-  fill: var(--cds-icon-primary, #161616);
   inline-size: 1.5rem;
 }
+.cds--file__state-container .cds--file-close svg {
+  fill: var(--cds-icon-primary, #161616);
+}
+.cds--file__state-container .cds--file-close[disabled] {
+  cursor: not-allowed;
+}
+.cds--file__state-container .cds--file-close[disabled] svg {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
 .cds--file__state-container .cds--file-close:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
@@ -17921,10 +17964,6 @@ button.cds--dropdown-text:focus {
   }
 }
 
-.cds--file__state-container .cds--file-close svg path {
-  fill: var(--cds-icon-primary, #161616);
-}
-
 .cds--file__state-container .cds--inline-loading__animation {
   margin-inline-end: -0.5rem;
 }
@@ -23934,7 +23973,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--progress-bar__track {
   position: relative;
-  background-color: var(--cds-layer);
+  background-color: var(--cds-border-subtle);
   block-size: 0.5rem;
   inline-size: 100%;
   min-inline-size: 3rem;
@@ -26969,6 +27008,11 @@ span.cds--pagination__text.cds--pagination__items-count {
   transform: translateX(1.5rem);
 }
 
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--toggle__switch--checked {
+    background-color: Highlight;
+  }
+}
 .cds--toggle__text {
   font-size: var(--cds-body-01-font-size, 0.875rem);
   font-weight: var(--cds-body-01-font-weight, 400);