feat: share inverted state through theme provider

Author: abelflopes

packages/components/all/src/text/index.tsx

@@ -3,8 +3,9 @@ import styles from "./styles/index.module.scss";
 import React, { type ReactHTML, useMemo } from "react";
 // Utils
 import classNames from "classnames";
+import { useThemeContext } from "@rck/theme";
 
-export type TextVariation = "small" | "bold" | "link" | "link_hidden";
+export type TextVariation = "small" | "bold" | "link" | "link_hidden" | "inverted";
 
 export interface TextProps extends React.HTMLAttributes<HTMLElement> {
   margin?: boolean;
@@ -22,6 +23,8 @@ export const Text = ({
   children,
   ...otherProps
 }: Readonly<TextProps>): React.ReactElement => {
+  const { inverted } = useThemeContext();
+
   const computedVariations = Array.isArray(variation) ? variation : variation && [variation];
 
   const computedClassNames = useMemo(
@@ -32,7 +35,10 @@ export const Text = ({
         {
           [`${styles.margin}`]: margin,
         },
-        computedVariations?.map((i) => styles[i]),
+        computedVariations?.filter((i) => i !== "inverted").map((i) => styles[i]),
+        {
+          [`${styles.inverted}`]: inverted && !computedVariations?.includes("inverted"),
+        },
         className,
       ),
     [className, computedVariations, margin, type],

packages/components/all/src/text/styles/index.module.scss

@@ -89,3 +89,7 @@
     text-decoration: underline;
   }
 }
+
+.inverted {
+  @include define-css-var(text, color, #fff);
+}

packages/components/theme/src/context.tsx

@@ -1,7 +1,39 @@
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import type { Theme } from "./types";
 import { defaultTheme } from "./themes/default";
 
-export const ThemeContext = React.createContext<Theme>(defaultTheme);
+export interface ThemeContextProps {
+  inverted: boolean;
+  theme: Theme;
+}
 
-export const useThemeContext = (): Theme => useContext(ThemeContext);
+export const themeContextDefaults: ThemeContextProps = {
+  inverted: false,
+  theme: defaultTheme,
+};
+
+export interface ThemeContextProviderProps {
+  value?: Partial<ThemeContextProps>;
+  children: React.ReactNode;
+}
+
+export const ThemeContext = React.createContext<ThemeContextProps>(themeContextDefaults);
+
+export const useThemeContext = (): ThemeContextProps => useContext(ThemeContext);
+
+export const ThemeContextProvider = ({
+  value,
+  children,
+}: Readonly<ThemeContextProviderProps>): React.ReactElement => {
+  const parentContext = useThemeContext();
+
+  const computedValue = useMemo(
+    () => ({
+      ...parentContext,
+      ...value,
+    }),
+    [value, parentContext],
+  );
+
+  return <ThemeContext.Provider value={computedValue}>{children}</ThemeContext.Provider>;
+};

packages/components/theme/src/provider.tsx

@@ -2,7 +2,7 @@ import "./styles/index.module.scss";
 import React, { useMemo } from "react";
 import type { Theme } from "./types";
 import { defaultTheme } from "./themes/default";
-import { ThemeContext } from "./context";
+import { ThemeContextProvider } from "./context";
 
 export interface ThemeProviderProps {
   target?: HTMLElement;
@@ -28,8 +28,11 @@ export const ThemeProvider = ({
   }, [theme]);
 
   return (
-    <ThemeContext.Provider value={theme}>
+    <ThemeContextProvider
+      value={{
+        theme,
+      }}>
       <div style={themeCssVars}>{children}</div>
-    </ThemeContext.Provider>
+    </ThemeContextProvider>
   );
 };