@abcagency/hc-ui-components 1.3.27 → 1.3.28

package/src/contexts/themeContext.js

@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import { createContext, useContext } from 'react';
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({
+	children,
+	uiText,
+	uiAccent,
+	primary,
+	primaryDark,
+	secondary,
+	secondaryDark
+}) => {
+	useEffect(() => {
+		document.documentElement.style.setProperty('--ui-text', uiText);
+		document.documentElement.style.setProperty('--ui-accent', uiAccent);
+		document.documentElement.style.setProperty('--primary', primary);
+		document.documentElement.style.setProperty('--primary-dark', primaryDark);
+		document.documentElement.style.setProperty('--secondary', secondary);
+		document.documentElement.style.setProperty('--secondary-dark', secondaryDark);
+	}, [uiText, uiAccent, primary, primaryDark, secondary, secondaryDark]);
+
+	return (
+		<ThemeContext.Provider
+			value={{
+				uiText,
+				uiAccent,
+				primary,
+				primaryDark,
+				secondary,
+				secondaryDark
+			}}
+		>
+			{children}
+		</ThemeContext.Provider>
+	);
+};
+
+export const useTheme = () => useContext(ThemeContext);

package/src/styles/index.css

@@ -1,24 +1,33 @@
-@config "../../tailwind.config.js";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-	html {
-		@apply hc-text-400 hc-text-uiText [scroll-behavior:smooth];
-	}
-}
-
-@layer components {
-	.track * {
-		@apply hc-pointer-events-none;
-	}
-
-	.stretched-link::after {
-		@apply hc-content-[''] hc-absolute hc-inset-0 hc-z-[1] hc-pointer-events-auto hc-bg-transparent;
-	}
-}
-
-.fit-content{
-	height:fit-content;
-}
+@config "../../tailwind.config.js";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	html {
+		@apply hc-text-400 hc-text-uiText [scroll-behavior:smooth];
+	}
+}
+
+@layer components {
+	.track * {
+		@apply hc-pointer-events-none;
+	}
+
+	.stretched-link::after {
+		@apply hc-content-[''] hc-absolute hc-inset-0 hc-z-[1] hc-pointer-events-auto hc-bg-transparent;
+	}
+}
+
+.fit-content{
+	height:fit-content;
+}
+:root {
+    --ui-text: #000000;
+    --ui-accent: #008494;
+    --primary: #008494;
+    --primary-dark: #001f5f;
+    --secondary: #008494;
+    --secondary-dark: #005f73;
+}
+