feat(theme): Add Default Theme

.storybook/preview.js

@@ -1,5 +1,4 @@
 import { addDecorator } from "@storybook/react";
-import themeDecorator from "./themeDecorator";
 import { withThemes } from "@react-theming/storybook-addon";
 import {
   DEFAULT_DARK_THEME_NAME,

.storybook/providerFn.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import {
   useTheme,
   ThemeProvider,

src/components/Datepicker/test/__snapshots__/datepicker.test.js.snap

@@ -39,7 +39,7 @@ exports[`DatePicker component Matches the snapshot 1`] = `
       className="rmpCell"
     >
       <div
-        className="rmpPopup"
+        className="rmpPopup light"
       />
     </div>
   </div>

src/components/Icon/Icon.jsx

@@ -989,7 +989,7 @@ const icons = (type, backgroundColor, iconColor) => {
     ),
     cancel: (
       <>
-        <g clip-path="url(#clip0_10_15)">
+        <g clipPath="url(#clip0_10_15)">
           <path d="M141.229 140.771L309.687 309.229Z" fill={iconColor} />
           <path d="M141.229 309.229L309.687 140.771Z" fill={iconColor} />
           <path

src/index.js

@@ -1,4 +1,5 @@
 import "./css/base.css";
+import "./theme/defaultTheme.js";
 
 export { default as BoxTextInput } from "./components/BoxTextInput/BoxTextInput.jsx";
 export { default as Button } from "./components/Button/Button.jsx";

src/theme/ThemeProvider.js

@@ -6,8 +6,14 @@ import React, {
   useContext,
 } from "react";
 import PropTypes from "prop-types";
+import defaultLightTheme from "./lightTheme";
+import { DEFAULT_LIGHT_THEME_NAME } from "./constants";
 
-const ThemeContext = createContext();
+const ThemeContext = createContext({
+  theme: defaultLightTheme,
+  themeName: DEFAULT_LIGHT_THEME_NAME,
+  setThemeName: () => {},
+});
 
 export const useTheme = () => useContext(ThemeContext) || {};
 
@@ -20,9 +26,7 @@ export const ThemeProvider = ({
   const [themeName, setThemeName] = useState(defaultThemeName);
   const theme = useMemo(() => themes[themeName], [themes, themeName]);
   useLayoutEffect(() => {
-    Object.keys(theme).forEach((key) => {
-      document.documentElement.style.setProperty(`--${key}`, theme[key]);
-    });
+    applyTheme(theme);
     if (fonts) {
       applyFontAsset(fonts);
     }
@@ -71,3 +75,9 @@ const applyFontAsset = (fonts) => {
   newStyle.type = "text/css";
   document.head.appendChild(newStyle);
 };
+
+function applyTheme(theme) {
+  Object.keys(theme).forEach((key) => {
+    document.documentElement.style.setProperty(`--${key}`, theme[key]);
+  });
+}

src/theme/defaultTheme.js

@@ -0,0 +1,9 @@
+import lightTheme from "./lightTheme";
+
+function applyDefaultTheme() {
+  Object.keys(lightTheme).forEach((key) => {
+    document.documentElement.style.setProperty(`--${key}`, lightTheme[key]);
+  });
+}
+
+applyDefaultTheme();