From 096ada06913dcd61be612ddb9266eed1718b9af2 Mon Sep 17 00:00:00 2001
From: Adrian Pascu <mail@adipascu.ro>
Date: Fri, 13 Oct 2023 00:42:00 +0200
Subject: [PATCH] Add `colors.ts` file

---
 src/Countdown.tsx | 13 +++++--------
 src/Settings.tsx  | 15 ++++++---------
 src/colors.ts     |  5 +++++
 3 files changed, 16 insertions(+), 17 deletions(-)
 create mode 100644 src/colors.ts

diff --git a/src/Countdown.tsx b/src/Countdown.tsx
index 3556e02..a428f48 100644
--- a/src/Countdown.tsx
+++ b/src/Countdown.tsx
@@ -2,9 +2,9 @@ import { createSignal, onCleanup } from "solid-js";
 import { Temporal } from "temporal-polyfill";
 import { IoSettingsSharp } from "solid-icons/io";
 import FONT_FAMILY from "./font";
-import getDarkMode from "./dark-signal";
 import { GIT_HASH } from "./config";
 import { calculateAgeLocal } from "./calculate-age";
+import { colorBackground, colorPrimary, colorSecondary } from "./colors";
 
 const animationLoop = (cb: (time: DOMHighResTimeStamp) => void) => {
   let handle: number;
@@ -34,9 +34,6 @@ export default ({
   const largeAge = () => Math.floor(age()).toString();
   const smallAge = () => age().toFixed(11).split(".")[1];
 
-  const colorLabel = () => (getDarkMode() ? "#b9b3aa" : "#b0b5b9");
-  const colorCounter = () => (getDarkMode() ? "#bab4ab" : "#494949");
-  const colorBackground = () => (getDarkMode() ? "#181a1b" : "#ffffff");
   return (
     <div
       style={{
@@ -62,14 +59,14 @@ export default ({
             "font-size": "19.2px",
             "font-weight": "bold",
             "text-transform": "uppercase",
-            color: colorLabel(),
+            color: colorSecondary(),
             "margin-left": "4px",
           }}
           title={`Birthday: ${birthDay.toLocaleString()}`}
         >
           <div>Age</div>
           <IoSettingsSharp
-            fill={colorLabel()}
+            fill={colorSecondary()}
             style={{
               "margin-top": "3px",
               "margin-left": "4px",
@@ -91,7 +88,7 @@ export default ({
             "font-weight": "bold",
             "line-height": "0.85",
             overflow: "hidden",
-            color: colorCounter(),
+            color: colorPrimary(),
           }}
         >
           <div>{largeAge()}</div>
@@ -118,7 +115,7 @@ export default ({
               href="https://github.com/adipascu/solid-motivation"
               style={{
                 "font-size": "14px",
-                color: colorCounter(),
+                color: colorPrimary(),
                 "margin-left": "9px",
                 opacity: isHovered() ? 1 : 0,
                 transition: "opacity 0.2s ease-in-out",
diff --git a/src/Settings.tsx b/src/Settings.tsx
index fd261e1..49797a4 100644
--- a/src/Settings.tsx
+++ b/src/Settings.tsx
@@ -1,7 +1,7 @@
 import { createSignal } from "solid-js";
 import { Temporal } from "temporal-polyfill";
 import FONT_FAMILY from "./font";
-import getDarkMode from "./dark-signal";
+import { colorBackground, colorPrimary, colorSecondary } from "./colors";
 
 export default ({
   onBirthDay,
@@ -9,9 +9,6 @@ export default ({
   onBirthDay: (birthDay: Temporal.PlainDate | null) => void;
 }) => {
   const [date, setDate] = createSignal<Temporal.PlainDate | null>(null);
-  const colorLabel = () => (getDarkMode() ? "#b9b3aa" : "#b0b5b9");
-  const colorCounter = () => (getDarkMode() ? "#bab4ab" : "#494949");
-  const colorBackground = () => (getDarkMode() ? "#181a1b" : "#ffffff");
 
   return (
     <div
@@ -27,7 +24,7 @@ export default ({
           "font-family": FONT_FAMILY,
           "font-size": "19.2px",
           "font-weight": "bold",
-          color: colorCounter(),
+          color: colorPrimary(),
           "margin-bottom": "4px",
         }}
       >
@@ -41,7 +38,7 @@ export default ({
           padding: "10px",
           "font-size": "16px",
           border: "2px solid",
-          "border-color": colorLabel(),
+          "border-color": colorSecondary(),
           "border-radius": "4px",
         }}
         onKeyDown={(e) => {
@@ -71,16 +68,16 @@ export default ({
           "font-weight": "bold",
           "border-radius": "4px",
           border: "none",
-          "background-color": colorCounter(),
+          "background-color": colorPrimary(),
           color: colorBackground(),
           cursor: "pointer",
           transition: "background-color 0.2s ease",
         }}
         onMouseOver={(e) => {
-          e.currentTarget.style.backgroundColor = colorCounter();
+          e.currentTarget.style.backgroundColor = colorPrimary();
         }}
         onMouseOut={(e) => {
-          e.currentTarget.style.backgroundColor = colorLabel();
+          e.currentTarget.style.backgroundColor = colorSecondary();
         }}
       >
         Motivate
diff --git a/src/colors.ts b/src/colors.ts
new file mode 100644
index 0000000..8b2f894
--- /dev/null
+++ b/src/colors.ts
@@ -0,0 +1,5 @@
+import getDarkMode from "./dark-signal";
+
+export const colorPrimary = () => (getDarkMode() ? "#bab4ab" : "#494949");
+export const colorSecondary = () => (getDarkMode() ? "#b9b3aa" : "#b0b5b9");
+export const colorBackground = () => (getDarkMode() ? "#181a1b" : "#ffffff");