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

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>

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts

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

packages/twenty-front/src/modules/activities/table/components/CommentChip.tsx

@@ -9,7 +9,7 @@ export type CommentChipProps = {
 
 const StyledChip = styled.div`
   align-items: center;
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
 
   background: ${({ theme }) => theme.background.transparent.primary};
   border-radius: ${({ theme }) => theme.border.radius.md};

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx

@@ -12,9 +12,9 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
 import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
 
 export const StyledInput = styled.input`
-  background: ${({ theme }) => theme.background.secondary};
+  background: transparent;
   border: none;
-  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  border-top: none;
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: 0;
   border-top-left-radius: ${({ theme }) => theme.border.radius.md};
@@ -23,7 +23,7 @@ export const StyledInput = styled.input`
   margin: 0;
   outline: none;
   padding: ${({ theme }) => theme.spacing(2)};
-  height: 20px;
+  height: 19px;
   font-family: inherit;
   font-size: ${({ theme }) => theme.font.size.sm};
 

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -15,16 +15,16 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { SORT_DIRECTIONS } from '../types/SortDirection';
 
 export const StyledInput = styled.input`
-  background: ${({ theme }) => theme.background.secondary};
+  background: transparent;
   border: none;
-  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  border-top: none;
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: 0;
   color: ${({ theme }) => theme.font.color.primary};
   margin: 0;
   outline: none;
   padding: ${({ theme }) => theme.spacing(2)};
-  height: 20px;
+  height: 19px;
   font-family: inherit;
   font-size: ${({ theme }) => theme.font.size.sm};
 

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

@@ -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;

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

@@ -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 }) =>

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

@@ -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)};
 

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

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

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

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

packages/twenty-ui/src/theme/constants/BackgroundDark.ts

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

packages/twenty-ui/src/theme/constants/BackgroundLight.ts

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

packages/twenty-ui/src/theme/constants/OverlayBackground.ts

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