Tokens: Grid

[julien-deramond]

Description

The aim of this issue is to study and implement the grid 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: Grid (Composite)

Raw primitive values

Width (mockup design)

Token name	Token value
grid-width-100	320
grid-width-200	390
grid-width-300	480
grid-width-400	768
grid-width-500	1024
grid-width-600	1440
grid-width-700	1680
grid-width-800	1920

Min width

Token name	Token value
grid-min-width-100	1
grid-min-width-200	390
grid-min-width-300	480
grid-min-width-400	736
grid-min-width-500	1024
grid-min-width-600	1320
grid-min-width-700	1640
grid-min-width-800	1880
grid-min-width-ios-extra-compact	320
grid-min-width-ios-compact	390
grid-min-width-ios-regular	736
grid-min-width-android-extra-compact	320
grid-min-width-android-compact	390
grid-min-width-android-medium	600

Max width

Token name	Token value
grid-max-width-100	389
grid-max-width-200	479
grid-max-width-300	735
grid-max-width-400	1023
grid-max-width-500	1319
grid-max-width-600	1639
grid-max-width-650	1680
grid-max-width-700	1879
grid-max-width-800	1920
grid-max-width-ios-extra-compact	389
grid-max-width-ios-compact	852
grid-max-width-ios-regular	1336
grid-max-width-android-extra-compact	389
grid-max-width-android-compact	599
grid-max-width-android-medium	1200

Margin

Token name	Token value
grid-margin-100	{dimension-base}*4=16
grid-margin-300	{dimension-base}*6=24
grid-margin-400	{dimension-base}*7=28
grid-margin-500	{dimension-base}*8=32
grid-margin-600	{dimension-base}*9=36
grid-margin-700	{dimension-base}*10=40
grid-margin-900	{dimension-base}*12=48
grid-margin-1000	{dimension-base}*13=52
grid-margin-1100	{dimension-base}*14=56
grid-margin-1700	{dimension-base}*20=80
grid-margin-2500	{dimension-base}*28=112

Column gap

Token name	Token value
grid-column-gap-10	{dimension-base}*0.25=1
grid-column-gap-100	{dimension-base}*2=8
grid-column-gap-200	{dimension-base}*4=16
grid-column-gap-300	{dimension-base}*5=20
grid-column-gap-400	{dimension-base}*6=24
grid-column-gap-600	{dimension-base}*8=32
grid-column-gap-700	{dimension-base}*10=40

Column count

Token name	Token value
grid-column-count-100	1
grid-column-count-200	2
grid-column-count-400	4
grid-column-count-600	6
grid-column-count-800	8
grid-column-count-1000	10
grid-column-count-1200	12

Semantic applications: Grid (Composite)

2xs

Token name	Token value
grid-2xs-width	grid-width-100
grid-2xs-min-width	grid-min-width-100
grid-2xs-max-width	grid-max-width-100
grid-2xs-margin-default	grid-margin-100
grid-2xs-margin-compact	grid-margin-100
grid-2xs-column-gap-default	grid-column-gap-100
grid-2xs-column-gap-compact	grid-column-gap-100
grid-2xs-column-count	grid-column-count-400

xs

Token name	Token value
grid-xs-width	grid-width-200
grid-xs-min-width	grid-min-width-200
grid-xs-max-width	grid-max-width-200
grid-xs-margin-default	grid-margin-300
grid-xs-margin-compact	grid-margin-100
grid-xs-column-gap-default	grid-column-gap-200
grid-xs-column-gap-compact	grid-column-gap-200
grid-xs-column-count	grid-column-count-400

sm

Token name	Token value
grid-sm-width	grid-width-300
grid-sm-min-width	grid-min-width-300
grid-sm-max-width	grid-max-width-300
grid-sm-margin-default	grid-margin-400
grid-sm-margin-compact	grid-margin-100
grid-sm-column-gap-default	grid-column-gap-200
grid-sm-column-gap-compact	grid-column-gap-200
grid-sm-column-count	grid-column-count-400

md

Token name	Token value
grid-md-width	grid-width-400
grid-md-min-width	grid-min-width-400
grid-md-max-width	grid-max-width-400
grid-md-margin-default	grid-margin-500
grid-md-margin-compact	grid-margin-300
grid-md-column-gap-default	grid-column-gap-400
grid-md-column-gap-compact	grid-column-gap-200
grid-md-column-count	grid-column-count-600

lg

Token name	Token value
grid-lg-width	grid-width-500
grid-lg-min-width	grid-min-width-500
grid-lg-max-width	grid-max-width-500
grid-lg-margin-default	grid-margin-700
grid-lg-margin-compact	grid-margin-300
grid-lg-column-gap-default	grid-column-gap-400
grid-lg-column-gap-compact	grid-column-gap-200
grid-lg-column-count	grid-column-count-600

xl

Token name	Token value
grid-xl-width	grid-width-600
grid-xl-min-width	grid-min-width-600
grid-xl-max-width	grid-max-width-600
grid-xl-margin-default	grid-margin-1100
grid-xl-margin-compact	grid-margin-600
grid-xl-column-gap-default	grid-column-gap-600
grid-xl-column-gap-compact	grid-column-gap-300
grid-xl-column-count	grid-column-count-1200

2xl

