chore: update theme color (#2242)

apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts

@@ -21,7 +21,7 @@ export const StyledEditorModeSwitch = styled('div')<{
       width: '24px',
       height: '24px',
       background: 'var(--affine-background-primary-color)',
-      boxShadow: 'var(--affine-shadow)',
+      boxShadow: 'var(--affine-shadow-1)',
       borderRadius: '8px',
       zIndex: 1,
       position: 'absolute',
@@ -40,7 +40,7 @@ export const StyledSwitchItem = styled('button')<{
     height: '24px',
     borderRadius: '8px',
     WebkitAppRegion: 'no-drag',
-    boxShadow: active ? 'var(--affine-shadow)' : 'none',
+    boxShadow: active ? 'var(--affine-shadow-1)' : 'none',
     color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
     display: hide ? 'none' : 'inline-flex',
     alignItems: 'center',

apps/web/src/components/pure/workspace-list-modal/styles.ts

@@ -47,7 +47,7 @@ export const StyledCreateWorkspaceCard = styled('div')(() => {
     height: '124px',
     cursor: 'pointer',
     padding: '16px',
-    boxShadow: 'var(--affine-shadow)',
+    boxShadow: 'var(--affine-shadow-1)',
     borderRadius: '12px',
     transition: 'all .1s',
     background: 'var(--affine-white-80)',

packages/component/src/components/workspace-card/styles.ts

@@ -42,7 +42,7 @@ export const StyledCard = styled('div')<{
     height: '124px',
     cursor: 'pointer',
     padding: '16px',
-    boxShadow: 'var(--affine-shadow)',
+    boxShadow: 'var(--affine-shadow-1)',
     borderRadius: '12px',
     border: `1px solid ${borderColor}`,
     ...displayFlex('flex-start', 'flex-start'),

packages/theme/src/index.ts

@@ -32,6 +32,7 @@ export const baseTheme = {
   fontFamily: `Avenir Next, Poppins, ${basicFontFamily}`,
   fontNumberFamily: `Roboto Mono, ${basicFontFamily}`,
   fontCodeFamily: `Space Mono, Consolas, Menlo, Monaco, Courier, monospace, ${basicFontFamily}`,
+  fontTitle: '36px',
   fontH1: '28px',
   fontH2: '26px',
   fontH3: '24px',
@@ -52,6 +53,30 @@ export const baseTheme = {
 
   zoom: '1',
   scale: 'calc(1 / var(--affine-zoom))',
+  paletteLineYellow: 'rgb(255, 232, 56)',
+  paletteLineOrange: 'rgb(255, 175, 56)',
+  paletteLineTangerine: 'rgb(255, 99, 31)',
+  paletteLineRed: 'rgb(252, 63, 85)',
+  paletteLineMagenta: 'rgb(255, 56, 179)',
+  paletteLinePurple: 'rgb(182, 56, 255)',
+  paletteLineNavy: 'rgb(59, 37, 204)',
+  paletteLineBlue: 'rgb(79, 144, 255)',
+  paletteLineGreen: 'rgb(16, 203, 134)',
+  paletteLineWhite: 'rgb(255, 255, 255)',
+  paletteLineBlack: 'rgb(0, 0, 0)',
+  paletteLineGrey: 'rgb(153, 153, 153)',
+  paletteShapeYellow: 'rgb(255, 241, 136)',
+  paletteShapeOrange: 'rgb(255, 207, 136)',
+  paletteShapeTangerine: 'rgb(255, 161, 121)',
+  paletteShapeRed: 'rgb(253, 140, 153)',
+  paletteShapeMagenta: 'rgb(255, 136, 209)',
+  paletteShapePurple: 'rgb(211, 136, 255)',
+  paletteShapeNavy: 'rgb(137, 124, 224)',
+  paletteShapeBlue: 'rgb(149, 188, 255)',
+  paletteShapeGreen: 'rgb(112, 224, 182)',
+  paletteShapeWhite: 'rgb(255, 255, 255)',
+  paletteShapeBlack: 'rgb(0, 0, 0)',
+  paletteShapeGrey: 'rgb(194, 194, 194)',
 };
 
 // Refs: https://github.com/toeverything/AFFiNE/issues/1796
@@ -71,7 +96,7 @@ export const lightTheme = {
   backgroundPrimaryColor: 'rgb(255, 255, 255)',
   backgroundOverlayPanelColor: 'rgb(251, 251, 252)',
   backgroundSecondaryColor: 'rgb(251, 250, 252)',
-  backgroundTertiaryColor: 'rgb(233, 233, 236)',
+  backgroundTertiaryColor: 'rgb(245, 243, 247)',
   backgroundCodeBlock: 'rgb(250, 251, 253)',
   backgroundModalColor: 'rgba(0, 0, 0, 0.4)',
   textPrimaryColor: 'rgb(66, 65, 73)',
@@ -79,7 +104,7 @@ export const lightTheme = {
   textDisableColor: 'rgb(169, 169, 173)',
   textEmphasisColor: 'rgb(84, 56, 255)',
   hoverColor: 'rgba(0, 0, 0, 0.04)',
-  linkColor: 'rgb(125, 145, 255)',
+  linkColor: 'rgba(88, 114, 251, 1)',
   quoteColor: 'rgb(100, 95, 130)',
   iconColor: 'rgb(119, 117, 125)',
   iconSecondary: 'rgba(119, 117, 125, 0.6)',
@@ -115,38 +140,16 @@ export const lightTheme = {
   tagBlue: 'rgba(225, 238, 255, 1)',
   tagPurple: 'rgba(243, 240, 255, 1)',
   tagPink: 'rgba(251, 231, 255, 1)',
-  paletteLineYellow: 'rgb(255, 232, 56)',
+  tooltip: 'rgba(66, 65, 73, 1)',
-  paletteLineOrange: 'rgb(255, 175, 56)',
-  paletteLineTangerine: 'rgb(255, 99, 31)',
-  paletteLineRed: 'rgb(252, 63, 85)',
-  paletteLineMagenta: 'rgb(255, 56, 179)',
-  paletteLinePurple: 'rgb(182, 56, 255)',
-  paletteLineNavy: 'rgb(59, 37, 204)',
-  paletteLineBlue: 'rgb(79, 144, 255)',
-  paletteLineGreen: 'rgb(16, 203, 134)',
-  paletteLineWhite: 'rgb(255, 255, 255)',
-  paletteLineBlack: 'rgb(0, 0, 0)',
-  paletteLineGrey: 'rgb(153, 153, 153)',
-  paletteShapeYellow: 'rgb(255, 241, 136)',
-  paletteShapeOrange: 'rgb(255, 207, 136)',
-  paletteShapeTangerine: 'rgb(255, 161, 121)',
-  paletteShapeRed: 'rgb(253, 140, 153)',
-  paletteShapeMagenta: 'rgb(255, 136, 209)',
-  paletteShapePurple: 'rgb(211, 136, 255)',
-  paletteShapeNavy: 'rgb(137, 124, 224)',
-  paletteShapeBlue: 'rgb(149, 188, 255)',
-  paletteShapeGreen: 'rgb(112, 224, 182)',
-  paletteShapeWhite: 'rgb(255, 255, 255)',
-  paletteShapeBlack: 'rgb(0, 0, 0)',
-  paletteShapeGrey: 'rgb(194, 194, 194)',
-  tooltip: '#424149',
   menuShadow:
-    '0px 0px 12px rgba(66, 65, 73, 0.1), inset 0px 0px 0px 0.5px rgba(227, 227, 228, 1)',
+    '0px 0px 12px rgba(66, 65, 73, 0.14), inset 0px 0px 0px 0.5px rgba(227, 227, 228, 1)',
-  shadow: '0px 0px 4px rgba(66, 65, 73, 0.1)',
+  shadow1: '0px 0px 4px 0px rgba(66, 65, 73, 0.14)',
+  shadow2: '0px 0px 12px 0px rgba(66, 65, 73, 0.18)',
+  shadow3: '0px 0px 20px 0px rgba(66, 65, 73, 0.22)',
   popoverShadow:
     '0px 0px 30px rgba(75, 75, 75, 0.2), 0px 0px 4px rgba(75, 75, 75, 0.3), inset 0px 0px 0px rgba(227, 226, 228, 1)',
   floatButtonShadow:
-    '0px 1px 16px rgba(0, 0, 0, 0.1), 0px 2px 3px rgba(0, 0, 0, 0.1)',
+    '0px 10px 12px -3px rgba(66, 65, 73, 0.1), 0px 4px 6px -2px rgba(66, 65, 73, 0.05)',
 };
 
 export const darkTheme = {
@@ -155,13 +158,13 @@ export const darkTheme = {
   themeMode: 'dark',
 
   brandColor: 'rgba(156, 140, 255, 1)',
-  primaryColor: 'rgba(156, 140, 255, 1)',
+  primaryColor: 'rgba(106, 86, 229, 1)',
   secondaryColor: 'rgb(144, 150, 245)',
   tertiaryColor: 'rgb(30, 30, 30)',
   hoverColor: 'rgba(255, 255, 255, 0.1)',
   iconColor: 'rgb(168, 168, 160)',
   iconSecondary: 'rgba(168,168,160,0.6)',
-  borderColor: 'rgb(57, 57, 57)',
+  borderColor: 'rgba(46, 46, 46, 1)',
   dividerColor: 'rgb(114, 114, 114)',
   placeholderColor: 'rgb(62, 62, 63)',
   quoteColor: 'rgb(147, 144, 163)',
@@ -191,7 +194,7 @@ export const darkTheme = {
   white: 'rgb(0, 0, 0)',
   backgroundCodeBlock: 'rgb(41, 44, 51)',
   backgroundTertiaryColor: 'rgb(30, 30, 30)',
-  backgroundProcessingColor: 'rgba(20, 22, 26, 1)',
+  backgroundProcessingColor: 'rgba(24, 27, 32, 1)',
   backgroundErrorColor: 'rgba(21, 14, 13, 1)',
   backgroundWarningColor: 'rgba(26, 10, 3, 1)',
   backgroundSuccessColor: 'rgba(8, 21, 18, 1)',
@@ -209,38 +212,16 @@ export const darkTheme = {
   tagYellow: 'rgba(150, 132, 49, 1)',
   tagOrange: 'rgba(185, 129, 46, 1)',
   tagGray: 'rgba(41, 41, 41, 1)',
-  paletteLineYellow: 'rgb(255, 232, 56)',
+  tooltip: 'rgba(234, 234, 234, 1)',
-  paletteLineOrange: 'rgb(255, 175, 56)',
-  paletteLineTangerine: 'rgb(255, 99, 31)',
-  paletteLineRed: 'rgb(252, 63, 85)',
-  paletteLineMagenta: 'rgb(255, 56, 179)',
-  paletteLinePurple: 'rgb(182, 56, 255)',
-  paletteLineNavy: 'rgb(59, 37, 204)',
-  paletteLineBlue: 'rgb(79, 144, 255)',
-  paletteLineGreen: 'rgb(16, 203, 134)',
-  paletteLineWhite: 'rgb(255, 255, 255)',
-  paletteLineBlack: 'rgb(0, 0, 0)',
-  paletteLineGrey: 'rgb(153, 153, 153)',
-  paletteShapeYellow: 'rgb(255, 241, 136)',
-  paletteShapeOrange: 'rgb(255, 207, 136)',
-  paletteShapeTangerine: 'rgb(255, 161, 121)',
-  paletteShapeRed: 'rgb(253, 140, 153)',
-  paletteShapeMagenta: 'rgb(255, 136, 209)',
-  paletteShapePurple: 'rgb(211, 136, 255)',
-  paletteShapeNavy: 'rgb(137, 124, 224)',
-  paletteShapeBlue: 'rgb(149, 188, 255)',
-  paletteShapeGreen: 'rgb(112, 224, 182)',
-  paletteShapeWhite: 'rgb(255, 255, 255)',
-  paletteShapeBlack: 'rgb(0, 0, 0)',
-  paletteShapeGrey: 'rgb(194, 194, 194)',
-  tooltip: '#EAEAEA',
   menuShadow:
     '0px 0px 12px rgba(0, 0, 0, 1), inset 0px 0px 0px 0.5px rgba(46, 46, 46, 1)',
-  shadow: '0px 0px 4px rgba(20, 20, 20, 1)',
+  shadow1: '0px 0px 4px 2px rgba(15, 15, 15, 1)',
+  shadow2: '0px 0px 12px 4px rgba(15, 15, 15, 0.8)',
+  shadow3: '0px 0px 22px 8px rgba(15, 15, 15, 0.9)',
   popoverShadow:
     '0px 0px 30px rgba(12, 12, 12, 0.8), 0px 0px 8px rgba(12, 12, 12, 1), inset 0px 0px 0px rgba(46, 46, 46, 1)',
   floatButtonShadow:
-    '0px 1px 16px rgba(0, 0, 0, 1), 0px 2px 3px rgba(0, 0, 0, 1)',
+    ' 0px 10px 12px -3px rgba(15, 15, 15, 0.88), 0px 4px 6px -2px rgba(0, 0, 0, 0.88)',
 } satisfies Omit<AffineTheme, 'editorMode'>;
 
 export const lightCssVariables = Object.entries(lightTheme).reduce(