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 Flutter, but also what we're using for OUDS Flutter: Flutter, 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 Flutter.
These tokens cannot be used by developers using OUDS Flutter.
Semantic applications: Depends on raw primitive values.
Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS Flutter.
These tokens can be used by developers using OUDS Flutter.
Component applications: Depends on semantic applications.:
Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS Flutter.
These tokens can be used by developers using OUDS Flutter.
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.80
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-strong
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-strong
Study
[x] Study the architecture of these tokens, and define the technical details
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 Flutter, but also what we're using for OUDS Flutter: Flutter, Material 3, etc.
Reminder: there will be in the end 3 layers of tokens:
Tokens: Opacity
Raw primitive values
Semantic applications
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
Study
Technical details
TODO