From dd74bc44a0fa841e44ce0751305270f5e59cb154 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 11 May 2026 17:56:59 -0700
Subject: [PATCH 1/3] change styling on slider, tabs, and tooltip

---
 src/style/theme.ts | 38 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/style/theme.ts b/src/style/theme.ts
index ec908c1f..3221e774 100644
--- a/src/style/theme.ts
+++ b/src/style/theme.ts
@@ -3,6 +3,40 @@ import { theme } from "antd";
 
 const commonComponents = {
     Button: { controlHeight: 40 },
+    Slider: {
+        trackBg: '#7AA4D7',
+        trackHoverBg: '#5F92CE',
+        handleColor: '#7AA4D7',
+        handleActiveColor: '#3378C4',
+        handleColorDisabled: '#C6D2DE',
+        trackBgDisabled: '#C6D2DE',
+    },
+    Tabs: {
+        inkBarColor: '#468ADE',
+        itemHoverColor: '#6BA0E5',
+        titleFontSize: 18,
+    },
+    Tooltip: {
+        colorTextLightSolid: '#000000',
+        colorBgSpotlight: '#cbe3ff',
+        boxShadowSecondary: '4px 3px 10px 0px #1F1F1FCC',
+    }
+};
+
+const lightComponents = {
+    ...commonComponents,
+    Tabs: {
+        ...commonComponents.Tabs,
+        colorPrimary: '#000000',
+    },
+};
+
+const darkComponents = {
+    ...commonComponents,
+    Tabs: {
+        ...commonComponents.Tabs,
+        colorPrimary: '#ffffff',
+    },
 };
 
 export const lightTheme: ThemeConfig = {
@@ -15,7 +49,7 @@ export const lightTheme: ThemeConfig = {
         colorTextBase: "#213547",
     },
     components: {
-        ...commonComponents,
+        ...lightComponents,
         Layout: {
             headerBg: "#ffffff",
             bodyBg: "#ffffff",
@@ -33,7 +67,7 @@ export const darkTheme: ThemeConfig = {
         colorTextBase: "rgba(255,255,255,0.87)",
     },
     components: {
-        ...commonComponents,
+        ...darkComponents,
         Layout: {
             headerBg: "#0f1115",
             bodyBg: "#0f1115",

From 8102d79ea425f02124a1d644f8555cb0c3dd6efd Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Mon, 11 May 2026 20:46:10 -0700
Subject: [PATCH 2/3] adjust button stylings

---
 src/components/ErrorLogs/index.tsx  |  2 +-
 src/components/RecipeForm/index.tsx |  2 +-
 src/components/StatusBar/index.tsx  |  2 +-
 src/index.css                       |  7 -------
 src/style/theme.ts                  | 17 ++++++++++++++++-
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/ErrorLogs/index.tsx b/src/components/ErrorLogs/index.tsx
index 885274c6..fa14c729 100644
--- a/src/components/ErrorLogs/index.tsx
+++ b/src/components/ErrorLogs/index.tsx
@@ -16,7 +16,7 @@ const ErrorLogs = (props: ErrorLogsProps): JSX.Element => {
 
     return (
         <>
-            <Button color="primary" variant="filled" onClick={toggleLogs}>
+            <Button color="default" variant="filled" onClick={toggleLogs}>
                 Logs
             </Button>
             <Drawer
diff --git a/src/components/RecipeForm/index.tsx b/src/components/RecipeForm/index.tsx
index 1e10ff7a..db068728 100644
--- a/src/components/RecipeForm/index.tsx
+++ b/src/components/RecipeForm/index.tsx
@@ -50,7 +50,7 @@ const RecipeForm = ({ onStartPacking, availableHeight }: RecipeFormProps) => {
                     <Button
                         onClick={onStartPacking}
                         className="packing-button"
-                        color="primary"
+                        color="default"
                         variant="filled"
                         disabled={isPacking || isOriginalRecipe}
                         style={{ width: "100%", minHeight: 38 }}
diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx
index 703dbe62..ba599668 100644
--- a/src/components/StatusBar/index.tsx
+++ b/src/components/StatusBar/index.tsx
@@ -7,7 +7,7 @@ import ErrorLogs from "../ErrorLogs";
 import { DownloadOutlined, ShareAltOutlined } from "@ant-design/icons";
 
 const statusBarButtonProps: Pick<ButtonProps, "color" | "variant" | "className"> = {
-    color: "primary",
+    color: "default",
     variant: "filled",
     className: "status-bar-button",
 };
diff --git a/src/index.css b/src/index.css
index 5d50d16f..2a64fe16 100644
--- a/src/index.css
+++ b/src/index.css
@@ -26,10 +26,3 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
diff --git a/src/style/theme.ts b/src/style/theme.ts
index 3221e774..fa597844 100644
--- a/src/style/theme.ts
+++ b/src/style/theme.ts
@@ -2,7 +2,13 @@ import type { ThemeConfig } from "antd";
 import { theme } from "antd";
 
 const commonComponents = {
-    Button: { controlHeight: 40 },
+    Button: {
+        controlHeight: 40,
+        colorFillSecondary: '#b5cffe',
+        colorFillTertiary: '#e6f4ff',
+        colorBgContainerDisabled: '#dcdde5',
+        colorTextDisabled: '#989898',
+    },
     Slider: {
         trackBg: '#7AA4D7',
         trackHoverBg: '#5F92CE',
@@ -33,6 +39,15 @@ const lightComponents = {
 
 const darkComponents = {
     ...commonComponents,
+    Button: {
+        ...commonComponents.Button,
+        defaultColor: '#e6f4ff',
+        colorFillTertiary: '#1f3a5a',
+        colorFillSecondary: '#2a4a6e',
+        colorFill: '#365a82',
+        colorBgContainerDisabled: '#1a1a1a',
+        colorTextDisabled: '#595959',
+    },
     Tabs: {
         ...commonComponents.Tabs,
         colorPrimary: '#ffffff',

From f28df0814d4448761546f61c0cf10026a78f11e0 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Tue, 12 May 2026 11:52:26 -0700
Subject: [PATCH 3/3] semantic named color constants

---
 src/style/colors.ts | 17 +++++++++++++
 src/style/theme.ts  | 59 ++++++++++++++++++++++++++++++---------------
 2 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 src/style/colors.ts

diff --git a/src/style/colors.ts b/src/style/colors.ts
new file mode 100644
index 00000000..23de6fc2
--- /dev/null
+++ b/src/style/colors.ts
@@ -0,0 +1,17 @@
+export const VISTA_BLUE = '#7AA4D7';
+export const STEEL_BLUE = '#5F92CE';
+export const TUFTS_BLUE = '#3378C4';
+export const BEAU_BLUE = '#C6D2DE';
+export const BLEU_DE_FRANCE = '#468ADE';
+export const CAROLINA_BLUE = '#6BA0E5';
+export const HAWKES_BLUE = '#cbe3ff';
+export const POWDER_BLUE = '#b5cffe';
+export const ALICE_BLUE = '#e6f4ff';
+export const DELFT_BLUE = '#1f3a5a';
+export const BDAZZLED_BLUE = '#2a4a6e';
+export const LAPIS_LAZULI = '#365a82';
+export const EERIE_BLACK = '#1F1F1F';
+export const RAISIN_BLACK = '#1a1a1a';
+export const PLATINUM = '#dcdde5';
+export const BATTLESHIP_GRAY = '#989898';
+export const DAVYS_GREY = '#595959';
diff --git a/src/style/theme.ts b/src/style/theme.ts
index fa597844..5d947096 100644
--- a/src/style/theme.ts
+++ b/src/style/theme.ts
@@ -1,31 +1,50 @@
 import type { ThemeConfig } from "antd";
 import { theme } from "antd";
+import {
+    ALICE_BLUE,
+    BATTLESHIP_GRAY,
+    BDAZZLED_BLUE,
+    BEAU_BLUE,
+    BLEU_DE_FRANCE,
+    CAROLINA_BLUE,
+    DAVYS_GREY,
+    DELFT_BLUE,
+    EERIE_BLACK,
+    HAWKES_BLUE,
+    LAPIS_LAZULI,
+    PLATINUM,
+    POWDER_BLUE,
+    RAISIN_BLACK,
+    STEEL_BLUE,
+    TUFTS_BLUE,
+    VISTA_BLUE,
+} from "./colors";
 
 const commonComponents = {
     Button: {
         controlHeight: 40,
-        colorFillSecondary: '#b5cffe',
-        colorFillTertiary: '#e6f4ff',
-        colorBgContainerDisabled: '#dcdde5',
-        colorTextDisabled: '#989898',
+        colorFillSecondary: POWDER_BLUE,
+        colorFillTertiary: ALICE_BLUE,
+        colorBgContainerDisabled: PLATINUM,
+        colorTextDisabled: BATTLESHIP_GRAY,
     },
     Slider: {
-        trackBg: '#7AA4D7',
-        trackHoverBg: '#5F92CE',
-        handleColor: '#7AA4D7',
-        handleActiveColor: '#3378C4',
-        handleColorDisabled: '#C6D2DE',
-        trackBgDisabled: '#C6D2DE',
+        trackBg: VISTA_BLUE,
+        trackHoverBg: STEEL_BLUE,
+        handleColor: VISTA_BLUE,
+        handleActiveColor: TUFTS_BLUE,
+        handleColorDisabled: BEAU_BLUE,
+        trackBgDisabled: BEAU_BLUE,
     },
     Tabs: {
-        inkBarColor: '#468ADE',
-        itemHoverColor: '#6BA0E5',
+        inkBarColor: BLEU_DE_FRANCE,
+        itemHoverColor: CAROLINA_BLUE,
         titleFontSize: 18,
     },
     Tooltip: {
         colorTextLightSolid: '#000000',
-        colorBgSpotlight: '#cbe3ff',
-        boxShadowSecondary: '4px 3px 10px 0px #1F1F1FCC',
+        colorBgSpotlight: HAWKES_BLUE,
+        boxShadowSecondary: `4px 3px 10px 0px ${EERIE_BLACK}CC`,
     }
 };
 
@@ -41,12 +60,12 @@ const darkComponents = {
     ...commonComponents,
     Button: {
         ...commonComponents.Button,
-        defaultColor: '#e6f4ff',
-        colorFillTertiary: '#1f3a5a',
-        colorFillSecondary: '#2a4a6e',
-        colorFill: '#365a82',
-        colorBgContainerDisabled: '#1a1a1a',
-        colorTextDisabled: '#595959',
+        defaultColor: ALICE_BLUE,
+        colorFillTertiary: DELFT_BLUE,
+        colorFillSecondary: BDAZZLED_BLUE,
+        colorFill: LAPIS_LAZULI,
+        colorBgContainerDisabled: RAISIN_BLACK,
+        colorTextDisabled: DAVYS_GREY,
     },
     Tabs: {
         ...commonComponents.Tabs,