Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 12:55:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move component into a single package (#898)

Browse Source
This commit is contained in:
Himself65
2023-02-08 22:19:11 -06:00
committed by GitHub
parent 0984c37cad
commit cc605251a8
145 changed files with 9609 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
packages/component/src/ui/button/utils.ts Normal file
View File

@@ -0,0 +1,117 @@
import { AffineTheme } from '../../styles';
import {
SIZE_SMALL,
SIZE_MIDDLE,
SIZE_DEFAULT,
ButtonProps,
} from './interface';
// TODO: Designer is not sure about the size, Now, is just use default size
export const SIZE_CONFIG = {
[SIZE_SMALL]: {
iconSize: 16,
fontSize: 16,
borderRadius: 6,
height: 26,
padding: 24,
},
[SIZE_MIDDLE]: {
iconSize: 20,
fontSize: 16,
borderRadius: 6,
height: 32,
padding: 24,
},
[SIZE_DEFAULT]: {
iconSize: 24,
fontSize: 16,
height: 38,
padding: 24,
borderRadius: 6,
},
} as const;
export const getSize = (
size: typeof SIZE_SMALL | typeof SIZE_MIDDLE | typeof SIZE_DEFAULT
) => {
return SIZE_CONFIG[size];
};
export const getButtonColors = (
theme: AffineTheme,
type: ButtonProps['type'],
disabled: boolean,
extend?: {
hoverBackground: ButtonProps['hoverBackground'];
hoverColor: ButtonProps['hoverColor'];
hoverStyle: ButtonProps['hoverStyle'];
}
) => {
switch (type) {
case 'primary':
return {
background: theme.colors.primaryColor,
color: '#fff',
borderColor: theme.colors.primaryColor,
'.affine-button-icon': {
color: '#fff',
},
};
case 'light':
return {
background: theme.colors.hoverBackground,
color: disabled ? theme.colors.disableColor : theme.colors.primaryColor,
borderColor: theme.colors.hoverBackground,
'.affine-button-icon': {
borderColor: theme.colors.primaryColor,
},
':hover': {
borderColor: theme.colors.primaryColor,
},
};
case 'warning':
return {
background: theme.colors.warningBackground,
color: theme.colors.warningColor,
borderColor: theme.colors.warningBackground,
'.affine-button-icon': {
color: theme.colors.warningColor,
},
':hover': {
borderColor: theme.colors.warningColor,
color: extend?.hoverColor,
background: extend?.hoverBackground,
...extend?.hoverStyle,
},
};
case 'danger':
return {
background: theme.colors.errorBackground,
color: theme.colors.errorColor,
borderColor: theme.colors.errorBackground,
'.affine-button-icon': {
color: theme.colors.errorColor,
},
':hover': {
borderColor: theme.colors.errorColor,
color: extend?.hoverColor,
background: extend?.hoverBackground,
...extend?.hoverStyle,
},
};
default:
return {
color: theme.colors.popoverColor,
borderColor: theme.colors.borderColor,
':hover': {
borderColor: theme.colors.primaryColor,
color: extend?.hoverColor ?? theme.colors.primaryColor,
'.affine-button-icon': {
color: extend?.hoverColor ?? theme.colors.primaryColor,
background: extend?.hoverBackground,
...extend?.hoverStyle,
},
},
};
}
};