From: Mark Otto <markdotto@gmail.com>
Date: Fri, 10 Oct 2025 23:13:06 +0000 (-0700)
Subject: update checks and radios
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=22db3a464c41754c4e334320eef473388d019925;p=thirdparty%2Fbootstrap.git

update checks and radios
---

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 668988f596..2007b56696 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -895,13 +895,6 @@ $utilities: map.merge(
       values: $zindex-levels,
     ),
     // scss-docs-end utils-zindex
-    // scss-docs-start utils-check-colors
-    "check-color": (
-      property: --#{$prefix}check-checked-bg --#{$prefix}check-checked-border-color --#{$prefix}radio-checked-bg --#{$prefix}radio-checked-border-color --#{$prefix}switch-checked-bg,
-      class: checked,
-      values: theme-color-values("bg")
-    )
-    // scss-docs-end utils-check-colors
   ),
   $utilities
 );
diff --git a/scss/forms/_check.scss b/scss/forms/_check.scss
index 3d92c3b1e2..8f5b13a34b 100644
--- a/scss/forms/_check.scss
+++ b/scss/forms/_check.scss
@@ -58,15 +58,15 @@ $check-disabled-opacity: .65 !default;
     :where(input) {
       appearance: none;
       // later: maybe set a tertiary bg color?
-      background-color: var(--#{$prefix}check-bg);
-      border: 1px solid var(--#{$prefix}check-border-color);
+      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-bg));
+      border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}check-border-color));
       // stylelint-disable-next-line property-disallowed-list
       border-radius: .25em;
     }
 
     :where(input:checked, input:indeterminate) {
-      background-color: var(--#{$prefix}check-checked-bg);
-      border-color: var(--#{$prefix}check-checked-border-color);
+      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-bg));
+      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-border-color));
     }
 
     &:has(input:checked) .checked,
diff --git a/scss/forms/_radio.scss b/scss/forms/_radio.scss
index 5e08a6d77e..d19fdbf567 100644
--- a/scss/forms/_radio.scss
+++ b/scss/forms/_radio.scss
@@ -45,15 +45,15 @@ $radio-disabled-opacity: .65 !default;
     height: 1rem;
     margin-block: .125rem;
     appearance: none;
-    background-color: var(--#{$prefix}radio-bg);
-    border: 1px solid var(--#{$prefix}radio-border-color);
+    background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-bg));
+    border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}radio-border-color));
     // stylelint-disable-next-line property-disallowed-list
     border-radius: 50%;
 
     &:checked {
-      color: var(--#{$prefix}primary-contrast);
-      background-color: var(--#{$prefix}radio-checked-bg);
-      border-color: var(--#{$prefix}radio-checked-border-color);
+      color: var(--#{$prefix}theme-contrast, var(--#{$prefix}primary-contrast));
+      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-bg));
+      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-border-color));
 
       &::before {
         position: absolute;
diff --git a/site/src/content/docs/forms/checkbox.mdx b/site/src/content/docs/forms/checkbox.mdx
index a23bb2a8db..ac04a4a279 100644
--- a/site/src/content/docs/forms/checkbox.mdx
+++ b/site/src/content/docs/forms/checkbox.mdx
@@ -64,10 +64,10 @@ Consider margin utilities for additional spacing, and flex utilities for alignme
 
 ## Theme colors
 
-Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.check` element. This will set the checked background and border color to the theme color.
+Modify the appearance of checked checkboxes by adding the `.theme-{color}` class to the `.check` element. This will set the checked background and border color to the theme color.
 
 <Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-checkgroup>
-    <div class="check checked-${themeColor.name}">
+    <div class="check theme-${themeColor.name}">
       <input type="checkbox" id="check${themeColor.name}" checked />
       <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
         <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
diff --git a/site/src/content/docs/forms/radio.mdx b/site/src/content/docs/forms/radio.mdx
index e47686bfb1..8a47748d92 100644
--- a/site/src/content/docs/forms/radio.mdx
+++ b/site/src/content/docs/forms/radio.mdx
@@ -23,10 +23,10 @@ Wrap the `.radio` in a `<b-radiogroup>` layout component and add your label. We
 
 ## Theme colors
 
-Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.radio` element. This will set the checked background and border color to the theme color.
+Modify the appearance of checked checkboxes by adding the `.theme-{color}` class to the `.radio` element. This will set the checked background and border color to the theme color.
 
 <Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-radiogroup>
-    <input type="radio" id="radio${themeColor.name}" class="radio checked-${themeColor.name}" checked />
+    <input type="radio" id="radio${themeColor.name}" class="radio theme-${themeColor.name}" checked />
     <label for="radio${themeColor.name}">Example ${themeColor.name} radio</label>
   </b-radiogroup>`)} />