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: unify theme (#1303)

Browse Source
This commit is contained in:
Himself65
2023-03-04 01:36:20 -06:00
committed by GitHub
parent fe0d78b2d6
commit 4e9f0c97a1
43 changed files with 779 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/component/src/ui/button/styles.ts
View File

@@ -16,7 +16,7 @@ export const StyledIconButton = styled('button', {
'hoverColor',
'hoverStyle',
'darker',
].includes(prop);
].includes(prop as string);
},
})<{
width: number;
@@ -90,7 +90,7 @@ export const StyledTextButton = styled('button', {
'hoverColor',
'hoverStyle',
'bold',
].includes(prop);
].includes(prop as string);
},
})<
Pick<
@@ -153,7 +153,7 @@ export const StyledButton = styled('button', {
'type',
'bold',
'noBorder',
].includes(prop);
].includes(prop as string);
},
})<
Pick<

5
packages/component/src/ui/button/utils.ts
View File

@@ -1,4 +1,5 @@
import { AffineTheme } from '../../styles';
import { Theme } from '@mui/material';
import {
ButtonProps,
SIZE_DEFAULT,
@@ -38,7 +39,7 @@ export const getSize = (
};
export const getButtonColors = (
theme: AffineTheme,
theme: Theme,
type: ButtonProps['type'],
disabled: boolean,
extend?: {

8
packages/component/src/ui/confirm/styles.ts
View File

@@ -10,7 +10,7 @@ export const StyledModalWrapper = styled(ModalWrapper)(() => {
};
});
export const StyledConfirmTitle = styled.div(({ theme }) => {
export const StyledConfirmTitle = styled('div')(({ theme }) => {
return {
fontSize: theme.font.h6,
fontWeight: 600,
@@ -20,7 +20,7 @@ export const StyledConfirmTitle = styled.div(({ theme }) => {
};
});
export const StyledConfirmContent = styled.div(({ theme }) => {
export const StyledConfirmContent = styled('div')(({ theme }) => {
return {
fontSize: theme.font.base,
textAlign: 'center',
@@ -30,14 +30,14 @@ export const StyledConfirmContent = styled.div(({ theme }) => {
};
});
export const StyledColumnButtonWrapper = styled.div(() => {
export const StyledColumnButtonWrapper = styled('div')(() => {
return {
...displayFlex('center', 'center'),
flexDirection: 'column',
marginTop: '32px',
};
});
export const StyledRowButtonWrapper = styled.div(() => {
export const StyledRowButtonWrapper = styled('div')(() => {
return {
...displayFlex('center', 'center'),
flexDirection: 'row',

2
packages/component/src/ui/empty/style.ts
View File

@@ -1,6 +1,6 @@
import { displayFlex, styled } from '../../styles';
export const StyledEmptyContainer = styled.div(() => {
export const StyledEmptyContainer = styled('div')(() => {
return {
height: '100%',
...displayFlex('center', 'center'),

2
packages/component/src/ui/layout/Content.tsx
View File

@@ -27,7 +27,7 @@ export const Content = styled('div', {
'width',
'maxWidth',
'align',
].includes(prop);
].includes(prop as string);
},
})<ContentProps>(
({

6
packages/component/src/ui/layout/Wrapper.tsx
View File

@@ -45,7 +45,7 @@ export const Wrapper = styled('div', {
'marginLeft',
'marginRight',
'marginBottom',
].includes(prop);
].includes(prop as string);
},
})<WrapperProps>(
({
@@ -90,7 +90,7 @@ export const FlexWrapper = styled(Wrapper, {
'flexDirection',
'flexShrink',
'flexGrow',
].includes(prop);
].includes(prop as string);
},
})<FlexWrapperProps>(
({
@@ -116,7 +116,7 @@ export const FlexWrapper = styled(Wrapper, {
// TODO: Complete me
export const GridWrapper = styled(Wrapper, {
shouldForwardProp: prop => {
return ![''].includes(prop);
return ![''].includes(prop as string);
},
})<WrapperProps>(() => {
return {

2
packages/component/src/ui/menu/styles.ts
View File

@@ -22,7 +22,7 @@ export const StyledArrow = styled(ArrowRightSmallIcon)({
margin: 'auto',
});
export const StyledMenuItem = styled.button<{
export const StyledMenuItem = styled('button')<{
isDir?: boolean;
}>(({ theme, isDir = false }) => {
return {

2
packages/component/src/ui/modal/ModalWrapper.tsx
View File

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
import { styled } from '../../styles';
export const ModalWrapper = styled.div<{
export const ModalWrapper = styled('div')<{
width?: CSSProperties['width'];
height?: CSSProperties['height'];
minHeight?: CSSProperties['minHeight'];

6
packages/component/src/ui/modal/styles.ts
View File

@@ -4,7 +4,7 @@ import { CSSProperties } from 'react';
import { styled } from '../../styles';
import { Wrapper } from '../layout';
export const StyledBackdrop = styled.div(({ theme }) => {
export const StyledBackdrop = styled('div')(({ theme }) => {
return {
zIndex: '-1',
position: 'fixed',
@@ -13,7 +13,7 @@ export const StyledBackdrop = styled.div(({ theme }) => {
top: '0',
left: '0',
backgroundColor:
theme.mode === 'light'
theme.palette.mode === 'light'
? 'rgba(58, 76, 92, 0.2)'
: 'rgba(34, 34, 34, 0.6)',
};
@@ -21,7 +21,7 @@ export const StyledBackdrop = styled.div(({ theme }) => {
export const StyledModal = styled(ModalUnstyled, {
shouldForwardProp: prop => {
return !['justifyContent', 'alignItems'].includes(prop);
return !['justifyContent', 'alignItems'].includes(prop as string);
},
})<{
alignItems: CSSProperties['alignItems'];

10
packages/component/src/ui/table/styles.ts
View File

@@ -1,7 +1,7 @@
import { styled, textEllipsis } from '../../styles';
import { TableCellProps } from './interface';
export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
({ theme, tableLayout }) => {
return {
fontSize: theme.font.base,
@@ -14,13 +14,13 @@ export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
}
);
export const StyledTableBody = styled.tbody(() => {
export const StyledTableBody = styled('tbody')(() => {
return {
fontWeight: 400,
};
});
export const StyledTableCell = styled.td<
export const StyledTableCell = styled('td')<
Pick<TableCellProps, 'ellipsis' | 'align' | 'proportion'>
>(({ align = 'left', ellipsis = false, proportion }) => {
const width = proportion ? `${proportion * 100}%` : 'auto';
@@ -37,7 +37,7 @@ export const StyledTableCell = styled.td<
};
});
export const StyledTableHead = styled.thead(() => {
export const StyledTableHead = styled('thead')(() => {
return {
fontWeight: 500,
tr: {
@@ -50,7 +50,7 @@ export const StyledTableHead = styled.thead(() => {
};
});
export const StyledTableRow = styled.tr(({ theme }) => {
export const StyledTableRow = styled('tr')(({ theme }) => {
return {
td: {
transition: 'background .15s',