Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-13 16:16:46 +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
packages/component/src/components/contact-modal/style.ts
+15 -15
View File
@@ -7,7 +7,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
paddingLeft: '96px',
fontSize: '24px',
lineHeight: '36px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
borderRadius: '10px',
flexDirection: 'column',
...displayFlex('center'),
@@ -16,7 +16,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
letterSpacing: '1px',
':visited': {
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
},
':hover': {
background: 'rgba(68, 97, 242, 0.1)',
@@ -28,7 +28,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
width: '48px',
height: '48px',
marginRight: '24px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
...absoluteCenter({ vertical: true, position: { left: '26px' } }),
},
p: {
@@ -44,7 +44,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
},
':last-of-type': {
fontSize: '16px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
fontWeight: '500',
},
svg: {
@@ -64,21 +64,21 @@ export const StyledSmallLink = styled('a')(({ theme }) => {
fontSize: '16px',
fontWeight: '500',
borderRadius: '5px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
transition: 'background .15s, color .15s',
...displayFlex('center', 'center'),
flexWrap: 'wrap',
':visited': {
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
},
':hover': {
color: theme.colors.primaryColor,
background: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
background: 'var(--affine-hover-color)',
},
svg: {
width: '22px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
p: {
width: '100%',
@@ -90,7 +90,7 @@ export const StyledSubTitle = styled('div')(({ theme }) => {
return {
fontSize: '18px',
fontWeight: '600',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
marginTop: '52px',
marginBottom: '8px',
textAlign: 'center',
@@ -116,7 +116,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
fontSize: '14px',
lineHeight: '20px',
textAlign: 'center',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
marginTop: '40px',
};
});
@@ -128,16 +128,16 @@ export const StyledPrivacyContainer = styled('div')(({ theme }) => {
a: {
height: '16px',
lineHeight: '16px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
padding: '0 8px',
':visited': {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
':first-of-type': {
borderRight: `1px solid ${theme.colors.borderColor}`,
borderRight: '1px solid var(--affine-border-color)',
},
':hover': {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
},
};
packages/component/src/components/share-menu/disable-public-link/style.ts
+4 -4
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',
};
@@ -16,7 +16,7 @@ export const StyledModalHeader = styled('div')(({ theme }) => {
margin: '44px 0px 12px 0px',
width: '560px',
fontWeight: '600',
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
textAlign: 'center',
};
});
@@ -27,7 +27,7 @@ export const StyledTextContent = styled('div')(({ theme }) => {
width: '560px',
padding: '0px 84px',
fontWeight: '400',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
textAlign: 'center',
};
});
@@ -42,7 +42,7 @@ export const StyledButtonContent = styled('div')(() => {
});
export const StyledButton = styled(TextButton)(({ theme }) => {
return {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
height: '32px',
background: '#F3F0FF',
border: 'none',
packages/component/src/components/share-menu/styles.ts
+19 -17
View File
@@ -8,12 +8,14 @@ export const StyledShareButton = styled(TextButton, {
marginLeft: '4px',
marginRight: '16px',
border: `1px solid ${
isShared ? theme.colors.primaryColor : theme.colors.iconColor
isShared ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)'
}`,
color: isShared ? theme.colors.primaryColor : theme.colors.iconColor,
color: isShared
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
borderRadius: '8px',
':hover': {
border: `1px solid ${theme.colors.primaryColor}`,
border: `1px solid ${'var(--affine-primary-color)'}`,
},
span: {
...displayFlex('center', 'center'),
@@ -35,11 +37,11 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
...displayFlex('center', 'center'),
flex: '1',
height: '30px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
opacity: isActive ? 1 : 0.2,
fontWeight: '500',
fontSize: theme.font.base,
lineHeight: theme.font.lineHeight,
fontSize: 'var(--affine-font-base)',
lineHeight: 'var(--affine-line-height)',
cursor: 'pointer',
transition: 'all 0.15s ease',
padding: '0 10px',
@@ -47,15 +49,15 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
borderRadius: '4px',
position: 'relative',
':hover': {
background: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
opacity: 1,
color: isActive
? theme.colors.textColor
: theme.colors.secondaryTextColor,
? 'var(--affine-text-primary-color)'
: 'var(--affine-text-secondary-color)',
svg: {
fill: isActive
? theme.colors.textColor
: theme.colors.secondaryTextColor,
? 'var(--affine-text-primary-color)'
: 'var(--affine-text-secondary-color)',
},
},
svg: {
@@ -69,7 +71,7 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
left: '0',
width: '100%',
height: '2px',
background: theme.colors.textColor,
background: 'var(--affine-text-primary-color)',
opacity: 0.2,
},
};
@@ -79,7 +81,7 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(
export const StyledIndicator = styled('div')(({ theme }) => {
return {
height: '2px',
background: theme.colors.textColor,
background: 'var(--affine-text-primary-color)',
position: 'absolute',
left: '0',
transition: 'left .3s, width .3s',
@@ -89,8 +91,8 @@ export const StyledInput = styled('input')(({ theme }) => {
return {
padding: '4px 8px',
height: '28px',
color: theme.colors.placeHolderColor,
border: `1px solid ${theme.colors.placeHolderColor}`,
color: 'var(--affine-placeholder-color)',
border: `1px solid ${'var(--affine-placeholder-color)'}`,
cursor: 'default',
overflow: 'hidden',
userSelect: 'text',
@@ -101,7 +103,7 @@ export const StyledInput = styled('input')(({ theme }) => {
});
export const StyledButton = styled(TextButton)(({ theme }) => {
return {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
height: '32px',
background: '#F3F0FF',
border: 'none',
@@ -122,7 +124,7 @@ export const StyledDisableButton = styled(Button)(() => {
export const StyledLinkSpan = styled('span')(({ theme }) => {
return {
marginLeft: '4px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
fontWeight: '500',
cursor: 'pointer',
};
packages/component/src/components/workspace-card/styles.ts
+8 -8
View File
@@ -7,7 +7,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
width: '202px',
p: {
height: '20px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
...displayFlex('flex-start', 'center'),
},
svg: {
@@ -24,7 +24,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
return {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
fontWeight: 600,
lineHeight: '24px',
marginBottom: '10px',
@@ -36,7 +36,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
export const StyledCard = styled('div')<{
active?: boolean;
}>(({ theme, active }) => {
const borderColor = active ? theme.colors.primaryColor : 'transparent';
const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
return {
width: '310px',
height: '124px',
@@ -51,10 +51,10 @@ export const StyledCard = styled('div')<{
background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
position: 'relative',
':hover': {
background: theme.colors.cardHoverBackground,
background: 'var(--affine-hover-color)',
'.add-icon': {
borderColor: theme.colors.primaryColor,
color: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
color: 'var(--affine-primary-color)',
},
'.setting-entry': {
opacity: 1,
@@ -84,11 +84,11 @@ export const StyledSettingLink = styled(IconButton)(({ theme }) => {
bottom: '6px',
opacity: 0,
borderRadius: '4px',
color: theme.colors.primaryColor,
color: 'var(--affine-background-primary-color)',
pointerEvents: 'none',
transition: 'all .15s',
':hover': {
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
},
};
});