geriux
commented
4 years ago (cc @geriux feel free to add, remove, or correct anything in this proposal that I may have butchered 😄 )
All good! I really like how the Notice component looks so I'm happy we are planning to add this for more components. 🎉
For the Notice component we ended up using prominent as the blurType we'll need to test if the suggested styling matches correctly.
When we recently implemented the Compact Notice component that we implemented recently, we used a third party library to emulate the translucent system background materials, which are used on iOS 13+. This was a quick and isolated experiment to gauge how the style would play with the editor on iOS, and by all indications it seems to have been a success, so I’d like to propose that we apply the same style to some other components. Note: this is an exhaustive list, but by no means a final one — let’s discuss if there are any additional places that I missed or places we’d like to exclude from the list.
(cc @geriux feel free to add, remove, or correct anything in this proposal that I may have butchered 😄 )
System Materials
Using the ReactNative Blur library, we have a number of customization options available, but it’s worth explaining what we are trying to do from a design perspective — we’re trying to mimic the system materials, which have 4 “thicknesses” (ultrathin, thin, regular, and thick) for each light and dark mode.
By default, the system materials contain a blur, color, and opacity value. The background blur is the same value across all of the materials, and opacity is the primary means of establishing weighting. Colors differ slightly for each material, and are mainly used as a way to fine-tune how the surface acts with the layers below it. There are cases where we’ll want to apply a different color, such as a solid white/black instead of the standard which is usually a slight tint so that it behaves maintains a more neutral effect.
Where should we apply?
Here is an exhaustive list, which we can add/remove from if necessary. I’ll split this into two groups, because mostly we will want to use the default settings, but there are cases that we’ll want to use a different background color than the standard color.
Note: we might need to adjust colors of elements that sit on top of these materials as a result, we have a colors audit project coming up in the near term that should resolve those issues. However, if anything we change here results in any glaring accessibility issues, let’s obviously fix those in the process.
Default Styling
Uses the standard style properties in both light and dark mode.
Alternative Color
Uses solid white in light mode, solid black in dark mode.
To-dos