From 11f1c9ab204604485e0939a83cfe39794dcb6879 Mon Sep 17 00:00:00 2001
From: Pouya Saadeghi <pouya.saadeghi@gmail.com>
Date: Sat, 29 Oct 2022 18:16:31 +0300
Subject: [PATCH] Squashed commit of the following:

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

    add color modifiers to `checkbox` component

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

    add color modifiers to `radio` component

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

    docs: update range description

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

    add color modifiers to `toggle`

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

    add color modifiers to `range` component
---
 .../src/routes/components/checkbox.svelte.md  | 104 ++++++++++++++
 .../src/routes/components/radio.svelte.md     |  86 +++++++++--
 .../src/routes/components/range.svelte.md     |  50 ++++++-
 .../src/routes/components/toggle.svelte.md    | 135 ++++++++++--------
 4 files changed, 298 insertions(+), 77 deletions(-)

diff --git a/src/docs/src/routes/components/checkbox.svelte.md b/src/docs/src/routes/components/checkbox.svelte.md
index a015a8539f8..406bbe08136 100644
--- a/src/docs/src/routes/components/checkbox.svelte.md
+++ b/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" /> 
diff --git a/src/docs/src/routes/components/radio.svelte.md b/src/docs/src/routes/components/radio.svelte.md
index 18399c54c39..46fed9d669e 100644
--- a/src/docs/src/routes/components/radio.svelte.md
+++ b/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,13 +151,13 @@ 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>
@@ -109,13 +165,13 @@ data="{[
 `<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>
@@ -123,13 +179,13 @@ data="{[
 `<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>
diff --git a/src/docs/src/routes/components/range.svelte.md b/src/docs/src/routes/components/range.svelte.md
index f818e151525..4033495fb9a 100644
--- a/src/docs/src/routes/components/range.svelte.md
+++ b/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" /> 
diff --git a/src/docs/src/routes/components/toggle.svelte.md b/src/docs/src/routes/components/toggle.svelte.md
index 74d442cf333..a78e35e14d6 100644
--- a/src/docs/src/routes/components/toggle.svelte.md
+++ b/src/docs/src/routes/components/toggle.svelte.md
@@ -19,6 +19,10 @@ data="{[
   { type:'modifier', class: 'toggle-primary', desc: 'Adds `primary` to toggle' },
   { type:'modifier', class: 'toggle-secondary', desc: 'Adds `secondary` to toggle' },
   { type:'modifier', class: 'toggle-accent', desc: 'Adds `accent` to toggle' },
+  { type:'modifier', class: 'toggle-success', desc: 'Adds `success` to toggle' },
+  { type:'modifier', class: 'toggle-warning', desc: 'Adds `warning` to toggle' },
+  { type:'modifier', class: 'toggle-info', desc: 'Adds `info` to toggle' },
+  { type:'modifier', class: 'toggle-error', desc: 'Adds `error` to toggle' },
   { type:'responsive', class: 'toggle-lg', desc: 'Large toggle' },
   { type:'responsive', class: 'toggle-md', desc: 'Medium toggle (default)' },
   { type:'responsive', class: 'toggle-sm', desc: 'Small toggle' },
@@ -61,78 +65,91 @@ data="{[
 }</pre>
 </Component>
 
-<Component title="Primary color">
-<div class="form-control w-52">
-  <label class="cursor-pointer label">
-    <span class="label-text">Remember me</span> 
-    <input type="checkbox" class="toggle toggle-primary" checked />
-  </label>
-</div>
-<pre slot="html" use:replace={{ to: $prefix }}>{
-`<div class="$$form-control">
-  <label class="$$label cursor-pointer">
-    <span class="$$label-text">Remember me</span>
-    <input type="checkbox" class="$$toggle $$toggle-primary" checked />
-  </label>
-</div>`
-}</pre>
-<pre slot="react" use:replace={{ to: $prefix }}>{
-`<div className="$$form-control">
-  <label className="$$label cursor-pointer">
-    <span className="$$label-text">Remember me</span>
-    <input type="checkbox" className="$$toggle $$toggle-primary" checked />
-  </label>
-</div>`
-}</pre>
-</Component>
-
-<Component title="Secondary color">
-<div class="form-control w-52">
-  <label class="cursor-pointer label">
-    <span class="label-text">Remember me</span> 
-    <input type="checkbox" class="toggle toggle-secondary" checked />
-  </label>
+<Component title="Checkboxes with brand colors">
+<div class="flex flex-col">
+  <div class="form-control w-52">
+    <label class="cursor-pointer label">
+      <span class="label-text">Remember me</span> 
+      <input type="checkbox" class="toggle toggle-primary" checked />
+    </label>
+  </div>
+  <div class="form-control w-52">
+    <label class="cursor-pointer label">
+      <span class="label-text">Remember me</span> 
+      <input type="checkbox" class="toggle toggle-secondary" checked />
+    </label>
+  </div>
+  <div class="form-control w-52">
+    <label class="cursor-pointer label">
+      <span class="label-text">Remember me</span> 
+      <input type="checkbox" class="toggle toggle-accent" checked />
+    </label>
+  </div>
 </div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
