Theme:

Rating

Ratings use radio inputs. List the inputs in descending value order (rows are reversed) so the checked shape and everything before it fills. Color comes from the parent.

Stars

<div class="dui-rating"> <input type="radio" name="r" class="dui-rating-star" /> <input type="radio" name="r" class="dui-rating-star" checked /> <input type="radio" name="r" class="dui-rating-star" /> <input type="radio" name="r" class="dui-rating-star" /> <input type="radio" name="r" class="dui-rating-star" /> </div>

Hearts & Color

<div class="dui-rating" style="color: var(--dui-color-error)"> <input type="radio" name="h" class="dui-rating-heart" /> … </div>