Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Edit opacity from 0.8 to 0.5 and remove forBackdropFilter #5291

Merged
merged 7 commits into from
May 16, 2024
Merged

Edit opacity from 0.8 to 0.5 and remove forBackdropFilter #5291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9129ba7
Edit opacity from 0.8 to 0.5 and remove forBackdropFilter
jss475 May 4, 2024
4c00522
Update chrome-extension background light theme for correct transparen…
jss475 May 4, 2024
2425a34
Edit ObjectFilterDropdownFilterSelect to have transparent background,…
jss475 May 6, 2024
51c083f
Update menu header to have bottom border and make backgrounds transpa…
jss475 May 7, 2024
20525c7
Merge branch 'main' into fix/4836
jss475 May 7, 2024
4a6c8a7
Merge branch 'main' into fix/4836
jss475 May 8, 2024
6fc37c7
Merge branch 'main' into fix/4836
FelixMalfait May 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%)`,
Expand Down
5 changes: 2 additions & 3 deletions packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%)`,
Expand Down
2 changes: 1 addition & 1 deletion packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
`;
2 changes: 1 addition & 1 deletion packages/twenty-front/src/modules/activities/table/components/CommentChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down
6 changes: 3 additions & 3 deletions ...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand All @@ -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};

Expand Down
6 changes: 3 additions & 3 deletions ...nt/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};

Expand Down
6 changes: 3 additions & 3 deletions packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
5 changes: 4 additions & 1 deletion packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) =>
Expand Down
1 change: 1 addition & 0 deletions packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)};

Expand Down
5 changes: 2 additions & 3 deletions packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%)`,
Expand Down
5 changes: 2 additions & 3 deletions packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%)`,
Expand Down
5 changes: 2 additions & 3 deletions packages/twenty-ui/src/theme/constants/BackgroundDark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%)`,
Expand Down
5 changes: 2 additions & 3 deletions packages/twenty-ui/src/theme/constants/BackgroundLight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%)`,
Expand Down
2 changes: 1 addition & 1 deletion packages/twenty-ui/src/theme/constants/OverlayBackground.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
`;
Loading