luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(core): adjust believer card dark mode style (#7623)

Browse Source
This commit is contained in:
CatsJuice
2024-07-29 07:15:16 +00:00
parent 214f5fa94d
commit b9c0119d2c
2 changed files with 67 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/lifetime/assets.ts
View File

@@ -1,3 +1,8 @@
import {
affineIconGradientStart,
affineIconGradientStop,
} from './believer-card.css';
export const bgAFFiNERaw = `<svg export const bgAFFiNERaw = `<svg
width="352" width="352"
height="320" height="320"
@@ -8,7 +13,7 @@ export const bgAFFiNERaw = `<svg
> >
<g filter="url(#filter0_dddd_782_4147)"> <g filter="url(#filter0_dddd_782_4147)">
<path <path
fill="currentColor" fill="url(#believerAffineIconGradient)"
class="affine" class="affine"
fill-rule="evenodd" fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
@@ -16,30 +21,41 @@ export const bgAFFiNERaw = `<svg
/> />
</g> </g>
<defs> <defs>
<filter id="filter0_dddd_782_4147" x="0" y="0" width="351.209" height="319.144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <linearGradient
<feFlood flood-opacity="0" result="BackgroundImageFix"/> id="believerAffineIconGradient"
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> x1="0"
<feOffset dx="4" dy="3"/> y1="0"
<feGaussianBlur stdDeviation="5.5"/> x2="352"
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.1 0"/> y2="320"
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_782_4147"/> gradientUnits="userSpaceOnUse"
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> >
<feOffset dx="14" dy="14"/> <stop stop-color="${affineIconGradientStart}"/>
<feGaussianBlur stdDeviation="10"/> <stop offset="1" stop-color="${affineIconGradientStop}"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.09 0"/> </linearGradient>
<feBlend mode="normal" in2="effect1_dropShadow_782_4147" result="effect2_dropShadow_782_4147"/> <filter id="filter0_dddd_782_4147" x="0" y="0" width="351.209" height="319.144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feOffset dx="32" dy="30"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feGaussianBlur stdDeviation="13.5"/> <feOffset dx="4" dy="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.05 0"/> <feGaussianBlur stdDeviation="5.5"/>
<feBlend mode="normal" in2="effect2_dropShadow_782_4147" result="effect3_dropShadow_782_4147"/> <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.1 0"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_782_4147"/>
<feOffset dx="58" dy="54"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feGaussianBlur stdDeviation="16"/> <feOffset dx="14" dy="14"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.01 0"/> <feGaussianBlur stdDeviation="10"/>
<feBlend mode="normal" in2="effect3_dropShadow_782_4147" result="effect4_dropShadow_782_4147"/> <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.09 0"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_782_4147" result="shape"/> <feBlend mode="normal" in2="effect1_dropShadow_782_4147" result="effect2_dropShadow_782_4147"/>
</filter> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="32" dy="30"/>
<feGaussianBlur stdDeviation="13.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_782_4147" result="effect3_dropShadow_782_4147"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="58" dy="54"/>
<feGaussianBlur stdDeviation="16"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.01 0"/>
<feBlend mode="normal" in2="effect3_dropShadow_782_4147" result="effect4_dropShadow_782_4147"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_782_4147" result="shape"/>
</filter>
</defs> </defs>
</svg> </svg>
`; `;

37
packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/lifetime/believer-card.css.ts
View File

@@ -1,16 +1,25 @@
import { cssVar } from '@toeverything/theme'; import { cssVar } from '@toeverything/theme';
import { globalStyle, style } from '@vanilla-extract/css'; import { createVar, globalStyle, style } from '@vanilla-extract/css';
export const affineIconGradientStart = createVar();
export const affineIconGradientStop = createVar();
const colorSchemes = { const colorSchemes = {
light: { light: {
dot: '#E0E0E0', dot: '#E0E0E0',
affine: '#fff', affine: {
start: '#fff',
stop: '#fff',
},
icon: 'rgba(0,0,0,0.1)', icon: 'rgba(0,0,0,0.1)',
}, },
dark: { dark: {
dot: '#333', dot: 'rgba(255,255,255,0.1)',
affine: cssVar('backgroundPrimaryColor'), affine: {
icon: 'rgba(255,255,255,0.1)', start: '#8C8C8C',
stop: '#262626',
},
icon: 'transparent',
}, },
}; };
@@ -22,6 +31,7 @@ export const card = style({
padding: '20px 24px', padding: '20px 24px',
border: `1px solid ${cssVar('borderColor')}`, border: `1px solid ${cssVar('borderColor')}`,
overflow: 'hidden', overflow: 'hidden',
background: cssVar('white'),
}); });
export const content = style({ export const content = style({
@@ -35,7 +45,6 @@ export const bg = style({
}, },
width: '100%', width: '100%',
height: '100%', height: '100%',
maxHeight: 320,
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
@@ -52,10 +61,10 @@ export const bg = style({
}, },
[`${card}[data-type="1"] &::after`]: { [`${card}[data-type="1"] &::after`]: {
background: `linear-gradient(231deg, transparent 0%, ${cssVar('backgroundOverlayPanelColor')} 80%)`, background: `linear-gradient(231deg, transparent 0%, ${cssVar('white')} 80%)`,
}, },
[`${card}[data-type="2"] &::after`]: { [`${card}[data-type="2"] &::after`]: {
background: `linear-gradient(290deg, transparent 0%, ${cssVar('backgroundOverlayPanelColor')} 30%)`, background: `linear-gradient(290deg, transparent 0%, ${cssVar('white')} 40%)`,
}, },
}, },
@@ -71,12 +80,18 @@ export const bg = style({
}, },
}); });
globalStyle(`.${bg} > svg.affine-svg`, { globalStyle(`.${bg} > svg.affine-svg`, {
color: colorSchemes.light.affine, vars: {
[affineIconGradientStart]: colorSchemes.light.affine.start,
[affineIconGradientStop]: colorSchemes.light.affine.stop,
},
position: 'absolute', position: 'absolute',
zIndex: 0, zIndex: 0,
}); });
globalStyle(`[data-theme='dark'].${bg} > svg.affine-svg`, { globalStyle(`[data-theme='dark'] .${bg} > svg.affine-svg`, {
color: colorSchemes.dark.affine, vars: {
[affineIconGradientStart]: colorSchemes.dark.affine.start,
[affineIconGradientStop]: colorSchemes.dark.affine.stop,
},
}); });
globalStyle(` .${bg} > svg.icons-svg`, { globalStyle(` .${bg} > svg.icons-svg`, {
color: colorSchemes.light.icon, color: colorSchemes.light.icon,