From ef98a2e947bbfd17fae6c696b0e509ed2ea7f3fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Babi=C4=8D?= <peter@peterbabic.dev>
Date: Wed, 17 Mar 2021 12:09:57 +0100
Subject: [PATCH] use thematic colors for buttons

---
 src/Button.svelte              |  9 ++--
 src/Components/Tailwind.svelte | 84 ----------------------------------
 src/Triangle.svelte            | 18 ++++----
 tailwind.config.js             | 29 ++++++++++++
 4 files changed, 43 insertions(+), 97 deletions(-)

diff --git a/src/Button.svelte b/src/Button.svelte
index fbf5de9..032dbdc 100644
--- a/src/Button.svelte
+++ b/src/Button.svelte
@@ -1,16 +1,17 @@
 <script>
-  export let icon
+  export let icon = "restart"
+  export let color = "green"
 
   const d = []
-  d["Restart"] =
+  d["restart"] =
     "M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42 1.42zM12 10h8l-4 4-4-4z"
-  d["Undo"] =
+  d["undo"] =
     "M 15,3 V 5.99 A 4,4 0 0 1 11,10 H 8 V 5 l -6,6 6,6 v -5 h 3 A 6,6 0 0 0 17,6 V 3 Z"
 </script>
 
 <button
   on:click
-  class="block flex-none bg-transparent text-gray-600 hover:bg-gray-600 hover:text-gray-50 fill-current py-2 px-3 border border-gray-600 hover:border-transparent rounded">
+  class="block flex-none rounded fill-current text-white px-3 py-2 border-0 border-b-2 bg-{color} border-{color}-darker">
   <svg
     class="w-5 h-5"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/Components/Tailwind.svelte b/src/Components/Tailwind.svelte
index 397ff7e..0de6395 100644
--- a/src/Components/Tailwind.svelte
+++ b/src/Components/Tailwind.svelte
@@ -63,88 +63,4 @@
     grid-area: 5 / 9;
     margin-left: -160px;
   }
-
-  .green {
-    background-color: hsl(92, 28%, 65%);
-  }
-
-  .green-lighter {
-    background-color: hsl(92, 28%, 85%);
-  }
-
-  .green-darker {
-    background-color: hsl(92, 28%, 30%);
-  }
-
-  .cyan {
-    background-color: hsl(179, 25%, 65%);
-  }
-
-  .cyan-lighter {
-    background-color: hsl(179, 25%, 85%);
-  }
-
-  .cyan-darker {
-    background-color: hsl(179, 25%, 30%);
-  }
-
-  .blue {
-    background-color: hsl(210, 34%, 63%);
-  }
-
-  .blue-lighter {
-    background-color: hsl(213, 32%, 82%);
-  }
-
-  .blue-darker {
-    background-color: hsl(213, 32%, 37%);
-  }
-
-  .yellow {
-    background-color: hsl(40, 71%, 73%);
-  }
-
-  .yellow-lighter {
-    background-color: hsl(40, 71%, 88%);
-  }
-
-  .yellow-darker {
-    background-color: hsl(40, 71%, 37%);
-  }
-
-  .orange {
-    background-color: hsl(14, 51%, 63%);
-  }
-
-  .orange-lighter {
-    background-color: hsl(14, 51%, 83%);
-  }
-
-  .orange-darker {
-    background-color: hsl(14, 51%, 28%);
-  }
-
-  .red {
-    background-color: hsl(354, 42%, 56%);
-  }
-
-  .red-lighter {
-    background-color: hsl(354, 42%, 76%);
-  }
-
-  .red-darker {
-    background-color: hsl(354, 42%, 28%);
-  }
-
-  .purple {
-    background-color: hsl(311, 20%, 63%);
-  }
-
-  .purple-lighter {
-    background-color: hsl(311, 20%, 83%);
-  }
-
-  .purple-darker {
-    background-color: hsl(311, 20%, 28%);
-  }
 </style>
diff --git a/src/Triangle.svelte b/src/Triangle.svelte
index f3e42e7..77c92f5 100644
--- a/src/Triangle.svelte
+++ b/src/Triangle.svelte
@@ -126,9 +126,9 @@
   const getDestColor = _ => circleColors[circles.indexOf(C_PICK)]
   $: getCircleColor = i => {
     if (circles[i] == C_HOLE) return `hole`
-    if (circles[i] == C_POLE) return `${circleColors[i]}`
-    if (circles[i] == C_PICK) return `${circleColors[i]}-lighter`
-    if (circles[i] == C_DEST) return `${getDestColor()}-darker`
+    if (circles[i] == C_POLE) return `bg-${circleColors[i]}`
+    if (circles[i] == C_PICK) return `bg-${circleColors[i]}-lighter`
+    if (circles[i] == C_DEST) return `bg-${getDestColor()}-darker`
   }
 
   const commonBetween = (source, destination) => {
@@ -322,9 +322,6 @@
 </style>
 
 <div class="outer overflow-x-hidden">
-  <span data-cy="gameover" class:gameover>GAME OVER</span>
-  <span data-cy="victory" class:victory>VICTORY</span>
-
   <div class="triangle grid-cols-9 grid-rows-5 mb-4">
     {#each circles as _, i}
       {#key circles[i]}
@@ -340,8 +337,11 @@
   </div>
 
   <div class="flex">
-    <Button on:click={restart} icon="Restart" />
-    <div class="flex-grow" />
-    <Button on:click={undo} icon="Undo" />
+    <Button on:click={restart} icon="restart" color="orange" />
+    <div class="flex-grow">
+      <span data-cy="gameover" class:gameover>GAME OVER</span>
+      <span data-cy="victory" class:victory>VICTORY</span>
+    </div>
+    <Button on:click={undo} icon="undo" />
   </div>
 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 0dab20b..3a78d1d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,5 @@
+const colors = require("tailwindcss/colors")
+
 module.exports = {
   purge: {
     enabled: !process.env.ROLLUP_WATCH,
@@ -6,6 +8,33 @@ module.exports = {
   },
   darkMode: false, // or 'media' or 'class'
   theme: {
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      gray: colors.gray,
+      white: colors.white,
+      green: "hsl(92, 28%, 65%)",
+      "green-lighter": "hsl(92, 28%, 85%)",
+      "green-darker": "hsl(92, 28%, 30%)",
+      cyan: "hsl(179, 25%, 65%)",
+      "cyan-lighter": "hsl(179, 25%, 85%)",
+      "cyan-darker": "hsl(179, 25%, 30%)",
+      blue: "hsl(210, 34%, 63%)",
+      "blue-lighter": "hsl(213, 32%, 82%)",
+      "blue-darker": "hsl(213, 32%, 37%)",
+      yellow: "hsl(40, 71%, 73%)",
+      "yellow-lighter": "hsl(40, 71%, 88%)",
+      "yellow-darker": "hsl(40, 71%, 37%)",
+      orange: "hsl(14, 51%, 63%)",
+      "orange-lighter": "hsl(14, 51%, 83%)",
+      "orange-darker": "hsl(14, 51%, 28%)",
+      red: "hsl(354, 42%, 56%)",
+      "red-lighter": "hsl(354, 42%, 76%)",
+      "red-darker": "hsl(354, 42%, 28%)",
+      purple: "hsl(311, 20%, 63%)",
+      "purple-lighter": "hsl(311, 20%, 83%)",
+      "purple-darker": "hsl(311, 20%, 28%)",
+    },
     extend: {
       scale: {
         175: "1.75",