From 372377dd6b2ffec3e431329c66eb21538d37fdcf Mon Sep 17 00:00:00 2001 From: Flrande <50035259+Flrande@users.noreply.github.com> Date: Thu, 20 Apr 2023 16:31:19 +0800 Subject: [PATCH] feat: upgrate to new theme (#2027) Co-authored-by: Himself65 --- .../src/components/affine/pinboard/styles.ts | 28 +- .../tmp-disable-affine-cloud-modal/style.ts | 6 +- .../invite-member-modal/index.tsx | 14 +- .../panel/collaboration/style.ts | 4 +- .../panel/general/delete/style.ts | 4 +- .../panel/general/leave/style.ts | 2 +- .../panel/general/style.ts | 8 +- .../panel/sync/index.tsx | 2 +- .../affine/workspace-setting-detail/style.ts | 22 +- .../block-suite-page-list/page-list/index.tsx | 5 +- .../block-suite-page-list/page-list/styles.ts | 6 +- .../editor-mode-switch/style.ts | 4 +- .../header-right-items/EditPage.tsx | 4 +- .../header-right-items/EditorOptionMenu.tsx | 4 +- .../header-right-items/SyncUser.tsx | 2 +- .../theme-mode-switch/style.ts | 8 +- .../blocksuite/workspace-header/styles.ts | 22 +- apps/web/src/components/pure/footer/styles.ts | 28 +- .../src/components/pure/help-island/style.ts | 18 +- .../pure/quick-search-button/index.tsx | 2 +- .../navigation-path/styles.ts | 18 +- .../pure/quick-search-modal/style.ts | 38 +- .../components/pure/shortcuts-modal/style.ts | 18 +- .../workspace-list-modal/language-menu.tsx | 2 +- .../pure/workspace-list-modal/styles.ts | 26 +- .../WorkspaceSelector/styles.ts | 12 +- .../workspace-slider-bar/shared-styles.ts | 36 +- .../pure/workspace-slider-bar/style.ts | 24 +- apps/web/src/layouts/styles.ts | 6 +- apps/web/src/pages/invite/[invite_code].tsx | 4 +- .../[workspaceId]/[pageId].tsx | 10 +- apps/web/src/providers/ThemeProvider.tsx | 66 ++- packages/component/.storybook/preview.tsx | 40 +- .../src/components/contact-modal/style.ts | 30 +- .../share-menu/disable-public-link/style.ts | 8 +- .../src/components/share-menu/styles.ts | 36 +- .../src/components/workspace-card/styles.ts | 16 +- packages/component/src/index.ts | 152 ------- .../{styled.tsx => MuiThemeProvider.tsx} | 7 +- packages/component/src/styles/color-scheme.ts | 153 ------- packages/component/src/styles/index.ts | 4 +- packages/component/src/styles/mui-theme.ts | 15 + packages/component/src/styles/theme.ts | 406 +++++++++--------- packages/component/src/styles/types.ts | 165 +------ .../component/src/ui/breadcrumbs/index.ts | 2 +- packages/component/src/ui/button/styles.ts | 20 +- packages/component/src/ui/button/utils.ts | 48 ++- packages/component/src/ui/confirm/styles.ts | 6 +- packages/component/src/ui/divider/index.ts | 2 +- packages/component/src/ui/input/style.ts | 12 +- packages/component/src/ui/layout/Content.tsx | 4 +- packages/component/src/ui/menu/styles.ts | 28 +- .../component/src/ui/modal/ModalWrapper.tsx | 2 +- packages/component/src/ui/modal/styles.ts | 4 +- .../component/src/ui/popper/PopoverArrow.tsx | 2 +- packages/component/src/ui/popper/Popper.tsx | 2 +- .../component/src/ui/shared/Container.tsx | 5 +- packages/component/src/ui/table/styles.ts | 6 +- .../src/ui/tooltip/QuickSearch-tips.tsx | 19 +- packages/component/src/ui/tooltip/Tooltip.tsx | 6 +- packages/component/src/ui/tree-view/styles.ts | 8 +- 61 files changed, 624 insertions(+), 1037 deletions(-) rename packages/component/src/styles/{styled.tsx => MuiThemeProvider.tsx} (84%) delete mode 100644 packages/component/src/styles/color-scheme.ts create mode 100644 packages/component/src/styles/mui-theme.ts diff --git a/apps/web/src/components/affine/pinboard/styles.ts b/apps/web/src/components/affine/pinboard/styles.ts index f9f489df9f..e801ae6fc3 100644 --- a/apps/web/src/components/affine/pinboard/styles.ts +++ b/apps/web/src/components/affine/pinboard/styles.ts @@ -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', }, }; diff --git a/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts b/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts index 7743bb3de5..21ef8717cf 100644 --- a/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts +++ b/apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts @@ -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', }, diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx index 4c39c1a646..8c1bde5f84 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx +++ b/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx @@ -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', diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts b/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts index 954a5c4901..d6a5ce93d2 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts +++ b/apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts @@ -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)', }; }); diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts b/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts index 8714d6078f..eea6714f45 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts +++ b/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts @@ -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)', }; }); diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts b/apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts index 2db6911433..2f1d4057b7 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts +++ b/apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts @@ -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', }; }); diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts b/apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts index bdca89feaa..e941271d24 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts +++ b/apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts @@ -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', }; diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx index 4e1a30be7a..01bef3866a 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx +++ b/apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx @@ -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)', }; }); diff --git a/apps/web/src/components/affine/workspace-setting-detail/style.ts b/apps/web/src/components/affine/workspace-setting-detail/style.ts index 9eed6a4452..760da23b49 100644 --- a/apps/web/src/components/affine/workspace-setting-detail/style.ts +++ b/apps/web/src/components/affine/workspace-setting-detail/style.ts @@ -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)', // }; // }); diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx index 735ddd3b8a..11a6ced868 100644 --- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx +++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx @@ -47,7 +47,6 @@ const FavoriteTag: React.FC = ({ pageMeta: { favorite }, onClick, }) => { - const theme = useTheme(); const { t } = useTranslation(); return ( = ({ ); }} style={{ - color: favorite ? theme.colors.primaryColor : theme.colors.iconColor, + color: favorite + ? 'var(--affine-primary-color)' + : 'var(--affine-icon-color)', }} className={favorite ? '' : 'favorite-button'} > diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts index 6a9706a2a1..4be4d6e2aa 100644 --- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts +++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts @@ -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)', }, }; }); diff --git a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts index cf448ec76e..c7c5dc29b4 100644 --- a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts +++ b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts @@ -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', diff --git a/apps/web/src/components/blocksuite/workspace-header/header-right-items/EditPage.tsx b/apps/web/src/components/blocksuite/workspace-header/header-right-items/EditPage.tsx index 0f29e4fcb2..0971d1b3f0 100644 --- a/apps/web/src/components/blocksuite/workspace-header/header-right-items/EditPage.tsx +++ b/apps/web/src/components/blocksuite/workspace-header/header-right-items/EditPage.tsx @@ -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', diff --git a/apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx b/apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx index 3d14c8ca55..8261ff1266 100644 --- a/apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx +++ b/apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx @@ -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 ? ( - + ) : ( ) diff --git a/apps/web/src/components/blocksuite/workspace-header/header-right-items/SyncUser.tsx b/apps/web/src/components/blocksuite/workspace-header/header-right-items/SyncUser.tsx index f3175deb71..8752fe0f4a 100644 --- a/apps/web/src/components/blocksuite/workspace-header/header-right-items/SyncUser.tsx +++ b/apps/web/src/components/blocksuite/workspace-header/header-right-items/SyncUser.tsx @@ -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'), }; }); diff --git a/apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts b/apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts index 21d2df1042..a0d428e6d4 100644 --- a/apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts +++ b/apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts @@ -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 diff --git a/apps/web/src/components/blocksuite/workspace-header/styles.ts b/apps/web/src/components/blocksuite/workspace-header/styles.ts index 3d710176c0..a678242c06 100644 --- a/apps/web/src/components/blocksuite/workspace-header/styles.ts +++ b/apps/web/src/components/blocksuite/workspace-header/styles.ts @@ -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', diff --git a/apps/web/src/components/pure/footer/styles.ts b/apps/web/src/components/pure/footer/styles.ts index e46d94e5ef..5c68b642f3 100644 --- a/apps/web/src/components/pure/footer/styles.ts +++ b/apps/web/src/components/pure/footer/styles.ts @@ -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', diff --git a/apps/web/src/components/pure/help-island/style.ts b/apps/web/src/components/pure/help-island/style.ts index 87a17c4af2..e8e39c4dec 100644 --- a/apps/web/src/components/pure/help-island/style.ts +++ b/apps/web/src/components/pure/help-island/style.ts @@ -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)', }, }; }); diff --git a/apps/web/src/components/pure/quick-search-button/index.tsx b/apps/web/src/components/pure/quick-search-button/index.tsx index 372e7f0985..8c59de3ccb 100644 --- a/apps/web/src/components/pure/quick-search-button/index.tsx +++ b/apps/web/src/components/pure/quick-search-button/index.tsx @@ -13,7 +13,7 @@ const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => { transform: 'translateY(3px)', }, '::after': { - background: theme.colors.pageBackground, + background: 'var(--affine-background-primary-color)', }, }, }; diff --git a/apps/web/src/components/pure/quick-search-modal/navigation-path/styles.ts b/apps/web/src/components/pure/quick-search-modal/navigation-path/styles.ts index 4ad6cfeeae..5c025e475f 100644 --- a/apps/web/src/components/pure/quick-search-modal/navigation-path/styles.ts +++ b/apps/web/src/components/pure/quick-search-modal/navigation-path/styles.ts @@ -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', }; } diff --git a/apps/web/src/components/pure/quick-search-modal/style.ts b/apps/web/src/components/pure/quick-search-modal/style.ts index 249db812e1..bee9ca2d6f 100644 --- a/apps/web/src/components/pure/quick-search-modal/style.ts +++ b/apps/web/src/components/pure/quick-search-modal/style.ts @@ -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'), diff --git a/apps/web/src/components/pure/shortcuts-modal/style.ts b/apps/web/src/components/pure/shortcuts-modal/style.ts index 297589f4b7..26ea7bad8c 100644 --- a/apps/web/src/components/pure/shortcuts-modal/style.ts +++ b/apps/web/src/components/pure/shortcuts-modal/style.ts @@ -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', })); diff --git a/apps/web/src/components/pure/workspace-list-modal/language-menu.tsx b/apps/web/src/components/pure/workspace-list-modal/language-menu.tsx index adec547676..b4aaed8e07 100644 --- a/apps/web/src/components/pure/workspace-list-modal/language-menu.tsx +++ b/apps/web/src/components/pure/workspace-list-modal/language-menu.tsx @@ -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', })); diff --git a/apps/web/src/components/pure/workspace-list-modal/styles.ts b/apps/web/src/components/pure/workspace-list-modal/styles.ts index 98ef2d648e..2d15e2b1e5 100644 --- a/apps/web/src/components/pure/workspace-list-modal/styles.ts +++ b/apps/web/src/components/pure/workspace-list-modal/styles.ts @@ -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'), }; }); diff --git a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts index 2db49695ec..d378357d31 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts @@ -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', }, }; diff --git a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts index b659d6ebbe..10cda75037 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts @@ -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%', diff --git a/apps/web/src/components/pure/workspace-slider-bar/style.ts b/apps/web/src/components/pure/workspace-slider-bar/style.ts index df8bb1fb8a..f2b41e99da 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/style.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts @@ -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', }; }); diff --git a/apps/web/src/layouts/styles.ts b/apps/web/src/layouts/styles.ts index 3e52a0b5cc..47acb5b75f 100644 --- a/apps/web/src/layouts/styles.ts +++ b/apps/web/src/layouts/styles.ts @@ -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)', diff --git a/apps/web/src/pages/invite/[invite_code].tsx b/apps/web/src/pages/invite/[invite_code].tsx index 0725e7d567..d9ccc84a31 100644 --- a/apps/web/src/pages/invite/[invite_code].tsx +++ b/apps/web/src/pages/invite/[invite_code].tsx @@ -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', }, diff --git a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx index b2cd698039..2e8b8f825c 100644 --- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx +++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx @@ -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)' }, }, }; }); diff --git a/apps/web/src/providers/ThemeProvider.tsx b/apps/web/src/providers/ThemeProvider.tsx index 0d5298815c..a74aeb1816 100644 --- a/apps/web/src/providers/ThemeProvider.tsx +++ b/apps/web/src/providers/ThemeProvider.tsx @@ -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 ( { + 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( 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 ( - - + + {children} - + ); } ); diff --git a/packages/component/.storybook/preview.tsx b/packages/component/.storybook/preview.tsx index 2f588c50dd..d5654e7a3b 100644 --- a/packages/component/.storybook/preview.tsx +++ b/packages/component/.storybook/preview.tsx @@ -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 ( - + + { + variables[ + `--affine-${kebabCase(key)}` as keyof AffineCssVariables + ] = value; + return variables; + }, {} as AffineCssVariables), + }, + html: { + fontFamily: theme.fontFamily, + fontSize: theme.fontBase, + lineHeight: theme.lineHeight, + }, + }} + /> - + ); }, ]; diff --git a/packages/component/src/components/contact-modal/style.ts b/packages/component/src/components/contact-modal/style.ts index 84e796ccff..40e44f222c 100644 --- a/packages/component/src/components/contact-modal/style.ts +++ b/packages/component/src/components/contact-modal/style.ts @@ -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)', }, }, }; diff --git a/packages/component/src/components/share-menu/disable-public-link/style.ts b/packages/component/src/components/share-menu/disable-public-link/style.ts index 9575966fbb..1242d84eaf 100644 --- a/packages/component/src/components/share-menu/disable-public-link/style.ts +++ b/packages/component/src/components/share-menu/disable-public-link/style.ts @@ -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', diff --git a/packages/component/src/components/share-menu/styles.ts b/packages/component/src/components/share-menu/styles.ts index b0011ded1f..dc3fab2365 100644 --- a/packages/component/src/components/share-menu/styles.ts +++ b/packages/component/src/components/share-menu/styles.ts @@ -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', }; diff --git a/packages/component/src/components/workspace-card/styles.ts b/packages/component/src/components/workspace-card/styles.ts index bd5161c4cd..9de3b16906 100644 --- a/packages/component/src/components/workspace-card/styles.ts +++ b/packages/component/src/components/workspace-card/styles.ts @@ -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)', }, }; }); diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts index cd5d124f86..e8b9abf57a 100644 --- a/packages/component/src/index.ts +++ b/packages/component/src/index.ts @@ -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; - }; - } -} diff --git a/packages/component/src/styles/styled.tsx b/packages/component/src/styles/MuiThemeProvider.tsx similarity index 84% rename from packages/component/src/styles/styled.tsx rename to packages/component/src/styles/MuiThemeProvider.tsx index 94993418d7..de5704b9b1 100644 --- a/packages/component/src/styles/styled.tsx +++ b/packages/component/src/styles/MuiThemeProvider.tsx @@ -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 ( diff --git a/packages/component/src/styles/color-scheme.ts b/packages/component/src/styles/color-scheme.ts deleted file mode 100644 index fba8ec0c86..0000000000 --- a/packages/component/src/styles/color-scheme.ts +++ /dev/null @@ -1,153 +0,0 @@ -type Kebab< - T extends string, - A extends string = '' -> = T extends `${infer F}${infer R}` - ? Kebab ? '' : '-'}${Lowercase}`> - : A; - -export type AffineNextLightColorScheme = typeof nextLightColorScheme; - -export type AffineNextCssVariables = { - [Key in `--affine-${Kebab}`]: 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; diff --git a/packages/component/src/styles/index.ts b/packages/component/src/styles/index.ts index 117efc7146..be584a8728 100644 --- a/packages/component/src/styles/index.ts +++ b/packages/component/src/styles/index.ts @@ -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'; diff --git a/packages/component/src/styles/mui-theme.ts b/packages/component/src/styles/mui-theme.ts new file mode 100644 index 0000000000..ef667283a4 --- /dev/null +++ b/packages/component/src/styles/mui-theme.ts @@ -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, + }, + }, +}; diff --git a/packages/component/src/styles/theme.ts b/packages/component/src/styles/theme.ts index fe22534b81..6b34b0d0ad 100644 --- a/packages/component/src/styles/theme.ts +++ b/packages/component/src/styles/theme.ts @@ -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 ? '' : '-'}${Lowercase}`> + : A; + +export type AffineTheme = typeof lightTheme & { + editorMode: NonNullable; +}; + +export type AffineCssVariables = { + [Key in `--affine-${Kebab}`]: 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; + +export const getTheme: ( + themeMode: Theme, + editorMode: NonNullable +) => 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), }; }; diff --git a/packages/component/src/styles/types.ts b/packages/component/src/styles/types.ts index a8d75424f1..df85a0c573 100644 --- a/packages/component/src/styles/types.ts +++ b/packages/component/src/styles/types.ts @@ -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 diff --git a/packages/component/src/ui/breadcrumbs/index.ts b/packages/component/src/ui/breadcrumbs/index.ts index 9dc0e5b949..b4ff191f38 100644 --- a/packages/component/src/ui/breadcrumbs/index.ts +++ b/packages/component/src/ui/breadcrumbs/index.ts @@ -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)', }; }); diff --git a/packages/component/src/ui/button/styles.ts b/packages/component/src/ui/button/styles.ts index a3c68279fc..136dac2cf2 100644 --- a/packages/component/src/ui/button/styles.ts +++ b/packages/component/src/ui/button/styles.ts @@ -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':{ // // } diff --git a/packages/component/src/ui/button/utils.ts b/packages/component/src/ui/button/utils.ts index 8d0c22a443..ad6b7ae931 100644 --- a/packages/component/src/ui/button/utils.ts +++ b/packages/component/src/ui/button/utils.ts @@ -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, }, diff --git a/packages/component/src/ui/confirm/styles.ts b/packages/component/src/ui/confirm/styles.ts index 84962c5fef..36d59e9f7b 100644 --- a/packages/component/src/ui/confirm/styles.ts +++ b/packages/component/src/ui/confirm/styles.ts @@ -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', }; }); diff --git a/packages/component/src/ui/divider/index.ts b/packages/component/src/ui/divider/index.ts index eb2684c4fd..f15973487e 100644 --- a/packages/component/src/ui/divider/index.ts +++ b/packages/component/src/ui/divider/index.ts @@ -4,6 +4,6 @@ import { styled } from '../../styles'; export const Divider = styled(MuiDivider)(({ theme }) => { return { - borderColor: theme.colors.borderColor, + borderColor: 'var(--affine-border-color)', }; }); diff --git a/packages/component/src/ui/input/style.ts b/packages/component/src/ui/input/style.ts index 11f9d92be9..9a04cf0908 100644 --- a/packages/component/src/ui/input/style.ts +++ b/packages/component/src/ui/input/style.ts @@ -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)', }, }; }); diff --git a/packages/component/src/ui/layout/Content.tsx b/packages/component/src/ui/layout/Content.tsx index ea8cfeef79..ddb9ae99b6 100644 --- a/packages/component/src/ui/layout/Content.tsx +++ b/packages/component/src/ui/layout/Content.tsx @@ -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) : {}), diff --git a/packages/component/src/ui/menu/styles.ts b/packages/component/src/ui/menu/styles.ts index b8ee3cddc7..9bc6b97228 100644 --- a/packages/component/src/ui/menu/styles.ts +++ b/packages/component/src/ui/menu/styles.ts @@ -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)', }, }, }; diff --git a/packages/component/src/ui/modal/ModalWrapper.tsx b/packages/component/src/ui/modal/ModalWrapper.tsx index b363ca4b6e..316920e96d 100644 --- a/packages/component/src/ui/modal/ModalWrapper.tsx +++ b/packages/component/src/ui/modal/ModalWrapper.tsx @@ -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)', diff --git a/packages/component/src/ui/modal/styles.ts b/packages/component/src/ui/modal/styles.ts index ff3edde4b1..7bcb078ff8 100644 --- a/packages/component/src/ui/modal/styles.ts +++ b/packages/component/src/ui/modal/styles.ts @@ -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', diff --git a/packages/component/src/ui/popper/PopoverArrow.tsx b/packages/component/src/ui/popper/PopoverArrow.tsx index 7b81574520..9a1fdad272 100644 --- a/packages/component/src/ui/popper/PopoverArrow.tsx +++ b/packages/component/src/ui/popper/PopoverArrow.tsx @@ -92,6 +92,6 @@ const StyledArrow = styled('span')<{ bottom: 0, }, - ...getArrowStyle(placement, theme.colors.tooltipBackground), + ...getArrowStyle(placement, 'var(--affine-tooltip)'), }; }); diff --git a/packages/component/src/ui/popper/Popper.tsx b/packages/component/src/ui/popper/Popper.tsx index d1aa6bd6e8..d21fdd05b8 100644 --- a/packages/component/src/ui/popper/Popper.tsx +++ b/packages/component/src/ui/popper/Popper.tsx @@ -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)', }; }); diff --git a/packages/component/src/ui/shared/Container.tsx b/packages/component/src/ui/shared/Container.tsx index f8e2894b82..b902c4c436 100644 --- a/packages/component/src/ui/shared/Container.tsx +++ b/packages/component/src/ui/shared/Container.tsx @@ -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, }; diff --git a/packages/component/src/ui/table/styles.ts b/packages/component/src/ui/table/styles.ts index ce950b3780..3e49bfe058 100644 --- a/packages/component/src/ui/table/styles.ts +++ b/packages/component/src/ui/table/styles.ts @@ -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)', }, }, }; diff --git a/packages/component/src/ui/tooltip/QuickSearch-tips.tsx b/packages/component/src/ui/tooltip/QuickSearch-tips.tsx index df96516d5b..7e76211ad7 100644 --- a/packages/component/src/ui/tooltip/QuickSearch-tips.tsx +++ b/packages/component/src/ui/tooltip/QuickSearch-tips.tsx @@ -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); `; }); diff --git a/packages/component/src/ui/tooltip/Tooltip.tsx b/packages/component/src/ui/tooltip/Tooltip.tsx index b9a4e0c9f5..fc6ac746ed 100644 --- a/packages/component/src/ui/tooltip/Tooltip.tsx +++ b/packages/component/src/ui/tooltip/Tooltip.tsx @@ -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)', }; }); diff --git a/packages/component/src/ui/tree-view/styles.ts b/packages/component/src/ui/tree-view/styles.ts index 9b5f6305d6..6bc821b90e 100644 --- a/packages/component/src/ui/tree-view/styles.ts +++ b/packages/component/src/ui/tree-view/styles.ts @@ -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, };