feat(theme): add print theme

toeverything · Aug 21, 2024 · ecef0cb · ecef0cb
1 parent 8f78eee
commit ecef0cb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/packages/theme/src/index.css.ts b/packages/theme/src/index.css.ts
@@ -1,6 +1,10 @@
 import { globalStyle } from '@vanilla-extract/css';
 
-import { darkCssVariables, lightCssVariables } from './index';
+import {
+  darkCssVariables,
+  lightCssVariables,
+  printCssVariables,
+} from './index';
 import { darkCssVariablesV2, lightCssVariablesV2 } from './v2';
 
 const combinedLightCssVariables = {
@@ -12,7 +16,6 @@ const combinedDarkCssVariables = {
   ...darkCssVariablesV2,
 };
 
-
 globalStyle(':root', {
   vars: combinedLightCssVariables,
 });
@@ -24,3 +27,11 @@ globalStyle('[data-theme="light"]', {
 globalStyle('[data-theme="dark"]', {
   vars: combinedDarkCssVariables,
 });
+
+globalStyle(':root', {
+  '@media': {
+    print: {
+      vars: printCssVariables,
+    },
+  },
+});
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
@@ -36,6 +36,7 @@ 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'`;
 
 export const baseTheme = {
   // font
@@ -431,14 +432,25 @@ export const darkTheme = {
   noteBackgroundWhite: 'rgba(0, 0, 0, 1)',
 } satisfies Omit<AffineTheme, 'editorMode'>;
 
-const createVariables = (theme: typeof lightTheme) => {
+export const printTheme = {
+  fontFamily: `'Inter', 'Source Sans 3', Poppins, ${basicPrintFontFamily}`,
+  fontSerifFamily: `'Source Serif 4', 'Noto Serif' , serif, 'Cambria', ${basicPrintFontFamily}`,
+  fontMonoFamily: `'Source Code Pro', 'IBM Plex Mono', 'Roboto Mono','Noto Sans Mono', 'Noto Sans CJK',  ${basicPrintFontFamily}`,
+  fontSansFamily: `'Inter', 'Source Sans 3', Poppins, ${basicPrintFontFamily}`,
+
+  fontNumberFamily: `'Roboto Mono', 'Noto Sans Mono', ${basicPrintFontFamily}`,
+  fontCodeFamily: `'IBM Plex Mono', 'Space Mono', Consolas, Menlo, Monaco, Courier, monospace, ${basicPrintFontFamily}`,
+}
+
+const createVariables = (theme: Partial<AffineTheme>) => {
   return objectEntries(theme).reduce((variables, [key, value]) => {
     return { ...variables, [themeToVar(key)]: value };
   }, {} as AffineCssVariables);
 };
 
 export const lightCssVariables = createVariables(lightTheme);
 export const darkCssVariables = createVariables(darkTheme);
+export const printCssVariables = createVariables(printTheme);
 
 /**
  * Get AFFiNE css variable name type safely