Star rating: Refactoring + rebranding.

.bundlewatch.config.json

@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "42.75 kB"
+      "maxSize": "43.0 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "39.75 kB"
+      "maxSize": "40.0 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

scss/_mixins.scss

@@ -30,7 +30,6 @@
 @import "mixins/lists";
 @import "mixins/forms";
 @import "mixins/table-variants";
-@import "mixins/star-rating"; // Boosted mod
 
 // Skins
 @import "mixins/border-radius";

scss/_variables.scss

@@ -1183,6 +1183,14 @@ $form-check-inline-margin-end:    1rem !default;
 $form-star-size:                  1.5625rem !default;
 $form-star-size-sm:               1.25rem !default;
 $form-star-margin-between:        -.125rem !default;
+
+$form-star-rating-checked-color:       var(--#{$prefix}link-hover-color) !default;
+$form-star-rating-unchecked-color:     var(--#{$prefix}code-color) !default;
+$form-star-rating-hover-color:         var(--#{$prefix}emphasis-color) !default;
+$form-star-rating-checked-icon:        escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='#000' stroke='#000' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
+$form-star-rating-unchecked-icon:      escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='transparent' stroke='#000' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
+$form-star-rating-sm-checked-icon:     escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' stroke='#000' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
+$form-star-rating-sm-unchecked-icon:   escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='transparent' stroke='#000' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
 //fusv-disable
 $form-star-focus-color:           $black !default; // Deprecated in v5.2.3
 $form-star-focus-outline:         var(--#{$prefix}border-width) solid $form-star-focus-color !default; // Deprecated in v5.2.3

scss/forms/_star-rating.scss

@@ -3,31 +3,52 @@
 //
 
 .star-rating {
-  &.disabled,
+  --#{$prefix}star-rating-checked-color: #{$form-star-rating-checked-color};
+  --#{$prefix}star-rating-unchecked-color: #{$form-star-rating-unchecked-color};
+  --#{$prefix}star-rating-hover-color: #{$form-star-rating-hover-color};
+  --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon};
+  --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon};
+  font-size: $form-star-size;
+
   &:disabled {
     pointer-events: none;
+    --#{$prefix}star-rating-checked-color: var(--#{$prefix}border-color-translucent);
+    --#{$prefix}star-rating-unchecked-color: var(--#{$prefix}border-color-translucent);
   }
 
   > label {
-    display: block;
+    cursor: pointer;
+  }
+
+  > label,
+  span {
     float: left;
     width: 1em;
     height: 1em;
-    font-size: $form-star-size;
-    cursor: pointer;
-    @include form-star-rating($accessible-orange);
+
+    &::before {
+      display: block;
+      width: 100%;
+      height: 100%;
+      mask-image: var(--#{$prefix}star-rating-checked-icon);
+      content: "";
+      background-color: var(--#{$prefix}star-rating-checked-color);
+    }
 
     &:not(:first-of-type){
       margin-left: $form-star-margin-between;
     }
   }
 
-  > input:checked ~ label {
-    @include form-star-rating($gray-500);
+  > input:checked ~ label::before,
+  .checked ~ span::before {
+    mask-image: var(--#{$prefix}star-rating-unchecked-icon);
+    background-color: var(--#{$prefix}star-rating-unchecked-color);
   }
 
-  > input:checked + label {
-    @include form-star-rating($accessible-orange);
+  > input:checked + label::before {
+    mask-image: var(--#{$prefix}star-rating-checked-icon);
+    background-color: var(--#{$prefix}star-rating-checked-color);
   }
 
   > [data-focus-visible-added]:focus + label {
@@ -36,45 +57,24 @@
     box-shadow: inset 0 0 0 add(1px, $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color);
   }
 
-  &:hover input + label {
-    @include form-star-rating($black);
-  }
-
-  > input:hover ~ label {
-    @include form-star-rating($gray-500);
-  }
-
-  > input:hover + label {
-    @include form-star-rating($black);
-  }
-}
-
-.star-rating-dark {
-  > label {
-    @include form-star-rating($brand-orange);
-  }
-
-  > input:checked ~ label {
-    @include form-star-rating($gray-700);
-  }
-
-  > input:checked + label {
-    @include form-star-rating($brand-orange);
-  }
-
-  &:hover input + label {
-    @include form-star-rating($white);
+  &:hover input + label::before {
+    mask-image: var(--#{$prefix}star-rating-checked-icon);
+    background-color: var(--#{$prefix}star-rating-hover-color);
   }
 
-  > input:hover ~ label {
-    @include form-star-rating($gray-700);
+  > input:hover ~ label::before {
+    mask-image: var(--#{$prefix}star-rating-unchecked-icon);
+    background-color: var(--#{$prefix}star-rating-unchecked-color);
   }
 
-  > input:hover + label {
-    @include form-star-rating($white);
+  > input:hover + label::before {
+    mask-image: var(--#{$prefix}star-rating-checked-icon);
+    background-color: var(--#{$prefix}star-rating-hover-color);
   }
 }
 
-.star-rating-sm > label {
+.star-rating-sm {
+  --#{$prefix}star-rating-checked-icon: #{$form-star-rating-sm-checked-icon};
+  --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-sm-unchecked-icon};
   font-size: $form-star-size-sm;
 }

scss/mixins/_star-rating.scss

@@ -1,3 +1,5 @@
+@include deprecate("`form-star-rating()`", "v5.3.2", "v6.0.0");
+
 // scss-docs-start form-star-rating-mixin
 @mixin form-star-rating($color) {
   background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='#{$color}' d='m12.5 2.9 2.379 7.35 7.721-.007-6.25 4.536 2.392 7.346-6.242-4.547-6.242 4.547 2.392-7.346-6.25-4.536 7.721.007Z'/></svg>"));

site/content/docs/5.3/forms/checks-radios.md

@@ -368,19 +368,19 @@ Star rating system is built on top of radios. Simply add `.star-rating` to a `<f
     <legend class="visually-hidden">Results relevance</legend>
 
     <input type="radio" id="terrible" name="rating" value="1" class="visually-hidden">
-    <label for="terrible" title="Terrible"></label>
+    <label for="terrible" title="Terrible"><span class="visually-hidden">Terrible</span></label>
 
     <input type="radio" id="bad" name="rating" value="2" class="visually-hidden">
-    <label for="bad" title="Bad"></label>
+    <label for="bad" title="Bad"><span class="visually-hidden">Bad</span></label>
 
     <input type="radio" id="mixed" name="rating" value="3" class="visually-hidden">
-    <label for="mixed" title="Mixed"></label>
+    <label for="mixed" title="Mixed"><span class="visually-hidden">Mixed</span></label>
 
     <input type="radio" id="good" name="rating" value="4" class="visually-hidden" checked>
-    <label for="good" title="Good"></label>
+    <label for="good" title="Good"><span class="visually-hidden">Good</span></label>
 
     <input type="radio" id="excellent" name="rating" value="5" class="visually-hidden">
-    <label for="excellent" title="Excellent"></label>
+    <label for="excellent" title="Excellent"><span class="visually-hidden">Excellent</span></label>
   </fieldset>
 </form>
 {{< /example >}}
@@ -395,72 +395,93 @@ Star ratings come with a smaller variant: `.star-rating-sm`.
     <legend class="visually-hidden">Results relevance</legend>
 
     <input type="radio" id="terrible2" name="rating" value="1" class="visually-hidden">
-    <label for="terrible2" title="Terrible"></label>
+    <label for="terrible2" title="Terrible"><span class="visually-hidden">Terrible</span></label>
 
     <input type="radio" id="bad2" name="rating" value="2" class="visually-hidden">
-    <label for="bad2" title="Bad"></label>
+    <label for="bad2" title="Bad"><span class="visually-hidden">Bad</span></label>
 
     <input type="radio" id="mixed2" name="rating" value="3" class="visually-hidden">
-    <label for="mixed2" title="Mixed"></label>
+    <label for="mixed2" title="Mixed"><span class="visually-hidden">Mixed</span></label>
 
     <input type="radio" id="good2" name="rating" value="4" class="visually-hidden" checked>
-    <label for="good2" title="Good"></label>
+    <label for="good2" title="Good"><span class="visually-hidden">Good</span></label>
 
     <input type="radio" id="excellent2" name="rating" value="5" class="visually-hidden">
-    <label for="excellent2" title="Excellent"></label>
+    <label for="excellent2" title="Excellent"><span class="visually-hidden">Excellent</span></label>
   </fieldset>
 </form>
 {{< /example >}}
 
 ### Dark variant
 
-Add `.star-rating-dark` to the `.star-rating` for a dark variant.
+Add `data-bs-theme="dark"` to the `.star-rating` or any parent element for a dark variant.
 
 {{< example class="bg-dark" >}}
 <form>
-  <fieldset class="star-rating star-rating-dark">
+  <fieldset class="star-rating" data-bs-theme="dark">
     <legend class="visually-hidden">Results relevance</legend>
 
     <input type="radio" id="terrible3" name="rating" value="1" class="visually-hidden">
-    <label for="terrible3" title="Terrible"></label>
+    <label for="terrible3" title="Terrible"><span class="visually-hidden">Terrible</span></label>
 
     <input type="radio" id="bad3" name="rating" value="2" class="visually-hidden">
-    <label for="bad3" title="Bad"></label>
+    <label for="bad3" title="Bad"><span class="visually-hidden">Bad</span></label>
 
     <input type="radio" id="mixed3" name="rating" value="3" class="visually-hidden">
-    <label for="mixed3" title="Mixed"></label>
+    <label for="mixed3" title="Mixed"><span class="visually-hidden">Mixed</span></label>
 
     <input type="radio" id="good3" name="rating" value="4" class="visually-hidden" checked>
-    <label for="good3" title="Good"></label>
+    <label for="good3" title="Good"><span class="visually-hidden">Good</span></label>
 
     <input type="radio" id="excellent3" name="rating" value="5" class="visually-hidden">
-    <label for="excellent3" title="Excellent"></label>
+    <label for="excellent3" title="Excellent"><span class="visually-hidden">Excellent</span></label>
   </fieldset>
 </form>
 {{< /example >}}
 
+### Readonly
+Make star ratings readable but non editable by using `<span>` instead of `<input>` elements.
+
+{{< example >}}
+<div class="star-rating">
+  <p class="visually-hidden">Star rating: rated 3 out of 5</p>
+
+  <div aria-hidden="true">
+    <span></span>
+    <span></span>
+    <span class="checked"></span>
+    <span></span>
+    <span></span>
+  </div>
+</div>
+{{< /example >}}
+
 ### Disabled
 
 Make star ratings look inactive inside or outside a form by adding the `disabled` boolean attribute to the `<fieldset>` element and the `checked` boolean attribute to any `<input>` element.
 
 {{< example >}}
-<fieldset class="star-rating" disabled>
-  <input type="radio" id="terrible4" name="rating" value="1" class="visually-hidden">
-  <label for="terrible4" title="Terrible"></label>
+<form>
+  <fieldset class="star-rating" disabled aria-hidden="true">
+    <legend class="visually-hidden">Disabled star rating</legend>
+
+    <input type="radio" id="terrible4" name="rating" value="1" class="visually-hidden">
+    <label for="terrible4" title="Terrible"><span class="visually-hidden">Terrible</span></label>
 
-  <input type="radio" id="bad4" name="rating" value="2" class="visually-hidden">
-  <label for="bad4" title="Bad"></label>
+    <input type="radio" id="bad4" name="rating" value="2" class="visually-hidden">
+    <label for="bad4" title="Bad"><span class="visually-hidden">Bad</span></label>
 
-  <input type="radio" id="mixed4" name="rating" value="3" class="visually-hidden" checked>
-  <label for="mixed4" title="Mixed"></label>
+    <input type="radio" id="mixed4" name="rating" value="3" class="visually-hidden" checked>
+    <label for="mixed4" title="Mixed"><span class="visually-hidden">Mixed</span></label>
 
-  <input type="radio" id="good4" name="rating" value="4" class="visually-hidden">
-  <label for="good4" title="Good"></label>
+    <input type="radio" id="good4" name="rating" value="4" class="visually-hidden">
+    <label for="good4" title="Good"><span class="visually-hidden">Good</span></label>
 
-  <input type="radio" id="excellent4" name="rating" value="5" class="visually-hidden">
-  <label for="excellent4" title="Excellent"></label>
-</fieldset>
-<span class="visually-hidden">rated 3 stars out of 5</span>
+    <input type="radio" id="excellent4" name="rating" value="5" class="visually-hidden">
+    <label for="excellent4" title="Excellent"><span class="visually-hidden">Excellent</span></label>
+  </fieldset>
+  <p class="visually-hidden">Disabled star rating: rated 3 out of 5</p>
+</form>
 {{< /example >}}
 
 <!-- End mod -->
@@ -479,4 +500,6 @@ Variables for switches:
 
 ### Sass mixins
 
+{{< deprecated-in "5.3.2" >}}
+
 {{< scss-docs name="form-star-rating-mixin" file="scss/mixins/_star-rating.scss" >}}