toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-02 14:22:55 +03:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 1C1E76924FAFDDE4
2 changed files with 67 additions and 36 deletions
Show Stats 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
width="352"
height="320"
@ -8,7 +13,7 @@ export const bgAFFiNERaw = `<svg
>
<g filter="url(#filter0_dddd_782_4147)">
<path
fill="currentColor"
fill="url(#believerAffineIconGradient)"
class="affine"
fill-rule="evenodd"
clip-rule="evenodd"
@ -16,30 +21,41 @@ export const bgAFFiNERaw = `<svg
/>
</g>
<defs>
<filter id="filter0_dddd_782_4147" x="0" y="0" width="351.209" height="319.144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<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="4" dy="3"/>
<feGaussianBlur stdDeviation="5.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.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_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="14" dy="14"/>
<feGaussianBlur stdDeviation="10"/>
<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" in2="effect1_dropShadow_782_4147" result="effect2_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="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>
<linearGradient
id="believerAffineIconGradient"
x1="0"
y1="0"
x2="352"
y2="320"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="${affineIconGradientStart}"/>
<stop offset="1" stop-color="${affineIconGradientStop}"/>
</linearGradient>
<filter id="filter0_dddd_782_4147" x="0" y="0" width="351.209" height="319.144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<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="4" dy="3"/>
<feGaussianBlur stdDeviation="5.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.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_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="14" dy="14"/>
<feGaussianBlur stdDeviation="10"/>
<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" in2="effect1_dropShadow_782_4147" result="effect2_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="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>
</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 { globalStyle, style } from '@vanilla-extract/css';
import { createVar, globalStyle, style } from '@vanilla-extract/css';
export const affineIconGradientStart = createVar();
export const affineIconGradientStop = createVar();
const colorSchemes = {
light: {
dot: '#E0E0E0',
affine: '#fff',
affine: {
start: '#fff',
stop: '#fff',
},
icon: 'rgba(0,0,0,0.1)',
},
dark: {
dot: '#333',
affine: cssVar('backgroundPrimaryColor'),
icon: 'rgba(255,255,255,0.1)',
dot: 'rgba(255,255,255,0.1)',
affine: {
start: '#8C8C8C',
stop: '#262626',
},
icon: 'transparent',
},
};
@ -22,6 +31,7 @@ export const card = style({
padding: '20px 24px',
border: `1px solid ${cssVar('borderColor')}`,
overflow: 'hidden',
background: cssVar('white'),
});
export const content = style({
@ -35,7 +45,6 @@ export const bg = style({
},
width: '100%',
height: '100%',
maxHeight: 320,
position: 'absolute',
top: 0,
left: 0,
@ -52,10 +61,10 @@ export const bg = style({
},
[`${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`]: {
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`, {
color: colorSchemes.light.affine,
vars: {
[affineIconGradientStart]: colorSchemes.light.affine.start,
[affineIconGradientStop]: colorSchemes.light.affine.stop,
},
position: 'absolute',
zIndex: 0,
});
globalStyle(`[data-theme='dark'].${bg} > svg.affine-svg`, {
color: colorSchemes.dark.affine,
globalStyle(`[data-theme='dark'] .${bg} > svg.affine-svg`, {
vars: {
[affineIconGradientStart]: colorSchemes.dark.affine.start,
[affineIconGradientStop]: colorSchemes.dark.affine.stop,
},
});
globalStyle(` .${bg} > svg.icons-svg`, {
color: colorSchemes.light.icon,