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

feat: modify style variables

Browse Source
This commit is contained in:
QiShaoXuan 2022-10-18 17:08:42 +08:00
parent 2b13a63848
commit 90dba82a59
15 changed files with 232 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app/public/globals.css
View File

@ -145,7 +145,7 @@ button,
select,
keygen,
legend {
color: var(--page-text-color);
color: var(--affine-text-color);
outline: 0;
font-size: 18px;
line-height: 1.5;
@ -156,7 +156,7 @@ body {
}
a,
a:hover {
color: var(--page-text-color);
color: var(--affine-link-color);
}
input {

2
packages/app/src/components/Header/index.tsx
View File

@ -65,7 +65,7 @@ export const Header = () => {
return (
<StyledHeader>
<StyledLogo>
<LogoIcon style={{ color: '#6880FF' }} onClick={() => {}} />
<LogoIcon onClick={() => {}} />
</StyledLogo>
<StyledTitle
onMouseEnter={() => {

55
packages/app/src/components/Header/styles.ts
View File

@ -33,14 +33,10 @@ export const StyledTitleWrapper = styled('div')({
position: 'relative',
});
export const StyledLogo = styled('div')({});
export const StyledModeSwitch = styled('div')({
height: '100%',
display: 'flex',
alignItems: 'center',
marginRight: '12px',
});
export const StyledLogo = styled('div')(({ theme }) => ({
color: theme.colors.primaryColor,
cursor: 'pointer',
}));
export const StyledHeaderRightSide = styled('div')({
height: '100%',
@ -48,27 +44,25 @@ export const StyledHeaderRightSide = styled('div')({
alignItems: 'center',
});
export const StyledMoreMenuItem = styled('div')({
height: '32px',
display: 'flex',
alignItems: 'center',
borderRadius: '5px',
fontSize: '14px',
color: '#4C6275',
padding: '0 14px',
svg: {
fill: '#4C6275',
width: '16px',
height: '16px',
marginRight: '14px',
},
':hover': {
color: 'var(--affine-highlight-color)',
background: '#F1F3FF',
export const StyledMoreMenuItem = styled('div')(({ theme }) => {
return {
height: '32px',
display: 'flex',
alignItems: 'center',
borderRadius: '5px',
fontSize: '14px',
color: theme.colors.popoverColor,
padding: '0 14px',
svg: {
fill: 'var(--affine-highlight-color)',
width: '16px',
height: '16px',
marginRight: '14px',
},
},
':hover': {
color: theme.colors.primaryColor,
background: theme.colors.hoverBackground,
},
};
});
export const IconButton = styled('div')(({ theme }) => {
@ -78,12 +72,11 @@ export const IconButton = styled('div')(({ theme }) => {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: theme.colors.disabled,
background: 'transparent',
color: theme.colors.iconColor,
borderRadius: '5px',
':hover': {
color: theme.colors.highlight,
background: '#F1F3FF',
color: theme.colors.primaryColor,
background: theme.colors.hoverBackground,
},
};
});

26
packages/app/src/components/editor-mode-switch/index.tsx
View File

@ -1,7 +1,6 @@
import React, { useState, useEffect, cloneElement } from 'react';
import {
StyledAnimateRadioContainer,
StyledRadioMiddle,
StyledMiddleLine,
StyledRadioItem,
StyledLabel,
@ -19,21 +18,21 @@ import { useEditor } from '@/components/editor-provider';
const PaperItem = ({ active }: { active?: boolean }) => {
const {
theme: {
colors: { highlight, disabled },
colors: { iconColor, primaryColor },
},
} = useTheme();
return <PaperIcon style={{ color: active ? highlight : disabled }} />;
return <PaperIcon style={{ color: active ? primaryColor : iconColor }} />;
};
const EdgelessItem = ({ active }: { active?: boolean }) => {
const {
theme: {
colors: { highlight, disabled },
colors: { iconColor, primaryColor },
},
} = useTheme();
return <EdgelessIcon style={{ color: active ? highlight : disabled }} />;
return <EdgelessIcon style={{ color: active ? primaryColor : iconColor }} />;
};
const AnimateRadioItem = ({
@ -57,24 +56,11 @@ const AnimateRadioItem = ({
);
};
const RadioMiddle = ({
isHover,
direction,
}: {
isHover: boolean;
direction: 'left' | 'right' | 'middle';
}) => {
return (
<StyledRadioMiddle hidden={!isHover}>
<StyledMiddleLine hidden={false} />
</StyledRadioMiddle>
);
};
export const EditorModeSwitch = ({
isHover,
style = {},
}: AnimateRadioProps) => {
const { mode: themeMode } = useTheme();
const { mode, setMode } = useEditor();
const modifyRadioItemStatus = (): RadioItemStatus => {
return {
@ -124,7 +110,7 @@ export const EditorModeSwitch = ({
setRadioItemStatus(modifyRadioItemStatus());
}}
/>
<StyledMiddleLine hidden={!isHover} />
<StyledMiddleLine hidden={!isHover} dark={themeMode === 'dark'} />
<AnimateRadioItem
isLeft={false}
label="Edgeless"

34
packages/app/src/components/editor-mode-switch/style.ts
View File

@ -6,7 +6,7 @@ import type { ItemStatus } from './type';
const ANIMATE_DURATION = 400;
export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
({ shrink }) => {
({ shrink, theme }) => {
const animateScaleStretch = keyframes`${toString(
spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' })
)}`;
@ -27,7 +27,7 @@ export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
return {
height: '36px',
borderRadius: '18px',
background: '#F1F3FF',
background: theme.colors.hoverBackground,
position: 'relative',
display: 'flex',
transition: `background ${ANIMATE_DURATION}ms`,
@ -36,31 +36,21 @@ export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
}
);
export const StyledRadioMiddle = styled('div')<{
export const StyledMiddleLine = styled('div')<{
hidden: boolean;
}>(({ hidden }) => {
dark: boolean;
}>(({ hidden, dark }) => {
return {
width: '1px',
height: '100%',
position: 'relative',
height: '16px',
background: dark ? '#4d4c53' : '#D0D7E3',
top: '0',
bottom: '0',
margin: 'auto',
opacity: hidden ? '0' : '1',
};
});
export const StyledMiddleLine = styled('div')<{ hidden: boolean }>(
({ hidden }) => {
return {
width: '1px',
height: '16px',
background: '#D0D7E3',
top: '0',
bottom: '0',
margin: 'auto',
opacity: hidden ? '0' : '1',
};
}
);
export const StyledRadioItem = styled('div')<{
status: ItemStatus;
active: boolean;
@ -89,7 +79,7 @@ export const StyledRadioItem = styled('div')<{
: {};
const {
colors: { highlight, disabled },
colors: { iconColor, primaryColor },
} = theme;
return {
width: '0',
@ -97,7 +87,7 @@ export const StyledRadioItem = styled('div')<{
display: 'flex',
cursor: 'pointer',
overflow: 'hidden',
color: active ? highlight : disabled,
color: active ? primaryColor : iconColor,
...dynamicStyle,
};
});

19
packages/app/src/components/faq/style.ts
View File

@ -5,22 +5,22 @@ export const StyledFAQ = styled('div')(({ theme }) => {
width: '32px',
height: '32px',
backgroundColor: '#fff',
color: theme.colors.disabled,
color: theme.colors.iconColor,
position: 'fixed',
right: '30px',
bottom: '30px',
borderRadius: '50%',
zIndex: 1000,
':hover': {
backgroundColor: '#F1F3FF',
color: theme.colors.highlight,
backgroundColor: theme.colors.popoverBackground,
color: theme.colors.primaryColor,
},
};
});
export const StyledIconWrapper = styled('div')(({ theme }) => {
return {
color: theme.colors.disabled,
color: theme.colors.iconColor,
marginBottom: '24px',
display: 'flex',
justifyContent: 'center',
@ -31,8 +31,8 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
width: '32px',
height: '32px',
':hover': {
color: theme.colors.highlight,
backgroundColor: '#F1F3FF',
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
},
};
});
@ -43,12 +43,9 @@ export const StyledFAQWrapper = styled('div')(({ theme }) => {
bottom: '100%',
left: '0',
width: '100%',
color: theme.colors.disabled,
color: theme.colors.iconColor,
':hover': {
'> svg': {
color: theme.colors.highlight,
},
color: theme.colors.highlight,
color: theme.colors.popoverColor,
},
};
});

8
packages/app/src/components/popover/index.tsx
View File

@ -21,12 +21,12 @@ const StyledPopoverWrapper = styled('div')({
paddingTop: '46px',
zIndex: 1000,
});
const StyledPopover = styled('div')(() => {
const StyledPopover = styled('div')(({ theme }) => {
return {
width: '248px',
background: '#fff',
boxShadow:
'0px 1px 10px -6px rgba(24, 39, 75, 0.5), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
background: theme.colors.popoverBackground,
boxShadow: theme.colors.boxShadow,
color: theme.colors.popoverColor,
borderRadius: '10px 0px 10px 10px',
padding: '8px 4px',
position: 'absolute',

2
packages/app/src/components/simple-counter/index.ts
View File

@ -27,7 +27,7 @@ export class Counter extends LitElement {
static styles = css`
.counter-container {
display: flex;
color: var(--color-primary);
color: var(--affine-text-color);
}
button {
margin: 0 5px;

4
packages/app/src/components/theme-mode-switch/style.ts
View File

@ -32,7 +32,7 @@ export const StyledSwitchItem = styled('div')<{
)}`;
const activeStyle = active
? {
color: theme.colors.disabled,
color: theme.colors.iconColor,
top: '0',
animation: firstTrigger
? `${
@ -43,7 +43,7 @@ export const StyledSwitchItem = styled('div')<{
}
: ({
top: '100%',
color: theme.colors.highlight,
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
animation: firstTrigger
? `${

2
packages/app/src/components/tooltip/Tooltip.tsx
View File

@ -30,7 +30,7 @@ const useTooltipStyle = (): CSSProperties => {
return {
boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.14)',
padding: '4px 12px',
backgroundColor: theme.colors.highlight,
backgroundColor: theme.colors.primaryColor,
color: '#fff',
fontSize: theme.font.xs,
};

14
packages/app/src/pages/index.tsx
View File

@ -12,12 +12,14 @@ const StyledEditorContainer = styled('div')(({ theme }) => {
};
});
const StyledPage = styled('div')({
height: '100vh',
display: 'flex',
flexDirection: 'column',
backgroundColor: 'var(--page-background-color)',
transition: 'background-color .5s',
const StyledPage = styled('div')(({ theme }) => {
return {
height: '100vh',
display: 'flex',
flexDirection: 'column',
backgroundColor: theme.colors.pageBackground,
transition: 'background-color .5s',
};
});
const DynamicEditor = dynamic(() => import('../components/editor'), {

74
packages/app/src/pages/temporary.css
View File

@ -1,44 +1,44 @@
debug-menu {
display: none !important;
}
.affine-editor-container {
height: 100%;
padding: 0 !important;
}
.affine-default-page-block-container {
width: 720px;
height: 100%;
margin: 0 auto;
}
/*.affine-editor-container {*/
/* height: 100%;*/
/* padding: 0 !important;*/
/*}*/
/*.affine-default-page-block-container {*/
/* width: 720px;*/
/* height: 100%;*/
/* margin: 0 auto;*/
/*}*/
u {
text-decoration: none;
border-bottom: 1px solid #4c6275 !important;
}
u::after {
display: none;
}
/*u {*/
/* text-decoration: none;*/
/* border-bottom: 1px solid #4c6275 !important;*/
/*}*/
/*u::after {*/
/* display: none;*/
/*}*/
.affine-paragraph-block-container.text {
margin-top: 18px !important;
}
/*.affine-paragraph-block-container.text {*/
/* margin-top: 18px !important;*/
/*}*/
.affine-default-page-block-title {
width: 100%;
}
s {
text-decoration: line-through !important;
}
/*.affine-default-page-block-title {*/
/* width: 100%;*/
/*}*/
/*s {*/
/* text-decoration: line-through !important;*/
/*}*/
.affine-edgeless-page-block-container {
height: 100% !important;
}
.affine-block-children-container.edgeless {
height: 100% !important;
}
.affine-list-rich-text-wrapper > div {
box-sizing: content-box;
color: var(--affine-highlight-color);
min-width: unset !important;
max-width: 26px;
}
/*.affine-edgeless-page-block-container {*/
/* height: 100% !important;*/
/*}*/
/*.affine-block-children-container.edgeless {*/
/* height: 100% !important;*/
/*}*/
/*.affine-list-rich-text-wrapper > div {*/
/* box-sizing: content-box;*/
/* color: var(--affine-highlight-color);*/
/* min-width: unset !important;*/
/* max-width: 26px;*/
/*}*/

97
packages/app/src/styles/theme.ts
View File

@ -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,
};
};

4
packages/app/src/styles/themeProvider.tsx
View File

@ -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 {}}
}
`}
/>

55
packages/app/src/styles/types.ts
View File

@ -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 {}
}