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

fix: theme color (#2124)

Browse Source
This commit is contained in:
JimmFly 2023-04-26 00:37:22 +08:00 committed by GitHub
parent a807647639
commit 1c41731b4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx
View File

@ -191,7 +191,7 @@ export const GeneralPanel: React.FC<PanelProps> = ({
{isOwner ? (
<>
<Button
type="danger"
type="warning"
shape="circle"
style={{ borderRadius: '40px' }}
data-testid="delete-workspace-button"
@ -213,7 +213,7 @@ export const GeneralPanel: React.FC<PanelProps> = ({
) : (
<>
<Button
type="danger"
type="warning"
shape="circle"
onClick={() => {
setShowLeave(true);

6
apps/web/src/components/pure/help-island/style.ts
View File

@ -12,7 +12,9 @@ export const StyledIsland = styled('div')<{
: 'unset',
padding: '0 4px 44px',
borderRadius: '10px',
backgroundColor: 'var(--affine-background-primary-color)',
background: spread
? 'var(--affine-background-overlay-panel-color)'
: 'transparent',
':hover': {
boxShadow:
'4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)',
@ -38,7 +40,6 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
...displayFlex('center', 'center'),
cursor: 'pointer',
fontSize: '24px',
backgroundColor: 'var(--affine-background-primary-color)',
borderRadius: '5px',
width: '36px',
height: '36px',
@ -62,7 +63,6 @@ export const StyledTriggerWrapper = styled('div')(({ theme }) => {
width: '36px',
height: '36px',
cursor: 'pointer',
backgroundColor: 'var(--affine-background-primary-color)',
color: 'var(--affine-icon-color)',
borderRadius: '5px',
fontSize: '24px',

2
packages/component/src/components/changeLog/index.css.ts
View File

@ -91,7 +91,7 @@ export const changeLogSlideOutStyle = style({
export const linkStyle = style({
flexGrow: 1,
textAlign: 'left',
color: 'inherit',
color: 'var(--affine-text-emphasis-color)',
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',

58
packages/component/src/styles/theme.ts
View File

@ -63,10 +63,10 @@ export const lightTheme = {
tertiaryColor: 'rgb(243, 240, 255)',
primaryColor: 'rgb(84, 56, 255)',
secondaryColor: 'rgb(125, 145, 255)',
backgroundSuccessColor: 'rgb(255, 255, 255)',
backgroundErrorColor: 'rgba(255, 255, 255, 0.2)',
backgroundProcessingColor: 'rgb(255, 255, 255)',
backgroundWarningColor: 'rgb(255, 255, 255)',
backgroundSuccessColor: 'rgba(231, 250, 243, 1)',
backgroundErrorColor: 'rgba(253, 236, 235, 1)',
backgroundProcessingColor: 'rgba(233, 241, 255, 1)',
backgroundWarningColor: 'rgba(255, 239, 233, 1)',
backgroundPrimaryColor: 'rgb(255, 255, 255)',
backgroundOverlayPanelColor: 'rgb(251, 251, 252)',
backgroundSecondaryColor: 'rgb(251, 250, 252)',
@ -104,16 +104,16 @@ export const lightTheme = {
white80: 'rgba(255, 255, 255, 0.8)',
white90: 'rgba(255, 255, 255, 0.9)',
white: 'rgb(255, 255, 255)',
tagWhite: 'rgb(245, 245, 245)',
tagGray: 'rgb(227, 226, 224)',
tagRed: 'rgb(255, 225, 225)',
tagOrange: 'rgb(255, 234, 202)',
tagYellow: 'rgb(255, 244, 216)',
tagGreen: 'rgb(223, 244, 232)',
tagTeal: 'rgb(223, 244, 243)',
tagBlue: 'rgb(225, 239, 255)',
tagPurple: 'rgb(243, 240, 255)',
tagPink: 'rgb(252, 232, 255)',
tagWhite: 'rgba(245, 245, 245, 1)',
tagGray: 'rgba(227, 226, 224, 1)',
tagRed: 'rgba(255, 225, 225, 1)',
tagOrange: 'rgba(255, 233, 201, 1)',
tagYellow: 'rgba(255, 243, 215, 1)',
tagGreen: 'rgba(222, 244, 231, 1)',
tagTeal: 'rgba(222, 244, 243, 1)',
tagBlue: 'rgba(225, 238, 255, 1)',
tagPurple: 'rgba(243, 240, 255, 1)',
tagPink: 'rgba(251, 231, 255, 1)',
paletteLineYellow: 'rgb(255, 232, 56)',
paletteLineOrange: 'rgb(255, 175, 56)',
paletteLineTangerine: 'rgb(255, 99, 31)',
@ -147,7 +147,7 @@ export const darkTheme = {
themeMode: 'dark',
brandColor: 'rgb(84, 56, 255)',
primaryColor: 'rgb(118, 95, 254)',
primaryColor: 'rgba(106, 86, 229, 1)',
secondaryColor: 'rgb(144, 150, 245)',
tertiaryColor: 'rgb(30, 30, 30)',
hoverColor: 'rgba(255, 255, 255, 0.1)',
@ -183,24 +183,24 @@ export const darkTheme = {
white: 'rgb(0, 0, 0)',
backgroundCodeBlock: 'rgb(41, 44, 51)',
backgroundTertiaryColor: 'rgb(30, 30, 30)',
backgroundProcessingColor: 'rgb(255, 255, 255)',
backgroundErrorColor: 'rgb(255, 255, 255)',
backgroundWarningColor: 'rgb(255, 255, 255)',
backgroundSuccessColor: 'rgb(255, 255, 255)',
backgroundProcessingColor: 'rgba(20, 22, 26, 1)',
backgroundErrorColor: 'rgba(21, 14, 13, 1)',
backgroundWarningColor: 'rgba(26, 10, 3, 1))',
backgroundSuccessColor: 'rgba(8, 21, 18, 1)',
backgroundPrimaryColor: 'rgb(20, 20, 20)',
backgroundSecondaryColor: 'rgb(32, 32, 32)',
backgroundModalColor: 'rgba(0, 0, 0, 0.8)',
backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
tagBlue: 'rgb(10, 84, 170)',
tagGreen: 'rgb(55, 135, 79)',
tagTeal: 'rgb(33, 145, 138)',
tagWhite: 'rgb(84, 84, 84)',
tagPurple: 'rgb(59, 38, 141)',
tagRed: 'rgb(139, 63, 63)',
tagPink: 'rgb(194, 132, 132)',
tagYellow: 'rgb(187, 165, 61)',
tagOrange: 'rgb(231, 161, 58)',
tagGray: 'rgb(41, 41, 41)',
tagBlue: 'rgba(8, 67, 136, 1)',
tagGreen: 'rgba(44, 108, 63, 1)',
tagTeal: 'rgba(26, 115, 110, 1)',
tagWhite: 'rgba(67, 67, 67, 1)',
tagPurple: 'rgba(47, 30, 113, 1)',
tagRed: 'rgba(111, 50, 50, 1)',
tagPink: 'rgba(155, 106, 106, 1)',
tagYellow: 'rgba(150, 132, 49, 1)',
tagOrange: 'rgba(185, 129, 46, 1)',
tagGray: 'rgba(41, 41, 41, 1)',
paletteLineYellow: 'rgb(255, 232, 56)',
paletteLineOrange: 'rgb(255, 175, 56)',
paletteLineTangerine: 'rgb(255, 99, 31)',

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

@ -73,13 +73,13 @@ export const getButtonColors = (
case 'warning':
return {
background: 'var(--affine-background-warning-color)',
color: 'var(--affine-background-warning-color)',
color: 'var(--affine-warning-color)',
borderColor: 'var(--affine-background-warning-color)',
'.affine-button-icon': {
color: 'var(--affine-background-warning-color)',
color: 'var(--affine-warning-color)',
},
':hover': {
borderColor: 'var(--affine-background-warning-color)',
borderColor: 'var(--affine-warning-color)',
color: extend?.hoverColor,
background: extend?.hoverBackground,
...extend?.hoverStyle,