From a8d0e85e37ec8efda082cf5f3760ffaaef83e067 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 7 Feb 2024 03:33:08 +0100
Subject: [PATCH] UPD: Styling

---
 src/components/common/HSVInput.vue     | 242 ++++++++++++-------------
 src/components/common/PaletteInput.vue |  10 +-
 2 files changed, 126 insertions(+), 126 deletions(-)

diff --git a/src/components/common/HSVInput.vue b/src/components/common/HSVInput.vue
index 8c65e3b..f5898ba 100644
--- a/src/components/common/HSVInput.vue
+++ b/src/components/common/HSVInput.vue
@@ -1,134 +1,134 @@
 <template>
-  <div>
+  <div
+    class="mx-2 flex p-4 font-heading rounded-b-lg border-x border-b border-zinc-800"
+    :class="{'rounded-t-lg': roundedTop}"
+    :style="{backgroundColor: color.hex()}">
     <div
-      class="flex p-4 font-heading rounded-b-lg border-x border-b border-zinc-800"
-      :class="{'rounded-t-lg': roundedTop}"
-      :style="{backgroundColor: color.hex()}">
-      <div
-        ref="colorFieldText" class="w-full flex opacity-70"
-        :class="!isDark(color) ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
-        style="transition: color 0.2s ease-in-out">
-        <div>
-          <form @submit.prevent="onSubmitHueInput">
-            <label for="hueInput">H: </label><input
-            id="hueInput"
-            v-model="hueInput"
-            onfocus="this.select()"
-            type="number" maxlength="3"
-            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
-            @blur="updateInputs">
-          </form>
-          <form @submit.prevent="onSubmitSaturationInput">
-            <label for="saturationInput">S: </label><input
-            id="saturationInput"
-            v-model="saturationInput"
-            onfocus="this.select()"
-            type="number" maxlength="3"
-            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
-            @blur="updateInputs">
-          </form>
-          <form @submit.prevent="onSubmitValueInput">
-            <label for="valueInput">V: </label><input
-            id="valueInput"
-            v-model="valueInput"
-            onfocus="this.select()"
-            type="number" maxlength="3"
-            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
-            @blur="updateInputs">
-          </form>
-        </div>
-        <div class="mx-auto">
-          <form @submit.prevent="onSubmitHexInput">
-            <label for="hexInput">#</label><input
-            id="hexInput"
-            v-model="hexInput" maxlength="6"
-            onfocus="this.select()"
-            class="w-16 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
-            @blur="updateInputs">
-          </form>
-        </div>
-        <div>
-          <form @submit.prevent="onSubmitRGBInput">
-            <label for="rInput">R: </label><input
-            id="rInput"
-            v-model="rInput"
-            onfocus="this.select()"
-            type="number" maxlength="3"
-            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
-            @blur="updateInputs">
-          </form>
-          <form @submit.prevent="onSubmitRGBInput">
-            <label for="gInput">G: </label><input
-            id="gInput"
-            v-model="gInput"
-            onfocus="this.select()"
-            type="number" maxlength="3"
-            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
-            @blur="updateInputs">
-          </form>
-          <form @submit.prevent="onSubmitRGBInput">
-            <label for="bInput">B: </label><input
-            id="bInput"
-            v-model="bInput"
-            onfocus="this.select()"
-            type="number" maxlength="3"
-            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
-            @blur="updateInputs">
-          </form>
-        </div>
+      ref="colorFieldText" class="w-full flex opacity-70"
+      :class="!isDark(color) ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
+      style="transition: color 0.2s ease-in-out">
+      <div>
+        <form @submit.prevent="onSubmitHueInput">
+          <label for="hueInput">H: </label><input
+          id="hueInput"
+          v-model="hueInput"
+          onfocus="this.select()"
+          type="number" maxlength="3"
+          class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+          @blur="updateInputs">
+        </form>
+        <form @submit.prevent="onSubmitSaturationInput">
+          <label for="saturationInput">S: </label><input
+          id="saturationInput"
+          v-model="saturationInput"
+          onfocus="this.select()"
+          type="number" maxlength="3"
+          class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+          @blur="updateInputs">
+        </form>
+        <form @submit.prevent="onSubmitValueInput">
+          <label for="valueInput">V: </label><input
+          id="valueInput"
+          v-model="valueInput"
+          onfocus="this.select()"
+          type="number" maxlength="3"
+          class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+          @blur="updateInputs">
+        </form>
       </div>
-    </div>
-    <div class="px-4">
-      <div class="flex pt-4">
-        <SliderRoot
-          v-model="hueSliderModel" :max="359"
-          class="relative flex w-full touch-none select-none items-center h-10">
-          <SliderTrack
-            class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
-            style="background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%)" />
-          <SliderThumb
-            class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
-            style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
-            <MoreHorizontal class="h-full" />
-          </SliderThumb>
-        </SliderRoot>
+      <div class="mx-auto">
+        <form @submit.prevent="onSubmitHexInput">
+          <label for="hexInput">#</label><input
+          id="hexInput"
+          v-model="hexInput" maxlength="6"
+          onfocus="this.select()"
+          class="w-16 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+          @blur="updateInputs">
+        </form>
       </div>
