Skip to content

Commit

Permalink
Merge pull request #76 from hyvor/button-fill-input
Browse files Browse the repository at this point in the history 
button updates fixes #71
  • Loading branch information
@supun-io
supun-io authored Jan 2, 2024
2 parents bb16611 + 5d30c57 commit c1707d6
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 78 deletions.
93 changes: 63 additions & 30 deletions src/lib/components/Button/Button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@
'green' |
'red' |
'blue' |
'orange' = 'accent';
'orange' |
'input' = 'accent';
export let block : boolean = false;
export let variant : 'fill' | 'outline' | 'invisible' | 'outline-fill' = 'fill';
export let variant : 'fill' | 'fill-light' | 'outline' | 'invisible' | 'outline-fill' = 'fill';
export let align: 'start' | 'center' = 'center';
export let button = {} as HTMLButtonElement | HTMLAnchorElement;
Expand Down Expand Up @@ -164,14 +165,6 @@
}
}
/* styles */
/* .button.accent {
background-color: var(--accent);
color: var(--accent-text);
transition: .2s box-shadow;
--local-hover-shadow-color: var(--accent-light);
} */
.button {
&.fill {
&.accent {
Expand All @@ -181,6 +174,57 @@
--local-hover-shadow-color: var(--accent-light);
}
&.gray {
background-color: var(--gray-dark);
color: var(--text-white);
transition: .2s box-shadow;
--local-hover-shadow-color: var(--gray-light);
}
&.green {
background-color: var(--green-dark);
color: var(--text-white);
transition: .2s box-shadow;
--local-hover-shadow-color: var(--green-light);
}
&.red {
background-color: var(--red-dark);
color: var(--text-white);
transition: .2s box-shadow;
--local-hover-shadow-color: var(--red-light);
}
&.blue {
background-color: var(--blue-dark);
color: var(--text-white);
transition: .2s box-shadow;
--local-hover-shadow-color: var(--blue-light);
}
&.orange {
background-color: var(--orange-dark);
color: var(--text-white);
transition: .2s box-shadow;
--local-hover-shadow-color: var(--orange-light);
}
&.input {
background-color: var(--input);
color: var(--text);
transition: .2s box-shadow;
--local-hover-shadow-color: var(--input-hover);
}
}
&.fill-light {
&.accent {
background-color: var(--accent-light);
color: var(--accent);
transition: .2s box-shadow;
--local-hover-shadow-color: var(--accent-lightest);
}
&.gray {
background-color: var(--gray-light);
color: var(--gray-dark);
Expand Down Expand Up @@ -319,6 +363,7 @@
transition: .2s box-shadow;
--local-hover-shadow-color: var(--orange-light);
}
}
&.invisible {
Expand Down Expand Up @@ -374,22 +419,17 @@
color: var(--orange-dark);
}
}
&.input {
&:hover {
background-color: var(--input);
box-shadow: none!important;
color: var(--text);
}
}
}
}
.button.soft {
background-color: var(--accent-light);
color: var(--accent);
transition: .2s box-shadow;
--local-hover-shadow-color: #eee;
}
.button.light {
background-color: #f5f5f5;
color: var(--text);
transition: .2s box-shadow;
--local-hover-shadow-color: var(--accent-light);
}
:global(:root.dark) .button.light {
background-color: #2e2e2e;
}
Expand All @@ -404,13 +444,6 @@
}
}
.button.danger {
background-color: var(--red-dark);
color: var(--text-white);
transition: .2s box-shadow;
--local-hover-shadow-color: var(--red-light);
}
/*Styles for button disabled state*/
.button[disabled] {
cursor: not-allowed;
Expand Down
120 changes: 72 additions & 48 deletions src/routes/[[slug]]/docs/Button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,81 +128,105 @@ All other properties will be forwarded to the underlying element.
<h4>Fill</h4>

<CodeBlock code={`
<Button color="accent" variant="fill">Fill Button</Button>
<Button color="gray" variant="fill">Fill Button</Button>
<Button color="green" variant="fill">Fill Button</Button>
<Button color="red" variant="fill">Fill Button</Button>
<Button color="blue" variant="fill">Fill Button</Button>
<Button color="orange" variant="fill">Fill Button</Button>
<Button color="accent" variant="fill">Fill Accent</Button>
<Button color="gray" variant="fill">Fill Gray</Button>
<Button color="green" variant="fill">Fill Green</Button>
<Button color="red" variant="fill">Fill Red</Button>
<Button color="blue" variant="fill">Fill Blue</Button>
<Button color="orange" variant="fill">Fill Orange</Button>
<Button color="input" variant="fill">Fill Button</Button>
`} />

<CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
<Button color="accent" variant="fill">Fill Button</Button>
<Button color="gray" variant="fill">Fill Button</Button>
<Button color="green" variant="fill">Fill Button</Button>
<Button color="red" variant="fill">Fill Button</Button>
<Button color="blue" variant="fill">Fill Button</Button>
<Button color="orange" variant="fill">Fill Button</Button>
<Button color="accent" variant="fill">Fill Accent</Button>
<Button color="gray" variant="fill">Fill Gray</Button>
<Button color="green" variant="fill">Fill Green</Button>
<Button color="red" variant="fill">Fill Red</Button>
<Button color="blue" variant="fill">Fill Blue</Button>
<Button color="orange" variant="fill">Fill Orange</Button>
<Button color="input" variant="fill">Fill Input</Button>
</CodeResult>

<h4>Fill-Light</h4>

<CodeBlock code={`
<Button color="accent" variant="fill-light">Fill Accent</Button>
<Button color="gray" variant="fill-light">Fill Gray</Button>
<Button color="green" variant="fil-light">Fill Green</Button>
<Button color="red" variant="fill-light">Fill Red</Button>
<Button color="blue" variant="fill-light">Fill Blue</Button>
<Button color="orange" variant="fill-light">Fill Orange</Button>
`} />

<CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
<Button color="accent" variant="fill-light">Fill Accent</Button>
<Button color="gray" variant="fill-light">Fill Gray</Button>
<Button color="green" variant="fill-light">Fill Green</Button>
<Button color="red" variant="fill-light">Fill Red</Button>
<Button color="blue" variant="fill-light">Fill Blue</Button>
<Button color="orange" variant="fill-light">Fill Orange</Button>
</CodeResult>

<h4>Outline</h4>

<CodeBlock code={`
<Button color="accent" variant="outline">Outline Button</Button>
<Button color="gray" variant="outline">Outline Button</Button>
<Button color="green" variant="outline">Outline Button</Button>
<Button color="red" variant="outline">Outline Button</Button>
<Button color="blue" variant="outline">Outline Button</Button>
<Button color="orange" variant="outline">Outline Button</Button>
<Button color="accent" variant="outline">Outline Accent</Button>
<Button color="gray" variant="outline">Outline Gray</Button>
<Button color="green" variant="outline">Outline Green</Button>
<Button color="red" variant="outline">Outline Red</Button>
<Button color="blue" variant="outline">Outline Blue</Button>
<Button color="orange" variant="outline">Outline Orange</Button>
`} />

<CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
<Button color="accent" variant="outline">Outline Button</Button>
<Button color="gray" variant="outline">Outline Button</Button>
<Button color="green" variant="outline">Outline Button</Button>
<Button color="red" variant="outline">Outline Button</Button>
<Button color="blue" variant="outline">Outline Button</Button>
<Button color="orange" variant="outline">Outline Button</Button>
<Button color="accent" variant="outline">Outline Accent</Button>
<Button color="gray" variant="outline">Outline Gray</Button>
<Button color="green" variant="outline">Outline Green</Button>
<Button color="red" variant="outline">Outline Red</Button>
<Button color="blue" variant="outline">Outline Blue</Button>
<Button color="orange" variant="outline">Outline Orange</Button>
</CodeResult>

<h4>Outline Fill</h4>

<CodeBlock code={`
<Button color="accent" variant="outline-fill">Outline-fill Button</Button>
<Button color="gray" variant="outline-fill">Outline-fill Button</Button>
<Button color="green" variant="outline-fill">Outline-fill Button</Button>
<Button color="red" variant="outline-fill">Outline-fill Button</Button>
<Button color="blue" variant="outline-fill">Outline-fill Button</Button>
<Button color="orange" variant="outline-fill">Outline-fill Button</Button>
<Button color="accent" variant="outline-fill">Outline-fill Accent</Button>
<Button color="gray" variant="outline-fill">Outline-fill Gray</Button>
<Button color="green" variant="outline-fill">Outline-fill Green</Button>
<Button color="red" variant="outline-fill">Outline-fill Red</Button>
<Button color="blue" variant="outline-fill">Outline-fill Blue</Button>
<Button color="orange" variant="outline-fill">Outline-fill Orange</Button>
`} />

<CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
<Button color="accent" variant="outline-fill">Outline-fill Button</Button>
<Button color="gray" variant="outline-fill">Outline-fill Button</Button>
<Button color="green" variant="outline-fill">Outline-fill Button</Button>
<Button color="red" variant="outline-fill">Outline-fill Button</Button>
<Button color="blue" variant="outline-fill">Outline-fill Button</Button>
<Button color="orange" variant="outline-fill">Outline-fill Button</Button>
<Button color="accent" variant="outline-fill">Outline-fill Accent</Button>
<Button color="gray" variant="outline-fill">Outline-fill Gray</Button>
<Button color="green" variant="outline-fill">Outline-fill Green</Button>
<Button color="red" variant="outline-fill">Outline-fill Red</Button>
<Button color="blue" variant="outline-fill">Outline-fill Blue</Button>
<Button color="orange" variant="outline-fill">Outline-fill Orange</Button>
</CodeResult>

<h4>Invisible</h4>

<CodeBlock code={`
<Button color="accent" variant="invisible">Invisible Button</Button>
<Button color="gray" variant="invisible">Invisible Button</Button>
<Button color="green" variant="invisible">Invisible Button</Button>
<Button color="red" variant="invisible">Invisible Button</Button>
<Button color="blue" variant="invisible">Invisible Button</Button>
<Button color="orange" variant="invisible">Invisible Button</Button>
<Button color="accent" variant="invisible">Invisible Accent</Button>
<Button color="gray" variant="invisible">Invisible Gray</Button>
<Button color="green" variant="invisible">Invisible Green</Button>
<Button color="red" variant="invisible">Invisible Red</Button>
<Button color="blue" variant="invisible">Invisible Blue</Button>
<Button color="orange" variant="invisible">Invisible Orange</Button>
<Button color="input" variant="invisible">Invisible Input</Button>
`} />

<CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
<Button color="accent" variant="invisible">Invisible Button</Button>
<Button color="gray" variant="invisible">Invisible Button</Button>
<Button color="green" variant="invisible">Invisible Button</Button>
<Button color="red" variant="invisible">Invisible Button</Button>
<Button color="blue" variant="invisible">Invisible Button</Button>
<Button color="orange" variant="invisible">Invisible Button</Button>
<Button color="accent" variant="invisible">Invisible Accent</Button>
<Button color="gray" variant="invisible">Invisible Gray</Button>
<Button color="green" variant="invisible">Invisible Green</Button>
<Button color="red" variant="invisible">Invisible Red</Button>
<Button color="blue" variant="invisible">Invisible Blue</Button>
<Button color="orange" variant="invisible">Invisible Orange</Button>
<Button color="input" variant="invisible">Invisible Input</Button>
</CodeResult>

<h2 id="slots">Slots</h2>
Expand Down

0 comments on commit c1707d6

Please sign in to comment.