-`<div class="$$form-control">
-  <label class="$$label cursor-pointer">
-    <span class="$$label-text">Remember me</span>
-    <input type="checkbox" class="$$toggle $$toggle-secondary" checked />
-  </label>
+`<div class="flex flex-col">
+  <div class="form-control w-52">
+    <label class="cursor-pointer label">
+      <span class="label-text">Remember me</span> 
+      <input type="checkbox" class="$$toggle $$toggle-primary" checked />
+    </label>
+  </div>
+  <div class="form-control w-52">
+    <label class="cursor-pointer label">
+      <span class="label-text">Remember me</span> 
+      <input type="checkbox" class="$$toggle $$toggle-secondary" checked />
+    </label>
+  </div>
+  <div class="form-control w-52">
+    <label class="cursor-pointer label">
+      <span class="label-text">Remember me</span> 
+      <input type="checkbox" class="$$toggle $$toggle-accent" checked />
+    </label>
+  </div>
 </div>`
 }</pre>
 <pre slot="react" use:replace={{ to: $prefix }}>{
-`<div className="$$form-control">
-  <label className="$$label cursor-pointer">
-    <span className="$$label-text">Remember me</span>
-    <input type="checkbox" className="$$toggle $$toggle-secondary" checked />
-  </label>
+`<div className="flex flex-col">
+  <div className="form-control w-52">
+    <label className="cursor-pointer label">
+      <span className="label-text">Remember me</span> 
+      <input type="checkbox" className="$$toggle $$toggle-primary" checked />
+    </label>
+  </div>
+  <div className="form-control w-52">
+    <label className="cursor-pointer label">
+      <span className="label-text">Remember me</span> 
+      <input type="checkbox" className="$$toggle $$toggle-secondary" checked />
+    </label>
+  </div>
+  <div className="form-control w-52">
+    <label className="cursor-pointer label">
+      <span className="label-text">Remember me</span> 
+      <input type="checkbox" className="$$toggle $$toggle-accent" checked />
+    </label>
+  </div>
 </div>`
 }</pre>
 </Component>
 
-<Component title="Accent color">
-<div class="form-control w-52">
-  <label class="cursor-pointer label">
-    <span class="label-text">Remember me</span> 
-    <input type="checkbox" class="toggle toggle-accent" checked />
-  </label>
+<Component title="Checkboxes with state colors">
+<div class="flex flex-col items-center gap-2">
+  <input type="checkbox" class="toggle toggle-success" checked />
+  <input type="checkbox" class="toggle toggle-warning" checked />
+  <input type="checkbox" class="toggle toggle-info" checked />
+  <input type="checkbox" class="toggle toggle-error" checked />
 </div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
-`<div class="$$form-control">
-  <label class="$$label cursor-pointer">
-    <span class="$$label-text">Remember me</span>
-    <input type="checkbox" class="$$toggle $$toggle-accent" checked />
-  </label>
-</div>`
+`<input type="checkbox" class="$$toggle $$toggle-success" checked />
+<input type="checkbox" class="$$toggle $$toggle-warning" checked />
+<input type="checkbox" class="$$toggle $$toggle-info" checked />
+<input type="checkbox" class="$$toggle $$toggle-error" checked />`
 }</pre>
 <pre slot="react" use:replace={{ to: $prefix }}>{
-`<div className="$$form-control">
-  <label className="$$label cursor-pointer">
-    <span className="$$label-text">Remember me</span>
-    <input type="checkbox" className="$$toggle $$toggle-accent" checked />
-  </label>
-</div>`
+`<input type="checkbox" className="$$toggle $$toggle-success" checked />
+<input type="checkbox" className="$$toggle $$toggle-warning" checked />
+<input type="checkbox" className="$$toggle $$toggle-info" checked />
+<input type="checkbox" className="$$toggle $$toggle-error" checked />`
 }</pre>
 </Component>