@vtmn/css-tag/src/index.css

Decathlon Design System - Vitamin specific CSS styles for tag component

@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/spacings';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/transitions';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-tag {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  inline-size: fit-content;
  padding-block: rem(2px);
  padding-inline: var(--vtmn-spacing_2);
  font-family: var(--vtmn-typo_font-family);
  font-weight: var(--vtmn-typo_font-weight--normal);
  color: var(--vtmn-semantic-color_content-accent);
  background-color: var(--vtmn-semantic-color_background-accent);
  text-align: center;
  border-radius: var(--vtmn-radius_100);
  text-decoration: none;
  outline: 0;
}

a.vtmn-tag:focus-visible {
  box-shadow: var(--vtmn-shadow_focus-visible);
  transition: var(--vtmn-transition_focus-visible);
}

.vtmn-tag > span[class^='vtmx-'] {
  margin-inline-start: rem(-4px);
  margin-inline-end: rem(4px);
  font-size: var(--vtmn-typo_text-2-font-size);
}

/* Variants */
.vtmn-tag_variant--accent {
  background-color: var(--vtmn-semantic-color_background-accent);
  color: var(--vtmn-semantic-color_content-accent);
}

.vtmn-tag_variant--brand {
  background-color: var(--vtmn-semantic-color_background-brand-primary);
  color: var(--vtmn-semantic-color_content-primary-reversed);
}

.vtmn-tag_variant--alert {
  background-color: var(--vtmn-semantic-color_background-alert);
  color: var(--vtmn-semantic-color_content-primary-reversed);
}

/* Decoratives */
.vtmn-tag_variant--decorative_gravel {
  background-color: var(--vtmn-semantic-color_decorative-gravel);
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_gold {
  background-color: var(--vtmn-semantic-color_decorative-gold);
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_cobalt {
  background-color: var(--vtmn-semantic-color_decorative-cobalt);
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_brick {
  background-color: var(--vtmn-semantic-color_decorative-brick);
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_jade {
  background-color: var(--vtmn-semantic-color_decorative-jade);
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_amethyst {
  background-color: var(--vtmn-semantic-color_decorative-amethyst);
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_saffron {
  background-color: var(--vtmn-semantic-color_decorative-saffron);
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_emerald {
  background-color: var(--vtmn-semantic-color_decorative-emerald);
  color: var(--vtmn-semantic-color_content-primary);
}

/* SIZES */

/* Small */
.vtmn-tag_size--small {
  min-block-size: rem(20px);
  block-size: rem(20px);
  font-size: var(--vtmn-typo_caption-1-font-size);
}

/* Medium */
.vtmn-tag_size--medium {
  min-block-size: rem(24px);
  block-size: rem(24px);
  font-size: var(--vtmn-typo_text-3-font-size);
}