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
4 stars 1 forks source link

Tokens: Dimension #36

Open julien-deramond opened 1 month ago

julien-deramond commented 1 month ago

Description

The aim of this issue is to study and implement the dimension 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.

Reminder: there will be in the end 3 layers of tokens:

Tokens: Dimension

Raw primitive values

Token name Token value
dimension-base 4
Token name Token value
dimension-0 {dimension-base}*0=0
dimension-25 or dimension-0.5-x {dimension-base}*0.5=2
dimension-50 or dimension-1-x {dimension-base}*1=4
dimension-75 or $dimension-1.5-x {dimension-base}*1.5=6
dimension-100 or dimension-2-x {dimension-base}*2=8
dimension-150 or dimension-3-x {dimension-base}*3=12
dimension-200 or dimension-4-x {dimension-base}*4=16
dimension-250 or dimension-5-x {dimension-base}*5=20
dimension-300 or dimension-6-x {dimension-base}*6=24
dimension-350 or dimension-7-x {dimension-base}*7=28
dimension-400 or dimension-8-x {dimension-base}*8=32
dimension-450 or dimension-9-x {dimension-base}*9=36
dimension-500 or dimension-10-x {dimension-base}*10=40
dimension-550 or dimension-11-x {dimension-base}*11=44
dimension-600 or dimension-12-x {dimension-base}*12=48
dimension-650 or dimension-13-x {dimension-base}*13=52
dimension-700 or dimension-14-x {dimension-base}*14=56
dimension-750 or dimension-15-x {dimension-base}*15=60
dimension-800 or dimension-16-x {dimension-base}*16=64
dimension-900 or dimension-18-x {dimension-base}*18=72
dimension-1000 or dimension-20-x {dimension-base}*20=80
dimension-1200 or dimension-24-x {dimension-base}*24=96
dimension-1400 or dimension-28-x {dimension-base}*28=112
dimension-1600 or dimension-32-x {dimension-base}*32=128
dimension-1800 or dimension-36-x {dimension-base}*36=144
dimension-2000 or dimension-40-x {dimension-base}*40=160
dimension-3000 or dimension-80-x {dimension-base}*80=320
dimension-4000 or dimension-120-x {dimension-base}*120=480
dimension-5000 or dimension-140-x {dimension-base}*140=560
dimension-6000 or dimension-160-x {dimension-base}*160=640
dimension-7000 or dimension-180-x {dimension-base}*180=720
dimension-9000 or dimension-220-x {dimension-base}*220=880
dimension-11000 or dimension-260-x {dimension-base}*260=1040

Semantic applications

Spacing

