Unify select color

ui/src/components/Checkbox.svelte

@@ -6,16 +6,20 @@
 <input id="checkbox-{name}" type="checkbox" class="hidden" bind:checked={enabled} />
 <label
     for="checkbox-{name}"
-    class="py-0.5 px-1 border-2 border-transparent cursor-pointer select-none whitespace-nowrap">{name}</label>
+    class="py-0.5 px-1 border-t-2 border-b-2 border-transparent cursor-pointer select-none whitespace-nowrap">{name}</label>
 
 <style>
-    label:hover {
+    input:not(:checked) + label:hover {
-        color: var(--color-blue-600);
+        transform: scale(1.1);
+        @apply text-select;
+    }
+
+    input:checked + label:hover {
+        transform: scale(1.1);
     }
 
     input:checked + label {
-        border-top-color: var(--color-blue-600);
+        @apply border-select;
-        border-bottom-color: var(--color-blue-600);
     }
 
     input + label:hover:not(:active) {

ui/src/components/ProgressRing.svelte

@@ -19,7 +19,7 @@
 <svg
     height={radius * 2}
     width={radius * 2}
-    class="text-green-600 stroke-current"
+    class="text-select stroke-current"
     style="filter: brightness({$progressTweened / 100 / 2 + 0.5}) sepia({0.5 - $progressTweened / 100 / 2}) blur({0.6 - $progressTweened / 100 / 3}px)">
     <circle
         fill="transparent"

ui/src/debug/DebugView.svelte

@@ -45,13 +45,13 @@
         <div class="flex items-center space-x-2">
             {#if pageIsPinned}
                 <span on:click={() => (pinnedPage = undefined)} transition:slideH={{ duration: 180, easing: linear }}>
-                    <Icon class="text-xs hover:text-green-700 hover:opacity-25 cursor-pointer opacity-75" icon={pin} />
+                    <Icon class="text-xs hover:text-select hover:opacity-25 cursor-pointer opacity-75" icon={pin} />
                 </span>
             {/if}
             <span>
                 <Popup>
                     <span slot="trigger">
-                        <BookOpen size="1x" class="hover:text-green-700 cursor-pointer" />
+                        <BookOpen size="1x" class="hover:text-select cursor-pointer" />
                     </span>
                     <span slot="content">
                         <PageSelectionPopup
@@ -67,10 +67,10 @@
             <div>|</div>
             <div>Transformation:</div>
             <span on:click={() => canPrev && debugStage.update((cur) => cur - 1)}>
-                <ArrowLeft size="1x" class={canPrev ? 'hover:text-green-700 cursor-pointer' : 'opacity-50'} />
+                <ArrowLeft size="1x" class={canPrev ? 'hover:text-select cursor-pointer' : 'opacity-50'} />
             </span>
             <span on:click={() => canNext && debugStage.update((cur) => cur + 1)}>
-                <ArrowRight size="1x" class={canNext ? 'hover:text-green-700 cursor-pointer' : 'opacity-50'} />
+                <ArrowRight size="1x" class={canNext ? 'hover:text-select cursor-pointer' : 'opacity-50'} />
             </span>
             <span>
                 <Popup>
@@ -105,7 +105,7 @@
 
     <!-- Stage Messages -->
     <ul
-        class="messages list-disc list-inside mb-2 p-2 bg-yellow-100 rounded shadow text-sm"
+        class="messages list-disc list-inside mb-2 p-2 bg-blue-50 rounded shadow text-sm"
         style="max-height:{stageResult.messages.length * 40}px">
         {#each stageResult.messages as message}
             <li in:slide={{ delay: 200 }} out:slide>{message}</li>

ui/src/debug/FontEntry.svelte

@@ -49,10 +49,10 @@
         grid-template-columns: 1fr 2.5fr;
     }
     .header:hover {
-        filter: hue-rotate(180deg);
+        @apply bg-select;
-        transform: scale(1.01);
+        transform: scale(1.02);
     }
     .opened {
-        filter: hue-rotate(180deg);
+        @apply bg-select;
     }
 </style>

ui/src/debug/FontIndex.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { clickOutside } from '../actions/clickOutside';
     import slideH from '../svelte/slideH';
     import FontEntry from './FontEntry.svelte';
 
@@ -6,7 +7,7 @@
     export let fontMap: Map<string, object>;
 </script>
 
-<div class="flex items-start">
+<div class="flex items-start" use:clickOutside={{ enabled: showFonts, cb: () => (showFonts = false) }}>
     {#if showFonts}
         <div class="py-2 px-2 bg-gray-200 rounded-br">
             <div class=" overflow-y-scroll " style="max-height: 65vh" transition:slideH={{ duration: 400 }}>
@@ -17,7 +18,7 @@
         </div>
     {/if}
     <div
-        class=" px-1.5 py-0.5 bg-gray-200 text-lg font-mono font-bold rounded-r {showFonts ? '' : 'shadow'} cursor-pointer hover:text-blue-600"
+        class=" px-1.5 py-0.5 bg-gray-200 text-lg font-mono font-bold rounded-r {showFonts ? '' : 'shadow'} cursor-pointer hover:text-select"
         style="font-family: AmericanTypewriter, verdana"
         on:click={() => (showFonts = !showFonts)}>
         {showFonts ? 'X' : 'F'}

ui/src/debug/PageSelectionPopup.svelte

@@ -24,13 +24,13 @@
 
 <div class="absolute mt-2 p-2 flex bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96" transition:slide>
     <span class="mt-1 pr-2" on:click={!!pinnedPage && unpinPage}>
-        <Collection size="1x" class={!!pinnedPage ? 'hover:text-green-700 cursor-pointer' : 'opacity-50'} />
+        <Collection size="1x" class={!!pinnedPage ? 'hover:text-select cursor-pointer' : 'opacity-50'} />
     </span>
     <div class="grid gap-3" style="grid-template-columns: repeat({Math.min(20, maxPage + 1)}, minmax(0, 1fr));">
         {#each new Array(maxPage + 1) as _, idx}
             <div
                 on:click={() => pagesNumbers.has(idx) && pinPage(idx)}
-                class="px-2 border border-gray-300 rounded-full text-center {pagesNumbers.has(idx) ? (pinnedPage === idx ? 'bg-green-600' : 'hover:text-green-700 hover:border-green-700 cursor-pointer') : 'opacity-50'}">
+                class="px-2 border border-gray-300 rounded-full text-center {pagesNumbers.has(idx) ? (pinnedPage === idx ? 'bg-select' : 'hover:text-select hover:border-select cursor-pointer') : 'opacity-50'}">
                 {idx}
             </div>
         {/each}

ui/src/debug/TransformerSelectionPopup.svelte

@@ -43,8 +43,7 @@
         @apply cursor-pointer;
     }
     .selectable:hover {
-        @apply bg-gray-400;
+        @apply bg-select;
-        @apply text-green-700;
         @apply rounded;
     }
 
@@ -59,7 +58,10 @@
 
         /* the arrow */
         border: 10px solid;
-        border-color: transparent transparent transparent var(--color-gray-600);
+        @apply border-select;
+        @apply border-t-transparent;
+        @apply border-r-transparent;
+        @apply border-b-transparent;
 
         /* basic styles */
         @apply ml-2;

ui/src/main/Upload.svelte

@@ -53,7 +53,7 @@
     </div>
 
     <!-- Upload Box -->
-    <div class="mb-5 border-2 border-dashed border-gray-400 hover:border-green-800" class:dragover>
+    <div class="mb-5 border-2 border-dashed border-gray-400 hover:border-select" class:dragover>
         <Dropzone
             on:drop={handleFilesSelect}
             on:dragenter={() => (dragover = true)}
@@ -106,7 +106,7 @@
                                         {stage}
                                         {parseProgress.stageDetails[index] ? parseProgress.stageDetails[index] : ''}
                                     </div>
-                                    <Check size="1.5x" class="text-green-700" />
+                                    <Check size="1.5x" class="text-select" />
                                 </div>
                             {/if}
                         {/each}
@@ -127,9 +127,9 @@
 
 <style>
     .dragover {
-        @apply border-green-600;
+        @apply border-select;
     }
     .dragoverItem {
-        @apply text-green-600;
+        @apply text-select;
     }
 </style>

ui/tailwind.config.js

@@ -1,3 +1,5 @@
+const plugin = require('tailwindcss/plugin');
+
 module.exports = {
     future: {
         removeDeprecatedGapUtilities: true,
@@ -7,29 +9,35 @@ module.exports = {
         content: ['./src/**/*.svelte', './src/**/*.ts'],
     },
     theme: {
-        extend: {},
+        extend: {
+            colors: {
+                // gray-400 hue-rotated 180deg
+                select: '#A8A297',
+            },
+        },
     },
     variants: {
         extend: {},
     },
     plugins: [
-        function ({ addBase, theme }) {
+        plugin(function ({ addUtilities, theme }) {
-            function extractColorVars(colorObj, colorGroup = '') {
+            const themeColors = theme('colors');
-                return Object.keys(colorObj).reduce((vars, colorKey) => {
+            const individualBorderColors = Object.keys(themeColors).map((colorName) => ({
-                    const value = colorObj[colorKey];
+                [`.border-b-${colorName}`]: {
+                    borderBottomColor: themeColors[colorName],
+                },
+                [`.border-t-${colorName}`]: {
+                    borderTopColor: themeColors[colorName],
+                },
+                [`.border-l-${colorName}`]: {
+                    borderLeftColor: themeColors[colorName],
+                },
+                [`.border-r-${colorName}`]: {
+                    borderRightColor: themeColors[colorName],
+                },
+            }));
 
-                    const newVars =
+            addUtilities(individualBorderColors);
-                        typeof value === 'string'
+        }),
-                            ? { [`--color${colorGroup}-${colorKey}`]: value }
-                            : extractColorVars(value, `-${colorKey}`);
-
-                    return { ...vars, ...newVars };
-                }, {});
-            }
-
-            addBase({
-                ':root': extractColorVars(theme('colors')),
-            });
-        },
     ],
 };