Tokens: Opacity

[julien-deramond]

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 iOS, but also what we're using for OUDS iOS: Swift UI, 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 iOS.
  • These tokens cannot be used by developers using OUDS iOS.
• Semantic applications: Depends on raw primitive values.
  • Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS iOS.
  • These tokens can be used by developers using OUDS iOS.
• Component applications: Depends on semantic applications.:
  • Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS iOS.
  • These tokens can be used by developers using OUDS iOS.

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

TODO

[pylapp]

For information, a first draft is available in the implementation of #33 due to the need to test the architect with available tokens.
Of course any improvements, fixes and implementations after the merge of #33 must be linked to this issue to keep consistency.

In addition, "shared" raw tokens defined in OUDSTheme module (common to all themes) are not customisable as is in OUDS iOS and should not supposed to be because they define raw types and true values for everything, like a kind of source of truth for everyone. However any theme can define its own raw tokens and assign them to semantic tokens. Of course raw tokens values can be defined thanks to generated Swift code, if we have any efficient and relevant tools suite.

What should be done for this issue:

• Review all tokens to check if some of them are missing or have bad values
• Add documentation
• Add unit tests
• Update demo app to display theses tokens (if we have guidelines)

[pylapp]

📣 New TestFlight ALPHA upload 🚀

• Display name: OUDS Showcase ALPHA (29)
• Version: 0.1.0
• Build number: 1722937903
• Build tag: e9bf86d
• Build type: ALPHA
• Build details (GitHub):29

This is an automated message sent with Fastlane from our CI/CD pipeline 🤘