Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-11 20:08:37 +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',