@carbon/styles 1.71.0 → 1.72.0-rc.0

package/css/styles.css

@@ -1105,7 +1105,7 @@ em {
 }
 
 .cds--css-grid--narrow {
-  --cds-grid-gutter-start: 0;
+  --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
 }
 
 .cds--css-grid--condensed {
@@ -1137,7 +1137,7 @@ em {
 }
 
 .cds--subgrid--narrow {
-  --cds-grid-gutter-start: 0;
+  --cds-grid-gutter-start: 0rem; /* stylelint-disable-line length-zero-no-unit */
   --cds-grid-gutter-end: 1rem;
   --cds-grid-column-hang: 1rem;
 }
@@ -8937,6 +8937,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-gray, #d1d1d1);
 }
+.cds--tag .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-gray, #161616);
+}
 .cds--tag.cds--tag--lg {
   padding-inline-start: 0.75rem;
 }
@@ -9029,6 +9032,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--red .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-red, #ffc2c5);
 }
+.cds--tag--red .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-red, #a2191f);
+}
 
 .cds--tag--magenta {
   background-color: var(--cds-tag-background-magenta, #ffd6e8);
@@ -9043,6 +9049,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--magenta .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-magenta, #ffbdda);
 }
+.cds--tag--magenta .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-magenta, #9f1853);
+}
 
 .cds--tag--purple {
   background-color: var(--cds-tag-background-purple, #e8daff);
@@ -9057,6 +9066,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--purple .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-purple, #dcc7ff);
 }
+.cds--tag--purple .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-purple, #6929c4);
+}
 
 .cds--tag--blue {
   background-color: var(--cds-tag-background-blue, #d0e2ff);
@@ -9071,6 +9083,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--blue .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-blue, #b8d3ff);
 }
+.cds--tag--blue .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-blue, #0043ce);
+}
 
 .cds--tag--cyan {
   background-color: var(--cds-tag-background-cyan, #bae6ff);
@@ -9085,6 +9100,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--cyan .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-cyan, #99daff);
 }
+.cds--tag--cyan .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-cyan, #00539a);
+}
 
 .cds--tag--teal {
   background-color: var(--cds-tag-background-teal, #9ef0f0);
@@ -9099,6 +9117,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--teal .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-teal, #57e5e5);
 }
+.cds--tag--teal .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-teal, #005d5d);
+}
 
 .cds--tag--green {
   background-color: var(--cds-tag-background-green, #a7f0ba);
@@ -9113,6 +9134,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--green .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-green, #74e792);
 }
+.cds--tag--green .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-green, #0e6027);
+}
 
 .cds--tag--gray {
   background-color: var(--cds-tag-background-gray, #e0e0e0);
@@ -9127,6 +9151,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--gray .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-gray, #d1d1d1);
 }
+.cds--tag--gray .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-gray, #161616);
+}
 
 .cds--tag--cool-gray {
   background-color: var(--cds-tag-background-cool-gray, #dde1e6);
@@ -9141,6 +9168,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--cool-gray .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-cool-gray, #cdd3da);
 }
+.cds--tag--cool-gray .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-cool-gray, #121619);
+}
 
 .cds--tag--warm-gray {
   background-color: var(--cds-tag-background-warm-gray, #e5e0df);
@@ -9155,6 +9185,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--warm-gray .cds--tag__close-icon:hover {
   background-color: var(--cds-tag-hover-warm-gray, #d8d0cf);
 }
+.cds--tag--warm-gray .cds--definition-term .cds--tag__label {
+  color: var(--cds-tag-color-warm-gray, #171414);
+}
 
 .cds--tag--high-contrast:not(.cds--tag--operational) {
   background-color: var(--cds-background-inverse, #393939);
@@ -9169,6 +9202,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
   background-color: var(--cds-background-inverse-hover, #474747);
 }
+.cds--tag--high-contrast:not(.cds--tag--operational) .cds--definition-term .cds--tag__label {
+  color: var(--cds-text-inverse, #ffffff);
+}
 
 .cds--multi-select--readonly .cds--tag--high-contrast:not(.cds--tag--operational) .cds--tag__close-icon:hover {
   background-color: transparent;
@@ -9189,6 +9225,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--tag__close-icon:hover {
   background-color: var(--cds-layer-hover);
 }
+.cds--tag--outline:not(.cds--tag--operational):not(span):not([disabled]) .cds--definition-term .cds--tag__label {
+  color: var(--cds-text-primary, #161616);
+}
 
 .cds--tag--disabled:not(.cds--tag--operational),
 .cds--tag--filter.cds--tag--disabled,
@@ -9213,6 +9252,11 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover {
   background-color: var(--cds-layer);
 }
+.cds--tag--disabled:not(.cds--tag--operational) .cds--definition-term .cds--tag__label,
+.cds--tag--filter.cds--tag--disabled .cds--definition-term .cds--tag__label,
+.cds--tag--interactive.cds--tag--disabled .cds--definition-term .cds--tag__label {
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
 .cds--tag--disabled:not(.cds--tag--operational):hover,
 .cds--tag--filter.cds--tag--disabled:hover,
 .cds--tag--interactive.cds--tag--disabled:hover {
@@ -9348,6 +9392,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--tag.cds--skeleton .cds--tag__close-icon:hover {
   background-color: var(--cds-skeleton-background, #e8e8e8);
 }
+.cds--tag.cds--skeleton .cds--definition-term .cds--tag__label {
+  color: var(--cds-text-primary, #161616);
+}
 @media not all and (min-resolution >= 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
     .cds--tag.cds--skeleton {
@@ -9948,6 +9995,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--list-box--disabled .cds--list-box__selection--multi .cds--tag__close-icon:hover {
   background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
+.cds--list-box--disabled .cds--list-box__selection--multi .cds--definition-term .cds--tag__label {
+  color: var(--cds-layer);
+}
 .cds--list-box--disabled .cds--list-box__selection--multi > svg {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
@@ -23750,8 +23800,10 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tile--clickable .cds--tile--icon,
 .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
   position: absolute;
-  inset-block-end: var(--cds-layout-density-padding-inline-local);
-  inset-inline-end: var(--cds-layout-density-padding-inline-local);
+  block-size: 1.25rem;
+  inline-size: 1.25rem;
+  inset-block-end: 0.75rem;
+  inset-inline-end: 0.75rem;
 }
 
 .cds--tile--clickable .cds--tile--icon {