Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-12 07:36:42 +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/ui/button/styles.ts
+10 -10
View File
@@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', {
width,
height,
fontSize,
color: theme.colors.iconColor,
color: 'var(--affine-hover-color)',
...displayInlineFlex('center', 'center'),
position: 'relative',
...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
@@ -66,9 +66,9 @@ export const StyledIconButton = styled('button', {
},
':hover': {
color: hoverColor ?? theme.colors.primaryColor,
color: hoverColor ?? 'var(--affine-primary-color)',
'::after': {
background: hoverBackground || theme.colors.hoverBackground,
background: hoverBackground || 'var(--affine-hover-color)',
},
...(hoverStyle ?? {}),
},
@@ -132,8 +132,8 @@ export const StyledTextButton = styled('button', {
fontWeight: bold ? '500' : '400',
':hover': {
color: hoverColor ?? theme.colors.primaryColor,
background: hoverBackground ?? theme.colors.hoverBackground,
color: hoverColor ?? 'var(--affine-primary-color)',
background: hoverBackground ?? 'var(--affine-hover-color)',
...(hoverStyle ?? {}),
},
};
@@ -192,7 +192,7 @@ export const StyledButton = styled('button', {
? {
cursor: 'not-allowed',
pointerEvents: 'none',
color: theme.colors.disableColor,
color: 'var(--affine-text-disable-color)',
}
: {}),
transition: 'background .15s',
@@ -201,10 +201,10 @@ export const StyledButton = styled('button', {
fontSize,
fontWeight: bold ? '500' : '400',
'.affine-button-icon': {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
'.affine-button-icon__fixed': {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
'>span': {
marginLeft: '5px',
@@ -221,8 +221,8 @@ export const StyledButton = styled('button', {
// TODO: disabled hover should be implemented
//
// ':hover': {
// color: hoverColor ?? theme.colors.primaryColor,
// background: hoverBackground ?? theme.colors.hoverBackground,
// color: hoverColor ?? 'var(--affine-primary-color)',
// background: hoverBackground ?? 'var(--affine-hover-color)',
// '.affine-button-icon':{
//
// }
packages/component/src/ui/button/utils.ts
+25 -23
View File
@@ -47,37 +47,39 @@ export const getButtonColors = (
switch (type) {
case 'primary':
return {
background: theme.colors.primaryColor,
background: 'var(--affine-primary-color)',
color: '#fff',
borderColor: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
'.affine-button-icon': {
color: '#fff',
},
};
case 'light':
return {
background: theme.colors.hoverBackground,
color: disabled ? theme.colors.disableColor : theme.colors.primaryColor,
borderColor: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
color: disabled
? 'var(--affine-text-disable-color)'
: 'var(--affine-primary-color)',
borderColor: 'var(--affine-hover-color)',
'.affine-button-icon': {
borderColor: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
},
':hover': {
borderColor: disabled
? theme.colors.hoverBackground
: theme.colors.primaryColor,
? 'var(--affine-hover-color)'
: 'var(--affine-primary-color)',
},
};
case 'warning':
return {
background: theme.colors.warningBackground,
color: theme.colors.warningColor,
borderColor: theme.colors.warningBackground,
background: 'var(--affine-background-warning-color)',
color: 'var(--affine-background-warning-color)',
borderColor: 'var(--affine-background-warning-color)',
'.affine-button-icon': {
color: theme.colors.warningColor,
color: 'var(--affine-background-warning-color)',
},
':hover': {
borderColor: theme.colors.warningColor,
borderColor: 'var(--affine-background-warning-color)',
color: extend?.hoverColor,
background: extend?.hoverBackground,
...extend?.hoverStyle,
@@ -85,14 +87,14 @@ export const getButtonColors = (
};
case 'danger':
return {
background: theme.colors.errorBackground,
color: theme.colors.errorColor,
borderColor: theme.colors.errorBackground,
background: 'var(--affine-background-error-color)',
color: 'var(--affine-error-color)',
borderColor: 'var(--affine-background-error-color)',
'.affine-button-icon': {
color: theme.colors.errorColor,
color: 'var(--affine-error-color)',
},
':hover': {
borderColor: theme.colors.errorColor,
borderColor: 'var(--affine-error-color)',
color: extend?.hoverColor,
background: extend?.hoverBackground,
...extend?.hoverStyle,
@@ -100,13 +102,13 @@ export const getButtonColors = (
};
default:
return {
color: theme.colors.textColor,
borderColor: theme.colors.borderColor,
color: 'var(--affine-text-primary-color)',
borderColor: 'var(--affine-border-color)',
':hover': {
borderColor: theme.colors.primaryColor,
color: extend?.hoverColor ?? theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
color: extend?.hoverColor ?? 'var(--affine-primary-color)',
'.affine-button-icon': {
color: extend?.hoverColor ?? theme.colors.primaryColor,
color: extend?.hoverColor ?? 'var(--affine-primary-color)',
background: extend?.hoverBackground,
...extend?.hoverStyle,
},