Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-14 08:36:22 +08: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
packages/frontend/component/src/components/auth-components/onboarding-page.css.ts
+13 -34
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'),
},
},
});
packages/frontend/component/src/components/auth-components/password-input/style.css.ts
+10 -11
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'),
},
},
});
packages/frontend/component/src/components/auth-components/share.css.ts
+29 -37
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': {