From 8d8119b39b496d85dba59bac171b024c89f28054 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Sat, 6 May 2023 04:34:01 +0800 Subject: [PATCH] chore: update theme color (#2242) --- .../editor-mode-switch/style.ts | 4 +- .../pure/workspace-list-modal/styles.ts | 2 +- .../src/components/workspace-card/styles.ts | 2 +- packages/theme/src/index.ts | 101 +++++++----------- 4 files changed, 45 insertions(+), 64 deletions(-) diff --git a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts index c51d412575..268c07743c 100644 --- a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts +++ b/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', diff --git a/apps/web/src/components/pure/workspace-list-modal/styles.ts b/apps/web/src/components/pure/workspace-list-modal/styles.ts index f833dba9c3..88df2b25f7 100644 --- a/apps/web/src/components/pure/workspace-list-modal/styles.ts +++ b/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)', diff --git a/packages/component/src/components/workspace-card/styles.ts b/packages/component/src/components/workspace-card/styles.ts index fdda6867e3..542607da6a 100644 --- a/packages/component/src/components/workspace-card/styles.ts +++ b/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'), diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 296599aa2e..681de2ae71 100644 --- a/packages/theme/src/index.ts +++ b/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)', - 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', + tooltip: 'rgba(66, 65, 73, 1)', menuShadow: - '0px 0px 12px rgba(66, 65, 73, 0.1), inset 0px 0px 0px 0.5px rgba(227, 227, 228, 1)', - shadow: '0px 0px 4px rgba(66, 65, 73, 0.1)', + '0px 0px 12px rgba(66, 65, 73, 0.14), inset 0px 0px 0px 0.5px rgba(227, 227, 228, 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)', - 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', + tooltip: 'rgba(234, 234, 234, 1)', 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; export const lightCssVariables = Object.entries(lightTheme).reduce(