change styling on slider, tabs, and tooltip

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

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 }}

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",
 };

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;
-}

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';

src/style/theme.ts

@@ -1,8 +1,76 @@
 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 },
+    Button: {
+        controlHeight: 40,
+        colorFillSecondary: POWDER_BLUE,
+        colorFillTertiary: ALICE_BLUE,
+        colorBgContainerDisabled: PLATINUM,
+        colorTextDisabled: BATTLESHIP_GRAY,
+    },
+    Slider: {
+        trackBg: VISTA_BLUE,
+        trackHoverBg: STEEL_BLUE,
+        handleColor: VISTA_BLUE,
+        handleActiveColor: TUFTS_BLUE,
+        handleColorDisabled: BEAU_BLUE,
+        trackBgDisabled: BEAU_BLUE,
+    },
+    Tabs: {
+        inkBarColor: BLEU_DE_FRANCE,
+        itemHoverColor: CAROLINA_BLUE,
+        titleFontSize: 18,
+    },
+    Tooltip: {
+        colorTextLightSolid: '#000000',
+        colorBgSpotlight: HAWKES_BLUE,
+        boxShadowSecondary: `4px 3px 10px 0px ${EERIE_BLACK}CC`,
+    }
+};
+
+const lightComponents = {
+    ...commonComponents,
+    Tabs: {
+        ...commonComponents.Tabs,
+        colorPrimary: '#000000',
+    },
+};
+
+const darkComponents = {
+    ...commonComponents,
+    Button: {
+        ...commonComponents.Button,
+        defaultColor: ALICE_BLUE,
+        colorFillTertiary: DELFT_BLUE,
+        colorFillSecondary: BDAZZLED_BLUE,
+        colorFill: LAPIS_LAZULI,
+        colorBgContainerDisabled: RAISIN_BLACK,
+        colorTextDisabled: DAVYS_GREY,
+    },
+    Tabs: {
+        ...commonComponents.Tabs,
+        colorPrimary: '#ffffff',
+    },
 };
 
 export const lightTheme: ThemeConfig = {
@@ -15,7 +83,7 @@ export const lightTheme: ThemeConfig = {
         colorTextBase: "#213547",
     },
     components: {
-        ...commonComponents,
+        ...lightComponents,
         Layout: {
             headerBg: "#ffffff",
             bodyBg: "#ffffff",
@@ -33,7 +101,7 @@ export const darkTheme: ThemeConfig = {
         colorTextBase: "rgba(255,255,255,0.87)",
     },
     components: {
-        ...commonComponents,
+        ...darkComponents,
         Layout: {
             headerBg: "#0f1115",
             bodyBg: "#0f1115",