Fix tailwind theme

dolthub · Feb 26, 2024 · 28c2129 · 28c2129
1 parent e0b7605
commit 28c2129
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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/...mponents/src/utils/themeContext/index.tsx → ...ages/components/src/utils/theme/index.tsx b/...mponents/src/utils/themeContext/index.tsx → ...ages/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;
 }