Add colors.ts file

adipascu · Oct 12, 2023 · 096ada0 · 096ada0
1 parent b61b59d
commit 096ada0
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git 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
@@ -1,17 +1,14 @@
 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,
 }: {
   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
@@ -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");