Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-18 02:26:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrate to new theme (#2027)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/affine/pinboard/styles.ts
+15 -13
View File
@@ -20,7 +20,7 @@ export const StyledCollapsedButton = styled('button')<{
top: '0',
bottom: '0',
margin: 'auto',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
opacity: '.6',
transition: 'opacity .15s ease-in-out',
display: show ? 'flex' : 'none',
@@ -57,13 +57,13 @@ export const StyledPinboard = styled('div')<{
padding: disableCollapse ? '0 5px' : '0 2px 0 16px',
position: 'relative',
color: disable
? theme.colors.disableColor
? 'var(--affine-text-disable-color)'
: active
? theme.colors.primaryColor
: theme.colors.textColor,
? 'var(--affine-primary-color)'
: 'var(--affine-text-primary-color)',
cursor: disable ? 'not-allowed' : 'pointer',
background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
fontSize: theme.font.base,
background: isOver ? alpha('var(--affine-primary-color)', 0.06) : '',
fontSize: 'var(--affine-font-base)',
userSelect: 'none',
...(textWrap
? {
@@ -85,11 +85,13 @@ export const StyledPinboard = styled('div')<{
fontSize: '20px',
marginRight: '8px',
flexShrink: '0',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
color: active
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
},
':hover': {
backgroundColor: disable ? '' : theme.colors.hoverBackground,
backgroundColor: disable ? '' : 'var(--affine-hover-color)',
},
};
}
@@ -110,9 +112,9 @@ export const StyledSearchContainer = styled('div')(({ theme }) => {
width: 'calc(100% - 24px)',
margin: '0 auto',
...displayFlex('flex-start', 'center'),
borderBottom: `1px solid ${theme.colors.borderColor}`,
borderBottom: '1px solid var(--affine-border-color)',
label: {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
fontSize: '20px',
height: '20px',
},
@@ -126,7 +128,7 @@ export const StyledMenuContent = styled('div')(() => {
});
export const StyledMenuSubTitle = styled('div')(({ theme }) => {
return {
color: theme.colors.secondaryTextColor,
color: 'var(--affine-text-secondary-color)',
lineHeight: '36px',
padding: '0 12px',
};
@@ -136,12 +138,12 @@ export const StyledMenuFooter = styled('div')(({ theme }) => {
return {
width: 'calc(100% - 24px)',
margin: '0 auto',
borderTop: `1px solid ${theme.colors.borderColor}`,
borderTop: '1px solid var(--affine-border-color)',
padding: '6px 0',
p: {
paddingLeft: '44px',
color: theme.colors.secondaryTextColor,
color: 'var(--affine-text-secondary-color)',
fontSize: '14px',
},
};
apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
+3 -3
View File
@@ -15,7 +15,7 @@ export const Content = styled('div')({
export const ContentTitle = styled('h1')(({ theme }) => {
return {
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
lineHeight: '28px',
fontWeight: 600,
};
@@ -26,7 +26,7 @@ export const StyleTips = styled('div')(({ theme }) => {
userSelect: 'none',
margin: '20px 0',
a: {
color: theme.colors.primaryColor,
color: 'var(--affine-background-primary-color)',
},
};
});
@@ -36,7 +36,7 @@ export const StyleButton = styled(Button)(({ theme }) => {
textAlign: 'center',
margin: '20px 0',
borderRadius: '8px',
backgroundColor: theme.colors.primaryColor,
backgroundColor: 'var(--affine-background-primary-color)',
span: {
margin: '0',
},
apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx
+7 -7
View File
@@ -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',
apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts
+2 -2
View File
@@ -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)',
};
});
apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts
+2 -2
View File
@@ -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)',
};
});
apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts
+1 -1
View File
@@ -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',
};
});
apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts
+4 -4
View File
@@ -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',
};
apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx
+1 -1
View File
@@ -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)',
};
});
apps/web/src/components/affine/workspace-setting-detail/style.ts
+12 -10
View File
@@ -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)',
// };
// });