UPD: Styling

src/components/common/HSVInput.vue

@@ -1,7 +1,6 @@
 <template>
-  <div>
   <div
-      class="flex p-4 font-heading rounded-b-lg border-x border-b border-zinc-800"
+    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
@@ -78,8 +77,7 @@
       </div>
     </div>
   </div>
-    <div class="px-4">
+  <div class="flex py-4 px-8">
-      <div class="flex pt-4">
     <SliderRoot
       v-model="hueSliderModel" :max="359"
       class="relative flex w-full touch-none select-none items-center h-10">
@@ -93,7 +91,8 @@
       </SliderThumb>
     </SliderRoot>
   </div>
-      <div class="flex pt-4">
+  <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">
@@ -107,7 +106,8 @@
       </SliderThumb>
     </SliderRoot>
   </div>
-      <div class="flex pt-4">
+  <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">
@@ -121,14 +121,14 @@
       </SliderThumb>
     </SliderRoot>
   </div>
-    </div>
+  <Separator />
-  </div>
 </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 rgb = color.rgb().color
-  const yiq = (rgb[0] * 6126 + rgb[1] * 7152 + rgb[2] * 722) / 10000; // Changed r factor from 2126
+  const yiq = (rgb[0] * 6126 + rgb[1] * 7152 + rgb[2] * 722) / 10000 // Changed r factor from 2126
-  return yiq < 128;
+  return yiq < 128
 }
 
 </script>

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>