diff --git a/src/app.css b/src/app.css index c932f42..bbd8b8e 100644 --- a/src/app.css +++ b/src/app.css @@ -3,17 +3,15 @@ @tailwind utilities; :root { - --c0: #274f21; - --c1: #448939; - --c2: #73bf67; + --min: #96e28a; + --max: #193815; - --c3: #193815; - --c4: #56aa49; - --c5: #96e28a; + /* --min: #8a9fe2; + --max: #151a38; */ } body { - @apply bg-main text-main; + @apply bg-vigi-90 text-vigi-10; user-select: none; } @@ -44,14 +42,14 @@ body { @apply p-1 rounded-lg; @apply ease-out duration-150; - @apply hover:bg-main; + @apply hover:bg-vigi-90; @apply hover:px-2 hover:mx-1 hover:scale-125 hover:cursor-pointer; - @apply active:bg-dark; + @apply active:bg-vigi-100; } .block { - @apply p-2 rounded-xl bg-block; + @apply p-2 rounded-xl bg-vigi-60; } .sidebar { @@ -72,18 +70,18 @@ body { .search-input { @apply ms-2 px-2 py-1 rounded-xl grow; - @apply bg-block outline-none; - @apply focus:bg-blockLight focus:text-light; + @apply bg-vigi-60 outline-none; + @apply focus:bg-vigi-50 focus:text-vigi-0 hover:bg-vigi-55; @apply ease-out duration-100; } input::placeholder { - @apply text-main focus:text-light; + @apply text-vigi-40 focus:text-vigi-20; } ::selection { - @apply bg-block; + @apply bg-vigi-60; } /* width */ @@ -98,12 +96,12 @@ input::placeholder { /* Handle */ ::-webkit-scrollbar-thumb { - @apply rounded-xl bg-main bg-clip-content; + @apply rounded-xl bg-vigi-90 bg-clip-content; border: 6px solid transparent; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { - @apply bg-dark; + @apply bg-vigi-100; border: 5px solid transparent; } diff --git a/src/lib/components/TopBar.svelte b/src/lib/components/TopBar.svelte index e58015e..0628366 100644 --- a/src/lib/components/TopBar.svelte +++ b/src/lib/components/TopBar.svelte @@ -4,6 +4,8 @@ import Reload from "$lib/icons/Reload.svelte"; import SidebarLeft from "$lib/icons/SidebarLeft.svelte"; import SidebarRight from "$lib/icons/SidebarRight.svelte"; + import { topBarInput } from "$lib/stores"; + import { get } from "svelte/store"; import Block from "./Block.svelte"; import Button from "./Button.svelte"; @@ -12,11 +14,15 @@ export let onInput = () => {}; export let sidebarOpen = true; - export let inputValue = ""; - let currentInputValue = ""; + let currentInput = ""; + let input = ""; - let input: HTMLInputElement; + topBarInput.subscribe((val) => { + input = val; + }); + + let iEl: HTMLInputElement;
diff --git a/src/lib/stores.ts b/src/lib/stores.ts new file mode 100644 index 0000000..460929e --- /dev/null +++ b/src/lib/stores.ts @@ -0,0 +1,3 @@ +import { writable } from "svelte/store"; + +export const topBarInput = writable(""); diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 7ee107b..3b116b0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -7,6 +7,7 @@ import type { Root } from "@txtdot/dalet"; import { invoke } from "@tauri-apps/api/tauri"; + import { topBarInput } from "$lib/stores"; let sidebarOpen = true; @@ -23,9 +24,9 @@ if (e.key === "q") sidebarOpen = !sidebarOpen; }); - function processInput() { + topBarInput.subscribe((input) => { isLoading = true; - invoke("process_input", { input: inputValue }) + invoke("process_input", { input }) .then((res) => { data = res as Root; isLoading = false; @@ -34,7 +35,7 @@ data = [{ id: 0, body: "Error: " + err, argument: null }]; isLoading = false; }); - } + });