fix!: avoid init themes on Faency side causing them not being available on server side

components/FaencyProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IdProvider } from '@radix-ui/react-id';
-import { customColors, globalCss, PrimaryColor } from '../stitches.config';
+import { globalCss } from '../stitches.config';
 
 import RubikLightWoff2 from '../assets/fonts/rubik/Rubik-Light.woff2';
 import RubikWoff2 from '../assets/fonts/rubik/Rubik-Regular.woff2';
@@ -33,7 +33,7 @@ const globalStyles = globalCss({
       fontFamily: 'Rubik',
       fontWeight: 500,
       fontDisplay: 'swap',
-      src: `local('Rubik-Medium'), url(${RubikMediumWoff2}) format('woff2')`
+      src: `local('Rubik-Medium'), url(${RubikMediumWoff2}) format('woff2')`,
     },
     {
       fontFamily: 'Rubik',
@@ -67,7 +67,7 @@ const globalStyles = globalCss({
       fontStyle: 'italic',
       fontWeight: 500,
       fontDisplay: 'swap',
-      src: `local('Rubik-Medium'), url(${RubikMediumItalicWoff2}) format('woff2')`
+      src: `local('Rubik-Medium'), url(${RubikMediumItalicWoff2}) format('woff2')`,
     },
     {
       fontFamily: 'Rubik',
@@ -86,22 +86,8 @@ const globalStyles = globalCss({
   ],
 });
 
-export const FaencyProvider: React.FC<{ primaryColor: PrimaryColor }> = ({
-  children,
-  primaryColor,
-}) => {
+export const FaencyProvider: React.FC = ({ children }) => {
+  globalStyles();
 
-  React.useEffect(() => {
-    const { dark, light } = customColors(primaryColor);
-    dark.toString();
-    light.toString();
-  }, [primaryColor]);
-
-  globalStyles()
-
-  return (
-    <IdProvider>
-      {children}
-    </IdProvider>
-  );
+  return <IdProvider>{children}</IdProvider>;
 };

index.ts

@@ -1,5 +1,15 @@
-export { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from './components/Accordion';
-export { RadioAccordionRoot, RadioAccordionItem, RadioAccordionTrigger, RadioAccordionContent } from './components/RadioAccordion';
+export {
+  AccordionRoot,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from './components/Accordion';
+export {
+  RadioAccordionRoot,
+  RadioAccordionItem,
+  RadioAccordionTrigger,
+  RadioAccordionContent,
+} from './components/RadioAccordion';
 export { Alert } from './components/Alert';
 export { AspectRatio } from '@radix-ui/react-aspect-ratio';
 export { Badge } from './components/Badge';
@@ -60,7 +70,8 @@ export {
   globalCss,
   keyframes,
   config,
-  customColors,
+  lightTheme,
+  darkTheme,
 } from './stitches.config';
 
 export type { CSS, VariantProps } from './stitches.config';

package.json

@@ -89,4 +89,4 @@
   "lint-staged": {
     "*.{js,css,md}": "prettier --write"
   }
-}
+}

stitches.config.ts

@@ -18,7 +18,7 @@ import { Theme as SkeletonTheme } from './components/Skeleton/Skeleton.themes';
 import { Theme as DialogTheme } from './components/Dialog/Dialog.themes';
 import { Theme as NavigationTheme } from './components/Navigation/Navigation.themes';
 import { Theme as TooltipTheme } from './components/Tooltip/Tooltip.themes';
-import { Theme as TextareaTheme } from './components/Textarea/Textarea.themes'
+import { Theme as TextareaTheme } from './components/Textarea/Textarea.themes';
 
 import { lightColors, darkColors } from './colors';
 import getPrimaryColorInfo from './utils/getPrimaryColorInfo';
@@ -42,7 +42,7 @@ export const colors: Record<string, Property.Color> = {
   hiContrast: '$deepBlue11',
   loContrast: 'white',
   focusOutline: 'hsl(216, 100%, 64%)',
-  divider: 'hsl(207, 10%, 82%)'
+  divider: 'hsl(207, 10%, 82%)',
 };
 
 const stitches = createStitches({
@@ -264,10 +264,10 @@ export const { styled, css, createTheme, getCssText, globalCss, keyframes, confi
 
 export const utils = config.utils;
 
-export const customColors = (primary: PrimaryColor) => {
+export const darkTheme = (primary: PrimaryColor) => {
   const darkPrimaryColor = getPrimaryColorInfo(primary, darkColors);
 
-  const darkTheme = createTheme('dark', {
+  return createTheme('dark', {
     colors: {
       ...darkColors,
 
@@ -297,10 +297,12 @@ export const customColors = (primary: PrimaryColor) => {
       ...TextareaTheme.getDark(darkPrimaryColor),
     },
   });
+};
 
+export const lightTheme = (primary: PrimaryColor) => {
   const lightPrimaryColor = getPrimaryColorInfo(primary, lightColors);
 
-  const lightTheme = createTheme('light', {
+  return createTheme('light', {
     colors: {
       primary: lightPrimaryColor.token,
       ...AccordionTheme.getLight(lightPrimaryColor),
@@ -323,9 +325,4 @@ export const customColors = (primary: PrimaryColor) => {
       ...TextareaTheme.getLight(lightPrimaryColor),
     },
   });
-
-  return {
-    dark: darkTheme,
-    light: lightTheme,
-  };
 };