@carbon/styles 1.41.0-rc.0 → 1.41.1

package/css/styles.css

@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -19492,7 +19520,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   min-inline-size: 12.5rem;
 }
 .cds--slider-container--two-handles .cds--slider {
-  margin-inline: rem(4px);
+  margin-inline: 0.25rem;
 }
 
 .cds--slider__range-label {
@@ -19845,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);
@@ -22273,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 {
@@ -23301,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 {