Skip to content

Commit

Permalink
add color modifiers to toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@NikarashiHatsu
NikarashiHatsu committed Oct 7, 2022
1 parent 62ef035 commit ab8b48e
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 59 deletions.
48 changes: 48 additions & 0 deletions src/components/styled/toggle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,54 @@
@apply border-accent border-opacity-10 bg-accent text-accent-content;
}
}
&-success {
&:focus-visible {
outline: 2px solid hsl(var(--su));
}
&:checked,
&[checked="true"],
&[aria-checked=true] {
--chkbg: hsl(var(--su));
@apply border-success;
@apply border-success border-opacity-10 bg-success text-success-content;
}
}
&-warning {
&:focus-visible {
outline: 2px solid hsl(var(--wa));
}
&:checked,
&[checked="true"],
&[aria-checked=true] {
--chkbg: hsl(var(--wa));
@apply border-warning;
@apply border-warning border-opacity-10 bg-warning text-warning-content;
}
}
&-info {
&:focus-visible {
outline: 2px solid hsl(var(--in));
}
&:checked,
&[checked="true"],
&[aria-checked=true] {
--chkbg: hsl(var(--in));
@apply border-info;
@apply border-info border-opacity-10 bg-info text-info-content;
}
}
&-error {
&:focus-visible {
outline: 2px solid hsl(var(--er));
}
&:checked,
&[checked="true"],
&[aria-checked=true] {
--chkbg: hsl(var(--er));
@apply border-error;
@apply border-error border-opacity-10 bg-error text-error-content;
}
}
&:disabled {
@apply cursor-not-allowed border-transparent bg-base-content bg-opacity-20;
}
Expand Down
135 changes: 76 additions & 59 deletions src/docs/src/routes/components/toggle.svelte.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down Expand Up @@ -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>

Expand Down

0 comments on commit ab8b48e

Please sign in to comment.