Squashed commit of the following:

commit 0afefb3
Author: NikarashiHatsu <yourlovelydev@gmail.com>
Date:   Fri Oct 7 23:15:19 2022 +0700

    add color modifiers to `checkbox` component

commit 9c79936
Author: NikarashiHatsu <yourlovelydev@gmail.com>
Date:   Fri Oct 7 23:08:39 2022 +0700

    add color modifiers to `radio` component

commit 89345ff
Author: NikarashiHatsu <yourlovelydev@gmail.com>
Date:   Fri Oct 7 23:02:09 2022 +0700

    docs: update range description

commit ab8b48e
Author: NikarashiHatsu <yourlovelydev@gmail.com>
Date:   Fri Oct 7 23:00:03 2022 +0700

    add color modifiers to `toggle`

commit 62ef035
Author: NikarashiHatsu <yourlovelydev@gmail.com>
Date:   Fri Oct 7 22:27:08 2022 +0700

    add color modifiers to `range` component

src/docs/src/routes/components/checkbox.svelte.md

@@ -19,6 +19,10 @@ data="{[
   { type:'modifier', class: 'checkbox-primary', desc: 'Adds `primary` to checkbox' },
   { type:'modifier', class: 'checkbox-secondary', desc: 'Adds `secondary` to checkbox' },
   { type:'modifier', class: 'checkbox-accent', desc: 'Adds `accent` to checkbox' },
+  { type:'modifier', class: 'checkbox-success', desc: 'Adds `success` to checkbox' },
+  { type:'modifier', class: 'checkbox-warning', desc: 'Adds `warning` to checkbox' },
+  { type:'modifier', class: 'checkbox-info', desc: 'Adds `info` to checkbox' },
+  { type:'modifier', class: 'checkbox-error', desc: 'Adds `error` to checkbox' },
   { type:'responsive', class: 'checkbox-lg', desc: 'Large checkbox' },
   { type:'responsive', class: 'checkbox-md', desc: 'Medium checkbox (default)' },
   { type:'responsive', class: 'checkbox-sm', desc: 'Small checkbox' },
@@ -136,6 +140,106 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Success color">
+<div class="form-control w-52">
+  <label class="cursor-pointer label">
+    <span class="label-text">Remember me</span> 
+    <input type="checkbox" checked="checked" class="checkbox checkbox-success" />
+  </label>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$form-control">
+  <label class="$$cursor-pointer $$label">
+    <span class="$$label-text">Remember me</span>
+    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-success" />
+  </label>
+</div>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$form-control">
+  <label className="$$cursor-pointer $$label">
+    <span className="$$label-text">Remember me</span>
+    <input type="checkbox" checked className="$$checkbox $$checkbox-success" />
+  </label>
+</div>`
+}</pre>
+</Component>
+
+<Component title="Warning color">
+<div class="form-control w-52">
+  <label class="cursor-pointer label">
+    <span class="label-text">Remember me</span> 
+    <input type="checkbox" checked="checked" class="checkbox checkbox-warning" />
+  </label>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$form-control">
+  <label class="$$cursor-pointer $$label">
+    <span class="$$label-text">Remember me</span>
+    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-warning" />
+  </label>
+</div>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$form-control">
+  <label className="$$cursor-pointer $$label">
+    <span className="$$label-text">Remember me</span>
+    <input type="checkbox" checked className="$$checkbox $$checkbox-warning" />
+  </label>
+</div>`
+}</pre>
+</Component>
+
+<Component title="Info color">
+<div class="form-control w-52">
+  <label class="cursor-pointer label">
+    <span class="label-text">Remember me</span> 
+    <input type="checkbox" checked="checked" class="checkbox checkbox-info" />
+  </label>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$form-control">
+  <label class="$$cursor-pointer $$label">
+    <span class="$$label-text">Remember me</span>
+    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-info" />
+  </label>
+</div>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$form-control">
+  <label className="$$cursor-pointer $$label">
+    <span className="$$label-text">Remember me</span>
+    <input type="checkbox" checked className="$$checkbox $$checkbox-info" />
+  </label>
+</div>`
+}</pre>
+</Component>
+
+<Component title="Error color">
+<div class="form-control w-52">
+  <label class="cursor-pointer label">
+    <span class="label-text">Remember me</span> 
+    <input type="checkbox" checked="checked" class="checkbox checkbox-error" />
+  </label>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$form-control">
+  <label class="$$cursor-pointer $$label">
+    <span class="$$label-text">Remember me</span>
+    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-error" />
+  </label>
+</div>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$form-control">
+  <label className="$$cursor-pointer $$label">
+    <span className="$$label-text">Remember me</span>
+    <input type="checkbox" checked className="$$checkbox $$checkbox-error" />
+  </label>
+</div>`
+}</pre>
+</Component>
+
 <Component title="Sizes">
 <div class="flex flex-col items-center gap-2">
   <input type="checkbox" checked="checked" class="checkbox checkbox-xs" /> 

