@penaprieto/design-system/dist/components/Breadcrumb/Breadcrumb.css

Multi-brand React design system with design tokens from Figma

/* Base Breadcrumb */
.ds-breadcrumb {
  -webkit-font-smoothing: antialiased;
}

/* List */
.ds-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--size2, 8px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Item */
.ds-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--size2, 8px);
  font-family: var(--body-regular-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-regular-fontSize, 16px);
  font-weight: var(--body-regular-fontWeight, 400);
  line-height: var(--body-regular-lineHeight, 150%);
}

/* Link */
.ds-breadcrumb__link {
  color: var(--semantic-text-corp-secondary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.ds-breadcrumb__link:hover {
  color: var(--semantic-text-indigo-primary);
  text-decoration: underline;
}

.ds-breadcrumb__link:focus-visible {
  outline: 2px solid var(--semantic-focus-corp);
  outline-offset: 2px;
  border-radius: var(--br-xs, 4px);
}

/* Text (current page) */
.ds-breadcrumb__text {
  color: var(--semantic-text-corp-primary);
  font-weight: var(--body-regular-strong-fontWeight, 700);
}

/* Separator */
.ds-breadcrumb__separator {
  display: flex;
  align-items: center;
  color: var(--semantic-icon-default-subtle);
}