From 6beb708138392bdc9977993cb240842b3841e80d Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 1 Aug 2025 19:36:45 -0600 Subject: [PATCH] Update theme style injector --- .../ui/report/ReportEditorSkeleton.tsx | 6 +- .../ui/report/ThemeWrapper/ThemeStyles.tsx | 7 +- .../ui/report/ThemeWrapper/ThemeWrapper.tsx | 14 +-- .../ui/report/ThemeWrapper/themes.ts | 106 +++++++++--------- .../ui/report/ThemeWrapper/useThemesConfig.ts | 4 +- 5 files changed, 68 insertions(+), 69 deletions(-) diff --git a/apps/web/src/components/ui/report/ReportEditorSkeleton.tsx b/apps/web/src/components/ui/report/ReportEditorSkeleton.tsx index 3c56720d3..ff6a412aa 100644 --- a/apps/web/src/components/ui/report/ReportEditorSkeleton.tsx +++ b/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') && (
-
-
+
+
diff --git a/apps/web/src/components/ui/report/ThemeWrapper/ThemeStyles.tsx b/apps/web/src/components/ui/report/ThemeWrapper/ThemeStyles.tsx index 570219408..c62d36615 100644 --- a/apps/web/src/components/ui/report/ThemeWrapper/ThemeStyles.tsx +++ b/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, diff --git a/apps/web/src/components/ui/report/ThemeWrapper/ThemeWrapper.tsx b/apps/web/src/components/ui/report/ThemeWrapper/ThemeWrapper.tsx index 1b9862cbf..6bc15dcde 100644 --- a/apps/web/src/components/ui/report/ThemeWrapper/ThemeWrapper.tsx +++ b/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 ( <> -
+
{children}
diff --git a/apps/web/src/components/ui/report/ThemeWrapper/themes.ts b/apps/web/src/components/ui/report/ThemeWrapper/themes.ts index 0745d127a..4f6c5bdb5 100644 --- a/apps/web/src/components/ui/report/ThemeWrapper/themes.ts +++ b/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): Recor // `${cssVars["--primary"]} / ${100 - key * 20}%` // } - return { ...cssVars, ...BASE_THEME }; + return { ...cssVars, ...FONT_BASE_THEME }; } export function themeColorNameToCssVariable(name: string) { diff --git a/apps/web/src/components/ui/report/ThemeWrapper/useThemesConfig.ts b/apps/web/src/components/ui/report/ThemeWrapper/useThemesConfig.ts index 80ac0661b..7ca36536d 100644 --- a/apps/web/src/components/ui/report/ThemeWrapper/useThemesConfig.ts +++ b/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 }; }