Fix: hardcoded checkbox background. Closes: #2585

saadeghi · Nov 27, 2023 · b2b87d2 · b2b87d2
1 parent d92ecda
commit b2b87d2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/components/styled/checkbox.css b/src/components/styled/checkbox.css
@@ -11,8 +11,9 @@
   &:checked,
   &[checked="true"],
   &[aria-checked="true"] {
-    @apply bg-base-content bg-no-repeat;
+    @apply bg-no-repeat;
     animation: checkmark var(--animation-input, 0.2s) ease-out;
+    background-color: var(--chkbg);
     background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%),
       linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
       linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),

diff --git a/src/docs/src/routes/(docs)/components/checkbox/+page.svelte.md b/src/docs/src/routes/(docs)/components/checkbox/+page.svelte.md
@@ -214,3 +214,12 @@ data="{[
 <input type="checkbox" class="$$checkbox" id="my-checkbox" />`
 }</pre>
 </Component>
+
+<Component title="Checkbox with custom colors">
+<input type="checkbox" checked="checked" class="checkbox border-orange-400 checked:border-indigo-800 [--chkbg:theme(colors.indigo.600)] [--chkfg:orange]" />
+<input type="checkbox" checked="checked" class="checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="checkbox" checked="checked" class="$$checkbox border-orange-400 checked:border-indigo-800 [--chkbg:theme(colors.indigo.600)] [--chkfg:orange]" />
+<input type="checkbox" checked="checked" class="$$checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />`
+}</pre>
+</Component>
diff --git a/src/docs/src/routes/(docs)/docs/utilities/+page.svelte.md b/src/docs/src/routes/(docs)/docs/utilities/+page.svelte.md
@@ -115,8 +115,8 @@ tooltip
   --tooltip-tail-offset // offset of tooltip tail from target element
 
 checkbox
-  --chkbg // background color of checkbox (HSL values)
-  --chkfg // foreground color of checkbox (HSL values)
+  --chkbg // background color of checkbox
+  --chkfg // foreground color of checkbox
 
 toggle
   --tglbg // background color of toggle
@@ -125,7 +125,7 @@ toggle
 range
   --filler-size // size of range thumb
   --filler-offset // offset of range thumb
-  --range-shdw // shadow color of range thumb (HSL values)
+  --range-shdw // shadow color of range thumb (OKLCH values)
 
 glass
   --glass-blur // blur value of glass effect