Tweak buttons

This commit is contained in:
Jonathan Staab 2023-03-16 15:53:50 -05:00
parent e775e4959c
commit 85427833e5
6 changed files with 9 additions and 8 deletions

2
.env
View File

@ -1,2 +1,2 @@
VITE_THEME_DARK=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-1:#FFFFFF,gray-2:#FAF6F1,gray-3:#F2EBE1,gray-4:#E9E0D3,gray-5:#B3AA98,gray-6:#565249,gray-7:#393530,gray-8:#252422,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#F2EBE1,input-hover:#FAF6F1 VITE_THEME_DARK=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-1:#FFFFFF,gray-2:#FAF6F1,gray-3:#F2EBE1,gray-4:#E9E0D3,gray-5:#B3AA98,gray-6:#565249,gray-7:#393530,gray-8:#252422,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#FAF6F1,input-hover:#F2EBE1
VITE_THEME_LIGHT=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-8:#FFFFFF,gray-7:#FAF6F1,gray-6:#F2EBE1,gray-5:#E9E0D3,gray-4:#B3AA98,gray-3:#565249,gray-2:#393530,gray-1:#252422,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#FAF6F1,input-hover:#F2EBE1 VITE_THEME_LIGHT=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-8:#FFFFFF,gray-7:#FAF6F1,gray-6:#F2EBE1,gray-5:#E9E0D3,gray-4:#B3AA98,gray-3:#565249,gray-2:#393530,gray-1:#252422,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#FAF6F1,input-hover:#F2EBE1

View File

@ -15,9 +15,10 @@
{"opacity-50": loading}, {"opacity-50": loading},
switcher(type, { switcher(type, {
anchor: "underline", anchor: "underline",
button: "py-2 px-4 rounded bg-input text-accent whitespace-nowrap", button:
"py-2 px-4 rounded bg-input text-accent whitespace-nowrap border border-solid border-gray-6 hover:bg-input-hover",
"button-circle": "button-circle":
"w-10 h-10 flex justify-center items-center rounded-full bg-input text-accent whitespace-nowrap border border-solid border-gray-5", "w-10 h-10 flex justify-center items-center rounded-full bg-input text-accent whitespace-nowrap border border-solid border-gray-6 hover:bg-input-hover",
"button-accent": "button-accent":
"py-2 px-4 rounded bg-accent text-white whitespace-nowrap border border-solid border-accent-light hover:bg-accent-light", "py-2 px-4 rounded bg-accent text-white whitespace-nowrap border border-solid border-accent-light hover:bg-accent-light",
}) })

View File

@ -10,7 +10,7 @@
"py-2 px-4 rounded cursor-pointer border border-solid transition-all", "py-2 px-4 rounded cursor-pointer border border-solid transition-all",
{"text-gray-5": disabled}, {"text-gray-5": disabled},
switcher(theme, { switcher(theme, {
default: "bg-input text-accent border-gray-5 hover:bg-input-hover", default: "bg-input text-accent border-gray-6 hover:bg-input-hover",
accent: "text-white bg-accent border-accent-light hover:bg-accent-light", accent: "text-white bg-accent border-accent-light hover:bg-accent-light",
}) })
) )

View File

@ -7,7 +7,7 @@
const className = cx( const className = cx(
$$props.class, $$props.class,
"rounded shadow-inset py-2 px-4 pr-10 w-full placeholder:text-gray-5", "rounded shadow-inset py-2 px-4 pr-10 w-full placeholder:text-gray-4",
"bg-input border border-solid border-gray-3 text-black", "bg-input border border-solid border-gray-3 text-black",
{"pl-10": $$slots.before, "pr-10": $$slots.after} {"pl-10": $$slots.before, "pr-10": $$slots.after}
) )

View File

@ -20,7 +20,7 @@
</script> </script>
<div <div
class="m-auto flex max-w-sm flex-col gap-4 rounded border border-solid border-gray-6 bg-gray-7 p-4"> class="m-auto flex max-w-sm flex-col gap-4 rounded border border-solid border-gray-6 bg-gray-8 p-4">
<canvas class="m-auto rounded" bind:this={canvas} /> <canvas class="m-auto rounded" bind:this={canvas} />
<Input value={code}> <Input value={code}>
<button slot="after" class="fa fa-copy" on:click={copy} /> <button slot="after" class="fa fa-copy" on:click={copy} />

View File

@ -8,8 +8,8 @@
const className = cx( const className = cx(
$$props.class, $$props.class,
"rounded shadow-inset py-2 px-4 pr-10 w-full bg-gray-3 text-gray-8", "rounded shadow-inset py-2 px-4 pr-10 w-full bg-input text-black",
"placeholder:text-gray-7 placeholder:opacity-75" "placeholder:text-gray-4 border border-solid border-gray-3"
) )
</script> </script>