Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
6 tasks
pylapp opened this issue Nov 14, 2024 · 1 comment
Open
6 tasks
Assignees
Labels
⚠️ on hold Not blocked but should not be processed yet 📀 token Related to tokens (raws, semantics or components)

Comments

@pylapp
Copy link
Member

pylapp commented Nov 14, 2024

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:

  • MultipleSpaceTokens
  • MultipleFontLetterSpacingTokens
  • MultipleFontSizeTokens
  • MultipleSpaceTokens
  • MultipleTypographyTokens

We have also tokens depending to color schemes:

  • MultipleColorTokens
  • MultipleElevationTokens (because of box shadow)

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

  • For @julien-deramond / tokenator team, notify the iOS team they are ready to generate tokens suffixed by light, dark, compact, regular

Definition of Done (iOS team only)

  • Extract "multiple tokens" variables to dedicated files, just like for the composite tokens (e.g. OUDSTheme+ElevationMultipleSemanticTokens
  • Update the values given to these tokens for light, dark, regular, compact cases to point to the tokenator generated values
  • Update documentation and tests
  • Update the wiki to talk about the Multiple objects
  • In DocC documentation of protocols and enums of tokens, update main comments if needed to say wether or not the file is generated by the tokenator (i.e. TypographyCompositeSemanticTokens won't be uopdate by tokenator)

draft.zip

@pylapp pylapp added the 📀 token Related to tokens (raws, semantics or components) label Nov 14, 2024
@pylapp pylapp self-assigned this Nov 14, 2024
@pylapp pylapp added the ⚠️ on hold Not blocked but should not be processed yet label Nov 14, 2024
@pylapp
Copy link
Member Author

pylapp commented Nov 14, 2024

on hold until the tokenator team is ready :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
⚠️ on hold Not blocked but should not be processed yet 📀 token Related to tokens (raws, semantics or components)
Projects
Status: Triage
Development

No branches or pull requests

1 participant