@roadtrip/css/styles/components/_tag.css

CSS framework for Roadtrip Design System

/*
 * Tag
 *
 * Index
 * - Grey
 * - Yellow
 * - Red
 * - Violet
 * - Blue
 * - Green
 */

.tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: var(--road-body-small);
  border-radius: 0.25rem;
}

.tag.tag-grey {
  color: var(--road-grey-30);
  background-color: var(--road-grey-85);
}

.tag.tag-grey.tag-grey-contrast {
  color: var(--road-on-primary);
  background-color: var(--road-grey-40);
}

.tag.tag-yellow {
  color: var(--road-yellow-mikado-20);
  background-color: var(--road-yellow-mikado-90);
}

.tag.tag-yellow.tag-yellow-contrast {
  color: var(--road-yellow-mikado-20);
  background-color: var(--road-yellow-mikado-60);
}

.tag.tag-red {
  color: var(--road-red-pepper-30);
  background-color: var(--road-red-pepper-95);
}

.tag.tag-red.tag-red-contrast {
  color: var(--road-on-primary);
  background-color: var(--road-red-pepper-60);
}

.tag.tag-violet {
  color: var(--road-violet-electric-30);
  background-color: var(--road-violet-electric-95);
}

.tag.tag-violet.tag-violet-contrast {
  color: var(--road-on-primary);
  background-color: var(--road-violet-electric-60);
}

.tag.tag-blue {
  color: var(--road-blue-klein-40);
  background-color: var(--road-blue-klein-95);
}

.tag.tag-blue.tag-blue-contrast {
  color: var(--road-on-primary);
  background-color: var(--road-blue-klein-60);
}

.tag.tag-green {
  color: var(--road-green-monstera-30);
  background-color: var(--road-green-monstera-95);
}

.tag.tag-green.tag-green-contrast {
  color: var(--road-on-primary);
  background-color: var(--road-green-monstera-60);
}