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 b105bdeef1..a53bfe8936 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 0910728906..863abcabd9 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 9f1ff48913..b60a149926 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 22ccf82a88..c0cad50928 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 8e1aa32d92..eca5bdf1cd 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 27afa7bcdc..accfeaf3e8 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 8551d541b6..f353efce4d 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 8691d0352b..21850df038 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 dd3e25c5ac..22a7bd1f06 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 d748ab9dbf..b9b0e584b9 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 a26c554751..658ca6e740 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 efe0dfbe2c..ee6d809f59 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 497d0543a5..b3e99da864 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 412fcdd560..9dda3215e6 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 389a0065cd..2d9e66e2e4 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 a1fde37f4d..f9601f5818 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 c04ecb6d43..f23265aade 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 aa1181e888..99df8bc042 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 48d75a1c37..5d89543124 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 7ecf6cb4ac..8f340b95e5 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 a99a55b8ef..85a6c65ae7 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 738980504f..e1612d44ee 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 2fcbd37a01..38adb2e0c9 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 7f09843466..2b06a4361f 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 41d50ae1e2..451bf11a1f 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 7060dba6bf..8cbed13dc0 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 7e9a59d409..a43570f425 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 24187dc84a..e0c1790bf5 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 46753c359a..e7df958785 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 bb48c4c0e4..21d9349c6d 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 20e732ade5..147696ed0d 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 5a53613240..7f00e13721 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 fc527ef22e..d48c2b9eb1 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 48f1dd1346..9a928d039d 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 b04f6896ed..609e9849c3 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 3d3ce2bc2d..fe474a2a22 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 11e4d366d9..56551790c8 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 4e7b5be74c..da08fb3d2b 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 8a95ad1ac8..5b75693e8b 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 116e9c1021..9c92e23247 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 af9e7b509c..783dff3123 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 bd9c81ca0b..0f9dced405 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 7e63c7ef13..d2234002e2 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 6115cce470..8d46768464 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 86c34ede69..7fefbd72f3 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 0de1af2cf6..664671a417 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 d1026be77e..fb9aa6b9e7 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 5586afb013..3b2091b8b5 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 e03f570396..3c9bb5c2e3 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 c72392b20f..1514a6a224 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 6f49c49fd1..a9955c7d12 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 d841c77ec7..1e5325a673 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 88ef506adf..ca2114aae2 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 850affaa97..a9722d8b9a 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 5fab26a4dd..2f8ee5aef7 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 39e9d102f6..006f773618 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 cb3ab184f0..a19473097b 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 3ae2d0294d..a4b8d15e85 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 600534ba5c..d771301aa8 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 ce218f7e02..29c1ab0c05 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 87648a1dc2..f559a1c797 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 8bcca7d4c3..2f705ef26b 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 d48509003e..745804ba7d 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 8790ec1831..abc5139a33 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 c3665d2242..899b617375 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 abec1785a6..2389eaeadb 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 28b8ed4443..e347c3941f 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 85a32944f9..919e1b6f93 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 3fe4db50ca..de91df305d 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 215ca8c9a7..7413d439d4 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 b569f0506d..97806e9fcc 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 7b91d3db57..13291e0c87 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 d08eca58e7..8bf5d0deb3 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 a716ec60c5..852c2e6215 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 0275804daf..5d75d0042a 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 b2f61f37d9..6eb878bc15 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 8a3218f0af..e49ef52f31 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 7396dee140..b886d137bd 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 3000c5d257..8ee4c1a641 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 389f92c4f7..b359def282 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 6e9a3c867a..f2231a9704 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 c7f3d07bb9..3d46594759 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 4280c62b2c..119199ddf8 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 a9dff28a9c..7ac21e2025 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 82cd0b6572..253497a715 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 45cb37b633..47750fcfb9 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 3f68e4a83e..f8ae832f93 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 1edfac3296..6e70bc27e9 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 9565e7e2a5..b0518a9f5d 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 792d1896c2..a094c4c455 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 82cd0b6572..253497a715 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 ca86af65cf..408636ce6d 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 fbf535da09..5991bf20ec 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 2f8a7af059..ce2bc06c4e 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 6cc90537b5..9c595e3971 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 568a81ddf3..e7b18ff4ef 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 532e0b627d..8503263ec3 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 f8299c74e7..529408ac5e 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 84c31abeae..37d4115972 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 c475242514..0d38513db0 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 6cd9fd4c05..7af6206cbd 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 5621f96469..9e5f099964 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 cc1b313557..8d09656ccc 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 ef15cdc0a8..8f8c538ff4 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 e239a5ca23..91d74ac371 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 6ad2253613..8f61c7cb95 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 6c6a1fa932..743bc0347c 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 a0d9264b37..ea4eea89db 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 80ec393723..e22ed36b3d 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 451468a183..c0ec9380d7 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 2512048c8c..5feb36501e 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 0dc24e3db2..1e7179c752 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 9a6505aa34..18adac82cb 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 0243def103..bcc679a2a7 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 21b0cf7901..be17481e0b 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 e1dc962b5c..dd1183dd2a 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 5bd4cff9da..26f78c7fe3 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 d2fdb27170..8378d573db 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 90f5bc6e39..13fac8256b 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 bfd01d03f4..0ea0b78690 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 2e83b14997..5deb8329c2 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 f158a827b7..d46a5cbe14 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 654f56d424..578ec70bef 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 1619148bd6..3b8ae4fbc4 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 0585e2b75b..6cc54d8925 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 075bc15e5c..7f19b7ac28 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 802282326c..fa7377f994 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 c46789683a..034cbde9de 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 0a2dbb4421..8dff59d450 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 dcffdb6e76..a8f9bf927c 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 0a2dbb4421..8dff59d450 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 35f19a9621..03b720a1c0 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 0a2dbb4421..8dff59d450 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 7396dee140..b886d137bd 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 ec4d58ba79..0b6e1bcb77 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'),
});