mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-30 08:39:53 +08:00
feat: upgrate to new theme (#2027)
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
+7
-7
@@ -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',
|
||||
|
||||
+2
-2
@@ -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)',
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
+2
-2
@@ -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)',
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
+1
-1
@@ -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)',
|
||||
// };
|
||||
// });
|
||||
|
||||
Reference in New Issue
Block a user