src/docs/src/routes/components/radio.svelte.md

@@ -18,6 +18,10 @@ data="{[
   { type:'modifier', class: 'radio-primary', desc: 'Adds `primary` to radio' },
   { type:'modifier', class: 'radio-secondary', desc: 'Adds `secondary` to radio' },
   { type:'modifier', class: 'radio-accent', desc: 'Adds `accent` to radio' },
+  { type:'modifier', class: 'radio-success', desc: 'Adds `success` to radio' },
+  { type:'modifier', class: 'radio-warning', desc: 'Adds `warning` to radio' },
+  { type:'modifier', class: 'radio-info', desc: 'Adds `info` to radio' },
+  { type:'modifier', class: 'radio-error', desc: 'Adds `error` to radio' },
   { type:'responsive', class: 'radio-lg', desc: 'Large radio' },
   { type:'responsive', class: 'radio-md', desc: 'Medium radio (default)' },
   { type:'responsive', class: 'radio-sm', desc: 'Small radio' },
@@ -77,16 +81,68 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Success color">
+<input type="radio" name="radio-5" class="radio radio-success" checked />
+<input type="radio" name="radio-5" class="radio radio-success" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="$$radio" name="radio-5" class="radio radio-success" checked />
+<input type="$$radio" name="radio-5" class="radio radio-success" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="$$radio" name="radio-5" className="radio radio-success" checked />
+<input type="$$radio" name="radio-5" className="radio radio-success" />`
+}</pre>
+</Component>
+
+<Component title="Warning color">
+<input type="radio" name="radio-6" class="radio radio-warning" checked />
+<input type="radio" name="radio-6" class="radio radio-warning" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="$$radio" name="radio-6" class="radio radio-warning" checked />
+<input type="$$radio" name="radio-6" class="radio radio-warning" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="$$radio" name="radio-6" className="radio radio-warning" checked />
+<input type="$$radio" name="radio-6" className="radio radio-warning" />`
+}</pre>
+</Component>
+
+<Component title="Info color">
+<input type="radio" name="radio-7" class="radio radio-info" checked />
+<input type="radio" name="radio-7" class="radio radio-info" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="$$radio" name="radio-7" class="radio radio-info" checked />
+<input type="$$radio" name="radio-7" class="radio radio-info" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="$$radio" name="radio-7" className="radio radio-info" checked />
+<input type="$$radio" name="radio-7" className="radio radio-info" />`
+}</pre>
+</Component>
+
+<Component title="Error color">
+<input type="radio" name="radio-8" class="radio radio-error" checked />
+<input type="radio" name="radio-8" class="radio radio-error" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="$$radio" name="radio-8" class="radio radio-error" checked />
+<input type="$$radio" name="radio-8" class="radio radio-error" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="$$radio" name="radio-8" className="radio radio-error" checked />
+<input type="$$radio" name="radio-8" className="radio radio-error" />`
+}</pre>
+</Component>
+
 <Component title="Disabled">
-<input type="radio" name="radio-5" class="radio" disabled checked />
-<input type="radio" name="radio-5" class="radio" disabled />
+<input type="radio" name="radio-9" class="radio" disabled checked />
+<input type="radio" name="radio-9" class="radio" disabled />
 <pre slot="html" use:replace={{ to: $prefix }}>{
-`<input type="$$radio" name="radio-5" class="radio" disabled checked />
-<input type="$$radio" name="radio-5" class="radio" disabled />`
+`<input type="$$radio" name="radio-9" class="radio" disabled checked />
+<input type="$$radio" name="radio-9" class="radio" disabled />`
 }</pre>
 <pre slot="react" use:replace={{ to: $prefix }}>{
-`<input type="$$radio" name="radio-5" className="radio" disabled checked />
-<input type="$$radio" name="radio-5" className="radio" disabled />`
+`<input type="$$radio" name="radio-9" className="radio" disabled checked />
+<input type="$$radio" name="radio-9" className="radio" disabled />`
 }</pre>
 </Component>
 
@@ -95,41 +151,41 @@ data="{[
   <div class="form-control w-52">
     <label class="cursor-pointer label">
       <span class="label-text">Red pill</span> 
