@dialpad/dialtone-css/lib/build/less/components/chip.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: CHIP
//
//  These are chip classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/chip
//
//  TABLE OF CONTENTS
//  • BASE STYLE
//  • INTERACTIVITY
//  • SIZES
//
//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------
.d-chip {
  //  Component CSS Vars
  --chip-color-text: var(--dt-color-foreground-primary);
  --chip-color-background: var(--dt-color-surface-moderate-opaque);
  --chip-border-radius: var(--dt-size-radius-pill);

  position: relative;
  display: inline-flex;
  align-items: center;
}

.d-chip__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: var(--dt-size-100-percent);
  padding: var(--dt-space-300) var(--dt-space-400);
  color: var(--chip-color-text);
  font-size: var(--dt-font-size-200);
  font-family: inherit;
  line-height: var(--lh4);
  background-color: var(--chip-color-background);
  border: none;
  border-radius: var(--chip-border-radius);
  transition-timing-function: var(--ttf-out-quint);
  transition-duration: var(--td200);
  transition-property: background-color;

  // Reserves space within the chip for the close button, since the close button is
  // not nested within the chip. Only apply if close button exists (more than one child).
  &:not(:only-child)::after {
    flex-shrink: 0;
    width: calc(var(--dt-size-500) + var(--dt-size-200));
    height: calc(var(--dt-size-500) + var(--dt-size-200));
    content: '';
  }

  // These properties are only set if d-chip is interactive (ex: a button).
  &:is(a),
  &:is(button),
  &:is([role='button']),
  &:is([role='link']) {
    text-decoration: none;
    cursor: pointer;

    &:hover {
      --chip-color-background: var(--dt-color-surface-bold-opaque);

      text-decoration: none;
    }

    &:active {
      --chip-color-background: var(--dt-color-surface-moderate-opaque);
    }

    &:focus-visible {
      outline: none;
      box-shadow: var(--dt-shadow-focus);
    }
  }

  .d-avatar {
    --avatar-size-shape: var(--dt-size-550);

    margin: var(--dt-space-200-negative) var(--dt-space-350) var(--dt-space-200-negative) var(--dt-space-350-negative);
  }
}

.d-chip__close {
  .d-btn();
  .d-btn--circle();

  position: absolute;
  right: var(--dt-space-200);
  padding: calc(var(--dt-space-200) + var(--dt-space-100));
  border-width: 0;

  &::before {
    position: absolute;
    width: 2.6rem; // magic number
    height: 2.8rem; // magic number
    content: '';
  }

  &:hover:not([disabled]) {
    --button-color-background: var(--dt-action-color-background-muted-hover);
  }

  &:active:not([disabled]),
  &.d-btn--active:not([disabled]),
  &.d-btn--active:active:not([disabled]) {
    --button-color-background: var(--dt-action-color-background-muted-active);
  }
}

.d-chip__icon {
  padding-right: var(--dt-space-350);
  line-height: 1;
}

.d-chip__label--active {
  background-color: var(--dt-color-surface-bold-opaque);
}

.d-chip__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.d-chip--disabled,
.d-chip__close--disabled {
  opacity: var(--dt-opacity-1000);
  pointer-events: none;
}

//  ============================================================================
//  $   SIZES
//  ----------------------------------------------------------------------------
//  $$  EXTRA SMALL
//  ----------------------------------------------------------------------------
.d-chip__label--xs {
  padding: var(--dt-space-200) var(--dt-space-350);
  font-size: var(--dt-font-size-100);

  // reserves space within the chip for the close button, since the close button is
  // not nested within the chip.
  &:not(:only-child)::after {
    flex-shrink: 0;
    width: var(--dt-size-450);
    height: var(--dt-size-450);
    content: '';
  }

  .d-avatar {
    --avatar-size-shape: var(--dt-size-500);

    margin-right: var(--dt-space-350);
    margin-left: var(--dt-space-300-negative);
  }
}

.d-chip__close--xs {
  padding: var(--dt-space-100);

  // Clickable area for the close button.
  &::before {
    width: var(--dt-size-550);
    height: var(--dt-size-550);
  }
}

//  $$ SMALL
//  ----------------------------------------------------------------------------
.d-chip__label--sm {
  padding: var(--dt-space-200) var(--dt-space-400);
  font-size: var(--dt-font-size-200);

  // reserves space within the chip for the close button, since the close button is
  // not nested within the chip.
  &:not(:only-child)::after {
    flex-shrink: 0;
    width: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
    height: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
    content: '';
  }

  .d-avatar {
    --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-300)); // 20

    margin-right: var(--dt-space-300);
  }
}

.d-chip__close--sm {
  padding: var(--dt-space-200);

  &::before {
    width: var(--dt-size-550);
    height: var(--dt-size-550);
  }
}