feat: upgrate to new theme (#2027)

Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
Flrande
2023-04-20 16:31:19 +08:00
committed by GitHub
parent 63f7b2556e
commit 372377dd6b
61 changed files with 624 additions and 1037 deletions
@@ -154,7 +154,7 @@ const Members = styled('div')(({ theme }) => {
return {
position: 'absolute',
width: '100%',
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
textAlign: 'left',
zIndex: 1,
borderRadius: '0px 10px 10px 10px',
@@ -162,7 +162,7 @@ const Members = styled('div')(({ theme }) => {
padding: '8px 12px',
input: {
'&::placeholder': {
color: theme.colors.placeHolderColor,
color: 'var(--affine-placeholder-color)',
},
},
};
@@ -170,8 +170,8 @@ const Members = styled('div')(({ theme }) => {
// const NoFind = styled('div')(({ theme }) => {
// return {
// color: theme.colors.iconColor,
// fontSize: theme.font.sm,
// color: 'var(--affine-icon-color)',
// fontSize: 'var(--affine-font-sm)',
// lineHeight: '40px',
// userSelect: 'none',
// width: '100%',
@@ -180,8 +180,8 @@ const Members = styled('div')(({ theme }) => {
const Member = styled('div')(({ theme }) => {
return {
color: theme.colors.iconColor,
fontSize: theme.font.sm,
color: 'var(--affine-icon-color)',
fontSize: 'var(--affine-font-sm)',
lineHeight: '40px',
userSelect: 'none',
display: 'flex',
@@ -193,7 +193,7 @@ const MemberIcon = styled('div')(({ theme }) => {
width: '40px',
height: '40px',
borderRadius: '50%',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
background: '#F5F5F5',
textAlign: 'center',
lineHeight: '45px',
@@ -66,7 +66,7 @@ export const StyledMemberName = styled('div')(({ theme }) => {
fontWeight: '400',
fontSize: '18px',
lineHeight: '26px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
};
});
@@ -75,7 +75,7 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
fontWeight: '400',
fontSize: '16px',
lineHeight: '22px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
};
});
@@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
position: 'relative',
padding: '0px',
width: '560px',
background: theme.colors.popoverBackground,
background: 'var(--affine-white)',
borderRadius: '12px',
// height: '312px',
};
@@ -42,7 +42,7 @@ export const StyledInputContent = styled('div')(({ theme }) => {
flexDirection: 'row',
justifyContent: 'center',
margin: '24px 0',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
};
});
@@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
position: 'relative',
padding: '0px',
width: '460px',
background: theme.colors.popoverBackground,
background: 'var(--affine-white)',
borderRadius: '12px',
};
});
@@ -3,9 +3,9 @@ import { Input } from '@affine/component';
export const StyledInput = styled(Input)(({ theme }) => {
return {
border: `1px solid ${theme.colors.borderColor}`,
border: '1px solid var(--affine-border-color)',
borderRadius: '10px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
};
});
@@ -14,7 +14,7 @@ export const StyledWorkspaceInfo = styled('div')(({ theme }) => {
...displayFlex('flex-start', 'center'),
fontSize: '20px',
span: {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
marginLeft: '15px',
},
};
@@ -49,7 +49,7 @@ export const StyledAvatar = styled('div')(
export const StyledEditButton = styled('div')(({ theme }) => {
return {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
cursor: 'pointer',
marginLeft: '36px',
};
@@ -12,7 +12,7 @@ import type { PanelProps } from '../../index';
export const StyledWorkspaceName = styled('span')(({ theme }) => {
return {
fontWeight: '400',
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
};
});
@@ -32,10 +32,12 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
display: 'flex',
margin: '0 48px 0 0',
height: '34px',
color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
color: isActive
? 'var(--affine-primary-color)'
: 'var(--affine-text-primary-color)',
fontWeight: '500',
fontSize: theme.font.h6,
lineHeight: theme.font.lineHeight,
fontSize: 'var(--affine-font-h6)',
lineHeight: 'var(--affine-line-height)',
cursor: 'pointer',
transition: 'all 0.15s ease',
};
@@ -46,7 +48,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
export const StyledSettingKey = styled('div')(({ theme }) => {
return {
width: '140px',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
fontWeight: 500,
marginRight: '56px',
flexShrink: 0,
@@ -61,14 +63,14 @@ export const StyledRow = styled(FlexWrapper)(() => {
export const StyledWorkspaceName = styled('span')(({ theme }) => {
return {
fontWeight: '400',
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
};
});
export const StyledIndicator = styled('div')(({ theme }) => {
return {
height: '2px',
background: theme.colors.primaryColor,
background: 'var(--affine-primary-color)',
position: 'absolute',
left: '0',
bottom: '0',
@@ -90,8 +92,8 @@ export const StyledTabButtonWrapper = styled('div')(() => {
// height: '86px',
// border: '1px solid',
// borderColor: active
// ? theme.colors.primaryColor
// : theme.colors.borderColor,
// ? 'var(--affine-primary-color)'
// : 'var(--affine-border-color)',
// borderRadius: '10px',
// padding: '8px 12px',
// position: 'relative',
@@ -107,7 +109,7 @@ export const StyledTabButtonWrapper = styled('div')(() => {
// );
// export const StyledDownloadCardDes = styled('div')(({ theme }) => {
// return {
// fontSize: theme.font.sm,
// color: theme.colors.iconColor,
// fontSize: 'var(--affine-font-sm)',
// color: 'var(--affine-icon-color)',
// };
// });