add color modifiers to radio component

Avensen · Oct 7, 2022 · 9c79936 · 9c79936
1 parent 89345ff
commit 9c79936
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 15 deletions.
diff --git a/src/components/styled/radio.css b/src/components/styled/radio.css
@@ -45,6 +45,50 @@
       @apply border-accent bg-accent text-accent-content;
     }
   }
+  &-success {
+    --chkbg: var(--su);
+    @apply border-success hover:border-success;
+    &:focus-visible {
+      outline: 2px solid hsl(var(--su));
+    }
+    &:checked,
+    &[aria-checked=true] {
+      @apply border-success bg-success text-success-content;
+    }
+  }
+  &-warning {
+    --chkbg: var(--wa);
+    @apply border-warning hover:border-warning;
+    &:focus-visible {
+      outline: 2px solid hsl(var(--wa));
+    }
+    &:checked,
+    &[aria-checked=true] {
+      @apply border-warning bg-warning text-warning-content;
+    }
+  }
+  &-info {
+    --chkbg: var(--in);
+    @apply border-info hover:border-info;
+    &:focus-visible {
+      outline: 2px solid hsl(var(--in));
+    }
+    &:checked,
+    &[aria-checked=true] {
+      @apply border-info bg-info text-info-content;
+    }
+  }
+  &-error {
+    --chkbg: var(--er);
+    @apply border-error hover:border-error;
+    &:focus-visible {
+      outline: 2px solid hsl(var(--er));
+    }
+    &:checked,
+    &[aria-checked=true] {
+      @apply border-error bg-error text-error-content;
+    }
+  }
   &:disabled {
     @apply cursor-not-allowed opacity-20;
   }

diff --git 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,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>