Update Opacity and Apply backdrop-filter to all Transparent Colors #4836
Labels
Comments
Bonapara
added
good first issue
|
Hey @Bonapara. Can you assign this to me? :) |
|
Sure @jss475 , thanks for contributing! |
FelixMalfait
added a commit
that referenced
this issue
May 16, 2024
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 <[email protected]>
arnavsaxena17
pushed a commit
to arnavsaxena17/twenty
that referenced
this issue
Oct 6, 2024
) Update for twentyhq#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 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Current Behavior
We have 3 transparent colors in the theme. We should only have:
Transparent/PrimaryandTransparent/Secondary.Desired Behavior
The plan is to switch the opacity from 0.8 to 0.5 on
Transparent/PrimaryandTransparent/Secondary.This should allow us to remove
forBackdropFilter: RGBA(GRAY_SCALE.gray10, 0.5)from the theme.We need to ensure that
backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);applies to all elements/components usingtransparent/primaryortransparent/secondary. Specifically, this parameter needs to be updated on the 'Floating icon button' and All menus (That should have these properties = blur + transparent/secondary).Floating icon button:
Menus:
Please verify if any other elements use Transparent/Primary and Transparent/Secondary to apply the background filter to them. Avoid referring to Figma, as the blur effect differs there.
The text was updated successfully, but these errors were encountered: