@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-chip/pds-chip.css

@@ -1,203 +1,279 @@
 :host {
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --border-radius: var(--pine-border-radius-200);
-  --color-background-accent: var(--pine-color-purple-100);
-  --color-background-accent-dot: var(--pine-color-purple-300);
-  --color-background-accent-interactive: var(--pine-color-purple-200);
-  --color-background-danger: var(--pine-color-red-100);
-  --color-background-danger-dot: var(--pine-color-red-300);
-  --color-background-danger-interactive: var(--pine-color-red-200);
-  --color-background-info: var(--pine-color-blue-100);
-  --color-background-info-dot: var(--pine-color-blue-300);
-  --color-background-info-interactive: var(--pine-color-blue-200);
-  --color-background-neutral: var(--pine-color-grey-300);
-  --color-background-neutral-dot: var(--pine-color-charcoal-100);
-  --color-background-neutral-interactive: var(--pine-color-grey-400);
-  --color-background-success: var(--pine-color-green-100);
-  --color-background-success-dot: var(--pine-color-green-300);
-  --color-background-success-interactive: var(--pine-color-green-200);
-  --color-background-warning: var(--pine-color-yellow-100);
-  --color-background-warning-dot: var(--pine-color-yellow-300);
-  --color-background-warning-interactive: var(--pine-color-yellow-200);
-  --font-size-sm: var(--pine-font-size-087);
-  --font-size-body: var(--pine-font-size-100);
-  --font-weight: var(--pine-font-weight-medium);
-  --line-height: var(--pine-line-height-100);
-  --spacing-xxs: calc(var(--pine-spacing-050) / 2);
-  --spacing-xs: var(--pine-spacing-050);
-  --spacing-sm: calc(var(--pine-spacing-150) / 2);
-  --spacing-md: var(--pine-spacing-100);
-  --spacing-lg: calc(var(--pine-spacing-250) / 2);
-  --spacing-xl: var(--pine-spacing-150);
-  --spacing-xxl: calc(var(--pine-spacing-350) / 2);
-  --sizing-close: 10px;
-  --sizing-close-lg: 24px;
-  --sizing-dot: 4px;
+  --sizing-close: var(--pine-dimension-125);
   align-items: center;
-  border-radius: var(--border-radius);
+  border-radius: var(--pine-dimension-sm);
   display: inline-flex;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-lg);
+  padding-block: var(--pine-dimension-025);
+  padding-inline: var(--pine-dimension-100);
 }
 
 :host(.pds-chip--accent) {
-  background: var(--color-background-accent);
+  background: var(--pine-chip-color-accent);
+  border: var(--pine-border-width) solid var(--pine-chip-color-accent-hover);
 }
 :host(.pds-chip--accent) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-accent-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-accent-dot));
+}
+:host(.pds-chip--accent) .pds-chip__label, :host(.pds-chip--accent) .pds-chip__button, :host(.pds-chip--accent) .pds-chip__close {
+  /* stylelint-disable-next-line */
+  color: var(--pine-chip-color-accent-text);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--accent) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-accent-interactive);
+  background: var(--pine-chip-color-accent-hover);
 }
 
 :host(.pds-chip--accent.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-accent-interactive);
+  background: var(--pine-chip-color-accent-hover);
 }
 
 :host(.pds-chip--danger) {
-  background: var(--color-background-danger);
+  background: var(--pine-chip-color-danger);
+  border: var(--pine-border-width) solid var(--pine-chip-color-danger-hover);
 }
 :host(.pds-chip--danger) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-danger-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-danger-dot));
+}
+:host(.pds-chip--danger) .pds-chip__label, :host(.pds-chip--danger) .pds-chip__button, :host(.pds-chip--danger) .pds-chip__close {
+  /* stylelint-disable-next-line */
+  color: var(--pine-chip-color-danger-text);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--danger) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-danger-interactive);
+  background: var(--pine-chip-color-danger-hover);
 }
 
 :host(.pds-chip--danger.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-danger-interactive);
