Room badge colours

[JordanConnor]

Add tokens for badge background and text.

Semantic tokens:

(4) Background colors
    Light/color/bg/badge/accent = Light/color/alpha/green/300
    Dark/color/bg/badge/accent = Dark/color/alpha/green/300
    Light/color/bg/badge/info = Light/color/alpha/blue/300
    Dark/color/bg/badge/info = Dark/color/alpha/blue/300

(4) Text colors
    Light/color/text/badge/accent = Light/color/green/1100
    Dark/color/text/badge/accent = Dark/color/green/1100
    Light/color/text/badge/info = Light/color/blue/1100
    Dark/color/text/badge/info = Dark/color/blue/1100

• Updates to composer decoration and room badges element-web#29425
• Updates to composer decoration and room badges element-x-ios#3867
• Updates to composer decoration and room badges element-x-android#4356

[pixlwave]

Thanks for adding these Jordan 🙌

Two comments that seem easier to add here rathe than inline.

On the use of accent:
My understanding is that the green badges all represent success and not accent (at least in the current use cases of "encrypted" and "verified"). I'm basing this on a Figma Comment that we won't customise them for clients and that the icon in these components is currently using color/icon/success/primary.

On the use of badge:
This is purely an opinion as I'm hardly an expert in design systems but looking at how these fit into the existing token set it seems a bit weird to me. I would think we should either:

• Follow the icon and add color/text/success/primary and color/bg/success/subtle.
  • This seems like the right way to do semantic colours from what I understand.
  • Note: I just checked and both of those exist. If those aren't correct (or are used elsewhere) maybe it should be text/success/secondary and bg/success/subtle-hovered.
• Alternatively add an color/icon/badge/… so that it is consistently available on our 3 main text, icon and bg levels.

[JordanConnor]

Getting clarity from the design team, but I believe we now want to customise them for clients. If this is indeed correct, we may need to add icon/badge... to complete the set

[americanrefugee]

Some comments...

• I wanted to use alpha colors for the badge backgrounds, which is why they should be additional to the existing background colors
  • This way the badges will still look good on a subtle canvass, like we have for Room Info on iOS
• The design team has decided to use Accent for the encrypted states instead of Success so that they can be customized by the client
• I thought that the existing text color tokens (accent/info) didn't provide sufficient contrast against a tinted background, which is why I'm proposing new text color tokens specifically for badges
• So regardless of what we actually name them, there will be 3 colors used for each badge:
  • Bg (new, based on alpha 300)
  • Icon (existing semantic token, based on 900)
  • Text (new, based on 1100)

[pixlwave]

Ok nice, thanks for clarifying @americanrefugee, sorry if I'm questioning things too much 😇

Are you happy for me to generate the code based on this then @JordanConnor?

[JordanConnor]

LGTM :)

[pixlwave]

Nice, thanks both 🙏