admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Edit opacity from 0.8 to 0.5 and remove forBackdropFilter (#5291)

Browse Source 
Update for #4836 

- edit primary and secondary transparency opacities from 0.8 to 0.5
- remove forBackdropFilter from themes
- update components referencing transparency/primary and
transparency/secondary to have the following backdrop-filter: blur(12px)
saturate(200%) contrast(50%) brightness(130%)

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Joe S
2024-05-16 11:19:27 -04:00
committed by GitHub
parent a75eb0a569
commit 9bc9513845
14 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx
View File

@ -1,10 +1,10 @@
import styled from '@emotion/styled';
const StyledFieldTextAreaOverlay = styled.div`
align-items: center;
backdrop-filter: blur(8px);
background: ${({ theme }) => theme.background.transparent.secondary};
border-radius: ${({ theme }) => theme.border.radius.sm};
background: ${({ theme }) => theme.background.transparent.secondary};
backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
align-items: center;
display: flex;
height: 32px;
margin: -1px;

5
packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx
View File

@ -30,7 +30,10 @@ const StyledButton = styled.button<
>
>`
align-items: center;
backdrop-filter: ${({ applyBlur }) => (applyBlur ? 'blur(20px)' : 'none')};
backdrop-filter: ${({ applyBlur }) =>
applyBlur
? 'blur(12px) saturate(200%) contrast(50%) brightness(130%)'
: 'none'};
background: ${({ theme, isActive }) =>
isActive ? theme.background.transparent.medium : theme.background.primary};
border: ${({ focus, theme }) =>

1
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
View File

@ -14,6 +14,7 @@ const StyledHeader = styled.li`
font-weight: ${({ theme }) => theme.font.weight.medium};
border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
padding: ${({ theme }) => theme.spacing(1)};

5
packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
View File

@ -13,14 +13,13 @@ export const BACKGROUND_DARK = {
quaternary: GRAY_SCALE.gray70,
danger: COLOR.red80,
transparent: {
primary: RGBA(GRAY_SCALE.gray85, 0.8),
secondary: RGBA(GRAY_SCALE.gray80, 0.8),
primary: RGBA(GRAY_SCALE.gray85, 0.5),
secondary: RGBA(GRAY_SCALE.gray80, 0.5),
strong: RGBA(GRAY_SCALE.gray0, 0.14),
medium: RGBA(GRAY_SCALE.gray0, 0.1),
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%)`,

5
packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
View File

@ -13,14 +13,13 @@ export const BACKGROUND_LIGHT = {
quaternary: GRAY_SCALE.gray20,
danger: COLOR.red10,
transparent: {
primary: RGBA(GRAY_SCALE.gray0, 0.8),
secondary: RGBA(GRAY_SCALE.gray10, 0.8),
primary: RGBA(GRAY_SCALE.gray0, 0.5),
secondary: RGBA(GRAY_SCALE.gray10, 0.5),
strong: RGBA(GRAY_SCALE.gray100, 0.16),
medium: RGBA(GRAY_SCALE.gray100, 0.08),
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%)`,