+  background: var(--pine-chip-color-danger-hover);
 }
 
 :host(.pds-chip--info) {
-  background: var(--color-background-info);
+  background: var(--pine-chip-color-info);
+  border: var(--pine-border-width) solid var(--pine-chip-color-info-hover);
 }
 :host(.pds-chip--info) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-info-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-info-dot));
+}
+:host(.pds-chip--info) .pds-chip__label, :host(.pds-chip--info) .pds-chip__button, :host(.pds-chip--info) .pds-chip__close {
+  /* stylelint-disable-next-line */
+  color: var(--pine-chip-color-info-text);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--info) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-info-interactive);
+  background: var(--pine-chip-color-info-hover);
 }
 
 :host(.pds-chip--info.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-info-interactive);
+  background: var(--pine-chip-color-info-hover);
 }
 
 :host(.pds-chip--neutral) {
-  background: var(--color-background-neutral);
+  background: var(--pine-chip-color-neutral);
+  border: var(--pine-border-width) solid var(--pine-chip-color-neutral-hover);
 }
 :host(.pds-chip--neutral) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-neutral-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-neutral-dot));
+}
+:host(.pds-chip--neutral) .pds-chip__label, :host(.pds-chip--neutral) .pds-chip__button, :host(.pds-chip--neutral) .pds-chip__close {
+  /* stylelint-disable-next-line */
+  color: var(--pine-chip-color-neutral-text);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--neutral) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-neutral-interactive);
+  background: var(--pine-chip-color-neutral-hover);
 }
 
 :host(.pds-chip--neutral.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-neutral-interactive);
+  background: var(--pine-chip-color-neutral-hover);
+}
+
+:host(.pds-chip--solid) {
+  background: var(--pine-chip-color-solid);
+  border: var(--pine-border-width) solid var(--pine-chip-color-solid-hover);
+}
+:host(.pds-chip--solid) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-solid-dot));
+}
+:host(.pds-chip--solid) .pds-chip__label, :host(.pds-chip--solid) .pds-chip__button, :host(.pds-chip--solid) .pds-chip__close {
+  /* stylelint-disable-next-line */
+  color: var(--pine-chip-color-solid-text);
+  font-weight: var(--pine-font-weight-medium);
+}
+:host(.pds-chip--solid) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--pine-chip-color-solid-hover);
+}
+
+:host(.pds-chip--solid.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--pine-chip-color-solid-hover);
+}
+
+:host(.pds-chip--subtle) {
+  background: var(--pine-chip-color-subtle);
+  border: var(--pine-border-width) solid var(--pine-chip-color-subtle-hover);
+}
+:host(.pds-chip--subtle) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-subtle-dot));
+}
+:host(.pds-chip--subtle) .pds-chip__label, :host(.pds-chip--subtle) .pds-chip__button, :host(.pds-chip--subtle) .pds-chip__close {
+  /* stylelint-disable-next-line */
+  color: var(--pine-chip-color-subtle-text);
+  font-weight: var(--pine-font-weight-medium);
+}
+:host(.pds-chip--subtle) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--pine-chip-color-subtle-hover);
+}
+
+:host(.pds-chip--subtle.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--pine-chip-color-subtle-hover);
 }
 
 :host(.pds-chip--success) {
-  background: var(--color-background-success);
+  background: var(--pine-chip-color-success);
+  border: var(--pine-border-width) solid var(--pine-chip-color-success-hover);
 }
 :host(.pds-chip--success) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-success-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-success-dot));
+}
+:host(.pds-chip--success) .pds-chip__label, :host(.pds-chip--success) .pds-chip__button, :host(.pds-chip--success) .pds-chip__close {
+  /* stylelint-disable-next-line */
+  color: var(--pine-chip-color-success-text);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--success) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-success-interactive);
+  background: var(--pine-chip-color-success-hover);
 }
 
 :host(.pds-chip--success.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-success-interactive);
