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

Multi-brand React design system with design tokens from Figma

/* Base Rating */
.ds-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--size2, 8px);
  -webkit-font-smoothing: antialiased;
}

/* Stars container */
.ds-rating__stars {
  display: flex;
  gap: var(--size1, 4px);
}

/* Star wrapper */
.ds-rating__star-wrapper {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.ds-rating--readonly .ds-rating__star-wrapper,
.ds-rating--disabled .ds-rating__star-wrapper {
  cursor: default;
}

/* Half star clickable area */
.ds-rating__star-half {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}

/* Star */
.ds-rating__star {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-icon-default-subtle);
  transition: all 0.2s ease-in-out;
}

.ds-rating__star--full {
  color: var(--semantic-icon-warning-bold);
}

.ds-rating__star--half {
  position: relative;
  color: var(--semantic-icon-default-subtle);
}

.ds-rating__star--half::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  color: var(--semantic-icon-warning-bold);
}

/* Hover effect */
.ds-rating:not(.ds-rating--readonly):not(.ds-rating--disabled) .ds-rating__star-wrapper:hover .ds-rating__star {
  transform: scale(1.1);
}

/* Disabled */
.ds-rating--disabled {
  opacity: 0.5;
}

/* Value */
.ds-rating__value {
  font-family: var(--body-regular-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-regular-fontSize, 16px);
  font-weight: var(--body-regular-strong-fontWeight, 700);
  line-height: var(--body-regular-lineHeight, 150%);
  color: var(--semantic-text-corp-primary);
}

/* Sizes */
.ds-rating--small .ds-rating__value {
  font-size: var(--body-small-fontSize, 14px);
}

.ds-rating--large .ds-rating__value {
  font-size: var(--body-large-fontSize, 18px);
}