toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-24 11:24:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update shadow and color (#2171)

Browse Source
This commit is contained in:
JimmFly 2023-04-28 01:57:25 +08:00 committed by GitHub
parent 50006efb57
commit dcf7e83eec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 40 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts
View File

@ -9,7 +9,7 @@ export const StyledEditorModeSwitch = styled('div')<{
height: '32px',
background: showAlone
? 'transparent'
: 'var(--affine-background-primary-color)',
: 'var(--affine-background-secondary-color)',
borderRadius: '12px',
...displayFlex('space-between', 'center'),
padding: '0 8px',
@ -21,7 +21,7 @@ export const StyledEditorModeSwitch = styled('div')<{
width: '24px',
height: '24px',
background: 'var(--affine-background-primary-color)',
boxShadow: 'var(--affine-tooltip-shadow)',
boxShadow: 'var(--affine-shadow)',
borderRadius: '8px',
zIndex: 1,
position: 'absolute',
@ -34,11 +34,12 @@ export const StyledEditorModeSwitch = styled('div')<{
export const StyledSwitchItem = styled('button')<{
active?: boolean;
hide?: boolean;
}>(({ theme, active = false, hide = false }) => {
}>(({ active = false, hide = false }) => {
return {
width: '24px',
height: '24px',
borderRadius: '8px',
boxShadow: active ? 'var(--affine-shadow)' : 'none',
color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
display: hide ? 'none' : 'inline-flex',
alignItems: 'center',

26
apps/web/src/components/pure/footer/styles.ts
View File

@ -47,32 +47,6 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
};
});
export const StyledCard = styled('div')<{
active?: boolean;
}>(({ theme, active }) => {
const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
return {
width: '310px',
height: '124px',
cursor: 'pointer',
padding: '16px',
boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)',
borderRadius: '12px',
border: `1px solid ${borderColor}`,
...displayFlex('flex-start', 'flex-start'),
marginBottom: '24px',
transition: 'background .2s',
background: 'var(--affine-background-primary-color)',
':hover': {
background: 'var(--affine-hover-color)',
'.add-icon': {
borderColor: 'var(--affine-primary-color)',
color: 'var(--affine-primary-color)',
},
},
};
});
export const StyledFooter = styled('div')({
height: '84px',
padding: '0 40px',

9
apps/web/src/components/pure/workspace-list-modal/styles.ts
View File

@ -47,9 +47,10 @@ export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
height: '124px',
cursor: 'pointer',
padding: '16px',
boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)',
boxShadow: 'var(--affine-shadow)',
borderRadius: '12px',
transition: 'all .1s',
background: 'var(--affine-white-80)',
...displayFlex('flex-start', 'flex-start'),
color: 'var(--affine-text-secondary-color)',
@ -57,7 +58,7 @@ export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
background: 'var(--affine-hover-color)',
color: 'var(--affine-text-primary-color)',
'.add-icon': {
borderColor: 'var(--affine-primary-color)',
borderColor: 'var(--affine-white-color)',
color: 'var(--affine-primary-color)',
},
},
@ -103,11 +104,13 @@ export const StyleWorkspaceAdd = styled('div')(() => {
width: '58px',
height: '58px',
borderRadius: '100%',
background: '#f4f5fa',
background: 'var(--affine-white-80)',
border: '1.5px dashed #f4f5fa',
transition: 'background .2s',
fontSize: '24px',
...displayFlex('center', 'center'),
borderColor: 'var(--affine-white-color)',
color: 'var(--affine-primary-color)',
};
});
export const StyledModalHeader = styled('div')(() => {

1
packages/component/src/components/workspace-card/index.tsx
View File

@ -123,7 +123,6 @@ export const WorkspaceCard: FC<WorkspaceCardProps> = ({
</StyleWorkspaceInfo>
<StyledSettingLink
className="setting-entry"
hoverBackground="#fff"
onClick={e => {
e.stopPropagation();
onSettingClick(workspace);

10
packages/component/src/components/workspace-card/styles.ts
View File

@ -42,13 +42,13 @@ export const StyledCard = styled('div')<{
height: '124px',
cursor: 'pointer',
padding: '16px',
boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)',
boxShadow: 'var(--affine-shadow)',
borderRadius: '12px',
border: `1px solid ${borderColor}`,
...displayFlex('flex-start', 'flex-start'),
marginBottom: '24px',
transition: 'background .2s',
background: 'var(--affine-background-primary-color)',
background: 'var(--affine-white-80)',
position: 'relative',
':hover': {
background: 'var(--affine-hover-color)',
@ -77,18 +77,18 @@ export const StyledModalHeader = styled('div')(() => {
};
});
export const StyledSettingLink = styled(IconButton)(({ theme }) => {
export const StyledSettingLink = styled(IconButton)(() => {
return {
position: 'absolute',
right: '6px',
bottom: '6px',
opacity: 0,
borderRadius: '4px',
color: 'var(--affine-background-primary-color)',
color: 'var(--affine-primary-color)',
pointerEvents: 'none',
transition: 'all .15s',
':hover': {
background: 'var(--affine-background-primary-color)',
background: 'var(--affine-hover-color)',
},
};
});

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

@ -14,7 +14,7 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)<{
padding: '8px 4px',
fontSize: '14px',
backgroundColor: 'var(--affine-white)',
boxShadow: 'var(--affine-popover-shadow)',
boxShadow: 'var(--affine-menu-shadow)',
};
});

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

@ -11,7 +11,8 @@ export const ModalWrapper = styled('div')<{
width,
height,
minHeight,
backgroundColor: 'var(--affine-white)',
backgroundColor: 'var(--affine-background-secondary-color)',
boxShadow: 'var(--affine-popover-shadow)',
borderRadius: '16px',
position: 'relative',
maxHeight: 'calc(100vh - 32px)',

2
packages/component/src/ui/toast/toast.ts
View File

@ -77,7 +77,7 @@ export const toast = (
margin: 10px 0 0 0;
color: var(--affine-white);
background: var(--affine-tooltip);
box-shadow: var(--affine-tooltip-shadow);
box-shadow: var(--affine-float-button-shadow);
border-radius: 10px;
transition: all 230ms cubic-bezier(0.21, 1.02, 0.73, 1);
opacity: 0;

7
packages/component/src/ui/tooltip/QuickSearch-tips.tsx
View File

@ -3,13 +3,12 @@ import type { TooltipProps } from '@mui/material';
import { css, displayFlex, styled } from '../../styles';
import { Popper, type PopperProps } from '../popper';
import StyledPopperContainer from '../shared/Container';
const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
const StyledTooltip = styled(StyledPopperContainer)(() => {
return {
width: '390px',
minHeight: '92px',
boxShadow: 'var(--affine-tooltip-shadow)',
padding: '12px',
backgroundColor: 'var(--affine-background-tertiary-color)',
backgroundColor: 'var(--affine-tertiary-color)',
transform: 'all 0.15s',
color: 'var(--affine-text-emphasis-color)',
...displayFlex('center', 'center'),
@ -20,7 +19,7 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
};
});
const StyledCircleContainer = styled('div')(({ theme }) => {
const StyledCircleContainer = styled('div')(() => {
return css`
position: relative;
content: '';

2
packages/component/src/ui/tooltip/Tooltip.tsx
View File

@ -6,7 +6,7 @@ import StyledPopperContainer from '../shared/Container';
const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
return {
maxWidth: '320px',
boxShadow: 'var(--affine-popover-shadow)',
boxShadow: 'var(--affine-float-button-shadow)',
padding: '4px 12px',
backgroundColor: 'var(--affine-tooltip)',
color: 'var(--affine-white)',

26
packages/theme/src/index.ts
View File

@ -28,12 +28,6 @@ const basicFontFamily =
'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';
export const baseTheme = {
// shadow
popoverShadow:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
modalShadow: '0px 4px 24px #161616',
tooltipShadow: '0px 0px 4px rgba(0, 0, 0, 0.14)',
// font
fontFamily: `Avenir Next, Poppins, ${basicFontFamily}`,
fontNumberFamily: `Roboto Mono, ${basicFontFamily}`,
@ -146,6 +140,13 @@ export const lightTheme = {
paletteShapeBlack: 'rgb(0, 0, 0)',
paletteShapeGrey: 'rgb(194, 194, 194)',
tooltip: '#424149',
menuShadow:
'0px 0px 12px rgba(66, 65, 73, 0.1), inset 0px 0px 0px 0.5px rgba(227, 227, 228, 1)',
shadow: '0px 0px 4px rgba(66, 65, 73, 0.1)',
popoverShadow:
'0px 0px 24px rgba(0, 0, 0, 0.2), 0px 0px 4px rgba(0, 0, 0, 0.6), inset 0px 0px 0px 1px rgba(227, 226, 228, 1)',
floatButtonShadow:
'0px 1px 16px rgba(0, 0, 0, 0.1), 0px 2px 3px rgba(0, 0, 0, 0.1)',
};
export const darkTheme = {
@ -153,8 +154,8 @@ export const darkTheme = {
themeMode: 'dark',
brandColor: 'rgb(84, 56, 255)',
primaryColor: 'rgba(106, 86, 229, 1)',
brandColor: 'rgba(156, 140, 255, 1)',
primaryColor: 'rgba(156, 140, 255, 1)',
secondaryColor: 'rgb(144, 150, 245)',
tertiaryColor: 'rgb(30, 30, 30)',
hoverColor: 'rgba(255, 255, 255, 0.1)',
@ -170,7 +171,7 @@ export const darkTheme = {
warningColor: 'rgb(255, 123, 77)',
errorColor: 'rgb(212, 140, 130)',
processingColor: 'rgb(195, 215, 255)',
textEmphasisColor: 'rgb(208, 205, 220)',
textEmphasisColor: 'rgba(156, 140, 255, 1)',
textPrimaryColor: 'rgb(234, 234, 234)',
textSecondaryColor: 'rgb(156, 156, 160)',
textDisableColor: 'rgb(119, 117, 125)',
@ -233,6 +234,13 @@ export const darkTheme = {
paletteShapeBlack: 'rgb(0, 0, 0)',
paletteShapeGrey: 'rgb(194, 194, 194)',
tooltip: '#EAEAEA',
menuShadow:
'0px 0px 12px rgba(0, 0, 0, 1), inset 0px 0px 0px 0.5px rgba(46, 46, 46, 1)',
shadow: '0px 0px 4px rgba(20, 20, 20, 1)',
popoverShadow:
'0px 0px 26px rgba(0, 0, 0, 0.8), 0px 0px 10px rgba(0, 0, 0, 1), inset 0px 0px 0px 1px rgba(46, 46, 46, 1)',
floatButtonShadow:
'0px 1px 16px rgba(0, 0, 0, 1), 0px 2px 3px rgba(0, 0, 0, 1)',
} satisfies Omit<AffineTheme, 'editorMode'>;
export const lightCssVariables = Object.entries(lightTheme).reduce(