+  background: var(--pine-chip-color-success-hover);
 }
 
 :host(.pds-chip--warning) {
-  background: var(--color-background-warning);
+  background: var(--pine-chip-color-warning);
+  border: var(--pine-border-width) solid var(--pine-chip-color-warning-hover);
 }
 :host(.pds-chip--warning) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-warning-dot);
+  background: var(--pds-chip-dot-color, var(--pine-chip-color-warning-dot));
+}
+:host(.pds-chip--warning) .pds-chip__label, :host(.pds-chip--warning) .pds-chip__button, :host(.pds-chip--warning) .pds-chip__close {
+  /* stylelint-disable-next-line */
+  color: var(--pine-chip-color-warning-text);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--warning) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-warning-interactive);
+  background: var(--pine-chip-color-warning-hover);
 }
 
 :host(.pds-chip--warning.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-warning-interactive);
+  background: var(--pine-chip-color-warning-hover);
+}
+
+:host(.pds-chip--solid) {
+  border-color: transparent;
 }
 
 .pds-chip__dot {
-  border: 1px solid transparent;
-  border-radius: 50%;
+  border: var(--pine-border-width) solid transparent;
+  border-radius: var(--pine-border-radius-full);
   display: inline-block;
-  height: var(--sizing-dot);
-  margin-block-end: var(--spacing-xxs);
-  margin-inline-end: var(--spacing-xs);
-  width: var(--sizing-dot);
+  flex-shrink: 0;
+  height: var(--pine-dimension-2xs);
+  margin-inline-end: var(--pine-dimension-2xs);
+  width: var(--pine-dimension-2xs);
 }
 
