feat: modify style variables

2026-02-21 16:26:58 +08:00 · 2022-10-18 17:08:42 +08:00
parent 2b13a63848
commit 90dba82a59
15 changed files with 232 additions and 168 deletions
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -1,49 +1,98 @@
 import '@emotion/react';
-import { AffineTheme, ThemeMode } from './types';
+import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
+
+const basicFontFamily =
+  'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';

 export const lightTheme: AffineTheme = {
  colors: {
-    primary: '#3A4C5C',
-    highlight: '#7389FD',
-    disabled: '#9096A5',
-    background: '#fff',
+    primaryColor: '#6880FF',
+
+    pageBackground: '#fff',
    hoverBackground: '#F1F3FF',
+    popoverBackground: '#fff',
+    codeBackground: '#f2f5f9',
+
+    textColor: '#3A4C5C',
+    iconColor: '#9096A5',
+    linkColor: '#6880FF',
+    linkColor2: '#6880FF',
+    linkVisitedColor: '#ABB8FE',
+    popoverColor: '#4C6275',
+    codeColor: '#517ea6',
+    quoteColor: '#4C6275',
+    placeHolderColor: '#C7C7C7',
+    selectedColor: 'rgba(104, 128, 255, 0.1)',
+
+    boxShadow:
+      ' 0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04);',
  },
  font: {
    xs: '12px',
    sm: '16px',
    base: '18px',
+    family: `Avenir Next, ${basicFontFamily}`,
+    family2: `Roboto Mono, ${basicFontFamily}`,
  },
 };

 export const darkTheme: AffineTheme = {
  ...lightTheme,
  colors: {
-    primary: '#fff',
-    highlight: '#7389FD',
-    disabled: '#9096A5',
-    background: '#3d3c3f',
-    hoverBackground: '#F1F3FF',
+    primaryColor: '#6880FF',
+
+    pageBackground: '#2c2c2c',
+    hoverBackground: '#3C3C42',
+    popoverBackground: '#1F2021',
+    codeBackground: '#505662',
+
+    textColor: '#fff',
+    iconColor: '#9096A5',
+    linkColor: '#6880FF',
+    linkColor2: '#7D91FF',
+    linkVisitedColor: '#505FAB',
+    popoverColor: '#A9B1C6',
+    codeColor: '#BDDBFD',
+    quoteColor: '#A9B1C6',
+    placeHolderColor: '#C7C7C7',
+    selectedColor: 'rgba(240, 242, 255, 0.8)',
+
+    boxShadow:
+      '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
  },
 };

