Orange-OpenSource / ouds-ios

A SwiftUI components library with code examples for Orange Unified Design System
https://ios.unified-design-system.orange.com/
MIT License
6 stars 1 forks source link

[Tokens] Improve `Multiple`-based objects for `tokenator` values integration #279

Open pylapp opened 9 hours ago

pylapp commented 9 hours ago

Context

Today, the Figma kit defined by the design team exposed plenty of tokens, and some of these tokens are quite particular. Indeed, we may have tokens for which the values rely on the color scheme (dark or light modes) or the size class (compact or regular). However, they are until now considered as one token, but quite dynamic with multiple values. To prevent users to have to deal with lots of tokens declinations, we choose to define Multiple* objects so as to contain pair of values ; depending to the token it will contain values for compact and regular size classes or light and dark color schemes. Thus, we will be able through the themes to expose one object with the two values available, as a "multiple token"/. The Android team uses also the same logic.

However, the Figma tool is not able to manage such configurations (and also composite values), so the tokenator converting its JSON to Swift won't be able to build such Multiple* objects. So the solution we agreed with @julien-deramond is the following one:

Given a  Figma token name "foo" having two possible values depending to the size class
- the tokenator will generate *fooCompact* for compact size class
- the tokenator will generate *fooRegular* for regular size class

Given a Figma token name "bar" having two possible values depending to the color scheme
- the tokenator will generate *barLight* for light color scheme
- the tokenator will generate *barDark* for dark color scheme

Then the iOS team will manualy define the `Multiple*` objects in a seperated file, with these steps: 
- define a "foo" iOS token with *fooCompact* token as value for compact size class and "fooRegular" token as value for regular size class
- define a "bar" iOS token with *barLight* token as value for light color scheme and "barDark" token as value for dark color scheme

Thus, having Multiple* objects will help us to test the tokens (i.e. ensure values are the expected one depending to configuration, mainly for InverseTheme) and also provide one "fake" token with the two possibles values, through the theme.

Today we have tokens depending to size class:

We have also tokens depending to color schemes:

Note this is the same logic for composite tokens where the notion of "composite" does not exist in Figma, but invented by the design team, so the ¨tokenator* cannot provide the Swift cod ebecause the JSON it processes doe snot contin such objects. Composites are defined manualy based on generated tokens.

Definition of Ready

Definition of Done (iOS team only)

draft.zip

pylapp commented 9 hours ago

on hold until the tokenator team is ready :)