-:host(.pds-chip--dropdown) {
-  padding: 0;
+.pds-chip__icon {
+  color: var(--pds-chip-icon-color, currentColor);
 }
-:host(.pds-chip--dropdown) .pds-chip__dot {
-  margin-block-end: calc(var(--spacing-xxs) / 4);
-  margin-block-start: var(--spacing-xxs);
+
+.pds-chip__label {
+  align-items: center;
+  display: flex;
+}
+.pds-chip__label pds-icon {
+  margin-inline-end: var(--pine-dimension-2xs);
+}
+
+:host([max-width]) {
+  box-sizing: border-box;
+  max-width: var(--pds-chip-max-width);
+  min-width: 0;
+}
+:host([max-width]) .pds-chip__label,
+:host([max-width]) .pds-chip__button {
+  min-width: 0;
+}
+:host([max-width]) .pds-chip__label-text {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pds-chip__label, .pds-chip__button {
+  font: var(--pine-typography-body-medium);
+  letter-spacing: var(--pine-letter-spacing);
+}
+
+:host(.pds-chip--dropdown) {
+  padding: var(--pine-dimension-none);
 }
 
 .pds-chip__button {
   align-items: center;
   appearance: none;
   background: transparent;
-  border: 0;
-  border-radius: var(--border-radius);
+  border: var(--pine-dimension-none);
+  border-radius: var(--pine-dimension-sm);
+  cursor: pointer;
   display: flex;
-  font-family: inherit;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-lg);
+  padding: var(--pine-dimension-025) var(--pine-dimension-100);
 }
 .pds-chip__button:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
 }
-.pds-chip__button pds-icon {
-  margin-inline-end: calc(var(--spacing-xxs) * -1);
-  margin-inline-start: var(--spacing-xs);
+.pds-chip__button pds-icon:first-child {
+  margin-inline-end: var(--pine-dimension-2xs);
 }
-
-:host(.pds-chip--tag) {
-  padding-block: var(--spacing-xxs);
+.pds-chip__button pds-icon:last-child {
+  margin-inline-end: calc(var(--pine-dimension-025) * -1);
+  margin-inline-start: var(--pine-dimension-2xs);
 }
 
 .pds-chip__close {
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: 50%;
+  border-radius: var(--pine-border-radius-full);
+  box-sizing: border-box;
   height: var(--sizing-close);
-  margin-inline-end: calc(var(--spacing-md) * -1);
-  margin-inline-start: var(--spacing-xs);
+  margin-inline-end: calc(var(--pine-dimension-xs) * -1);
+  margin-inline-start: var(--pine-dimension-2xs);
   padding: var(--sizing-close);
   position: relative;
   width: var(--sizing-close);
@@ -209,31 +285,80 @@
   transform: translate(-50%, -50%);
 }
 .pds-chip__close:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+  outline: var(--pine-outline-focus);
+}
+
+:host(.pds-chip--sm) {
+  --sizing-close: var(--pine-dimension-100);
+  padding-block: var(--pine-dimension-025);
+  padding-inline: var(--pine-dimension-100);
+}
+:host(.pds-chip--sm) .pds-chip__label, :host(.pds-chip--sm) .pds-chip__button {
+  font: var(--pine-typography-body-sm-medium);
+  letter-spacing: var(--pine-letter-spacing);
+}
+
+:host(.pds-chip--sm.pds-chip--dropdown) {
+  padding: var(--pine-dimension-none);
+}
+:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button {
+  padding: var(--pine-dimension-025) var(--pine-dimension-100);
 }
 
-:host(.pds-chip--large) {
-  font-size: var(--font-size-body);
-  padding-block: var(--spacing-sm);
-  padding-inline: var(--spacing-xxl);
+:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label {
+  padding: var(--pine-dimension-025) var(--pine-dimension-100);
 }
-:host(.pds-chip--large):host(.pds-chip--dropdown) {
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-xxs);
+
+:host(.pds-chip--lg) {
+  padding-block: var(--pine-dimension-025);
+  padding-inline: var(--pine-dimension-150);
+}
+:host(.pds-chip--lg) .pds-chip__label, :host(.pds-chip--lg) .pds-chip__button {
+  font-family: var(--pine-font-family-heading);
+  font-size: var(--pine-font-size-heading-6);
+  font-weight: var(--pine-font-weight-medium);
+  letter-spacing: var(--pine-letter-spacing-heading-6);
+}
+
+:host(.pds-chip--lg.pds-chip--dropdown) {
+  padding: var(--pine-dimension-none);
 }
-:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot {
-  margin-block-end: 0;
+:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button {
+  padding: var(--pine-dimension-025) var(--pine-dimension-150);
 }
-:host(.pds-chip--large) .pds-chip__button {
-  font-size: var(--font-size-body);
-  padding-inline: var(--spacing-xl);
+
+:host(.pds-chip--brand) {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);
+  border: 0;
+  padding: 1px;
+  position: relative;
+}
+:host(.pds-chip--brand) .pds-chip__label {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: calc(var(--pine-dimension-sm) - 1px);
+  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
+  color: var(--pine-color-grey-900);
+  font-weight: var(--pine-font-weight-medium);
+  padding: var(--pine-dimension-025) var(--pine-dimension-100);
+  position: relative;
+  z-index: var(--pine-z-index-raised);
+}
+:host(.pds-chip--brand) .pds-chip__label pds-icon {
+  margin-inline-end: var(--pine-dimension-2xs);
+}
+:host(.pds-chip--brand) .pds-chip__button, :host(.pds-chip--brand) .pds-chip__close {
+  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
+  color: var(--pine-color-grey-900);
+  font-weight: var(--pine-font-weight-medium);
+  position: relative;
+  z-index: var(--pine-z-index-raised);
 }
-:host(.pds-chip--large) .pds-chip__close {
-  height: var(--sizing-close-lg);
-  margin-inline-end: calc(var(--spacing-xl) * -1);
-  width: var(--sizing-close-lg);
+:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child {
+  margin-inline-end: var(--pine-dimension-2xs);
 }
-:host(.pds-chip--large):host(.pds-chip--tag) {
-  padding-block: var(--spacing-xs);
+:host(.pds-chip--brand) .pds-chip__close:hover {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  background: rgba(255, 255, 255, 0.8);
 }