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

feat: upgrate to new theme (#2027)

Browse Source 
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
Flrande 2023-04-20 16:31:19 +08:00 committed by GitHub
parent 63f7b2556e
commit 372377dd6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
61 changed files with 624 additions and 1037 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/web/src/components/affine/pinboard/styles.ts
View File

@ -20,7 +20,7 @@ export const StyledCollapsedButton = styled('button')<{
top: '0',
bottom: '0',
margin: 'auto',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
opacity: '.6',
transition: 'opacity .15s ease-in-out',
display: show ? 'flex' : 'none',
@ -57,13 +57,13 @@ export const StyledPinboard = styled('div')<{
padding: disableCollapse ? '0 5px' : '0 2px 0 16px',
position: 'relative',
color: disable
? theme.colors.disableColor
? 'var(--affine-text-disable-color)'
: active
? theme.colors.primaryColor
: theme.colors.textColor,
? 'var(--affine-primary-color)'
: 'var(--affine-text-primary-color)',
cursor: disable ? 'not-allowed' : 'pointer',
background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
fontSize: theme.font.base,
background: isOver ? alpha('var(--affine-primary-color)', 0.06) : '',
fontSize: 'var(--affine-font-base)',
userSelect: 'none',
...(textWrap
? {
@ -85,11 +85,13 @@ export const StyledPinboard = styled('div')<{
fontSize: '20px',
marginRight: '8px',
flexShrink: '0',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
color: active
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
},
':hover': {
backgroundColor: disable ? '' : theme.colors.hoverBackground,
backgroundColor: disable ? '' : 'var(--affine-hover-color)',
},
};
}
@ -110,9 +112,9 @@ export const StyledSearchContainer = styled('div')(({ theme }) => {
width: 'calc(100% - 24px)',
margin: '0 auto',
...displayFlex('flex-start', 'center'),
borderBottom: `1px solid ${theme.colors.borderColor}`,
borderBottom: '1px solid var(--affine-border-color)',
label: {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
fontSize: '20px',
height: '20px',
},
@ -126,7 +128,7 @@ export const StyledMenuContent = styled('div')(() => {
});
export const StyledMenuSubTitle = styled('div')(({ theme }) => {
return {
color: theme.colors.secondaryTextColor,
color: 'var(--affine-text-secondary-color)',
lineHeight: '36px',
padding: '0 12px',
};
@ -136,12 +138,12 @@ export const StyledMenuFooter = styled('div')(({ theme }) => {
return {
width: 'calc(100% - 24px)',
margin: '0 auto',
borderTop: `1px solid ${theme.colors.borderColor}`,
borderTop: '1px solid var(--affine-border-color)',
padding: '6px 0',
p: {
paddingLeft: '44px',
color: theme.colors.secondaryTextColor,
color: 'var(--affine-text-secondary-color)',
fontSize: '14px',
},
};

6
apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
View File

@ -15,7 +15,7 @@ export const Content = styled('div')({
export const ContentTitle = styled('h1')(({ theme }) => {
return {
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
lineHeight: '28px',
fontWeight: 600,
};
@ -26,7 +26,7 @@ export const StyleTips = styled('div')(({ theme }) => {
userSelect: 'none',
margin: '20px 0',
a: {
color: theme.colors.primaryColor,
color: 'var(--affine-background-primary-color)',
},
};
});
@ -36,7 +36,7 @@ export const StyleButton = styled(Button)(({ theme }) => {
textAlign: 'center',
margin: '20px 0',
borderRadius: '8px',
backgroundColor: theme.colors.primaryColor,
backgroundColor: 'var(--affine-background-primary-color)',
span: {
margin: '0',
},

14
apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx
View File

@ -154,7 +154,7 @@ const Members = styled('div')(({ theme }) => {
return {
position: 'absolute',
width: '100%',
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
textAlign: 'left',
zIndex: 1,
borderRadius: '0px 10px 10px 10px',
@ -162,7 +162,7 @@ const Members = styled('div')(({ theme }) => {
padding: '8px 12px',
input: {
'&::placeholder': {
color: theme.colors.placeHolderColor,
color: 'var(--affine-placeholder-color)',
},
},
};
@ -170,8 +170,8 @@ const Members = styled('div')(({ theme }) => {
// const NoFind = styled('div')(({ theme }) => {
// return {
// color: theme.colors.iconColor,
// fontSize: theme.font.sm,
// color: 'var(--affine-icon-color)',
// fontSize: 'var(--affine-font-sm)',
// lineHeight: '40px',
// userSelect: 'none',
// width: '100%',
@ -180,8 +180,8 @@ const Members = styled('div')(({ theme }) => {
const Member = styled('div')(({ theme }) => {
return {
color: theme.colors.iconColor,
fontSize: theme.font.sm,
color: 'var(--affine-icon-color)',
fontSize: 'var(--affine-font-sm)',
lineHeight: '40px',
userSelect: 'none',
display: 'flex',
@ -193,7 +193,7 @@ const MemberIcon = styled('div')(({ theme }) => {
width: '40px',
height: '40px',
borderRadius: '50%',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
background: '#F5F5F5',
textAlign: 'center',
lineHeight: '45px',

4
apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts
View File

@ -66,7 +66,7 @@ export const StyledMemberName = styled('div')(({ theme }) => {
fontWeight: '400',
fontSize: '18px',
lineHeight: '26px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
};
});
@ -75,7 +75,7 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
fontWeight: '400',
fontSize: '16px',
lineHeight: '22px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
};
});

4
apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts
View File

@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
position: 'relative',
padding: '0px',
width: '560px',
background: theme.colors.popoverBackground,
background: 'var(--affine-white)',
borderRadius: '12px',
// height: '312px',
};
@ -42,7 +42,7 @@ export const StyledInputContent = styled('div')(({ theme }) => {
flexDirection: 'row',
justifyContent: 'center',
margin: '24px 0',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
};
});

2
apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts
View File

@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
position: 'relative',
padding: '0px',
width: '460px',
background: theme.colors.popoverBackground,
background: 'var(--affine-white)',
borderRadius: '12px',
};
});

8
apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts
View File

@ -3,9 +3,9 @@ import { Input } from '@affine/component';
export const StyledInput = styled(Input)(({ theme }) => {
return {
border: `1px solid ${theme.colors.borderColor}`,
border: '1px solid var(--affine-border-color)',
borderRadius: '10px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
};
});
@ -14,7 +14,7 @@ export const StyledWorkspaceInfo = styled('div')(({ theme }) => {
...displayFlex('flex-start', 'center'),
fontSize: '20px',
span: {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
marginLeft: '15px',
},
};
@ -49,7 +49,7 @@ export const StyledAvatar = styled('div')(
export const StyledEditButton = styled('div')(({ theme }) => {
return {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
cursor: 'pointer',
marginLeft: '36px',
};

2
apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx
View File

@ -12,7 +12,7 @@ import type { PanelProps } from '../../index';
export const StyledWorkspaceName = styled('span')(({ theme }) => {
return {
fontWeight: '400',
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
};
});

22
apps/web/src/components/affine/workspace-setting-detail/style.ts
View File

@ -32,10 +32,12 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
display: 'flex',
margin: '0 48px 0 0',
height: '34px',
color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
color: isActive
? 'var(--affine-primary-color)'
: 'var(--affine-text-primary-color)',
fontWeight: '500',
fontSize: theme.font.h6,
lineHeight: theme.font.lineHeight,
fontSize: 'var(--affine-font-h6)',
lineHeight: 'var(--affine-line-height)',
cursor: 'pointer',
transition: 'all 0.15s ease',
};
@ -46,7 +48,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
export const StyledSettingKey = styled('div')(({ theme }) => {
return {
width: '140px',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
fontWeight: 500,
marginRight: '56px',
flexShrink: 0,
@ -61,14 +63,14 @@ export const StyledRow = styled(FlexWrapper)(() => {
export const StyledWorkspaceName = styled('span')(({ theme }) => {
return {
fontWeight: '400',
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
};
});
export const StyledIndicator = styled('div')(({ theme }) => {
return {
height: '2px',
background: theme.colors.primaryColor,
background: 'var(--affine-primary-color)',
position: 'absolute',
left: '0',
bottom: '0',
@ -90,8 +92,8 @@ export const StyledTabButtonWrapper = styled('div')(() => {
// height: '86px',
// border: '1px solid',
// borderColor: active
// ? theme.colors.primaryColor
// : theme.colors.borderColor,
// ? 'var(--affine-primary-color)'
// : 'var(--affine-border-color)',
// borderRadius: '10px',
// padding: '8px 12px',
// position: 'relative',
@ -107,7 +109,7 @@ export const StyledTabButtonWrapper = styled('div')(() => {
// );
// export const StyledDownloadCardDes = styled('div')(({ theme }) => {
// return {
// fontSize: theme.font.sm,
// color: theme.colors.iconColor,
// fontSize: 'var(--affine-font-sm)',
// color: 'var(--affine-icon-color)',
// };
// });

5
apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx
View File

@ -47,7 +47,6 @@ const FavoriteTag: React.FC<FavoriteTagProps> = ({
pageMeta: { favorite },
onClick,
}) => {
const theme = useTheme();
const { t } = useTranslation();
return (
<Tooltip
@ -64,7 +63,9 @@ const FavoriteTag: React.FC<FavoriteTagProps> = ({
);
}}
style={{
color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
color: favorite
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
}}
className={favorite ? '' : 'favorite-button'}
>

6
apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts
View File

@ -22,7 +22,7 @@ export const StyledTitleWrapper = styled('div')(({ theme }) => {
color: 'unset',
},
'a:hover': {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
};
});
@ -31,11 +31,11 @@ export const StyledTitleLink = styled('div')(({ theme }) => {
maxWidth: '80%',
marginRight: '18px',
...displayFlex('flex-start', 'center'),
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
'>svg': {
fontSize: '24px',
marginRight: '12px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
};
});

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

@ -25,7 +25,7 @@ export const StyledEditorModeSwitch = styled('div')<{
display: showAlone ? 'none' : 'block',
width: '24px',
height: '24px',
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
boxShadow:
mode === 'dark'
? '0px 0px 6px rgba(22, 22, 22, 0.6)'
@ -47,7 +47,7 @@ export const StyledSwitchItem = styled('button')<{
width: '24px',
height: '24px',
borderRadius: '8px',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
display: hide ? 'none' : 'inline-flex',
alignItems: 'center',
justifyContent: 'center',

4
apps/web/src/components/blocksuite/workspace-header/header-right-items/EditPage.tsx
View File

@ -28,8 +28,8 @@ const StyledEditPageButton = styled(
{}
)(({ theme }) => {
return {
border: `1px solid ${theme.colors.primaryColor}`,
color: theme.colors.primaryColor,
border: '1px solid var(--affine-primary-color)',
color: 'var(--affine-primary-color)',
width: '100%',
borderRadius: '8px',
whiteSpace: 'nowrap',

4
apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx
View File

@ -9,7 +9,6 @@ import {
PageIcon,
} from '@blocksuite/icons';
import { assertExists } from '@blocksuite/store';
import { useTheme } from '@mui/material';
import {
useBlockSuitePageMeta,
usePageMetaHelper,
@ -30,7 +29,6 @@ import {
export const EditorOptionMenu = () => {
const { t } = useTranslation();
const theme = useTheme();
// fixme(himself65): remove these hooks ASAP
const [workspace] = useCurrentWorkspace();
@ -61,7 +59,7 @@ export const EditorOptionMenu = () => {
}}
icon={
favorite ? (
<FavoritedIcon style={{ color: theme.colors.primaryColor }} />
<FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
) : (
<FavoriteIcon />
)

2
apps/web/src/components/blocksuite/workspace-header/header-right-items/SyncUser.tsx
View File

@ -29,7 +29,7 @@ const IconWrapper = styled('div')(({ theme }) => {
height: '32px',
marginRight: '12px',
fontSize: '24px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
...displayFlex('center', 'center'),
};
});

8
apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts
View File

@ -12,7 +12,7 @@ export const StyledThemeModeSwitch = styled('button')(({ theme }) => {
overflow: 'hidden',
backgroundColor: 'transparent',
position: 'relative',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
fontSize: '24px',
};
});
@ -35,7 +35,7 @@ export const StyledSwitchItem = styled('div')<{
const activeStyle = active
? {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
top: '0',
animation: css`
${keyframes`${
@ -46,8 +46,8 @@ export const StyledSwitchItem = styled('div')<{
}
: {
top: '100%',
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
animation: css`
${keyframes`${
isHover ? raiseAnimate : declineAnimate

22
apps/web/src/components/blocksuite/workspace-header/styles.ts
View File

@ -14,7 +14,7 @@ export const StyledHeaderContainer = styled('div')<{
flexShrink: 0,
position: 'sticky',
top: 0,
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
zIndex: 1,
WebkitAppRegion: sidebarFloating ? '' : 'drag',
button: {
@ -30,7 +30,7 @@ export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
width: '100%',
padding: '0 20px',
...displayFlex('space-between', 'center'),
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
zIndex: 99,
position: 'relative',
};
@ -44,7 +44,7 @@ export const StyledTitleContainer = styled('div')(({ theme }) => ({
margin: 'auto',
...absoluteCenter({ horizontal: true, position: { top: 0 } }),
...displayFlex('center', 'center'),
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
}));
export const StyledTitle = styled('div')(({ theme }) => {
@ -83,10 +83,10 @@ export const StyledHeaderRightSide = styled('div')({
export const StyledBrowserWarning = styled('div')<{ show: boolean }>(
({ theme, show }) => {
return {
backgroundColor: theme.colors.warningBackground,
color: theme.colors.warningColor,
backgroundColor: 'var(--affine-background-warning-color)',
color: 'var(--affine-background-warning-color)',
height: '36px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
display: show ? 'flex' : 'none',
justifyContent: 'center',
alignItems: 'center',
@ -98,7 +98,7 @@ export const StyledCloseButton = styled('div')(({ theme }) => {
return {
width: '36px',
height: '36px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
cursor: 'pointer',
...displayFlex('center', 'center'),
position: 'absolute',
@ -138,8 +138,8 @@ export const StyledSearchArrowWrapper = styled('div')(() => {
export const StyledPageListTittleWrapper = styled(StyledTitle)(({ theme }) => {
return {
fontSize: theme.font.base,
color: theme.colors.textColor,
fontSize: 'var(--affine-font-base)',
color: 'var(--affine-text-primary-color)',
...displayFlex('center', 'center'),
'>svg': {
fontSize: '20px',
@ -154,9 +154,9 @@ export const StyledQuickSearchTipButton = styled('div')(({ theme }) => {
color: '#FFFFFF',
width: '48px',
height: ' 26px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
lineHeight: '22px',
background: theme.colors.primaryColor,
background: 'var(--affine-primary-color)',
borderRadius: '8px',
textAlign: 'center',
cursor: 'pointer',

28
apps/web/src/components/pure/footer/styles.ts
View File

@ -10,7 +10,7 @@ export const StyledSplitLine = styled('div')(({ theme }) => {
return {
width: '1px',
height: '20px',
background: theme.colors.borderColor,
background: 'var(--affine-border-color)',
marginRight: '24px',
};
});
@ -21,7 +21,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
width: '202px',
p: {
height: '20px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
...displayFlex('flex-start', 'center'),
},
svg: {
@ -38,7 +38,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
return {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
fontWeight: 600,
lineHeight: '24px',
marginBottom: '10px',
@ -50,7 +50,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
export const StyledCard = styled('div')<{
active?: boolean;
}>(({ theme, active }) => {
const borderColor = active ? theme.colors.primaryColor : 'transparent';
const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
return {
width: '310px',
height: '124px',
@ -64,10 +64,10 @@ export const StyledCard = styled('div')<{
transition: 'background .2s',
background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
':hover': {
background: theme.colors.cardHoverBackground,
background: 'var(--affine-hover-color)',
'.add-icon': {
borderColor: theme.colors.primaryColor,
color: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
color: 'var(--affine-primary-color)',
},
},
};
@ -87,10 +87,10 @@ export const StyleUserInfo = styled('div')(({ theme }) => {
flex: 1,
p: {
lineHeight: '24px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
'p:first-of-type': {
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
fontWeight: 600,
},
};
@ -102,16 +102,16 @@ export const StyledModalHeaderLeft = styled('div')(() => {
export const StyledModalTitle = styled('div')(({ theme }) => {
return {
fontWeight: 600,
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
};
});
export const StyledHelperContainer = styled('div')(({ theme }) => {
return {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
marginLeft: '15px',
fontWeight: 400,
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
...displayFlex('center', 'center'),
};
});
@ -162,8 +162,8 @@ export const StyledSignInButton = styled(Button)(({ theme }) => {
width: '40px',
height: '40px',
borderRadius: '20px',
backgroundColor: theme.colors.hoverBackground,
color: theme.colors.primaryColor,
backgroundColor: 'var(--affine-hover-color)',
color: 'var(--affine-primary-color)',
fontSize: '24px',
flexShrink: 0,
marginRight: '16px',

18
apps/web/src/components/pure/help-island/style.ts
View File

@ -12,7 +12,7 @@ export const StyledIsland = styled('div')<{
: 'unset',
padding: '0 4px 44px',
borderRadius: '10px',
backgroundColor: theme.colors.pageBackground,
backgroundColor: 'var(--affine-background-primary-color)',
':hover': {
boxShadow:
'4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)',
@ -21,7 +21,7 @@ export const StyledIsland = styled('div')<{
content: '""',
width: '36px',
height: '1px',
background: spread ? theme.colors.borderColor : 'transparent',
background: spread ? 'var(--affine-border-color)' : 'transparent',
...positionAbsolute({
left: 0,
right: 0,
@ -34,11 +34,11 @@ export const StyledIsland = styled('div')<{
});
export const StyledIconWrapper = styled('div')(({ theme }) => {
return {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
...displayFlex('center', 'center'),
cursor: 'pointer',
fontSize: '24px',
backgroundColor: theme.colors.pageBackground,
backgroundColor: 'var(--affine-background-primary-color)',
borderRadius: '5px',
width: '36px',
height: '36px',
@ -46,8 +46,8 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
transition: 'background-color 0.2s',
position: 'relative',
':hover': {
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
},
};
});
@ -62,14 +62,14 @@ export const StyledTriggerWrapper = styled('div')(({ theme }) => {
width: '36px',
height: '36px',
cursor: 'pointer',
backgroundColor: theme.colors.pageBackground,
color: theme.colors.iconColor,
backgroundColor: 'var(--affine-background-primary-color)',
color: 'var(--affine-icon-color)',
borderRadius: '5px',
fontSize: '24px',
...displayFlex('center', 'center'),
...positionAbsolute({ left: '4px', bottom: '4px' }),
':hover': {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
};
});

2
apps/web/src/components/pure/quick-search-button/index.tsx
View File

@ -13,7 +13,7 @@ const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
transform: 'translateY(3px)',
},
'::after': {
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
},
},
};

18
apps/web/src/components/pure/quick-search-modal/navigation-path/styles.ts
View File

@ -4,10 +4,10 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
return {
height: '46px',
...displayFlex('flex-start', 'center'),
background: theme.colors.hubBackground,
background: 'var(--affine-background-secondary-color)',
padding: '0 40px 0 20px',
position: 'relative',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
zIndex: 2,
'.collapse-btn': {
position: 'absolute',
@ -18,7 +18,7 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
},
'.path-arrow': {
fontSize: '16px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
};
});
@ -26,7 +26,9 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
export const StyledNavPathLink = styled('div')<{ active?: boolean }>(
({ theme, active }) => {
return {
color: active ? theme.colors.textColor : theme.colors.secondaryTextColor,
color: active
? 'var(--affine-text-primary-color)'
: 'var(--affine-text-secondary-color)',
cursor: active ? 'auto' : 'pointer',
maxWidth: '160px',
...textEllipsis(1),
@ -35,7 +37,7 @@ export const StyledNavPathLink = styled('div')<{ active?: boolean }>(
':hover': active
? {}
: {
background: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
borderRadius: '4px',
},
};
@ -51,10 +53,10 @@ export const StyledNavPathExtendContainer = styled('div')<{ show: boolean }>(
zIndex: '1',
height: '100%',
width: '100%',
background: theme.colors.hubBackground,
background: 'var(--affine-background-secondary-color)',
transition: 'top .15s',
fontSize: theme.font.sm,
color: theme.colors.secondaryTextColor,
fontSize: 'var(--affine-font-sm)',
color: 'var(--affine-text-secondary-color)',
padding: '46px 12px 0 15px',
};
}

38
apps/web/src/components/pure/quick-search-modal/style.ts
View File

@ -9,7 +9,7 @@ export const StyledContent = styled('div')(({ theme }) => {
marginBottom: '10px',
...displayFlex('flex-start', 'flex-start'),
flexDirection: 'column',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
transition: 'all 0.15s',
letterSpacing: '0.06em',
'[cmdk-group]': {
@ -20,8 +20,8 @@ export const StyledContent = styled('div')(({ theme }) => {
margin: '0 16px',
height: '36px',
lineHeight: '22px',
fontSize: theme.font.sm,
color: theme.colors.secondaryTextColor,
fontSize: 'var(--affine-font-sm)',
color: 'var(--affine-text-secondary-color)',
},
'[cmdk-item]': {
margin: '0 4px',
@ -29,8 +29,8 @@ export const StyledContent = styled('div')(({ theme }) => {
'[aria-selected="true"]': {
transition: 'all 0.15s',
borderRadius: '4px',
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
padding: '0 2px',
},
};
@ -40,7 +40,7 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
...displayFlex('center', 'start'),
flexDirection: 'column',
padding: '10px 10px 10px 0',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
strong: {
fontWeight: '500',
marginBottom: '10px',
@ -53,9 +53,9 @@ export const StyledNotFound = styled('div')(({ theme }) => {
...displayFlex('center', 'center'),
flexDirection: 'column',
padding: '0 16px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
lineHeight: '22px',
color: theme.colors.secondaryTextColor,
color: 'var(--affine-text-secondary-color)',
span: {
...displayFlex('flex-start', 'center'),
width: '100%',
@ -75,20 +75,20 @@ export const StyledInputContent = styled('div')(({ theme }) => {
width: '492px',
height: '22px',
padding: '0 12px',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
...displayFlex('space-between', 'center'),
letterSpacing: '0.06em',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
'::placeholder': {
color: theme.colors.placeHolderColor,
color: 'var(--affine-placeholder-color)',
},
},
};
});
export const StyledShortcut = styled('div')(({ theme }) => {
return {
color: theme.colors.placeHolderColor,
fontSize: theme.font.sm,
color: 'var(--affine-placeholder-color)',
fontSize: 'var(--affine-font-sm)',
whiteSpace: 'nowrap',
};
});
@ -97,7 +97,7 @@ export const StyledLabel = styled('label')(({ theme }) => {
return {
width: '20px',
height: '20px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
fontSize: '20px',
};
});
@ -114,7 +114,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
width: 'auto',
height: '0',
margin: '6px 16px',
borderTop: `0.5px solid ${theme.colors.borderColor}`,
borderTop: '0.5px solid var(--affine-border-color)',
};
});
@ -124,7 +124,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
lineHeight: '22px',
marginBottom: '8px',
textAlign: 'center',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
...displayFlex('center', 'center'),
transition: 'all .15s',
'[cmdk-item]': {
@ -133,8 +133,8 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
'[aria-selected="true"]': {
transition: 'all 0.15s',
borderRadius: '4px',
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
'span,svg': {
transition: 'all 0.15s',
transform: 'scale(1.02)',
@ -146,7 +146,7 @@ export const StyledModalFooterContent = styled('button')(({ theme }) => {
return {
width: '600px',
height: '32px',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
lineHeight: '22px',
textAlign: 'center',
...displayFlex('center', 'center'),

18
apps/web/src/components/pure/shortcuts-modal/style.ts
View File

@ -4,9 +4,9 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
width: '288px',
height: '74vh',
paddingBottom: '28px',
backgroundColor: theme.colors.popoverBackground,
boxShadow: theme.shadow.popover,
borderRadius: `${theme.radius.popover} 0 ${theme.radius.popover} ${theme.radius.popover}`,
backgroundColor: 'var(--affine-white)',
boxShadow: 'var(--affine-text-popover-shadow)',
borderRadius: `var(--affine-popover-radius) 0 var(--affine-popover-radius) var(--affine-popover-radius)`,
overflow: 'auto',
boxRadius: '10px',
position: 'fixed',
@ -14,23 +14,23 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
top: '0',
bottom: '0',
margin: 'auto',
zIndex: theme.zIndex.modal,
zIndex: 'var(--affine-z-index-modal)',
}));
export const StyledTitle = styled('div')(({ theme }) => ({
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
fontWeight: '500',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
height: '44px',
...displayFlex('center', 'center'),
svg: {
width: '20px',
marginRight: '14px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
}));
export const StyledSubTitle = styled('div')(({ theme }) => ({
fontWeight: '500',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
height: '34px',
lineHeight: '36px',
marginTop: '28px',
@ -52,6 +52,6 @@ export const StyledModalHeader = styled('div')(() => ({
export const StyledListItem = styled('div')(({ theme }) => ({
height: '34px',
...displayFlex('space-between', 'center'),
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
padding: '0 16px',
}));

2
apps/web/src/components/pure/workspace-list-modal/language-menu.tsx
View File

@ -58,7 +58,7 @@ export const LanguageMenu: React.FC = () => {
const ListItem = styled(MenuItem)(({ theme }) => ({
height: '38px',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
textTransform: 'capitalize',
padding: '0 24px',
}));

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

@ -4,7 +4,7 @@ export const StyledSplitLine = styled('div')(({ theme }) => {
return {
width: '1px',
height: '20px',
background: theme.colors.borderColor,
background: 'var(--affine-border-color)',
marginRight: '12px',
};
});
@ -15,7 +15,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
width: '202px',
p: {
height: '20px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
...displayFlex('flex-start', 'center'),
},
svg: {
@ -32,7 +32,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
return {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
fontWeight: 600,
lineHeight: '24px',
marginBottom: '10px',
@ -44,7 +44,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
export const StyledCard = styled('div')<{
active?: boolean;
}>(({ theme, active }) => {
const borderColor = active ? theme.colors.primaryColor : 'transparent';
const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
return {
width: '310px',
height: '124px',
@ -58,7 +58,7 @@ export const StyledCard = styled('div')<{
transition: 'background .2s',
background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
':hover': {
background: theme.colors.cardHoverBackground,
background: 'var(--affine-hover-color)',
},
};
});
@ -73,14 +73,14 @@ export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
borderRadius: '12px',
transition: 'all .1s',
...displayFlex('flex-start', 'flex-start'),
color: theme.colors.secondaryTextColor,
color: 'var(--affine-text-secondary-color)',
':hover': {
background: theme.colors.cardHoverBackground,
color: theme.colors.textColor,
background: 'var(--affine-hover-color)',
color: 'var(--affine-text-primary-color)',
'.add-icon': {
borderColor: theme.colors.primaryColor,
color: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
color: 'var(--affine-primary-color)',
},
},
};
@ -92,16 +92,16 @@ export const StyledModalHeaderLeft = styled('div')(() => {
export const StyledModalTitle = styled('div')(({ theme }) => {
return {
fontWeight: 600,
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
};
});
export const StyledHelperContainer = styled('div')(({ theme }) => {
return {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
marginLeft: '15px',
fontWeight: 400,
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
...displayFlex('center', 'center'),
};
});

12
apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
View File

@ -8,10 +8,10 @@ export const StyledSelectorContainer = styled('div')(({ theme }) => {
padding: '0 6px',
marginBottom: '16px',
borderRadius: '8px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
':hover': {
cursor: 'pointer',
background: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
},
};
});
@ -36,12 +36,12 @@ export const StyledWorkspaceStatus = styled('div')(({ theme }) => {
return {
height: '22px',
...displayFlex('flex-start', 'center'),
fontSize: theme.font.sm,
color: theme.colors.secondaryTextColor,
fontSize: 'var(--affine-font-sm)',
color: 'var(--affine-text-secondary-color)',
userSelect: 'none',
svg: {
color: theme.colors.iconColor,
fontSize: theme.font.base,
color: 'var(--affine-icon-color)',
fontSize: 'var(--affine-font-base)',
marginRight: '4px',
},
};

36
apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
View File

@ -12,7 +12,9 @@ export const StyledListItem = styled('div')<{
}>(({ theme, active, disabled }) => {
return {
height: '32px',
color: active ? theme.colors.primaryColor : theme.colors.textColor,
color: active
? 'var(--affine-primary-color)'
: 'var(--affine-text-primary-color)',
padding: '0 16px',
borderRadius: '8px',
cursor: 'pointer',
@ -24,17 +26,19 @@ export const StyledListItem = styled('div')<{
...(disabled
? {
cursor: 'not-allowed',
color: theme.colors.borderColor,
color: 'var(--affine-border-color)',
}
: {}),
'> svg, a > svg': {
fontSize: '20px',
marginRight: '12px',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
color: active
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
},
':hover:not([disabled])': {
backgroundColor: theme.colors.hoverBackground,
backgroundColor: 'var(--affine-hover-color)',
},
};
});
@ -53,7 +57,7 @@ export const StyledCollapseButton = styled('button')<{
top: '0',
bottom: '0',
margin: 'auto',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
opacity: '.6',
transition: 'opacity .15s ease-in-out',
display: show ? 'flex' : 'none',
@ -81,12 +85,12 @@ export const StyledCollapseItem = styled('div')<{
paddingRight: '2px',
position: 'relative',
color: disable
? theme.colors.disableColor
? 'var(--affine-text-disable-color)'
: active
? theme.colors.primaryColor
: theme.colors.textColor,
? 'var(--affine-primary-color)'
: 'var(--affine-text-primary-color)',
cursor: disable ? 'not-allowed' : 'pointer',
background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
background: isOver ? alpha('var(--affine-primary-color)', 0.06) : '',
userSelect: 'none',
...(textWrap
? {
@ -103,13 +107,15 @@ export const StyledCollapseItem = styled('div')<{
fontSize: '20px',
marginRight: '8px',
flexShrink: '0',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
color: active
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
},
':hover': disable
? {}
: {
backgroundColor: theme.colors.hoverBackground,
backgroundColor: 'var(--affine-hover-color)',
'.operation-button': {
visibility: 'visible',
},
@ -173,9 +179,9 @@ export const StyledChangeLog = styled('div')<{
width: '110%',
height: '32px',
...displayFlex('flex-start', 'center'),
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
border: `1px solid ${theme.colors.primaryColor}`,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
border: '1px solid var(--affine-primary-color)',
borderRight: 'none',
marginLeft: '8px',
paddingLeft: '8px',
@ -191,7 +197,7 @@ export const StyledChangeLog = styled('div')<{
'> svg, a > svg': {
fontSize: '20px',
marginRight: '12px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
button: {
marginRight: '12%',

24
apps/web/src/components/pure/workspace-slider-bar/style.ts
View File

@ -1,4 +1,4 @@
import { displayFlex, styled } from '@affine/component';
import { baseTheme, displayFlex, styled } from '@affine/component';
import Link from 'next/link';
const macosElectron = environment.isDesktop && environment.isMacOs;
@ -14,14 +14,16 @@ export const StyledSliderBarWrapper = styled('div')<{
'button, a': {
userSelect: 'none',
},
zIndex: theme.zIndex.modal,
zIndex: 'var(--affine-z-index-modal)',
transition: resizing ? '' : 'transform .3s, width .3s, max-width .3s',
transform: show ? 'translateX(0)' : 'translateX(-100%)',
maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
background:
!floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
!floating && macosElectron
? 'transparent'
: 'var(--affine-background-secondary-color)',
borderRight: macosElectron ? '' : '1px solid',
borderColor: theme.colors.borderColor,
borderColor: 'var(--affine-border-color)',
};
});
@ -82,17 +84,17 @@ export const StyledNewPageButton = styled('button')(({ theme }) => {
height: '52px',
...displayFlex('flex-start', 'center'),
borderTop: '1px solid',
borderColor: theme.colors.borderColor,
borderColor: 'var(--affine-border-color)',
padding: '0 8px 0 16px',
svg: {
fontSize: '20px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
marginRight: '8px',
},
':hover': {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
svg: {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
},
};
@ -108,8 +110,8 @@ export const StyledSliderModalBackground = styled('div')<{ active: boolean }>(
left: 0,
right: active ? 0 : '100%',
bottom: 0,
zIndex: theme.zIndex.modal - 1,
background: theme.colors.modalBackground,
zIndex: parseInt(baseTheme.zIndexModal) - 1,
background: 'var(--affine-background-modal-color)',
};
}
);
@ -121,6 +123,6 @@ export const StyledScrollWrapper = styled('div')<{
maxHeight: '50%',
overflowY: 'auto',
borderTop: '1px solid',
borderColor: showTopBorder ? theme.colors.borderColor : 'transparent',
borderColor: showTopBorder ? 'var(--affine-border-color)' : 'transparent',
};
});

6
apps/web/src/layouts/styles.ts
View File

@ -57,7 +57,7 @@ export const MainContainer = styled('div')(({ theme }) => {
position: 'relative',
flexGrow: 1,
maxWidth: '100%',
backgroundColor: theme.colors.pageBackground,
backgroundColor: 'var(--affine-background-primary-color)',
[theme.breakpoints.up('md')]: {
minWidth: '686px',
},
@ -72,7 +72,7 @@ export const StyledToolWrapper = styled('div')(({ theme }) => {
position: 'fixed',
right: '30px',
bottom: '30px',
zIndex: theme.zIndex.popover,
zIndex: 'var(--affine-z-index-popover)',
[theme.breakpoints.down('md')]: {
right: 'calc((100vw - 640px) * 3 / 19 + 5px)',
},
@ -93,7 +93,7 @@ export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>(
width: '12px',
transform: 'translateX(50%)',
cursor: 'col-resize',
zIndex: theme.zIndex.modal,
zIndex: 'var(--affine-z-index-modal)',
userSelect: 'none',
':hover > *': {
background: 'rgba(0, 0, 0, 0.1)',

4
apps/web/src/pages/invite/[invite_code].tsx
View File

@ -94,7 +94,7 @@ const StyledContainer = styled('div')(({ theme }) => {
height: '100vh',
...displayFlex('center', 'center'),
flexDirection: 'column',
backgroundColor: theme.colors.pageBackground,
backgroundColor: 'var(--affine-background-primary-color)',
img: {
width: '300px',
height: '300px',
@ -103,7 +103,7 @@ const StyledContainer = styled('div')(({ theme }) => {
...displayFlex('center', 'center'),
marginTop: '24px',
svg: {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
fontSize: '24px',
marginRight: '12px',
},

10
apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
View File

@ -32,7 +32,7 @@ export const NavContainer = styled('div')(({ theme }) => {
width: '100vw',
height: '52px',
...displayFlex('space-between', 'center'),
backgroundColor: theme.colors.pageBackground,
backgroundColor: 'var(--affine-background-primary-color)',
};
});
@ -43,13 +43,13 @@ export const StyledBreadcrumbs = styled(Link)(({ theme }) => {
paddingLeft: '12px',
span: {
padding: '0 12px',
fontSize: theme.font.base,
lineHeight: theme.font.lineHeight,
fontSize: 'var(--affine-font-base)',
lineHeight: 'var(--affine-line-height)',
},
':hover': { color: theme.colors.primaryColor },
':hover': { color: 'var(--affine-primary-color)' },
transition: 'all .15s',
':visited': {
':hover': { color: theme.colors.primaryColor },
':hover': { color: 'var(--affine-primary-color)' },
},
};
});

66
apps/web/src/providers/ThemeProvider.tsx
View File

@ -1,17 +1,9 @@
import type {
AffineNextCssVariables,
AffineNextLightColorScheme,
AffineCssVariables,
AffineTheme,
ThemeProviderProps,
} from '@affine/component';
import {
getDarkTheme,
getLightTheme,
globalThemeVariables,
nextDarkColorScheme,
nextLightColorScheme,
ThemeProvider as AffineThemeProvider,
} from '@affine/component';
import { AffineMuiThemeProvider, getTheme, muiThemes } from '@affine/component';
import { GlobalStyles } from '@mui/material';
import kebabCase from 'kebab-case';
import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
@ -21,17 +13,9 @@ import { memo, useEffect, useMemo, useState } from 'react';
import { useCurrentMode } from '../hooks/current/use-current-mode';
const ThemeInjector = memo<{
themeStyle: AffineTheme;
nextThemeStyle: AffineNextLightColorScheme;
}>(function ThemeInjector({ themeStyle, nextThemeStyle }) {
const injectAffineNextTheme = useMemo(() => {
return Object.entries(nextThemeStyle).reduce((variables, [key, value]) => {
variables[`--affine-${kebabCase(key)}` as keyof AffineNextCssVariables] =
value;
return variables;
}, {} as AffineNextCssVariables);
}, [nextThemeStyle]);
const CssVariablesInjector = memo<{
theme: AffineTheme;
}>(function ThemeInjector({ theme }) {
return (
<GlobalStyles
styles={{
@ -39,13 +23,17 @@ const ThemeInjector = memo<{
// ...globalThemeVariables(themeStyle),
// },
':root': {
...globalThemeVariables(themeStyle),
...injectAffineNextTheme,
...Object.entries(theme).reduce((variables, [key, value]) => {
variables[
`--affine-${kebabCase(key)}` as keyof AffineCssVariables
] = value;
return variables;
}, {} as AffineCssVariables),
},
html: {
fontFamily: themeStyle.font.family,
fontSize: themeStyle.font.base,
lineHeight: themeStyle.font.lineHeight,
fontFamily: theme.fontFamily,
fontSize: theme.fontBase,
lineHeight: theme.lineHeight,
},
}}
/>
@ -56,29 +44,23 @@ const ThemeProviderInner = memo<React.PropsWithChildren>(
function ThemeProviderInner({ children }) {
const { resolvedTheme: theme } = useTheme();
const editorMode = useCurrentMode();
const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]);
const darkThemeStyle = useMemo(
() => getDarkTheme(editorMode),
[editorMode]
);
// SSR will always render the light theme, so we need to defer the theme if user selected dark mode
const [deferTheme, setDeferTheme] = useState('light');
const [deferTheme, setDeferTheme] = useState<'light' | 'dark'>('light');
const themeStyle = useMemo(
() => getTheme(deferTheme, editorMode),
[deferTheme, editorMode]
);
useEffect(() => {
window.apis?.onThemeChange(theme === 'dark' ? 'dark' : 'light');
setDeferTheme(theme === 'dark' ? 'dark' : 'light');
}, [theme]);
return (
<AffineThemeProvider
theme={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
>
<ThemeInjector
themeStyle={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
nextThemeStyle={
deferTheme === 'dark' ? nextDarkColorScheme : nextLightColorScheme
}
/>
<AffineMuiThemeProvider theme={muiThemes}>
<CssVariablesInjector theme={themeStyle} />
{children}
</AffineThemeProvider>
</AffineMuiThemeProvider>
);
}
);

40
packages/component/.storybook/preview.tsx
View File

@ -1,9 +1,16 @@
import React from 'react';
import React, { useMemo } from 'react';
import '@blocksuite/editor/themes/affine.css';
import '../src/theme/global.css';
import { getDarkTheme, getLightTheme, ThemeProvider } from '@affine/component';
import {
AffineCssVariables,
AffineMuiThemeProvider,
getTheme,
muiThemes,
} from '@affine/component';
import { useDarkMode } from 'storybook-dark-mode';
import { GlobalStyles } from '@mui/material';
import kebabCase from 'kebab-case';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
@ -14,16 +21,35 @@ export const parameters = {
},
};
const lightTheme = getLightTheme('page');
const darkTheme = getDarkTheme('page');
export const decorators = [
(Story: React.ComponentType) => {
const isDark = useDarkMode();
const theme = useMemo(
() => getTheme(isDark ? 'dark' : 'light', 'page'),
[isDark]
);
return (
<ThemeProvider theme={isDark ? darkTheme : lightTheme}>
<AffineMuiThemeProvider theme={muiThemes}>
<GlobalStyles
styles={{
':root': {
...Object.entries(theme).reduce((variables, [key, value]) => {
variables[
`--affine-${kebabCase(key)}` as keyof AffineCssVariables
] = value;
return variables;
}, {} as AffineCssVariables),
},
html: {
fontFamily: theme.fontFamily,
fontSize: theme.fontBase,
lineHeight: theme.lineHeight,
},
}}
/>
<Story />
</ThemeProvider>
</AffineMuiThemeProvider>
);
},
];

30
packages/component/src/components/contact-modal/style.ts
View File

@ -7,7 +7,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
paddingLeft: '96px',
fontSize: '24px',
lineHeight: '36px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
borderRadius: '10px',
flexDirection: 'column',
...displayFlex('center'),
@ -16,7 +16,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
letterSpacing: '1px',
':visited': {
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
},
':hover': {
background: 'rgba(68, 97, 242, 0.1)',
@ -28,7 +28,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
width: '48px',
height: '48px',
marginRight: '24px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
...absoluteCenter({ vertical: true, position: { left: '26px' } }),
},
p: {
@ -44,7 +44,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
},
':last-of-type': {
fontSize: '16px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
fontWeight: '500',
},
svg: {
@ -64,21 +64,21 @@ export const StyledSmallLink = styled('a')(({ theme }) => {
fontSize: '16px',
fontWeight: '500',
borderRadius: '5px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
transition: 'background .15s, color .15s',
...displayFlex('center', 'center'),
flexWrap: 'wrap',
':visited': {
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
},
':hover': {
color: theme.colors.primaryColor,
background: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
background: 'var(--affine-hover-color)',
},
svg: {
width: '22px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
p: {
width: '100%',
@ -90,7 +90,7 @@ export const StyledSubTitle = styled('div')(({ theme }) => {
return {
fontSize: '18px',
fontWeight: '600',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
marginTop: '52px',
marginBottom: '8px',
textAlign: 'center',
@ -116,7 +116,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
fontSize: '14px',
lineHeight: '20px',
textAlign: 'center',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
marginTop: '40px',
};
});
@ -128,16 +128,16 @@ export const StyledPrivacyContainer = styled('div')(({ theme }) => {
a: {
height: '16px',
lineHeight: '16px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
padding: '0 8px',
':visited': {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
':first-of-type': {
borderRight: `1px solid ${theme.colors.borderColor}`,
borderRight: '1px solid var(--affine-border-color)',
},
':hover': {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
},
};

8
packages/component/src/components/share-menu/disable-public-link/style.ts
View File

@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
position: 'relative',
padding: '0px',
width: '560px',
background: theme.colors.popoverBackground,
background: 'var(--affine-white)',
borderRadius: '12px',
// height: '312px',
};
@ -16,7 +16,7 @@ export const StyledModalHeader = styled('div')(({ theme }) => {
margin: '44px 0px 12px 0px',
width: '560px',
fontWeight: '600',
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
textAlign: 'center',
};
});
@ -27,7 +27,7 @@ export const StyledTextContent = styled('div')(({ theme }) => {
width: '560px',
padding: '0px 84px',
fontWeight: '400',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
textAlign: 'center',
};
});
@ -42,7 +42,7 @@ export const StyledButtonContent = styled('div')(() => {
});
export const StyledButton = styled(TextButton)(({ theme }) => {
return {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
height: '32px',
background: '#F3F0FF',
border: 'none',

36
packages/component/src/components/share-menu/styles.ts
View File

@ -8,12 +8,14 @@ export const StyledShareButton = styled(TextButton, {
marginLeft: '4px',
marginRight: '16px',
border: `1px solid ${
isShared ? theme.colors.primaryColor : theme.colors.iconColor
isShared ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)'
}`,
color: isShared ? theme.colors.primaryColor : theme.colors.iconColor,
color: isShared
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
borderRadius: '8px',
':hover': {
border: `1px solid ${theme.colors.primaryColor}`,
border: `1px solid ${'var(--affine-primary-color)'}`,
},
span: {
...displayFlex('center', 'center'),
@ -35,11 +37,11 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
...displayFlex('center', 'center'),
flex: '1',
height: '30px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
opacity: isActive ? 1 : 0.2,
fontWeight: '500',
fontSize: theme.font.base,
lineHeight: theme.font.lineHeight,
fontSize: 'var(--affine-font-base)',
lineHeight: 'var(--affine-line-height)',
cursor: 'pointer',
transition: 'all 0.15s ease',
padding: '0 10px',
@ -47,15 +49,15 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
borderRadius: '4px',
position: 'relative',
':hover': {
background: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
opacity: 1,
color: isActive
? theme.colors.textColor
: theme.colors.secondaryTextColor,
? 'var(--affine-text-primary-color)'
: 'var(--affine-text-secondary-color)',
svg: {
fill: isActive
? theme.colors.textColor
: theme.colors.secondaryTextColor,
? 'var(--affine-text-primary-color)'
: 'var(--affine-text-secondary-color)',
},
},
svg: {
@ -69,7 +71,7 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
left: '0',
width: '100%',
height: '2px',
background: theme.colors.textColor,
background: 'var(--affine-text-primary-color)',
opacity: 0.2,
},
};
@ -79,7 +81,7 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
export const StyledIndicator = styled('div')(({ theme }) => {
return {
height: '2px',
background: theme.colors.textColor,
background: 'var(--affine-text-primary-color)',
position: 'absolute',
left: '0',
transition: 'left .3s, width .3s',
@ -89,8 +91,8 @@ export const StyledInput = styled('input')(({ theme }) => {
return {
padding: '4px 8px',
height: '28px',
color: theme.colors.placeHolderColor,
border: `1px solid ${theme.colors.placeHolderColor}`,
color: 'var(--affine-placeholder-color)',
border: `1px solid ${'var(--affine-placeholder-color)'}`,
cursor: 'default',
overflow: 'hidden',
userSelect: 'text',
@ -101,7 +103,7 @@ export const StyledInput = styled('input')(({ theme }) => {
});
export const StyledButton = styled(TextButton)(({ theme }) => {
return {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
height: '32px',
background: '#F3F0FF',
border: 'none',
@ -122,7 +124,7 @@ export const StyledDisableButton = styled(Button)(() => {
export const StyledLinkSpan = styled('span')(({ theme }) => {
return {
marginLeft: '4px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
fontWeight: '500',
cursor: 'pointer',
};

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

@ -7,7 +7,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
width: '202px',
p: {
height: '20px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
...displayFlex('flex-start', 'center'),
},
svg: {
@ -24,7 +24,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
return {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
fontWeight: 600,
lineHeight: '24px',
marginBottom: '10px',
@ -36,7 +36,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
export const StyledCard = styled('div')<{
active?: boolean;
}>(({ theme, active }) => {
const borderColor = active ? theme.colors.primaryColor : 'transparent';
const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
return {
width: '310px',
height: '124px',
@ -51,10 +51,10 @@ export const StyledCard = styled('div')<{
background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
position: 'relative',
':hover': {
background: theme.colors.cardHoverBackground,
background: 'var(--affine-hover-color)',
'.add-icon': {
borderColor: theme.colors.primaryColor,
color: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
color: 'var(--affine-primary-color)',
},
'.setting-entry': {
opacity: 1,
@ -84,11 +84,11 @@ export const StyledSettingLink = styled(IconButton)(({ theme }) => {
bottom: '6px',
opacity: 0,
borderRadius: '4px',
color: theme.colors.primaryColor,
color: 'var(--affine-background-primary-color)',
pointerEvents: 'none',
transition: 'all .15s',
':hover': {
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
},
};
});

152
packages/component/src/index.ts
View File

@ -17,155 +17,3 @@ export * from './ui/table';
export * from './ui/toast';
export * from './ui/tooltip';
export * from './ui/tree-view';
declare module '@mui/material/styles' {
interface Theme {
colors: {
primaryColor: string;
pageBackground: string;
popoverBackground: string;
tooltipBackground: string;
hoverBackground: string;
innerHoverBackground: string;
modalBackground: string;
// Use for the quick search tips background
backgroundTertiaryColor: string;
codeBackground: string;
codeBlockBackground: string;
// Use for blockHub and slide bar background
hubBackground: string;
cardHoverBackground: string;
warningBackground: string;
errorBackground: string;
// Use for the page`s text
textColor: string;
secondaryTextColor: string;
textEmphasisColor: string;
// Use for the editor`s text, because in edgeless mode text is different form other
edgelessTextColor: string;
linkColor: string;
// In dark mode, normal text`s (not bold) color
linkColor2: string;
linkVisitedColor: string;
iconColor: string;
handleColor: string;
tooltipColor: string;
codeColor: string;
quoteColor: string;
placeHolderColor: string;
selectedColor: string;
borderColor: string;
disableColor: string;
warningColor: string;
errorColor: string;
lineNumberColor: string;
};
font: {
title: string;
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
h6: string;
base: string;
sm: string; // small
xs: string; // tiny
family: string;
numberFamily: string;
codeFamily: string;
lineHeight: string | number;
};
zIndex: {
modal: number;
popover: number;
};
shadow: {
modal: string;
popover: string;
tooltip: string;
};
space: {
paragraph: string;
};
radius: {
popover: string;
};
}
interface ThemeOptions {
colors: {
primaryColor: string;
pageBackground: string;
popoverBackground: string;
tooltipBackground: string;
hoverBackground: string;
innerHoverBackground: string;
modalBackground: string;
// Use for the quick search tips background
backgroundTertiaryColor: string;
codeBackground: string;
codeBlockBackground: string;
// Use for blockHub and slide bar background
hubBackground: string;
cardHoverBackground: string;
warningBackground: string;
errorBackground: string;
// Use for the page`s text
textColor: string;
secondaryTextColor: string;
textEmphasisColor: string;
// Use for the editor`s text, because in edgeless mode text is different form other
edgelessTextColor: string;
linkColor: string;
// In dark mode, normal text`s (not bold) color
linkColor2: string;
linkVisitedColor: string;
iconColor: string;
handleColor: string;
tooltipColor: string;
codeColor: string;
quoteColor: string;
placeHolderColor: string;
selectedColor: string;
borderColor: string;
disableColor: string;
warningColor: string;
errorColor: string;
lineNumberColor: string;
};
font: {
title: string;
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
h6: string;
base: string;
sm: string; // small
xs: string; // tiny
family: string;
numberFamily: string;
codeFamily: string;
lineHeight: string | number;
};
shadow: {
modal: string;
popover: string;
tooltip: string;
};
space: {
paragraph: string;
};
radius: {
popover: string;
};
}
}

7
packages/component/src/styles/styled.tsx → packages/component/src/styles/MuiThemeProvider.tsx
View File

@ -5,20 +5,19 @@ import {
css,
keyframes,
styled,
type ThemeOptions,
ThemeProvider as MuiThemeProvider,
} from '@mui/material/styles';
import type { PropsWithChildren } from 'react';
import { useMemo } from 'react';
import type { AffineTheme } from './types';
export { alpha, css, keyframes, styled };
export const ThemeProvider = ({
export const AffineMuiThemeProvider = ({
theme,
children,
}: PropsWithChildren<{
theme: AffineTheme;
theme: ThemeOptions;
}>) => {
const muiTheme = useMemo(() => createMuiTheme(theme), [theme]);
return (

153
packages/component/src/styles/color-scheme.ts
View File

@ -1,153 +0,0 @@
type Kebab<
T extends string,
A extends string = ''
> = T extends `${infer F}${infer R}`
? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
: A;
export type AffineNextLightColorScheme = typeof nextLightColorScheme;
export type AffineNextCssVariables = {
[Key in `--affine-${Kebab<keyof AffineNextLightColorScheme>}`]: string;
};
// Refs: https://github.com/toeverything/AFFiNE/issues/1796
export const nextLightColorScheme = {
brandColor: 'rgb(84, 56, 255)',
tertiaryColor: 'rgb(243, 240, 255)',
primaryColor: 'rgb(84, 56, 255)',
secondaryColor: 'rgb(125, 145, 255)',
backgroundSuccessColor: 'rgb(255, 255, 255)',
backgroundErrorColor: 'rgba(255, 255, 255, 0.2)',
backgroundProcessingColor: 'rgb(255, 255, 255)',
backgroundWarningColor: 'rgb(255, 255, 255)',
backgroundPrimaryColor: 'rgb(255, 255, 255)',
backgroundOverlayPanelColor: 'rgb(251, 251, 252)',
backgroundSecondaryColor: 'rgb(251, 250, 252)',
backgroundTertiaryColor: 'rgb(233, 233, 236)',
backgroundCodeBlock: 'rgb(250, 251, 253)',
backgroundModalColor: 'rgba(0, 0, 0, 0.6)',
textPrimaryColor: 'rgb(66, 65, 73)',
textSecondaryColor: 'rgb(142, 141, 145)',
textDisableColor: 'rgb(169, 169, 173)',
textEmphasisColor: 'rgb(84, 56, 255)',
hoverColor: 'rgba(0, 0, 0, 0.04)',
linkColor: 'rgb(125, 145, 255)',
quoteColor: 'rgb(100, 95, 130)',
iconColor: 'rgb(119, 117, 125)',
iconSecondary: 'rgba(119, 117, 125, 0.6)',
borderColor: 'rgb(227, 226, 228)',
dividerColor: 'rgb(227, 226, 228)',
placeholderColor: 'rgb(192, 191, 193)',
edgelessGridColor: 'rgb(230, 230, 230)',
successColor: 'rgb(16, 203, 134)',
warningColor: 'rgb(255, 99, 31)',
errorColor: 'rgb(235, 67, 53)',
processingColor: 'rgb(39, 118, 255)',
black10: 'rgba(0, 0, 0, 0.1)',
black30: 'rgba(0, 0, 0, 0.3)',
black50: 'rgba(0, 0, 0, 0.5)',
black60: 'rgba(0, 0, 0, 0.6)',
black80: 'rgba(0, 0, 0, 0.8)',
black90: 'rgba(0, 0, 0, 0.9)',
black: 'rgb(0, 0, 0)',
white10: 'rgba(255, 255, 255, 0.1)',
white30: 'rgba(255, 255, 255, 0.3)',
white50: 'rgba(255, 255, 255, 0.5)',
white60: 'rgba(255, 255, 255, 0.6)',
white80: 'rgba(255, 255, 255, 0.8)',
white90: 'rgba(255, 255, 255, 0.9)',
white: 'rgb(255, 255, 255)',
tagWhite: 'rgb(245, 245, 245)',
tagGray: 'rgb(227, 226, 224)',
tagRed: 'rgb(255, 225, 225)',
tagOrange: 'rgb(255, 234, 202)',
tagYellow: 'rgb(255, 244, 216)',
tagGreen: 'rgb(223, 244, 232)',
tagTeal: 'rgb(223, 244, 243)',
tagBlue: 'rgb(225, 239, 255)',
tagPurple: 'rgb(243, 240, 255)',
tagPink: 'rgb(252, 232, 255)',
paletteYellow: 'rgb(255, 232, 56)',
paletteOrange: 'rgb(255, 175, 56)',
paletteTangerine: 'rgb(255, 99, 31)',
paletteRed: 'rgb(252, 63, 85)',
paletteMagenta: 'rgb(255, 56, 179)',
palettePurple: 'rgb(182, 56, 255)',
paletteNavy: 'rgb(59, 37, 204)',
paletteBlue: 'rgb(79, 144, 255)',
paletteGreen: 'rgb(16, 203, 134)',
paletteGrey: 'rgb(153, 153, 153)',
paletteWhite: 'rgb(255, 255, 255)',
paletteBlack: 'rgb(0, 0, 0)',
};
export const nextDarkColorScheme = {
brandColor: 'rgb(84, 56, 255)',
primaryColor: 'rgb(118, 95, 254)',
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)',
dividerColor: 'rgb(114, 114, 114)',
placeholderColor: 'rgb(62, 62, 63)',
quoteColor: 'rgb(147, 144, 163)',
linkColor: 'rgb(185, 191, 227)',
edgelessGridColor: 'rgb(49, 49, 49)',
successColor: 'rgb(77, 213, 181)',
warningColor: 'rgb(255, 123, 77)',
errorColor: 'rgb(212, 140, 130)',
processingColor: 'rgb(195, 215, 255)',
textEmphasisColor: 'rgb(208, 205, 220)',
textPrimaryColor: 'rgb(234, 234, 234)',
textSecondaryColor: 'rgb(156, 156, 160)',
textDisableColor: 'rgb(119, 117, 125)',
black10: 'rgba(255, 255, 255, 0.1)',
black30: 'rgba(255, 255, 255, 0.3)',
black50: 'rgba(255, 255, 255, 0.5)',
black60: 'rgba(255, 255, 255, 0.6)',
black80: 'rgba(255, 255, 255, 0.8)',
black90: 'rgba(255, 255, 255, 0.9)',
black: 'rgb(255, 255, 255)',
white10: 'rgba(0, 0, 0, 0.1)',
white30: 'rgba(0, 0, 0, 0.3)',
white50: 'rgba(0, 0, 0, 0.5)',
white60: 'rgba(0, 0, 0, 0.6)',
white80: 'rgba(0, 0, 0, 0.8)',
white90: 'rgba(0, 0, 0, 0.9)',
white: 'rgb(0, 0, 0)',
backgroundCodeBlock: 'rgb(41, 44, 51)',
backgroundTertiaryColor: 'rgb(30, 30, 30)',
backgroundProcessingColor: 'rgb(255, 255, 255)',
backgroundErrorColor: 'rgb(255, 255, 255)',
backgroundWarningColor: 'rgb(255, 255, 255)',
backgroundSuccessColor: 'rgb(255, 255, 255)',
backgroundPrimaryColor: 'rgb(20, 20, 20)',
backgroundSecondaryColor: 'rgb(32, 32, 32)',
backgroundModalColor: 'rgba(0, 0, 0, 0.8)',
backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
tagBlue: 'rgb(10, 84, 170)',
tagGreen: 'rgb(55, 135, 79)',
tagTeal: 'rgb(33, 145, 138)',
tagWhite: 'rgb(84, 84, 84)',
tagPurple: 'rgb(59, 38, 141)',
tagRed: 'rgb(139, 63, 63)',
tagPink: 'rgb(194, 132, 132)',
tagYellow: 'rgb(187, 165, 61)',
tagOrange: 'rgb(231, 161, 58)',
tagGray: 'rgb(41, 41, 41)',
paletteYellow: 'rgb(255, 232, 56)',
paletteOrange: 'rgb(255, 175, 56)',
paletteTangerine: 'rgb(255, 99, 31)',
paletteRed: 'rgb(252, 63, 85)',
paletteMagenta: 'rgb(255, 56, 179)',
palettePurple: 'rgb(182, 56, 255)',
paletteNavy: 'rgb(59, 37, 204)',
paletteBlue: 'rgb(79, 144, 255)',
paletteGreen: 'rgb(16, 203, 134)',
paletteGrey: 'rgb(153, 153, 153)',
paletteWhite: 'rgb(255, 255, 255)',
paletteBlack: 'rgb(0, 0, 0)',
} satisfies AffineNextLightColorScheme;

4
packages/component/src/styles/index.ts
View File

@ -1,6 +1,6 @@
export * from './color-scheme';
export * from './helper';
export * from './styled';
export * from './mui-theme';
export * from './MuiThemeProvider';
export * from './theme';
export * from './types';
export * from './utils';

15
packages/component/src/styles/mui-theme.ts Normal file
View File

@ -0,0 +1,15 @@
import '@emotion/react';
import type { ThemeOptions } from '@mui/material';
export const muiThemes: ThemeOptions = {
breakpoints: {
values: {
xs: 0,
sm: 640,
md: 960,
lg: 1280,
xl: 1920,
},
},
};

406
packages/component/src/styles/theme.ts
View File

@ -1,212 +1,216 @@
import '@emotion/react';
import type { EditorContainer } from '@blocksuite/editor';
import { nextDarkColorScheme, nextLightColorScheme } from './color-scheme';
import type { AffineTheme, AffineThemeCSSVariables } from './types';
import type { Theme } from './types';
type Kebab<
T extends string,
A extends string = ''
> = T extends `${infer F}${infer R}`
? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
: A;
export type AffineTheme = typeof lightTheme & {
editorMode: NonNullable<EditorContainer['mode']>;
};
export type AffineCssVariables = {
[Key in `--affine-${Kebab<keyof AffineTheme>}`]: string;
};
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 getLightTheme = (
editorMode: EditorContainer['mode']
): AffineTheme => {
export const baseTheme = {
// shadow
popoverShadow:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
modalShadow: '0px 4px 24px #161616',
tooltipShadow: '0px 0px 4px rgba(0, 0, 0, 0.14)',
// font
fontFamily: `Avenir Next, Poppins, ${basicFontFamily}`,
fontNumberFamily: `Roboto Mono, ${basicFontFamily}`,
fontCodeFamily: `Space Mono, Consolas, Menlo, Monaco, Courier, monospace, ${basicFontFamily}`,
fontH1: '28px',
fontH2: '26px',
fontH3: '24px',
fontH4: '22px',
fontH5: '20px',
fontH6: '18px',
fontBase: '16px',
fontSm: '14px',
fontXs: '12px',
lineHeight: 'calc(1em + 8px)',
zIndexModal: '1000',
zIndexPopover: '100',
paragraphSpace: '8px',
popoverRadius: '10px',
zoom: '1',
scale: 'calc(1 / var(--affine-zoom))',
};
// Refs: https://github.com/toeverything/AFFiNE/issues/1796
export const lightTheme = {
...baseTheme,
themeMode: 'light',
brandColor: 'rgb(84, 56, 255)',
tertiaryColor: 'rgb(243, 240, 255)',
primaryColor: 'rgb(84, 56, 255)',
secondaryColor: 'rgb(125, 145, 255)',
backgroundSuccessColor: 'rgb(255, 255, 255)',
backgroundErrorColor: 'rgba(255, 255, 255, 0.2)',
backgroundProcessingColor: 'rgb(255, 255, 255)',
backgroundWarningColor: 'rgb(255, 255, 255)',
backgroundPrimaryColor: 'rgb(255, 255, 255)',
backgroundOverlayPanelColor: 'rgb(251, 251, 252)',
backgroundSecondaryColor: 'rgb(251, 250, 252)',
backgroundTertiaryColor: 'rgb(233, 233, 236)',
backgroundCodeBlock: 'rgb(250, 251, 253)',
backgroundModalColor: 'rgba(0, 0, 0, 0.6)',
textPrimaryColor: 'rgb(66, 65, 73)',
textSecondaryColor: 'rgb(142, 141, 145)',
textDisableColor: 'rgb(169, 169, 173)',
textEmphasisColor: 'rgb(84, 56, 255)',
hoverColor: 'rgba(0, 0, 0, 0.04)',
linkColor: 'rgb(125, 145, 255)',
quoteColor: 'rgb(100, 95, 130)',
iconColor: 'rgb(119, 117, 125)',
iconSecondary: 'rgba(119, 117, 125, 0.6)',
borderColor: 'rgb(227, 226, 228)',
dividerColor: 'rgb(227, 226, 228)',
placeholderColor: 'rgb(192, 191, 193)',
edgelessGridColor: 'rgb(230, 230, 230)',
successColor: 'rgb(16, 203, 134)',
warningColor: 'rgb(255, 99, 31)',
errorColor: 'rgb(235, 67, 53)',
processingColor: 'rgb(39, 118, 255)',
black10: 'rgba(0, 0, 0, 0.1)',
black30: 'rgba(0, 0, 0, 0.3)',
black50: 'rgba(0, 0, 0, 0.5)',
black60: 'rgba(0, 0, 0, 0.6)',
black80: 'rgba(0, 0, 0, 0.8)',
black90: 'rgba(0, 0, 0, 0.9)',
black: 'rgb(0, 0, 0)',
white10: 'rgba(255, 255, 255, 0.1)',
white30: 'rgba(255, 255, 255, 0.3)',
white50: 'rgba(255, 255, 255, 0.5)',
white60: 'rgba(255, 255, 255, 0.6)',
white80: 'rgba(255, 255, 255, 0.8)',
white90: 'rgba(255, 255, 255, 0.9)',
white: 'rgb(255, 255, 255)',
tagWhite: 'rgb(245, 245, 245)',
tagGray: 'rgb(227, 226, 224)',
tagRed: 'rgb(255, 225, 225)',
tagOrange: 'rgb(255, 234, 202)',
tagYellow: 'rgb(255, 244, 216)',
tagGreen: 'rgb(223, 244, 232)',
tagTeal: 'rgb(223, 244, 243)',
tagBlue: 'rgb(225, 239, 255)',
tagPurple: 'rgb(243, 240, 255)',
tagPink: 'rgb(252, 232, 255)',
paletteYellow: 'rgb(255, 232, 56)',
paletteOrange: 'rgb(255, 175, 56)',
paletteTangerine: 'rgb(255, 99, 31)',
paletteRed: 'rgb(252, 63, 85)',
paletteMagenta: 'rgb(255, 56, 179)',
palettePurple: 'rgb(182, 56, 255)',
paletteNavy: 'rgb(59, 37, 204)',
paletteBlue: 'rgb(79, 144, 255)',
paletteGreen: 'rgb(16, 203, 134)',
paletteGrey: 'rgb(153, 153, 153)',
paletteWhite: 'rgb(255, 255, 255)',
paletteBlack: 'rgb(0, 0, 0)',
tooltip: '#424149',
};
export const darkTheme = {
...baseTheme,
themeMode: 'dark',
brandColor: 'rgb(84, 56, 255)',
primaryColor: 'rgb(118, 95, 254)',
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)',
dividerColor: 'rgb(114, 114, 114)',
placeholderColor: 'rgb(62, 62, 63)',
quoteColor: 'rgb(147, 144, 163)',
linkColor: 'rgb(185, 191, 227)',
edgelessGridColor: 'rgb(49, 49, 49)',
successColor: 'rgb(77, 213, 181)',
warningColor: 'rgb(255, 123, 77)',
errorColor: 'rgb(212, 140, 130)',
processingColor: 'rgb(195, 215, 255)',
textEmphasisColor: 'rgb(208, 205, 220)',
textPrimaryColor: 'rgb(234, 234, 234)',
textSecondaryColor: 'rgb(156, 156, 160)',
textDisableColor: 'rgb(119, 117, 125)',
black10: 'rgba(255, 255, 255, 0.1)',
black30: 'rgba(255, 255, 255, 0.3)',
black50: 'rgba(255, 255, 255, 0.5)',
black60: 'rgba(255, 255, 255, 0.6)',
black80: 'rgba(255, 255, 255, 0.8)',
black90: 'rgba(255, 255, 255, 0.9)',
black: 'rgb(255, 255, 255)',
white10: 'rgba(0, 0, 0, 0.1)',
white30: 'rgba(0, 0, 0, 0.3)',
white50: 'rgba(0, 0, 0, 0.5)',
white60: 'rgba(0, 0, 0, 0.6)',
white80: 'rgba(0, 0, 0, 0.8)',
white90: 'rgba(0, 0, 0, 0.9)',
white: 'rgb(0, 0, 0)',
backgroundCodeBlock: 'rgb(41, 44, 51)',
backgroundTertiaryColor: 'rgb(30, 30, 30)',
backgroundProcessingColor: 'rgb(255, 255, 255)',
backgroundErrorColor: 'rgb(255, 255, 255)',
backgroundWarningColor: 'rgb(255, 255, 255)',
backgroundSuccessColor: 'rgb(255, 255, 255)',
backgroundPrimaryColor: 'rgb(20, 20, 20)',
backgroundSecondaryColor: 'rgb(32, 32, 32)',
backgroundModalColor: 'rgba(0, 0, 0, 0.8)',
backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
tagBlue: 'rgb(10, 84, 170)',
tagGreen: 'rgb(55, 135, 79)',
tagTeal: 'rgb(33, 145, 138)',
tagWhite: 'rgb(84, 84, 84)',
tagPurple: 'rgb(59, 38, 141)',
tagRed: 'rgb(139, 63, 63)',
tagPink: 'rgb(194, 132, 132)',
tagYellow: 'rgb(187, 165, 61)',
tagOrange: 'rgb(231, 161, 58)',
tagGray: 'rgb(41, 41, 41)',
paletteYellow: 'rgb(255, 232, 56)',
paletteOrange: 'rgb(255, 175, 56)',
paletteTangerine: 'rgb(255, 99, 31)',
paletteRed: 'rgb(252, 63, 85)',
paletteMagenta: 'rgb(255, 56, 179)',
palettePurple: 'rgb(182, 56, 255)',
paletteNavy: 'rgb(59, 37, 204)',
paletteBlue: 'rgb(79, 144, 255)',
paletteGreen: 'rgb(16, 203, 134)',
paletteGrey: 'rgb(153, 153, 153)',
paletteWhite: 'rgb(255, 255, 255)',
paletteBlack: 'rgb(0, 0, 0)',
tooltip: '#EAEAEA',
} satisfies Omit<AffineTheme, 'editorMode'>;
export const getTheme: (
themeMode: Theme,
editorMode: NonNullable<EditorContainer['mode']>
) => AffineTheme = (themeMode, editorMode) => {
return {
palette: {
mode: 'light',
},
editorMode,
colors: {
pageBackground: '#fff',
hoverBackground: 'rgba(0,0,0,.04)',
innerHoverBackground: '#E9E9EC',
popoverBackground: '#fff',
tooltipBackground: '#261499',
codeBackground: '#f2f5f9',
codeBlockBackground: '#FAFBFD',
hubBackground: '#fbfbfc',
cardHoverBackground: '#f8f9ff',
warningBackground: '#FFF9C7',
errorBackground: '#FFDED8',
modalBackground: 'rgba(0, 0, 0, 0.6)',
textColor: '#424149',
secondaryTextColor: '#8E8D91',
edgelessTextColor: '#3A4C5C',
handleColor: '#c7c3d9',
linkColor2: '#5438FF',
linkVisitedColor: '#5438FF',
tooltipColor: '#fff',
codeColor: '#77757D',
placeHolderColor: '#C0BFC1',
selectedColor: 'rgba(84, 56, 255, 0.04)',
disableColor: '#A9A9AD',
lineNumberColor: '#77757D',
...nextLightColorScheme,
},
font: {
title: '36px',
h1: '28px',
h2: '26px',
h3: '24px',
h4: '22px',
h5: '20px',
h6: '18px',
base: '16px',
sm: '14px',
xs: '12px',
family: `Avenir Next, Poppins, ${basicFontFamily}`,
numberFamily: `Roboto Mono, ${basicFontFamily}`,
codeFamily: `Space Mono, Consolas, Menlo, Monaco, Courier, monospace, ${basicFontFamily}`,
lineHeight: 'calc(1em + 8px)',
},
zIndex: {
modal: 1000,
popover: 100,
},
shadow: {
popover: '0px 0px 12px rgba(66, 65, 73, 0.14)',
modal:
'0px 0px 20px 4px rgba(65, 64, 72, 0.24), 0px 0px 12px rgba(66, 65, 73, 0.14)',
tooltip: '0px 0px 4px rgba(0, 0, 0, 0.14)',
},
space: {
paragraph: '8px',
},
radius: {
popover: '10px',
},
breakpoints: {
values: {
xs: 0,
sm: 640,
md: 960,
lg: 1280,
xl: 1920,
},
},
};
};
export const getDarkTheme = (
editorMode: EditorContainer['mode']
): AffineTheme => {
const lightTheme = getLightTheme(editorMode);
return {
...lightTheme,
palette: {
mode: 'dark',
},
colors: {
pageBackground: '#2c2c2c',
hoverBackground: 'rgba(0,0,0,.04)',
innerHoverBackground: '#5A5A5A',
popoverBackground: '#1F2021',
tooltipBackground: '#0C0A15',
codeBackground:
editorMode === 'edgeless'
? lightTheme.colors.codeBackground
: '#505662',
codeBlockBackground: '#292C33',
hubBackground: '#272727',
cardHoverBackground: '#363636',
warningBackground: '#FFF9C7',
errorBackground: '#FFDED8',
modalBackground: 'rgba(0, 0, 0, 0.8)',
textColor: '#fff',
secondaryTextColor: '#8E8D91',
edgelessTextColor: '#3A4C5C',
handleColor: '#c7c3d9',
linkColor2: '#0C0A15',
linkVisitedColor: '#505FAB',
tooltipColor: '#fff',
codeColor:
editorMode === 'edgeless' ? lightTheme.colors.codeColor : '#BDDBFD',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(104, 128, 255, 0.1)',
disableColor: '#4b4b4b',
lineNumberColor: '#888A9E',
...nextDarkColorScheme,
},
shadow: {
popover:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
modal: '0px 4px 24px #161616',
tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
},
};
};
/**
* @deprecated these theme will be removed in the future
*/
export const globalThemeVariables: (
theme: AffineTheme
) => AffineThemeCSSVariables = theme => {
return {
'--affine-theme-mode': theme.palette.mode,
'--affine-editor-mode': theme.editorMode,
'--affine-primary-color': theme.colors.primaryColor,
'--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-tooltip-background': theme.colors.tooltipBackground,
'--affine-hub-background': theme.colors.hubBackground,
'--affine-card-hover-background': theme.colors.cardHoverBackground,
'--affine-text-color': theme.colors.textColor,
'--affine-secondary-text-color': theme.colors.secondaryTextColor,
'--affine-edgeless-text-color': theme.colors.edgelessTextColor,
'--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-block-handle-color': theme.colors.handleColor,
'--affine-code-color': theme.colors.codeColor,
'--affine-code-block-background': theme.colors.codeBlockBackground,
'--affine-quote-color': theme.colors.quoteColor,
'--affine-selected-color': theme.colors.selectedColor,
'--affine-placeholder-color': theme.colors.placeHolderColor,
'--affine-border-color': theme.colors.borderColor,
'--affine-disable-color': theme.colors.disableColor,
'--affine-tooltip-color': theme.colors.tooltipColor,
'--affine-line-number-color': theme.colors.lineNumberColor,
'--affine-modal-shadow': theme.shadow.modal,
'--affine-popover-shadow': theme.shadow.popover,
'--affine-font-h1': theme.font.h1,
'--affine-font-h2': theme.font.h2,
'--affine-font-h3': theme.font.h3,
'--affine-font-h4': theme.font.h4,
'--affine-font-h5': theme.font.h5,
'--affine-font-h6': theme.font.h6,
'--affine-font-base': theme.font.base,
'--affine-font-sm': theme.font.sm, // small
'--affine-font-xs': theme.font.xs, // tiny
'--affine-line-height': theme.font.lineHeight,
'--affine-z-index-modal': theme.zIndex.modal,
'--affine-z-index-popover': theme.zIndex.popover,
'--affine-font-family': theme.font.family,
'--affine-font-number-family': theme.font.numberFamily,
'--affine-font-code-family': theme.font.codeFamily,
'--affine-paragraph-space': theme.space.paragraph,
'--affine-popover-radius': theme.radius.popover,
'--affine-zoom': '1',
'--affine-scale': 'calc(1 / var(--affine-zoom))',
...(themeMode === 'light' ? lightTheme : darkTheme),
};
};

165
packages/component/src/styles/types.ts
View File

@ -1,170 +1,11 @@
import type { EditorContainer } from '@blocksuite/editor';
import type { CSSProperties } from 'react';
import type { AffineNextLightColorScheme } from './color-scheme';
export type Theme = 'light' | 'dark';
export type ThemeMode = Theme | 'auto';
import type { AffineTheme } from './theme';
export type ThemeProviderProps = {
defaultTheme?: Theme;
};
export type ThemeProviderValue = {
theme: AffineTheme;
mode: Theme;
changeMode: (newMode: Theme) => void;
};
export interface AffineTheme {
editorMode: EditorContainer['mode'];
palette: {
mode: 'light' | 'dark';
};
colors: {
primaryColor: string;
pageBackground: string;
popoverBackground: string;
tooltipBackground: string;
hoverBackground: string;
innerHoverBackground: string;
modalBackground: string;
// Use for the quick search tips background
backgroundTertiaryColor: string;
codeBackground: string;
codeBlockBackground: string;
// Use for blockHub and slide bar background
hubBackground: string;
cardHoverBackground: string;
warningBackground: string;
errorBackground: string;
// Use for the page`s text
textColor: string;
secondaryTextColor: string;
textEmphasisColor: string;
// Use for the editor`s text, because in edgeless mode text is different form other
edgelessTextColor: string;
linkColor: string;
// In dark mode, normal text`s (not bold) color
linkColor2: string;
linkVisitedColor: string;
iconColor: string;
handleColor: string;
tooltipColor: string;
codeColor: string;
quoteColor: string;
placeHolderColor: string;
selectedColor: string;
borderColor: string;
disableColor: string;
warningColor: string;
errorColor: string;
lineNumberColor: string;
} & AffineNextLightColorScheme;
font: {
title: string;
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
h6: string;
base: string;
sm: string; // small
xs: string; // tiny
family: string;
numberFamily: string;
codeFamily: string;
lineHeight: string | number;
};
zIndex: {
modal: number;
popover: number;
};
shadow: {
modal: string;
popover: string;
tooltip: string;
};
space: {
paragraph: string;
};
radius: {
popover: string;
};
breakpoints: {
values: {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
};
};
}
export interface AffineThemeCSSVariables {
'--affine-theme-mode': Theme;
'--affine-editor-mode': EditorContainer['mode'];
'--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-code-block-background': AffineTheme['colors']['codeBlockBackground'];
'--affine-tooltip-background': AffineTheme['colors']['tooltipBackground'];
'--affine-hub-background': AffineTheme['colors']['hubBackground'];
'--affine-card-hover-background': AffineTheme['colors']['cardHoverBackground'];
'--affine-text-color': AffineTheme['colors']['textColor'];
'--affine-secondary-text-color': AffineTheme['colors']['secondaryTextColor'];
'--affine-edgeless-text-color': AffineTheme['colors']['edgelessTextColor'];
'--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-code-color': AffineTheme['colors']['codeColor'];
'--affine-quote-color': AffineTheme['colors']['quoteColor'];
'--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];
'--affine-selected-color': AffineTheme['colors']['selectedColor'];
'--affine-border-color': AffineTheme['colors']['borderColor'];
'--affine-disable-color': AffineTheme['colors']['disableColor'];
'--affine-tooltip-color': AffineTheme['colors']['tooltipColor'];
'--affine-line-number-color': AffineTheme['colors']['lineNumberColor'];
'--affine-modal-shadow': AffineTheme['shadow']['modal'];
'--affine-popover-shadow': AffineTheme['shadow']['popover'];
'--affine-font-h1': AffineTheme['font']['h1'];
'--affine-font-h2': AffineTheme['font']['h2'];
'--affine-font-h3': AffineTheme['font']['h3'];
'--affine-font-h4': AffineTheme['font']['h4'];
'--affine-font-h5': AffineTheme['font']['h5'];
'--affine-font-h6': AffineTheme['font']['h6'];
'--affine-font-base': AffineTheme['font']['base'];
'--affine-font-sm': AffineTheme['font']['sm']; // small
'--affine-font-xs': AffineTheme['font']['xs']; // tiny
'--affine-line-height': AffineTheme['font']['lineHeight'];
'--affine-z-index-modal': AffineTheme['zIndex']['modal'];
'--affine-z-index-popover': AffineTheme['zIndex']['popover'];
'--affine-font-family': AffineTheme['font']['family'];
'--affine-font-number-family': AffineTheme['font']['numberFamily'];
'--affine-font-code-family': AffineTheme['font']['codeFamily'];
'--affine-paragraph-space': AffineTheme['space']['paragraph'];
'--affine-popover-radius': AffineTheme['radius']['popover'];
// use for blocksuite
'--affine-zoom': CSSProperties['zoom'];
'--affine-scale': string;
}
export type Theme = 'light' | 'dark';
export type ThemeMode = Theme | 'auto';
declare module '@emotion/react' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface

2
packages/component/src/ui/breadcrumbs/index.ts
View File

@ -4,6 +4,6 @@ import { styled } from '../../styles';
export const Breadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => {
return {
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
};
});

20
packages/component/src/ui/button/styles.ts
View File

@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', {
width,
height,
fontSize,
color: theme.colors.iconColor,
color: 'var(--affine-hover-color)',
...displayInlineFlex('center', 'center'),
position: 'relative',
...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
@ -66,9 +66,9 @@ export const StyledIconButton = styled('button', {
},
':hover': {
color: hoverColor ?? theme.colors.primaryColor,
color: hoverColor ?? 'var(--affine-primary-color)',
'::after': {
background: hoverBackground || theme.colors.hoverBackground,
background: hoverBackground || 'var(--affine-hover-color)',
},
...(hoverStyle ?? {}),
},
@ -132,8 +132,8 @@ export const StyledTextButton = styled('button', {
fontWeight: bold ? '500' : '400',
':hover': {
color: hoverColor ?? theme.colors.primaryColor,
background: hoverBackground ?? theme.colors.hoverBackground,
color: hoverColor ?? 'var(--affine-primary-color)',
background: hoverBackground ?? 'var(--affine-hover-color)',
...(hoverStyle ?? {}),
},
};
@ -192,7 +192,7 @@ export const StyledButton = styled('button', {
? {
cursor: 'not-allowed',
pointerEvents: 'none',
color: theme.colors.disableColor,
color: 'var(--affine-text-disable-color)',
}
: {}),
transition: 'background .15s',
@ -201,10 +201,10 @@ export const StyledButton = styled('button', {
fontSize,
fontWeight: bold ? '500' : '400',
'.affine-button-icon': {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
'.affine-button-icon__fixed': {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
'>span': {
marginLeft: '5px',
@ -221,8 +221,8 @@ export const StyledButton = styled('button', {
// TODO: disabled hover should be implemented
//
// ':hover': {
// color: hoverColor ?? theme.colors.primaryColor,
// background: hoverBackground ?? theme.colors.hoverBackground,
// color: hoverColor ?? 'var(--affine-primary-color)',
// background: hoverBackground ?? 'var(--affine-hover-color)',
// '.affine-button-icon':{
//
// }

48
packages/component/src/ui/button/utils.ts
View File

@ -47,37 +47,39 @@ export const getButtonColors = (
switch (type) {
case 'primary':
return {
background: theme.colors.primaryColor,
background: 'var(--affine-primary-color)',
color: '#fff',
borderColor: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
'.affine-button-icon': {
color: '#fff',
},
};
case 'light':
return {
background: theme.colors.hoverBackground,
color: disabled ? theme.colors.disableColor : theme.colors.primaryColor,
borderColor: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
color: disabled
? 'var(--affine-text-disable-color)'
: 'var(--affine-primary-color)',
borderColor: 'var(--affine-hover-color)',
'.affine-button-icon': {
borderColor: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
},
':hover': {
borderColor: disabled
? theme.colors.hoverBackground
: theme.colors.primaryColor,
? 'var(--affine-hover-color)'
: 'var(--affine-primary-color)',
},
};
case 'warning':
return {
background: theme.colors.warningBackground,
color: theme.colors.warningColor,
borderColor: theme.colors.warningBackground,
background: 'var(--affine-background-warning-color)',
color: 'var(--affine-background-warning-color)',
borderColor: 'var(--affine-background-warning-color)',
'.affine-button-icon': {
color: theme.colors.warningColor,
color: 'var(--affine-background-warning-color)',
},
':hover': {
borderColor: theme.colors.warningColor,
borderColor: 'var(--affine-background-warning-color)',
color: extend?.hoverColor,
background: extend?.hoverBackground,
...extend?.hoverStyle,
@ -85,14 +87,14 @@ export const getButtonColors = (
};
case 'danger':
return {
background: theme.colors.errorBackground,
color: theme.colors.errorColor,
borderColor: theme.colors.errorBackground,
background: 'var(--affine-background-error-color)',
color: 'var(--affine-error-color)',
borderColor: 'var(--affine-background-error-color)',
'.affine-button-icon': {
color: theme.colors.errorColor,
color: 'var(--affine-error-color)',
},
':hover': {
borderColor: theme.colors.errorColor,
borderColor: 'var(--affine-error-color)',
color: extend?.hoverColor,
background: extend?.hoverBackground,
...extend?.hoverStyle,
@ -100,13 +102,13 @@ export const getButtonColors = (
};
default:
return {
color: theme.colors.textColor,
borderColor: theme.colors.borderColor,
color: 'var(--affine-text-primary-color)',
borderColor: 'var(--affine-border-color)',
':hover': {
borderColor: theme.colors.primaryColor,
color: extend?.hoverColor ?? theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
color: extend?.hoverColor ?? 'var(--affine-primary-color)',
'.affine-button-icon': {
color: extend?.hoverColor ?? theme.colors.primaryColor,
color: extend?.hoverColor ?? 'var(--affine-primary-color)',
background: extend?.hoverBackground,
...extend?.hoverStyle,
},

6
packages/component/src/ui/confirm/styles.ts
View File

@ -13,7 +13,7 @@ export const StyledModalWrapper = styled(ModalWrapper)(() => {
export const StyledConfirmTitle = styled('div')(({ theme }) => {
return {
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
fontWeight: 600,
textAlign: 'center',
lineHeight: '28px',
@ -22,10 +22,10 @@ export const StyledConfirmTitle = styled('div')(({ theme }) => {
export const StyledConfirmContent = styled('div')(({ theme }) => {
return {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
textAlign: 'center',
marginTop: '12px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
lineHeight: '26px',
};
});

2
packages/component/src/ui/divider/index.ts
View File

@ -4,6 +4,6 @@ import { styled } from '../../styles';
export const Divider = styled(MuiDivider)(({ theme }) => {
return {
borderColor: theme.colors.borderColor,
borderColor: 'var(--affine-border-color)',
};
});

12
packages/component/src/ui/input/style.ts
View File

@ -14,16 +14,18 @@ export const StyledInput = styled('input')<{
height,
lineHeight: '22px',
padding: '8px 12px',
color: disabled ? theme.colors.disableColor : theme.colors.textColor,
color: disabled
? 'var(--affine-text-disable-color)'
: 'var(--affine-text-primary-color)',
border: noBorder ? 'unset' : `1px solid`,
borderColor: theme.colors.borderColor, // TODO: check out disableColor,
backgroundColor: theme.colors.popoverBackground,
borderColor: 'var(--affine-border-color)', // TODO: check out disableColor,
backgroundColor: 'var(--affine-white)',
borderRadius: '10px',
'&::placeholder': {
color: theme.colors.placeHolderColor,
color: 'var(--affine-placeholder-color)',
},
'&:focus': {
borderColor: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
},
};
});

4
packages/component/src/ui/layout/Content.tsx
View File

@ -47,8 +47,8 @@ export const Content = styled('div', {
maxWidth,
textAlign: align,
display: 'inline-block',
color: color ?? theme.colors.textColor,
fontSize: fontSize ?? theme.font.base,
color: color ?? 'var(--affine-text-primary-color)',
fontSize: fontSize ?? 'var(--affine-font-base)',
fontWeight: weight ?? 400,
lineHeight: lineHeight ?? 1.5,
...(ellipsis ? textEllipsis(lineNum) : {}),

28
packages/component/src/ui/menu/styles.ts
View File

@ -10,11 +10,11 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)<{
return {
width,
height,
background: theme.colors.popoverBackground,
background: 'var(--affine-white)',
padding: '8px 4px',
fontSize: '14px',
backgroundColor: theme.colors.popoverBackground,
boxShadow: theme.shadow.popover,
backgroundColor: 'var(--affine-white)',
boxShadow: 'var(--affine-text-popover-shadow)',
};
});
@ -22,14 +22,14 @@ export const StyledStartIconWrapper = styled('div')(({ theme }) => {
return {
marginRight: '12px',
fontSize: '20px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
};
});
export const StyledEndIconWrapper = styled('div')(({ theme }) => {
return {
marginLeft: '12px',
fontSize: '20px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
};
});
@ -37,7 +37,7 @@ export const StyledContent = styled('div')(({ theme }) => {
return {
textAlign: 'left',
flexGrow: 1,
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
...textEllipsis(1),
};
});
@ -50,15 +50,19 @@ export const StyledMenuItem = styled('button')<{
width: '100%',
borderRadius: '5px',
padding: '0 14px',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
height: '32px',
...displayFlex('flex-start', 'center'),
cursor: isDir ? 'pointer' : '',
position: 'relative',
backgroundColor: 'transparent',
color: disabled ? theme.colors.disableColor : theme.colors.textColor,
color: disabled
? 'var(--affine-text-disable-color)'
: 'var(--affine-text-primary-color)',
svg: {
color: disabled ? theme.colors.disableColor : theme.colors.iconColor,
color: disabled
? 'var(--affine-text-disable-color)'
: 'var(--affine-icon-color)',
},
...(disabled
? {
@ -70,10 +74,10 @@ export const StyledMenuItem = styled('button')<{
':hover': disabled
? {}
: {
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
svg: {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
},
};

2
packages/component/src/ui/modal/ModalWrapper.tsx
View File

@ -11,7 +11,7 @@ export const ModalWrapper = styled('div')<{
width,
height,
minHeight,
backgroundColor: theme.colors.popoverBackground,
backgroundColor: 'var(--affine-white)',
borderRadius: '16px',
position: 'relative',
maxHeight: 'calc(100vh - 32px)',

4
packages/component/src/ui/modal/styles.ts
View File

@ -12,7 +12,7 @@ export const StyledBackdrop = styled('div')(({ theme }) => {
bottom: '0',
top: '0',
left: '0',
backgroundColor: theme.colors.modalBackground,
backgroundColor: 'var(--affine-background-modal-color)',
};
});
@ -33,7 +33,7 @@ export const StyledModal = styled(ModalUnstyled, {
position: 'fixed',
left: '0',
top: '0',
zIndex: theme.zIndex.modal,
zIndex: 'var(--affine-z-index-modal)',
'*': {
WebkitTapHighlightColor: 'transparent',
outline: 'none',

2
packages/component/src/ui/popper/PopoverArrow.tsx
View File

@ -92,6 +92,6 @@ const StyledArrow = styled('span')<{
bottom: 0,
},
...getArrowStyle(placement, theme.colors.tooltipBackground),
...getArrowStyle(placement, 'var(--affine-tooltip)'),
};
});

2
packages/component/src/ui/popper/Popper.tsx
View File

@ -191,6 +191,6 @@ export const BasicStyledPopper = styled(PopperUnstyled, {
zIndex?: CSSProperties['zIndex'];
}>(({ zIndex, theme }) => {
return {
zIndex: zIndex ?? theme.zIndex.popover,
zIndex: zIndex ?? 'var(--affine-z-index-popover)',
};
});

5
packages/component/src/ui/shared/Container.tsx
View File

@ -45,7 +45,10 @@ export const StyledPopperContainer = styled('div')<{
placement?: PopperPlacementType;
}>(({ theme, placement = 'top' }) => {
const direction = placementToContainerDirection[placement];
const borderRadius = getBorderRadius(direction, theme.radius.popover);
const borderRadius = getBorderRadius(
direction,
'var(--affine-popover-radius)'
);
return {
borderRadius,
};

6
packages/component/src/ui/table/styles.ts
View File

@ -4,8 +4,8 @@ import type { TableCellProps } from './interface';
export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
({ theme, tableLayout }) => {
return {
fontSize: theme.font.base,
color: theme.colors.textColor,
fontSize: 'var(--affine-font-base)',
color: 'var(--affine-text-primary-color)',
tableLayout,
width: '100%',
borderCollapse: 'separate',
@ -69,7 +69,7 @@ export const StyledTableRow = styled('tr')(({ theme }) => {
':hover': {
td: {
background: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
},
},
};

19
packages/component/src/ui/tooltip/QuickSearch-tips.tsx
View File

@ -7,14 +7,14 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
return {
width: '390px',
minHeight: '92px',
boxShadow: theme.shadow.tooltip,
boxShadow: 'var(--affine-tooltip-shadow)',
padding: '12px',
backgroundColor: theme.colors.backgroundTertiaryColor,
backgroundColor: 'var(--affine-background-tertiary-color)',
transform: 'all 0.15s',
color: theme.colors.textEmphasisColor,
color: 'var(--affine-text-emphasis-color)',
...displayFlex('center', 'center'),
border: `1px solid ${theme.colors.textEmphasisColor}`,
fontSize: theme.font.sm,
border: `1px solid var(--affine-text-emphasis-color)`,
fontSize: 'var(--affine-font-sm)',
lineHeight: '22px',
fontWeight: 500,
};
@ -29,7 +29,7 @@ const StyledCircleContainer = styled('div')(({ theme }) => {
transform: translate(0%, 0%);
width: 0;
height: 40px;
border-right: 1px solid ${theme.colors.textEmphasisColor};
border-right: 1px solid var(--affine-text-emphasis-color);
&::after {
content: '';
position: absolute;
@ -39,7 +39,7 @@ const StyledCircleContainer = styled('div')(({ theme }) => {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid ${theme.colors.textEmphasisColor};
border: 1px solid var(--affine-text-emphasis-color);
}
&::before {
content: '';
@ -50,9 +50,8 @@ const StyledCircleContainer = styled('div')(({ theme }) => {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: ${theme.colors.textEmphasisColor};
border: 1px solid ${theme.colors.textEmphasisColor};
}
background-color: var(--affine-text-emphasis-color);
border: 1px solid var(--affine-text-emphasis-color);
`;
});

6
packages/component/src/ui/tooltip/Tooltip.tsx
View File

@ -6,11 +6,11 @@ import StyledPopperContainer from '../shared/Container';
const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
return {
maxWidth: '320px',
boxShadow: theme.shadow.popover,
boxShadow: 'var(--affine-text-popover-shadow)',
padding: '4px 12px',
backgroundColor: theme.colors.tooltipBackground,
backgroundColor: 'var(--affine-tooltip)',
color: '#fff',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
};
});

8
packages/component/src/ui/tree-view/styles.ts
View File

@ -1,7 +1,7 @@
import MuiCollapse from '@mui/material/Collapse';
import type { CSSProperties } from 'react';
import { alpha, styled } from '../../styles';
import { alpha, lightTheme, styled } from '../../styles';
export const StyledCollapse = styled(MuiCollapse)<{
indent?: CSSProperties['paddingLeft'];
@ -18,7 +18,7 @@ export const StyledTreeNodeWrapper = styled('div')(() => {
export const StyledTreeNodeContainer = styled('div')<{ isDragging?: boolean }>(
({ isDragging = false, theme }) => {
return {
background: isDragging ? theme.colors.hoverBackground : '',
background: isDragging ? 'var(--affine-hover-color)' : '',
// opacity: isDragging ? 0.4 : 1,
};
}
@ -33,9 +33,9 @@ export const StyledNodeLine = styled('div')<{ show: boolean; isTop?: boolean }>(
width: '100%',
paddingTop: '2x',
borderTop: '2px solid',
borderColor: show ? theme.colors.primaryColor : 'transparent',
borderColor: show ? 'var(--affine-primary-color)' : 'transparent',
boxShadow: show
? `0px 0px 8px ${alpha(theme.colors.primaryColor, 0.35)}`
? `0px 0px 8px ${alpha(lightTheme.primaryColor, 0.35)}`
: 'none',
zIndex: 1,
};