@patreon/studio/module/components/Chip/Chip.module.css

Patreon Studio Design System

.root {
  align-items: center;
  background-color: var(--Chip-backgroundColor);
  border-radius: var(--global-radius-sm);
  box-sizing: border-box;
  color: var(--Chip-color);
  display: inline-flex;
  flex-direction: row;
  gap: var(--global-space-x4);
  height: var(--Chip-height);
  padding: var(--Chip-padding);
  white-space: nowrap;
}

.icon {
  display: block;
}

/* Sizes */
.sizeDefault {
  --Chip-height: 28px;
  --Chip-padding: 0 var(--global-space-x8);
}

.sizeSm {
  --Chip-height: 20px;
  --Chip-padding: 0 var(--global-space-x4);
}

/* Variants */
.variantPrimary {
  --Chip-backgroundColor: var(--global-primary-surface-default);
  --Chip-color: var(--global-primary-onSurface-default);
}

.variantSecondary {
  --Chip-backgroundColor: var(--global-primary-surfaceMuted-default);
  --Chip-color: var(--global-content-regular-default);
}

.variantTertiary {
  border: 1px solid var(--global-border-action-default);

  --Chip-backgroundColor: "transparent";
  --Chip-color: var(--global-content-regular-default);
}

.variantInsetBlack {
  --Chip-backgroundColor: var(--global-constant-blackMuted-default);
  --Chip-color: var(--global-constant-white-default);
}

.variantInsetWhite {
  --Chip-backgroundColor: var(--global-constant-white-default);
  --Chip-color: var(--global-constant-black-default);
}

.variantWarning {
  --Chip-backgroundColor: var(--global-warning-surfaceMuted-default);
  --Chip-color: var(--global-warning-onSurfaceMuted-default);
}

.variantCritical {
  --Chip-backgroundColor: var(--global-critical-surfaceMuted-default);
  --Chip-color: var(--global-critical-onSurfaceMuted-default);
}

.variantLive {
  --Chip-backgroundColor: var(--global-critical-surface-default);
  --Chip-color: var(--global-constant-white-default);
}

.variantLiveSubtle {
  --Chip-backgroundColor: var(--global-constant-blackMuted-default);
  --Chip-color: var(--global-constant-white-default);
}

.variantSuccess {
  --Chip-backgroundColor: var(--global-success-surfaceMuted-default);
  --Chip-color: var(--global-success-onSurfaceMuted-default);
}

.variantRich {
  --Chip-backgroundColor: var(--global-rich-surfaceAlt-default);
  --Chip-color: var(--global-rich-regular-default);
}