-export const globalThemeConstant = (mode: ThemeMode, theme: AffineTheme) => {
-  const isDark = mode === 'dark';
+export const globalThemeVariables: (
+  mode: ThemeMode,
+  theme: AffineTheme
+) => AffineThemeCSSVariables = (mode, theme) => {
  return {
-    '--page-background-color': theme.colors.background,
-    '--page-text-color': theme.colors.primary,
+    '--affine-primary-color': theme.colors.primaryColor,

-    // editor style variables
-    '--affine-primary-color': theme.colors.primary,
-    '--affine-muted-color': '#a6abb7',
-    '--affine-highlight-color': '#6880ff',
-    '--affine-placeholder-color': '#c7c7c7',
-    '--affine-selected-color': 'rgba(104, 128, 255, 0.1)',
+    '--affine-page-background': theme.colors.pageBackground,
+    '--affine-popover-background': theme.colors.popoverBackground,
+    '--affine-hover-background': theme.colors.hoverBackground,
+    '--affine-code-background': theme.colors.codeBackground,

-    '--affine-font-family':
-      'Avenir Next, apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji',
+    '--affine-text-color': theme.colors.textColor,
+    '--affine-link-color': theme.colors.linkColor,
+    // In dark mode, normal text`s (not bold) color
+    '--affine-link-color2': theme.colors.linkColor2,
+    '--affine-link-visited-color': theme.colors.linkVisitedColor,
+    '--affine-icon-color': theme.colors.iconColor,
+    '--affine-popover-color': theme.colors.popoverColor,
+    '--affine-code-color': theme.colors.codeColor,
+    '--affine-quote-color': theme.colors.quoteColor,
+    '--affine-selected-color': theme.colors.selectedColor,
+    '--affine-placeholder-color': theme.colors.placeHolderColor,

-    '--affine-font-family2':
-      'Roboto Mono, apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji',
+    '--affine-box-shadow': theme.colors.boxShadow,
+
+    '--affine-font-xs': theme.font.xs, // tiny
+    '--affine-font-sm': theme.font.sm, // small
+    '--affine-font-base': theme.font.base,
+
+    '--affine-font-family': theme.font.family,
+    '--affine-font-family2': theme.font.family2,
  };
 };
--- a/packages/app/src/styles/themeProvider.tsx
+++ b/packages/app/src/styles/themeProvider.tsx
@@ -11,7 +11,7 @@ import {
  ThemeProviderProps,
  ThemeProviderValue,
 } from './types';
-import { lightTheme, darkTheme, globalThemeConstant } from './theme';
+import { lightTheme, darkTheme, globalThemeVariables } from './theme';
 import { SystemThemeHelper, localStorageThemeHelper } from './utils';

 export const ThemeContext = createContext<ThemeProviderValue>({
@@ -67,7 +67,7 @@ export const ThemeProvider = ({
      <Global
        styles={css`
          :root {
-            ${globalThemeConstant(mode, themeStyle)}
+            ${globalThemeVariables(mode, themeStyle) as {}}
          }
        `}
      />
--- a/packages/app/src/styles/types.ts
+++ b/packages/app/src/styles/types.ts
@@ -13,19 +13,66 @@ export type ThemeProviderValue = {

 export interface AffineTheme {
  colors: {
-    primary: string;
-    highlight: string;
-    disabled: string;
-    background: string;
+    primaryColor: string;
+
+    pageBackground: string;
+    popoverBackground: string;
    hoverBackground: string;
+    codeBackground: string;
+
+    textColor: string;
+    linkColor: string;
+    // In dark mode, normal text`s (not bold) color
+    linkColor2: string;
+    linkVisitedColor: string;
+    iconColor: string;
+    popoverColor: string;
+    codeColor: string;
+    quoteColor: string;
+    placeHolderColor: string;
+    selectedColor: string;
+
+    boxShadow: string;
  };
  font: {
    xs: string; // tiny
    sm: string; // small
    base: string;
+
+    family: string;
+    family2: string;
  };
 }

+export interface AffineThemeCSSVariables {
+  '--affine-primary-color': AffineTheme['colors']['primaryColor'];
+  '--affine-page-background': AffineTheme['colors']['pageBackground'];
+  '--affine-popover-background': AffineTheme['colors']['popoverBackground'];
+  '--affine-hover-background': AffineTheme['colors']['hoverBackground'];
+  '--affine-code-background': AffineTheme['colors']['codeBackground'];
+
+  '--affine-text-color': AffineTheme['colors']['textColor'];
+  '--affine-link-color': AffineTheme['colors']['linkColor'];
+  // In dark mode, normal text`s (not bold) color
+  '--affine-link-color2': AffineTheme['colors']['linkColor2'];
+  '--affine-link-visited-color': AffineTheme['colors']['linkVisitedColor'];
+  '--affine-icon-color': AffineTheme['colors']['iconColor'];
+  '--affine-popover-color': AffineTheme['colors']['popoverColor'];
+  '--affine-code-color': AffineTheme['colors']['codeColor'];
+  '--affine-quote-color': AffineTheme['colors']['quoteColor'];
+  '--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];
+  '--affine-selected-color': AffineTheme['colors']['selectedColor'];
+
+  '--affine-box-shadow': AffineTheme['colors']['boxShadow'];
+
+  '--affine-font-xs': AffineTheme['font']['xs']; // tiny
+  '--affine-font-sm': AffineTheme['font']['sm']; // small
+  '--affine-font-base': AffineTheme['font']['base'];
+
+  '--affine-font-family': AffineTheme['font']['family'];
+  '--affine-font-family2': AffineTheme['font']['family2'];
+}
+
 declare module '@emotion/react' {
  export interface Theme extends AffineTheme {}
 }