Tokens: Opacity

[Tayebsed93]

As a Developer of the OUDS-Flutter Lib
I want to see the Opacity tokens
So that they are integrated in the lib from the tokenator workflow
And that they can be used in the demo app

As a designer, po or accessibility expert
I want to be able to review these tokens in the demo app
so that they can be tested in their usage context

⚠️ On hold until https://github.com/Orange-OpenSource/ouds-android/issues/37

---

Description

The aim of this issue is to study and implement the opacity tokens taking into account the cohesive multi-platform approach, the customization by libraries inheriting OUDS Android, but also what we're using for OUDS Android: Jetpack Compose, Material 3, etc.

• Define the possibilities
• Define the constraints
• Define the impacts
• Implement the tokens (with a future Style Dictionary usage in mind)

Reminder: there will be in the end 3 layers of tokens:

• Raw primitive values: Insertion of brand foundations.
• These tokens will be customizable by libraries inheriting OUDS Android.
• These tokens cannot be used by developers using OUDS Android.
• Semantic applications: Depends on raw primitive values.
• Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS Android.
• These tokens can be used by developers using OUDS Android.
• Component applications: Depends on semantic applications.:
• Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS Android.
• These tokens can be used by developers using OUDS Android.

Tokens: Opacity

Raw primitive values

Token name	Token value
opacity-0	0
opacity-100	0.04
opacity-200	0.08
opacity-300	0.16
opacity-400	0.24
opacity-500	0.32
opacity-600	0.48
opacity-700	0.64
opacity-800	0.88
opacity-900	1

Semantic applications

Token name	Token value
opacity-transparent	opacity-0
opacity-weaker	opacity-100
opacity-weak	opacity-300
opacity-medium	opacity-500
opacity-emphasis	opacity-700
opacity-opaque	opacity-900

Component applications

⚠️ This is just an example, it doesn't need to be implemented for now, it will be when the modals will be tackled

Token name	Token value
overlays-modal-backdrop-opacity	opacity-emphasis

Study

• Study the architecture of these tokens, and define the technical details

Technical details

• Add opacity raw primitive values in the "tokens-global-raw" module (common raw tokens)
• Add opacity semantic tokens in the OudsCustomTheme interface of the "theme-contract" module and specify the default value for each semantic coming from "tokens-global-raw" module