Bloom component

[nadonomy]

Component name

Bloom

Figma link

Figma link

# Design phase
- [ ] Add bloom Web, iOS & Android variant drafts to Compound Figma documents
- [ ] Create new tokens for <component name>
- [ ] Release bloom styles
- [ ] Review bloom web implementation & publish in shared Figma library  
- [ ] Review bloom mobile implementation & publish in shared Figma library  

# Development phase
- [ ] Implement bloom on Web
- [ ] https://github.com/vector-im/element-x-android/issues/1217
- [x] Implement bloom on iOS

[nadonomy]

Figure out how we implement the blooms, rough plan of attack:

• Deep dive into Apple's vibrancy implementation using their Sketch reference files (the blend modes are more accomplished than the Figma ones)
• R&D to find a set of blur/blending values which work well with a range of avatars, avoiding dark muddy greys
• Ideally limit to a handful of draws for performance
• Only use blend modes well supported on the web, for cross-platform consistency

[nadonomy]

The latest, with regards to the Element X launch is:

• Design: We have a set of working layer styles and properties which work OK enough in Figma, but would benefit from finessing: https://www.figma.com/file/iIjwDl9HjaaF1vlDU96h8K/INBOX-%C2%B7-Compound-iOS%2FAndroid-Components?type=design&node-id=566%3A13072&mode=design&t=3jjHkO0w4U4BmVQX-1
• Android: We have a working implementation in Android (h/t @jmartinesp). Dev time to finish line pending Element X launch planning.
• iOS: We don't have a working implementation in iOS, but @pixlwave's previous R&D revealed it should be trivial to implement. Dev time pending Element X launch planning.

[nadonomy]

@janogarcia to finalise the exact values we want in Figma, limiting to 3ish layers & CSS layer styles for cross-platform consistency.