Update backdrop-filter in OverlayBackground.ts (#4436)

* Update backdrop-filter in OverlayBackground.ts

* Fix backdrop-filter in OverlayBackground.ts

* Update opacity of menu item, to be constantly 0

* Fixes

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Danil
2024-03-15 17:19:27 +01:00
committed by GitHub
parent 638a12c571
commit 235e71ca02
11 changed files with 19 additions and 14 deletions

View File

@ -20,6 +20,7 @@ export const BACKGROUND_DARK = {
light: RGBA(GRAY_SCALE.gray0, 0.06),
lighter: RGBA(GRAY_SCALE.gray0, 0.03),
danger: RGBA(COLOR.red, 0.08),
forBackdropFilter: RGBA(GRAY_SCALE.gray80, 0.5),
},
overlay: RGBA(GRAY_SCALE.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

View File

@ -20,6 +20,7 @@ export const BACKGROUND_LIGHT = {
light: RGBA(GRAY_SCALE.gray100, 0.04),
lighter: RGBA(GRAY_SCALE.gray100, 0.02),
danger: RGBA(COLOR.red, 0.08),
forBackdropFilter: RGBA(GRAY_SCALE.gray10, 0.5),
},
overlay: RGBA(GRAY_SCALE.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

View File

@ -3,7 +3,7 @@ import { css } from '@emotion/react';
import { ThemeType } from './ThemeLight';
export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
backdrop-filter: blur(8px);
background: ${props.theme.background.transparent.secondary};
backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
background: ${props.theme.background.transparent.forBackdropFilter};
box-shadow: ${props.theme.boxShadow.strong};
`;