@carbon/styles 1.40.0 → 1.41.0

package/css/styles.css

@@ -2757,7 +2757,7 @@ em {
 }
 
 .cds--white {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
   --cds-background: #ffffff;
   --cds-background-active: rgba(141, 141, 141, 0.5);
@@ -2838,6 +2838,13 @@ em {
   --cds-shadow: rgba(0, 0, 0, 0.3);
   --cds-skeleton-background: #e8e8e8;
   --cds-skeleton-element: #c6c6c6;
+  --cds-slug-background: #525252;
+  --cds-slug-background-hover: #6f6f6f;
+  --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-start: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
+  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
+  --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #8a3ffc;
@@ -2931,7 +2938,7 @@ em {
 }
 
 .cds--g10 {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
   --cds-background: #f4f4f4;
   --cds-background-active: rgba(141, 141, 141, 0.5);
@@ -3012,6 +3019,13 @@ em {
   --cds-shadow: rgba(0, 0, 0, 0.3);
   --cds-skeleton-background: #e8e8e8;
   --cds-skeleton-element: #c6c6c6;
+  --cds-slug-background: #525252;
+  --cds-slug-background-hover: #6f6f6f;
+  --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-start: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
+  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
+  --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #8a3ffc;
@@ -3105,7 +3119,7 @@ em {
 }
 
 .cds--g90 {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
   --cds-background: #262626;
   --cds-background-active: rgba(141, 141, 141, 0.4);
@@ -3186,6 +3200,13 @@ em {
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #333333;
   --cds-skeleton-element: #525252;
+  --cds-slug-background: #c6c6c6;
+  --cds-slug-background-hover: #e0e0e0;
+  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
+  --cds-slug-hollow-hover: #b5b5b5;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #a56eff;
@@ -3278,7 +3299,7 @@ em {
 }
 
 .cds--g100 {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
@@ -3359,6 +3380,13 @@ em {
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #292929;
   --cds-skeleton-element: #393939;
+  --cds-slug-background: #c6c6c6;
+  --cds-slug-background-hover: #e0e0e0;
+  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
+  --cds-slug-hollow-hover: #b5b5b5;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #a56eff;
@@ -12656,11 +12684,14 @@ th .cds--table-sort__flex {
 }
 
 .cds--date-picker-input__wrapper {
-  position: relative;
   display: flex;
   align-items: center;
 }
 
+.cds--date-picker-input__wrapper span {
+  position: relative;
+}
+
 .cds--date-picker.cds--date-picker--simple .cds--date-picker__input,
 .cds--date-picker.cds--date-picker--simple .cds--label {
   inline-size: 7.5rem;
@@ -14255,6 +14286,10 @@ button.cds--dropdown-text:focus {
   white-space: nowrap;
 }
 
+.cds--date-picker--fluid .cds--date-picker-input__wrapper > span {
+  inline-size: 100%;
+}
+
 .cds--date-picker--fluid .cds--date-picker-input__wrapper .cds--date-picker__input {
   padding: 2rem 1rem 0.8125rem;
   background: transparent;
@@ -19470,6 +19505,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   position: relative;
   display: flex;
   align-items: center;
+  gap: 1rem;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -19478,12 +19514,14 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--slider {
   position: relative;
   padding: 1rem 0;
-  margin: 0 1rem;
   cursor: pointer;
   inline-size: 100%;
   max-inline-size: 40rem;
   min-inline-size: 12.5rem;
 }
+.cds--slider-container--two-handles .cds--slider {
+  margin-inline: rem(4px);
+}
 
 .cds--slider__range-label {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -19493,9 +19531,6 @@ span.cds--pagination__text.cds--pagination__items-count {
   color: var(--cds-text-primary, #161616);
   white-space: nowrap;
 }
-.cds--slider__range-label:last-of-type {
-  margin-inline-end: 1rem;
-}
 
 .cds--slider__track {
   position: absolute;
@@ -19553,10 +19588,98 @@ span.cds--pagination__text.cds--pagination__items-count {
   transform: translate(-50%, -50%) scale(1.4286);
 }
 
+.cds--slider__thumb-icon {
+  fill: var(--cds-layer-selected-inverse, #161616);
+}
+
+.cds--slider__thumb-icon--focus {
+  display: none;
+  fill: var(--cds-interactive, #0f62fe);
+}
+
+.cds--slider__thumb--lower,
+.cds--slider__thumb--upper {
+  display: block;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  border-radius: unset;
+  background-color: transparent;
+  block-size: 24px;
+  box-shadow: none;
+  inline-size: 16px;
+  transform: translate(-100%, -50%);
+  transition: none;
+}
+.cds--slider__thumb--lower::before,
+.cds--slider__thumb--upper::before {
+  position: absolute;
+  z-index: -1;
+  display: block;
+  background: var(--cds-background, #ffffff);
+  block-size: 0.125rem;
+  content: "";
+  inline-size: 0.375rem;
+  inset-block-start: calc(50% - 0.0625rem);
+  inset-inline-end: 0;
+}
+.cds--slider__thumb--lower:hover,
+.cds--slider__thumb--upper:hover {
+  transform: translate(-100%, -50%);
+}
+.cds--slider__thumb--lower:hover .cds--slider__thumb-icon,
+.cds--slider__thumb--upper:hover .cds--slider__thumb-icon {
+  fill: var(--cds-text-secondary, #525252);
+}
+.cds--slider__thumb--lower:active,
+.cds--slider__thumb--upper:active {
+  box-shadow: none;
+  transform: translate(-100%, -50%);
+}
+.cds--slider__thumb--lower:focus,
+.cds--slider__thumb--upper:focus {
+  background-color: transparent;
+  box-shadow: none;
+  transform: translate(-100%, -50%);
+}
+.cds--slider__thumb--lower:focus .cds--slider__thumb-icon,
+.cds--slider__thumb--upper:focus .cds--slider__thumb-icon {
+  display: none;
+  fill: var(--cds-interactive, #0f62fe);
+}
+.cds--slider__thumb--lower:focus .cds--slider__thumb-icon--focus,
+.cds--slider__thumb--upper:focus .cds--slider__thumb-icon--focus {
+  display: block;
+}
+
+.cds--slider__thumb--lower:focus::before,
+.cds--slider__thumb--upper:focus::before {
+  inline-size: 100%;
+}
+
+.cds--slider__thumb--upper {
+  transform: translate(0, -50%);
+}
+.cds--slider__thumb--upper::before {
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+}
+.cds--slider__thumb--upper:hover {
+  transform: translate(0, -50%);
+}
+.cds--slider__thumb--upper:active {
+  transform: translate(0, -50%);
+}
+.cds--slider__thumb--upper:focus {
+  transform: translate(0, -50%);
+}
+
 .cds--slider__input {
   display: none;
 }
 
+.cds--slider-text-input-wrapper {
+  position: relative;
+}
+
 .cds--slider-text-input,
 .cds-slider-text-input {
   -moz-appearance: textfield;
@@ -19576,7 +19699,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--slider__thumb:focus ~ .cds--slider__filled-track {
-  background-color: var(--cds-interactive, #0f62fe);
+  background-color: var(--cds-border-interactive, #0f62fe);
 }
 
 .cds--slider-text-input.cds--text-input--invalid,
@@ -19596,7 +19719,6 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--slider__validation-msg.cds--form-requirement {
   display: block;
   overflow: visible;
-  margin-block-start: 0;
   max-block-size: 100%;
 }
 
@@ -19665,15 +19787,24 @@ span.cds--pagination__text.cds--pagination__items-count {
   cursor: default;
 }
 
-.cds--slider--readonly .cds--slider__thumb {
+.cds--slider-container--readonly .cds--slider__thumb {
   block-size: 0;
   inline-size: 0;
 }
+.cds--slider-container--readonly .cds--slider__thumb::before, .cds--slider-container--readonly .cds--slider__thumb::after {
+  display: none;
+}
 
-.cds--slider--readonly ~ .cds--slider-text-input {
+.cds--slider-container--readonly .cds--slider-text-input {
   background-color: transparent;
 }
 
+.cds--slider__status-msg.cds--form-requirement {
+  display: block;
+  overflow: visible;
+  max-block-size: 100%;
+}
+
 .cds--slider-container.cds--skeleton .cds--slider__range-label {
   position: relative;
   padding: 0;
@@ -19714,6 +19845,12 @@ span.cds--pagination__text.cds--pagination__items-count {
   inset-inline-start: 50%;
   pointer-events: none;
 }
+.cds--slider-container.cds--skeleton .cds--slider__thumb--lower {
+  inset-inline-start: 0;
+}
+.cds--slider-container.cds--skeleton .cds--slider__thumb--upper {
+  inset-inline-start: 100%;
+}
 
 /* stylelint-disable */
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -19736,6 +19873,286 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 /* stylelint-enable */
+.cds--slug {
+  display: flex;
+}
+
+.cds--slug .cds--slug__button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--cds-text-inverse, #ffffff);
+  font-weight: 600;
+  transition: color 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9);
+}
+.cds--slug .cds--slug__button--mini {
+  height: 1rem;
+  width: 1rem;
+  font-size: 0.5625rem;
+  line-height: 0.75rem;
+  background: var(--cds-slug-background, #525252);
+}
+.cds--slug .cds--slug__button--2xs {
+  height: 1.25rem;
+  width: 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  background: var(--cds-slug-background, #525252);
+}
+.cds--slug .cds--slug__button--xs {
+  height: 1.5rem;
+  width: 1.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
+}
+.cds--slug .cds--slug__button--sm {
+  height: 2rem;
+  width: 2rem;
+  font-size: 1rem;
+  line-height: 1.3125rem;
+  background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
+}
+.cds--slug .cds--slug__button--md {
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 1rem;
+  line-height: 1.3125rem;
+  background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
+}
+.cds--slug .cds--slug__button--lg {
+  height: 3rem;
+  width: 3rem;
+  font-size: 1rem;
+  line-height: 1.3125rem;
+  background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
+}
+.cds--slug .cds--slug__button--xl {
+  height: 4rem;
+  width: 4rem;
+  font-size: 1.25rem;
+  line-height: 1.625rem;
+  background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
+}
+
+.cds--slug .cds--slug__button:focus {
+  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
+  outline: none;
+}
+
+.cds--slug__text {
+  position: relative;
+  z-index: 1;
+}
+
+.cds--slug__button::before {
+  position: absolute;
+  background: var(--cds-slug-gradient-hover, #161616 linear-gradient(135deg, #d1d1d1 0%, rgba(255, 255, 255, 0) 100%));
+  block-size: 100%;
+  content: "";
+  inline-size: 100%;
+  opacity: 0;
+  transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
+}
+
+.cds--slug__button:hover::before {
+  opacity: 1;
+}
+
+.cds--slug .cds--slug__button:focus::before {
+  block-size: calc(100% - 6px);
+  inline-size: calc(100% - 6px);
+}
+
+.cds--slug__button.cds--slug__button--mini::before,
+.cds--slug__button.cds--slug__button--2xs::before {
+  background: var(--cds-slug-background-hover, #6f6f6f);
+}
+
+.cds--slug__button.cds--slug__button--mini:focus,
+.cds--slug__button.cds--slug__button--2xs:focus {
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-focus-inset, #ffffff);
+}
+
+.cds--slug__button.cds--slug__button--mini:focus::before,
+.cds--slug__button.cds--slug__button--2xs:focus::before {
+  block-size: calc(100% - 4px);
+  inline-size: calc(100% - 4px);
+}
+
+.cds--slug__button--hollow.cds--slug__button--sm,
+.cds--slug__button--hollow.cds--slug__button--md,
+.cds--slug__button--hollow.cds--slug__button--lg,
+.cds--slug__button--hollow.cds--slug__button--xl {
+  block-size: 1.5rem;
+  font-size: 0.75rem;
+  inline-size: 1.5rem;
+  line-height: 1rem;
+}
+
+.cds--slug__button--hollow::before {
+  display: none;
+}
+
+.cds--slug .cds--slug__button--hollow {
+  border: 1px solid var(--cds-border-inverse, #161616);
+  background: transparent;
+  color: var(--cds-text-primary, #161616);
+}
+
+.cds--slug__button--hollow:hover {
+  border-color: var(--cds-slug-hollow-hover, #474747);
+  color: var(--cds-slug-hollow-hover, #474747);
+}
+
+.cds--slug__button--hollow:focus {
+  border-color: var(--cds-focus, #0f62fe);
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
+}
+
+.cds--slug .cds--slug__button--inline {
+  border: 1px solid transparent;
+  border-radius: 0.0625rem;
+  background: transparent;
+  block-size: initial;
+  color: var(--cds-text-primary, #161616);
+  font-size: 0.875rem;
+  inline-size: initial;
+  line-height: initial;
+  padding-inline: 0.25rem;
+}
+
+.cds--slug__button--inline::before {
+  display: none;
+}
+
+.cds--slug .cds--slug__button--inline:focus {
+  border-color: var(--cds-focus, #0f62fe);
+  box-shadow: none;
+}
+
+.cds--slug .cds--slug__button--inline:hover {
+  border-color: var(--cds-icon-secondary, #525252);
+  color: var(--cds-text-secondary, #525252);
+}
+
+.cds--slug .cds--slug__button--inline:focus:hover {
+  border-color: var(--cds-focus, #0f62fe);
+}
+
+.cds--slug .cds--slug__button--inline:hover .cds--slug__text::before {
+  background: var(--cds-icon-secondary, #525252);
+}
+
+.cds--slug--hollow .cds--slug__button--inline:hover .cds--slug__text::before {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--cds-icon-secondary, #525252);
+}
+
+.cds--slug__button--inline .cds--slug__text {
+  padding-inline-start: 0.5rem;
+}
+
+.cds--slug__button--inline.cds--slug__button--lg .cds--slug__text {
+  padding-inline-start: 0.75rem;
+}
+
+.cds--slug__button--inline .cds--slug__text::before {
+  position: absolute;
+  display: inline-block;
+  background: var(--cds-icon-primary, #161616);
+  block-size: 0.25rem;
+  content: "";
+  inline-size: 0.25rem;
+  inset-block-start: 50%;
+  inset-inline-start: 0;
+  opacity: 1;
+  transform: translateY(-50%);
+  transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9);
+}
+
+.cds--slug--hollow .cds--slug__text::before {
+  background: transparent;
+  block-size: 0.375rem;
+  box-shadow: inset 0 0 0 1px var(--cds-icon-primary, #161616);
+  inline-size: 0.375rem;
+}
+
+.cds--slug--hollow .cds--slug__button--sm .cds--slug__text,
+.cds--slug--hollow .cds--slug__button--md .cds--slug__text {
+  padding-inline-start: 0.5625rem;
+}
+
+.cds--slug__button--lg .cds--slug__text::before,
+.cds--slug--hollow .cds--slug__button--lg .cds--slug__text::before {
+  block-size: 0.5rem;
+  inline-size: 0.5rem;
+}
+
+.cds--slug__button--inline.cds--slug__button--mini,
+.cds--slug__button--inline.cds--slug__button--mini .cds--slug__additional-text,
+.cds--slug__button--inline.cds--slug__button--2xs,
+.cds--slug__button--inline.cds--slug__button--2xs .cds--slug__additional-text,
+.cds--slug__button--inline.cds--slug__button--xs,
+.cds--slug__button--inline.cds--slug__button--xs .cds--slug__additional-text,
+.cds--slug__button--inline.cds--slug__button--sm,
+.cds--slug__button--inline.cds--slug__button--sm .cds--slug__additional-text {
+  font-size: 0.75rem;
+}
+
+.cds--slug__button--inline.cds--slug__button--lg,
+.cds--slug__button--inline.cds--slug__button--xl {
+  font-size: 1rem;
+}
+
+.cds--slug .cds--slug__button--inline-with-content {
+  border: 1px solid var(--cds-border-inverse, #161616);
+  padding-block: 0.125rem;
+  padding-inline: 0.5rem;
+}
+
+.cds--slug__button--inline-with-content .cds--slug__additional-text {
+  font-size: var(--cds-body-compact-02-font-size, 1rem);
+  font-weight: var(--cds-body-compact-02-font-weight, 400);
+  line-height: var(--cds-body-compact-02-line-height, 1.375);
+  letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
+  padding-inline-start: 0.25rem;
+}
+
+.cds--slug__button--inline.cds--slug__button--md .cds--slug__additional-text {
+  font-size: 0.875rem;
+}
+
+.cds--slug .cds--slug__button--inline-with-content:focus {
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
+}
+
+.cds--slug.cds--slug--hollow .cds--toggletip-content {
+  row-gap: 0;
+}
+
+.cds--slug.cds--slug--enabled .cds--popover-content {
+  border: 1px solid var(--cds-border-subtle);
+  border-radius: 16px;
+  -webkit-backdrop-filter: blur(25px);
+          backdrop-filter: blur(25px);
+  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+  box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
+  color: var(--cds-text-primary, #161616);
+  min-inline-size: 17.5rem;
+}
+
+.cds--slug.cds--slug--enabled .cds--popover-caret {
+  background: var(--cds-border-subtle);
+}
+
+.cds--slug.cds--slug--enabled .cds--toggletip-content {
+  padding-block-end: 5rem;
+  padding-block-start: 2rem;
+  padding-inline: 2rem;
+}
+
 .cds--stack-horizontal {
   display: inline-grid;
   -moz-column-gap: var(--cds-stack-gap, 0);
@@ -22164,7 +22581,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
 }
 
 .cds--side-nav__item--large {
-  block-size: 3rem;
+  block-size: auto;
 }
 
 .cds--side-nav__divider {
@@ -23192,7 +23609,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
 }
 
 .cds--side-nav__item--large {
-  block-size: 3rem;
+  block-size: auto;
 }
 
 .cds--side-nav__divider {