Update theme style injector

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

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/classMerge';
 
-import ChartStackedBar from '../icons/NucleoIconOutlined/chart-stacked-bar';
+import ChartStackedBar from '../icons/NucleoIconFilled/chart-line-2';
 
 export type SkeletonElement =
   | 'toolbar'
@@ -112,8 +112,8 @@ export function ReportEditorSkeleton({
           {/* Chart placeholder */}
           {elements.includes('chart') && (
             <div className="bg-muted flex h-48 w-full items-center justify-center rounded-lg">
-              <div className="bg-muted-foreground/5 flex h-16 w-16 items-center justify-center rounded-lg">
-                <div className="text-muted-foreground/40 flex h-16 w-16 items-center justify-center text-4xl">
+              <div className="bg-muted-foreground/3 mx-5 flex h-40 w-full items-center justify-center rounded-lg">
+                <div className="text-muted-foreground/15 flex h-full w-full items-center justify-center text-[40px]">
                   <ChartStackedBar />
                 </div>
               </div>

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

@@ -2,10 +2,11 @@
 
 import { useMounted } from '@/hooks/useMount';
 import { useThemesConfig } from './useThemesConfig';
+import { DEFAULT_COLOR_THEME, FONT_BASE_THEME } from './themes';
 import React from 'react';
 
 export const ThemesStyle = React.memo(() => {
-  const { activeTheme, BASE_THEME } = useThemesConfig();
+  const { activeTheme, FONT_BASE_THEME } = useThemesConfig();
   const mounted = useMounted();
 
   if (!activeTheme || !mounted) {
@@ -22,10 +23,6 @@ export const ThemesStyle = React.memo(() => {
   ${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,

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

@@ -3,21 +3,21 @@
 import { cn } from '@/lib/utils';
 
 import { ThemesStyle } from './ThemeStyles';
+import { FONT_BASE_THEME, DEFAULT_COLOR_THEME } from './themes';
 
 interface ThemeWrapperProps extends React.ComponentProps<'div'> {
   defaultTheme?: string;
 }
 
+const DEFAULT_THEME_STYLE = {
+  ...DEFAULT_COLOR_THEME,
+  ...FONT_BASE_THEME
+} as React.CSSProperties;
+
 export function ThemeWrapper({ children, className, defaultTheme }: ThemeWrapperProps) {
   return (
     <>
-      <div
-        className={cn(
-          // `theme-${defaultTheme || config.theme}`,
-          'themes-wrapper',
-          'w-full',
-          className
-        )}>
+      <div style={DEFAULT_THEME_STYLE} className={cn('themes-wrapper w-full', className)}>
         {children}
       </div>
 

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

@@ -1,4 +1,4 @@
-export const BASE_THEME = {
+export const FONT_BASE_THEME = {
   '--spacing': '0.25rem',
   '--breakpoint-xl': '80rem',
   '--breakpoint-2xl': '96rem',
@@ -39,6 +39,57 @@ export const BASE_THEME = {
   '--leading-loose': '2'
 };
 
+export const DEFAULT_COLOR_THEME = {
+  id: 'default-shadcn',
+  dark: {
+    accent: '240 3.7% 15.9%',
+    'accent-foreground': '0 0% 98%',
+    background: '240 10% 3.9%',
+    border: '240 3.7% 15.9%',
+    brand: '213.3 93.9% 67.8%',
+    card: '240 10% 3.9%',
+    'card-foreground': '0 0% 98%',
+    destructive: '0 62.8% 30.6%',
+    'destructive-foreground': '0 0% 98%',
+    foreground: '0 0% 98%',
+    highlight: '48 96% 53%',
+    input: '240 3.7% 15.9%',
+    muted: '240 3.7% 15.9%',
+    'muted-foreground': '240 5% 64.9%',
+    popover: '240 10% 3.9%',
+    'popover-foreground': '0 0% 98%',
+    primary: '0 0% 98%',
+    'primary-foreground': '240 5.9% 10%',
+    ring: '240 4.9% 83.9%',
+    secondary: '240 3.7% 15.9%',
+    'secondary-foreground': '0 0% 98%'
+  },
+  light: {
+    accent: '240 4.8% 95.9%',
+    'accent-foreground': '240 5.9% 10%',
+    background: '0 0% 100%',
+    border: '240 5.9% 90%',
+    brand: '217.2 91.2% 59.8%',
+    card: '0 0% 100%',
+    'card-foreground': '240 10% 3.9%',
+    destructive: '0 84.2% 60.2%',
+    'destructive-foreground': '0 0% 98%',
+    foreground: '240 10% 3.9%',
+    highlight: '47.9 95.8% 53.1%',
+    input: '240 5.9% 90%',
+    muted: '240 4.8% 95.9%',
+    'muted-foreground': '240 3.8% 46.1%',
+    popover: '0 0% 100%',
+    'popover-foreground': '240 10% 3.9%',
+    primary: '240 5.9% 10%',
+    'primary-foreground': '0 0% 98%',
+    ring: '240 10% 3.9%',
+    secondary: '240 4.8% 95.9%',
+    'secondary-foreground': '240 5.9% 10%'
+  },
+  name: 'Default'
+} as const;
+
 const _THEMES = {
   ayu: {
     id: 'ayu',
@@ -190,56 +241,7 @@ const _THEMES = {
     },
     name: 'Default Palette'
   },
-  'default-shadcn': {
-    id: 'default-shadcn',
-    dark: {
-      accent: '240 3.7% 15.9%',
-      'accent-foreground': '0 0% 98%',
-      background: '240 10% 3.9%',
-      border: '240 3.7% 15.9%',
-      brand: '213.3 93.9% 67.8%',
-      card: '240 10% 3.9%',
-      'card-foreground': '0 0% 98%',
-      destructive: '0 62.8% 30.6%',
-      'destructive-foreground': '0 0% 98%',
-      foreground: '0 0% 98%',
-      highlight: '48 96% 53%',
-      input: '240 3.7% 15.9%',
-      muted: '240 3.7% 15.9%',
-      'muted-foreground': '240 5% 64.9%',
-      popover: '240 10% 3.9%',
-      'popover-foreground': '0 0% 98%',
-      primary: '0 0% 98%',
-      'primary-foreground': '240 5.9% 10%',
-      ring: '240 4.9% 83.9%',
-      secondary: '240 3.7% 15.9%',
-      'secondary-foreground': '0 0% 98%'
-    },
-    light: {
-      accent: '240 4.8% 95.9%',
-      'accent-foreground': '240 5.9% 10%',
-      background: '0 0% 100%',
-      border: '240 5.9% 90%',
-      brand: '217.2 91.2% 59.8%',
-      card: '0 0% 100%',
-      'card-foreground': '240 10% 3.9%',
-      destructive: '0 84.2% 60.2%',
-      'destructive-foreground': '0 0% 98%',
-      foreground: '240 10% 3.9%',
-      highlight: '47.9 95.8% 53.1%',
-      input: '240 5.9% 90%',
-      muted: '240 4.8% 95.9%',
-      'muted-foreground': '240 3.8% 46.1%',
-      popover: '0 0% 100%',
-      'popover-foreground': '240 10% 3.9%',
-      primary: '240 5.9% 10%',
-      'primary-foreground': '0 0% 98%',
-      ring: '240 10% 3.9%',
-      secondary: '240 4.8% 95.9%',
-      'secondary-foreground': '240 5.9% 10%'
-    },
-    name: 'Default'
-  },
+  'default-shadcn': DEFAULT_COLOR_THEME,
   dune: {
     id: 'dune',
     dark: {
@@ -594,7 +596,7 @@ export function themeColorsToCssVariables(colors: Record<string, string>): Recor
   //     `${cssVars["--primary"]} / ${100 - key * 20}%`
   // }
 
-  return { ...cssVars, ...BASE_THEME };
+  return { ...cssVars, ...FONT_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, BASE_THEME, type Theme } from './themes';
+import { THEMES, FONT_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, BASE_THEME };
+  return { activeTheme, setActiveTheme, allThemes: THEMES, FONT_BASE_THEME };
 }