fix: theme system, adapt to small screens

src/app.css

@@ -5,6 +5,8 @@
 /* Theme */
 
 :root {
+    --colorspace: oklch;
+
     /* Theme Colors */
     /* Green */
     --min-bg: #96e28a;
@@ -13,92 +15,19 @@
     --min-text: #bef5b5;
     --max-text: #fff;
 
-    --colorspace: oklch;
-
     /* Dark */
-    /* --min: #818181;
+    /* --min-bg: #555;
-    --max: #000; */
+    --max-bg: #000;
 
-    /* Blue */
+    --min-text: #cfcfcf;
-    /* --min: #8a9fe2;
+    --max-text: #fff; */
-    --max: #151a38; */
-
-    /* Red */
-    /* --min: #e28a8a;
-    --max: #641515; */
-    /* End Theme Colors */
 }
 
-/* Theme Classes */
-.color-vigi-0 {
-    @apply text-vigi-0 bg-vigi-0;
-}
-.color-vigi-5 {
-    @apply text-vigi-5 bg-vigi-5;
-}
-.color-vigi-10 {
-    @apply text-vigi-10 bg-vigi-10;
-}
-.color-vigi-15 {
-    @apply text-vigi-15 bg-vigi-15;
-}
-.color-vigi-20 {
-    @apply text-vigi-20 bg-vigi-20;
-}
-.color-vigi-25 {
-    @apply text-vigi-25 bg-vigi-25;
-}
-.color-vigi-30 {
-    @apply text-vigi-30 bg-vigi-30;
-}
-.color-vigi-35 {
-    @apply text-vigi-35 bg-vigi-35;
-}
-.color-vigi-40 {
-    @apply text-vigi-40 bg-vigi-40;
-}
-.color-vigi-45 {
-    @apply text-vigi-45 bg-vigi-45;
-}
-.color-vigi-50 {
-    @apply text-vigi-50 bg-vigi-50;
-}
-.color-vigi-55 {
-    @apply text-vigi-55 bg-vigi-55;
-}
-.color-vigi-60 {
-    @apply text-vigi-60 bg-vigi-60;
-}
-.color-vigi-65 {
-    @apply text-vigi-65 bg-vigi-65;
-}
-.color-vigi-70 {
-    @apply text-vigi-70 bg-vigi-70;
-}
-.color-vigi-75 {
-    @apply text-vigi-75 bg-vigi-75;
-}
-.color-vigi-80 {
-    @apply text-vigi-80 bg-vigi-80;
-}
-.color-vigi-85 {
-    @apply text-vigi-85 bg-vigi-85;
-}
-.color-vigi-90 {
-    @apply text-vigi-90 bg-vigi-90;
-}
-.color-vigi-95 {
-    @apply text-vigi-95 bg-vigi-95;
-}
-.color-vigi-100 {
-    @apply text-vigi-100 bg-vigi-100;
-}
-/* End Theme Classes */
 /* End theme */
 /* Components */
 
 body {
-    @apply bg-vigi-90 text-vigi-10 cursor-default;
+    @apply color-vigi-90 cursor-default;
     user-select: none;
 }
 
