inject css vars

apps/web/src/components/ui/report/ThemeWrapper/ThemeStyles.tsx

@@ -2,26 +2,30 @@
 
 import { useMounted } from '@/hooks/useMount';
 import { useThemesConfig } from './useThemesConfig';
+import React from 'react';
 
-export function ThemesStyle() {
+export const ThemesStyle = React.memo(() => {
-  const { activeTheme } = useThemesConfig();
+  const { activeTheme, BASE_THEME } = useThemesConfig();
   const mounted = useMounted();
 
   if (!activeTheme || !mounted) {
     return null;
   }
 
-  console.log(activeTheme);
-
   return (
     <style>
       {`
 .themes-wrapper,
 [data-chart] {
+  background-color: red;
+
   ${Object.entries(activeTheme.light)
     .map(([key, value]) => `${key}: hsl(${value});`)
     .join('\n')}
 
+  ${Object.entries(BASE_THEME)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join('\n')}
 }
 
 .dark .themes-wrapper,
@@ -34,4 +38,6 @@ export function ThemesStyle() {
   `}
     </style>
   );
-}
+});
+
+ThemesStyle.displayName = 'ThemesStyle';

apps/web/src/components/ui/report/ThemeWrapper/ThemeWrapper.tsx

@@ -10,16 +10,18 @@ interface ThemeWrapperProps extends React.ComponentProps<'div'> {
 
 export function ThemeWrapper({ children, className, defaultTheme }: ThemeWrapperProps) {
   return (
-    <div
+    <>
-      className={cn(
+      <div
-        // `theme-${defaultTheme || config.theme}`,
+        className={cn(
-        'themes-wrapper',
+          // `theme-${defaultTheme || config.theme}`,
-        'w-full',
+          'themes-wrapper',
-        className
+          'w-full',
-      )}>
+          className
-      <ThemesStyle />
+        )}>
+        {children}
+      </div>
 
-      {children}
+      <ThemesStyle />
-    </div>
+    </>
   );
 }

apps/web/src/components/ui/report/ThemeWrapper/themes.ts

@@ -1,4 +1,4 @@
-const BASE_THEME = {
+export const BASE_THEME = {
   '--spacing': '0.25rem',
   '--breakpoint-xl': '80rem',
   '--breakpoint-2xl': '96rem',
@@ -567,7 +567,6 @@ const _THEMES = {
 Object.entries(_THEMES).forEach(([key, theme]) => {
   // @ts-expect-error - key is a string
   _THEMES[key] = {
-    ...BASE_THEME,
     ...theme,
     dark: themeColorsToCssVariables(theme.dark),
     light: themeColorsToCssVariables(theme.light)
@@ -595,7 +594,7 @@ export function themeColorsToCssVariables(colors: Record<string, string>): Recor
   //     `${cssVars["--primary"]} / ${100 - key * 20}%`
   // }
 
-  return cssVars;
+  return { ...cssVars, ...BASE_THEME };
 }
 
 export function themeColorNameToCssVariable(name: string) {

apps/web/src/components/ui/report/ThemeWrapper/useThemesConfig.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { THEMES, type Theme } from './themes';
+import { THEMES, BASE_THEME, type Theme } from './themes';
 
 const useThemesConfigStore = create<{
   activeTheme: Theme;
@@ -13,5 +13,5 @@ export function useThemesConfig() {
   const activeTheme = useThemesConfigStore((state) => state.activeTheme);
   const setActiveTheme = useThemesConfigStore((state) => state.setActiveTheme);
 
-  return { activeTheme, setActiveTheme, allThemes: THEMES };
+  return { activeTheme, setActiveTheme, allThemes: THEMES, BASE_THEME };
 }

apps/web/src/components/ui/report/elements/AIMenu.tsx

@@ -5,23 +5,6 @@ import * as React from 'react';
 import { AIChatPlugin, AIPlugin, useEditorChat, useLastAssistantMessage } from '@platejs/ai/react';
 import { BlockSelectionPlugin, useIsSelecting } from '@platejs/selection/react';
 import { Command as CommandPrimitive } from 'cmdk';
-// import {
-//   Album,
-//   BadgeHelp,
-//   BookOpenCheck,
-//   Check,
-//   CornerUpLeft,
-//   FeatherIcon,
-//   ListEnd,
-//   ListMinus,
-//   ListPlus,
-//   Loader2Icon,
-//   PauseIcon,
-//   PenLine,
-//   SmileIcon,
-//   Wand,
-//   X
-// } from 'lucide-react';
 import {
   Album,
   CircleQuestion,