move select styling to main index

Author: caged

src/index.css

@@ -19,3 +19,7 @@
 html {
   @apply bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100;
 }
+
+select {
+  @apply w-fit border border-gray-200 rounded-sm dark:border-blue-700/50 dark:bg-blue-900/50 dark:text-blue-50 dark:hover:bg-blue-800 dark:hover:border-blue-700;
+}

src/lib/FretNote.svelte

@@ -30,7 +30,7 @@
   }
 
   .fret-note-text {
-    @apply text-xs fill-gray-500 dark:fill-blue-600;
+    @apply text-xs fill-gray-500 dark:fill-blue-500;
   }
 
   .fret-note:not(.in-position):is(.in-scale) .fret-note-background {
@@ -42,22 +42,22 @@
   }
 
   .in-scale .fret-note-background {
-    @apply fill-sky-600 stroke-1 stroke-sky-800 dark:fill-blue-900 dark:stroke-sky-800;
+    @apply fill-sky-600 stroke-0 stroke-sky-800 dark:fill-blue-900 dark:stroke-sky-800;
   }
 
   .in-scale .fret-note-text {
     @apply fill-white font-black;
   }
 
   .in-scale[data-interval="1P"] circle {
-    @apply fill-gray-800 stroke-gray-900 dark:fill-blue-600 dark:stroke-blue-300;
+    @apply fill-gray-800 stroke-1 stroke-gray-900 dark:fill-blue-600 dark:stroke-blue-300;
   }
 
   .in-scale[data-interval="1P"] .fret-note-text {
     @apply dark:fill-blue-100;
   }
 
   .in-scale:is([data-interval^="3"], [data-interval^="5"]) circle {
-    @apply fill-blue-700 stroke-blue-600;
+    @apply fill-blue-700 stroke-1 stroke-blue-600;
   }
 </style>

src/lib/KeySelector.svelte

@@ -3,7 +3,7 @@
   let notes = ["C", "C#", "D", "Eb", "E", "F", "F#", "G", "Ab", "A", "Bb", "B"];
 </script>
 
-<select bind:value class="border-gray-300 w-fit dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+<select bind:value>
   {#each notes as note}
     <option value={note}>
       {note}

src/lib/ScaleChords.svelte

@@ -21,9 +21,11 @@
   });
 </script>
 
-<div class="text-xs text-gray-500 grid grid-cols-4 md:grid-cols-7 gap-5 dark:text-gray-400">
+<div
+  class="text-xs text-gray-500 grid grid-cols-4 md:grid-cols-7 gap-5 dark:text-gray-400">
   {#each chords as chord}
-    <div class="bg-gray-100 py-5 dark:bg-gray-700">
+    <div
+      class="bg-gray-100 py-5 transition-all dark:bg-blue-900/20 dark:border dark:border-blue-900/50 dark:hover:bg-blue-900/40 rounded">
       <Chord chordName={chord} />
     </div>
   {/each}

src/lib/ScaleSelector.svelte

@@ -17,7 +17,7 @@
   ];
 </script>
 
-<select bind:value class="border-gray-300 w-fit dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+<select bind:value>
   {#each scales as scale}
     <option value={scale}>
       {scale}

src/lib/SystemSelector.svelte

@@ -12,7 +12,7 @@
 
 <div class="flex gap-5">
   <div>
-    <select bind:value={system} class="w-fit border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+    <select bind:value={system}>
       <option value="CAGED">CAGED</option>
       <option value="Pentatonic">Pentatonic</option>
     </select>
@@ -47,7 +47,7 @@
   @reference "tailwindcss";
 
   input[type="radio"] {
-    @apply border-gray-400 checked:bg-sky-600 checked:border-sky-600 active:bg-sky-200 focus:ring-1 focus:ring-sky-500 dark:bg-gray-700 dark:border-gray-500 dark:active:bg-sky-700;
+    @apply border-gray-400 checked:bg-sky-600 checked:border-sky-600 active:bg-sky-200 focus:ring-1 focus:ring-sky-500 dark:bg-blue-900 dark:border-blue-500 dark:active:bg-blue-700 dark:checked:bg-blue-400 dark:checked:border-blue-200;
   }
 
   label {

src/lib/TuningSelector.svelte

@@ -4,7 +4,7 @@
   let { value = $bindable() } = $props();
 </script>
 
-<select bind:value name="tuning" class="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+<select bind:value name="tuning">
   {#each tunings as [name]}
     <option value={name}>{name}</option>
   {/each}

src/routes/+page.svelte

@@ -104,7 +104,7 @@
 </svelte:head>
 
 <div
-  class="flex bg-gray-50 *:p-5 *:border-r *:border-gray-200 border-b border-gray-300 dark:bg-gray-800 dark:*:border-gray-700 dark:border-gray-700">
+  class="flex bg-gray-50 *:p-5 *:border-r *:border-gray-200 border-b border-gray-300 dark:bg-blue-950 dark:*:border-blue-900 dark:border-blue-900">
   <div>
     <TuningSelector bind:value={tuning} />
   </div>
@@ -127,7 +127,7 @@
 </div>
 
 {#if triads.length > 0}
-  <div class="relative bg-gray-50 border-t border-gray-200 p-5 dark:bg-gray-800 dark:border-gray-700">
+  <div class="relative bg-gray-50 p-5 dark:bg-transparent dark:border-blue-900">
     <ScaleChords scale={scaleObj} />
   </div>
 {/if}