fix(theme): separate static theme variables from scoped style definition

toeverything · Nov 5, 2024 · dc6fbbd · dc6fbbd
1 parent e6cdebd
commit dc6fbbd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/packages/theme/src/index.css.ts b/packages/theme/src/index.css.ts
@@ -1,21 +1,22 @@
 import { globalStyle } from '@vanilla-extract/css';
 
 import {
-  combinedDarkCssVariables,
   combinedLightCssVariables,
   printCssVariables,
+  scopedDarkCssVariables,
+  scopedLightCssVariables,
 } from './index';
 
 globalStyle(':root', {
   vars: combinedLightCssVariables,
 });
 
 globalStyle('[data-theme="light"]', {
-  vars: combinedLightCssVariables,
+  vars: scopedLightCssVariables,
 });
 
 globalStyle('[data-theme="dark"]', {
-  vars: combinedDarkCssVariables,
+  vars: scopedDarkCssVariables,
 });
 
 globalStyle(':root', {

diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
@@ -39,6 +39,9 @@ export type AffineCssVariables = {
 const basicFontFamily = `apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol', 'Noto Color Emoji'`;
 const basicPrintFontFamily = `'Helvetica Neue', Tahoma, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol', 'Noto Color Emoji'`;
 
+/**
+ * Static theme that should not affected by `data-theme`
+ */
 export const baseTheme = {
   // font
   fontFamily: `'Inter', 'Source Sans 3', Poppins, ${basicFontFamily}`,
@@ -126,9 +129,7 @@ export const baseTheme = {
 };
 
 // Refs: https://github.com/toeverything/AFFiNE/issues/1796
-export const lightTheme = {
-  ...baseTheme,
-
+const pureLightTheme = {
   themeMode: 'light',
 
   brandColor: '#1E96EB',
@@ -279,10 +280,9 @@ export const lightTheme = {
   noteBackgroundGrey: 'rgba(230, 230, 230, 1)',
   noteBackgroundWhite: 'rgba(255, 255, 255, 1)',
 };
+export const lightTheme = { ...baseTheme, ...pureLightTheme };
 
-export const darkTheme = {
-  ...baseTheme,
-
+const pureDarkTheme = {
   themeMode: 'dark',
 
   brandColor: '#1E96EB',
@@ -433,7 +433,8 @@ export const darkTheme = {
   noteBackgroundBlack: 'rgba(255, 255, 255, 1)',
   noteBackgroundGrey: 'rgba(86, 86, 86, 1)',
   noteBackgroundWhite: 'rgba(0, 0, 0, 1)',
-} satisfies Omit<AffineTheme, 'editorMode'>;
+} satisfies typeof pureLightTheme;
+export const darkTheme = { ...baseTheme, ...pureDarkTheme };
 
 export const printTheme = {
   fontFamily: `'Inter', 'Source Sans 3', Poppins, ${basicPrintFontFamily}`,
@@ -465,6 +466,15 @@ export const combinedDarkCssVariables = {
   ...darkCssVariablesV2,
 };
 
+export const scopedLightCssVariables = {
+  ...createVariables(pureLightTheme),
+  ...lightCssVariablesV2,
+};
+export const scopedDarkCssVariables = {
+  ...createVariables(pureDarkTheme),
+  ...darkCssVariablesV2,
+};
+
 /**
  * Get AFFiNE css variable name type safely
  * @param key in camel or kebab format