@carbon/styles 1.38.0 → 1.39.0-rc.0

package/css/styles.css

@@ -3912,8 +3912,8 @@ li.cds--accordion__item--disabled:last-of-type {
   position: absolute;
   z-index: 6000;
   display: none;
-  background-color: var(--cds-popover-background-color, var(--cds-layer));
   border-radius: var(--cds-popover-border-radius, 2px);
+  background-color: var(--cds-popover-background-color, var(--cds-layer));
   color: var(--cds-popover-text-color, var(--cds-text-primary, #161616));
   inline-size: -moz-max-content;
   inline-size: max-content;
@@ -4301,8 +4301,8 @@ li.cds--accordion__item--disabled:last-of-type {
   cursor: pointer;
   text-align: start;
   inline-size: 100%;
-  border-block-end: 1px dotted var(--cds-border-strong);
   border-radius: 0;
+  border-block-end: 1px dotted var(--cds-border-strong);
   color: var(--cds-text-primary, #161616);
 }
 .cds--definition-term *,
@@ -4338,7 +4338,7 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 
 .cds--btn {
-  --cds-layout-size-height-local: clamp(var(--cds-layout-size-height-min), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), var(--cds-layout-size-height-max));
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-2xl)));
   --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
   --temp-1lh: (
     var(--cds-body-compact-01-line-height, 1.28572) * 1em
@@ -4365,8 +4365,8 @@ li.cds--accordion__item--disabled:last-of-type {
   display: inline-flex;
   flex-shrink: 0;
   justify-content: space-between;
-  margin: 0;
   border-radius: 0;
+  margin: 0;
   cursor: pointer;
   inline-size: -moz-max-content;
   inline-size: max-content;
@@ -5792,11 +5792,11 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--form-item.cds--checkbox-wrapper {
   position: relative;
-  margin-block-end: 0.25rem;
+  margin-block-end: 0.375rem;
 }
 
 .cds--form-item.cds--checkbox-wrapper:first-of-type {
-  margin-block-start: 0.1875rem;
+  margin-block-start: 0;
 }
 
 .cds--label + .cds--form-item.cds--checkbox-wrapper {
@@ -5830,8 +5830,8 @@ fieldset[disabled] .cds--form__helper-text {
   position: relative;
   display: flex;
   cursor: pointer;
-  min-block-size: 1.5rem;
-  padding-block-start: 0.1875rem;
+  min-block-size: 1.25rem;
+  padding-block-start: 0.125rem;
   padding-inline-start: 1.25rem;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -5855,7 +5855,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--checkbox-label-text {
-  padding-inline-start: 0.375rem;
+  padding-inline-start: 0.625rem;
 }
 
 .cds--checkbox-label::before,
@@ -5866,14 +5866,15 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--checkbox-label::before {
   position: absolute;
   border: 1px solid var(--cds-icon-primary, #161616);
-  margin: 0.125rem 0.125rem 0.125rem 0.1875rem;
+  border-radius: 2px;
   background-color: transparent;
   block-size: 1rem;
-  border-radius: 2px;
   content: "";
   inline-size: 1rem;
   inset-block-start: 0.125rem;
   inset-inline-start: 0;
+  margin-block: 0.0625rem 0.125rem;
+  margin-inline: 0.1875rem 0;
 }
 
 .cds--checkbox-label::after {
@@ -5884,7 +5885,7 @@ fieldset[disabled] .cds--form__helper-text {
   border-inline-start: 1.5px solid var(--cds-icon-inverse, #ffffff);
   content: "";
   inline-size: 0.5625rem;
-  inset-block-start: 0.46875rem;
+  inset-block-start: 0.40625rem;
   inset-inline-start: 0.4375rem;
   margin-block-start: -0.1875rem;
   transform: scale(0) rotate(-45deg);
@@ -6124,9 +6125,9 @@ fieldset[disabled] .cds--form__helper-text {
   box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   z-index: 6000;
   padding: 0.1875rem 1rem;
+  border-radius: 0.125rem;
   background-color: var(--cds-background-inverse, #393939);
   block-size: auto;
-  border-radius: 0.125rem;
   color: var(--cds-text-inverse, #ffffff);
   font-weight: 400;
   inline-size: -moz-max-content;
@@ -6245,8 +6246,8 @@ fieldset[disabled] .cds--form__helper-text {
   display: inline;
   padding: 0;
   border: 1px solid transparent;
-  background-color: var(--cds-layer);
   border-radius: 4px;
+  background-color: var(--cds-layer);
   color: var(--cds-text-primary, #161616);
   cursor: pointer;
 }
@@ -6290,9 +6291,9 @@ fieldset[disabled] .cds--form__helper-text {
   box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   z-index: 6000;
   padding: 0.1875rem 1rem;
+  border-radius: 0.125rem;
   background-color: var(--cds-background-inverse, #393939);
   block-size: auto;
-  border-radius: 0.125rem;
   color: var(--cds-text-inverse, #ffffff);
   font-weight: 400;
   inline-size: -moz-max-content;
@@ -6993,9 +6994,9 @@ fieldset[disabled] .cds--form__helper-text {
   box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
   z-index: 6000;
   padding: 0.1875rem 1rem;
+  border-radius: 0.125rem;
   background-color: var(--cds-background-inverse, #393939);
   block-size: auto;
-  border-radius: 0.125rem;
   color: var(--cds-text-inverse, #ffffff);
   font-weight: 400;
   inline-size: -moz-max-content;
@@ -7437,8 +7438,8 @@ fieldset[disabled] .cds--form__helper-text {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin: 0.25rem;
   border-radius: 0.9375rem;
+  margin: 0.25rem;
   cursor: default;
   max-inline-size: 100%;
   min-block-size: var(--cds-layout-size-height-local);
@@ -7631,10 +7632,10 @@ fieldset[disabled] .cds--form__helper-text {
   justify-content: center;
   padding: 0;
   border: 0;
+  border-radius: 50%;
   margin: 0 0 0 0.125rem;
   background-color: transparent;
   block-size: var(--cds-layout-size-height-local);
-  border-radius: 50%;
   color: currentColor;
   cursor: pointer;
   inline-size: var(--cds-layout-size-height-local);
@@ -8215,9 +8216,9 @@ fieldset[disabled] .cds--form__helper-text {
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem;
+  border-radius: 0.75rem;
   background-color: var(--cds-background-inverse, #393939);
   block-size: 1.5rem;
-  border-radius: 0.75rem;
   color: var(--cds-text-inverse, #ffffff);
   inline-size: auto;
   inset-block-start: auto;
@@ -8235,8 +8236,8 @@ fieldset[disabled] .cds--form__helper-text {
   margin-inline-start: 0.25rem;
 }
 .cds--list-box__selection--multi > svg:hover {
-  background-color: var(--cds-button-secondary-hover, #474747);
   border-radius: 50%;
+  background-color: var(--cds-button-secondary-hover, #474747);
 }
 
 .cds--list-box--disabled .cds--list-box__selection--multi {
@@ -9431,7 +9432,6 @@ fieldset[disabled] .cds--form__helper-text {
   align-items: flex-end;
 }
 .cds--radio-button-group--vertical .cds--radio-button__label {
-  line-height: 1.25;
   margin-inline-end: 0;
 }
 .cds--radio-button-group--vertical .cds--radio-button__label:not(:last-of-type) {
@@ -9453,16 +9453,19 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--radio-button__label {
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-  font-weight: var(--cds-body-compact-01-font-weight, 400);
-  line-height: var(--cds-body-compact-01-line-height, 1.28572);
-  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   display: flex;
   align-items: center;
   cursor: pointer;
   margin-inline-end: 1rem;
 }
 
+.cds--radio-button__label-text {
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+}
+
 .cds--radio-button__appearance {
   box-sizing: border-box;
   padding: 0;
@@ -9473,12 +9476,12 @@ fieldset[disabled] .cds--form__helper-text {
   vertical-align: baseline;
   flex-shrink: 0;
   border: 1px solid var(--cds-icon-primary, #161616);
+  border-radius: 50%;
   background-color: transparent;
   block-size: 1.125rem;
-  border-radius: 50%;
   inline-size: 1.125rem;
   margin-block: 0.0625rem 0.125rem;
-  margin-inline: 0.125rem 0.5rem;
+  margin-inline: 0.125rem 0.625rem;
 }
 .cds--radio-button__appearance *,
 .cds--radio-button__appearance *::before,
@@ -9486,6 +9489,10 @@ fieldset[disabled] .cds--form__helper-text {
   box-sizing: inherit;
 }
 
+.cds--radio-button-group--vertical .cds--radio-button__appearance {
+  margin-block: 0;
+}
+
 .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance {
   display: flex;
   align-items: center;
@@ -9495,9 +9502,9 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
   position: relative;
   display: inline-block;
+  border-radius: 50%;
   background-color: var(--cds-icon-primary, #161616);
   block-size: 100%;
-  border-radius: 50%;
   content: "";
   inline-size: 100%;
   transform: scale(0.5);
@@ -9633,11 +9640,15 @@ fieldset[disabled] .cds--form__helper-text {
   margin-inline-end: 1rem;
 }
 
-.cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type) {
-  margin-block-end: 0.5rem;
+.cds--radio-button-group--vertical .cds--radio-button-wrapper {
+  margin-block-end: 0.375rem;
   margin-inline-end: 0;
 }
 
+.cds--radio-button-group--vertical .cds--radio-button-wrapper .cds--radio-button__label {
+  padding-block-start: 0.125rem;
+}
+
 .cds--radio-button-group--label-right .cds--radio-button__label,
 .cds--radio-button-wrapper.cds--radio-button-wrapper--label-right .cds--radio-button__label {
   flex-direction: row;
@@ -9939,9 +9950,18 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--table-column-checkbox .cds--checkbox-label {
+  min-block-size: 1.5rem;
   padding-inline-start: 0;
 }
 
+.cds--table-column-checkbox .cds--checkbox-label::before {
+  margin-block-start: 0.125rem;
+}
+
+.cds--table-column-checkbox .cds--checkbox-label::after {
+  inset-block-start: 0.46875rem;
+}
+
 .cds--data-table th.cds--table-column-checkbox {
   position: static;
   background: var(--cds-layer-accent);
@@ -12140,8 +12160,8 @@ th .cds--table-sort__flex {
   box-sizing: border-box;
   padding: 0;
   border: 0;
-  animation: none;
   border-radius: 0;
+  animation: none;
   direction: ltr;
   inline-size: 19.6875rem;
   max-block-size: 0;
@@ -14600,13 +14620,13 @@ button.cds--dropdown-text:focus {
   display: inline-flex;
   box-sizing: border-box;
   border: 0;
+  border-radius: 0;
   -moz-appearance: textfield;
   -webkit-appearance: textfield;
           appearance: textfield;
   background-color: var(--cds-field);
   block-size: 2.5rem;
   border-block-end: 0.0625rem solid var(--cds-border-strong);
-  border-radius: 0;
   color: var(--cds-text-primary, #161616);
   font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
   font-weight: 400;
@@ -15367,13 +15387,13 @@ button.cds--dropdown-text:focus {
   outline-offset: -2px;
   display: block;
   border: none;
+  border-radius: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   background-color: var(--cds-field);
   block-size: 2.5rem;
   border-block-end: 1px solid var(--cds-border-strong);
-  border-radius: 0;
   color: var(--cds-text-primary, #161616);
   cursor: pointer;
   font-family: inherit;
@@ -19009,8 +19029,8 @@ span.cds--pagination__text.cds--pagination__items-count {
   position: relative;
   z-index: 1;
   flex-shrink: 0;
-  block-size: 1rem;
   border-radius: 50%;
+  block-size: 1rem;
   fill: var(--cds-interactive, #0f62fe);
   inline-size: 1rem;
   margin-block-start: 0.625rem;
@@ -19452,9 +19472,9 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--slider__thumb {
   position: absolute;
   z-index: 3;
+  border-radius: 50%;
   background: var(--cds-layer-selected-inverse, #161616);
   block-size: 0.875rem;
-  border-radius: 50%;
   box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
   inline-size: 0.875rem;
   outline: none;
@@ -21090,17 +21110,17 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--toggle__switch {
   position: relative;
+  border-radius: 0.75rem;
   background-color: var(--cds-toggle-off, #8d8d8d);
   block-size: 1.5rem;
-  border-radius: 0.75rem;
   inline-size: 3rem;
   transition: background-color 70ms cubic-bezier(0.2, 0, 1, 0.9);
 }
 .cds--toggle__switch::before {
   position: absolute;
+  border-radius: 50%;
   background-color: var(--cds-icon-on-color, #ffffff);
   block-size: 1.125rem;
-  border-radius: 50%;
   content: "";
   inline-size: 1.125rem;
   inset-block-start: 0.1875rem;
@@ -21230,10 +21250,10 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--toggle--skeleton .cds--toggle__skeleton-circle {
   position: relative;
   overflow: hidden;
+  border-radius: 50%;
   background: var(--cds-skeleton-background, #e8e8e8);
   border-radius: 50%;
   block-size: 1.125rem;
-  border-radius: 50%;
   inline-size: 1.125rem;
 }
 .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {