restructure for sveltekit

2024-06-29 10:46:27 +01:00 · 2024-06-29 10:46:27 +01:00 · 9ef27fd2a2
commit 9ef27fd2a2
parent 7deea47857
73 changed files with 469 additions and 28 deletions
--- a/src/lib/ui/Button.svelte
+++ b/src/lib/ui/Button.svelte
@ -0,0 +1,134 @@
+<script>
+    import { play_sound } from '../sound.js';
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+
+    export let active = false;
+    export let filled = false;
+    export let disabled = false;
+    export let centered = false;
+    export let label = undefined;
+    export let sound = "default";
+    export let href = false;
+
+    let classes = [];
+    if (active) classes = ["active"];
+    if (filled) classes = ["filled"];
+    if (disabled) classes = ["disabled"];
+    if (centered) classes.push("centered");
+
+    function click() {
+        if (href) {
+            location = href;
+            return;
+        }
+        if (disabled) return;
+        play_sound(sound);
+        dispatch('click');
+    }
+</script>
+
+<button
+        type="button"
+        class={classes.join(' ')}
+        title={label}
+        aria-label={label}
+        on:click={() => click()}>
+    <slot/>
+</button>
+
+<style>
+    button {
+        /* min-width: 64px; */
+        width: 100%;
+        height: 54px;
+        padding: 16px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        font-family: inherit;
+        font-size: 1rem;
+        font-weight: 600;
+        text-align: left;
+
+        border-radius: 8px;
+        border-width: 2px;
+        border-style: solid;
+
+        background-color: var(--bg-700);
+        color: var(--text);
+        border-color: transparent;
+
+        transition-property: border-color, background-color, color;
+        transition-timing-function: ease-out;
+        transition-duration: .1s;
+
+        cursor: pointer;
+    }
+
+    button.centered {
+        text-align: center;
+        justify-content: center;
+    }
+
+    button:hover {
+        background-color: color-mix(in srgb, var(--bg-700), var(--accent) 10%);
+        border-color: color-mix(in srgb, var(--bg-700), var(--accent) 20%);
+    }
+
+    button:active {
+        background-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 50%);
+        border-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 10%);
+    }
+
+    button.active {
+        background-color: var(--bg-600);
+        color: var(--accent);
+        border-color: var(--accent);
+        text-shadow: 0px 2px 32px var(--accent);
+    }
+
+    button.active:hover {
+        color: color-mix(in srgb, var(--accent), var(--bg-1000) 20%);
+        border-color: color-mix(in srgb, var(--accent), var(--bg-1000) 20%);
+        background-color: color-mix(in srgb, var(--bg-600), var(--accent) 10%);
+    }
+
+    button.active:active {
+        color: color-mix(in srgb, var(--accent), var(--bg-800) 10%);
+        border-color: color-mix(in srgb, var(--accent), var(--bg-800) 10%);
+        background-color: color-mix(in srgb, var(--bg-600), var(--bg-800) 10%);
+    }
+
+    button.filled {
+        background-color: var(--accent);
+        color: var(--bg-800);
+        border-color: transparent;
+    }
+
+    button.filled:hover {
+        color: color-mix(in srgb, var(--bg-800), white 10%);
+        background-color: color-mix(in srgb, var(--accent), white 20%);
+    }
+
+    button.filled:active {
+        color: color-mix(in srgb, var(--bg-800), black 10%);
+        background-color: color-mix(in srgb, var(--accent), black 20%);
+    }
+
+    button.disabled {
+        background-color: var(--bg-700);
+        color: var(--text);
+        opacity: .5;
+        border-color: transparent;
+        cursor: initial;
+    }
+
+    button.disabled:hover {
+    }
+
+    button.disabled:active {
+    }
+</style>