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>
2024-05-16 11:19:27 -04:00
parent a75eb0a569
commit 9bc9513845
14 changed files with 29 additions and 31 deletions
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts
+++ b/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),
-    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%)`,
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts
+++ b/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),
-    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%)`,
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts
+++ b/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};
 `;
--- a/packages/twenty-front/src/modules/activities/table/components/CommentChip.tsx
+++ b/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};
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
+++ b/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};

--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/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};

--- a/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx
+++ b/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;
--- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx
+++ b/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 }) =>
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
+++ b/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)};

--- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
+++ b/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),
-    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%)`,
--- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
+++ b/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),
-    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%)`,
--- a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
+++ b/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),
-    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%)`,
--- a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
+++ b/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),
-    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%)`,
--- a/packages/twenty-ui/src/theme/constants/OverlayBackground.ts
+++ b/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};
 `;