Token name	Token value
grid-2xl-width	grid-width-700
grid-2xl-min-width	grid-min-width-700
grid-2xl-max-width-public-website	grid-max-width-650
grid-2xl-max-width-specific-tools	grid-max-width-700
grid-2xl-margin-default	grid-margin-1700
grid-2xl-margin-compact	grid-margin-600
grid-2xl-column-gap-default	grid-column-gap-600
grid-2xl-column-gap-compact	grid-column-gap-300
grid-2xl-column-count	grid-column-count-1200

3xl

Token name	Token value
grid-3xl-width	grid-width-800
grid-3xl-min-width	grid-min-width-800
grid-3xl-max-width	grid-max-width-800
grid-3xl-margin-default	grid-margin-2500
grid-3xl-margin-compact	grid-margin-1000
grid-3xl-column-gap-default	grid-column-gap-800
grid-3xl-column-gap-compact	grid-column-gap-300
grid-3xl-column-count	grid-column-count-1200

iOS: Extra compact

[!CAUTION] grid-ios-extra-compact-width and grid-ios-extra-compact-column-count are Figma internal tokens. Parser will remove these tokens.

Token name	Token value
grid-ios-extra-compact-width	grid-width-100
grid-ios-extra-compact-min-width	grid-min-width-ios-extra-compact
grid-ios-extra-compact-max-width	grid-max-width-ios-extra-compact
grid-ios-extra-compact-margin	grid-margin-100
grid-ios-extra-compact-column-gap	grid-column-gap-100
grid-ios-extra-compact-column-count	grid-column-count-400

iOS: Compact

[!CAUTION] grid-ios-compact-width and grid-ios-compact-column-count are Figma internal tokens. Parser will remove these tokens.

Token name	Token value
grid-ios-compact-width	grid-width-200
grid-ios-compact-min-width	grid-min-width-ios-compact
grid-ios-compact-max-width	grid-max-width-ios-compact
grid-ios-compact-margin	grid-margin-300
grid-ios-compact-column-gap	grid-column-gap-200
grid-ios-compact-column-count	grid-column-count-400

iOS: Regular

[!CAUTION] grid-ios-regular-width and grid-ios-regular-column-count are Figma internal tokens. Parser will remove these tokens.

Token name	Token value
grid-ios-regular-width	grid-width-400
grid-ios-regular-min-width	grid-min-width-ios-regular
grid-ios-regular-max-width	grid-max-width-ios-regular
grid-ios-regular-margin	grid-margin-500
grid-ios-regular-column-gap-default	grid-column-gap-400
grid-ios-regular-column-count	grid-column-count-600

Android: Extra Compact

[!CAUTION] grid-android-extra-compact-width and grid-android-extra-compact-column-count are Figma internal tokens. Parser will remove these tokens.

Token name	Token value
grid-android-extra-compact-width	grid-width-100
grid-android-extra-compact-min-width	grid-min-width-android-extra-compact
grid-android-extra-compact-max-width	grid-max-width-android-extra-compact
grid-android-extra-compact-margin	grid-margin-100
grid-android-extra-compact-column-gap	grid-column-gap-100
grid-android-extra-compact-column-count	grid-column-count-400

Android: Compact

[!CAUTION] grid-android-compact-width and grid-android-compact-column-count are Figma internal tokens. Parser will remove these tokens.

Token name	Token value
grid-android-compact-width	grid-width-200
grid-android-compact-min-width	grid-min-width-android-compact
grid-android-compact-max-width	grid-max-width-android-compact
grid-android-compact-margin	grid-margin-300
grid-android-compact-column-gap	grid-column-gap-200
grid-android-compact-column-count	grid-column-count-400

Android: Medium

[!CAUTION] grid-android-medium-width and grid-android-medium-column-count are Figma internal tokens. Parser will remove these tokens.

Token name	Token value
grid-android-medium-width	grid-width-400
grid-android-medium-min-width	grid-min-width-android-medium
grid-android-medium-max-width	grid-max-width-android-medium
grid-android-medium-margin	grid-margin-500
grid-android-medium-column-gap	grid-column-gap-400
grid-android-medium-column-count	grid-column-count-600

---

Study

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

Technical details

TODO

• A compact/compressed mode is currently planned for the web only and is not for the moment considered as necessary to the iOS platform.

[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 for raw tokens (order relationshios between values)
• Add unit tests for semantic tokens (theme overriding of each semantic token)
• Update demo app to display theses tokens (if we have guidelines)

[pylapp]

Some comments and questions to tackle:

• we agree in iOS side we do not manage any Android-related tokens? ;
• I see there are three groupes of tokens for iOS, and more groupes not for iOS and Android (e.g. md, lg, xl). Should we implement them? For which purposes?

[pylapp]

Some topics to deal with before starting implementation.

1) Non iOS tokens

Do we agree we will only implement tokens specified for iOS and not Android ones and those labeled 2xs, mg, ld etc. ?

2) Use of grids

How is supposed a grid to be used? Does it define only margins and gutters?

cc @B3nz01d @mccart77 @ludovic35

[pylapp]

FYI first version delivered with commit https://github.com/Orange-OpenSource/ouds-ios/commit/66783298919992c0e8354f4971d2df6be16b2c01 and released with version 0.1.0

[pylapp]

Things to to to complete the evolutions:

• [x] close comments here (if relevant)
• [x] add missing min width raw token
• [x] add missing max width raw token
• [x] update unit tests
• [x] update documentation if needed