phoenix
phoenix copied to clipboard
[feat] Frosted Glass theme
Describe the problem
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
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:
- Submenus and main menus of navbar
- sub and main menus or editor and all other menus
- themability and other break validation
Yep that's what I did
General considerations:
- 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.
- Aesthetic Preference: While i like the look of this, it may be up to personal preferences.
- 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
- Accessibility: This is a major factor:
- some users with visual impairments might find a blurred background distracting or harder to interpret.
- High contrast and clear separation without blurring might be more accessible to some users.
conclusion
- 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.
- 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
- Move this out of scope of native builds
- Create a seperate frosted glass theme, changing the title of this issue to frosted glass theme.