All spacing properties
Token name Token value
space-layout-fix-none dimension-0
space-layout-fix-smash dimension-25
space-layout-fix-shortest dimension-50
space-layout-fix-shorter dimension-100
space-layout-fix-short dimension-150
space-layout-fix-medium dimension-200
space-layout-fix-tall dimension-300
space-layout-fix-taller dimension-400
space-layout-fix-tallest dimension-500
space-layout-fix-spacious dimension-600
Token name Token value (col-xs-sm) Token value (col-md-lg) Token value (col-xl-2xl-3xl)
space-layout-fluid-none dimension-0 dimension-0 dimension-0
space-layout-fluid-layout-smash dimension-25 dimension-50 dimension-50
space-layout-fluid-layout-shortest dimension-50 dimension-100 dimension-100
space-layout-fluid-layout-shorter dimension-100 dimension-150 dimension-200
space-layout-fluid-layout-short dimension-150 dimension-200 dimension-300
space-layout-fluid-layout-medium dimension-200 dimension-300 dimension-400
space-layout-fluid-layout-tall dimension-300 dimension-400 dimension-500
space-layout-fluid-layout-taller dimension-400 dimension-500 dimension-600
space-layout-fluid-layout-tallest dimension-500 dimension-600 dimension-700
space-layout-fluid-layout-spacious dimension-600 dimension-700 dimension-800
Padding inline
Token name Token value
space-padding-inline-component-none dimension-0
space-padding-inline-component-shorter dimension-50
space-padding-inline-component-short dimension-100
space-padding-inline-component-medium dimension-200
space-padding-inline-component-tall dimension-300
space-padding-inline-component-taller dimension-400
Token name Token value
space-padding-inline-component-isIcon-none dimension-0
space-padding-inline-component-isIcon-shorter dimension-25
space-padding-inline-component-isIcon-short dimension-50
space-padding-inline-component-isIcon-medium dimension-75
space-padding-inline-component-isIcon-tall dimension-100
space-padding-inline-component-isIcon-taller dimension-200
Token name Token value
space-padding-inline-component-isArrow-none dimension-0
space-padding-inline-component-isArrow-shorter dimension-25
space-padding-inline-component-isArrow-short dimension-50
space-padding-inline-component-isArrow-medium dimension-75
space-padding-inline-component-isArrow-tall dimension-100
space-padding-inline-component-isArrow-taller dimension-200
Padding stack
Token name Token value
space-padding-block-component-none dimension-0
space-padding-block-component-shorter dimension-50
space-padding-block-component-short dimension-100
space-padding-block-component-medium dimension-200
space-padding-block-component-tall dimension-300
space-padding-block-component-taller dimension-400
Token name Token value
space-padding-block-component-isIcon-none dimension-0
space-padding-block-component-isIcon-shorter dimension-25
space-padding-block-component-isIcon-short dimension-50
space-padding-block-component-isIcon-medium dimension-75
space-padding-block-component-isIcon-tall dimension-100
space-padding-block-component-isIcon-taller dimension-200
Padding inset
Token name Token value
space-inset-component-none dimension-0
space-inset-component-smash dimension-25
space-inset-component-shortest dimension-50
space-inset-component-shorter dimension-75
space-inset-component-short dimension-100
space-inset-component-medium dimension-150
space-inset-component-tall dimension-200
space-inset-component-taller dimension-300
space-inset-component-tallest dimension-400
space-inset-component-spacious dimension-500
Gap inline
Token name Token value
space-column-gap-component-none dimension-0
space-column-gap-component-shorter dimension-50
space-column-gap-component-short dimension-100
space-column-gap-component-medium dimension-200
space-column-gap-component-tall dimension-300
space-column-gap-component-taller dimension-400
Token name Token value
space-column-gap-component-isIcon-none dimension-0
space-column-gap-component-isIcon-shorter dimension-25
space-column-gap-component-isIcon-short dimension-50
space-column-gap-component-isIcon-medium dimension-75
space-column-gap-component-isIcon-tall dimension-100
space-column-gap-component-isIcon-taller dimension-200
Token name Token value
space-column-gap-component-isArrow-none dimension-0
space-column-gap-component-isArrow-shorter dimension-25
space-column-gap-component-isArrow-short dimension-50
space-column-gap-component-isArrow-medium dimension-75
space-column-gap-component-isArrow-tall dimension-100
space-column-gap-component-isArrow-taller dimension-200
Gap stack
Token name Token value
space-row-gap-component-none dimension-0
space-row-gap-component-isIcon-shorter dimension-25
space-row-gap-component-isIcon-short dimension-50
space-row-gap-component-isIcon-medium dimension-75
space-row-gap-component-isIcon-tall dimension-100
space-row-gap-component-isIcon-taller dimension-200
Token name Token value
space-row-gap-component-isIcon-none dimension-0
space-row-gap-component-isIcon-shorter dimension-25
space-row-gap-component-isIcon-short dimension-50
space-row-gap-component-isIcon-medium dimension-75
space-row-gap-component-isIcon-tall dimension-100
space-row-gap-component-isIcon-taller dimension-200

Sizing

