@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(--component-button-action-default);
  --Chip-color: var(--component-button-onAction-default);
}

.variantSecondary { 
  --Chip-backgroundColor: var(--global-primary-muted-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-muted-default);
  --Chip-color: var(--global-warning-onMuted-default);
}

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

.variantLive { 
  --Chip-backgroundColor: var(--global-critical-action-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-muted-default);
  --Chip-color: var(--global-success-onMuted-default);
}