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 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: 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
[ ] 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 Flutter platform.
⚠️ On hold until https://github.com/Orange-OpenSource/ouds-flutter/issues/25 is resolved
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 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: Grid (Composite)
Raw primitive values
Width (mockup design)
Min width
Max width
Margin
Column gap
Column count
Semantic applications: Grid (Composite)
2xs
xs
sm
md
lg
xl
2xl
3xl
iOS: Extra compact
iOS: Compact
iOS: Regular
Android: Extra Compact
Android: Compact
Android: Medium
Study
Technical details
TODO