phcode-dev / phoenix

Phoenix is a modern open-source Code Editor for the web, built for the browser.
https://phcode.io
GNU Affero General Public License v3.0
1.63k stars 115 forks source link

[feat] Frosted Glass theme #968

Open abose opened 1 year ago

abose commented 1 year ago

Describe the problem

image

Describe the solution you'd like

Sample: background-color: rgba(255,255,255,0.5); // for light background-color: rgba(0,0,0,0.5);// for dark backdrop-filter: blur(4px);

Alternatives considered

We need to evaluate if this is the right UX for everyone.

Additional context

Credits for demo @ScanuNicco

abose commented 1 year ago

Primary change: https://github.com/phcode-dev/phoenix/blob/main/src/styles/brackets_patterns_override.less#L188 add the following line:

background-color: rgba(255,255,255,0.5);
.dark & {
    background-color: rgba(0,0,0,0.5);
}
backdrop-filter: blur(5px);

But we need to take care of the following before merging to core:

  1. Submenus and main menus of navbar
  2. sub and main menus or editor and all other menus
  3. themability and other break validation
ScanuNicco commented 1 year ago

Yep that's what I did

abose commented 7 months ago

General considerations:

  1. readability and focus: Blurred backgroud is relavant if the user wants to view the code while making some menu decisions. Else it will impact readabilit of the menu. Its like reading something off glass which can be hard.
  2. Aesthetic Preference: While i like the look of this, it may be up to personal preferences.
  3. Consistency with UI Design: Phoenix design language doesnt use transparent elements. We will have to have a consistant design language to integate aero elements into the ui
  4. Accessibility: This is a major factor:
    1. some users with visual impairments might find a blurred background distracting or harder to interpret.
    2. High contrast and clear separation without blurring might be more accessible to some users.

conclusion

  1. Based on the brackets design system and ux guidelines for blurred components above, the defaut themes are incompatible with aero elements. We will not be adding transparent items to the default themes for accessibility(visually challenged users) and consitency.
  2. Some users may prefer the design aesthetics of aero glass elements, for which, we need to create a seperate aero theme for design consitency.

Next steps

  1. Move this out of scope of native builds
  2. Create a seperate frosted glass theme, changing the title of this issue to frosted glass theme.