@@ -118,7 +47,7 @@ body {
 }
 
 .browser-window {
-    @apply grow overflow-auto select-text cursor-auto;
+    @apply grow overflow-auto text-wrap select-text cursor-auto;
 }
 
 .window-controls {
@@ -129,10 +58,10 @@ body {
     @apply p-1 rounded-lg;
     @apply ease-out duration-150;
 
-    @apply hover:bg-vigi-90;
+    @apply hover:color-vigi-90;
-    @apply hover:px-2 hover:mx-1 hover:scale-125 cursor-pointer;
+    @apply cursor-pointer;
 
-    @apply active:bg-vigi-100;
+    @apply active:color-vigi-100;
 }
 
 .tabs-category {
@@ -140,12 +69,14 @@ body {
 }
 
 .block {
-    @apply p-2 rounded-xl bg-vigi-60;
+    @apply p-2 rounded-xl color-vigi-60;
 }
 
 .sidebar {
     @apply shrink-0 grow-0 flex flex-col w-1/5;
     @apply ease-out duration-300;
+
+    @apply max-sm:hidden;
 }
 
 .sidebar.collapsed {
@@ -156,20 +87,35 @@ body {
 }
 
 .top-bar {
+    @apply flex max-sm:flex-row-reverse gap-3;
+}
+
+.top-bar-buttons {
     @apply flex;
 }
 
-.search-input {
+.hide-sidebar-button,
-    @apply ms-2 px-2 py-1 rounded-xl grow;
+.back-button,
+.forward-button {
+    @apply max-sm:hidden;
+}
 
-    @apply bg-vigi-60 outline-none;
+.open-tabs-page-button {
-    @apply focus:bg-vigi-50 focus:text-vigi-0 hover:bg-vigi-55;
+    @apply sm:hidden;
+}
+
+.search-input {
+    @apply px-2 py-1 rounded-xl grow;
+
+    @apply color-vigi-60 outline-none;
+    @apply focus:color-vigi-50 hover:color-vigi-55;
 
     @apply ease-out duration-100;
 }
 
 input::placeholder {
-    @apply text-vigi-40 focus:text-vigi-20;
+    @apply color-vigi-60;
+    @apply focus:color-vigi-50 hover:color-vigi-55;
 }
 
 .tabs {
@@ -177,40 +123,35 @@ input::placeholder {
 }
 
 .tab {
-    @apply p-2 rounded-xl bg-vigi-50;
+    @apply p-2 rounded-xl color-vigi-50;
     @apply cursor-pointer;
     @apply ease-out duration-100;
 
-    @apply hover:bg-vigi-55;
+    @apply hover:color-vigi-55;
 
     @apply hover:px-4;
 
     @apply flex items-center gap-2 w-full truncate;
 }
 
+.tab.loading {
+    @apply animate-load-pulse;
+}
+
 .close-button {
     @apply p-1 rounded-lg;
     @apply ease-out duration-100;
 
-    @apply hover:bg-vigi-90 active:bg-vigi-100;
+    @apply hover:color-vigi-90 active:color-vigi-100;
 }
 
-/* .tab .close-button {
-  @apply text-transparent;
-}
-
-.tab:hover .close-button {
-  @apply text-vigi-0;
-} */
-
 .tab.active {
-    @apply bg-vigi-40 text-vigi-0 font-bold;
+    @apply color-vigi-40 font-bold;
-
+    @apply hover:color-vigi-45;
-    @apply hover:bg-vigi-45;
 }
 
 ::selection {
-    @apply bg-vigi-60;
+    @apply color-vigi-60;
 }
 
 /* width */
@@ -225,12 +166,12 @@ input::placeholder {
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-    @apply rounded-xl bg-vigi-70 bg-clip-content;
+    @apply rounded-xl color-vigi-70 bg-clip-content;
     border: 6px solid transparent;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-    @apply bg-vigi-75;
+    @apply color-vigi-75;
     border: 5px solid transparent;
 }

src/lib/components/Button.svelte

@@ -1,7 +1,8 @@
 <script>
-  export let onClick = () => {};
+    export let onClick = () => {};
+    export let className = "";
 </script>
 
-<button class="button" on:click={onClick}>
+<button class={`button${className ? " " + className : ""}`} on:click={onClick}>
-  <slot />
+    <slot />
 </button>

src/lib/components/Tab.svelte

@@ -39,7 +39,7 @@
     {/if}
 
     <button
-        class={`tab${loading && active ? " animate-pulse" : ""}`}
+        class={`tab${loading && active ? " loading" : ""}`}
         class:active
         transition:slide={{ duration: 100 }}
         bind:this={tabElement}

src/lib/components/TopBar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import ArrowLeft from "$lib/icons/ArrowLeft.svelte";
     import ArrowRight from "$lib/icons/ArrowRight.svelte";
+    import OpenTabs from "$lib/icons/OpenTabs.svelte";
     import Reload from "$lib/icons/Reload.svelte";
     import SidebarLeft from "$lib/icons/SidebarLeft.svelte";
     import SidebarRight from "$lib/icons/SidebarRight.svelte";
@@ -16,27 +17,41 @@
 
     let currentInput = "";
     let input = "";
+    let tabsOpen = 0;
 
     state.subscribe((val) => {
         input = val.top_bar_input;
         currentInput = decodeURIComponent(input);
+        tabsOpen = val.tabs.length;
     });
 
     let iEl: HTMLInputElement;
 </script>
 
 <div class="top-bar">
-    <Block className="flex">
+    <Block className="top-bar-buttons">
-        <Button onClick={() => (sidebarOpen = !sidebarOpen)}>
+        <Button
+            className="hide-sidebar-button"
+            onClick={() => (sidebarOpen = !sidebarOpen)}
+        >
             {#if sidebarOpen}
                 <SidebarLeft />
             {:else}
                 <SidebarRight />
             {/if}
         </Button>
-        <Button onClick={onBack}><ArrowLeft /></Button>
+        <Button className="back-button" onClick={onBack}><ArrowLeft /></Button>
-        <Button onClick={onForward}><ArrowRight /></Button>
+        <Button className="forward-button" onClick={onForward}>
-        <Button onClick={() => updateAndLoadInput(input)}><Reload /></Button>
+            <ArrowRight />
+        </Button>
+        <Button
+            className="reload-button"
+            onClick={() => updateAndLoadInput(input)}
+        >
+            <Reload />
+        </Button>
+
+        <Button className="open-tabs-page-button"><OpenTabs /></Button>
     </Block>
 
     <input

src/lib/icons/OpenTabs.svelte

@@ -0,0 +1,23 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1.3em"
+    height="1.3em"
+    viewBox="0 0 24 24"
+    {...$$props}
+>
+    <g
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1"
+        color="currentColor"
+    >
+        <path
+            d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12m4.496 0h10.008"
+        />
+        <path
+            d="M17.004 9H9c-.987 0-1.857.01-1.98-.324c-.096-.26.504-1.08.984-1.68M7.01 15h8.004c.986 0 1.857-.01 1.98.324c.096.26-.504 1.08-.984 1.68"
+        />
+    </g>
+</svg>

src/theme-classes.css

@@ -1,63 +0,0 @@
-.color-vigi-0 {
-    @apply text-vigi-0 bg-vigi-0;
-}
-.color-vigi-5 {
-    @apply text-vigi-5 bg-vigi-5;
-}
-.color-vigi-10 {
-    @apply text-vigi-10 bg-vigi-10;
-}
-.color-vigi-15 {
-    @apply text-vigi-15 bg-vigi-15;
-}
-.color-vigi-20 {
-    @apply text-vigi-20 bg-vigi-20;
-}
-.color-vigi-25 {
-    @apply text-vigi-25 bg-vigi-25;
-}
-.color-vigi-30 {
-    @apply text-vigi-30 bg-vigi-30;
-}
-.color-vigi-35 {
-    @apply text-vigi-35 bg-vigi-35;
-}
-.color-vigi-40 {
-    @apply text-vigi-40 bg-vigi-40;
-}
-.color-vigi-45 {
-    @apply text-vigi-45 bg-vigi-45;
-}
-.color-vigi-50 {
-    @apply text-vigi-50 bg-vigi-50;
-}
-.color-vigi-55 {
-    @apply text-vigi-55 bg-vigi-55;
-}
-.color-vigi-60 {
-    @apply text-vigi-60 bg-vigi-60;
-}
-.color-vigi-65 {
-    @apply text-vigi-65 bg-vigi-65;
-}
-.color-vigi-70 {
-    @apply text-vigi-70 bg-vigi-70;
-}
-.color-vigi-75 {
-    @apply text-vigi-75 bg-vigi-75;
-}
-.color-vigi-80 {
-    @apply text-vigi-80 bg-vigi-80;
-}
-.color-vigi-85 {
-    @apply text-vigi-85 bg-vigi-85;
-}
-.color-vigi-90 {
-    @apply text-vigi-90 bg-vigi-90;
-}
-.color-vigi-95 {
-    @apply text-vigi-95 bg-vigi-95;
-}
-.color-vigi-100 {
-    @apply text-vigi-100 bg-vigi-100;
-}

tailwind.config.js

@@ -1,25 +1,26 @@
-let bgColors = {};
+const plugin = require("tailwindcss/plugin");
-let textColors = {};
-
-for (let i = 0; i <= 100; i += 5) {
-  bgColors[`vigi-${i}`] =
-    `color-mix(in var(--colorspace), var(--max-bg) ${i}%, var(--min-bg))`;
-
-  textColors[`vigi-${i}`] =
-    `color-mix(in var(--colorspace), var(--min-text) ${i}%, var(--max-text))`;
-}
 
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
     extend: {
-      colors: bgColors,
-      textColor: textColors,
       animation: {
-        pulse: "pulse 0.7s linear infinite",
+        "load-pulse": "pulse 0.7s linear infinite",
       },
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(({ addUtilities }) => {
+      let utilities = {};
+      for (let i = 0; i <= 100; i += 5) {
+        utilities[`.color-vigi-${i}`] = {
+          color: `color-mix(in var(--colorspace), var(--max-text) ${i}%, var(--min-text))`,
+          "background-color": `color-mix(in var(--colorspace), var(--max-bg) ${i}%, var(--min-bg))`,
+        };
+      }
+
+      addUtilities(utilities);
+    }),
+  ],
 };