Width-height: Icon (decorative)
Token name Token value
size-width-height-icon-shortest dimension-200
size-width-height-icon-shorter dimension-300
size-width-height-icon-short dimension-400
size-width-height-icon-medium dimension-500
size-width-height-icon-tall dimension-600
size-width-height-icon-taller dimension-700
size-width-height-icon-tallest dimension-900
Width-height: Icon (component)
Token name Token value
size-width-height-icon-isLabel-small-short dimension-150
size-width-height-icon-isLabel-small-medium dimension-200
size-width-height-icon-isLabel-small-tall dimension-250
size-width-height-icon-isLabel-medium-short dimension-200
size-width-height-icon-isLabel-medium-medium dimension-250
size-width-height-icon-isLabel-medium-tall dimension-300
size-width-height-icon-isLabel-large-shorter dimension-250
size-width-height-icon-isLabel-large-short dimension-300
size-width-height-icon-isLabel-large-medium dimension-350
size-width-height-icon-isLabel-large-tall dimension-400
size-width-height-icon-isLabel-large-taller dimension-550
size-width-height-icon-isLabel-xLarge-short dimension-400
size-width-height-icon-isLabel-xLarge-medium dimension-500
size-width-height-icon-isLabel-xLarge-tall dimension-550
Width-height: Icon (typography)
Token name Token value (col-xs-sm) Token value (col-md-lg) Token value (col-xl-2xl-3xl)
size-width-height-icon-isHeading-small-short dimension-400 dimension-400 dimension-500
size-width-height-icon-isHeading-small-medium dimension-500 dimension-500 dimension-550
size-width-height-icon-isHeading-small-tall dimension-550 dimension-550 dimension-600
size-width-height-icon-isHeading-medium-short dimension-400 dimension-500 dimension-550
size-width-height-icon-isHeading-medium-medium dimension-500 dimension-550 dimension-600
size-width-height-icon-isHeading-medium-tall dimension-550 dimension-600 dimension-650
size-width-height-icon-isHeading-large-short dimension-500 dimension-550 dimension-600
size-width-height-icon-isHeading-large-medium dimension-550 dimension-600 dimension-650
size-width-height-icon-isHeading-large-tall dimension-600 dimension-650 dimension-700
size-width-height-icon-isHeading-Xlarge-short dimension-550 dimension-650 dimension-700
size-width-height-icon-isHeading-Xlarge-medium dimension-600 dimension-700 dimension-750
size-width-height-icon-isHeading-Xlarge-tall dimension-650 dimension-800 dimension-800
Token name Token value (col-xs-sm) Token value (col-md-lg) Token value (col-xl-2xl-3xl)
size-width-height-icon-isBody-small-short dimension-150 dimension-150 dimension-200
size-width-height-icon-isBody-small-medium dimension-200 dimension-200 dimension-250
size-width-height-icon-isBody-small-tall dimension-250 dimension-250 dimension-300
size-width-height-icon-isBody-medium-short dimension-200 dimension-200 dimension-250
size-width-height-icon-isBody-medium-medium dimension-250 dimension-250 dimension-300
size-width-height-icon-isBody-medium-tall dimension-300 dimension-300 dimension-350
size-width-height-icon-isBody-large-short dimension-250 dimension-250 dimension-400
size-width-height-icon-isBody-large-medium dimension-300 dimension-300 dimension-500
size-width-height-icon-isBody-large-tall dimension-350 dimension-350 dimension-550
Max width: Typography
Token name Token value (col-xs-sm) Token value (col-md-lg) Token value (col-xl-2xl-3xl)
size-max-width-typography-display-small dimension-9000 dimension-9000 dimension-11000
size-max-width-typography-display-medium dimension-9000 dimension-9000 dimension-11000
size-max-width-typography-display-large dimension-9000 dimension-9000 dimension-11000
Token name Token value (col-xs-sm) Token value (col-md-lg) Token value (col-xl-2xl-3xl)
size-max-width-typography-heading-small dimension-6000 dimension-6000 dimension-7000
size-max-width-typography-heading-medium dimension-9000 dimension-9000 dimension-11000
size-max-width-typography-heading-large dimension-9000 dimension-9000 dimension-11000
size-max-width-typography-heading-xLarge dimension-9000 dimension-9000 dimension-11000
Token name Token value (col-xs-sm) Token value (col-md-lg) Token value (col-xl-2xl-3xl)
size-max-width-typography-body-small dimension-6000 dimension-6000 dimension-6000
size-max-width-typography-body-medium dimension-6000 dimension-6000 dimension-7000
size-max-width-typography-body-large dimension-6000 dimension-6000 dimension-7000
Max width: Component
Token name Token value
space-max-width-component-short dimension-??? ⚠️
space-max-width-component-medium dimension-4000
space-max-width-component-tall dimension-??? ⚠️

Study

Technical details

TODO

ludovic35 commented 1 month ago

https://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/#:~:text=Points%20are%20different%20to%20pixels,down%2C%20or%204%20total%20pixels.

After discussion a pixel in figma is a point on iOS

pylapp commented 3 weeks ago

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:

pylapp commented 2 weeks ago

Some questions and comments to tackle for this issue:

pylapp commented 2 weeks ago

This feature is almost done, however a topic must be tackled about which seems to be a web paradigm. Indeed for some semantic tokens, we may have 3 types of values depending to something which seems to be a screen breakpoint or viewports (e.g. Token value (col-xs-sm) Token value (col-md-lg) Token value (col-xl-2xl-3xl))

What should we do on iOS side? We don't have such logics. Today for the semantic tokens with these three possible values only the one mentioned for case (col-xl-2xl-3xl) is applied, but we need confirmation before review and merge.

pylapp commented 2 weeks ago

In order to test our CI/CD pipeline velocity, avoid to have stale branches, have a fresh code base for documentation and test our production build (for a fake 0.0.0 version), a first version of the tokens has been merged as is, but the issue is not closed because there are some topics to deal about these dimensions tokens.

1) Viewports

For several tokens with have three types of values for cases col-xs-sm, col-md-lg and col-xl-2xl-3xl. These notions are very "web" and do not match anything in iOS side. Should we only consider the col-xl-2xl-3xl case?

cc @B3nz01d @mccart77 @ludovic35

pylapp commented 4 days ago

FYI first version delivered with commit 5799e669ec87124ec82f2bc0c08bbd4359ec28be and released before version 0.1.0