-      <input type="radio" name="radio-6" class="radio checked:bg-red-500" checked />
+      <input type="radio" name="radio-10" class="radio checked:bg-red-500" checked />
     </label>
   </div>
   <div class="form-control w-52">
     <label class="cursor-pointer label">
-      <span class="label-text">blue pill</span> 
-      <input type="radio" name="radio-6" class="radio checked:bg-blue-500" checked />
+      <span class="label-text">Blue pill</span> 
+      <input type="radio" name="radio-10" class="radio checked:bg-blue-500" checked />
     </label>
   </div>
 </div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$form-control">
   <label class="$$label cursor-pointer">
     <span class="$$label-text">Red pill</span> 
-    <input type="radio" name="radio-6" class="$$radio checked:bg-red-500" checked />
+    <input type="radio" name="radio-10" class="$$radio checked:bg-red-500" checked />
   </label>
 </div>
 <div class="$$form-control">
   <label class="$$label cursor-pointer">
-    <span class="$$label-text">blue pill</span> 
-    <input type="radio" name="radio-6" class="$$radio checked:bg-blue-500" checked />
+    <span class="$$label-text">Blue pill</span> 
+    <input type="radio" name="radio-10" class="$$radio checked:bg-blue-500" checked />
   </label>
 </div>`
 }</pre>
 <pre slot="react" use:replace={{ to: $prefix }}>{
 `<div className="$$form-control">
   <label className="$$label cursor-pointer">
     <span className="$$label-text">Red pill</span> 
-    <input type="radio" name="radio-6" className="$$radio checked:bg-red-500" checked />
+    <input type="radio" name="radio-10" className="$$radio checked:bg-red-500" checked />
   </label>
 </div>
 <div className="$$form-control">
   <label className="$$label cursor-pointer">
-    <span className="$$label-text">blue pill</span> 
-    <input type="radio" name="radio-6" className="$$radio checked:bg-blue-500" checked />
+    <span className="$$label-text">Blue pill</span> 
+    <input type="radio" name="radio-10" className="$$radio checked:bg-blue-500" checked />
   </label>
 </div>`
 }</pre>

src/docs/src/routes/components/range.svelte.md

@@ -14,9 +14,13 @@ published: true
 <ClassTable
 data="{[
   { type:'component', class: 'range', desc: 'Range input' },
-  { type:'modifier', class: 'range-primary', desc: 'primary color' },
-  { type:'modifier', class: 'range-secondary', desc: 'secondary color' },
-  { type:'modifier', class: 'range-accent', desc: 'accent color' },
+  { type:'modifier', class: 'range-primary', desc: 'Adds `primary` to range' },
+  { type:'modifier', class: 'range-secondary', desc: 'Adds `secondary` to range' },
+  { type:'modifier', class: 'range-accent', desc: 'Adds `accent` to range' },
+  { type:'modifier', class: 'range-success', desc: 'Adds `success` to range' },
+  { type:'modifier', class: 'range-warning', desc: 'Adds `warning` to range' },
+  { type:'modifier', class: 'range-info', desc: 'Adds `info` to range' },
+  { type:'modifier', class: 'range-error', desc: 'Adds `error` to range' },
   { type:'responsive', class: 'range-lg', desc: 'Large range' },
   { type:'responsive', class: 'range-md', desc: 'Medium range (default)' },
   { type:'responsive', class: 'range-sm', desc: 'Small range' },
@@ -97,6 +101,46 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Success color">
+<input type="range" min="0" max="100" value="40" class="range range-success max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="range" min="0" max="100" value="40" class="$$range $$range-success" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="range" min="0" max="100" value="40" className="$$range $$range-success" />`
+}</pre>
+</Component>
+
+<Component title="Warning color">
+<input type="range" min="0" max="100" value="40" class="range range-warning max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="range" min="0" max="100" value="40" class="$$range $$range-warning" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="range" min="0" max="100" value="40" className="$$range $$range-warning" />`
+}</pre>
+</Component>
+
+<Component title="Info color">
+<input type="range" min="0" max="100" value="40" class="range range-info max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="range" min="0" max="100" value="40" class="$$range $$range-info" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="range" min="0" max="100" value="40" className="$$range $$range-info" />`
+}</pre>
+</Component>
+
+<Component title="Error color">
+<input type="range" min="0" max="100" value="40" class="range range-error max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="range" min="0" max="100" value="40" class="$$range $$range-error" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="range" min="0" max="100" value="40" className="$$range $$range-error" />`
+}</pre>
+</Component>
+
 <Component title="Sizes">
 <div class="flex flex-col w-full items-center gap-4">
   <input type="range" min="0" max="100" value="40" class="range range-xs max-w-xs" />