Fix opacity; show checkboard

frontend/src/sections/Palette.svelte

@@ -10,9 +10,9 @@
     const target = event.target as HTMLSpanElement
     const index = parseInt(target.getAttribute('x-index') || '0')
     if (event.shiftKey) {
-      secondaryColorIndex = index
-    } else {
       primaryColorIndex = index
+    } else {
+      secondaryColorIndex = index
     }
   }
 </script>
@@ -20,13 +20,20 @@
 <main>
   {#if file}
     {#each file.canvas.palette as palette, paletteIndex}
-      <span on:click={paletteClick} style="background-color: rgba({palette&0xFF},{(palette>>8)&0xFF},{(palette>>16)&0xFF},{(palette>>24)&0xFF})" x-index={paletteIndex} class="color {paletteIndex===primaryColorIndex?'primary':''} {paletteIndex===secondaryColorIndex?'secondary':''}"></span>
+      <span on:click={paletteClick} x-index={paletteIndex} class='entry{paletteIndex===primaryColorIndex?' primary':''}{paletteIndex===secondaryColorIndex?' secondary':''}'>
+        <span class="checkerboard"></span>
+        <span style="background-color: rgba({palette&0xFF},{(palette>>8)&0xFF},{(palette>>16)&0xFF},{((palette>>24)&0xFF)/255})" class="color"></span>
+      </span>
     {/each}
   {/if}
 </main>
 
 <style>
-  .color {
+  main {
+    background-color: var(--cds-background-selected);
+  }
+  .entry {
+    position: relative;
     display: inline-block;
     width: 2em;
     height: 2em;
@@ -34,10 +41,30 @@
     padding: 2px;
     border: 2px solid transparent;
   }
-  .color.primary {
+  .entry.primary {
     border: 2px dashed black;
   }
-  .color.secondary {
+  .entry.secondary {
     border: 2px dashed white;
   }
+  .color {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .checkerboard {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
+    background-size: 10px 10px;
+    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+  }
 </style>