✨(theme) add themes management

This is made in order to be able to handle natively multiple themes
for the future light/dark themes and also allow consumers to create
their own.

packages/react/src/components/Button/index.spec.tsx

@@ -68,6 +68,8 @@ describe("<Button/>", () => {
   it("uses custom token", async () => {
     await buildTheme();
     const tokens = await loadTokens();
-    expect(tokens.components.button["border-radius"]).toBeDefined();
+    expect(
+      tokens.themes.default.components.button["border-radius"],
+    ).toBeDefined();
   });
 });

packages/react/src/components/Provider/index.spec.tsx

@@ -153,4 +153,37 @@ describe("<CunninghamProvider />", () => {
     };
     render(<Wrapped />, { wrapper: Wrapper });
   });
+
+  it("should change theme by updating :root classes", async () => {
+    const Wrapper = (props: PropsWithChildren) => {
+      const [theme, setTheme] = useState("default");
+      return (
+        <CunninghamProvider theme={theme}>
+          <Button onClick={() => setTheme("default")}>Default</Button>
+          <Button onClick={() => setTheme("dark")}>Dark</Button>
+          <Button onClick={() => setTheme("custom")}>Custom</Button>
+          {props.children}
+        </CunninghamProvider>
+      );
+    };
+    render(<Wrapper />);
+
+    expect(document.querySelector(":root")).toHaveClass(
+      "cunningham-theme--default",
+    );
+
+    const user = userEvent.setup();
+    const darkButton = screen.getByRole("button", { name: "Dark" });
+    await user.click(darkButton);
+
+    expect(document.querySelector(":root")).toHaveClass(
+      "cunningham-theme--dark",
+    );
+    const customButton = screen.getByRole("button", { name: "Custom" });
+    await user.click(customButton);
+
+    expect(Array.from(document.querySelector(":root")!.classList)).toEqual([
+      "cunningham-theme--custom",
+    ]);
+  });
 });

packages/react/src/components/Provider/index.tsx

@@ -2,6 +2,7 @@ import React, {
   createContext,
   PropsWithChildren,
   useContext,
+  useEffect,
   useMemo,
 } from "react";
 import * as enUS from ":/locales/en-US.json";
@@ -30,10 +31,13 @@ export const useCunningham = () => {
 interface Props extends PropsWithChildren {
   customLocales?: Record<string, TranslationSet>;
   currentLocale?: string;
+  theme?: string;
 }
 
 export const DEFAULT_LOCALE = Locales.enUS;
+export const DEFAULT_THEME = "default";
 export const SUPPORTED_LOCALES = Object.values(Locales);
+const THEME_CLASSNAME_PREFIX = "cunningham-theme--";
 
 const findTranslation = (
   key: string,
@@ -46,6 +50,7 @@ const findTranslation = (
 export const CunninghamProvider = ({
   currentLocale = DEFAULT_LOCALE,
   customLocales,
+  theme = DEFAULT_THEME,
   children,
 }: Props) => {
   const locales: Record<string, TranslationSet> = useMemo(
@@ -83,6 +88,16 @@ export const CunninghamProvider = ({
     [currentLocale, locales],
   );
 
+  useEffect(() => {
+    const root = document.querySelector(":root")!;
+    root.classList.forEach((className) => {
+      if (className.startsWith(THEME_CLASSNAME_PREFIX)) {
+        root.classList.remove(className);
+      }
+    });
+    root.classList.add(THEME_CLASSNAME_PREFIX + theme);
+  }, [theme]);
+
   return (
     <CunninghamContext.Provider value={context}>
       {children}