-      <div class="flex pt-4">
-        <SliderRoot
-          v-model="saturationSliderModel" :max="100"
-          class="relative flex w-full touch-none select-none items-center h-10">
-          <SliderTrack
-            class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
-            :style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
-          <SliderThumb
-            class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
-            style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
-            <MoreHorizontal class="h-full" />
-          </SliderThumb>
-        </SliderRoot>
-      </div>
-      <div class="flex pt-4">
-        <SliderRoot
-          v-model="valueSliderModel" :max="100"
-          class="relative flex w-full touch-none select-none items-center h-10">
-          <SliderTrack
-            class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
-            :style="{background: `linear-gradient(90deg, black, ${valueSliderColor.hex()} 100%`}" />
-          <SliderThumb
-            class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
-            style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
-            <MoreHorizontal class="h-full" />
-          </SliderThumb>
-        </SliderRoot>
+      <div>
+        <form @submit.prevent="onSubmitRGBInput">
+          <label for="rInput">R: </label><input
+          id="rInput"
+          v-model="rInput"
+          onfocus="this.select()"
+          type="number" maxlength="3"
+          class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+          @blur="updateInputs">
+        </form>
+        <form @submit.prevent="onSubmitRGBInput">
+          <label for="gInput">G: </label><input
+          id="gInput"
+          v-model="gInput"
+          onfocus="this.select()"
+          type="number" maxlength="3"
+          class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+          @blur="updateInputs">
+        </form>
+        <form @submit.prevent="onSubmitRGBInput">
+          <label for="bInput">B: </label><input
+          id="bInput"
+          v-model="bInput"
+          onfocus="this.select()"
+          type="number" maxlength="3"
+          class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+          @blur="updateInputs">
+        </form>
       </div>
     </div>
   </div>
+  <div class="flex py-4 px-8">
+    <SliderRoot
+      v-model="hueSliderModel" :max="359"
+      class="relative flex w-full touch-none select-none items-center h-10">
+      <SliderTrack
+        class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
+        style="background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%)" />
+      <SliderThumb
+        class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
+        style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
+        <MoreHorizontal class="h-full" />
+      </SliderThumb>
+    </SliderRoot>
+  </div>
+  <Separator />
+  <div class="flex py-4 px-8">
+    <SliderRoot
+      v-model="saturationSliderModel" :max="100"
+      class="relative flex w-full touch-none select-none items-center h-10">
+      <SliderTrack
+        class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
+        :style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
+      <SliderThumb
+        class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
+        style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
+        <MoreHorizontal class="h-full" />
+      </SliderThumb>
+    </SliderRoot>
+  </div>
+  <Separator />
+  <div class="flex py-4 px-8">
+    <SliderRoot
+      v-model="valueSliderModel" :max="100"
+      class="relative flex w-full touch-none select-none items-center h-10">
+      <SliderTrack
+        class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
+        :style="{background: `linear-gradient(90deg, black, ${valueSliderColor.hex()} 100%`}" />
+      <SliderThumb
+        class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
+        style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
+        <MoreHorizontal class="h-full" />
+      </SliderThumb>
+    </SliderRoot>
+  </div>
+  <Separator />
 </template>
 <script setup>
 import { computed, onBeforeMount, ref, watch } from 'vue'
 import Color from 'color'
 import { SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
 import { MoreHorizontal } from 'lucide-vue-next'
+import { Separator } from '@/components/ui/separator'
 
 defineProps({
   roundedTop: {
@@ -284,9 +284,9 @@ function shake() {
 
 function isDark(color) {
   // YIQ equation from http://24ways.org/2010/calculating-color-contrast
-  const rgb = color.rgb().color;
-  const yiq = (rgb[0] * 6126 + rgb[1] * 7152 + rgb[2] * 722) / 10000; // Changed r factor from 2126
-  return yiq < 128;
+  const rgb = color.rgb().color
+  const yiq = (rgb[0] * 6126 + rgb[1] * 7152 + rgb[2] * 722) / 10000 // Changed r factor from 2126
+  return yiq < 128
 }
 
 </script>
diff --git a/src/components/common/PaletteInput.vue b/src/components/common/PaletteInput.vue
index 07400a3..4b077b0 100644
--- a/src/components/common/PaletteInput.vue
+++ b/src/components/common/PaletteInput.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="px-4 py-2"
+    class="pt-2"
     :style="{background: `linear-gradient(180deg, ${options[currentOption].color.hex()+'11'}, ${options[currentOption].color.hex()+'30'} 25%, ${options[currentOption].color.hex()+'30'} 40%, transparent 60%`}">
     <div
-      class="flex font-heading rounded-t-lg overflow-hidden border-t border-x border-zinc-800 bg-zinc-900">
+      class="mx-2 flex font-heading rounded-t-lg overflow-hidden border-t border-x border-zinc-800 bg-zinc-900">
       <button
         v-for="(option, key) in options" :key="key"
         class="flex-1 py-2 items-center text-center rounded-t-lg min-w-0 transition-colors"
@@ -12,13 +12,13 @@
         {{ $t(option.titleKey) }}
       </button>
     </div>
-    <div class="flex border-x border-zinc-800 overflow-hidden">
+    <div class="mx-2 flex border-x border-zinc-800 overflow-hidden">
       <button
-        v-for="(option, key) in options" :key="key" class="flex-1 h-4"
+        v-for="(option, key) in options" :key="key" class="flex-1 h-6"
         :class="{ 'color-tab': currentOption === key}"
         :style="{background: option.color.hex()}" @click="currentOption = key" />
     </div>
-    <HSVInput v-model="options[currentOption].color" class="relative z-20" />
+    <HSVInput v-model="options[currentOption].color" />
   </div>
 </template>
 <script setup>