From 28c212975966c34899ef00a5183c93de03b327f1 Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Mon, 26 Feb 2024 11:13:12 -0800
Subject: [PATCH] Fix tailwind theme

---
 packages/components/.storybook/preview.js          | 14 ++++++--------
 packages/components/src/main.css                   |  8 ++++----
 packages/components/src/utils/theme/base/colors.ts | 11 +----------
 .../src/utils/{themeContext => theme}/index.tsx    | 10 ++--------
 4 files changed, 13 insertions(+), 30 deletions(-)
 rename packages/components/src/utils/{themeContext => theme}/index.tsx (50%)

diff --git a/packages/components/.storybook/preview.js b/packages/components/.storybook/preview.js
index fafce2d0..709d381e 100644
--- a/packages/components/.storybook/preview.js
+++ b/packages/components/.storybook/preview.js
@@ -1,6 +1,6 @@
 import "../src/main.css";
 import React from "react";
-import { ThemeProvider } from "../src/utils/themeContext";
+import ThemeWrapper from "../src/utils/theme";
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
@@ -14,13 +14,11 @@ const preview = {
     },
   },
   decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <Story />
-        </ThemeProvider>
-      );
-    },
+    Story => (
+      <ThemeWrapper>
+        <Story />
+      </ThemeWrapper>
+    ),
   ],
 };
 
diff --git a/packages/components/src/main.css b/packages/components/src/main.css
index 325232ac..39957092 100644
--- a/packages/components/src/main.css
+++ b/packages/components/src/main.css
@@ -37,6 +37,10 @@ h4 {
   @apply text-lg;
 }
 
+p {
+  @apply text-sm text-primary leading-normal;
+}
+
 a {
   @apply font-semibold text-link-2;
 }
@@ -45,9 +49,5 @@ a:hover {
   @apply text-link-1;
 }
 
-p {
-  @apply text-sm text-primary leading-normal;
-}
-
 @tailwind components;
 @tailwind utilities;
diff --git a/packages/components/src/utils/theme/base/colors.ts b/packages/components/src/utils/theme/base/colors.ts
index d90c52d7..60b2c7ee 100644
--- a/packages/components/src/utils/theme/base/colors.ts
+++ b/packages/components/src/utils/theme/base/colors.ts
@@ -2,15 +2,6 @@ const staticColors = {
   primary: "#010a40",
   "acc-grey": "#b2c0c4",
   "acc-red": "#ff9a99",
-
-  // "acc-1": "#fc42c9",
-  // "background-acc-1": "#182134",
-  // "background-acc-start": "#1F2942",
-  // "button-1": "#3d91f0",
-  // "link-1": "#1f6dc6",
-  // "button-2": "#1f6dc6",
-  // "link-2": "#3d91f0",
-  // "link-light": "#6db0fc",
 };
 
 const colors = {
@@ -33,5 +24,5 @@ export default colors;
 // https://tailwindcss.com/docs/customizing-colors#using-css-variables
 
 function withOpacity(variableName: string): string {
-  return `rgb(var(${variableName}) / <alpha-value>)`;
+  return `rgb(var(${variableName}), <alpha-value>)`;
 }
diff --git a/packages/components/src/utils/themeContext/index.tsx b/packages/components/src/utils/theme/index.tsx
similarity index 50%
rename from packages/components/src/utils/themeContext/index.tsx
rename to packages/components/src/utils/theme/index.tsx
index 31e94dbc..bb0ca64c 100644
--- a/packages/components/src/utils/themeContext/index.tsx
+++ b/packages/components/src/utils/theme/index.tsx
@@ -1,22 +1,16 @@
 import React, { useEffect } from "react";
 import useTailwindTheme from "../useTailwindTheme";
 
-type ThemeContextType = {};
-
-const ThemeContext = React.createContext<ThemeContextType>({});
-
 type Props = {
   children: React.ReactNode;
 };
 
-export function ThemeProvider(props: Props) {
+export default function ThemeWrapper(props: Props) {
   const { applyTheme } = useTailwindTheme();
 
   useEffect(() => {
     applyTheme();
   }, []);
 
-  return (
-    <ThemeContext.Provider value={{}}>{props.children}</ThemeContext.Provider>
-  );
+  return props.children;
 }