Drop .star-rating-dark

Orange-OpenSource · Oct 3, 2023 · ea496be · ea496be
1 parent d443832
commit ea496be
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 32 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1183,10 +1183,6 @@ $form-star-rating-checked-color:        $accessible-orange !default;
 $form-star-rating-unchecked-color:      $gray-700 !default;
 $form-star-rating-hover-color:          $black !default;
 
-$form-star-rating-dark-checked-color:   $primary !default;
-$form-star-rating-dark-unchecked-color: $gray-500 !default;
-$form-star-rating-dark-hover-color:     $white !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;

diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss
@@ -73,12 +73,6 @@
   }
 }
 
-.star-rating-dark {
-  --#{$prefix}star-rating-checked-color: #{$form-star-rating-dark-checked-color};
-  --#{$prefix}star-rating-unchecked-color: #{$form-star-rating-dark-unchecked-color};
-  --#{$prefix}star-rating-hover-color: #{$form-star-rating-dark-hover-color};
-}
-
 .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};

diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md
@@ -414,30 +414,13 @@ Star ratings come with a smaller variant: `.star-rating-sm`.
 
 ### Dark variant
 
-Add `.star-rating-dark` to the `.star-rating` for a dark variant.
+{{< deprecated-in "5.3.3" >}}
 
-{{< example class="bg-dark" >}}
-<form>
-  <fieldset class="star-rating star-rating-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"><span class="visually-hidden">Terrible</span></label>
-
-    <input type="radio" id="bad3" name="rating" value="2" class="visually-hidden">
-    <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"><span class="visually-hidden">Mixed</span></label>
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-    <input type="radio" id="good3" name="rating" value="4" class="visually-hidden" checked>
-    <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"><span class="visually-hidden">Excellent</span></label>
-  </fieldset>
-</form>
-{{< /example >}}
+Add `data-bs-theme="dark"` to the `.star-rating` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 
 ### Readonly