toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-24 21:43:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update theme color (#2242)

Browse Source
This commit is contained in:
JimmFly 2023-05-06 04:34:01 +08:00 committed by GitHub
parent 80c1f9e546
commit 8d8119b39b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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',

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

@ -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)',

2
packages/component/src/components/workspace-card/styles.ts
View File

@ -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'),

101
packages/theme/src/index.ts
View File

@ -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<AffineTheme, 'editorMode'>;
export const lightCssVariables = Object.entries(lightTheme).reduce(