From 7d951a975ff44e959bc6eecc18c574f06e836bc9 Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Thu, 1 Feb 2024 09:33:11 +0000 Subject: [PATCH] fix(core): replace most --affine with cssVar (#5728) using a [babel plugin](https://gist.github.com/pengx17/49e24ae8a5a609bdaff122ee8c679d1c) to transform all var(--affine-xxx) to cssVar Some issues: - tried ast-grep but it seems to be not easy to add imports conditionally - current work does not work well with ts with types because babel will strip them out --- .../src/components/affine-banner/index.css.ts | 20 +- .../affine-other-page-layout/index.css.ts | 27 +- .../app-sidebar/add-page-button/index.css.ts | 14 +- .../app-download-button/index.css.ts | 5 +- .../app-updater-button/index.css.ts | 44 ++-- .../app-sidebar/category-divider/index.css.ts | 7 +- .../components/app-sidebar/fallback.css.ts | 2 - .../src/components/app-sidebar/index.css.ts | 20 +- .../app-sidebar/menu-item/index.css.ts | 22 +- .../quick-search-input/index.css.ts | 17 +- .../sidebar-containers/index.css.ts | 13 +- .../sidebar-header/sidebar-switch.css.ts | 1 - .../app-sidebar/spolight/index.css.ts | 2 - .../auth-components/onboarding-page.css.ts | 47 +--- .../password-input/style.css.ts | 21 +- .../components/auth-components/share.css.ts | 66 ++--- .../components/card/block-card/styles.css.ts | 21 +- .../components/global-loading/index.css.ts | 6 +- .../src/components/import-page/index.css.ts | 14 +- .../components/not-found-page/styles.css.ts | 9 +- .../notification-center/index.css.ts | 64 +++-- .../page-detail-skeleton/index.css.ts | 7 +- .../resize-panel/resize-panel.css.ts | 8 +- .../setting-components/share.css.ts | 44 ++-- .../src/components/tour-modal/index.css.ts | 17 +- .../components/workspace-list/index.css.ts | 1 - .../src/components/workspace/index.css.ts | 23 +- .../frontend/component/src/theme/theme.css.ts | 11 +- .../component/src/ui/avatar/style.css.ts | 15 +- .../component/src/ui/button/button.css.ts | 225 ++++++++-------- .../component/src/ui/button/styles.css.ts | 249 +++++++++--------- .../component/src/ui/checkbox/index.css.ts | 6 - .../component/src/ui/date-picker/index.css.ts | 76 +++--- .../component/src/ui/divider/style.css.ts | 4 +- .../src/ui/editable/inline-edit.css.ts | 8 - .../component/src/ui/input/style.css.ts | 27 +- .../component/src/ui/loading/styles.css.ts | 14 +- .../component/src/ui/lottie/styles.css.ts | 4 - .../component/src/ui/menu/styles.css.ts | 75 +++--- .../component/src/ui/modal/styles.css.ts | 24 +- .../component/src/ui/popover/styles.css.ts | 10 +- .../src/ui/resize-panel/styles.css.ts | 5 - .../component/src/ui/scrollbar/index.css.ts | 18 +- .../component/src/ui/skeleton/index.css.ts | 45 ++-- .../component/src/ui/switch/index.css.ts | 16 +- .../component/src/ui/tooltip/styles.css.ts | 8 +- .../affine-error-fallback.css.ts | 1 - .../error-basic/error-detail.css.ts | 7 - .../src/components/affine/auth/style.css.ts | 43 ++- .../affine/auth/subscription-redirect.css.ts | 7 +- .../create-workspace-modal/index.css.ts | 7 - .../affine/language-menu/style.css.ts | 4 +- .../affine/onboarding/articles/blocks.css.ts | 9 - .../onboarding/curve-paper/paper.css.ts | 16 +- .../affine/onboarding/steps/animate-in.css.ts | 2 - .../onboarding/steps/edgeless-switch.css.ts | 41 ++- .../affine/onboarding/steps/unfolding.css.ts | 40 +-- .../components/affine/onboarding/style.css.ts | 24 +- .../affine/page-history-modal/styles.css.ts | 105 +++----- .../affine/payment-disable/style.css.ts | 4 +- .../account-setting/style.css.ts | 11 +- .../general-setting/about/style.css.ts | 30 +-- .../general-setting/appearance/style.css.ts | 1 - .../general-setting/billing/style.css.ts | 30 +-- .../general-setting/plans/layout.css.ts | 14 +- .../general-setting/plans/skeleton.css.ts | 8 +- .../general-setting/plans/style.css.ts | 60 ++--- .../general-setting/shortcuts/style.css.ts | 9 +- .../setting-sidebar/style.css.ts | 58 ++-- .../affine/setting-modal/style.css.ts | 16 +- .../experimental-features/arts.css.ts | 1 - .../experimental-features/index.css.ts | 19 +- .../delete/style.css.ts | 9 +- .../new-workspace-setting-detail/style.css.ts | 53 ++-- .../share-page-modal/share-menu/index.css.ts | 47 +--- .../block-suite-editor/styles.css.ts | 11 +- .../block-suite-header/title/style.css.ts | 4 +- .../block-suite-page-list/index.css.ts | 12 +- .../share-header-left-item/styles.css.ts | 6 +- .../share-header-right-item/styles.css.ts | 7 +- .../src/components/filter-container.css.ts | 1 - .../src/components/image-preview/index.css.ts | 51 ++-- .../src/components/page-detail-editor.css.ts | 3 - .../collections/collection-list-header.css.ts | 14 +- .../collections/collection-list-item.css.ts | 52 ++-- .../components/floating-toolbar.css.ts | 28 +- .../components/list-floating-toolbar.css.ts | 1 - .../components/list-header-cell.css.ts | 13 +- .../components/new-page-button.css.ts | 4 +- .../page-list/docs/page-list-header.css.ts | 31 +-- .../page-list/docs/page-list-item.css.ts | 52 ++-- .../docs/page-list-new-page-button.css.ts | 1 - .../page-list/docs/page-tags.css.ts | 31 +-- .../components/page-list/filter/index.css.ts | 35 ++- .../page-list/filter/multi-select.css.ts | 10 +- .../core/src/components/page-list/list.css.ts | 12 +- .../operation-menu-items/index.css.ts | 10 +- .../components/page-list/page-group.css.ts | 32 +-- .../components/page-list/page-header.css.ts | 9 +- .../page-list/tags/tag-list-header.css.ts | 14 +- .../page-list/tags/tag-list-item.css.ts | 53 ++-- .../page-list/view/collection-bar.css.ts | 5 +- .../page-list/view/collection-list.css.ts | 12 +- .../view/collection-operations.css.ts | 4 +- .../page-list/view/create-collection.css.ts | 9 +- .../edit-collection/edit-collection.css.ts | 74 ++---- .../src/components/pure/cmdk/highlight.css.ts | 12 +- .../core/src/components/pure/cmdk/main.css.ts | 78 ++---- .../src/components/pure/cmdk/modal.css.ts | 37 +-- .../src/components/pure/cmdk/not-found.css.ts | 16 +- .../header-drop-down-button/styles.css.ts | 4 +- .../pure/trash-page-footer/styles.css.ts | 10 +- .../workspace-mode-filter-tab/index.css.ts | 4 +- .../collections/styles.css.ts | 40 +-- .../favorite/styles.css.ts | 47 +--- .../add-workspace/index.css.ts | 9 +- .../user-with-workspace-list/index.css.ts | 20 +- .../user-account/index.css.ts | 5 +- .../workspace-list/index.css.ts | 8 +- .../share-page-not-found-error.css.ts | 6 +- .../workspace-upgrade/upgrade.css.ts | 20 +- .../frontend/core/src/pages/open-app.css.ts | 19 +- .../core/src/pages/upgrade-success.css.ts | 8 +- .../pages/workspace/all-page/all-page.css.ts | 8 +- .../src/pages/workspace/collection.css.ts | 8 +- .../detail-page/detail-page-header.css.ts | 22 +- .../workspace/detail-page/detail-page.css.ts | 12 +- .../editor-sidebar/editor-sidebar.css.ts | 1 - .../editor-sidebar/extensions/copilot.css.ts | 1 - .../extensions/extensions.css.ts | 14 +- .../editor-sidebar/extensions/frame.css.ts | 1 - .../editor-sidebar/extensions/journal.css.ts | 46 ++-- .../editor-sidebar/extensions/outline.css.ts | 1 - .../pages/workspace/page-list-empty.css.ts | 12 +- .../src/pages/workspace/trash-page.css.ts | 8 +- 135 files changed, 1239 insertions(+), 1897 deletions(-) diff --git a/packages/frontend/component/src/components/affine-banner/index.css.ts b/packages/frontend/component/src/components/affine-banner/index.css.ts index b105bdeef..a53bfe893 100644 --- a/packages/frontend/component/src/components/affine-banner/index.css.ts +++ b/packages/frontend/component/src/components/affine-banner/index.css.ts @@ -1,10 +1,10 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const browserWarningStyle = style({ - backgroundColor: 'var(--affine-background-warning-color)', - color: 'var(--affine-warning-color)', + backgroundColor: cssVar('backgroundWarningColor'), + color: cssVar('warningColor'), height: '36px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -13,7 +13,7 @@ export const browserWarningStyle = style({ export const closeButtonStyle = style({ width: '36px', height: '36px', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), cursor: 'pointer', display: 'flex', justifyContent: 'flex-end', @@ -28,10 +28,10 @@ export const closeIconStyle = style({ zIndex: 1, }); export const tipsContainer = style({ - backgroundColor: 'var(--affine-background-error-color)', - color: 'var(--affine-error-color)', + backgroundColor: cssVar('backgroundErrorColor'), + color: cssVar('errorColor'), width: '100%', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: '700', display: 'flex', justifyContent: 'space-between', @@ -46,13 +46,11 @@ export const tipsContainer = style({ }, }, }); - export const tipsMessage = style({ - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), flexGrow: 1, flexShrink: 1, }); - export const tipsRightItem = style({ display: 'flex', flexShrink: 0, diff --git a/packages/frontend/component/src/components/affine-other-page-layout/index.css.ts b/packages/frontend/component/src/components/affine-other-page-layout/index.css.ts index 091072890..863abcabd 100644 --- a/packages/frontend/component/src/components/affine-other-page-layout/index.css.ts +++ b/packages/frontend/component/src/components/affine-other-page-layout/index.css.ts @@ -1,19 +1,17 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const root = style({ height: '100vh', width: '100vw', display: 'flex', flexDirection: 'column', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), position: 'relative', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), }); - export const affineLogo = style({ color: 'inherit', }); - export const topNav = style({ top: 0, left: 0, @@ -28,43 +26,38 @@ export const topNav = style({ }, }, }); - export const topNavLinks = style({ display: 'flex', columnGap: 4, }); - export const topNavLink = style({ - color: 'var(--affine-text-primary-color)', - fontSize: 'var(--affine-font-sm)', + color: cssVar('textPrimaryColor'), + fontSize: cssVar('fontSm'), fontWeight: 500, textDecoration: 'none', padding: '4px 18px', }); - export const iconButton = style({ fontSize: '24px', pointerEvents: 'auto', selectors: { '&.plain': { - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }, }, }); - export const menu = style({ width: '100vw', height: '100vh', padding: '0', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), borderRadius: '0', border: 'none', boxShadow: 'none', }); - export const menuItem = style({ - color: 'var(--affine-text-primary-color)', - fontSize: 'var(--affine-font-sm)', + color: cssVar('textPrimaryColor'), + fontSize: cssVar('fontSm'), fontWeight: 500, textDecoration: 'none', padding: '12px 20px', @@ -80,7 +73,7 @@ export const menuItem = style({ display: 'block', width: 'calc(100% - 40px)', height: '0.5px', - background: 'var(--affine-black-10)', + background: cssVar('black10'), }, '&:not(:last-of-type)': { marginBottom: '0', diff --git a/packages/frontend/component/src/components/app-sidebar/add-page-button/index.css.ts b/packages/frontend/component/src/components/app-sidebar/add-page-button/index.css.ts index 9f1ff4891..b60a14992 100644 --- a/packages/frontend/component/src/components/app-sidebar/add-page-button/index.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/add-page-button/index.css.ts @@ -1,12 +1,12 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const root = style({ display: 'inline-flex', - background: 'var(--affine-white-30)', + background: cssVar('white30'), alignItems: 'center', borderRadius: '8px', - border: '1px solid var(--affine-black-10)', - fontSize: 'var(--affine-font-sm)', + border: `1px solid ${cssVar('black10')}`, + fontSize: cssVar('fontSm'), width: '100%', position: 'relative', height: '52px', @@ -16,17 +16,15 @@ export const root = style({ transition: 'background 0.2s ease', selectors: { '&:active': { - background: 'var(--affine-white-40)', + background: cssVar('white50'), }, }, }); - export const icon = style({ marginRight: '18px', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), fontSize: '24px', }); - export const spacer = style({ flex: 1, }); diff --git a/packages/frontend/component/src/components/app-sidebar/app-download-button/index.css.ts b/packages/frontend/component/src/components/app-sidebar/app-download-button/index.css.ts index 22ccf82a8..c0cad5092 100644 --- a/packages/frontend/component/src/components/app-sidebar/app-download-button/index.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/app-download-button/index.css.ts @@ -1,3 +1,4 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; export { closeIcon, @@ -7,16 +8,14 @@ export { particles, root, } from '../app-updater-button/index.css'; - export const rootPadding = style({ padding: '0 24px', }); - export const label = style({ display: 'flex', alignItems: 'center', width: '100%', height: '100%', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), whiteSpace: 'nowrap', }); diff --git a/packages/frontend/component/src/components/app-sidebar/app-updater-button/index.css.ts b/packages/frontend/component/src/components/app-sidebar/app-updater-button/index.css.ts index 8e1aa32d9..eca5bdf1c 100644 --- a/packages/frontend/component/src/components/app-sidebar/app-updater-button/index.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/app-updater-button/index.css.ts @@ -1,12 +1,12 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const root = style({ display: 'inline-flex', - background: 'var(--affine-white-30)', + background: cssVar('white30'), alignItems: 'center', borderRadius: '8px', - border: '1px solid var(--affine-black-10)', - fontSize: 'var(--affine-font-sm)', + border: `1px solid ${cssVar('black10')}`, + fontSize: cssVar('fontSm'), width: '100%', height: '52px', userSelect: 'none', @@ -16,7 +16,7 @@ export const root = style({ transition: 'all 0.3s ease', selectors: { '&:hover': { - background: 'var(--affine-white-60)', + background: cssVar('white60'), }, '&[data-disabled="true"]': { pointerEvents: 'none', @@ -28,7 +28,7 @@ export const root = style({ right: '-2px', width: '8px', height: '8px', - backgroundColor: 'var(--affine-primary-color)', + backgroundColor: cssVar('primaryColor'), borderRadius: '50%', zIndex: 1, transition: 'opacity 0.3s', @@ -41,13 +41,11 @@ export const root = style({ '--svg-dot-animation': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 122 116'%3E%3Cpath id='b' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M17.9256 115C17.434 111.774 13.1701 104.086 13.4282 95.6465C13.6862 87.207 18.6628 76.0721 17.9256 64.3628C17.1883 52.6535 8.7772 35.9512 9.00452 25.3907C9.23185 14.8302 16.2114 5.06512 17.9256 1'/%3E%3Cpath id='d' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M84.1628 115C85.2376 112.055 94.5618 98.8394 93.9975 91.1338C93.4332 83.4281 82.5505 73.2615 84.1628 62.5704C85.775 51.8793 96.4803 35.4248 95.9832 25.7826C95.4861 16.1404 87.9113 4.71163 84.1628 1'/%3E%3Cpath id='f' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M37.0913 115C37.9604 111.921 44.4347 99.4545 45.3816 92.9773C48.9305 68.7011 35.7877 73.9552 37.0913 62.7781C38.3949 51.6011 47.3889 36.9895 46.9869 26.9091C46.585 16.8286 40.1222 4.88034 37.0913 1'/%3E%3Cpath id='h' stroke='%23fff' stroke-linecap='round' stroke-width='0' d='M112.443 115C111.698 112.235 108.25 106.542 107.715 93.7582C107.241 82.4286 107.229 83.9543 112.443 66.1429C116.085 44.0408 100.661 42.5908 101.006 33.539C101.35 24.4871 109.843 4.48439 112.443 1'/%3E%3Cg%3E%3Ccircle r='1.5' fill='rgba(30, 150, 235, 0.3)'%3E%3CanimateMotion dur='10s' repeatCount='indefinite'%3E%3Cmpath href='%23b' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='1' fill='rgba(30, 150, 235, 0.3)' fill-opacity='1' shape-rendering='crispEdges'%3E%3CanimateMotion dur='8s' repeatCount='indefinite'%3E%3Cmpath href='%23d' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='.5' fill='rgba(30, 150, 235, 0.3)' fill-opacity='1' shape-rendering='crispEdges'%3E%3CanimateMotion dur='4s' repeatCount='indefinite'%3E%3Cmpath href='%23f' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='.8' fill='rgba(30, 150, 235, 0.3)' fill-opacity='1' shape-rendering='crispEdges'%3E%3CanimateMotion dur='6s' repeatCount='indefinite'%3E%3Cmpath href='%23h' /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")`, }, }); - export const icon = style({ marginRight: '18px', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), fontSize: '24px', }); - export const closeIcon = style({ position: 'absolute', top: '4px', @@ -57,9 +55,9 @@ export const closeIcon = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', - boxShadow: 'var(--affine-shadow-1)', - color: 'var(--affine-text-secondary-color)', - backgroundColor: 'var(--affine-background-primary-color)', + boxShadow: cssVar('shadow1'), + color: cssVar('textSecondaryColor'), + backgroundColor: cssVar('backgroundPrimaryColor'), fontSize: '14px', cursor: 'pointer', transition: '0.1s', @@ -77,17 +75,15 @@ export const closeIcon = style({ }, }, }); - export const installLabel = style({ display: 'flex', alignItems: 'center', width: '100%', flex: 1, - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), whiteSpace: 'nowrap', justifyContent: 'space-between', }); - export const installLabelNormal = style([ installLabel, { @@ -98,7 +94,6 @@ export const installLabelNormal = style([ }, }, ]); - export const installLabelHover = style([ installLabel, { @@ -111,7 +106,6 @@ export const installLabelHover = style([ }, }, ]); - export const updateAvailableWrapper = style({ display: 'flex', flexDirection: 'column', @@ -120,11 +114,10 @@ export const updateAvailableWrapper = style({ height: '100%', padding: '8px 0', }); - export const versionLabel = style({ padding: '0 6px', - color: 'var(--affine-text-secondary-color)', - background: 'var(--affine-background-primary-color)', + color: cssVar('textSecondaryColor'), + background: cssVar('backgroundPrimaryColor'), fontSize: '10px', lineHeight: '18px', borderRadius: '4px', @@ -132,13 +125,12 @@ export const versionLabel = style({ overflow: 'hidden', textOverflow: 'ellipsis', }); - export const whatsNewLabel = style({ display: 'flex', alignItems: 'center', width: '100%', height: '100%', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), whiteSpace: 'nowrap', }); export const ellipsisTextOverflow = style({ @@ -146,25 +138,22 @@ export const ellipsisTextOverflow = style({ overflow: 'hidden', textOverflow: 'ellipsis', }); - export const progress = style({ position: 'relative', width: '100%', height: '4px', borderRadius: '12px', - background: 'var(--affine-black-10)', + background: cssVar('black10'), }); - export const progressInner = style({ position: 'absolute', top: 0, left: 0, height: '100%', borderRadius: '12px', - background: 'var(--affine-primary-color)', + background: cssVar('primaryColor'), transition: '0.1s', }); - export const particles = style({ background: `var(--svg-dot-animation), var(--svg-dot-animation)`, backgroundRepeat: 'no-repeat, repeat', @@ -197,7 +186,6 @@ export const particles = style({ }, }, }); - export const halo = style({ overflow: 'hidden', position: 'absolute', diff --git a/packages/frontend/component/src/components/app-sidebar/category-divider/index.css.ts b/packages/frontend/component/src/components/app-sidebar/category-divider/index.css.ts index 27afa7bcd..accfeaf3e 100644 --- a/packages/frontend/component/src/components/app-sidebar/category-divider/index.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/category-divider/index.css.ts @@ -1,7 +1,7 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const root = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), minHeight: '16px', width: 'calc(100% + 6px)', userSelect: 'none', @@ -16,7 +16,6 @@ export const root = style({ }, }, }); - export const label = style({ - color: 'var(--affine-black-30)', + color: cssVar('black30'), }); diff --git a/packages/frontend/component/src/components/app-sidebar/fallback.css.ts b/packages/frontend/component/src/components/app-sidebar/fallback.css.ts index 8551d541b..f353efce4 100644 --- a/packages/frontend/component/src/components/app-sidebar/fallback.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/fallback.css.ts @@ -1,10 +1,8 @@ import { style } from '@vanilla-extract/css'; - export const fallbackStyle = style({ margin: '12px 16px', height: '100%', }); - export const fallbackHeaderStyle = style({ height: '56px', width: '100%', diff --git a/packages/frontend/component/src/components/app-sidebar/index.css.ts b/packages/frontend/component/src/components/app-sidebar/index.css.ts index 8691d0352..21850df03 100644 --- a/packages/frontend/component/src/components/app-sidebar/index.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/index.css.ts @@ -1,12 +1,10 @@ -import type { ComplexStyleRule } from '@vanilla-extract/css'; +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const floatingMaxWidth = 768; - export const navWrapperStyle = style({ zIndex: 3, paddingBottom: '8px', - backgroundColor: 'var(--affine-background-primary-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), '@media': { print: { display: 'none', @@ -15,23 +13,20 @@ export const navWrapperStyle = style({ }, selectors: { '&[data-has-border=true]': { - borderRight: '1px solid var(--affine-border-color)', + borderRight: `1px solid ${cssVar('borderColor')}`, }, }, }); - export const navHeaderButton = style({ width: '32px', height: '32px', flexShrink: 0, }); - export const navHeaderNavigationButtons = style({ display: 'flex', alignItems: 'center', columnGap: '32px', }); - export const navStyle = style({ position: 'relative', width: '100%', @@ -39,7 +34,6 @@ export const navStyle = style({ display: 'flex', flexDirection: 'column', }); - export const navHeaderStyle = style({ flex: '0 0 auto', height: '52px', @@ -47,14 +41,13 @@ export const navHeaderStyle = style({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', - WebkitAppRegion: 'drag', + ['WebkitAppRegion' as string]: 'drag', selectors: { '&[data-is-macos-electron="true"]': { paddingLeft: '90px', }, }, -} as ComplexStyleRule); - +}); export const navBodyStyle = style({ flex: '1 1 auto', height: 'calc(100% - 52px)', @@ -62,7 +55,6 @@ export const navBodyStyle = style({ flexDirection: 'column', rowGap: '4px', }); - export const sidebarFloatMaskStyle = style({ transition: 'opacity .15s', opacity: 0, @@ -72,7 +64,7 @@ export const sidebarFloatMaskStyle = style({ left: 0, right: '100%', bottom: 0, - background: 'var(--affine-background-modal-color)', + background: cssVar('backgroundModalColor'), selectors: { '&[data-open="true"][data-is-floating="true"]': { opacity: 1, diff --git a/packages/frontend/component/src/components/app-sidebar/menu-item/index.css.ts b/packages/frontend/component/src/components/app-sidebar/menu-item/index.css.ts index dd3e25c5a..22a7bd1f0 100644 --- a/packages/frontend/component/src/components/app-sidebar/menu-item/index.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/menu-item/index.css.ts @@ -1,10 +1,9 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const linkItemRoot = style({ color: 'inherit', display: 'contents', }); - export const root = style({ display: 'inline-flex', alignItems: 'center', @@ -16,19 +15,19 @@ export const root = style({ userSelect: 'none', cursor: 'pointer', padding: '0 12px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), marginTop: '4px', position: 'relative', selectors: { '&:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, '&[data-active="true"]': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, '&[data-disabled="true"]': { cursor: 'default', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), pointerEvents: 'none', }, // this is not visible in dark mode @@ -53,14 +52,12 @@ export const root = style({ }, }, }); - export const content = style({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, }); - export const postfix = style({ right: '4px', position: 'absolute', @@ -75,12 +72,10 @@ export const postfix = style({ }, }, }); - export const icon = style({ - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), fontSize: '20px', }); - export const collapsedIconContainer = style({ width: '16px', height: '16px', @@ -99,11 +94,10 @@ export const collapsedIconContainer = style({ pointerEvents: 'none', }, '&:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, }, }); - export const iconsContainer = style({ display: 'flex', alignItems: 'center', @@ -116,7 +110,6 @@ export const iconsContainer = style({ }, }, }); - export const collapsedIcon = style({ transition: 'transform 0.2s ease-in-out', selectors: { @@ -125,7 +118,6 @@ export const collapsedIcon = style({ }, }, }); - export const spacer = style({ flex: 1, }); diff --git a/packages/frontend/component/src/components/app-sidebar/quick-search-input/index.css.ts b/packages/frontend/component/src/components/app-sidebar/quick-search-input/index.css.ts index d748ab9db..b9b0e584b 100644 --- a/packages/frontend/component/src/components/app-sidebar/quick-search-input/index.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/quick-search-input/index.css.ts @@ -1,12 +1,12 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const root = style({ display: 'inline-flex', - background: 'var(--affine-white-10)', + background: cssVar('white10'), alignItems: 'center', borderRadius: '8px', - border: '1px solid var(--affine-black-10)', - fontSize: 'var(--affine-font-sm)', + border: `1px solid ${cssVar('black10')}`, + fontSize: cssVar('fontSm'), width: '100%', height: '36px', userSelect: 'none', @@ -15,18 +15,15 @@ export const root = style({ margin: '20px 0', position: 'relative', }); - export const icon = style({ marginRight: '8px', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), fontSize: '20px', }); - export const spacer = style({ flex: 1, }); - export const shortcutHint = style({ - color: 'var(--affine-black-30)', - fontSize: 'var(--affine-font-base)', + color: cssVar('black30'), + fontSize: cssVar('fontBase'), }); diff --git a/packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.css.ts b/packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.css.ts index a26c55475..658ca6e74 100644 --- a/packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.css.ts @@ -1,11 +1,10 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const baseContainer = style({ padding: '4px 16px', display: 'flex', flexFlow: 'column nowrap', }); - export const scrollableContainerRoot = style({ flex: '1 1 auto', overflowY: 'hidden', @@ -13,7 +12,6 @@ export const scrollableContainerRoot = style({ '--scrollbar-width': '10px', }, }); - export const scrollTopBorder = style({ position: 'absolute', top: 0, @@ -22,24 +20,21 @@ export const scrollTopBorder = style({ height: '1px', transition: 'opacity .3s .2s', opacity: 0, - background: 'var(--affine-black-10)', + background: cssVar('black10'), selectors: { '&[data-has-scroll-top="true"]': { opacity: 1, }, }, }); - export const scrollableViewport = style({ height: '100%', marginTop: '4px', }); - globalStyle(`${scrollableViewport} > div`, { maxWidth: '100%', display: 'block !important', }); - export const scrollableContainer = style([ baseContainer, { @@ -47,7 +42,6 @@ export const scrollableContainer = style([ padding: '4px 8px', }, ]); - export const scrollbar = style({ display: 'flex', flexDirection: 'column', @@ -64,10 +58,9 @@ export const scrollbar = style({ }, }, }); - export const scrollbarThumb = style({ position: 'relative', - background: 'var(--affine-black-30)', + background: cssVar('black30'), borderRadius: '4px', overflow: 'hidden', selectors: { diff --git a/packages/frontend/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts b/packages/frontend/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts index efe0dfbe2..ee6d809f5 100644 --- a/packages/frontend/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const sidebarSwitch = style({ opacity: 0, display: 'none !important', diff --git a/packages/frontend/component/src/components/app-sidebar/spolight/index.css.ts b/packages/frontend/component/src/components/app-sidebar/spolight/index.css.ts index 497d0543a..b3e99da86 100644 --- a/packages/frontend/component/src/components/app-sidebar/spolight/index.css.ts +++ b/packages/frontend/component/src/components/app-sidebar/spolight/index.css.ts @@ -1,10 +1,8 @@ import { createVar, style } from '@vanilla-extract/css'; - export const spotlightX = createVar(); export const spotlightY = createVar(); export const spotlightOpacity = createVar(); export const spotlightSize = createVar(); - export const spotlight = style({ vars: { [spotlightX]: '0px', diff --git a/packages/frontend/component/src/components/auth-components/onboarding-page.css.ts b/packages/frontend/component/src/components/auth-components/onboarding-page.css.ts index 412fcdd56..9dda3215e 100644 --- a/packages/frontend/component/src/components/auth-components/onboarding-page.css.ts +++ b/packages/frontend/component/src/components/auth-components/onboarding-page.css.ts @@ -1,7 +1,7 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const layout = style({ - backgroundColor: 'var(--affine-background-primary-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), height: '100vh', display: 'flex', flexDirection: 'column', @@ -14,11 +14,9 @@ export const layout = style({ }, }, }); - export const header = style({ paddingTop: '24px', paddingRight: '24px', - position: 'sticky', top: 0, display: 'flex', @@ -37,23 +35,20 @@ export const footer = style({ padding: '20px', position: 'sticky', bottom: 0, - backgroundColor: 'var(--affine-background-primary-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), }); - export const scrollableContainer = style({ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '80px 200px 160px', - '@media': { 'screen and (max-width: 1024px)': { padding: '0px 36px 80px', }, }, }); - export const onboardingContainer = style({ maxWidth: '600px', '@media': { @@ -63,7 +58,6 @@ export const onboardingContainer = style({ }, }, }); - export const content = style({ display: 'flex', flexDirection: 'column', @@ -71,16 +65,13 @@ export const content = style({ gap: '36px', minHeight: '450px', }); - export const question = style({ - color: 'var(--affine-text-color)', fontFamily: 'Inter', - fontSize: 'var(--affine-font-h-1)', + fontSize: cssVar('fontH1'), fontStyle: 'normal', fontWeight: 600, lineHeight: '36px', }); - export const optionsWrapper = style({ display: 'flex', flexDirection: 'column', @@ -88,7 +79,6 @@ export const optionsWrapper = style({ gap: '16px', flexGrow: 1, }); - export const buttonWrapper = style({ display: 'flex', flexDirection: 'row', @@ -96,23 +86,19 @@ export const buttonWrapper = style({ gap: '24px', flexShrink: 0, }); - export const checkBox = style({ alignItems: 'center', fontSize: '24px', }); - globalStyle(`${checkBox} svg`, { - color: 'var(--affine-brand-color)', + color: cssVar('brandColor'), flexShrink: 0, marginRight: '8px', }); - export const label = style({ - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), fontWeight: 500, }); - export const input = style({ width: '520px', '@media': { @@ -121,16 +107,13 @@ export const input = style({ }, }, }); - export const button = style({ fontWeight: 600, - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), }); - export const openAFFiNEButton = style({ alignSelf: 'flex-start', }); - export const disableButton = style({ position: 'absolute', display: 'none', @@ -139,40 +122,36 @@ export const disableButton = style({ export const windowsAppButton = style({ marginRight: '24px', }); - export const thankContainer = style({ display: 'flex', flexDirection: 'column', gap: '24px', }); - export const thankTitle = style({ - fontSize: 'var(--affine-font-title)', + fontSize: cssVar('fontTitle'), fontWeight: '700', lineHeight: '44px', }); - export const thankText = style({ - fontSize: 'var(--affine-font-h-6)', + fontSize: cssVar('fontH6'), height: '300px', fontWeight: '600', lineHeight: '26px', }); - export const linkGroup = style({ display: 'flex', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), height: '16px', gap: '6px', width: '100%', justifyContent: 'flex-end', - backgroundColor: 'var(--affine-background-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), }); export const link = style({ - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), selectors: { '&:visited': { - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), }, }, }); diff --git a/packages/frontend/component/src/components/auth-components/password-input/style.css.ts b/packages/frontend/component/src/components/auth-components/password-input/style.css.ts index 389a0065c..2d9e66e2e 100644 --- a/packages/frontend/component/src/components/auth-components/password-input/style.css.ts +++ b/packages/frontend/component/src/components/auth-components/password-input/style.css.ts @@ -1,28 +1,27 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const tag = style({ padding: '0 15px', height: 20, lineHeight: '20px', borderRadius: 10, - fontSize: 'var(--affine-font-xs)', - + fontSize: cssVar('fontXs'), selectors: { '&.weak': { - backgroundColor: 'var(--affine-tag-red)', - color: 'var(--affine-error-color)', + backgroundColor: cssVar('tagRed'), + color: cssVar('errorColor'), }, '&.medium': { - backgroundColor: 'var(--affine-tag-orange)', - color: 'var(--affine-warning-color)', + backgroundColor: cssVar('tagOrange'), + color: cssVar('warningColor'), }, '&.strong': { - backgroundColor: 'var(--affine-tag-green)', - color: 'var(--affine-success-color)', + backgroundColor: cssVar('tagGreen'), + color: cssVar('successColor'), }, '&.maximum': { - backgroundColor: 'var(--affine-tag-red)', - color: 'var(--affine-error-color)', + backgroundColor: cssVar('tagRed'), + color: cssVar('errorColor'), }, }, }); diff --git a/packages/frontend/component/src/components/auth-components/share.css.ts b/packages/frontend/component/src/components/auth-components/share.css.ts index a1fde37f4..f9601f581 100644 --- a/packages/frontend/component/src/components/auth-components/share.css.ts +++ b/packages/frontend/component/src/components/auth-components/share.css.ts @@ -1,17 +1,15 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, keyframes, style } from '@vanilla-extract/css'; - export const modalHeaderWrapper = style({}); - globalStyle(`${modalHeaderWrapper} .logo`, { - fontSize: 'var(--affine-font-h-3)', + fontSize: cssVar('fontH3'), fontWeight: 600, - color: 'var(--affine-blue)', + color: cssVar('blue'), marginRight: '6px', verticalAlign: 'middle', }); - globalStyle(`${modalHeaderWrapper} > p:first-of-type`, { - fontSize: 'var(--affine-font-h-5)', + fontSize: cssVar('fontH5'), fontWeight: 600, marginBottom: '4px', lineHeight: '28px', @@ -19,11 +17,10 @@ globalStyle(`${modalHeaderWrapper} > p:first-of-type`, { alignItems: 'center', }); globalStyle(`${modalHeaderWrapper} > p:last-of-type`, { - fontSize: 'var(--affine-font-h-4)', + fontSize: cssVar('fontH4'), fontWeight: 600, lineHeight: '28px', }); - export const authInputWrapper = style({ paddingBottom: '30px', position: 'relative', @@ -33,34 +30,39 @@ export const authInputWrapper = style({ }, }, }); - globalStyle(`${authInputWrapper} label`, { display: 'block', color: 'var(--light-text-color-text-secondary-color, #8E8D91)', marginBottom: '4px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 600, lineHeight: '22px', }); export const formHint = style({ - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), position: 'absolute', bottom: '4px', left: 0, lineHeight: '22px', selectors: { '&.error': { - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), }, '&.warning': { - color: 'var(--affine-warning-color)', + color: cssVar('warningColor'), }, }, }); const rotate = keyframes({ - '0%': { transform: 'rotate(0deg)' }, - '50%': { transform: 'rotate(180deg)' }, - '100%': { transform: 'rotate(360deg)' }, + '0%': { + transform: 'rotate(0deg)', + }, + '50%': { + transform: 'rotate(180deg)', + }, + '100%': { + transform: 'rotate(360deg)', + }, }); export const loading = style({ width: '15px', @@ -68,7 +70,7 @@ export const loading = style({ position: 'relative', borderRadius: '50%', overflow: 'hidden', - backgroundColor: 'var(--affine-border-color)', + backgroundColor: cssVar('borderColor'), selectors: { '&::after': { content: '""', @@ -88,7 +90,7 @@ export const loading = style({ content: '""', width: '20px', height: '20px', - backgroundColor: 'var(--affine-blue)', + backgroundColor: cssVar('blue'), position: 'absolute', left: '50%', bottom: '50%', @@ -98,16 +100,14 @@ export const loading = style({ }, }, }); - export const authContent = style({ - fontSize: 'var(--affine-font-base)', - lineHeight: 'var(--affine-font-h-3)', + fontSize: cssVar('fontBase'), + lineHeight: cssVar('fontH3'), marginTop: '30px', }); globalStyle(`${authContent} a`, { - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), }); - export const authCodeContainer = style({ paddingBottom: '40px', position: 'relative', @@ -117,10 +117,9 @@ export const authCodeWrapper = style({ justifyContent: 'space-between', alignItems: 'center', }); - export const authCodeErrorMessage = style({ - color: 'var(--affine-error-color)', - fontSize: 'var(--affine-font-sm)', + color: cssVar('errorColor'), + fontSize: cssVar('fontSm'), textAlign: 'center', lineHeight: '1.5', position: 'absolute', @@ -129,7 +128,6 @@ export const authCodeErrorMessage = style({ bottom: 5, margin: 'auto', }); - export const resendButtonWrapper = style({ height: 32, display: 'flex', @@ -137,20 +135,18 @@ export const resendButtonWrapper = style({ alignItems: 'center', marginTop: 30, }); - globalStyle(`${resendButtonWrapper} .resend-code-hint`, { fontWeight: 600, - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), marginRight: 8, }); - export const authPageContainer = style({ height: '100vh', width: '100vw', display: 'flex', justifyContent: 'center', alignItems: 'center', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), '@media': { 'screen and (max-width: 1024px)': { flexDirection: 'column', @@ -171,25 +167,21 @@ globalStyle(`${authPageContainer} .wrapper`, { globalStyle(`${authPageContainer} .content`, { maxWidth: '700px', }); - globalStyle(`${authPageContainer} .title`, { - fontSize: 'var(--affine-font-title)', + fontSize: cssVar('fontTitle'), fontWeight: 600, marginBottom: '28px', }); - globalStyle(`${authPageContainer} .subtitle`, { marginBottom: '28px', }); globalStyle(`${authPageContainer} a`, { - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), }); - export const signInPageContainer = style({ width: '400px', margin: '205px auto 0', }); - export const input = style({ width: '330px', '@media': { diff --git a/packages/frontend/component/src/components/card/block-card/styles.css.ts b/packages/frontend/component/src/components/card/block-card/styles.css.ts index c04ecb6d4..f23265aad 100644 --- a/packages/frontend/component/src/components/card/block-card/styles.css.ts +++ b/packages/frontend/component/src/components/card/block-card/styles.css.ts @@ -1,44 +1,41 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const blockCard = style({ display: 'flex', gap: '12px', padding: '8px 12px', - color: 'var(--affine-text-primary-color)', - backgroundColor: 'var(--affine-white-80)', + color: cssVar('textPrimaryColor'), + backgroundColor: cssVar('white80'), borderRadius: '8px', userSelect: 'none', cursor: 'pointer', textAlign: 'start', - boxShadow: 'var(--affine-shadow-1)', + boxShadow: cssVar('shadow1'), selectors: { '&:hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, '&[aria-disabled]': { - color: 'var(--affine-text-disable-color)', + color: cssVar('textDisableColor'), }, '&[aria-disabled]:hover': { - backgroundColor: 'var(--affine-white-80)', + backgroundColor: cssVar('white80'), cursor: 'not-allowed', }, // TODO active styles }, }); - export const blockCardAround = style({ display: 'flex', justifyContent: 'center', alignItems: 'center', }); - export const blockCardContent = style({ display: 'flex', flexDirection: 'column', flex: 1, }); - export const blockCardDesc = style({ - color: 'var(--affine-text-secondary-color)', - fontSize: 'var(--affine-font-xs)', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontXs'), }); diff --git a/packages/frontend/component/src/components/global-loading/index.css.ts b/packages/frontend/component/src/components/global-loading/index.css.ts index aa1181e88..99df8bc04 100644 --- a/packages/frontend/component/src/components/global-loading/index.css.ts +++ b/packages/frontend/component/src/components/global-loading/index.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const globalLoadingWrapperStyle = style({ position: 'fixed', top: 0, @@ -7,13 +7,13 @@ export const globalLoadingWrapperStyle = style({ bottom: 0, right: '100%', zIndex: 5, - backgroundColor: 'var(--affine-background-modal-color)', + backgroundColor: cssVar('backgroundModalColor'), opacity: 0, transition: 'opacity .3s', display: 'flex', alignItems: 'center', justifyContent: 'center', - color: 'var(--affine-processing-color)', + color: cssVar('processingColor'), '@media': { print: { display: 'none', diff --git a/packages/frontend/component/src/components/import-page/index.css.ts b/packages/frontend/component/src/components/import-page/index.css.ts index 48d75a1c3..5d8954312 100644 --- a/packages/frontend/component/src/components/import-page/index.css.ts +++ b/packages/frontend/component/src/components/import-page/index.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const importPageContainerStyle = style({ position: 'relative', display: 'flex', @@ -8,11 +8,10 @@ export const importPageContainerStyle = style({ justifyContent: 'center', alignItems: 'center', borderRadius: '12px', - boxShadow: 'var(--affine-popover-shadow)', - background: 'var(--affine-background-overlay-panel-color)', + boxShadow: cssVar('popoverShadow'), + background: cssVar('backgroundOverlayPanelColor'), overflow: 'hidden', }); - export const importPageBodyStyle = style({ display: 'flex', padding: '32px 40px 20px 40px', @@ -20,7 +19,6 @@ export const importPageBodyStyle = style({ gap: '20px', alignSelf: 'stretch', }); - export const importPageButtonContainerStyle = style({ display: 'grid', gridTemplateColumns: '1fr 1fr', @@ -30,16 +28,14 @@ export const importPageButtonContainerStyle = style({ gap: '20px', alignSelf: 'stretch', }); - globalStyle(`${importPageBodyStyle} .title`, { - fontSize: 'var(--affine-font-h-6)', + fontSize: cssVar('fontH6'), fontWeight: 600, }); - globalStyle(`${importPageBodyStyle} a`, { whiteSpace: 'nowrap', wordBreak: 'break-word', - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), textDecoration: 'none', cursor: 'pointer', }); diff --git a/packages/frontend/component/src/components/not-found-page/styles.css.ts b/packages/frontend/component/src/components/not-found-page/styles.css.ts index 7ecf6cb4a..8f340b95e 100644 --- a/packages/frontend/component/src/components/not-found-page/styles.css.ts +++ b/packages/frontend/component/src/components/not-found-page/styles.css.ts @@ -1,8 +1,8 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const notFoundPageContainer = style({ - fontSize: 'var(--affine-font-base)', - color: 'var(--affine-text-primary-color)', + fontSize: cssVar('fontBase'), + color: cssVar('textPrimaryColor'), height: '100vh', display: 'flex', alignItems: 'center', @@ -10,7 +10,6 @@ export const notFoundPageContainer = style({ width: '100vw', padding: '0 20px', }); - export const wrapper = style({ display: 'flex', alignItems: 'center', @@ -18,5 +17,5 @@ export const wrapper = style({ margin: '24px auto 0', }); export const largeButtonEffect = style({ - boxShadow: 'var(--affine-large-button-effect) !important', + boxShadow: `${cssVar('largeButtonEffect')} !important`, }); diff --git a/packages/frontend/component/src/components/notification-center/index.css.ts b/packages/frontend/component/src/components/notification-center/index.css.ts index a99a55b8e..85a6c65ae 100644 --- a/packages/frontend/component/src/components/notification-center/index.css.ts +++ b/packages/frontend/component/src/components/notification-center/index.css.ts @@ -1,9 +1,8 @@ +import { cssVar } from '@toeverything/theme'; // Credits to sonner // License on the MIT // https://github.com/emilkowalski/sonner/blob/5cb703edc108a23fd74979235c2f3c4005edd2a7/src/styles.css - import { globalStyle, style, styleVariants } from '@vanilla-extract/css'; - export const notificationCenterViewportStyle = style({ position: 'fixed', height: '500px', @@ -29,7 +28,6 @@ globalStyle(`${notificationMultimediaStyle} > *`, { objectFit: 'cover', cursor: 'unset', }); - export const notificationStyle = style({ position: 'absolute', borderRadius: '8px', @@ -114,7 +112,7 @@ export const notificationIconStyle = style({ fontSize: '24px', marginLeft: '18px', marginRight: '8px', - color: 'var(--affine-processing-color)', + color: cssVar('processingColor'), display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -127,9 +125,9 @@ export const hasMediaStyle = style({ paddingBottom: '16px', width: '380px', borderRadius: '8px', - boxShadow: 'var(--affine-shadow-1)', - border: '1px solid var(--affine-border-color)', - background: 'var(--affine-white)', + boxShadow: cssVar('shadow1'), + border: `1px solid ${cssVar('borderColor')}`, + background: cssVar('white'), transition: 'all 0.3s', }); export const notificationContentStyle = style({ @@ -140,9 +138,9 @@ export const notificationContentStyle = style({ paddingBottom: '16px', width: '380px', borderRadius: '8px', - boxShadow: 'var(--affine-shadow-1)', - border: '1px solid var(--affine-black-10)', - background: 'var(--affine-white)', + boxShadow: cssVar('shadow1'), + border: `1px solid ${cssVar('black10')}`, + background: cssVar('white'), transition: 'all 0.3s', }); export const notificationTitleContactStyle = style({ @@ -150,7 +148,7 @@ export const notificationTitleContactStyle = style({ width: '200px', overflow: 'wrap', lineHeight: '24px', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), }); export const notificationTitleStyle = style({ display: 'flex', @@ -159,14 +157,14 @@ export const notificationTitleStyle = style({ justifyContent: 'flex-start', }); export const notificationDescriptionStyle = style({ - fontSize: 'var(--affine-font-sm)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontSm'), + color: cssVar('textSecondaryColor'), marginBottom: '4px', lineHeight: '22px', }); export const notificationTimeStyle = style({ - fontSize: 'var(--affine-font-sm)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontSm'), + color: cssVar('textSecondaryColor'), marginBottom: '4px', }); export const closeButtonStyle = style({ @@ -192,20 +190,20 @@ export const closeButtonWithMediaStyle = style({ alignItems: 'center', cursor: 'pointer', borderRadius: '4px', - color: 'var(--affine-pure-black)', + color: cssVar('pureBlack'), ':hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, }); export const closeButtonColorStyle = style({ - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }); export const undoButtonStyle = style({ - fontSize: 'var(--affine-font-sm)', - background: 'var(--affine-hover-color)', + fontSize: cssVar('fontSm'), + background: cssVar('hoverColor'), padding: '3px 6px', borderRadius: '4px', - color: 'var(--affine-processing-color)', + color: cssVar('processingColor'), cursor: 'pointer', }); export const undoButtonWithMediaStyle = style({ @@ -213,13 +211,13 @@ export const undoButtonWithMediaStyle = style({ marginRight: '16px', }); export const messageStyle = style({ - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), width: '200px', marginLeft: '50px', lineHeight: '18px', }); export const progressBarStyle = style({ - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), width: '100%', height: '10px', marginTop: '10px', @@ -228,42 +226,42 @@ export const progressBarStyle = style({ marginBottom: '16px', }); export const darkSuccessStyle = style({ - background: 'var(--affine-success-color)', + background: cssVar('successColor'), borderRadius: '8px', }); export const darkInfoStyle = style({ - background: 'var(--affine-processing-color)', + background: cssVar('processingColor'), borderRadius: '8px', }); export const darkErrorStyle = style({ - background: 'var(--affine-error-color)', + background: cssVar('errorColor'), borderRadius: '8px', }); export const darkWarningStyle = style({ - background: 'var(--affine-warning-color)', + background: cssVar('warningColor'), borderRadius: '8px', }); export const lightSuccessStyle = style({ - background: 'var(--affine-background-success-color)', + background: cssVar('backgroundSuccessColor'), borderRadius: '8px', }); export const lightInfoStyle = style({ - background: 'var(--affine-background-processing-color)', + background: cssVar('backgroundProcessingColor'), borderRadius: '8px', }); export const lightErrorStyle = style({ - background: 'var(--affine-background-error-color)', + background: cssVar('backgroundErrorColor'), borderRadius: '8px', }); export const lightWarningStyle = style({ - background: 'var(--affine-background-warning-color)', + background: cssVar('backgroundWarningColor'), borderRadius: '8px', }); export const darkColorStyle = style({ - color: 'var(--affine-pure-white)', + color: cssVar('pureWhite'), }); export const lightInfoIconStyle = style({ - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), }); export const defaultCollapseStyle = styleVariants({ secondary: { diff --git a/packages/frontend/component/src/components/page-detail-skeleton/index.css.ts b/packages/frontend/component/src/components/page-detail-skeleton/index.css.ts index 738980504..e1612d44e 100644 --- a/packages/frontend/component/src/components/page-detail-skeleton/index.css.ts +++ b/packages/frontend/component/src/components/page-detail-skeleton/index.css.ts @@ -1,20 +1,17 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const pageDetailSkeletonStyle = style({ padding: '0 20px', }); - export const pageDetailSkeletonTitleStyle = style({ height: '52px', width: '100%', }); - export const blockSuiteEditorStyle = style({ - maxWidth: 'var(--affine-editor-width)', + maxWidth: cssVar('editorWidth'), margin: '0 2rem', padding: '0 24px', }); - export const blockSuiteEditorHeaderStyle = style({ marginTop: '40px', marginBottom: '40px', diff --git a/packages/frontend/component/src/components/resize-panel/resize-panel.css.ts b/packages/frontend/component/src/components/resize-panel/resize-panel.css.ts index 2fcbd37a0..38adb2e0c 100644 --- a/packages/frontend/component/src/components/resize-panel/resize-panel.css.ts +++ b/packages/frontend/component/src/components/resize-panel/resize-panel.css.ts @@ -1,11 +1,10 @@ +import { cssVar } from '@toeverything/theme'; import { createVar, style } from '@vanilla-extract/css'; - export const panelWidthVar = createVar('panel-width'); export const resizeHandleOffsetVar = createVar('resize-handle-offset'); export const resizeHandleVerticalPadding = createVar( 'resize-handle-vertical-padding' ); - export const root = style({ vars: { [panelWidthVar]: '256px', @@ -38,13 +37,11 @@ export const root = style({ }, }, }); - export const panelContent = style({ position: 'relative', height: '100%', overflow: 'auto', }); - export const resizeHandleContainer = style({ position: 'absolute', right: resizeHandleOffsetVar, @@ -82,13 +79,12 @@ export const resizeHandleContainer = style({ }, }, }); - export const resizerInner = style({ position: 'absolute', height: '100%', width: '2px', borderRadius: '2px', - backgroundColor: 'var(--affine-primary-color)', + backgroundColor: cssVar('primaryColor'), transition: 'all 0.2s ease-in-out', transform: 'translateX(0.5px)', selectors: { diff --git a/packages/frontend/component/src/components/setting-components/share.css.ts b/packages/frontend/component/src/components/setting-components/share.css.ts index 7f0984346..2b06a4361 100644 --- a/packages/frontend/component/src/components/setting-components/share.css.ts +++ b/packages/frontend/component/src/components/setting-components/share.css.ts @@ -1,26 +1,23 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const settingHeader = style({ - borderBottom: '1px solid var(--affine-border-color)', + borderBottom: `1px solid ${cssVar('borderColor')}`, paddingBottom: '24px', marginBottom: '24px', }); - globalStyle(`${settingHeader} .title`, { - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), fontWeight: 600, lineHeight: '24px', marginBottom: '4px', }); - globalStyle(`${settingHeader} .subtitle`, { - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), lineHeight: '16px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), }); - export const wrapper = style({ - borderBottom: '1px solid var(--affine-border-color)', + borderBottom: `1px solid ${cssVar('borderColor')}`, paddingBottom: '24px', marginBottom: '24px', selectors: { @@ -31,18 +28,16 @@ export const wrapper = style({ }, }, }); - globalStyle(`${wrapper} .title`, { - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 600, lineHeight: '18px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), marginBottom: '16px', }); - export const settingRow = style({ marginBottom: '25px', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), borderRadius: '8px', selectors: { '&.two-col': { @@ -67,7 +62,6 @@ export const settingRow = style({ }, }, }); - globalStyle(`${settingRow} .left-col`, { flex: 1, maxWidth: '100%', @@ -78,12 +72,12 @@ globalStyle(`${settingRow}.two-col .left-col`, { }); globalStyle(`${settingRow} .name`, { marginBottom: '2px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 600, }); globalStyle(`${settingRow} .desc`, { - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), }); globalStyle(`${settingRow} .right-col`, { display: 'flex', @@ -91,21 +85,18 @@ globalStyle(`${settingRow} .right-col`, { paddingLeft: '15px', flexShrink: 0, }); - export const storageProgressContainer = style({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }); - export const storageProgressWrapper = style({ flexGrow: 1, marginRight: '20px', }); - globalStyle(`${storageProgressWrapper} .storage-progress-desc`, { - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), height: '20px', display: 'flex', justifyContent: 'space-between', @@ -115,19 +106,18 @@ globalStyle(`${storageProgressWrapper} .storage-progress-desc`, { globalStyle(`${storageProgressWrapper} .storage-progress-bar-wrapper`, { height: '8px', borderRadius: '4px', - backgroundColor: 'var(--affine-black-10)', + backgroundColor: cssVar('black10'), overflow: 'hidden', }); export const storageProgressBar = style({ height: '100%', - backgroundColor: 'var(--affine-processing-color)', + backgroundColor: cssVar('processingColor'), selectors: { '&.danger': { - backgroundColor: 'var(--affine-error-color)', + backgroundColor: cssVar('errorColor'), }, }, }); - export const storageButton = style({ padding: '4px 12px', }); diff --git a/packages/frontend/component/src/components/tour-modal/index.css.ts b/packages/frontend/component/src/components/tour-modal/index.css.ts index 41d50ae1e..451bf11a1 100644 --- a/packages/frontend/component/src/components/tour-modal/index.css.ts +++ b/packages/frontend/component/src/components/tour-modal/index.css.ts @@ -1,11 +1,11 @@ +import { cssVar } from '@toeverything/theme'; import { keyframes, style } from '@vanilla-extract/css'; - export const modalStyle = style({ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', - backgroundColor: 'var(--affine-background-secondary-color)', + backgroundColor: cssVar('backgroundSecondaryColor'), borderRadius: '16px', overflow: 'hidden', }); @@ -19,7 +19,7 @@ export const titleContainerStyle = style({ overflow: 'hidden', }); export const titleStyle = style({ - fontSize: 'var(--affine-font-h6)', + fontSize: cssVar('fontH6'), fontWeight: '600', marginTop: '12px', position: 'absolute', @@ -77,7 +77,6 @@ export const slideToLeftStyle = style({ export const slideToRightStyle = style({ animation: `${slideToRight} 0.3s ease-in-out forwards`, }); - export const containerStyle = style({ width: '100%', display: 'flex', @@ -105,7 +104,7 @@ export const videoStyle = style({ position: 'absolute', objectFit: 'fill', height: '300px', - border: '1px solid var(--affine-border-color)', + border: `1px solid ${cssVar('borderColor')}`, transition: 'opacity 0.5s ease-in-out', }); const fadeIn = keyframes({ @@ -120,7 +119,6 @@ export const videoActiveStyle = style({ animation: `${fadeIn} 0.5s ease-in-out forwards`, opacity: 0, }); - export const arrowStyle = style({ wordBreak: 'break-all', wordWrap: 'break-word', @@ -142,12 +140,11 @@ export const descriptionContainerStyle = style({ position: 'relative', overflow: 'hidden', }); - export const descriptionStyle = style({ marginTop: '15px', width: '100%', display: 'flex', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), lineHeight: '18px', position: 'absolute', }); @@ -169,7 +166,7 @@ export const tabStyle = style({ left: '0', width: '100%', height: '2px', - background: 'var(--affine-text-primary-color)', + background: cssVar('textPrimaryColor'), transition: 'all 0.15s ease-in-out', opacity: 0.2, cursor: 'pointer', @@ -191,5 +188,5 @@ export const tabContainerStyle = style({ }); export const buttonDisableStyle = style({ cursor: 'not-allowed', - color: 'var(--affine-text-disable-color)', + color: cssVar('textDisableColor'), }); diff --git a/packages/frontend/component/src/components/workspace-list/index.css.ts b/packages/frontend/component/src/components/workspace-list/index.css.ts index 7060dba6b..8cbed13dc 100644 --- a/packages/frontend/component/src/components/workspace-list/index.css.ts +++ b/packages/frontend/component/src/components/workspace-list/index.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const workspaceItemStyle = style({ '@media': { 'screen and (max-width: 720px)': { diff --git a/packages/frontend/component/src/components/workspace/index.css.ts b/packages/frontend/component/src/components/workspace/index.css.ts index 7e9a59d40..a43570f42 100644 --- a/packages/frontend/component/src/components/workspace/index.css.ts +++ b/packages/frontend/component/src/components/workspace/index.css.ts @@ -1,7 +1,6 @@ +import { cssVar } from '@toeverything/theme'; import { lightCssVariables } from '@toeverything/theme'; -import type { ComplexStyleRule } from '@vanilla-extract/css'; import { globalStyle, style } from '@vanilla-extract/css'; - export const appStyle = style({ width: '100%', position: 'relative', @@ -9,7 +8,7 @@ export const appStyle = style({ display: 'flex', flexGrow: '1', flexDirection: 'row', - backgroundColor: 'var(--affine-background-primary-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), selectors: { '&[data-is-resizing="true"]': { cursor: 'col-resize', @@ -21,7 +20,7 @@ export const appStyle = style({ content: '""', position: 'absolute', inset: 0, - opacity: 'var(--affine-noise-opacity, 0)', + opacity: `var(--affine-noise-opacity, 0)`, backgroundRepeat: 'repeat', backgroundSize: '3%', // todo: figure out how to use vanilla-extract webpack plugin to inject img url @@ -29,32 +28,29 @@ export const appStyle = style({ }, }, }); - globalStyle(`html[data-theme="light"] ${appStyle}`, { vars: { '--affine-noise-opacity': '0.35', }, }); - globalStyle(`html[data-theme="dark"] ${appStyle}`, { vars: { '--affine-noise-opacity': '1', }, - '@media': { print: { vars: lightCssVariables, }, }, }); - export const mainContainerStyle = style({ position: 'relative', - zIndex: 0, // it will create stacking context to limit layer of child elements and be lower than after auto zIndex + zIndex: 0, + // it will create stacking context to limit layer of child elements and be lower than after auto zIndex width: 0, flex: 1, maxWidth: '100%', - backgroundColor: 'var(--affine-background-primary-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), selectors: { '&[data-show-padding="true"]': { margin: '8px', @@ -80,19 +76,18 @@ export const mainContainerStyle = style({ width: '100%', top: '-8px', left: 0, - WebkitAppRegion: 'drag', + ['WebkitAppRegion' as string]: 'drag', }, '&[data-transparent=true]': { backgroundColor: 'transparent', }, }, -} as ComplexStyleRule); - +}); export const toolStyle = style({ position: 'absolute', right: '30px', bottom: '30px', - zIndex: 'var(--affine-z-index-popover)', + zIndex: cssVar('zIndexPopover'), display: 'flex', flexDirection: 'column', gap: '12px', diff --git a/packages/frontend/component/src/theme/theme.css.ts b/packages/frontend/component/src/theme/theme.css.ts index 24187dc84..e0c1790bf 100644 --- a/packages/frontend/component/src/theme/theme.css.ts +++ b/packages/frontend/component/src/theme/theme.css.ts @@ -1,20 +1,17 @@ +import { cssVar } from '@toeverything/theme'; import { darkCssVariables, lightCssVariables } from '@toeverything/theme'; import { globalStyle } from '@vanilla-extract/css'; - globalStyle('body', { - color: 'var(--affine-text-primary-color)', - fontFamily: 'var(--affine-font-family)', - fontSize: 'var(--affine-font-base)', + color: cssVar('textPrimaryColor'), + fontFamily: cssVar('fontFamily'), + fontSize: cssVar('fontBase'), }); - globalStyle('html', { vars: lightCssVariables, }); - globalStyle('html[data-theme="dark"]', { vars: darkCssVariables, }); - if (process.env.NODE_ENV === 'development') { globalStyle('.undefined', { border: '5px solid red !important', diff --git a/packages/frontend/component/src/ui/avatar/style.css.ts b/packages/frontend/component/src/ui/avatar/style.css.ts index 46753c359..e7df95878 100644 --- a/packages/frontend/component/src/ui/avatar/style.css.ts +++ b/packages/frontend/component/src/ui/avatar/style.css.ts @@ -1,6 +1,6 @@ +import { cssVar } from '@toeverything/theme'; import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css'; export const sizeVar = createVar('sizeVar'); - const bottomAnimation = keyframes({ '0%': { top: '-44%', @@ -75,7 +75,6 @@ const middleAnimation = keyframes({ transform: 'matrix(-0.48, -0.88, 0.8, -0.6, 0, 0)', }, }); - export const DefaultAvatarContainerStyle = style({ width: '100%', height: '100%', @@ -83,7 +82,6 @@ export const DefaultAvatarContainerStyle = style({ borderRadius: '50%', overflow: 'hidden', }); - export const DefaultAvatarMiddleItemStyle = style({ width: '83%', height: '81%', @@ -128,7 +126,6 @@ export const DefaultAvatarTopItemStyle = style({ transform: 'matrix(-0.28, -0.96, 0.93, -0.37, 0, 0)', transformOrigin: 'center center', }); - export const avatarRoot = style({ position: 'relative', display: 'inline-flex', @@ -148,14 +145,12 @@ export const avatarWrapper = style({ userSelect: 'none', position: 'relative', }); - export const avatarImage = style({ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '50%', }); - export const avatarFallback = style({ width: '100%', height: '100%', @@ -163,12 +158,11 @@ export const avatarFallback = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', - backgroundColor: 'var(--affine-primary-color)', - color: 'var(--affine-white)', + backgroundColor: cssVar('primaryColor'), + color: cssVar('white'), lineHeight: '1', fontWeight: '500', }); - export const hoverWrapper = style({ width: '100%', height: '100%', @@ -179,7 +173,7 @@ export const hoverWrapper = style({ alignItems: 'center', backgroundColor: 'rgba(60, 61, 63, 0.5)', zIndex: '1', - color: 'var(--affine-white)', + color: cssVar('white'), opacity: 0, transition: 'opacity .15s', cursor: 'pointer', @@ -189,7 +183,6 @@ export const hoverWrapper = style({ }, }, }); - export const removeButton = style({ position: 'absolute', right: '-8px', diff --git a/packages/frontend/component/src/ui/button/button.css.ts b/packages/frontend/component/src/ui/button/button.css.ts index bb48c4c0e..21d9349c6 100644 --- a/packages/frontend/component/src/ui/button/button.css.ts +++ b/packages/frontend/component/src/ui/button/button.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const button = style({ display: 'inline-flex', justifyContent: 'center', @@ -11,43 +11,42 @@ export const button = style({ border: '1px solid', padding: '0 18px', borderRadius: '8px', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), fontWeight: 500, transition: 'all .3s', ['WebkitAppRegion' as string]: 'no-drag', cursor: 'pointer', - // changeable height: '28px', - background: 'var(--affine-white)', - borderColor: 'var(--affine-border-color)', - color: 'var(--affine-text-primary-color)', - + background: cssVar('white'), + borderColor: cssVar('borderColor'), + color: cssVar('textPrimaryColor'), selectors: { '&.text-bold': { fontWeight: 600, }, '&:not(.without-hover):hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, '&.disabled': { opacity: '.4', cursor: 'default', - color: 'var(--affine-disable-color)', + color: cssVar('textDisableColor'), pointerEvents: 'none', }, '&.loading': { cursor: 'default', - color: 'var(--affine-disable-color)', + color: cssVar('textDisableColor'), pointerEvents: 'none', }, '&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover': { background: 'inherit', }, - - '&.block': { display: 'flex', width: '100%' }, - + '&.block': { + display: 'flex', + width: '100%', + }, '&.circle': { borderRadius: '50%', }, @@ -57,7 +56,7 @@ export const button = style({ // size '&.large': { height: '32px', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), fontWeight: 600, }, '&.round.large': { @@ -65,127 +64,124 @@ export const button = style({ }, '&.extraLarge': { height: '40px', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), fontWeight: 700, }, '&.extraLarge.primary': { - boxShadow: 'var(--affine-large-button-effect) !important', + boxShadow: `${cssVar('largeButtonEffect')} !important`, }, '&.round.extraLarge': { borderRadius: '20px', }, - // type '&.plain': { - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), borderColor: 'transparent', background: 'transparent', }, - '&.primary': { - color: 'var(--affine-pure-white)', - background: 'var(--affine-primary-color)', - borderColor: 'var(--affine-black-10)', - boxShadow: 'var(--affine-button-inner-shadow)', + color: cssVar('pureWhite'), + background: cssVar('primaryColor'), + borderColor: cssVar('black10'), + boxShadow: cssVar('buttonInnerShadow'), }, '&.primary:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'primaryColor' + )}`, }, '&.primary.disabled': { opacity: '.4', cursor: 'default', }, '&.primary.disabled:not(.without-hover):hover': { - background: 'var(--affine-primary-color)', + background: cssVar('primaryColor'), }, - '&.error': { - color: 'var(--affine-pure-white)', - background: 'var(--affine-error-color)', - borderColor: 'var(--affine-black-10)', - boxShadow: 'var(--affine-button-inner-shadow)', + color: cssVar('pureWhite'), + background: cssVar('errorColor'), + borderColor: cssVar('black10'), + boxShadow: cssVar('buttonInnerShadow'), }, '&.error:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'errorColor' + )}`, }, '&.error.disabled': { opacity: '.4', cursor: 'default', }, '&.error.disabled:not(.without-hover):hover': { - background: 'var(--affine-error-color)', + background: cssVar('errorColor'), }, - '&.warning': { - color: 'var(--affine-pure-white)', - background: 'var(--affine-warning-color)', - borderColor: 'var(--affine-black-10)', - boxShadow: 'var(--affine-button-inner-shadow)', + color: cssVar('pureWhite'), + background: cssVar('warningColor'), + borderColor: cssVar('black10'), + boxShadow: cssVar('buttonInnerShadow'), }, '&.warning:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'warningColor' + )}`, }, '&.warning.disabled': { opacity: '.4', cursor: 'default', }, '&.warning.disabled:not(.without-hover):hover': { - background: 'var(--affine-warning-color)', + background: cssVar('warningColor'), }, - '&.success': { - color: 'var(--affine-pure-white)', - background: 'var(--affine-success-color)', - borderColor: 'var(--affine-black-10)', - boxShadow: 'var(--affine-button-inner-shadow)', + color: cssVar('pureWhite'), + background: cssVar('successColor'), + borderColor: cssVar('black10'), + boxShadow: cssVar('buttonInnerShadow'), }, '&.success:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'successColor' + )}`, }, '&.success.disabled': { opacity: '.4', cursor: 'default', }, '&.success.disabled:not(.without-hover):hover': { - background: 'var(--affine-success-color)', + background: cssVar('successColor'), }, - '&.processing': { - color: 'var(--affine-pure-white)', - background: 'var(--affine-processing-color)', - borderColor: 'var(--affine-black-10)', - boxShadow: 'var(--affine-button-inner-shadow)', + color: cssVar('pureWhite'), + background: cssVar('processingColor'), + borderColor: cssVar('black10'), + boxShadow: cssVar('buttonInnerShadow'), }, '&.processing:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'processingColor' + )}`, }, '&.processing.disabled': { opacity: '.4', cursor: 'default', }, '&.processing.disabled:not(.without-hover):hover': { - background: 'var(--affine-processing-color)', + background: cssVar('processingColor'), }, }, }); - globalStyle(`${button} > span`, { // flex: 1, lineHeight: 1, padding: '0 4px', }); - export const buttonIcon = style({ flexShrink: 0, display: 'inline-flex', justifyContent: 'center', alignItems: 'center', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), fontSize: '16px', width: '16px', height: '16px', @@ -207,11 +203,10 @@ export const buttonIcon = style({ height: '20px', }, '&.color-white': { - color: 'var(--affine-pure-white)', + color: cssVar('pureWhite'), }, }, }); - export const iconButton = style({ display: 'inline-flex', justifyContent: 'center', @@ -224,41 +219,38 @@ export const iconButton = style({ transition: 'all .3s', ['WebkitAppRegion' as string]: 'no-drag', cursor: 'pointer', - background: 'var(--affine-white)', - + background: cssVar('white'), // changeable width: '24px', height: '24px', fontSize: '20px', - color: 'var(--affine-text-primary-color)', - borderColor: 'var(--affine-border-color)', + color: cssVar('textPrimaryColor'), + borderColor: cssVar('borderColor'), selectors: { '&.without-padding': { margin: '-2px', }, '&.active': { - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), }, - '&:not(.without-hover):hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, '&.disabled': { opacity: '.4', cursor: 'default', - color: 'var(--affine-disable-color)', + color: cssVar('textDisableColor'), pointerEvents: 'none', }, '&.loading': { cursor: 'default', - color: 'var(--affine-disable-color)', + color: cssVar('textDisableColor'), pointerEvents: 'none', }, '&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover': { background: 'inherit', }, - // size '&.large': { width: '32px', @@ -268,107 +260,114 @@ export const iconButton = style({ '&.large.without-padding': { margin: '-4px', }, - '&.small': { width: '20px', height: '20px', fontSize: '16px' }, - '&.extra-small': { width: '16px', height: '16px', fontSize: '12px' }, - + '&.small': { + width: '20px', + height: '20px', + fontSize: '16px', + }, + '&.extra-small': { + width: '16px', + height: '16px', + fontSize: '12px', + }, // type '&.plain': { - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), borderColor: 'transparent', background: 'transparent', }, '&.plain.active': { - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), }, - '&.primary': { - color: 'var(--affine-white)', - background: 'var(--affine-primary-color)', - borderColor: 'var(--affine-black-10)', + color: cssVar('white'), + background: cssVar('primaryColor'), + borderColor: cssVar('black10'), boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', }, '&.primary:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'primaryColor' + )}`, }, '&.primary.disabled': { opacity: '.4', cursor: 'default', }, '&.primary.disabled:not(.without-hover):hover': { - background: 'var(--affine-primary-color)', + background: cssVar('primaryColor'), }, - '&.error': { - color: 'var(--affine-white)', - background: 'var(--affine-error-color)', - borderColor: 'var(--affine-black-10)', + color: cssVar('white'), + background: cssVar('errorColor'), + borderColor: cssVar('black10'), boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', }, '&.error:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'errorColor' + )}`, }, '&.error.disabled': { opacity: '.4', cursor: 'default', }, '&.error.disabled:not(.without-hover):hover': { - background: 'var(--affine-error-color)', + background: cssVar('errorColor'), }, - '&.warning': { - color: 'var(--affine-white)', - background: 'var(--affine-warning-color)', - borderColor: 'var(--affine-black-10)', + color: cssVar('white'), + background: cssVar('warningColor'), + borderColor: cssVar('black10'), boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', }, '&.warning:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'warningColor' + )}`, }, '&.warning.disabled': { opacity: '.4', cursor: 'default', }, '&.warning.disabled:not(.without-hover):hover': { - background: 'var(--affine-warning-color)', + background: cssVar('warningColor'), }, - '&.success': { - color: 'var(--affine-white)', - background: 'var(--affine-success-color)', - borderColor: 'var(--affine-black-10)', + color: cssVar('white'), + background: cssVar('successColor'), + borderColor: cssVar('black10'), boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', }, '&.success:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'successColor' + )}`, }, '&.success.disabled': { opacity: '.4', cursor: 'default', }, '&.success.disabled:not(.without-hover):hover': { - background: 'var(--affine-success-color)', + background: cssVar('successColor'), }, - '&.processing': { - color: 'var(--affine-white)', - background: 'var(--affine-processing-color)', - borderColor: 'var(--affine-black-10)', + color: cssVar('white'), + background: cssVar('processingColor'), + borderColor: cssVar('black10'), boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', }, '&.processing:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'processingColor' + )}`, }, '&.processing.disabled': { opacity: '.4', cursor: 'default', }, '&.processing.disabled:not(.without-hover):hover': { - background: 'var(--affine-processing-color)', + background: cssVar('processingColor'), }, }, }); diff --git a/packages/frontend/component/src/ui/button/styles.css.ts b/packages/frontend/component/src/ui/button/styles.css.ts index 20e732ade..147696ed0 100644 --- a/packages/frontend/component/src/ui/button/styles.css.ts +++ b/packages/frontend/component/src/ui/button/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const dropdownBtn = style({ display: 'inline-flex', alignItems: 'center', @@ -7,12 +7,12 @@ export const dropdownBtn = style({ padding: '0 10px', // fix dropdown button click area paddingRight: 0, - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), fontWeight: 600, - background: 'var(--affine-background-primary-color)', - border: '1px solid var(--affine-border-color)', + background: cssVar('backgroundPrimaryColor'), + border: `1px solid ${cssVar('borderColor')}`, borderRadius: '8px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), // width: '100%', height: '32px', userSelect: 'none', @@ -20,7 +20,7 @@ export const dropdownBtn = style({ cursor: 'pointer', selectors: { '&:hover': { - background: 'var(--affine-hover-color-filled)', + background: cssVar('hoverColorFilled'), }, '&[data-size=default]': { height: 32, @@ -30,16 +30,14 @@ export const dropdownBtn = style({ }, }, }); - export const divider = style({ width: '0.5px', height: '16px', - background: 'var(--affine-divider-color)', + background: cssVar('dividerColor'), // fix dropdown button click area margin: '0 4px', marginRight: 0, }); - export const dropdownWrapper = style({ width: '100%', height: '100%', @@ -49,16 +47,14 @@ export const dropdownWrapper = style({ paddingLeft: '4px', paddingRight: '10px', }); - export const dropdownIcon = style({ borderRadius: '4px', selectors: { [`${dropdownWrapper}:hover &`]: { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, }, }); - export const radioButton = style({ flexGrow: 1, flex: 1, @@ -69,7 +65,7 @@ export const radioButton = style({ }, }); export const radioButtonContent = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -80,21 +76,19 @@ export const radioButtonContent = style({ whiteSpace: 'nowrap', userSelect: 'none', fontWeight: 600, - selectors: { '&:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, '&[data-state="checked"]': { - background: 'var(--affine-white)', + background: cssVar('white'), }, }, }); - export const radioUncheckedButton = style([ radioButtonContent, { - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), filter: 'none', selectors: { '[data-state="checked"] > &': { @@ -103,18 +97,16 @@ export const radioUncheckedButton = style([ }, }, ]); - export const radioButtonGroup = style({ display: 'inline-flex', justifyContent: 'space-between', alignItems: 'center', - background: 'var(--affine-hover-color-filled)', + background: cssVar('hoverColorFilled'), borderRadius: '10px', padding: '2px', // @ts-expect-error - fix electron drag WebkitAppRegion: 'no-drag', }); - export const button = style({ display: 'inline-flex', justifyContent: 'center', @@ -125,42 +117,41 @@ export const button = style({ border: '1px solid', padding: '0 18px', borderRadius: '8px', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), transition: 'all .3s', ['WebkitAppRegion' as string]: 'no-drag', fontWeight: 600, - // changeable height: '28px', - background: 'var(--affine-white)', - borderColor: 'var(--affine-border-color)', - color: 'var(--affine-text-primary-color)', - + background: cssVar('white'), + borderColor: cssVar('borderColor'), + color: cssVar('textPrimaryColor'), selectors: { '&.text-bold': { fontWeight: 600, }, '&:not(.without-hover):hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, '&.disabled': { opacity: '.4', cursor: 'default', - color: 'var(--affine-disable-color)', + color: cssVar('textDisableColor'), pointerEvents: 'none', }, '&.loading': { cursor: 'default', - color: 'var(--affine-disable-color)', + color: cssVar('textDisableColor'), pointerEvents: 'none', }, '&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover': { background: 'inherit', }, - - '&.block': { display: 'flex', width: '100%' }, - + '&.block': { + display: 'flex', + width: '100%', + }, '&.circle': { borderRadius: '50%', }, @@ -180,118 +171,115 @@ export const button = style({ '&.round.extraLarge': { borderRadius: '20px', }, - // type '&.plain': { - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), borderColor: 'transparent', background: 'transparent', }, - '&.primary': { - color: 'var(--affine-pure-white)', - background: 'var(--affine-primary-color)', - borderColor: 'var(--affine-black-10)', - boxShadow: 'var(--affine-button-inner-shadow)', + color: cssVar('pureWhite'), + background: cssVar('primaryColor'), + borderColor: cssVar('black10'), + boxShadow: cssVar('buttonInnerShadow'), }, '&.primary:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'primaryColor' + )}`, }, '&.primary.disabled': { opacity: '.4', cursor: 'default', }, '&.primary.disabled:not(.without-hover):hover': { - background: 'var(--affine-primary-color)', + background: cssVar('primaryColor'), }, - '&.error': { - color: 'var(--affine-pure-white)', - background: 'var(--affine-error-color)', - borderColor: 'var(--affine-black-10)', - boxShadow: 'var(--affine-button-inner-shadow)', + color: cssVar('pureWhite'), + background: cssVar('errorColor'), + borderColor: cssVar('black10'), + boxShadow: cssVar('buttonInnerShadow'), }, '&.error:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'errorColor' + )}`, }, '&.error.disabled': { opacity: '.4', cursor: 'default', }, '&.error.disabled:not(.without-hover):hover': { - background: 'var(--affine-error-color)', + background: cssVar('errorColor'), }, - '&.warning': { - color: 'var(--affine-white)', - background: 'var(--affine-warning-color)', - borderColor: 'var(--affine-black-10)', - boxShadow: 'var(--affine-button-inner-shadow)', + color: cssVar('white'), + background: cssVar('warningColor'), + borderColor: cssVar('black10'), + boxShadow: cssVar('buttonInnerShadow'), }, '&.warning:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'warningColor' + )}`, }, '&.warning.disabled': { opacity: '.4', cursor: 'default', }, '&.warning.disabled:not(.without-hover):hover': { - background: 'var(--affine-warning-color)', + background: cssVar('warningColor'), }, - '&.success': { - color: 'var(--affine-pure-white)', - background: 'var(--affine-success-color)', - borderColor: 'var(--affine-black-10)', - boxShadow: 'var(--affine-button-inner-shadow)', + color: cssVar('pureWhite'), + background: cssVar('successColor'), + borderColor: cssVar('black10'), + boxShadow: cssVar('buttonInnerShadow'), }, '&.success:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'successColor' + )}`, }, '&.success.disabled': { opacity: '.4', cursor: 'default', }, '&.success.disabled:not(.without-hover):hover': { - background: 'var(--affine-success-color)', + background: cssVar('successColor'), }, - '&.processing': { - color: 'var(--affine-pure-white)', - background: 'var(--affine-processing-color)', - borderColor: 'var(--affine-black-10)', - boxShadow: 'var(--affine-button-inner-shadow)', + color: cssVar('pureWhite'), + background: cssVar('processingColor'), + borderColor: cssVar('black10'), + boxShadow: cssVar('buttonInnerShadow'), }, '&.processing:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'processingColor' + )}`, }, '&.processing.disabled': { opacity: '.4', cursor: 'default', }, '&.processing.disabled:not(.without-hover):hover': { - background: 'var(--affine-processing-color)', + background: cssVar('processingColor'), }, }, }); - globalStyle(`${button} > span`, { // flex: 1, lineHeight: 1, padding: '0 4px', }); - export const buttonIcon = style({ flexShrink: 0, display: 'inline-flex', justifyContent: 'center', alignItems: 'center', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), fontSize: '16px', width: '16px', height: '16px', @@ -313,11 +301,10 @@ export const buttonIcon = style({ height: '20px', }, '&.color-white': { - color: 'var(--affine-white)', + color: cssVar('white'), }, }, }); - export const iconButton = style({ display: 'inline-flex', justifyContent: 'center', @@ -329,40 +316,37 @@ export const iconButton = style({ borderRadius: '4px', transition: 'all .3s', ['WebkitAppRegion' as string]: 'no-drag', - // changeable width: '24px', height: '24px', fontSize: '20px', - color: 'var(--affine-text-primary-color)', - borderColor: 'var(--affine-border-color)', + color: cssVar('textPrimaryColor'), + borderColor: cssVar('borderColor'), selectors: { '&.without-padding': { margin: '-2px', }, '&.active': { - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), }, - '&:not(.without-hover):hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, '&.disabled': { opacity: '.4', cursor: 'default', - color: 'var(--affine-disable-color)', + color: cssVar('textDisableColor'), pointerEvents: 'none', }, '&.loading': { cursor: 'default', - color: 'var(--affine-disable-color)', + color: cssVar('textDisableColor'), pointerEvents: 'none', }, '&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover': { background: 'inherit', }, - // size '&.large': { width: '32px', @@ -372,107 +356,114 @@ export const iconButton = style({ '&.large.without-padding': { margin: '-4px', }, - '&.small': { width: '20px', height: '20px', fontSize: '16px' }, - '&.extra-small': { width: '16px', height: '16px', fontSize: '12px' }, - + '&.small': { + width: '20px', + height: '20px', + fontSize: '16px', + }, + '&.extra-small': { + width: '16px', + height: '16px', + fontSize: '12px', + }, // type '&.plain': { - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), borderColor: 'transparent', background: 'transparent', }, '&.plain.active': { - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), }, - '&.primary': { - color: 'var(--affine-white)', - background: 'var(--affine-primary-color)', - borderColor: 'var(--affine-black-10)', + color: cssVar('white'), + background: cssVar('primaryColor'), + borderColor: cssVar('black10'), boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', }, '&.primary:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'primaryColor' + )}`, }, '&.primary.disabled': { opacity: '.4', cursor: 'default', }, '&.primary.disabled:not(.without-hover):hover': { - background: 'var(--affine-primary-color)', + background: cssVar('primaryColor'), }, - '&.error': { - color: 'var(--affine-white)', - background: 'var(--affine-error-color)', - borderColor: 'var(--affine-black-10)', + color: cssVar('white'), + background: cssVar('errorColor'), + borderColor: cssVar('black10'), boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', }, '&.error:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'errorColor' + )}`, }, '&.error.disabled': { opacity: '.4', cursor: 'default', }, '&.error.disabled:not(.without-hover):hover': { - background: 'var(--affine-error-color)', + background: cssVar('errorColor'), }, - '&.warning': { - color: 'var(--affine-white)', - background: 'var(--affine-warning-color)', - borderColor: 'var(--affine-black-10)', + color: cssVar('white'), + background: cssVar('warningColor'), + borderColor: cssVar('black10'), boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', }, '&.warning:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'warningColor' + )}`, }, '&.warning.disabled': { opacity: '.4', cursor: 'default', }, '&.warning.disabled:not(.without-hover):hover': { - background: 'var(--affine-warning-color)', + background: cssVar('warningColor'), }, - '&.success': { - color: 'var(--affine-white)', - background: 'var(--affine-success-color)', - borderColor: 'var(--affine-black-10)', + color: cssVar('white'), + background: cssVar('successColor'), + borderColor: cssVar('black10'), boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', }, '&.success:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'successColor' + )}`, }, '&.success.disabled': { opacity: '.4', cursor: 'default', }, '&.success.disabled:not(.without-hover):hover': { - background: 'var(--affine-success-color)', + background: cssVar('successColor'), }, - '&.processing': { - color: 'var(--affine-white)', - background: 'var(--affine-processing-color)', - borderColor: 'var(--affine-black-10)', + color: cssVar('white'), + background: cssVar('processingColor'), + borderColor: cssVar('black10'), boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset', }, '&.processing:not(.without-hover):hover': { - background: - 'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)', + background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar( + 'processingColor' + )}`, }, '&.processing.disabled': { opacity: '.4', cursor: 'default', }, '&.processing.disabled:not(.without-hover):hover': { - background: 'var(--affine-processing-color)', + background: cssVar('processingColor'), }, }, }); diff --git a/packages/frontend/component/src/ui/checkbox/index.css.ts b/packages/frontend/component/src/ui/checkbox/index.css.ts index 5a5361324..7f00e1372 100644 --- a/packages/frontend/component/src/ui/checkbox/index.css.ts +++ b/packages/frontend/component/src/ui/checkbox/index.css.ts @@ -1,24 +1,19 @@ import { globalStyle, style } from '@vanilla-extract/css'; - export const root = style({ display: 'inline-flex', alignItems: 'center', position: 'relative', }); - globalStyle(`${root}:hover svg`, { opacity: 0.8, }); - globalStyle(`${root}:active svg`, { opacity: 0.9, }); - export const disabled = style({ opacity: 0.5, pointerEvents: 'none', }); - export const input = style({ opacity: 0, position: 'absolute', @@ -27,7 +22,6 @@ export const input = style({ inset: 0, top: '50%', transform: 'translateY(-50%)', - cursor: 'pointer', fontSize: 'inherit', }); diff --git a/packages/frontend/component/src/ui/date-picker/index.css.ts b/packages/frontend/component/src/ui/date-picker/index.css.ts index fc527ef22..d48c2b9eb 100644 --- a/packages/frontend/component/src/ui/date-picker/index.css.ts +++ b/packages/frontend/component/src/ui/date-picker/index.css.ts @@ -1,3 +1,4 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; /** @@ -6,7 +7,6 @@ import { globalStyle, style } from '@vanilla-extract/css'; globalStyle('.react-datepicker__aria-live', { display: 'none', }); - export const basicCell = style({ display: 'flex', alignItems: 'center', @@ -32,9 +32,8 @@ export const headerLayoutCellOrigin = style({ }, }, }); - export const inputStyle = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), width: '50px', fontWeight: '600', display: 'flex', @@ -43,20 +42,19 @@ export const inputStyle = style({ height: '22px', textAlign: 'center', ':hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), borderRadius: '4px', }, }); export const popperStyle = style({ - boxShadow: 'var(--affine-shadow-2)', + boxShadow: cssVar('shadow2'), // TODO: for menu offset, need to be optimized marginTop: '16px', - background: 'var(--affine-background-overlay-panel-color)', + background: cssVar('backgroundOverlayPanelColor'), borderRadius: '12px', width: '300px', - zIndex: 'var(--affine-z-index-popover)', + zIndex: cssVar('zIndexPopover'), }); - globalStyle('.react-datepicker__header', { background: 'none', border: 'none', @@ -80,20 +78,20 @@ export const monthHeaderStyle = style({ marginBottom: '18px', }); export const monthTitleStyle = style({ - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), fontWeight: '600', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), }); export const yearStyle = style({ marginLeft: '8px', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), fontWeight: '600', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), }); export const mouthStyle = style({ - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), fontWeight: '600', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), cursor: 'pointer', textAlign: 'center', }); @@ -110,7 +108,6 @@ export const headerAction = style({ width: '16px', height: '16px', }); - globalStyle('.react-datepicker__day-names, .react-datepicker__week', { display: 'flex', alignItems: 'center', @@ -128,9 +125,9 @@ export const weekStyle = style([ basicCell, { height: '28px', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), fontWeight: 500, - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), }, ]); export const calendarStyle = style({ @@ -139,37 +136,35 @@ export const calendarStyle = style({ width: '100%', padding: '20px', }); - export const dayStyle = style([ basicCell, { height: '28px', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-primary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textPrimaryColor'), cursor: 'pointer', - fontWeight: '400', borderRadius: '8px', selectors: { '&[aria-selected="false"]:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), borderRadius: '8px', transition: 'background-color 0.3s ease-in-out', }, '&[aria-selected="true"]': { - color: 'var(--affine-pure-white)', - background: 'var(--affine-primary-color)', + color: cssVar('pureWhite'), + background: cssVar('primaryColor'), fontWeight: '500', }, '&[tabindex="0"][aria-selected="false"]': { - background: 'var(--affine-background-overlay-panel-color)', + background: cssVar('backgroundOverlayPanelColor'), }, '&.react-datepicker__day--today[aria-selected="false"]': { fontWeight: '600', - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), }, '&.react-datepicker__day--outside-month[aria-selected="false"]': { - color: 'var(--affine-text-disable-color)', + color: cssVar('textDisableColor'), }, }, }, @@ -178,13 +173,13 @@ export const arrowDownStyle = style({ width: '16px', height: '16px', marginLeft: '4px', - color: 'var(--affine-icon-color)', - fontSize: 'var(--affine-font-sm)', + color: cssVar('iconColor'), + fontSize: cssVar('fontSm'), cursor: 'pointer', }); export const mouthsStyle = style({ - fontSize: 'var(--affine-font-base)', - color: 'var(--affine-text-primary-color)', + fontSize: cssVar('fontBase'), + color: cssVar('textPrimaryColor'), display: 'inline-block', lineHeight: '22px', padding: '6px 16px', @@ -192,32 +187,31 @@ export const mouthsStyle = style({ borderRadius: '8px', selectors: { '&:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), transition: 'background-color 0.3s ease-in-out', borderRadius: '8px', }, '&[aria-selected="true"]': { - color: 'var(--affine-black)', - background: 'var(--affine-hover-color)', + color: cssVar('black'), + background: cssVar('hoverColor'), fontWeight: '400', }, '&[aria-selected="true"]:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, '&[tabindex="0"][aria-selected="false"]': { - background: 'var(--affine-background-overlay-panel-color)', + background: cssVar('backgroundOverlayPanelColor'), }, '&.react-datepicker__month-text--today[aria-selected="false"]': { - background: 'var(--affine-primary-color)', - color: 'var(--affine-palette-line-white)', + background: cssVar('primaryColor'), + color: cssVar('paletteLineWhite'), }, '&.react-datepicker__month-text--today[aria-selected="false"]:hover': { - background: 'var(--affine-hover-color)', - color: 'var(--affine-black)', + background: cssVar('hoverColor'), + color: cssVar('black'), }, }, }); - globalStyle(`${calendarStyle} .react-datepicker__month-container`, { float: 'none', width: '100%', diff --git a/packages/frontend/component/src/ui/divider/style.css.ts b/packages/frontend/component/src/ui/divider/style.css.ts index 48f1dd134..9a928d039 100644 --- a/packages/frontend/component/src/ui/divider/style.css.ts +++ b/packages/frontend/component/src/ui/divider/style.css.ts @@ -1,8 +1,8 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const divider = style({ height: '1px', - backgroundColor: 'var(--affine-border-color)', + backgroundColor: cssVar('borderColor'), borderRadius: '8px', margin: '8px 0', width: '100%', diff --git a/packages/frontend/component/src/ui/editable/inline-edit.css.ts b/packages/frontend/component/src/ui/editable/inline-edit.css.ts index b04f6896e..609e9849c 100644 --- a/packages/frontend/component/src/ui/editable/inline-edit.css.ts +++ b/packages/frontend/component/src/ui/editable/inline-edit.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const inlineEditWrapper = style({ position: 'relative', borderRadius: 4, @@ -11,13 +10,10 @@ export const inlineEditWrapper = style({ export const inlineEdit = style({ overflow: 'hidden', textOverflow: 'ellipsis', - whiteSpace: 'pre', wordWrap: 'break-word', - // to avoid shrinking when show up border: '1px solid transparent', - selectors: { [`.${inlineEditWrapper}[data-editing="true"] &`]: { opacity: 0, @@ -25,18 +21,15 @@ export const inlineEdit = style({ }, }, }); - export const inlineEditInput = style({ position: 'absolute', width: '100%', height: '100%', left: 0, top: 0, - opacity: 0, visibility: 'hidden', pointerEvents: 'none', - selectors: { [`.${inlineEditWrapper}[data-editing="true"] &`]: { opacity: 1, @@ -45,7 +38,6 @@ export const inlineEditInput = style({ }, }, }); - export const placeholder = style({ opacity: 0.8, }); diff --git a/packages/frontend/component/src/ui/input/style.css.ts b/packages/frontend/component/src/ui/input/style.css.ts index 3d3ce2bc2..fe474a2a2 100644 --- a/packages/frontend/component/src/ui/input/style.css.ts +++ b/packages/frontend/component/src/ui/input/style.css.ts @@ -1,20 +1,19 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const inputWrapper = style({ width: '100%', height: 28, lineHeight: '22px', padding: '0 10px', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), border: '1px solid', - backgroundColor: 'var(--affine-white)', + backgroundColor: cssVar('white'), borderRadius: 8, display: 'flex', justifyContent: 'center', alignItems: 'center', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), boxSizing: 'border-box', - selectors: { '&.no-border': { border: 'unset', @@ -29,27 +28,26 @@ export const inputWrapper = style({ }, // color '&.disabled': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, '&.error': { - borderColor: 'var(--affine-error-color)', + borderColor: cssVar('errorColor'), }, '&.success': { - borderColor: 'var(--affine-success-color)', + borderColor: cssVar('successColor'), }, '&.warning': { - borderColor: 'var(--affine-warning-color)', + borderColor: cssVar('warningColor'), }, '&.default': { - borderColor: 'var(--affine-border-color)', + borderColor: cssVar('borderColor'), }, '&.default.focus': { - borderColor: 'var(--affine-primary-color)', + borderColor: cssVar('primaryColor'), boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);', }, }, }); - export const input = style({ height: '100%', width: '0', @@ -61,13 +59,12 @@ export const input = style({ outline: 'none', border: 'none', background: 'transparent', - selectors: { '&::placeholder': { - color: 'var(--affine-placeholder-color)', + color: cssVar('placeholderColor'), }, '&:disabled': { - color: 'var(--affine-text-disable-color)', + color: cssVar('textDisableColor'), }, }, }); diff --git a/packages/frontend/component/src/ui/loading/styles.css.ts b/packages/frontend/component/src/ui/loading/styles.css.ts index 11e4d366d..56551790c 100644 --- a/packages/frontend/component/src/ui/loading/styles.css.ts +++ b/packages/frontend/component/src/ui/loading/styles.css.ts @@ -1,11 +1,15 @@ import { createVar, keyframes, style } from '@vanilla-extract/css'; - export const speedVar = createVar('speedVar'); - const rotate = keyframes({ - '0%': { transform: 'rotate(0deg)' }, - '50%': { transform: 'rotate(180deg)' }, - '100%': { transform: 'rotate(360deg)' }, + '0%': { + transform: 'rotate(0deg)', + }, + '50%': { + transform: 'rotate(180deg)', + }, + '100%': { + transform: 'rotate(360deg)', + }, }); export const loading = style({ vars: { diff --git a/packages/frontend/component/src/ui/lottie/styles.css.ts b/packages/frontend/component/src/ui/lottie/styles.css.ts index 4e7b5be74..da08fb3d2 100644 --- a/packages/frontend/component/src/ui/lottie/styles.css.ts +++ b/packages/frontend/component/src/ui/lottie/styles.css.ts @@ -1,5 +1,4 @@ import { globalStyle, style } from '@vanilla-extract/css'; - export const root = style({ width: '1em', height: '1em', @@ -7,13 +6,10 @@ export const root = style({ alignItems: 'center', justifyContent: 'center', }); - const magicColor = `rgb(119,117,125)`; - globalStyle(`${root} path[stroke="${magicColor}"]`, { stroke: 'currentColor', }); - globalStyle(`${root} path[fill="${magicColor}"]`, { fill: 'currentColor', }); diff --git a/packages/frontend/component/src/ui/menu/styles.css.ts b/packages/frontend/component/src/ui/menu/styles.css.ts index 8a95ad1ac..5b75693e8 100644 --- a/packages/frontend/component/src/ui/menu/styles.css.ts +++ b/packages/frontend/component/src/ui/menu/styles.css.ts @@ -1,18 +1,17 @@ +import { cssVar } from '@toeverything/theme'; import { createVar, style } from '@vanilla-extract/css'; export const triggerWidthVar = createVar('triggerWidthVar'); - export const menuContent = style({ minWidth: '180px', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), borderRadius: '8px', padding: '8px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: '400', - backgroundColor: 'var(--affine-background-overlay-panel-color)', - boxShadow: 'var(--affine-menu-shadow)', + backgroundColor: cssVar('backgroundOverlayPanelColor'), + boxShadow: cssVar('menuShadow'), userSelect: 'none', }); - export const menuItem = style({ maxWidth: '296px', display: 'flex', @@ -29,36 +28,34 @@ export const menuItem = style({ '&:not(:last-of-type)': { marginBottom: '4px', }, - '&.block': { maxWidth: '100%' }, + '&.block': { + maxWidth: '100%', + }, '&[data-disabled]': { - color: 'var(--affine-text-disable-color)', + color: cssVar('textDisableColor'), pointerEvents: 'none', cursor: 'not-allowed', }, '&[data-highlighted]': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, - '&:hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, '&.danger:hover': { - color: 'var(--affine-error-color)', - backgroundColor: 'var(--affine-background-error-color)', + color: cssVar('errorColor'), + backgroundColor: cssVar('backgroundErrorColor'), }, - '&.warning:hover': { - color: 'var(--affine-warning-color)', - backgroundColor: 'var(--affine-background-warning-color)', + color: cssVar('warningColor'), + backgroundColor: cssVar('backgroundWarningColor'), }, - '&.selected, &.checked': { - backgroundColor: 'var(--affine-hover-color)', - color: 'var(--affine-primary-color)', + backgroundColor: cssVar('hoverColor'), + color: cssVar('primaryColor'), }, }, }); - export const menuSpan = style({ flex: 1, overflow: 'hidden', @@ -69,31 +66,32 @@ export const menuSpan = style({ export const menuItemIcon = style({ display: 'flex', flexShrink: 0, - fontSize: 'var(--affine-font-h-5)', - color: 'var(--affine-icon-color)', + fontSize: cssVar('fontH5'), + color: cssVar('iconColor'), selectors: { - '&.start': { marginRight: '8px' }, - '&.end': { marginLeft: '8px' }, - '&.selected, &.checked': { - color: 'var(--affine-primary-color)', + '&.start': { + marginRight: '8px', + }, + '&.end': { + marginLeft: '8px', + }, + '&.selected, &.checked': { + color: cssVar('primaryColor'), }, - [`${menuItem}.danger:hover &`]: { - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), }, [`${menuItem}.warning:hover &`]: { - color: 'var(--affine-warning-color)', + color: cssVar('warningColor'), }, }, }); - export const menuSeparator = style({ height: '1px', - backgroundColor: 'var(--affine-border-color)', + backgroundColor: cssVar('borderColor'), marginTop: '12px', marginBottom: '8px', }); - export const menuTrigger = style({ vars: { [triggerWidthVar]: 'auto', @@ -102,22 +100,21 @@ export const menuTrigger = style({ height: 28, lineHeight: '22px', padding: '0 10px', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), border: '1px solid', - backgroundColor: 'var(--affine-white)', + backgroundColor: cssVar('white'), borderRadius: 8, display: 'inline-flex', justifyContent: 'space-between', alignItems: 'center', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), cursor: 'pointer', ['WebkitAppRegion' as string]: 'no-drag', - borderColor: 'var(--affine-border-color)', + borderColor: cssVar('borderColor'), outline: 'none', - selectors: { '&:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, '&.no-border': { border: 'unset', @@ -137,7 +134,7 @@ export const menuTrigger = style({ // color '&.disabled': { cursor: 'default', - color: 'var(--affine-disable-color)', + color: cssVar('textDisableColor'), pointerEvents: 'none', }, // TODO: wait for design diff --git a/packages/frontend/component/src/ui/modal/styles.css.ts b/packages/frontend/component/src/ui/modal/styles.css.ts index 116e9c102..9c92e2324 100644 --- a/packages/frontend/component/src/ui/modal/styles.css.ts +++ b/packages/frontend/component/src/ui/modal/styles.css.ts @@ -1,25 +1,22 @@ +import { cssVar } from '@toeverything/theme'; import { createVar, style } from '@vanilla-extract/css'; - export const widthVar = createVar('widthVar'); export const heightVar = createVar('heightVar'); export const minHeightVar = createVar('minHeightVar'); - export const modalOverlay = style({ position: 'fixed', inset: 0, - backgroundColor: 'var(--affine-background-modal-color)', - zIndex: 'var(--affine-z-index-modal)', + backgroundColor: cssVar('backgroundModalColor'), + zIndex: cssVar('zIndexModal'), }); - export const modalContentWrapper = style({ position: 'fixed', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', - zIndex: 'var(--affine-z-index-modal)', + zIndex: cssVar('zIndexModal'), }); - export const modalContent = style({ vars: { [widthVar]: '', @@ -30,27 +27,25 @@ export const modalContent = style({ height: heightVar, minHeight: minHeightVar, boxSizing: 'border-box', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), fontWeight: '400', lineHeight: '1.6', padding: '20px 24px', position: 'relative', - backgroundColor: 'var(--affine-background-overlay-panel-color)', - boxShadow: 'var(--affine-popover-shadow)', + backgroundColor: cssVar('backgroundOverlayPanelColor'), + boxShadow: cssVar('popoverShadow'), borderRadius: '12px', maxHeight: 'calc(100vh - 32px)', // :focus-visible will set outline outline: 'none', }); - export const closeButton = style({ position: 'absolute', top: '22px', right: '20px', }); - export const modalHeader = style({ - fontSize: 'var(--affine-font-h-6)', + fontSize: cssVar('fontH6'), fontWeight: '600', lineHeight: '1.45', marginBottom: '12px', @@ -58,7 +53,6 @@ export const modalHeader = style({ export const modalDescription = style({ // marginBottom: '20px', }); - export const modalFooter = style({ display: 'flex', justifyContent: 'flex-end', @@ -72,12 +66,10 @@ export const modalFooter = style({ }, }, }); - export const confirmModalContent = style({ marginTop: '12px', marginBottom: '20px', }); - export const confirmModalContainer = style({ display: 'flex', flexDirection: 'column', diff --git a/packages/frontend/component/src/ui/popover/styles.css.ts b/packages/frontend/component/src/ui/popover/styles.css.ts index af9e7b509..783dff312 100644 --- a/packages/frontend/component/src/ui/popover/styles.css.ts +++ b/packages/frontend/component/src/ui/popover/styles.css.ts @@ -1,13 +1,13 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const popoverContent = style({ minWidth: '180px', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), borderRadius: '8px', padding: '8px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: '400', - backgroundColor: 'var(--affine-background-overlay-panel-color)', - boxShadow: 'var(--affine-menu-shadow)', + backgroundColor: cssVar('backgroundOverlayPanelColor'), + boxShadow: cssVar('menuShadow'), userSelect: 'none', }); diff --git a/packages/frontend/component/src/ui/resize-panel/styles.css.ts b/packages/frontend/component/src/ui/resize-panel/styles.css.ts index bd9c81ca0..0f9dced40 100644 --- a/packages/frontend/component/src/ui/resize-panel/styles.css.ts +++ b/packages/frontend/component/src/ui/resize-panel/styles.css.ts @@ -1,7 +1,5 @@ import { style } from '@vanilla-extract/css'; - const HANDLE_SIZE = 24; - export const container = style({ position: 'relative', border: '1px solid rgba(100, 100, 100, 0.2)', @@ -9,18 +7,15 @@ export const container = style({ borderRadius: 4, borderBottomRightRadius: HANDLE_SIZE / 2, }); - export const cornerHandle = style({ position: 'absolute', top: `calc(100% - ${HANDLE_SIZE / 1.5}px)`, left: `calc(100% - ${HANDLE_SIZE / 1.5}px)`, width: HANDLE_SIZE, height: HANDLE_SIZE, - borderRadius: '50%', border: '2px solid transparent', borderRightColor: 'rgba(100, 100, 100, 0.3)', transform: 'rotate(45deg)', - cursor: 'nwse-resize', }); diff --git a/packages/frontend/component/src/ui/scrollbar/index.css.ts b/packages/frontend/component/src/ui/scrollbar/index.css.ts index 7e63c7ef1..d2234002e 100644 --- a/packages/frontend/component/src/ui/scrollbar/index.css.ts +++ b/packages/frontend/component/src/ui/scrollbar/index.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const scrollableContainerRoot = style({ width: '100%', vars: { @@ -7,7 +7,6 @@ export const scrollableContainerRoot = style({ }, height: '100%', }); - export const scrollTopBorder = style({ position: 'absolute', top: 0, @@ -16,27 +15,23 @@ export const scrollTopBorder = style({ height: '1px', transition: 'opacity .3s .2s', opacity: 0, - background: 'var(--affine-border-color)', + background: cssVar('borderColor'), selectors: { '&[data-has-scroll-top="true"]': { opacity: 1, }, }, }); - export const scrollableViewport = style({ height: '100%', width: '100%', }); - globalStyle(`${scrollableViewport} > div`, { display: 'contents !important', }); - export const scrollableContainer = style({ height: '100%', }); - export const scrollbar = style({ display: 'flex', flexDirection: 'column', @@ -47,9 +42,9 @@ export const scrollbar = style({ opacity: 1, transition: 'width .15s', ':hover': { - background: 'var(--affine-background-secondary-color)', + background: cssVar('backgroundSecondaryColor'), width: 'calc(var(--scrollbar-width) + 3px)', - borderLeft: '1px solid var(--affine-border-color)', + borderLeft: `1px solid ${cssVar('borderColor')}`, }, selectors: { '&[data-state="hidden"]': { @@ -62,15 +57,14 @@ export const TableScrollbar = style({ height: 'calc(100% - 120px)', borderRadius: '4px', }); - export const scrollbarThumb = style({ position: 'relative', - background: 'var(--affine-divider-color)', + background: cssVar('dividerColor'), width: '50%', overflow: 'hidden', borderRadius: '4px', ':hover': { - background: 'var(--affine-icon-color)', + background: cssVar('iconColor'), }, selectors: { '&::before': { diff --git a/packages/frontend/component/src/ui/skeleton/index.css.ts b/packages/frontend/component/src/ui/skeleton/index.css.ts index 6115cce47..8d4676846 100644 --- a/packages/frontend/component/src/ui/skeleton/index.css.ts +++ b/packages/frontend/component/src/ui/skeleton/index.css.ts @@ -1,30 +1,36 @@ +import { cssVar } from '@toeverything/theme'; import { keyframes, style } from '@vanilla-extract/css'; - -import type { PickStringFromUnion, SkeletonProps } from './types'; - // variables -const bg = 'var(--affine-placeholder-color)'; +const bg = cssVar('placeholderColor'); const highlight = 'rgba(255, 255, 255, 0.4)'; const defaultHeight = '32px'; - const pulseKeyframes = keyframes({ - '0%': { opacity: 1 }, - '50%': { opacity: 0.5 }, - '100%': { opacity: 1 }, + '0%': { + opacity: 1, + }, + '50%': { + opacity: 0.5, + }, + '100%': { + opacity: 1, + }, }); - const waveKeyframes = keyframes({ - '0%': { transform: 'translateX(-100%)' }, - '50%': { transform: 'translateX(100%)' }, - '100%': { transform: 'translateX(100%)' }, + '0%': { + transform: 'translateX(-100%)', + }, + '50%': { + transform: 'translateX(100%)', + }, + '100%': { + transform: 'translateX(100%)', + }, }); - export const root = style({ display: 'block', width: '100%', height: defaultHeight, flexShrink: 0, - /** * paint background in ::before, * so that we can use opacity to control the color @@ -39,8 +45,7 @@ export const root = style({ backgroundColor: bg, }, }); - -export const variant: Record = { +export const variant = { circular: style({ width: defaultHeight, borderRadius: '50%', @@ -58,21 +63,15 @@ export const variant: Record = { marginBottom: '0.2em', }), }; - -export const animation: Record< - PickStringFromUnion, - string -> = { +export const animation = { pulse: style({ animation: `${pulseKeyframes} 2s ease-in-out 0.5s infinite`, }), wave: style({ position: 'relative', overflow: 'hidden', - /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */ WebkitMaskImage: '-webkit-radial-gradient(white, black)', - '::after': { animation: `${waveKeyframes} 2s linear 0.5s infinite`, background: `linear-gradient( diff --git a/packages/frontend/component/src/ui/switch/index.css.ts b/packages/frontend/component/src/ui/switch/index.css.ts index 86c34ede6..7fefbd72f 100644 --- a/packages/frontend/component/src/ui/switch/index.css.ts +++ b/packages/frontend/component/src/ui/switch/index.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const labelStyle = style({ display: 'flex', alignItems: 'center', @@ -14,11 +14,11 @@ export const switchStyle = style({ position: 'relative', width: '46px', height: '26px', - background: 'var(--affine-toggle-disable-background-color)', + background: cssVar('toggleDisableBackgroundColor'), borderRadius: '37px', transition: '200ms all', - border: '1px solid var(--affine-black-10)', - boxShadow: 'var(--affine-toggle-circle-shadow)', + border: `1px solid ${cssVar('black10')}`, + boxShadow: cssVar('toggleCircleShadow'), selectors: { '&:before': { transition: 'all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51)', @@ -28,17 +28,17 @@ export const switchStyle = style({ height: '20px', borderRadius: '50%', top: '50%', - border: '1px solid var(--affine-black-10)', - background: 'var(--affine-toggle-circle-background-color)', + border: `1px solid ${cssVar('black10')}`, + background: cssVar('toggleCircleBackgroundColor'), transform: 'translate(1px, -50%)', }, }, }); export const switchCheckedStyle = style({ - background: 'var(--affine-primary-color)', + background: cssVar('primaryColor'), selectors: { '&:before': { - borderColor: 'var(--affine-pure-black-10)', + borderColor: cssVar('pureBlack10'), transform: 'translate(21px,-50%)', }, }, diff --git a/packages/frontend/component/src/ui/tooltip/styles.css.ts b/packages/frontend/component/src/ui/tooltip/styles.css.ts index 0de1af2cf..664671a41 100644 --- a/packages/frontend/component/src/ui/tooltip/styles.css.ts +++ b/packages/frontend/component/src/ui/tooltip/styles.css.ts @@ -1,10 +1,10 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const tooltipContent = style({ - backgroundColor: 'var(--affine-tooltip)', - color: 'var(--affine-white)', + backgroundColor: cssVar('tooltip'), + color: cssVar('white'), padding: '5px 12px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), lineHeight: '22px', borderRadius: '4px', maxWidth: '280px', diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.css.ts b/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.css.ts index d1026be77..fb9aa6b9e 100644 --- a/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.css.ts +++ b/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const viewport = style({ height: '100%', width: '100%', diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.css.ts b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.css.ts index 5586afb01..3b2091b8b 100644 --- a/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.css.ts +++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const errorLayout = style({ display: 'flex', justifyContent: 'center', @@ -8,34 +7,28 @@ export const errorLayout = style({ width: '100%', gap: '20px', }); - export const errorDetailStyle = style({ display: 'flex', flexDirection: 'column', maxWidth: '420px', }); - export const errorTitle = style({ fontSize: '32px', lineHeight: '44px', fontWeight: 700, }); - export const errorImage = style({ height: '178px', maxWidth: '400px', flexGrow: 1, backgroundSize: 'cover', }); - export const errorDescription = style({ marginTop: '24px', }); - export const errorFooter = style({ marginTop: '24px', }); - export const errorDivider = style({ width: '20px', height: '100%', diff --git a/packages/frontend/core/src/components/affine/auth/style.css.ts b/packages/frontend/core/src/components/affine/auth/style.css.ts index e03f57039..3c9bb5c2e 100644 --- a/packages/frontend/core/src/components/affine/auth/style.css.ts +++ b/packages/frontend/core/src/components/affine/auth/style.css.ts @@ -1,29 +1,26 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const authModalContent = style({ marginTop: '30px', }); - export const captchaWrapper = style({ margin: 'auto', marginBottom: '4px', textAlign: 'center', }); - export const authMessage = style({ marginTop: '30px', - color: 'var(--affine-text-secondary-color)', - fontSize: 'var(--affine-font-xs)', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontXs'), lineHeight: 1.5, }); globalStyle(`${authMessage} a`, { - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), }); globalStyle(`${authMessage} .link`, { cursor: 'pointer', - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), }); - export const forgetPasswordButtonRow = style({ position: 'absolute', right: 0, @@ -32,24 +29,21 @@ export const forgetPasswordButtonRow = style({ export const sendMagicLinkButtonRow = style({ marginBottom: '30px', }); - export const linkButton = style({ - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), background: 'transparent', borderColor: 'transparent', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), lineHeight: '22px', userSelect: 'none', }); - export const forgetPasswordButton = style({ - fontSize: 'var(--affine-font-sm)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontSm'), + color: cssVar('textSecondaryColor'), position: 'absolute', right: 0, bottom: 0, }); - export const resendWrapper = style({ height: 77, display: 'flex', @@ -58,16 +52,15 @@ export const resendWrapper = style({ alignItems: 'center', marginTop: 30, }); - export const sentRow = style({ display: 'flex', justifyContent: 'center', gap: '8px', lineHeight: '22px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), }); export const sentMessage = style({ - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), fontWeight: 600, }); export const resendCountdown = style({ @@ -77,31 +70,29 @@ export const resendCountdown = style({ export const resendCountdownInButton = style({ width: 40, textAlign: 'center', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), marginLeft: 16, - color: 'var(--affine-blue)', + color: cssVar('blue'), fontWeight: 400, }); - export const accessMessage = style({ textAlign: 'center', display: 'flex', justifyContent: 'center', alignItems: 'center', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), fontWeight: 500, marginTop: 65, marginBottom: 40, }); - export const userPlanButton = style({ display: 'flex', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), height: 20, fontWeight: 500, cursor: 'pointer', - color: 'var(--affine-pure-white)', - backgroundColor: 'var(--affine-brand-color)', + color: cssVar('pureWhite'), + backgroundColor: cssVar('brandColor'), padding: '0 4px', borderRadius: 4, justifyContent: 'center', diff --git a/packages/frontend/core/src/components/affine/auth/subscription-redirect.css.ts b/packages/frontend/core/src/components/affine/auth/subscription-redirect.css.ts index c72392b20..1514a6a22 100644 --- a/packages/frontend/core/src/components/affine/auth/subscription-redirect.css.ts +++ b/packages/frontend/core/src/components/affine/auth/subscription-redirect.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const loadingContainer = style({ display: 'flex', width: '100vw', @@ -7,22 +7,19 @@ export const loadingContainer = style({ justifyContent: 'center', alignItems: 'center', }); - export const subscriptionLayout = style({ margin: '10% auto', maxWidth: '536px', }); - export const subscriptionBox = style({ padding: '48px 52px', display: 'flex', flexDirection: 'column', alignItems: 'center', }); - export const subscriptionTips = style({ margin: '20px 0', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), fontSize: '12px', fontStyle: 'normal', fontWeight: '400', diff --git a/packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts b/packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts index 6f49c49fd..a9955c7d1 100644 --- a/packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts +++ b/packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts @@ -1,41 +1,34 @@ import { globalStyle, style } from '@vanilla-extract/css'; - export const header = style({ position: 'relative', marginTop: '44px', }); - export const content = style({ padding: '0 40px', fontSize: '18px', lineHeight: '26px', }); - globalStyle(`${content} p`, { marginTop: '12px', marginBottom: '16px', }); - export const contentTitle = style({ fontSize: '20px', lineHeight: '28px', fontWeight: 600, paddingBottom: '16px', }); - export const buttonGroup = style({ display: 'flex', justifyContent: 'flex-end', gap: '20px', margin: '24px 0', }); - export const radioGroup = style({ display: 'flex', flexDirection: 'column', gap: '8px', }); - export const radio = style({ cursor: 'pointer', appearance: 'auto', diff --git a/packages/frontend/core/src/components/affine/language-menu/style.css.ts b/packages/frontend/core/src/components/affine/language-menu/style.css.ts index d841c77ec..1e5325a67 100644 --- a/packages/frontend/core/src/components/affine/language-menu/style.css.ts +++ b/packages/frontend/core/src/components/affine/language-menu/style.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const hoveredLanguageItem = style({ - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }); diff --git a/packages/frontend/core/src/components/affine/onboarding/articles/blocks.css.ts b/packages/frontend/core/src/components/affine/onboarding/articles/blocks.css.ts index 88ef506ad..ca2114aae 100644 --- a/packages/frontend/core/src/components/affine/onboarding/articles/blocks.css.ts +++ b/packages/frontend/core/src/components/affine/onboarding/articles/blocks.css.ts @@ -1,35 +1,29 @@ import { globalStyle, style } from '@vanilla-extract/css'; - export const block = style({}); globalStyle(`${block} h1`, { fontSize: '40px', fontWeight: '600', lineHeight: '48px', }); - globalStyle(`${block} h2`, { fontSize: '20px', fontWeight: '600', lineHeight: '28px', }); - globalStyle(`${block} h3`, { fontSize: '18px', fontWeight: '600', lineHeight: '26px', }); - globalStyle(`${block} p`, { fontSize: '15px', fontWeight: 400, lineHeight: '23px', }); - globalStyle(`${block} b`, { // TODO: 500's effect not matching the design, use 600 for now fontWeight: '600', }); - globalStyle(`${block} ol`, { counterReset: 'section', listStyleType: 'none', @@ -79,7 +73,6 @@ globalStyle(`${block} img.illustration`, { borderRadius: '5px', overflow: 'hidden', }); - export const link = style({ color: '#1E67AF', }); @@ -109,7 +102,6 @@ export const pageLinkLabel = style({ }, }, }); - export const quote = style({ paddingLeft: '17px', position: 'relative', @@ -126,7 +118,6 @@ export const quote = style({ }, }, }); - export const hr = style({ height: '1px', backgroundColor: '#E3E2E4', diff --git a/packages/frontend/core/src/components/affine/onboarding/curve-paper/paper.css.ts b/packages/frontend/core/src/components/affine/onboarding/curve-paper/paper.css.ts index 850affaa9..a9722d8b9 100644 --- a/packages/frontend/core/src/components/affine/onboarding/curve-paper/paper.css.ts +++ b/packages/frontend/core/src/components/affine/onboarding/curve-paper/paper.css.ts @@ -1,28 +1,24 @@ +import { cssVar } from '@toeverything/theme'; import { createVar, style } from '@vanilla-extract/css'; import { onboardingVars } from '../style.css'; - export const paperWidthVar = createVar(); export const paperHeightVar = createVar(); - export const paper = style({ vars: { [paperWidthVar]: onboardingVars.paper.w, [paperHeightVar]: onboardingVars.paper.h, }, - width: paperWidthVar, height: paperHeightVar, position: 'relative', }); - export const segment = style({ width: '100%', height: '100%', background: onboardingVars.paper.bg, position: 'absolute', top: `calc(var(--segments-up) / var(--segments) * 100%)`, - // add a thin line behind to hide the gap between segments '::before': { content: '""', @@ -32,7 +28,6 @@ export const segment = style({ height: '2px', background: onboardingVars.paper.bg, }, - selectors: { ['&[data-root="true"]::before']: { content: 'none', @@ -43,7 +38,6 @@ export const segment = style({ ['&[data-direction="down"]::before']: { top: -1, }, - ['&[data-root="true"]']: { height: `calc(1 / var(--segments) * 100%)`, }, @@ -66,19 +60,16 @@ export const segment = style({ }, }, }); - export const contentWrapper = style({ width: '100%', height: '100%', overflow: 'hidden', position: 'absolute', }); - export const content = style({ padding: '16px', overflow: 'hidden', - fontFamily: 'var(--affine-font-family)', - + fontFamily: cssVar('fontFamily'), selectors: { [`${contentWrapper} > &`]: { position: 'absolute', @@ -88,20 +79,17 @@ export const content = style({ }, }, }); - export const articleWrapper = style({ width: '100%', height: '100%', overflow: 'hidden', }); - export const article = style({ display: 'flex', flexDirection: 'column', gap: '12px', color: onboardingVars.paper.textColor, }); - export const title = style({ fontSize: '18px', fontWeight: 600, diff --git a/packages/frontend/core/src/components/affine/onboarding/steps/animate-in.css.ts b/packages/frontend/core/src/components/affine/onboarding/steps/animate-in.css.ts index 5fab26a4d..2f8ee5aef 100644 --- a/packages/frontend/core/src/components/affine/onboarding/steps/animate-in.css.ts +++ b/packages/frontend/core/src/components/affine/onboarding/steps/animate-in.css.ts @@ -1,7 +1,6 @@ import { keyframes, style } from '@vanilla-extract/css'; import { paperLocation } from '../style.css'; - const moveInAnim = keyframes({ '0%': { transform: `translateZ(var(--fromZ)) translateX(var(--fromX)) translateY(var(--fromY)) rotateX(var(--fromRotateX)) rotateY(var(--fromRotateY)) rotateZ(var(--fromRotateZ))`, @@ -10,7 +9,6 @@ const moveInAnim = keyframes({ transform: `translateZ(var(--toZ)) translateX(0) translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(var(--toRotateZ))`, }, }); - export const moveIn = style([ paperLocation, { diff --git a/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts b/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts index 39e9d102f..006f77361 100644 --- a/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts +++ b/packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts @@ -1,22 +1,21 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, keyframes, style } from '@vanilla-extract/css'; import { onboardingVars } from '../style.css'; - export const edgelessSwitchWindow = style({ - vars: { '--bg-size': '10px' }, + vars: { + '--bg-size': '10px', + }, borderRadius: onboardingVars.paper.r, backgroundColor: onboardingVars.paper.bg, position: 'relative', transition: `width ${onboardingVars.window.transition.size}, height ${onboardingVars.window.transition.size}, border-radius ${onboardingVars.window.transition.size}`, overflow: 'hidden', boxShadow: onboardingVars.web.windowShadow, - - fontFamily: 'var(--affine-font-family)', + fontFamily: cssVar('fontFamily'), color: onboardingVars.paper.textColor, - maxWidth: 'calc(100vw - 48px)', maxHeight: 'calc(100vh - 48px)', - selectors: { '&[data-mode="edgeless"]': { width: onboardingVars.edgeless.w, @@ -35,7 +34,6 @@ export const edgelessSwitchWindow = style({ }, }, }); - export const orbit = style({ width: '200%', height: '100%', @@ -55,7 +53,6 @@ export const orbitItem = style({ flexGrow: 0, overflow: 'hidden', }); - export const doc = style({ selectors: { // grid background @@ -63,13 +60,11 @@ export const doc = style({ content: '""', position: 'absolute', inset: 0, - backgroundImage: onboardingVars.canvas.bgImage, backgroundRepeat: 'repeat', backgroundSize: 'calc(24px * var(--scale)) calc(24px * var(--scale))', backgroundPositionX: 'calc(var(--offset-x) * var(--scale))', backgroundPositionY: 'calc(var(--offset-y) * var(--scale))', - opacity: 0, pointerEvents: 'none', transition: 'opacity 0.3s ease', @@ -79,7 +74,6 @@ export const doc = style({ }, }, }); - export const wellDone = style({ display: 'flex', flexDirection: 'column', @@ -89,7 +83,6 @@ export const wellDone = style({ textAlign: 'center', userSelect: 'none', }); - const wellDoneSlideIn = keyframes({ from: { transform: 'translateX(100px)', @@ -106,13 +99,20 @@ export const wellDoneEnterAnim = style({ '[data-mode="well-done"] &': { animation: `${wellDoneSlideIn} 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) forwards`, }, - '&:nth-child(1)': { animationDelay: '0.1s' }, - '&:nth-child(2)': { animationDelay: '0.15s' }, - '&:nth-child(3)': { animationDelay: '0.2s' }, - '&:nth-child(4)': { animationDelay: '0.25s' }, + '&:nth-child(1)': { + animationDelay: '0.1s', + }, + '&:nth-child(2)': { + animationDelay: '0.15s', + }, + '&:nth-child(3)': { + animationDelay: '0.2s', + }, + '&:nth-child(4)': { + animationDelay: '0.25s', + }, }, }); - export const wellDoneTitle = style({ fontSize: 28, lineHeight: '36px', @@ -123,21 +123,18 @@ export const wellDoneContent = style({ lineHeight: '24px', fontWeight: '400', }); - export const toolbar = style({ position: 'absolute', bottom: '20px', left: '50%', transform: 'translateX(-50%) translateY(200px)', transition: 'transform 0.3s ease', - selectors: { [`${edgelessSwitchWindow}[data-mode="edgeless"] &`]: { transform: 'translateX(-50%) translateY(0px)', }, }, }); - export const canvas = style({ position: 'relative', width: '100%', @@ -148,7 +145,6 @@ export const canvas = style({ justifyContent: 'center', alignItems: 'flex-start', overflowY: 'visible', - selectors: { '[data-scroll="true"] &': { overflowY: 'auto', @@ -165,14 +161,12 @@ export const canvas = style({ }, }, }); - export const page = style({ width: '800px', minHeight: onboardingVars.article.h, paddingTop: '150px', paddingBottom: '150px', }); - export const noDragWrapper = style({ position: 'absolute', inset: 0, @@ -181,7 +175,6 @@ export const noDragWrapper = style({ globalStyle(`${noDragWrapper} > *`, { pointerEvents: 'auto', }); - export const header = style({ position: 'absolute', top: '0', diff --git a/packages/frontend/core/src/components/affine/onboarding/steps/unfolding.css.ts b/packages/frontend/core/src/components/affine/onboarding/steps/unfolding.css.ts index cb3ab184f..a19473097 100644 --- a/packages/frontend/core/src/components/affine/onboarding/steps/unfolding.css.ts +++ b/packages/frontend/core/src/components/affine/onboarding/steps/unfolding.css.ts @@ -1,22 +1,32 @@ +import { cssVar } from '@toeverything/theme'; import { keyframes, style } from '@vanilla-extract/css'; import { onboardingVars, paperLocation } from '../style.css'; - const unfolding = onboardingVars.unfolding; - const shadowIn = keyframes({ - from: { boxShadow: `0px 0px 0px rgba(0, 0, 0, 0)` }, - to: { boxShadow: `0px 0px 4px rgba(66, 65, 73, 0.14)` }, + from: { + boxShadow: `0px 0px 0px rgba(0, 0, 0, 0)`, + }, + to: { + boxShadow: `0px 0px 4px rgba(66, 65, 73, 0.14)`, + }, }); const borderIn = keyframes({ - from: { opacity: 0 }, - to: { opacity: 1 }, + from: { + opacity: 0, + }, + to: { + opacity: 1, + }, }); const fadeOut = keyframes({ - from: { opacity: 1 }, - to: { opacity: 0 }, + from: { + opacity: 1, + }, + to: { + opacity: 0, + }, }); - export const unfoldingWrapper = style([ paperLocation, { @@ -27,29 +37,23 @@ export const unfoldingWrapper = style([ display: 'flex', alignItems: 'center', justifyContent: 'center', - transform: 'rotate(var(--toRotateZ)) translateY(var(--hover-offset-y)) scale(var(--hover-scale))', cursor: 'pointer', - backgroundColor: onboardingVars.paper.bg, borderRadius: onboardingVars.paper.r, width: onboardingVars.paper.w, height: onboardingVars.paper.h, - // animate in boxShadow: `0px 0px 0px rgba(0, 0, 0, 0)`, animation: `${shadowIn} 0.5s ease forwards`, - transition: `all 0.23s ease, width ${unfolding.sizeTransition}, height ${unfolding.sizeTransition}, transform ${unfolding.transformTransition}`, - ':hover': { vars: { '--hover-offset-y': '-10px', '--hover-scale': '1.03', }, }, - '::before': { // hack border content: '""', @@ -60,7 +64,6 @@ export const unfoldingWrapper = style([ animation: `${borderIn} 0.5s ease forwards`, pointerEvents: 'none', }, - selectors: { '&[data-fold="false"]': { vars: { @@ -77,15 +80,12 @@ export const unfoldingWrapper = style([ }, }, ]); - export const unfoldingContent = style({ width: onboardingVars.paper.w, height: onboardingVars.paper.h, - padding: '16px', overflow: 'hidden', - fontFamily: 'var(--affine-font-family)', - + fontFamily: cssVar('fontFamily'), selectors: { '&.leave': { animation: `${fadeOut} 0.1s ease forwards`, diff --git a/packages/frontend/core/src/components/affine/onboarding/style.css.ts b/packages/frontend/core/src/components/affine/onboarding/style.css.ts index 3ae2d0294..a4b8d15e8 100644 --- a/packages/frontend/core/src/components/affine/onboarding/style.css.ts +++ b/packages/frontend/core/src/components/affine/onboarding/style.css.ts @@ -1,10 +1,11 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, keyframes, style } from '@vanilla-extract/css'; // in case that we need to support dark mode later export const onboardingVars = { window: { bg: 'white', - shadow: 'var(--affine-shadow-1)', + shadow: cssVar('shadow1'), transition: { size: '0.3s ease', }, @@ -27,7 +28,6 @@ export const onboardingVars = { windowShadow: '1px 18px 39px 0px rgba(0, 0, 0, 0.15), 5px 71px 71px 0px rgba(0, 0, 0, 0.09), 12px 160px 96px 0px rgba(0, 0, 0, 0.05), 20px 284px 114px 0px rgba(0, 0, 0, 0.01), 32px 443px 124px 0px rgba(0, 0, 0, 0.00)', }, - article: { w: '1200px', h: '800px', @@ -43,39 +43,36 @@ export const onboardingVars = { h: '600px', r: '12px', }, - canvas: { width: 3500, height: 3500, pageBlockWidth: 800, bgImage: 'radial-gradient(#e6e6e6 1px, #fff 1px)', }, - toolbar: { bg: 'white', borderColor: '#E3E2E4', }, - block: { transition: '0.5s ease', }, - animateIn: { tooltipShowUpDelay: '5s', nextButtonShowUpDelay: '20s', }, }; - export const perspective = style({ perspective: '10000px', transformStyle: 'preserve-3d', }); - export const fadeIn = keyframes({ - from: { opacity: 0 }, - to: { opacity: 1 }, + from: { + opacity: 0, + }, + to: { + opacity: 1, + }, }); - export const onboarding = style([ perspective, { @@ -85,7 +82,6 @@ export const onboarding = style([ alignItems: 'center', justifyContent: 'center', position: 'relative', - selectors: { // hack background color for web '&::after': { @@ -108,12 +104,10 @@ export const onboarding = style([ }, }, ]); - globalStyle(`${onboarding} *`, { perspective: '10000px', transformStyle: 'preserve-3d', }); - export const offsetOrigin = style({ width: 0, height: 0, @@ -122,13 +116,11 @@ export const offsetOrigin = style({ justifyContent: 'center', alignItems: 'center', }); - export const paperLocation = style({ position: 'absolute', left: `calc(var(--offset-x) - ${onboardingVars.paper.w} / 2)`, top: `calc(var(--offset-y) - ${onboardingVars.paper.h} / 2)`, }); - export const tipsWrapper = style({ position: 'absolute', width: `calc(${onboardingVars.article.w} - 48px)`, diff --git a/packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts b/packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts index 600534ba5..d771301aa 100644 --- a/packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts +++ b/packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts @@ -1,9 +1,8 @@ +import { cssVar } from '@toeverything/theme'; import { createVar, globalStyle, style } from '@vanilla-extract/css'; - const headerHeight = createVar('header-height'); const footerHeight = createVar('footer-height'); const historyListWidth = createVar('history-list-width'); - export const root = style({ height: '100%', width: '100%', @@ -13,7 +12,6 @@ export const root = style({ [historyListWidth]: '240px', }, }); - export const modalContent = style({ display: 'flex', height: `calc(100% - ${footerHeight})`, @@ -26,7 +24,6 @@ export const modalContent = style({ }, }, }); - export const previewWrapper = style({ display: 'flex', flexDirection: 'column', @@ -35,9 +32,8 @@ export const previewWrapper = style({ position: 'relative', overflow: 'hidden', width: `calc(100% - ${historyListWidth})`, - backgroundColor: 'var(--affine-background-secondary-color)', + backgroundColor: cssVar('backgroundSecondaryColor'), }); - export const previewContainer = style({ display: 'flex', flexDirection: 'column', @@ -48,12 +44,11 @@ export const previewContainer = style({ borderTopLeftRadius: 8, borderTopRightRadius: 8, overflow: 'hidden', - boxShadow: 'var(--affine-shadow-3)', + boxShadow: cssVar('shadow3'), height: 'calc(100% - 40px)', width: `calc(100% - 80px)`, - backgroundColor: 'var(--affine-background-secondary-color)', + backgroundColor: cssVar('backgroundSecondaryColor'), }); - export const previewContainerStack1 = style([ previewContainer, { @@ -62,7 +57,6 @@ export const previewContainerStack1 = style([ width: `calc(100% - 96px)`, }, ]); - export const previewContainerStack2 = style([ previewContainer, { @@ -71,42 +65,38 @@ export const previewContainerStack2 = style([ width: `calc(100% - 112px)`, }, ]); - export const previewHeader = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', height: headerHeight, - borderBottom: '1px solid var(--affine-border-color)', - backgroundColor: 'var(--affine-background-primary-color)', + borderBottom: `1px solid ${cssVar('borderColor')}`, + backgroundColor: cssVar('backgroundPrimaryColor'), padding: '0 12px', flexShrink: 0, gap: 12, }); - export const previewHeaderTitle = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), fontWeight: 600, - maxWidth: 400, // better responsiveness + maxWidth: 400, + // better responsiveness overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }); - export const previewHeaderTimestamp = style({ - color: 'var(--affine-text-secondary-color)', - backgroundColor: 'var(--affine-background-secondary-color)', + color: cssVar('textSecondaryColor'), + backgroundColor: cssVar('backgroundSecondaryColor'), padding: '0 10px', borderRadius: 4, - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), }); - export const editor = style({ height: '100%', flexGrow: 1, overflow: 'hidden', }); - export const rowWrapper = style({ display: 'flex', height: '100%', @@ -116,7 +106,7 @@ export const rowWrapper = style({ content: '""', width: 1, height: '100%', - backgroundColor: 'var(--affine-border-color)', + backgroundColor: cssVar('borderColor'), position: 'absolute', left: 16, top: 0, @@ -136,61 +126,53 @@ export const rowWrapper = style({ }, }, }); - export const loadingContainer = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', - backgroundColor: 'var(--affine-background-primary-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), }); - export const historyList = style({ overflow: 'hidden', height: '100%', width: historyListWidth, flexShrink: 0, - borderLeft: '1px solid var(--affine-border-color)', + borderLeft: `1px solid ${cssVar('borderColor')}`, }); - export const historyListScrollable = style({ height: `calc(100% - ${headerHeight})`, }); - export const historyListScrollableInner = style({ display: 'flex', flexDirection: 'column', }); - export const historyListHeader = style({ display: 'flex', alignItems: 'center', height: 52, - borderBottom: '1px solid var(--affine-border-color)', + borderBottom: `1px solid ${cssVar('borderColor')}`, fontWeight: 'bold', flexShrink: 0, padding: '0 12px', }); - export const historyItemGroup = style({ display: 'flex', flexDirection: 'column', }); - export const historyItemGroupTitle = style({ display: 'flex', alignItems: 'center', padding: '0 12px 0 4px', whiteSpace: 'nowrap', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), gap: 4, - backgroundColor: 'var(--affine-background-primary-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), height: 28, ':hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, }); - export const historyItem = style([ rowWrapper, { @@ -201,16 +183,16 @@ export const historyItem = style([ cursor: 'pointer', selectors: { '&:hover, &[data-active=true]': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, // draw circle '&::after': { content: '""', width: 7, height: 7, - backgroundColor: 'var(--affine-background-secondary-color)', + backgroundColor: cssVar('backgroundSecondaryColor'), borderRadius: '50%', - border: '1px solid var(--affine-border-color)', + border: `1px solid ${cssVar('borderColor')}`, position: 'absolute', left: 16, top: '50%', @@ -218,51 +200,50 @@ export const historyItem = style([ transform: 'translate(-50%, -50%)', }, '&[data-active=true]::after': { - backgroundColor: 'var(--affine-primary-color)', - borderColor: 'var(--affine-black-30)', + backgroundColor: cssVar('primaryColor'), + borderColor: cssVar('black30'), }, }, }, ]); - -export const historyItemGap = style([rowWrapper, { height: 16 }]); - +export const historyItemGap = style([ + rowWrapper, + { + height: 16, + }, +]); export const historyItemLoadMore = style([ historyItem, { cursor: 'pointer', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), flexShrink: 0, borderRadius: 0, selectors: { '&:hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, }, }, ]); - globalStyle(`${historyItem} button`, { color: 'inherit', }); - export const historyFooter = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 68, - borderTop: '1px solid var(--affine-border-color)', + borderTop: `1px solid ${cssVar('borderColor')}`, padding: '0 24px', position: 'absolute', bottom: 0, left: 0, right: 0, }); - export const spacer = style({ flexGrow: 1, }); - export const emptyHistoryPrompt = style({ display: 'flex', flexDirection: 'column', @@ -273,19 +254,16 @@ export const emptyHistoryPrompt = style({ zIndex: 1, gap: 20, }); - export const emptyHistoryPromptTitle = style({ fontWeight: 600, - fontSize: 'var(--affine-font-h-5)', + fontSize: cssVar('fontH5'), }); - export const emptyHistoryPromptDescription = style({ width: 320, textAlign: 'center', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), }); - export const collapsedIcon = style({ transition: 'transform 0.2s ease-in-out', selectors: { @@ -294,7 +272,6 @@ export const collapsedIcon = style({ }, }, }); - export const collapsedIconContainer = style({ fontSize: 24, display: 'flex', @@ -309,29 +286,25 @@ export const collapsedIconContainer = style({ }, }, }); - export const planPromptWrapper = style({ padding: '4px 12px', }); - export const planPrompt = style({ gap: 6, borderRadius: 8, flexDirection: 'column', padding: 10, - fontSize: 'var(--affine-font-xs)', - backgroundColor: 'var(--affine-background-secondary-color)', + fontSize: cssVar('fontXs'), + backgroundColor: cssVar('backgroundSecondaryColor'), }); - export const planPromptTitle = style({ fontWeight: 600, marginBottom: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), }); - export const planPromptUpdateButton = style({ textDecoration: 'underline', cursor: 'pointer', diff --git a/packages/frontend/core/src/components/affine/payment-disable/style.css.ts b/packages/frontend/core/src/components/affine/payment-disable/style.css.ts index ce218f7e0..29c1ab0c0 100644 --- a/packages/frontend/core/src/components/affine/payment-disable/style.css.ts +++ b/packages/frontend/core/src/components/affine/payment-disable/style.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const paymentDisableModalContent = style({ - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }); diff --git a/packages/frontend/core/src/components/affine/setting-modal/account-setting/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/account-setting/style.css.ts index 87648a1dc..f559a1c79 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/account-setting/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/account-setting/style.css.ts @@ -1,14 +1,14 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; export const profileInputWrapper = style({ marginLeft: '20px', }); globalStyle(`${profileInputWrapper} label`, { display: 'block', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), marginBottom: '4px', }); - export const avatarWrapper = style({ width: '56px', height: '56px', @@ -36,10 +36,9 @@ globalStyle(`${avatarWrapper} .camera-icon-wrapper`, { alignItems: 'center', backgroundColor: 'rgba(60, 61, 63, 0.5)', zIndex: '1', - color: 'var(--affine-white)', - fontSize: 'var(--affine-font-h-4)', + color: cssVar('white'), + fontSize: cssVar('fontH4'), }); - export const button = style({ padding: '4px 12px', }); diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/style.css.ts index 8bcca7d4c..2f705ef26 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/style.css.ts @@ -1,11 +1,11 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const link = style({ height: '18px', display: 'flex', alignItems: 'center', - color: 'var(--affine-text-primary-color)', - fontSize: 'var(--affine-font-sm)', + color: cssVar('textPrimaryColor'), + fontSize: cssVar('fontSm'), fontWeight: 600, marginBottom: '12px', selectors: { @@ -14,13 +14,11 @@ export const link = style({ }, }, }); - globalStyle(`${link} .icon`, { - color: 'var(--affine-icon-color)', - fontSize: 'var(--affine-font-base)', + color: cssVar('iconColor'), + fontSize: cssVar('fontBase'), marginLeft: '5px', }); - export const communityWrapper = style({ display: 'grid', gridTemplateColumns: '15% 15% 15% 15% 15% 15%', @@ -28,8 +26,8 @@ export const communityWrapper = style({ }); export const communityItem = style({ borderRadius: '8px', - border: '1px solid var(--affine-border-color)', - color: 'var(--affine-text-primary-color)', + border: `1px solid ${cssVar('borderColor')}`, + color: cssVar('textPrimaryColor'), cursor: 'pointer', padding: '6px 8px', }); @@ -40,30 +38,27 @@ globalStyle(`${communityItem} svg`, { margin: '0 auto 2px', }); globalStyle(`${communityItem} p`, { - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), textAlign: 'center', }); - export const checkUpdateDesc = style({ - color: 'var(--affine-text-secondary-color)', - fontSize: 'var(--affine-font-xs)', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontXs'), display: 'inline-flex', alignItems: 'center', justifyContent: 'flex-start', selectors: { '&.active': { - color: 'var(--affine-text-emphasis-color)', + color: cssVar('textEmphasisColor'), }, '&.error': { - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), }, }, }); - globalStyle(`${checkUpdateDesc} svg`, { marginRight: '4px', }); - export const appImageRow = style({ flexDirection: 'row-reverse', selectors: { @@ -72,7 +67,6 @@ export const appImageRow = style({ }, }, }); - globalStyle(`${appImageRow} .right-col`, { paddingLeft: '0', paddingRight: '20px', diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/style.css.ts index d48509003..745804ba7 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/style.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const settingWrapper = style({ flexGrow: 1, display: 'flex', diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts index 8790ec183..abc5139a3 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts @@ -1,7 +1,6 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const subscription = style({}); - export const history = style({ display: 'flex', flexDirection: 'column', @@ -11,61 +10,50 @@ export const history = style({ export const historyContent = style({ width: '100%', }); - export const planCard = style({ display: 'flex', justifyContent: 'space-between', padding: '12px', - border: '1px solid var(--affine-border-color)', + border: `1px solid ${cssVar('borderColor')}`, borderRadius: '8px', }); - export const currentPlan = style({ flex: '1 0 0', }); - export const planAction = style({ marginTop: '8px', }); - export const planPrice = style({ - fontSize: 'var(--affine-font-h-6)', + fontSize: cssVar('fontH6'), fontWeight: 600, }); - export const billingFrequency = style({ - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), }); - export const paymentMethod = style({ marginTop: '24px', }); - globalStyle('.dangerous-setting .name', { - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), }); - export const noInvoice = style({ - color: 'var(--affine-text-secondary-color)', - fontSize: 'var(--affine-font-xs)', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontXs'), }); - export const currentPlanName = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), fontWeight: 500, - color: 'var(--affine-text-emphasis-color)', + color: cssVar('textEmphasisColor'), cursor: 'pointer', }); export const button = style({ padding: '4px 12px', }); - export const subscriptionSettingSkeleton = style({ display: 'flex', flexDirection: 'column', gap: '24px', }); - export const billingHistorySkeleton = style({ display: 'flex', flexDirection: 'column', diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts index c3665d224..899b61737 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts @@ -1,11 +1,10 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const plansLayoutRoot = style({ display: 'flex', flexDirection: 'column', gap: '24px', }); - export const scrollArea = style({ marginLeft: 'calc(-1 * var(--setting-modal-gap-x))', paddingLeft: 'var(--setting-modal-gap-x)', @@ -13,12 +12,10 @@ export const scrollArea = style({ overflowX: 'auto', scrollSnapType: 'x mandatory', paddingBottom: '21px', - /** Avoid box-shadow clipping */ paddingTop: '21px', marginTop: '-21px', }); - export const scrollBar = style({ display: 'flex', alignItems: 'center', @@ -27,25 +24,22 @@ export const scrollBar = style({ height: '9px', width: '100%', }); - export const scrollThumb = style({ - background: 'var(--affine-icon-secondary)', + background: cssVar('iconSecondary'), opacity: 0.6, overflow: 'hidden', height: '4px', borderRadius: '4px', - vars: { '--radix-scroll-area-thumb-height': '4px', }, }); - export const allPlansLink = style({ display: 'flex', alignItems: 'center', gap: '4px', - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), background: 'transparent', borderColor: 'transparent', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), }); diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/skeleton.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/skeleton.css.ts index abec1785a..2389eaead 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/skeleton.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/skeleton.css.ts @@ -1,23 +1,21 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const plansWrapper = style({ display: 'flex', gap: '16px', }); - export const planItemCard = style({ width: '258px', height: '426px', flexShrink: '0', borderRadius: '16px', - backgroundColor: 'var(--affine-background-primary-color)', - border: '1px solid var(--affine-border-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), + border: `1px solid ${cssVar('borderColor')}`, padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px', }); - export const planItemHeader = style({ display: 'flex', flexDirection: 'column', diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts index 28b8ed444..e347c3941 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts @@ -1,15 +1,14 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const wrapper = style({ width: '100%', }); export const recurringRadioGroup = style({ width: '256px', }); - export const radioButtonDiscount = style({ marginLeft: '4px', - color: 'var(--affine-brand-color)', + color: cssVar('brandColor'), fontWeight: 400, }); export const radioButtonText = style({ @@ -19,23 +18,20 @@ export const radioButtonText = style({ }, }, }); - export const planCardsWrapper = style({ paddingRight: 'calc(var(--setting-modal-gap-x) + 30px)', display: 'flex', gap: '16px', width: 'fit-content', }); - export const planCard = style({ - backgroundColor: 'var(--affine-background-primary-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), minHeight: '426px', minWidth: '258px', borderRadius: '16px', padding: '20px', - border: '1px solid var(--affine-border-color)', + border: `1px solid ${cssVar('borderColor')}`, position: 'relative', - selectors: { '&::before': { content: '', @@ -45,47 +41,43 @@ export const planCard = style({ }, }, }); - export const proPlanCard = style([ planCard, { borderWidth: '1px', - borderColor: 'var(--affine-brand-color)', - boxShadow: 'var(--affine-shadow-2)', + borderColor: cssVar('brandColor'), + boxShadow: cssVar('shadow2'), position: 'relative', '::after': { content: '', position: 'absolute', inset: '-1px', borderRadius: 'inherit', - boxShadow: '0px 0px 0px 2px var(--affine-brand-color)', + boxShadow: `0px 0px 0px 2px ${cssVar('brandColor')}`, opacity: 0.3, zIndex: 1, pointerEvents: 'none', }, }, ]); - export const proPlanTitle = style({ - backgroundColor: 'var(--affine-brand-color)', - color: 'var(--affine-white)', + backgroundColor: cssVar('brandColor'), + color: cssVar('white'), padding: '0px 6px', borderRadius: '4px', height: '24px', display: 'inline-block', }); - export const discountLabel = style({ - color: 'var(--affine-text-emphasis-color)', + color: cssVar('textEmphasisColor'), marginLeft: '8px', lineHeight: '20px', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), fontWeight: 500, borderRadius: '4px', display: 'inline-block', height: '100%', }); - export const planTitle = style({ display: 'flex', flexDirection: 'column', @@ -93,36 +85,30 @@ export const planTitle = style({ gap: '10px', fontWeight: 600, }); - export const planPriceWrapper = style({ minHeight: '28px', lineHeight: 1, display: 'flex', alignItems: 'flex-end', }); - export const planPrice = style({ - fontSize: 'var(--affine-font-h-5)', + fontSize: cssVar('fontH5'), marginRight: '8px', }); - export const planPriceDesc = style({ - color: 'var(--affine-text-secondary-color)', - fontSize: 'var(--affine-font-sm)', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontSm'), }); - export const planAction = style({ width: '100%', }); - export const planBenefits = style({ marginTop: '20px', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), display: 'flex', flexDirection: 'column', gap: '8px', }); - export const planBenefit = style({ display: 'flex', gap: '8px', @@ -130,52 +116,44 @@ export const planBenefit = style({ alignItems: 'normal', fontSize: '12px', }); - export const planBenefitIcon = style({ display: 'flex', alignItems: 'center', height: '20px', }); - export const planBenefitText = style({ display: 'flex', flexDirection: 'column', alignItems: 'center', }); - export const downgradeContentWrapper = style({ padding: '12px 0 20px 0px', display: 'flex', flexDirection: 'column', gap: '12px', }); - export const downgradeContent = style({ fontSize: '15px', lineHeight: '24px', fontWeight: 400, - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }); - export const downgradeCaption = style({ fontSize: '14px', lineHeight: '22px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), }); - export const downgradeFooter = style({ display: 'flex', justifyContent: 'flex-end', gap: '20px', paddingTop: '20px', }); - export const textEmphasis = style({ - color: 'var(--affine-text-emphasis-color)', + color: cssVar('textEmphasisColor'), }); - export const errorTip = style({ - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), fontSize: '12px', lineHeight: '20px', }); diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts index 85a32944f..919e1b6f9 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts @@ -1,19 +1,18 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const shortcutRow = style({ height: '32px', marginBottom: '12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), selectors: { '&:last-of-type': { marginBottom: '0', }, }, }); - export const shortcutKeyContainer = style({ display: 'flex', }); @@ -25,8 +24,8 @@ export const shortcutKey = style({ justifyContent: 'center', padding: '0 6px', borderRadius: '4px', - background: 'var(--affine-background-tertiary-color)', - fontSize: 'var(--affine-font-xs)', + background: cssVar('backgroundTertiaryColor'), + fontSize: cssVar('fontXs'), selectors: { '&:not(:last-of-type)': { marginRight: '2px', diff --git a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts index 3fe4db50c..de91df305 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts @@ -1,27 +1,25 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const settingSlideBar = style({ width: '25%', maxWidth: '242px', - background: 'var(--affine-background-secondary-color)', + background: cssVar('backgroundSecondaryColor'), padding: '20px 0px', height: '100%', flexShrink: 0, display: 'flex', flexDirection: 'column', }); - export const sidebarTitle = style({ - fontSize: 'var(--affine-font-h-6)', + fontSize: cssVar('fontH6'), fontWeight: '600', - lineHeight: 'var(--affine-line-height)', + lineHeight: cssVar('lineHeight'), padding: '0px 16px 0px 24px', }); - export const sidebarSubtitle = style({ - fontSize: 'var(--affine-font-sm)', - lineHeight: 'var(--affine-line-height)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontSm'), + lineHeight: cssVar('lineHeight'), + color: cssVar('textSecondaryColor'), padding: '0px 16px 0px 24px', marginTop: '20px', marginBottom: '4px', @@ -29,7 +27,6 @@ export const sidebarSubtitle = style({ justifyContent: 'space-between', alignItems: 'center', }); - export const sidebarItemsWrapper = style({ display: 'flex', flexDirection: 'column', @@ -41,7 +38,6 @@ export const sidebarItemsWrapper = style({ }, }, }); - export const sidebarSelectItem = style({ display: 'flex', alignItems: 'center', @@ -49,20 +45,19 @@ export const sidebarSelectItem = style({ padding: '0px 8px', height: '30px', flexShrink: 0, - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), borderRadius: '8px', cursor: 'pointer', userSelect: 'none', ':hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, selectors: { '&.active': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, }, }); - export const sidebarSelectSubItem = style({ display: 'flex', alignItems: 'center', @@ -70,18 +65,17 @@ export const sidebarSelectSubItem = style({ padding: '0px 8px 0px 32px', height: '30px', flexShrink: 0, - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), borderRadius: '8px', cursor: 'pointer', userSelect: 'none', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), selectors: { '&.active, &:hover': { - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }, }, }); - globalStyle(`${settingSlideBar} .icon`, { width: '16px', height: '16px', @@ -107,13 +101,13 @@ export const currentWorkspaceLabel = style({ width: '8px', height: '8px', borderRadius: '50%', - background: 'var(--affine-blue)', + background: cssVar('blue'), }, }, }); - -export const sidebarFooter = style({ padding: '0 16px' }); - +export const sidebarFooter = style({ + padding: '0 16px', +}); export const accountButton = style({ padding: '4px 8px', borderRadius: '8px', @@ -124,15 +118,14 @@ export const accountButton = style({ justifyContent: 'space-between', alignItems: 'center', ':hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, selectors: { '&.active': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, }, }); - globalStyle(`${accountButton} .avatar`, { width: '28px', height: '28px', @@ -143,12 +136,11 @@ globalStyle(`${accountButton} .avatar`, { alignItems: 'center', flexShrink: 0, }); - globalStyle(`${accountButton} .avatar.not-sign`, { - color: 'var(--affine-icon-secondary)', - background: 'var(--affine-white)', + color: cssVar('iconSecondary'), + background: cssVar('white'), paddingBottom: '2px', - border: '1px solid var(--affine-icon-secondary)', + border: `1px solid ${cssVar('iconSecondary')}`, }); globalStyle(`${accountButton} .content`, { flexGrow: '1', @@ -163,7 +155,7 @@ globalStyle(`${accountButton} .name-container`, { height: '22px', }); globalStyle(`${accountButton} .name`, { - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', @@ -171,8 +163,8 @@ globalStyle(`${accountButton} .name`, { height: '22px', }); globalStyle(`${accountButton} .email`, { - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', diff --git a/packages/frontend/core/src/components/affine/setting-modal/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/style.css.ts index 215ca8c9a..7413d439d 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/style.css.ts @@ -1,50 +1,42 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const wrapper = style({ flexGrow: '1', height: '100%', - // margin: '0 auto', padding: '40px 15px 20px 15px', overflowX: 'hidden', overflowY: 'auto', - display: 'flex', justifyContent: 'center', - '::-webkit-scrollbar': { display: 'none', }, }); - export const centerContainer = style({ width: '100%', maxWidth: '560px', }); - export const content = style({ position: 'relative', width: '100%', marginBottom: '24px', minHeight: 'calc(100% - 48px)', }); - export const suggestionLink = style({ - fontSize: 'var(--affine-font-sm)', - color: 'var(--affine-text-primary-color)', + fontSize: cssVar('fontSm'), + color: cssVar('textPrimaryColor'), display: 'flex', alignItems: 'start', lineHeight: '22px', gap: '12px', }); - export const suggestionLinkIcon = style({ - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), marginRight: '12px', display: 'flex', margin: '3px 0', }); - export const footer = style({ display: 'flex', justifyContent: 'center', diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.css.ts b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.css.ts index b569f0506..97806e9fc 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const root = style({ height: 100, display: 'flex', diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.css.ts b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.css.ts index 7b91d3db5..13291e0c8 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.css.ts @@ -1,25 +1,22 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const promptRoot = style({ position: 'absolute', display: 'flex', flexDirection: 'column', height: '100%', }); - export const promptTitle = style({ - fontSize: 'var(--affine-font-h-4)', + fontSize: cssVar('fontH4'), fontWeight: '600', marginBottom: 48, }); - export const promptArt = style({ marginBottom: 68, }); - export const promptWarning = style({ - backgroundColor: 'var(--affine-background-tertiary-color)', - fontSize: 'var(--affine-font-xs)', + backgroundColor: cssVar('backgroundTertiaryColor'), + fontSize: cssVar('fontXs'), display: 'flex', flexDirection: 'column', justifyContent: 'center', @@ -27,17 +24,14 @@ export const promptWarning = style({ padding: 10, borderRadius: 8, }); - export const promptWarningTitle = style({ - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), fontWeight: 600, }); - export const spacer = style({ flexGrow: 1, minHeight: 12, }); - export const promptDisclaimer = style({ display: 'flex', alignItems: 'center', @@ -45,19 +39,16 @@ export const promptDisclaimer = style({ marginBottom: 32, gap: 4, }); - export const promptDisclaimerConfirm = style({ display: 'flex', justifyContent: 'center', }); - export const switchRow = style({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 32, }); - export const switchDisabled = style({ opacity: 0.5, pointerEvents: 'none', diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts index d08eca58e..8bf5d0deb 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts @@ -1,13 +1,12 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const modalWrapper = style({ position: 'relative', padding: '0px', width: '560px', - background: 'var(--affine-background-overlay-panel-color)', + background: cssVar('backgroundOverlayPanelColor'), borderRadius: '12px', }); - export const modalHeader = style({ margin: '44px 0px 12px 0px', width: '560px', @@ -15,15 +14,13 @@ export const modalHeader = style({ fontSize: '20px;', textAlign: 'center', }); - export const inputContent = style({ display: 'flex', flexDirection: 'row', justifyContent: 'center', margin: '24px 0', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), }); - export const workspaceName = style({ fontWeight: '600', }); diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/style.css.ts index a716ec60c..852c2e621 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/style.css.ts +++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/style.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const profileWrapper = style({ display: 'flex', alignItems: 'flex-end', @@ -11,7 +11,6 @@ export const profileHandlerWrapper = style({ alignItems: 'center', marginLeft: '20px', }); - export const labelWrapper = style({ width: '100%', display: 'flex', @@ -20,7 +19,6 @@ export const labelWrapper = style({ gap: '10px', flexWrap: 'wrap', }); - export const avatarWrapper = style({ width: '56px', height: '56px', @@ -51,10 +49,9 @@ globalStyle(`${avatarWrapper} .camera-icon-wrapper`, { alignItems: 'center', backgroundColor: 'rgba(60, 61, 63, 0.5)', zIndex: '1', - color: 'var(--affine-white)', + color: cssVar('white'), fontSize: '24px', }); - export const urlButton = style({ width: 'calc(100% - 64px - 15px)', justifyContent: 'left', @@ -65,10 +62,9 @@ globalStyle(`${urlButton} span`, { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', - color: 'var(--affine-placeholder-color)', + color: cssVar('placeholderColor'), fontWeight: '500', }); - export const fakeWrapper = style({ position: 'relative', opacity: 0.4, @@ -85,23 +81,21 @@ export const fakeWrapper = style({ }, }, }); - export const membersFallback = style({ display: 'flex', justifyContent: 'center', alignItems: 'center', - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), }); export const membersPanel = style({ padding: '4px', borderRadius: '12px', - background: 'var(--affine-background-primary-color)', - border: '1px solid var(--affine-border-color)', + background: cssVar('backgroundPrimaryColor'), + border: `1px solid ${cssVar('borderColor')}`, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', }); - export const memberList = style({}); export const memberListItem = style({ padding: '0 4px 0 16px', @@ -111,7 +105,7 @@ export const memberListItem = style({ alignItems: 'center', selectors: { '&:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), borderRadius: '8px', }, '&:not(:last-of-type)': { @@ -133,39 +127,37 @@ export const roleOrStatus = style({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), selectors: { '&.pending': { - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), }, }, }); export const memberName = style({ - fontSize: 'var(--affine-font-sm)', - color: 'var(--affine-text-primary-color)', + fontSize: cssVar('fontSm'), + color: cssVar('textPrimaryColor'), overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: '22px', }); export const memberEmail = style({ - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: '20px', }); export const iconButton = style({}); - globalStyle(`${memberListItem}:hover ${iconButton}`, { opacity: 1, pointerEvents: 'all', }); - export const label = style({ - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), marginBottom: '5px', }); export const workspaceLabel = style({ @@ -176,28 +168,25 @@ export const workspaceLabel = style({ alignItems: 'center', borderRadius: '6px', padding: '2px 10px', - border: '1px solid var(--affine-white-30)', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-primary-color)', + border: `1px solid ${cssVar('white30')}`, + fontSize: cssVar('fontXs'), + color: cssVar('textPrimaryColor'), lineHeight: '20px', whiteSpace: 'nowrap', }); - export const goUpgrade = style({ - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-emphasis-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textEmphasisColor'), cursor: 'pointer', marginLeft: '4px', display: 'inline', }); - export const goUpgradeWrapper = style({ display: 'inline-flex', alignItems: 'center', }); - export const arrowRight = style({ fontSize: '16px', - color: 'var(--affine-text-emphasis-color)', + color: cssVar('textEmphasisColor'), cursor: 'pointer', }); diff --git a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/index.css.ts b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/index.css.ts index 0275804da..5d75d0042 100644 --- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/index.css.ts +++ b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/index.css.ts @@ -1,42 +1,37 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const headerStyle = style({ display: 'flex', alignItems: 'center', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 600, lineHeight: '22px', padding: '0 4px', gap: '4px', }); - export const menuStyle = style({ width: '410px', height: 'auto', padding: '12px', transform: 'translateX(-10px)', }); - export const menuItemStyle = style({ padding: '4px', transition: 'all 0.3s', }); - export const descriptionStyle = style({ wordWrap: 'break-word', // wordBreak: 'break-all', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), lineHeight: '20px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), textAlign: 'left', padding: '0 6px', }); - export const buttonStyle = style({ marginTop: '18px', // todo: new color scheme should be used }); - export const actionsStyle = style({ display: 'flex', gap: '9px', @@ -44,41 +39,35 @@ export const actionsStyle = style({ justifyContent: 'center', alignItems: 'flex-start', }); - export const containerStyle = style({ display: 'flex', width: '100%', flexDirection: 'column', gap: '8px', }); - export const indicatorContainerStyle = style({ position: 'relative', }); - export const inputButtonRowStyle = style({ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '16px', }); - export const titleContainerStyle = style({ display: 'flex', alignItems: 'center', gap: '4px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 500, lineHeight: '22px', padding: '0 4px', }); - export const subTitleStyle = style({ - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 500, lineHeight: '22px', }); - export const columnContainerStyle = style({ display: 'flex', flexDirection: 'column', @@ -86,7 +75,6 @@ export const columnContainerStyle = style({ width: '100%', gap: '8px', }); - export const rowContainerStyle = style({ display: 'flex', flexDirection: 'row', @@ -95,7 +83,6 @@ export const rowContainerStyle = style({ gap: '12px', padding: '4px', }); - export const radioButtonGroup = style({ display: 'flex', justifyContent: 'flex-end', @@ -103,30 +90,26 @@ export const radioButtonGroup = style({ minWidth: '154px', maxWidth: '250px', }); - export const radioButton = style({ - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), selectors: { '&[data-state="checked"]': { - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }, }, }); - export const disableSharePage = style({ - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), }); - export const localSharePage = style({ padding: '12px 8px', display: 'flex', alignItems: 'center', borderRadius: '8px', - backgroundColor: 'var(--affine-background-secondary-color)', + backgroundColor: cssVar('backgroundSecondaryColor'), minHeight: '84px', position: 'relative', }); - export const cloudSvgContainer = style({ width: '146px', display: 'flex', @@ -138,26 +121,24 @@ export const cloudSvgContainer = style({ }); export const shareIconStyle = style({ fontSize: '16px', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), display: 'flex', alignItems: 'center', }); - export const shareLinkStyle = style({ padding: '4px', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), fontWeight: 500, lineHeight: '20px', transform: 'translateX(-4px)', gap: '4px', }); globalStyle(`${shareLinkStyle} > span`, { - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), }); globalStyle(`${shareLinkStyle} > div > svg`, { - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), }); - export const journalShareButton = style({ height: 32, padding: '0px 8px', diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts index b2f61f37d..6eb878bc1 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts @@ -1,11 +1,10 @@ import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const docEditorRoot = style({ display: 'block', height: '100%', overflow: 'hidden', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), }); // brings styles of .affine-doc-viewport from blocksuite @@ -16,9 +15,10 @@ export const affineDocViewport = style({ overflowX: 'hidden', overflowY: 'auto', userSelect: 'none', - containerName: 'viewport', // todo: find out what this does in bs + containerName: 'viewport', + // todo: find out what this does in bs containerType: 'inline-size', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), '@media': { print: { display: 'none', @@ -26,12 +26,10 @@ export const affineDocViewport = style({ }, }, }); - export const docContainer = style({ display: 'block', paddingBottom: 64, }); - const titleTagBasic = style({ fontSize: cssVar('fontH4'), fontWeight: 600, @@ -51,7 +49,6 @@ export const titleTodayTag = style([ color: cssVar('brandColor'), }, ]); - export const pageReferenceIcon = style({ verticalAlign: 'middle', fontSize: '1.1em', diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/title/style.css.ts b/packages/frontend/core/src/components/blocksuite/block-suite-header/title/style.css.ts index 8a3218f0a..e49ef52f3 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-header/title/style.css.ts +++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/title/style.css.ts @@ -1,6 +1,6 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const title = style({ fontWeight: 500, - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }); diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-page-list/index.css.ts b/packages/frontend/core/src/components/blocksuite/block-suite-page-list/index.css.ts index 7396dee14..b886d137b 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-page-list/index.css.ts +++ b/packages/frontend/core/src/components/blocksuite/block-suite-page-list/index.css.ts @@ -1,24 +1,22 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const pageListEmptyStyle = style({ height: 'calc(100% - 52px)', }); - export const emptyDescButton = style({ cursor: 'pointer', - color: 'var(--affine-text-secondary-color)', - background: 'var(--affine-background-code-block)', - border: '1px solid var(--affine-border-color)', + color: cssVar('textSecondaryColor'), + background: cssVar('backgroundCodeBlock'), + border: `1px solid ${cssVar('borderColor')}`, borderRadius: '4px', padding: '0 6px', boxSizing: 'border-box', selectors: { '&:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, }, }); - export const emptyDescKbd = style([ emptyDescButton, { diff --git a/packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts b/packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts index 3000c5d25..8ee4c1a64 100644 --- a/packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts +++ b/packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts @@ -1,15 +1,15 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const iconWrapper = style({ display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '24px', cursor: 'pointer', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), selectors: { '&:visited': { - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }, }, }); diff --git a/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts b/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts index 389f92c4f..b359def28 100644 --- a/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts +++ b/packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts @@ -1,15 +1,15 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const iconWrapper = style({ display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '24px', cursor: 'pointer', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), selectors: { '&:visited': { - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }, }, }); @@ -19,7 +19,6 @@ export const rightItemContainer = style({ gap: '8px', padding: '0 8px', }); - export const presentButton = style({ gap: '4px', }); diff --git a/packages/frontend/core/src/components/filter-container.css.ts b/packages/frontend/core/src/components/filter-container.css.ts index 6e9a3c867..f2231a970 100644 --- a/packages/frontend/core/src/components/filter-container.css.ts +++ b/packages/frontend/core/src/components/filter-container.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const filterContainerStyle = style({ padding: '0 16px', display: 'flex', diff --git a/packages/frontend/core/src/components/image-preview/index.css.ts b/packages/frontend/core/src/components/image-preview/index.css.ts index c7f3d07bb..3d4659475 100644 --- a/packages/frontend/core/src/components/image-preview/index.css.ts +++ b/packages/frontend/core/src/components/image-preview/index.css.ts @@ -1,16 +1,22 @@ +import { cssVar } from '@toeverything/theme'; import { baseTheme } from '@toeverything/theme'; import { keyframes, style } from '@vanilla-extract/css'; - const fadeInAnimation = keyframes({ - from: { opacity: 0 }, - to: { opacity: 1 }, + from: { + opacity: 0, + }, + to: { + opacity: 1, + }, }); - const fadeOutAnimation = keyframes({ - from: { opacity: 1 }, - to: { opacity: 0 }, + from: { + opacity: 1, + }, + to: { + opacity: 0, + }, }); - export const imagePreviewBackgroundStyle = style({ position: 'fixed', top: 0, @@ -20,28 +26,24 @@ export const imagePreviewBackgroundStyle = style({ zIndex: baseTheme.zIndexModal, background: 'rgba(0, 0, 0, 0.75)', }); - export const imagePreviewModalStyle = style({ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }); - export const loaded = style({ opacity: 0, animationName: fadeInAnimation, animationDuration: '0.25s', animationFillMode: 'forwards', }); - export const unloaded = style({ opacity: 1, animationName: fadeOutAnimation, animationDuration: '0.25s', animationFillMode: 'forwards', }); - export const imagePreviewModalCloseButtonStyle = style({ position: 'absolute', display: 'flex', @@ -53,19 +55,18 @@ export const imagePreviewModalCloseButtonStyle = style({ borderRadius: '10px', top: '0.5rem', right: '0.5rem', - background: 'var(--affine-white)', + background: cssVar('white'), border: 'none', padding: '0.5rem', cursor: 'pointer', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), transition: 'background 0.2s ease-in-out', zIndex: 1, marginTop: '38px', marginRight: '38px', }); - export const imagePreviewModalGoStyle = style({ - color: 'var(--affine-white)', + color: cssVar('white'), position: 'absolute', fontSize: '60px', lineHeight: '60px', @@ -74,7 +75,6 @@ export const imagePreviewModalGoStyle = style({ padding: '0 15px', cursor: 'pointer', }); - export const imageNavigationControlStyle = style({ display: 'flex', height: '100%', @@ -82,7 +82,6 @@ export const imageNavigationControlStyle = style({ justifyContent: 'space-between', alignItems: 'center', }); - export const imagePreviewModalContainerStyle = style({ display: 'flex', flexDirection: 'column', @@ -94,15 +93,13 @@ export const imagePreviewModalContainerStyle = style({ }, }, }); - export const imagePreviewModalCenterStyle = style({ display: 'flex', flexDirection: 'column', alignItems: 'center', }); - export const imagePreviewModalCaptionStyle = style({ - color: 'var(--affine-white)', + color: cssVar('white'), marginTop: '24px', '@media': { 'screen and (max-width: 768px)': { @@ -110,19 +107,17 @@ export const imagePreviewModalCaptionStyle = style({ }, }, }); - export const imagePreviewActionBarStyle = style({ display: 'flex', justifyContent: 'center', alignItems: 'center', - backgroundColor: 'var(--affine-white)', + backgroundColor: cssVar('white'), borderRadius: '8px', boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)', maxWidth: 'max-content', minHeight: '44px', maxHeight: '44px', }); - export const groupStyle = style({ padding: '10px 0', boxSizing: 'border-box', @@ -131,22 +126,18 @@ export const groupStyle = style({ justifyContent: 'center', borderLeft: '1px solid #E3E2E4', }); - export const buttonStyle = style({ margin: '10px 6px', }); - export const scaleIndicatorButtonStyle = style({ minHeight: '100%', maxWidth: 'max-content', fontSize: '12px', padding: '5px 5px', - ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, }); - export const imageBottomContainerStyle = style({ display: 'flex', flexDirection: 'column', @@ -155,15 +146,13 @@ export const imageBottomContainerStyle = style({ bottom: '28px', zIndex: baseTheme.zIndexModal + 1, }); - export const captionStyle = style({ maxWidth: '686px', - color: 'var(--affine-white)', + color: cssVar('white'), background: 'rgba(0,0,0,0.75)', padding: '10px', marginBottom: '21px', }); - export const suspenseFallbackStyle = style({ opacity: 0, transition: 'opacity 2s ease-in-out', diff --git a/packages/frontend/core/src/components/page-detail-editor.css.ts b/packages/frontend/core/src/components/page-detail-editor.css.ts index 4280c62b2..119199ddf 100644 --- a/packages/frontend/core/src/components/page-detail-editor.css.ts +++ b/packages/frontend/core/src/components/page-detail-editor.css.ts @@ -1,5 +1,4 @@ import { globalStyle, style } from '@vanilla-extract/css'; - export const editor = style({ flex: 1, overflow: 'auto', @@ -15,13 +14,11 @@ export const editor = style({ }, }, }); - globalStyle(`${editor} .affine-doc-viewport`, { paddingBottom: '150px', paddingLeft: '20px', scrollbarGutter: 'stable', }); - globalStyle('.is-public-page page-meta-tags', { display: 'none', }); diff --git a/packages/frontend/core/src/components/page-list/collections/collection-list-header.css.ts b/packages/frontend/core/src/components/page-list/collections/collection-list-header.css.ts index a9dff28a9..7ac21e202 100644 --- a/packages/frontend/core/src/components/page-list/collections/collection-list-header.css.ts +++ b/packages/frontend/core/src/components/page-list/collections/collection-list-header.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const collectionListHeader = style({ height: 100, alignItems: 'center', @@ -7,23 +7,21 @@ export const collectionListHeader = style({ overflow: 'hidden', display: 'flex', justifyContent: 'space-between', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), }); - export const collectionListHeaderTitle = style({ - fontSize: 'var(--affine-font-h-5)', + fontSize: cssVar('fontH5'), fontWeight: 500, - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), display: 'flex', alignItems: 'center', gap: 8, }); - export const newCollectionButton = style({ padding: '6px 10px', borderRadius: '8px', - background: 'var(--affine-background-primary-color)', - fontSize: 'var(--affine-font-sm)', + background: cssVar('backgroundPrimaryColor'), + fontSize: cssVar('fontSm'), fontWeight: 600, height: '32px', }); diff --git a/packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts b/packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts index 82cd0b657..253497a71 100644 --- a/packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts +++ b/packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts @@ -1,15 +1,16 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const root = style({ display: 'flex', - color: 'var(--affine-text-primary-color)', - height: '54px', // 42 + 12 + color: cssVar('textPrimaryColor'), + height: '54px', + // 42 + 12 flexShrink: 0, width: '100%', alignItems: 'stretch', transition: 'background-color 0.2s, opacity 0.2s', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, overflow: 'hidden', cursor: 'default', @@ -20,7 +21,6 @@ export const root = style({ }, }, }); - export const dragOverlay = style({ display: 'flex', alignItems: 'center', @@ -40,12 +40,11 @@ export const dragPageItemOverlay = style({ borderRadius: '10px', display: 'flex', alignItems: 'center', - background: 'var(--affine-hover-color-filled)', - boxShadow: 'var(--affine-menu-shadow)', + background: cssVar('hoverColorFilled'), + boxShadow: cssVar('menuShadow'), maxWidth: '360px', minWidth: '260px', }); - export const dndCell = style({ position: 'relative', marginLeft: -8, @@ -53,7 +52,6 @@ export const dndCell = style({ outline: 'none', paddingLeft: 8, }); - globalStyle(`[data-draggable=true] ${dndCell}:before`, { content: '""', position: 'absolute', @@ -63,21 +61,18 @@ globalStyle(`[data-draggable=true] ${dndCell}:before`, { width: 4, height: 4, transition: 'height 0.2s, opacity 0.2s', - backgroundColor: 'var(--affine-placeholder-color)', + backgroundColor: cssVar('placeholderColor'), borderRadius: '2px', opacity: 0, willChange: 'height, opacity', }); - globalStyle(`[data-draggable=true] ${dndCell}:hover:before`, { height: 12, opacity: 1, }); - globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}`, { opacity: 0.5, }); - globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, { height: 32, width: 2, @@ -88,25 +83,21 @@ globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, { globalStyle(`${root} > :first-child`, { paddingLeft: '16px', }); - globalStyle(`${root} > :last-child`, { paddingRight: '8px', }); - export const titleIconsWrapper = style({ padding: '0 5px', display: 'flex', alignItems: 'center', gap: '10px', }); - export const selectionCell = style({ display: 'flex', alignItems: 'center', flexShrink: 0, - fontSize: 'var(--affine-font-h-3)', + fontSize: cssVar('fontH3'), }); - export const titleCell = style({ display: 'flex', flexDirection: 'column', @@ -116,62 +107,55 @@ export const titleCell = style({ flex: 1, whiteSpace: 'nowrap', }); - export const titleCellMain = style({ overflow: 'hidden', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 600, whiteSpace: 'nowrap', flex: 1, textOverflow: 'ellipsis', alignSelf: 'stretch', }); - export const titleCellPreview = style({ overflow: 'hidden', - color: 'var(--affine-text-secondary-color)', - fontSize: 'var(--affine-font-xs)', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontXs'), flex: 1, whiteSpace: 'nowrap', textOverflow: 'ellipsis', alignSelf: 'stretch', }); - export const iconCell = style({ display: 'flex', alignItems: 'center', - fontSize: 'var(--affine-font-h-3)', - color: 'var(--affine-icon-color)', + fontSize: cssVar('fontH3'), + color: cssVar('iconColor'), flexShrink: 0, }); - export const tagsCell = style({ display: 'flex', alignItems: 'center', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), padding: '0 8px', height: '60px', width: '100%', }); - export const dateCell = style({ display: 'flex', alignItems: 'center', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), flexShrink: 0, flexWrap: 'nowrap', padding: '0 8px', }); - export const actionsCellWrapper = style({ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flexShrink: 0, }); - export const operationsCell = style({ display: 'flex', alignItems: 'center', diff --git a/packages/frontend/core/src/components/page-list/components/floating-toolbar.css.ts b/packages/frontend/core/src/components/page-list/components/floating-toolbar.css.ts index 45cb37b63..47750fcfb 100644 --- a/packages/frontend/core/src/components/page-list/components/floating-toolbar.css.ts +++ b/packages/frontend/core/src/components/page-list/components/floating-toolbar.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { keyframes, style } from '@vanilla-extract/css'; - const slideDownAndFade = keyframes({ '0%': { opacity: 0, @@ -10,7 +10,6 @@ const slideDownAndFade = keyframes({ transform: 'scale(1) translateY(0)', }, }); - const slideUpAndFade = keyframes({ '0%': { opacity: 1, @@ -21,20 +20,18 @@ const slideUpAndFade = keyframes({ transform: 'scale(0.95) translateY(20px)', }, }); - export const root = style({ display: 'flex', alignItems: 'center', borderRadius: '10px', padding: '4px', - border: '1px solid var(--affine-border-color)', - boxShadow: 'var(--affine-menu-shadow)', + border: `1px solid ${cssVar('borderColor')}`, + boxShadow: cssVar('menuShadow'), gap: 4, minWidth: 'max-content', width: 'fit-content', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), }); - export const popoverContent = style({ willChange: 'transform opacity', selectors: { @@ -46,13 +43,11 @@ export const popoverContent = style({ }, }, }); - export const separator = style({ width: '1px', height: '24px', - background: 'var(--affine-divider-color)', + background: cssVar('dividerColor'), }); - export const item = style({ display: 'flex', alignItems: 'center', @@ -61,33 +56,30 @@ export const item = style({ height: '32px', padding: '0 6px', }); - export const button = style([ item, { borderRadius: '8px', ':hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, }, ]); - export const danger = style({ color: 'inherit', ':hover': { - background: 'var(--affine-background-error-color)', - color: 'var(--affine-error-color)', + background: cssVar('backgroundErrorColor'), + color: cssVar('errorColor'), }, }); - export const buttonIcon = style({ display: 'flex', alignItems: 'center', fontSize: 20, - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), selectors: { [`${danger}:hover &`]: { - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), }, }, }); diff --git a/packages/frontend/core/src/components/page-list/components/list-floating-toolbar.css.ts b/packages/frontend/core/src/components/page-list/components/list-floating-toolbar.css.ts index 3f68e4a83..f8ae832f9 100644 --- a/packages/frontend/core/src/components/page-list/components/list-floating-toolbar.css.ts +++ b/packages/frontend/core/src/components/page-list/components/list-floating-toolbar.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const floatingToolbar = style({ position: 'absolute', bottom: 26, diff --git a/packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts b/packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts index 1edfac329..6e70bc27e 100644 --- a/packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts +++ b/packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts @@ -1,19 +1,19 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const headerCell = style({ padding: '0 8px', userSelect: 'none', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), selectors: { '&[data-sorting], &:hover': { - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }, '&[data-sortable]': { cursor: 'pointer', }, '&:not(:last-child)': { - borderRight: '1px solid var(--affine-hover-color-filled)', + borderRight: `1px solid ${cssVar('hoverColorFilled')}`, }, }, display: 'flex', @@ -22,9 +22,8 @@ export const headerCell = style({ position: 'relative', whiteSpace: 'nowrap', }); - export const headerCellSortIcon = style({ display: 'inline-flex', fontSize: 14, - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), }); diff --git a/packages/frontend/core/src/components/page-list/components/new-page-button.css.ts b/packages/frontend/core/src/components/page-list/components/new-page-button.css.ts index 9565e7e2a..b0518a9f5 100644 --- a/packages/frontend/core/src/components/page-list/components/new-page-button.css.ts +++ b/packages/frontend/core/src/components/page-list/components/new-page-button.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const menuContent = style({ - backgroundColor: 'var(--affine-background-overlay-panel-color)', + backgroundColor: cssVar('backgroundOverlayPanelColor'), }); diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-header.css.ts b/packages/frontend/core/src/components/page-list/docs/page-list-header.css.ts index 792d1896c..a094c4c45 100644 --- a/packages/frontend/core/src/components/page-list/docs/page-list-header.css.ts +++ b/packages/frontend/core/src/components/page-list/docs/page-list-header.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const docListHeader = style({ height: 100, alignItems: 'center', @@ -7,63 +7,56 @@ export const docListHeader = style({ overflow: 'hidden', display: 'flex', justifyContent: 'space-between', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), }); - export const docListHeaderTitle = style({ - fontSize: 'var(--affine-font-h-5)', + fontSize: cssVar('fontH5'), fontWeight: 500, - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), display: 'flex', alignItems: 'center', gap: 8, height: '28px', }); - export const titleIcon = style({ - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), display: 'inline-flex', alignItems: 'center', }); - export const titleCollectionName = style({ - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }); - export const addPageButton = style({ padding: '6px 10px', borderRadius: '8px', - background: 'var(--affine-background-primary-color)', - fontSize: 'var(--affine-font-sm)', + background: cssVar('backgroundPrimaryColor'), + fontSize: cssVar('fontSm'), fontWeight: 600, height: '32px', }); - export const tagSticky = style({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '1px 8px', - color: 'var(--affine-text-primary-color)', - fontSize: 'var(--affine-font-xs)', + color: cssVar('textPrimaryColor'), + fontSize: cssVar('fontXs'), borderRadius: '10px', columnGap: '4px', - border: '1px solid var(--affine-border-color)', - background: 'var(--affine-background-primary-color)', + border: `1px solid ${cssVar('borderColor')}`, + background: cssVar('backgroundPrimaryColor'), maxWidth: '30vw', textOverflow: 'ellipsis', whiteSpace: 'nowrap', height: '22px', lineHeight: '1.67em', }); - export const tagIndicator = style({ width: '8px', height: '8px', borderRadius: '50%', flexShrink: 0, }); - export const tagLabel = style({ overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts b/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts index 82cd0b657..253497a71 100644 --- a/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts +++ b/packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts @@ -1,15 +1,16 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const root = style({ display: 'flex', - color: 'var(--affine-text-primary-color)', - height: '54px', // 42 + 12 + color: cssVar('textPrimaryColor'), + height: '54px', + // 42 + 12 flexShrink: 0, width: '100%', alignItems: 'stretch', transition: 'background-color 0.2s, opacity 0.2s', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, overflow: 'hidden', cursor: 'default', @@ -20,7 +21,6 @@ export const root = style({ }, }, }); - export const dragOverlay = style({ display: 'flex', alignItems: 'center', @@ -40,12 +40,11 @@ export const dragPageItemOverlay = style({ borderRadius: '10px', display: 'flex', alignItems: 'center', - background: 'var(--affine-hover-color-filled)', - boxShadow: 'var(--affine-menu-shadow)', + background: cssVar('hoverColorFilled'), + boxShadow: cssVar('menuShadow'), maxWidth: '360px', minWidth: '260px', }); - export const dndCell = style({ position: 'relative', marginLeft: -8, @@ -53,7 +52,6 @@ export const dndCell = style({ outline: 'none', paddingLeft: 8, }); - globalStyle(`[data-draggable=true] ${dndCell}:before`, { content: '""', position: 'absolute', @@ -63,21 +61,18 @@ globalStyle(`[data-draggable=true] ${dndCell}:before`, { width: 4, height: 4, transition: 'height 0.2s, opacity 0.2s', - backgroundColor: 'var(--affine-placeholder-color)', + backgroundColor: cssVar('placeholderColor'), borderRadius: '2px', opacity: 0, willChange: 'height, opacity', }); - globalStyle(`[data-draggable=true] ${dndCell}:hover:before`, { height: 12, opacity: 1, }); - globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}`, { opacity: 0.5, }); - globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, { height: 32, width: 2, @@ -88,25 +83,21 @@ globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, { globalStyle(`${root} > :first-child`, { paddingLeft: '16px', }); - globalStyle(`${root} > :last-child`, { paddingRight: '8px', }); - export const titleIconsWrapper = style({ padding: '0 5px', display: 'flex', alignItems: 'center', gap: '10px', }); - export const selectionCell = style({ display: 'flex', alignItems: 'center', flexShrink: 0, - fontSize: 'var(--affine-font-h-3)', + fontSize: cssVar('fontH3'), }); - export const titleCell = style({ display: 'flex', flexDirection: 'column', @@ -116,62 +107,55 @@ export const titleCell = style({ flex: 1, whiteSpace: 'nowrap', }); - export const titleCellMain = style({ overflow: 'hidden', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 600, whiteSpace: 'nowrap', flex: 1, textOverflow: 'ellipsis', alignSelf: 'stretch', }); - export const titleCellPreview = style({ overflow: 'hidden', - color: 'var(--affine-text-secondary-color)', - fontSize: 'var(--affine-font-xs)', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontXs'), flex: 1, whiteSpace: 'nowrap', textOverflow: 'ellipsis', alignSelf: 'stretch', }); - export const iconCell = style({ display: 'flex', alignItems: 'center', - fontSize: 'var(--affine-font-h-3)', - color: 'var(--affine-icon-color)', + fontSize: cssVar('fontH3'), + color: cssVar('iconColor'), flexShrink: 0, }); - export const tagsCell = style({ display: 'flex', alignItems: 'center', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), padding: '0 8px', height: '60px', width: '100%', }); - export const dateCell = style({ display: 'flex', alignItems: 'center', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), flexShrink: 0, flexWrap: 'nowrap', padding: '0 8px', }); - export const actionsCellWrapper = style({ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flexShrink: 0, }); - export const operationsCell = style({ display: 'flex', alignItems: 'center', diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-new-page-button.css.ts b/packages/frontend/core/src/components/page-list/docs/page-list-new-page-button.css.ts index ca86af65c..408636ce6 100644 --- a/packages/frontend/core/src/components/page-list/docs/page-list-new-page-button.css.ts +++ b/packages/frontend/core/src/components/page-list/docs/page-list-new-page-button.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const newPageButtonLabel = style({ display: 'flex', alignItems: 'center', diff --git a/packages/frontend/core/src/components/page-list/docs/page-tags.css.ts b/packages/frontend/core/src/components/page-list/docs/page-tags.css.ts index fbf535da0..5991bf20e 100644 --- a/packages/frontend/core/src/components/page-list/docs/page-tags.css.ts +++ b/packages/frontend/core/src/components/page-list/docs/page-tags.css.ts @@ -1,19 +1,16 @@ +import { cssVar } from '@toeverything/theme'; import { createVar, style } from '@vanilla-extract/css'; - export const hoverMaxWidth = createVar(); - export const root = style({ position: 'relative', width: '100%', height: '100%', minHeight: '32px', }); - export const tagsContainer = style({ display: 'flex', alignItems: 'center', }); - export const tagsScrollContainer = style([ tagsContainer, { @@ -23,7 +20,6 @@ export const tagsScrollContainer = style([ gap: '8px', }, ]); - export const tagsListContainer = style([ tagsContainer, { @@ -33,7 +29,6 @@ export const tagsListContainer = style([ gap: '4px', }, ]); - export const innerContainer = style({ display: 'flex', columnGap: '8px', @@ -58,15 +53,15 @@ export const innerBackdrop = style({ height: '100%', opacity: 0, transition: 'all 0.2s', - background: - 'linear-gradient(90deg, transparent 0%, var(--affine-hover-color-filled) 40%)', + background: `linear-gradient(90deg, transparent 0%, ${cssVar( + 'hoverColorFilled' + )} 40%)`, selectors: { [`${root}:hover &`]: { opacity: 1, }, }, }); - export const tag = style({ height: '20px', display: 'flex', @@ -77,33 +72,30 @@ export const tag = style({ minWidth: 'max-content', }, }); - export const tagInnerWrapper = style({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 8px', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }); - export const tagSticky = style([ tagInnerWrapper, { - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), borderRadius: '10px', columnGap: '4px', - border: '1px solid var(--affine-border-color)', - background: 'var(--affine-background-primary-color)', + border: `1px solid ${cssVar('borderColor')}`, + background: cssVar('backgroundPrimaryColor'), maxWidth: '128px', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }, ]); - export const tagListItem = style([ tag, { - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), padding: '4px 12px', columnGap: '8px', textOverflow: 'ellipsis', @@ -111,21 +103,18 @@ export const tagListItem = style([ height: '30px', }, ]); - export const showMoreTag = style({ - fontSize: 'var(--affine-font-h-5)', + fontSize: cssVar('fontH5'), right: 0, position: 'sticky', display: 'inline-flex', }); - export const tagIndicator = style({ width: '8px', height: '8px', borderRadius: '50%', flexShrink: 0, }); - export const tagLabel = style({ overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/packages/frontend/core/src/components/page-list/filter/index.css.ts b/packages/frontend/core/src/components/page-list/filter/index.css.ts index 2f8a7af05..ce2bc06c4 100644 --- a/packages/frontend/core/src/components/page-list/filter/index.css.ts +++ b/packages/frontend/core/src/components/page-list/filter/index.css.ts @@ -1,14 +1,14 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const menuItemStyle = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), }); export const variableSelectTitleStyle = style({ margin: '7px 16px', fontWeight: 500, lineHeight: '20px', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), }); export const variableSelectDividerStyle = style({ marginTop: '2px', @@ -16,20 +16,19 @@ export const variableSelectDividerStyle = style({ marginLeft: '12px', marginRight: '8px', height: '1px', - background: 'var(--affine-border-color)', + background: cssVar('borderColor'), }); export const menuItemTextStyle = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), }); export const filterItemStyle = style({ display: 'flex', - border: '1px solid var(--affine-border-color)', + border: `1px solid ${cssVar('borderColor')}`, borderRadius: '8px', - background: 'var(--affine-white)', + background: cssVar('white'), padding: '4px 8px', overflow: 'hidden', }); - export const filterItemCloseStyle = style({ display: 'flex', alignItems: 'center', @@ -38,31 +37,31 @@ export const filterItemCloseStyle = style({ marginLeft: '4px', }); export const inputStyle = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), padding: '2px 4px', transition: 'all 0.15s ease-in-out', ':hover': { cursor: 'pointer', - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), borderRadius: '4px', }, }); export const switchStyle = style({ - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), padding: '2px 4px', transition: 'all 0.15s ease-in-out', display: 'flex', alignItems: 'center', ':hover': { cursor: 'pointer', - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), borderRadius: '4px', }, whiteSpace: 'nowrap', }); export const filterTypeStyle = style({ - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), display: 'flex', alignItems: 'center', padding: '2px 4px', @@ -70,15 +69,15 @@ export const filterTypeStyle = style({ marginRight: '6px', ':hover': { cursor: 'pointer', - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), borderRadius: '4px', }, }); export const filterTypeIconStyle = style({ - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), marginRight: '6px', padding: '1px 0', display: 'flex', alignItems: 'center', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), }); diff --git a/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts b/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts index 6cc90537b..9c595e397 100644 --- a/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts +++ b/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts @@ -1,14 +1,14 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const content = style({ fontSize: 12, - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), borderRadius: 8, padding: '3px 4px', cursor: 'pointer', overflow: 'hidden', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, }); export const text = style({ @@ -34,7 +34,7 @@ export const selectOption = style({ padding: '0 12px', cursor: 'pointer', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, }); export const optionLabel = style({ @@ -46,6 +46,6 @@ export const optionLabel = style({ export const done = style({ display: 'flex', alignItems: 'center', - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), marginLeft: 8, }); diff --git a/packages/frontend/core/src/components/page-list/list.css.ts b/packages/frontend/core/src/components/page-list/list.css.ts index 568a81ddf..e7b18ff4e 100644 --- a/packages/frontend/core/src/components/page-list/list.css.ts +++ b/packages/frontend/core/src/components/page-list/list.css.ts @@ -1,37 +1,31 @@ +import { cssVar } from '@toeverything/theme'; import { createContainer, style } from '@vanilla-extract/css'; import * as itemStyles from './docs/page-list-item.css'; - export const listRootContainer = createContainer('list-root-container'); - export const pageListScrollContainer = style({ width: '100%', flex: 1, }); - export const root = style({ width: '100%', maxWidth: '100%', containerName: listRootContainer, containerType: 'inline-size', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), }); - export const groupsContainer = style({ display: 'flex', flexDirection: 'column', rowGap: '16px', }); - export const heading = style({}); - export const colWrapper = style({ display: 'flex', alignItems: 'center', flexShrink: 0, overflow: 'hidden', }); - export const hideInSmallContainer = style({ '@container': { [`${listRootContainer} (max-width: 800px)`]: { @@ -43,7 +37,6 @@ export const hideInSmallContainer = style({ }, }, }); - export const favoriteCell = style({ display: 'flex', alignItems: 'center', @@ -56,7 +49,6 @@ export const favoriteCell = style({ }, }, }); - export const clearLinkStyle = style({ color: 'inherit', textDecoration: 'none', diff --git a/packages/frontend/core/src/components/page-list/operation-menu-items/index.css.ts b/packages/frontend/core/src/components/page-list/operation-menu-items/index.css.ts index 532e0b627..8503263ec 100644 --- a/packages/frontend/core/src/components/page-list/operation-menu-items/index.css.ts +++ b/packages/frontend/core/src/components/page-list/operation-menu-items/index.css.ts @@ -1,17 +1,15 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const moveToTrashStyle = style({ padding: '4px 12px', ':hover': { - backgroundColor: 'var(--affine-background-error-color)', - color: 'var(--affine-error-color)', + backgroundColor: cssVar('backgroundErrorColor'), + color: cssVar('errorColor'), }, }); - globalStyle(`${moveToTrashStyle}:hover svg`, { - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), }); - export const transitionStyle = style({ transition: 'all 0.3s', }); diff --git a/packages/frontend/core/src/components/page-list/page-group.css.ts b/packages/frontend/core/src/components/page-list/page-group.css.ts index f8299c74e..529408ac5 100644 --- a/packages/frontend/core/src/components/page-list/page-group.css.ts +++ b/packages/frontend/core/src/components/page-list/page-group.css.ts @@ -1,11 +1,10 @@ +import { cssVar } from '@toeverything/theme'; import { keyframes, style } from '@vanilla-extract/css'; - export const root = style({ display: 'flex', flexDirection: 'column', gap: 6, }); - const slideDown = keyframes({ '0%': { opacity: 0, @@ -16,7 +15,6 @@ const slideDown = keyframes({ height: 'var(--radix-collapsible-content-height)', }, }); - const slideUp = keyframes({ '0%': { opacity: 1, @@ -27,7 +25,6 @@ const slideUp = keyframes({ height: '0px', }, }); - export const collapsibleContent = style({ overflow: 'hidden', selectors: { @@ -39,64 +36,56 @@ export const collapsibleContent = style({ }, }, }); - export const collapsibleContentInner = style({ display: 'flex', flexDirection: 'column', gap: 4, }); - export const header = style({ display: 'flex', alignItems: 'center', padding: '0px 16px 0px 6px', gap: 4, height: '28px', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), ':hover': { - background: 'var(--affine-hover-color-filled)', + background: cssVar('hoverColorFilled'), }, userSelect: 'none', }); - export const spacer = style({ flex: 1, }); - export const headerCollapseIcon = style({ cursor: 'pointer', }); - export const headerLabel = style({ - fontSize: 'var(--affine-font-sm)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontSm'), + color: cssVar('textSecondaryColor'), }); - export const headerCount = style({ - fontSize: 'var(--affine-font-sm)', - color: 'var(--affine-text-disable-color)', + fontSize: cssVar('fontSm'), + color: cssVar('textDisableColor'), }); - export const selectAllButton = style({ display: 'flex', opacity: 0, alignItems: 'center', justifyContent: 'center', cursor: 'pointer', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), height: '20px', borderRadius: 4, padding: '0 8px', selectors: { '&:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, [`${header}:hover &`]: { opacity: 1, }, }, }); - export const collapsedIcon = style({ opacity: 0, transition: 'transform 0.2s ease-in-out', @@ -109,7 +98,6 @@ export const collapsedIcon = style({ }, }, }); - export const collapsedIconContainer = style({ width: '16px', height: '16px', @@ -128,7 +116,7 @@ export const collapsedIconContainer = style({ pointerEvents: 'none', }, '&:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, }, }); diff --git a/packages/frontend/core/src/components/page-list/page-header.css.ts b/packages/frontend/core/src/components/page-list/page-header.css.ts index 84c31abea..37d411597 100644 --- a/packages/frontend/core/src/components/page-list/page-header.css.ts +++ b/packages/frontend/core/src/components/page-list/page-header.css.ts @@ -1,11 +1,10 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const headerTitleCell = style({ display: 'flex', alignItems: 'center', gap: '8px', }); - export const tableHeader = style({ display: 'flex', alignItems: 'center', @@ -15,15 +14,13 @@ export const tableHeader = style({ zIndex: 1, top: 0, left: 0, - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), transition: 'box-shadow 0.2s ease-in-out', transform: 'translateY(-0.5px)', // fix sticky look through issue }); - globalStyle(`[data-has-scroll-top=true] ${tableHeader}`, { - boxShadow: '0 1px var(--affine-border-color)', + boxShadow: `0 1px ${cssVar('borderColor')}`, }); - export const headerTitleSelectionIconWrapper = style({ display: 'flex', alignItems: 'center', diff --git a/packages/frontend/core/src/components/page-list/tags/tag-list-header.css.ts b/packages/frontend/core/src/components/page-list/tags/tag-list-header.css.ts index c47524251..0d38513db 100644 --- a/packages/frontend/core/src/components/page-list/tags/tag-list-header.css.ts +++ b/packages/frontend/core/src/components/page-list/tags/tag-list-header.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const tagListHeader = style({ height: 100, alignItems: 'center', @@ -7,23 +7,21 @@ export const tagListHeader = style({ overflow: 'hidden', display: 'flex', justifyContent: 'space-between', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), }); - export const tagListHeaderTitle = style({ - fontSize: 'var(--affine-font-h-5)', + fontSize: cssVar('fontH5'), fontWeight: 500, - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), display: 'flex', alignItems: 'center', gap: 8, }); - export const newTagButton = style({ padding: '6px 10px', borderRadius: '8px', - background: 'var(--affine-background-primary-color)', - fontSize: 'var(--affine-font-sm)', + background: cssVar('backgroundPrimaryColor'), + fontSize: cssVar('fontSm'), fontWeight: 600, height: '32px', }); diff --git a/packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts b/packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts index 6cd9fd4c0..7af6206cb 100644 --- a/packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts +++ b/packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts @@ -1,15 +1,16 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const root = style({ display: 'flex', - color: 'var(--affine-text-primary-color)', - height: '54px', // 42 + 12 + color: cssVar('textPrimaryColor'), + height: '54px', + // 42 + 12 flexShrink: 0, width: '100%', alignItems: 'stretch', transition: 'background-color 0.2s, opacity 0.2s', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, overflow: 'hidden', cursor: 'default', @@ -20,7 +21,6 @@ export const root = style({ }, }, }); - export const dragOverlay = style({ display: 'flex', alignItems: 'center', @@ -40,12 +40,11 @@ export const dragPageItemOverlay = style({ borderRadius: '10px', display: 'flex', alignItems: 'center', - background: 'var(--affine-hover-color-filled)', - boxShadow: 'var(--affine-menu-shadow)', + background: cssVar('hoverColorFilled'), + boxShadow: cssVar('menuShadow'), maxWidth: '360px', minWidth: '260px', }); - export const dndCell = style({ position: 'relative', marginLeft: -8, @@ -53,7 +52,6 @@ export const dndCell = style({ outline: 'none', paddingLeft: 8, }); - globalStyle(`[data-draggable=true] ${dndCell}:before`, { content: '""', position: 'absolute', @@ -63,21 +61,18 @@ globalStyle(`[data-draggable=true] ${dndCell}:before`, { width: 4, height: 4, transition: 'height 0.2s, opacity 0.2s', - backgroundColor: 'var(--affine-placeholder-color)', + backgroundColor: cssVar('placeholderColor'), borderRadius: '2px', opacity: 0, willChange: 'height, opacity', }); - globalStyle(`[data-draggable=true] ${dndCell}:hover:before`, { height: 12, opacity: 1, }); - globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}`, { opacity: 0.5, }); - globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, { height: 32, width: 2, @@ -88,25 +83,21 @@ globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, { globalStyle(`${root} > :first-child`, { paddingLeft: '16px', }); - globalStyle(`${root} > :last-child`, { paddingRight: '8px', }); - export const titleIconsWrapper = style({ padding: '0 5px', display: 'flex', alignItems: 'center', gap: '10px', }); - export const selectionCell = style({ display: 'flex', alignItems: 'center', flexShrink: 0, - fontSize: 'var(--affine-font-h-3)', + fontSize: cssVar('fontH3'), }); - export const titleCell = style({ display: 'flex', alignItems: 'flex-start', @@ -115,62 +106,55 @@ export const titleCell = style({ flex: 1, whiteSpace: 'nowrap', }); - export const titleCellMain = style({ overflow: 'hidden', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 600, whiteSpace: 'nowrap', textOverflow: 'ellipsis', alignSelf: 'stretch', paddingRight: '4px', }); - export const titleCellPreview = style({ overflow: 'hidden', - color: 'var(--affine-text-secondary-color)', - fontSize: 'var(--affine-font-base)', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontBase'), flex: 1, whiteSpace: 'nowrap', textOverflow: 'ellipsis', alignSelf: 'stretch', }); - export const iconCell = style({ display: 'flex', alignItems: 'center', - fontSize: 'var(--affine-font-h-3)', - color: 'var(--affine-icon-color)', + fontSize: cssVar('fontH3'), + color: cssVar('iconColor'), flexShrink: 0, }); - export const tagsCell = style({ display: 'flex', alignItems: 'center', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), padding: '0 8px', height: '60px', width: '100%', }); - export const dateCell = style({ display: 'flex', alignItems: 'center', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), flexShrink: 0, flexWrap: 'nowrap', padding: '0 8px', }); - export const actionsCellWrapper = style({ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flexShrink: 0, }); - export const operationsCell = style({ display: 'flex', alignItems: 'center', @@ -178,7 +162,6 @@ export const operationsCell = style({ columnGap: '6px', flexShrink: 0, }); - export const tagIndicator = style({ width: '8px', height: '8px', diff --git a/packages/frontend/core/src/components/page-list/view/collection-bar.css.ts b/packages/frontend/core/src/components/page-list/view/collection-bar.css.ts index 5621f9646..9e5f09996 100644 --- a/packages/frontend/core/src/components/page-list/view/collection-bar.css.ts +++ b/packages/frontend/core/src/components/page-list/view/collection-bar.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const view = style({ display: 'flex', alignItems: 'center', @@ -8,7 +8,6 @@ export const view = style({ fontWeight: 600, height: '100%', }); - export const option = style({ display: 'flex', alignItems: 'center', @@ -17,7 +16,7 @@ export const option = style({ cursor: 'pointer', borderRadius: 4, ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, opacity: 0, selectors: { diff --git a/packages/frontend/core/src/components/page-list/view/collection-list.css.ts b/packages/frontend/core/src/components/page-list/view/collection-list.css.ts index cc1b31355..8d09656cc 100644 --- a/packages/frontend/core/src/components/page-list/view/collection-list.css.ts +++ b/packages/frontend/core/src/components/page-list/view/collection-list.css.ts @@ -1,10 +1,10 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const menuTitleStyle = style({ marginLeft: '12px', marginTop: '10px', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), }); export const menuDividerStyle = style({ marginTop: '2px', @@ -12,7 +12,7 @@ export const menuDividerStyle = style({ marginLeft: '12px', marginRight: '8px', height: '1px', - background: 'var(--affine-border-color)', + background: cssVar('borderColor'), }); export const viewMenu = style({}); export const viewOption = style({ @@ -25,7 +25,7 @@ export const viewOption = style({ height: 24, opacity: 0, ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, selectors: { [`${viewMenu}:hover &`]: { @@ -36,7 +36,7 @@ export const viewOption = style({ export const filterMenuTrigger = style({ padding: '6px 8px', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, selectors: { [`&[data-is-hidden="true"]`]: { diff --git a/packages/frontend/core/src/components/page-list/view/collection-operations.css.ts b/packages/frontend/core/src/components/page-list/view/collection-operations.css.ts index ef15cdc0a..8f8c538ff 100644 --- a/packages/frontend/core/src/components/page-list/view/collection-operations.css.ts +++ b/packages/frontend/core/src/components/page-list/view/collection-operations.css.ts @@ -1,10 +1,10 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const divider = style({ marginTop: '2px', marginBottom: '2px', marginLeft: '12px', marginRight: '8px', height: '1px', - background: 'var(--affine-border-color)', + background: cssVar('borderColor'), }); diff --git a/packages/frontend/core/src/components/page-list/view/create-collection.css.ts b/packages/frontend/core/src/components/page-list/view/create-collection.css.ts index e239a5ca2..91d74ac37 100644 --- a/packages/frontend/core/src/components/page-list/view/create-collection.css.ts +++ b/packages/frontend/core/src/components/page-list/view/create-collection.css.ts @@ -1,24 +1,21 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const footer = style({ display: 'flex', justifyContent: 'flex-end', paddingTop: 20, gap: 20, }); - export const createTips = style({ - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), fontSize: 12, lineHeight: '20px', }); - export const label = style({ - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), fontSize: 14, lineHeight: '22px', }); - export const content = style({ display: 'flex', flexDirection: 'column', diff --git a/packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.css.ts b/packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.css.ts index 6ad225361..8f61c7cb9 100644 --- a/packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.css.ts +++ b/packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.css.ts @@ -1,26 +1,23 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const ellipsis = style({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }); - export const pagesBottomLeft = style({ display: 'flex', gap: 8, alignItems: 'center', }); - export const pagesBottom = style({ display: 'flex', justifyContent: 'space-between', padding: '20px 24px', - borderTop: '1px solid var(--affine-border-color)', + borderTop: `1px solid ${cssVar('borderColor')}`, flexWrap: 'wrap', gap: '12px', }); - export const pagesTabContent = style({ display: 'flex', justifyContent: 'space-between', @@ -28,7 +25,6 @@ export const pagesTabContent = style({ alignItems: 'center', padding: '16px 16px 8px 16px', }); - export const pagesTab = style({ flex: 1, display: 'flex', @@ -36,45 +32,39 @@ export const pagesTab = style({ width: '100%', overflow: 'hidden', }); - export const pagesList = style({ display: 'flex', flex: 1, overflow: 'hidden', }); - export const bottomLeft = style({ display: 'flex', gap: 8, alignItems: 'center', }); - export const rulesBottom = style({ display: 'flex', justifyContent: 'space-between', padding: '20px 24px', - borderTop: '1px solid var(--affine-border-color)', + borderTop: `1px solid ${cssVar('borderColor')}`, flexWrap: 'wrap', gap: '12px', }); - export const includeListTitle = style({ fontSize: 14, fontWeight: 400, lineHeight: '22px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), padding: '4px 16px', - borderTop: '1px solid var(--affine-border-color)', + borderTop: `1px solid ${cssVar('borderColor')}`, }); - export const rulesContainerRight = style({ flex: 2, flexDirection: 'column', - borderLeft: '1px solid var(--affine-border-color)', + borderLeft: `1px solid ${cssVar('borderColor')}`, overflowX: 'hidden', overflowY: 'auto', }); - export const includeAddButton = style({ display: 'flex', alignItems: 'center', @@ -84,14 +74,14 @@ export const includeAddButton = style({ lineHeight: '22px', width: 'max-content', }); - -export const includeItemTitle = style({ overflow: 'hidden', fontWeight: 600 }); - +export const includeItemTitle = style({ + overflow: 'hidden', + fontWeight: 600, +}); export const includeItemContentIs = style({ padding: '0 8px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), }); - export const includeItemContent = style({ display: 'flex', alignItems: 'center', @@ -100,20 +90,18 @@ export const includeItemContent = style({ lineHeight: '20px', overflow: 'hidden', }); - export const includeItem = style({ display: 'flex', alignItems: 'center', width: 'max-content', - backgroundColor: 'var(--affine-background-primary-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), overflow: 'hidden', gap: 16, whiteSpace: 'nowrap', - border: '1px solid var(--affine-border-color)', + border: `1px solid ${cssVar('borderColor')}`, borderRadius: 8, padding: '4px 8px 4px', }); - export const includeTitle = style({ display: 'flex', alignItems: 'center', @@ -121,7 +109,6 @@ export const includeTitle = style({ fontSize: 14, lineHeight: '22px', }); - export const rulesContainerLeftContentInclude = style({ overflow: 'hidden', display: 'flex', @@ -129,7 +116,6 @@ export const rulesContainerLeftContentInclude = style({ gap: 8, flexShrink: 0, }); - export const rulesContainerLeftContent = style({ padding: '12px 16px 16px', display: 'flex', @@ -137,7 +123,6 @@ export const rulesContainerLeftContent = style({ flex: 1, overflow: 'hidden', }); - export const rulesContainerLeftTab = style({ display: 'flex', justifyContent: 'space-between', @@ -145,84 +130,75 @@ export const rulesContainerLeftTab = style({ alignItems: 'center', padding: '16px 16px 8px 16px', }); - export const rulesContainerLeft = style({ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', }); - export const rulesContainer = style({ display: 'flex', overflow: 'hidden', flex: 1, }); - export const collectionEditContainer = style({ display: 'flex', flexDirection: 'column', height: '100%', }); - export const confirmButton = style({ marginLeft: 20, }); - export const resultPages = style({ width: '100%', }); - export const pageList = style({ width: '100%', }); - export const previewCountTipsHighlight = style({ - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), }); - export const previewCountTips = style({ fontSize: 12, lineHeight: '20px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), }); export const selectedCountTips = style({ fontSize: 12, lineHeight: '20px', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }); - export const rulesTitleHighlight = style({ - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), fontStyle: 'italic', fontWeight: 800, }); - -export const tabButton = style({ height: 28 }); +export const tabButton = style({ + height: 28, +}); export const icon = style({ - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), }); export const button = style({ userSelect: 'none', borderRadius: 4, cursor: 'pointer', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, }); export const bottomButton = style({ padding: '4px 12px', borderRadius: 8, }); - export const previewActive = style({ - backgroundColor: 'var(--affine-hover-color-filled)', + backgroundColor: cssVar('hoverColorFilled'), }); export const rulesTitle = style({ padding: '20px 24px', userSelect: 'none', fontSize: 20, lineHeight: '24px', - color: 'var(--affine-text-secondary-color)', - borderBottom: '1px solid var(--affine-border-color)', + color: cssVar('textSecondaryColor'), + borderBottom: `1px solid ${cssVar('borderColor')}`, }); diff --git a/packages/frontend/core/src/components/pure/cmdk/highlight.css.ts b/packages/frontend/core/src/components/pure/cmdk/highlight.css.ts index 6c6a1fa93..743bc0347 100644 --- a/packages/frontend/core/src/components/pure/cmdk/highlight.css.ts +++ b/packages/frontend/core/src/components/pure/cmdk/highlight.css.ts @@ -1,32 +1,28 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const highlightContainer = style({ display: 'flex', flexWrap: 'nowrap', }); - export const highlightText = style({ whiteSpace: 'pre', overflow: 'hidden', textOverflow: 'ellipsis', }); - export const highlightKeyword = style({ - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), whiteSpace: 'pre', overflow: 'visible', flexShrink: 0, }); - export const labelTitle = style({ - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), lineHeight: '24px', fontWeight: 400, textAlign: 'justify', }); - export const labelContent = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), lineHeight: '20px', fontWeight: 400, textAlign: 'justify', diff --git a/packages/frontend/core/src/components/pure/cmdk/main.css.ts b/packages/frontend/core/src/components/pure/cmdk/main.css.ts index a0d9264b3..ea4eea89d 100644 --- a/packages/frontend/core/src/components/pure/cmdk/main.css.ts +++ b/packages/frontend/core/src/components/pure/cmdk/main.css.ts @@ -1,24 +1,21 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - export const root = style({}); - export const commandsContainer = style({ height: 'calc(100% - 65px)', padding: '8px 6px 18px 6px', }); - export const searchInput = style({ height: 66, - color: 'var(--affine-text-primary-color)', - fontSize: 'var(--affine-font-h-5)', + color: cssVar('textPrimaryColor'), + fontSize: cssVar('fontH5'), padding: '21px 24px', marginBottom: '8px', width: '100%', - borderBottom: '1px solid var(--affine-border-color)', + borderBottom: `1px solid ${cssVar('borderColor')}`, flexShrink: 0, - '::placeholder': { - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), }, selectors: { '&.inEditor': { @@ -27,94 +24,82 @@ export const searchInput = style({ }, }, }); - export const pageTitleWrapper = style({ display: 'flex', alignItems: 'center', padding: '18px 24px 0 24px', width: '100%', }); - export const pageTitle = style({ padding: '2px 6px', borderRadius: 4, - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), lineHeight: '20px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '100%', - backgroundColor: 'var(--affine-background-secondary-color)', + backgroundColor: cssVar('backgroundSecondaryColor'), }); - export const panelContainer = style({ height: '100%', display: 'flex', flexDirection: 'column', }); - export const itemIcon = style({ fontSize: 20, marginRight: 16, flexShrink: 0, display: 'flex', alignItems: 'center', - color: 'var(--affine-icon-secondary)', + color: cssVar('iconSecondary'), }); - export const itemLabel = style({ fontSize: 14, lineHeight: '1.5', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }); - export const timestamp = style({ display: 'flex', - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), minWidth: 120, flexDirection: 'row-reverse', }); - export const keybinding = style({ display: 'flex', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), columnGap: 2, }); - export const keybindingFragment = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 4px', borderRadius: 4, - color: 'var(--affine-text-secondary-color)', - backgroundColor: 'var(--affine-background-tertiary-color)', + color: cssVar('textSecondaryColor'), + backgroundColor: cssVar('backgroundTertiaryColor'), width: 24, height: 20, }); - globalStyle(`${root} [cmdk-root]`, { height: '100%', }); - globalStyle(`${root} [cmdk-group-heading]`, { padding: '8px', - color: 'var(--affine-text-secondary-color)', - fontSize: 'var(--affine-font-xs)', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontXs'), fontWeight: 600, lineHeight: '1.67', }); - globalStyle(`${root} [cmdk-group][hidden]`, { display: 'none', }); - globalStyle(`${root} [cmdk-list]`, { maxHeight: 400, minHeight: 120, @@ -125,29 +110,23 @@ globalStyle(`${root} [cmdk-list]`, { scrollbarGutter: 'stable', scrollPaddingBlock: '12px', }); - globalStyle(`${root} [cmdk-list]:not([data-opening])`, { transition: 'height .1s ease', }); - globalStyle(`${root} [cmdk-list]::-webkit-scrollbar`, { width: 6, height: 6, }); - globalStyle(`${root} [cmdk-list]::-webkit-scrollbar-thumb`, { borderRadius: 4, backgroundClip: 'padding-box', }); - globalStyle(`${root} [cmdk-list]:hover::-webkit-scrollbar-thumb`, { - backgroundColor: 'var(--affine-divider-color)', + backgroundColor: cssVar('dividerColor'), }); - globalStyle(`${root} [cmdk-list]:hover::-webkit-scrollbar-thumb:hover`, { - backgroundColor: 'var(--affine-icon-color)', + backgroundColor: cssVar('iconColor'), }); - globalStyle(`${root} [cmdk-item]`, { display: 'flex', minHeight: 44, @@ -157,35 +136,32 @@ globalStyle(`${root} [cmdk-item]`, { borderRadius: 4, userSelect: 'none', }); - globalStyle(`${root} [cmdk-item][data-selected=true]`, { - background: 'var(--affine-background-secondary-color)', + background: cssVar('backgroundSecondaryColor'), }); globalStyle(`${root} [cmdk-item][data-selected=true][data-is-danger=true]`, { - background: 'var(--affine-background-error-color)', - color: 'var(--affine-error-color)', + background: cssVar('backgroundErrorColor'), + color: cssVar('errorColor'), }); - globalStyle(`${root} [cmdk-item][data-selected=true] ${itemIcon}`, { - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), }); globalStyle( `${root} [cmdk-item][data-selected=true][data-is-danger=true] ${itemIcon}`, { - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), } ); globalStyle( `${root} [cmdk-item][data-selected=true][data-is-danger=true] ${itemLabel}`, { - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), } ); - export const resultGroupHeader = style({ padding: '8px', - color: 'var(--affine-text-secondary-color)', - fontSize: 'var(--affine-font-xs)', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontXs'), fontWeight: 600, lineHeight: '1.67', }); diff --git a/packages/frontend/core/src/components/pure/cmdk/modal.css.ts b/packages/frontend/core/src/components/pure/cmdk/modal.css.ts index 80ec39372..e22ed36b3 100644 --- a/packages/frontend/core/src/components/pure/cmdk/modal.css.ts +++ b/packages/frontend/core/src/components/pure/cmdk/modal.css.ts @@ -1,37 +1,45 @@ +import { cssVar } from '@toeverything/theme'; import { keyframes, style } from '@vanilla-extract/css'; - const contentShow = keyframes({ - from: { opacity: 0, transform: 'translateY(-2%) scale(0.96)' }, - to: { opacity: 1, transform: 'translateY(0) scale(1)' }, + from: { + opacity: 0, + transform: 'translateY(-2%) scale(0.96)', + }, + to: { + opacity: 1, + transform: 'translateY(0) scale(1)', + }, }); - const contentHide = keyframes({ - to: { opacity: 0, transform: 'translateY(-2%) scale(0.96)' }, - from: { opacity: 1, transform: 'translateY(0) scale(1)' }, + to: { + opacity: 0, + transform: 'translateY(-2%) scale(0.96)', + }, + from: { + opacity: 1, + transform: 'translateY(0) scale(1)', + }, }); - export const modalOverlay = style({ position: 'fixed', inset: 0, backgroundColor: 'transparent', - zIndex: 'var(--affine-z-index-modal)', + zIndex: cssVar('zIndexModal'), }); - export const modalContentWrapper = style({ position: 'fixed', inset: 0, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', - zIndex: 'var(--affine-z-index-modal)', + zIndex: cssVar('zIndexModal'), padding: '13vh 16px 16px', }); - export const modalContent = style({ width: 640, // height: 530, - backgroundColor: 'var(--affine-background-overlay-panel-color)', - boxShadow: 'var(--affine-cmd-shadow)', + backgroundColor: cssVar('backgroundOverlayPanelColor'), + boxShadow: cssVar('cmdShadow'), borderRadius: '12px', maxWidth: 'calc(100vw - 50px)', minWidth: 480, @@ -39,9 +47,8 @@ export const modalContent = style({ // :focus-visible will set outline outline: 'none', position: 'relative', - zIndex: 'var(--affine-z-index-modal)', + zIndex: cssVar('zIndexModal'), willChange: 'transform, opacity', - selectors: { '&[data-state=entered], &[data-state=entering]': { animation: `${contentShow} 120ms cubic-bezier(0.42, 0, 0.58, 1)`, diff --git a/packages/frontend/core/src/components/pure/cmdk/not-found.css.ts b/packages/frontend/core/src/components/pure/cmdk/not-found.css.ts index 451468a18..c0ec9380d 100644 --- a/packages/frontend/core/src/components/pure/cmdk/not-found.css.ts +++ b/packages/frontend/core/src/components/pure/cmdk/not-found.css.ts @@ -1,12 +1,11 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const notFoundContainer = style({ display: 'flex', flexDirection: 'column', padding: '0 8px', marginBottom: 8, }); - export const notFoundItem = style({ display: 'flex', alignItems: 'center', @@ -14,27 +13,24 @@ export const notFoundItem = style({ padding: '0 12px', gap: 16, }); - export const notFoundIcon = style({ display: 'flex', alignItems: 'center', fontSize: 20, - color: 'var(--affine-icon-secondary)', + color: cssVar('iconSecondary'), padding: '12px 0', }); - export const notFoundTitle = style({ - fontSize: 'var(--affine-font-xs)', - color: 'var(--affine-text-secondary-color)', + fontSize: cssVar('fontXs'), + color: cssVar('textSecondaryColor'), fontWeight: '600', lineHeight: '20px', textAlign: 'justify', padding: '8px', }); - export const notFoundText = style({ - fontSize: 'var(--affine-font-sm)', - color: 'var(--affine-text-primary-color)', + fontSize: cssVar('fontSm'), + color: cssVar('textPrimaryColor'), lineHeight: '22px', fontWeight: '400', }); diff --git a/packages/frontend/core/src/components/pure/header-drop-down-button/styles.css.ts b/packages/frontend/core/src/components/pure/header-drop-down-button/styles.css.ts index 2512048c8..5feb36501 100644 --- a/packages/frontend/core/src/components/pure/header-drop-down-button/styles.css.ts +++ b/packages/frontend/core/src/components/pure/header-drop-down-button/styles.css.ts @@ -1,9 +1,9 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const headerMenuTrigger = style({ selectors: { '&[data-state=open], &:hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, }, }); diff --git a/packages/frontend/core/src/components/pure/trash-page-footer/styles.css.ts b/packages/frontend/core/src/components/pure/trash-page-footer/styles.css.ts index 0dc24e3db..1e7179c75 100644 --- a/packages/frontend/core/src/components/pure/trash-page-footer/styles.css.ts +++ b/packages/frontend/core/src/components/pure/trash-page-footer/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const group = style({ display: 'flex', gap: '16px', @@ -15,20 +15,20 @@ export const deleteHintContainer = style({ flexShrink: 0, bottom: '0', gap: '16px', - backgroundColor: 'var(--affine-background-primary-color)', - borderTop: '1px solid var(--affine-border-color)', + backgroundColor: cssVar('backgroundPrimaryColor'), + borderTop: `1px solid ${cssVar('borderColor')}`, }); export const deleteHintText = style({ fontSize: '15px', fontWeight: '500', lineHeight: '24px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', }); export const buttonContainer = style({ - color: 'var(--affine-pure-white)', + color: cssVar('pureWhite'), padding: '8px 18px', fontSize: '20px', height: '36px', diff --git a/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.css.ts b/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.css.ts index 9a6505aa3..18adac82c 100644 --- a/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.css.ts +++ b/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.css.ts @@ -1,7 +1,7 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const filterTab = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), fontWeight: 600, textTransform: 'capitalize', minWidth: '91px', diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts index 0243def10..bcc679a2a 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, keyframes, style } from '@vanilla-extract/css'; - export const wrapper = style({ display: 'flex', flexDirection: 'column', @@ -28,7 +28,6 @@ export const title = style({ overflow: 'hidden', textOverflow: 'ellipsis', }); - globalStyle(`[data-draggable=true] ${title}:before`, { content: '""', position: 'absolute', @@ -38,46 +37,42 @@ globalStyle(`[data-draggable=true] ${title}:before`, { width: 4, height: 4, transition: 'height 0.2s, opacity 0.2s', - backgroundColor: 'var(--affine-placeholder-color)', + backgroundColor: cssVar('placeholderColor'), borderRadius: '2px', opacity: 0, willChange: 'height, opacity', }); - globalStyle(`[data-draggable=true] ${title}:hover:before`, { height: 12, opacity: 1, }); - globalStyle(`[data-draggable=true][data-dragging=true] ${title}`, { opacity: 0.5, }); - globalStyle(`[data-draggable=true][data-dragging=true] ${title}:before`, { height: 32, width: 2, opacity: 1, }); - export const more = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 2, fontSize: 16, - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, }); export const deleteFolder = style({ ':hover': { - color: 'var(--affine-error-color)', - backgroundColor: 'var(--affine-background-error-color)', + color: cssVar('errorColor'), + backgroundColor: cssVar('backgroundErrorColor'), }, }); globalStyle(`${deleteFolder}:hover svg`, { - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), }); export const menuDividerStyle = style({ marginTop: '2px', @@ -85,9 +80,8 @@ export const menuDividerStyle = style({ marginLeft: '12px', marginRight: '8px', height: '1px', - background: 'var(--affine-border-color)', + background: cssVar('borderColor'), }); - const slideDown = keyframes({ '0%': { height: '0px', @@ -96,7 +90,6 @@ const slideDown = keyframes({ height: 'var(--radix-collapsible-content-height)', }, }); - const slideUp = keyframes({ '0%': { height: 'var(--radix-collapsible-content-height)', @@ -105,7 +98,6 @@ const slideUp = keyframes({ height: '0px', }, }); - export const collapsibleContent = style({ overflow: 'hidden', marginTop: '4px', @@ -118,7 +110,6 @@ export const collapsibleContent = style({ }, }, }); - export const emptyCollectionWrapper = style({ padding: '9px 0', display: 'flex', @@ -126,14 +117,12 @@ export const emptyCollectionWrapper = style({ alignItems: 'center', gap: 8, }); - export const emptyCollectionContent = style({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, }); - export const emptyCollectionIconWrapper = style({ width: 36, height: 36, @@ -141,22 +130,19 @@ export const emptyCollectionIconWrapper = style({ alignItems: 'center', justifyContent: 'center', borderRadius: '50%', - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }); - export const emptyCollectionIcon = style({ fontSize: 20, - color: 'var(--affine-icon-secondary)', + color: cssVar('iconSecondary'), }); - export const emptyCollectionMessage = style({ - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), textAlign: 'center', - color: 'var(--affine-black-30)', + color: cssVar('black30'), }); - export const emptyCollectionNewButton = style({ padding: '0 8px', height: '30px', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), }); diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/styles.css.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/styles.css.ts index 21b0cf790..be17481e0 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/styles.css.ts +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, keyframes, style } from '@vanilla-extract/css'; - export const label = style({ selectors: { '&[data-untitled="true"]': { @@ -7,7 +7,6 @@ export const label = style({ }, }, }); - export const favItemWrapper = style({ display: 'flex', flexDirection: 'column', @@ -21,7 +20,6 @@ export const favItemWrapper = style({ }, }, }); - const slideDown = keyframes({ '0%': { height: '0px', @@ -30,7 +28,6 @@ const slideDown = keyframes({ height: 'var(--radix-collapsible-content-height)', }, }); - const slideUp = keyframes({ '0%': { height: 'var(--radix-collapsible-content-height)', @@ -39,7 +36,6 @@ const slideUp = keyframes({ height: '0px', }, }); - export const collapsibleContent = style({ overflow: 'hidden', marginTop: '4px', @@ -52,14 +48,11 @@ export const collapsibleContent = style({ }, }, }); - export const collapsibleContentInner = style({ display: 'flex', flexDirection: 'column', }); - export const favItem = style({}); - globalStyle(`[data-draggable=true] ${favItem}:before`, { content: '""', position: 'absolute', @@ -69,81 +62,70 @@ globalStyle(`[data-draggable=true] ${favItem}:before`, { width: 4, height: 4, transition: 'height 0.2s, opacity 0.2s', - backgroundColor: 'var(--affine-placeholder-color)', + backgroundColor: cssVar('placeholderColor'), borderRadius: '2px', opacity: 0, willChange: 'height, opacity', }); - globalStyle(`[data-draggable=true] ${favItem}:hover:before`, { height: 12, opacity: 1, }); - globalStyle(`[data-draggable=true][data-dragging=true] ${favItem}`, { opacity: 0.5, }); - globalStyle(`[data-draggable=true][data-dragging=true] ${favItem}:before`, { height: 32, width: 2, opacity: 1, }); - export const dragPageItemOverlay = style({ display: 'flex', alignItems: 'center', - background: 'var(--affine-hover-color-filled)', - boxShadow: 'var(--affine-menu-shadow)', + background: cssVar('hoverColorFilled'), + boxShadow: cssVar('menuShadow'), minHeight: '30px', maxWidth: '360px', width: '100%', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), gap: '8px', padding: '4px', borderRadius: '4px', cursor: 'grabbing', }); - globalStyle(`${dragPageItemOverlay} svg`, { width: '20px', height: '20px', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), }); - globalStyle(`${dragPageItemOverlay} span`, { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden', }); - export const favoriteList = style({ selectors: { '&[data-over="true"]': { - background: 'var(--affine-hover-color-filled)', + background: cssVar('hoverColorFilled'), borderRadius: '4px', }, }, }); - export const favoritePostfixItem = style({ display: 'flex', alignItems: 'center', }); - export const menuItem = style({ gap: '8px', }); - globalStyle(`${menuItem} svg`, { width: '20px', height: '20px', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), }); globalStyle(`${menuItem}.danger:hover svg`, { - color: 'var(--affine-error-color)', + color: cssVar('errorColor'), }); - export const emptyFavouritesContent = style({ display: 'flex', flexDirection: 'column', @@ -151,7 +133,6 @@ export const emptyFavouritesContent = style({ gap: 6, padding: '9px 20px 25px 21px', }); - export const emptyFavouritesIconWrapper = style({ width: 36, height: 36, @@ -159,16 +140,14 @@ export const emptyFavouritesIconWrapper = style({ alignItems: 'center', justifyContent: 'center', borderRadius: '50%', - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }); - export const emptyFavouritesIcon = style({ fontSize: 20, - color: 'var(--affine-icon-secondary)', + color: cssVar('iconSecondary'), }); - export const emptyFavouritesMessage = style({ - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), textAlign: 'center', - color: 'var(--affine-black-30)', + color: cssVar('black30'), }); diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/add-workspace/index.css.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/add-workspace/index.css.ts index e1dc962b5..dd1183dd2 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/add-workspace/index.css.ts +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/add-workspace/index.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const ItemContainer = style({ display: 'flex', alignItems: 'center', @@ -10,13 +10,12 @@ export const ItemContainer = style({ borderRadius: '8px', transition: 'background-color 0.2s', fontSize: '24px', - color: 'var(--affine-icon-secondary)', + color: cssVar('iconSecondary'), }); - export const ItemText = style({ - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), lineHeight: '22px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), fontWeight: 400, whiteSpace: 'nowrap', overflow: 'hidden', diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.css.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.css.ts index 5bd4cff9d..26f78c7fe 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.css.ts +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.css.ts @@ -1,11 +1,10 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const workspaceListWrapper = style({ display: 'flex', width: '100%', flexDirection: 'column', }); - export const signInWrapper = style({ display: 'flex', width: '100%', @@ -14,44 +13,39 @@ export const signInWrapper = style({ justifyContent: 'flex-start', borderRadius: '8px', }); - export const iconContainer = style({ width: '28px', padding: '2px 4px 4px', borderRadius: '14px', - background: 'var(--affine-white)', + background: cssVar('white'), display: 'flex', - border: '1px solid var(--affine-icon-secondary)', - color: 'var(--affine-icon-secondary)', + border: `1px solid ${cssVar('iconSecondary')}`, + color: cssVar('iconSecondary'), alignItems: 'center', justifyContent: 'center', fontSize: '20px', }); - export const signInTextContainer = style({ display: 'flex', flexDirection: 'column', }); - export const signInTextPrimary = style({ - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 600, lineHeight: '22px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }); - export const signInTextSecondary = style({ - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), fontWeight: 400, lineHeight: '20px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }); - export const menuItem = style({ borderRadius: '8px', }); diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.css.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.css.ts index d2fdb2717..8378d573d 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.css.ts +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/user-account/index.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const userAccountContainer = style({ display: 'flex', padding: '4px 0px 4px 12px', @@ -9,14 +9,13 @@ export const userAccountContainer = style({ width: '100%', }); export const userEmail = style({ - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), fontWeight: 400, lineHeight: '22px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', }); - export const leftContainer = style({ display: 'flex', alignItems: 'center', diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.css.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.css.ts index 90f5bc6e3..13fac8256 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.css.ts +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const workspaceListsWrapper = style({ display: 'flex', width: '100%', @@ -12,17 +12,15 @@ export const workspaceListWrapper = style({ flexDirection: 'column', gap: '4px', }); - export const workspaceType = style({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0px 12px', - fontSize: 'var(--affine-font-xs)', + fontSize: cssVar('fontXs'), lineHeight: '20px', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), }); - export const scrollbar = style({ transform: 'translateX(8px)', width: '4px', diff --git a/packages/frontend/core/src/components/share-page-not-found-error.css.ts b/packages/frontend/core/src/components/share-page-not-found-error.css.ts index bfd01d03f..0ea0b7869 100644 --- a/packages/frontend/core/src/components/share-page-not-found-error.css.ts +++ b/packages/frontend/core/src/components/share-page-not-found-error.css.ts @@ -1,15 +1,15 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const iconWrapper = style({ position: 'absolute', top: '16px', left: '16px', fontSize: '24px', cursor: 'pointer', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), selectors: { '&:visited': { - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), }, }, }); diff --git a/packages/frontend/core/src/components/workspace-upgrade/upgrade.css.ts b/packages/frontend/core/src/components/workspace-upgrade/upgrade.css.ts index 2e83b1499..5deb8329c 100644 --- a/packages/frontend/core/src/components/workspace-upgrade/upgrade.css.ts +++ b/packages/frontend/core/src/components/workspace-upgrade/upgrade.css.ts @@ -1,33 +1,35 @@ +import { cssVar } from '@toeverything/theme'; import { keyframes, style } from '@vanilla-extract/css'; - export const layout = style({ margin: '80px auto', maxWidth: '536px', }); - export const upgradeBox = style({ padding: '48px 52px', display: 'flex', flexDirection: 'column', alignItems: 'center', }); - export const upgradeTips = style({ margin: '20px 0', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), fontSize: '12px', fontStyle: 'normal', fontWeight: '400', lineHeight: '20px', textAlign: 'center', }); - const rotate = keyframes({ - '0%': { transform: 'rotate(0deg)' }, - '50%': { transform: 'rotate(180deg)' }, - '100%': { transform: 'rotate(360deg)' }, + '0%': { + transform: 'rotate(0deg)', + }, + '50%': { + transform: 'rotate(180deg)', + }, + '100%': { + transform: 'rotate(360deg)', + }, }); - export const loadingIcon = style({ animation: `${rotate} 1.2s infinite linear`, }); diff --git a/packages/frontend/core/src/pages/open-app.css.ts b/packages/frontend/core/src/pages/open-app.css.ts index f158a827b..d46a5cbe1 100644 --- a/packages/frontend/core/src/pages/open-app.css.ts +++ b/packages/frontend/core/src/pages/open-app.css.ts @@ -1,19 +1,17 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const root = style({ height: '100vh', width: '100vw', display: 'flex', justifyContent: 'center', alignItems: 'center', - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), position: 'relative', }); - export const affineLogo = style({ color: 'inherit', }); - export const topNav = style({ position: 'absolute', top: 0, @@ -24,34 +22,29 @@ export const topNav = style({ justifyContent: 'space-between', padding: '16px 120px', }); - export const topNavLinks = style({ display: 'flex', columnGap: 4, }); - export const topNavLink = style({ - color: 'var(--affine-text-primary-color)', - fontSize: 'var(--affine-font-sm)', + color: cssVar('textPrimaryColor'), + fontSize: cssVar('fontSm'), fontWeight: 500, textDecoration: 'none', padding: '4px 18px', }); - export const tryAgainLink = style({ - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), fontWeight: 500, textDecoration: 'none', - fontSize: 'var(--affine-font-sm)', + fontSize: cssVar('fontSm'), }); - export const centerContent = style({ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 40, }); - export const prompt = style({ marginTop: 20, marginBottom: 12, diff --git a/packages/frontend/core/src/pages/upgrade-success.css.ts b/packages/frontend/core/src/pages/upgrade-success.css.ts index 654f56d42..578ec70be 100644 --- a/packages/frontend/core/src/pages/upgrade-success.css.ts +++ b/packages/frontend/core/src/pages/upgrade-success.css.ts @@ -1,15 +1,15 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; export const leftContentText = style({ - fontSize: 'var(--affine-font-base)', + fontSize: cssVar('fontBase'), fontWeight: 400, lineHeight: '1.6', maxWidth: '548px', }); - export const mail = style({ - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), textDecoration: 'none', ':visited': { - color: 'var(--affine-link-color)', + color: cssVar('linkColor'), }, }); diff --git a/packages/frontend/core/src/pages/workspace/all-page/all-page.css.ts b/packages/frontend/core/src/pages/workspace/all-page/all-page.css.ts index 1619148bd..3b8ae4fbc 100644 --- a/packages/frontend/core/src/pages/workspace/all-page/all-page.css.ts +++ b/packages/frontend/core/src/pages/workspace/all-page/all-page.css.ts @@ -1,19 +1,17 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const root = style({ height: '100%', width: '100%', display: 'flex', flexFlow: 'column', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), }); - export const scrollContainer = style({ flex: 1, width: '100%', paddingBottom: '32px', }); - export const headerCreateNewButton = style({ transition: 'opacity 0.1s ease-in-out', }); @@ -24,12 +22,10 @@ export const headerCreateNewCollectionIconButton = style({ height: '28px', borderRadius: '8px', }); - export const headerCreateNewButtonHidden = style({ opacity: 0, pointerEvents: 'none', }); - export const headerRightWindows = style({ display: 'flex', alignItems: 'center', diff --git a/packages/frontend/core/src/pages/workspace/collection.css.ts b/packages/frontend/core/src/pages/workspace/collection.css.ts index 0585e2b75..6cc54d892 100644 --- a/packages/frontend/core/src/pages/workspace/collection.css.ts +++ b/packages/frontend/core/src/pages/workspace/collection.css.ts @@ -1,8 +1,8 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const placeholderButton = style({ padding: '8px 18px', - border: '1px solid var(--affine-border-color)', + border: `1px solid ${cssVar('borderColor')}`, borderRadius: 8, display: 'flex', alignItems: 'center', @@ -12,7 +12,7 @@ export const placeholderButton = style({ fontSize: 15, lineHeight: '24px', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, }); export const button = style({ @@ -20,6 +20,6 @@ export const button = style({ borderRadius: 4, cursor: 'pointer', ':hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, }); diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.css.ts index 075bc15e5..7f19b7ac2 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.css.ts +++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.css.ts @@ -1,4 +1,4 @@ -import type { ComplexStyleRule } from '@vanilla-extract/css'; +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; export const header = style({ @@ -7,11 +7,14 @@ export const header = style({ width: '100%', alignItems: 'center', flexShrink: 0, - background: 'var(--affine-background-primary-color)', - borderBottom: '1px solid var(--affine-border-color)', + background: cssVar('backgroundPrimaryColor'), + borderBottom: `1px solid ${cssVar('borderColor')}`, selectors: { '&[data-sidebar-floating="false"]': { - WebkitAppRegion: 'drag', + ['WebkitAppRegion' as string]: 'drag', + }, + '&:has([data-popper-placement])': { + ['WebkitAppRegion' as string]: 'no-drag', }, }, '@media': { @@ -19,11 +22,7 @@ export const header = style({ display: 'none', }, }, - ':has([data-popper-placement])': { - WebkitAppRegion: 'no-drag', - }, -} as ComplexStyleRule); - +}); export const mainHeader = style([ header, { @@ -31,7 +30,6 @@ export const mainHeader = style([ gap: 12, }, ]); - export const sidebarHeader = style([ header, { @@ -39,18 +37,15 @@ export const sidebarHeader = style([ gap: '12px', }, ]); - export const mainHeaderRight = style({ display: 'flex', alignItems: 'center', gap: '8px', }); - export const spacer = style({ flexGrow: 1, minWidth: 12, }); - export const standaloneExtensionSwitcherWrapper = style({ display: 'flex', alignItems: 'center', @@ -59,7 +54,6 @@ export const standaloneExtensionSwitcherWrapper = style({ height: '52px', position: 'relative', }); - export const journalWeekPicker = style({ minWidth: 100, flexGrow: 1, diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts index 802282326..fa7377f99 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts +++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts @@ -1,12 +1,11 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const root = style({ display: 'flex', height: '100%', overflow: 'hidden', width: '100%', }); - export const mainContainer = style({ display: 'flex', flex: 1, @@ -15,14 +14,13 @@ export const mainContainer = style({ flexDirection: 'column', minWidth: 0, overflow: 'hidden', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), selectors: { [`${root}[data-client-border=true] &`]: { borderRadius: '4px', }, }, }); - export const editorContainer = style({ position: 'relative', display: 'flex', @@ -31,7 +29,6 @@ export const editorContainer = style({ overflow: 'hidden', zIndex: 0, }); - export const sidebarContainer = style({ display: 'flex', flexShrink: 0, @@ -41,14 +38,13 @@ export const sidebarContainer = style({ paddingLeft: 9, }, [`${root}[data-client-border=false] &`]: { - borderLeft: '1px solid var(--affine-border-color)', + borderLeft: `1px solid ${cssVar('borderColor')}`, }, }, }); - export const sidebarContainerInner = style({ display: 'flex', - background: 'var(--affine-background-primary-color)', + background: cssVar('backgroundPrimaryColor'), flexDirection: 'column', overflow: 'hidden', height: '100%', diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/editor-sidebar.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/editor-sidebar.css.ts index c46789683..034cbde9d 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/editor-sidebar.css.ts +++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/editor-sidebar.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const root = style({ display: 'flex', flexDirection: 'column', diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.css.ts index 0a2dbb442..8dff59d45 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.css.ts +++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/copilot.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const root = style({ display: 'flex', height: '100%', diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/extensions.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/extensions.css.ts index dcffdb6e7..a8f9bf927 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/extensions.css.ts +++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/extensions.css.ts @@ -1,7 +1,6 @@ +import { cssVar } from '@toeverything/theme'; import { createVar, style } from '@vanilla-extract/css'; - export const activeIdx = createVar(); - export const switchRoot = style({ vars: { [activeIdx]: '0', @@ -13,30 +12,27 @@ export const switchRoot = style({ borderRadius: '12px', padding: '4px', position: 'relative', - background: 'var(--affine-background-secondary-color)', - + background: cssVar('backgroundSecondaryColor'), '::after': { content: '""', display: 'block', width: '24px', height: '24px', - background: 'var(--affine-background-primary-color)', - boxShadow: 'var(--affine-shadow-1)', + background: cssVar('backgroundPrimaryColor'), + boxShadow: cssVar('shadow1'), borderRadius: '8px', position: 'absolute', transform: `translateX(calc(${activeIdx} * 32px))`, transition: 'all .15s', }, }); - export const button = style({ width: '24px', height: '24px', borderRadius: '8px', - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), position: 'relative', zIndex: 1, - selectors: { '&[data-active=true]': { pointerEvents: 'none', diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.css.ts index 0a2dbb442..8dff59d45 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.css.ts +++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/frame.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const root = style({ display: 'flex', height: '100%', diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.css.ts index 35f19a962..03b720a1c 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.css.ts +++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.css.ts @@ -1,12 +1,11 @@ +import { cssVar } from '@toeverything/theme'; import { globalStyle, style } from '@vanilla-extract/css'; - const interactive = style({ position: 'relative', cursor: 'pointer', - selectors: { '&:hover': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, '&::before': { content: '""', @@ -14,7 +13,7 @@ const interactive = style({ inset: 0, opacity: 0, borderRadius: 'inherit', - boxShadow: '0 0 0 3px var(--affine-primary-color)', + boxShadow: `0 0 0 3px ${cssVar('primaryColor')}`, pointerEvents: 'none', }, '&::after': { @@ -22,22 +21,20 @@ const interactive = style({ position: 'absolute', inset: 0, borderRadius: 'inherit', - boxShadow: '0 0 0 0px var(--affine-primary-color)', + boxShadow: `0 0 0 0px ${cssVar('primaryColor')}`, pointerEvents: 'none', }, '&:focus-visible::before': { opacity: 0.2, }, '&:focus-visible::after': { - boxShadow: '0 0 0 1px var(--affine-primary-color)', + boxShadow: `0 0 0 1px ${cssVar('primaryColor')}`, }, }, }); - export const calendar = style({ padding: '16px', }); - export const journalPanel = style({ width: '100%', height: '100%', @@ -45,7 +42,6 @@ export const journalPanel = style({ flexDirection: 'column', alignItems: 'stretch', }); - export const dailyCount = style({ height: 0, flexGrow: 1, @@ -53,7 +49,6 @@ export const dailyCount = style({ flexDirection: 'column', gap: 8, }); - export const dailyCountHeader = style({ display: 'flex', alignItems: 'center', @@ -61,7 +56,6 @@ export const dailyCountHeader = style({ padding: '0 16px', gap: 8, }); - export const dailyCountNav = style([ interactive, { @@ -76,18 +70,16 @@ export const dailyCountNav = style([ display: 'flex', alignItems: 'center', justifyContent: 'center', - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), transition: 'all .3s', - selectors: { '&[aria-selected="true"]': { - backgroundColor: 'var(--affine-background-tertiary-color)', - color: 'var(--affine-text-primary-color)', + backgroundColor: cssVar('backgroundTertiaryColor'), + color: cssVar('textPrimaryColor'), }, }, }, ]); - export const dailyCountContainer = style({ height: 0, flexGrow: 1, @@ -115,10 +107,9 @@ export const dailyCountEmpty = style({ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', - lineHeight: '24px', fontSize: 15, - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), textAlign: 'center', padding: '0 70px', fontWeight: 400, @@ -135,10 +126,9 @@ export const pageItem = style([ padding: '0 4px', gap: 8, height: 30, - selectors: { '&[aria-selected="true"]': { - backgroundColor: 'var(--affine-hover-color)', + backgroundColor: cssVar('hoverColor'), }, }, }, @@ -146,7 +136,7 @@ export const pageItem = style([ export const pageItemIcon = style({ width: 20, height: 20, - color: 'var(--affine-icon-color)', + color: cssVar('iconColor'), }); export const pageItemLabel = style({ width: 0, @@ -155,13 +145,13 @@ export const pageItemLabel = style({ textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 500, - fontSize: 'var(--affine-font-size-sm)', - color: 'var(--affine-text-primary-color)', + fontSize: cssVar('fontSm'), + color: cssVar('textPrimaryColor'), textAlign: 'left', selectors: { '[aria-selected="true"] &': { // TODO: wait for design - color: 'var(--affine-primary-color)', + color: cssVar('primaryColor'), }, }, }); @@ -179,11 +169,11 @@ export const journalConflictWrapper = style({ export const journalConflictMoreTrigger = style([ interactive, { - color: 'var(--affine-text-secondary-color)', + color: cssVar('textSecondaryColor'), height: 30, borderRadius: 4, padding: '0px 8px', - fontSize: 'var(--affine-font-size-sm)', + fontSize: cssVar('fontSm'), display: 'flex', alignItems: 'center', }, @@ -195,8 +185,8 @@ globalStyle( `.${journalPanel}[data-is-journal="false"] .react-datepicker__day[aria-selected="true"]`, { backgroundColor: 'transparent', - color: 'var(--affine-text-primary-color)', + color: cssVar('textPrimaryColor'), fontWeight: 500, - border: '1px solid var(--affine-primary-color)', + border: `1px solid ${cssVar('primaryColor')}`, } ); diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.css.ts index 0a2dbb442..8dff59d45 100644 --- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.css.ts +++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/outline.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; - export const root = style({ display: 'flex', height: '100%', diff --git a/packages/frontend/core/src/pages/workspace/page-list-empty.css.ts b/packages/frontend/core/src/pages/workspace/page-list-empty.css.ts index 7396dee14..b886d137b 100644 --- a/packages/frontend/core/src/pages/workspace/page-list-empty.css.ts +++ b/packages/frontend/core/src/pages/workspace/page-list-empty.css.ts @@ -1,24 +1,22 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export const pageListEmptyStyle = style({ height: 'calc(100% - 52px)', }); - export const emptyDescButton = style({ cursor: 'pointer', - color: 'var(--affine-text-secondary-color)', - background: 'var(--affine-background-code-block)', - border: '1px solid var(--affine-border-color)', + color: cssVar('textSecondaryColor'), + background: cssVar('backgroundCodeBlock'), + border: `1px solid ${cssVar('borderColor')}`, borderRadius: '4px', padding: '0 6px', boxSizing: 'border-box', selectors: { '&:hover': { - background: 'var(--affine-hover-color)', + background: cssVar('hoverColor'), }, }, }); - export const emptyDescKbd = style([ emptyDescButton, { diff --git a/packages/frontend/core/src/pages/workspace/trash-page.css.ts b/packages/frontend/core/src/pages/workspace/trash-page.css.ts index ec4d58ba7..0b6e1bcb7 100644 --- a/packages/frontend/core/src/pages/workspace/trash-page.css.ts +++ b/packages/frontend/core/src/pages/workspace/trash-page.css.ts @@ -1,7 +1,6 @@ +import { cssVar } from '@toeverything/theme'; import { style } from '@vanilla-extract/css'; - export { root } from './all-page/all-page.css'; - export const trashTitle = style({ display: 'flex', alignItems: 'center', @@ -9,8 +8,7 @@ export const trashTitle = style({ padding: '0 8px', fontWeight: 600, }); - export const trashIcon = style({ - color: 'var(--affine-icon-color)', - fontSize: 'var(--affine-font-h-5)', + color: cssVar('iconColor'), + fontSize: cssVar('fontH5'), });