Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): replace most --affine with cssVar (#5728)

Browse Source 
using a [babel plugin](https://gist.github.com/pengx17/49e24ae8a5a609bdaff122ee8c679d1c) to transform all var(--affine-xxx) to cssVar

Some issues:
- tried ast-grep but it seems to be not easy to add imports conditionally
- current work does not work well with ts with types because babel will strip them out
This commit is contained in:
Peng Xiao
2024-02-01 09:33:11 +00:00
parent 5612424b85
commit 7d951a975f
135 changed files with 1239 additions and 1897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/frontend/component/src/components/affine-banner/index.css.ts
View File

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

27
packages/frontend/component/src/components/affine-other-page-layout/index.css.ts
View File

@@ -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',

14
packages/frontend/component/src/components/app-sidebar/add-page-button/index.css.ts
View File

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

5
packages/frontend/component/src/components/app-sidebar/app-download-button/index.css.ts
View File

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

44
packages/frontend/component/src/components/app-sidebar/app-updater-button/index.css.ts
View File

@@ -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',

7
packages/frontend/component/src/components/app-sidebar/category-divider/index.css.ts
View File

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

2
packages/frontend/component/src/components/app-sidebar/fallback.css.ts
View File

@@ -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%',

20
packages/frontend/component/src/components/app-sidebar/index.css.ts
View File

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

22
packages/frontend/component/src/components/app-sidebar/menu-item/index.css.ts
View File

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

17
packages/frontend/component/src/components/app-sidebar/quick-search-input/index.css.ts
View File

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

13
packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.css.ts
View File

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

1
packages/frontend/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts
View File

@@ -1,5 +1,4 @@
import { style } from '@vanilla-extract/css';
export const sidebarSwitch = style({
opacity: 0,
display: 'none !important',

2
packages/frontend/component/src/components/app-sidebar/spolight/index.css.ts
View File

@@ -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',

47
packages/frontend/component/src/components/auth-components/onboarding-page.css.ts
View File

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

21
packages/frontend/component/src/components/auth-components/password-input/style.css.ts
View File

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

66
packages/frontend/component/src/components/auth-components/share.css.ts
View File

@@ -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': {

21
packages/frontend/component/src/components/card/block-card/styles.css.ts
View File

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

6
packages/frontend/component/src/components/global-loading/index.css.ts
View File

@@ -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',

14
packages/frontend/component/src/components/import-page/index.css.ts
View File

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

9
packages/frontend/component/src/components/not-found-page/styles.css.ts
View File

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

64
packages/frontend/component/src/components/notification-center/index.css.ts
View File

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

7
packages/frontend/component/src/components/page-detail-skeleton/index.css.ts
View File

@@ -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',

8
packages/frontend/component/src/components/resize-panel/resize-panel.css.ts
View File

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

44
packages/frontend/component/src/components/setting-components/share.css.ts
View File

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

17
packages/frontend/component/src/components/tour-modal/index.css.ts
View File

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

1
packages/frontend/component/src/components/workspace-list/index.css.ts
View File

@@ -1,5 +1,4 @@
import { style } from '@vanilla-extract/css';
export const workspaceItemStyle = style({
'@media': {
'screen and (max-width: 720px)': {

23
packages/frontend/component/src/components/workspace/index.css.ts
View File

@@ -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',

11
packages/frontend/component/src/theme/theme.css.ts
View File

@@ -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',

15
packages/frontend/component/src/ui/avatar/style.css.ts
View File

@@ -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',

225
packages/frontend/component/src/ui/button/button.css.ts
View File

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

249
packages/frontend/component/src/ui/button/styles.css.ts
View File

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

6
packages/frontend/component/src/ui/checkbox/index.css.ts
View File

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

76
packages/frontend/component/src/ui/date-picker/index.css.ts
View File

@@ -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%',

4
packages/frontend/component/src/ui/divider/style.css.ts
View File

@@ -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%',

8
packages/frontend/component/src/ui/editable/inline-edit.css.ts
View File

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

27
packages/frontend/component/src/ui/input/style.css.ts
View File

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

14
packages/frontend/component/src/ui/loading/styles.css.ts
View File

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

4
packages/frontend/component/src/ui/lottie/styles.css.ts
View File

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

75
packages/frontend/component/src/ui/menu/styles.css.ts
View File

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

24
packages/frontend/component/src/ui/modal/styles.css.ts
View File

@@ -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',

10
packages/frontend/component/src/ui/popover/styles.css.ts
View File

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

5
packages/frontend/component/src/ui/resize-panel/styles.css.ts
View File

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

18
packages/frontend/component/src/ui/scrollbar/index.css.ts
View File

@@ -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': {

45
packages/frontend/component/src/ui/skeleton/index.css.ts
View File

@@ -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<string, string> = {
export const variant = {
circular: style({
width: defaultHeight,
borderRadius: '50%',
@@ -58,21 +63,15 @@ export const variant: Record<string, string> = {
marginBottom: '0.2em',
}),
};
export const animation: Record<
PickStringFromUnion<SkeletonProps['animation']>,
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(

16
packages/frontend/component/src/ui/switch/index.css.ts
View File

@@ -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%)',
},
},

8
packages/frontend/component/src/ui/tooltip/styles.css.ts
View File

@@ -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',

1
packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.css.ts
View File

@@ -1,5 +1,4 @@
import { style } from '@vanilla-extract/css';
export const viewport = style({
height: '100%',
width: '100%',

7
packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.css.ts
View File

@@ -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%',

43
packages/frontend/core/src/components/affine/auth/style.css.ts
View File

@@ -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',

7
packages/frontend/core/src/components/affine/auth/subscription-redirect.css.ts
View File

@@ -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',

7
packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts
View File

@@ -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',

4
packages/frontend/core/src/components/affine/language-menu/style.css.ts
View File

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

9
packages/frontend/core/src/components/affine/onboarding/articles/blocks.css.ts
View File

@@ -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',

16
packages/frontend/core/src/components/affine/onboarding/curve-paper/paper.css.ts
View File

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

2
packages/frontend/core/src/components/affine/onboarding/steps/animate-in.css.ts
View File

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

41
packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts
View File

@@ -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',

40
packages/frontend/core/src/components/affine/onboarding/steps/unfolding.css.ts
View File

@@ -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`,

24
packages/frontend/core/src/components/affine/onboarding/style.css.ts
View File

@@ -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)`,

105
packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts
View File

@@ -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',

4
packages/frontend/core/src/components/affine/payment-disable/style.css.ts
View File

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

11
packages/frontend/core/src/components/affine/setting-modal/account-setting/style.css.ts
View File

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

30
packages/frontend/core/src/components/affine/setting-modal/general-setting/about/style.css.ts
View File

@@ -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',

1
packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/style.css.ts
View File

@@ -1,5 +1,4 @@
import { style } from '@vanilla-extract/css';
export const settingWrapper = style({
flexGrow: 1,
display: 'flex',

30
packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/style.css.ts
View File

@@ -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',

14
packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts
View File

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

8
packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/skeleton.css.ts
View File

@@ -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',

60
packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts
View File

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

9
packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts
View File

@@ -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',

58
packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
View File

@@ -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',

16
packages/frontend/core/src/components/affine/setting-modal/style.css.ts
View File

@@ -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',

1
packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.css.ts
View File

@@ -1,5 +1,4 @@
import { style } from '@vanilla-extract/css';
export const root = style({
height: 100,
display: 'flex',

19
packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.css.ts
View File

@@ -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',

9
packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts
View File

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

53
packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/style.css.ts
View File

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

47
packages/frontend/core/src/components/affine/share-page-modal/share-menu/index.css.ts
View File

@@ -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',

11
packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts
View File

@@ -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',

4
packages/frontend/core/src/components/blocksuite/block-suite-header/title/style.css.ts
View File

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

12
packages/frontend/core/src/components/blocksuite/block-suite-page-list/index.css.ts
View File

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

6
packages/frontend/core/src/components/cloud/share-header-left-item/styles.css.ts
View File

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

7
packages/frontend/core/src/components/cloud/share-header-right-item/styles.css.ts
View File

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

1
packages/frontend/core/src/components/filter-container.css.ts
View File

@@ -1,5 +1,4 @@
import { style } from '@vanilla-extract/css';
export const filterContainerStyle = style({
padding: '0 16px',
display: 'flex',

51
packages/frontend/core/src/components/image-preview/index.css.ts
View File

@@ -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',

3
packages/frontend/core/src/components/page-detail-editor.css.ts
View File

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

14
packages/frontend/core/src/components/page-list/collections/collection-list-header.css.ts
View File

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

52
packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts
View File

@@ -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',

28
packages/frontend/core/src/components/page-list/components/floating-toolbar.css.ts
View File

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

1
packages/frontend/core/src/components/page-list/components/list-floating-toolbar.css.ts
View File

@@ -1,5 +1,4 @@
import { style } from '@vanilla-extract/css';
export const floatingToolbar = style({
position: 'absolute',
bottom: 26,

13
packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts
View File

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

4
packages/frontend/core/src/components/page-list/components/new-page-button.css.ts
View File

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

31
packages/frontend/core/src/components/page-list/docs/page-list-header.css.ts
View File

@@ -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',

52
packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts
View File

@@ -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',

1
packages/frontend/core/src/components/page-list/docs/page-list-new-page-button.css.ts
View File

@@ -1,5 +1,4 @@
import { style } from '@vanilla-extract/css';
export const newPageButtonLabel = style({
display: 'flex',
alignItems: 'center',

31
packages/frontend/core/src/components/page-list/docs/page-tags.css.ts
View File

@@ -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',

35
packages/frontend/core/src/components/page-list/filter/index.css.ts
View File

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

10
packages/frontend/core/src/components/page-list/filter/multi-select.css.ts
View File

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

12
packages/frontend/core/src/components/page-list/list.css.ts
View File

@@ -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',

10
packages/frontend/core/src/components/page-list/operation-menu-items/index.css.ts
View File

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

32
packages/frontend/core/src/components/page-list/page-group.css.ts
View File

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

9
packages/frontend/core/src/components/page-list/page-header.css.ts
View File

@@ -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',

14
packages/frontend/core/src/components/page-list/tags/tag-list-header.css.ts
View File

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

Some files were not shown because too many files have changed in this diff Show More