update checks and radios

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 668988f5960e0309e4290c83a6383e9294b15b95..2007b5669641a8ff7d20deef8ddd955cb45333ac 100644 (file)
--- 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 3d92c3b1e2a9d0e59ecbe08bbb2d11c265ea3dfc..8f5b13a34b6c9677421dda79a5ae7f9f96348574 100644 (file)
--- 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 5e08a6d77e836480e68344ffb0b0f54f2cb5e58e..d19fdbf567fd00b0864a4847a6797cd6c37f5124 100644 (file)
--- 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 a23bb2a8dbcc7baad42726ca69e79fa634e98f55..ac04a4a279c43adcc76aef291df1dce217403197 100644 (file)
--- 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 e47686bfb1d969aa1225a0687606aeef35b28217..8a47748d928d905656993871c228c48c2a7c4ee0 100644 (file)
--- 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>`)} />