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.

Sign up for GitHub

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

Jump to bottom

Tokens: Grid #40

Closed
1 task done
julien-deramond opened this issue Jul 10, 2024 · 7 comments · Fixed by #98
Closed
1 task done

Tokens: Grid #40

julien-deramond opened this issue Jul 10, 2024 · 7 comments · Fixed by #98
Assignees
@pylapp
Labels
🆕 feature Related to features 📀 token Related to tokens (raws, semantics or components)

Comments

@julien-deramond
Copy link
Member

julien-deramond commented Jul 10, 2024 •
edited by pylapp
Loading

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

  • 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.
@julien-deramond julien-deramond added 🆕 feature Related to features ⚠️ on hold Not blocked but should not be processed yet labels Jul 10, 2024
@pylapp

This comment was marked as outdated.

Sign in to view
@pylapp pylapp assigned pylapp and unassigned pylapp Aug 4, 2024
@pylapp

This comment was marked as duplicate.

Sign in to view
@pylapp pylapp added 💥 blocking Issue can go further and is blocked by something and removed ⚠️ on hold Not blocked but should not be processed yet labels Aug 6, 2024
@pylapp pylapp self-assigned this Aug 6, 2024
@pylapp

This comment was marked as outdated.

Sign in to view
pylapp added a commit that referenced this issue Aug 8, 2024
@pylapp
refactor: raw and semantic tokens for grids (#40)
2a877f8 
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Aug 8, 2024
@pylapp
refactor: raw and semantic tokens for grids (#40)
8a29bd1 
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Aug 8, 2024
@pylapp
refactor: raw and semantic tokens for grids (#40)
bfd11d8 
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@pylapp
Copy link
Member

pylapp commented Aug 21, 2024

FYI first version delivered with commit 6678329 and released with version 0.1.0

@julien-deramond julien-deramond removed the 💥 blocking Issue can go further and is blocked by something label Sep 12, 2024
@pylapp
Copy link
Member

pylapp commented Sep 12, 2024 •
edited
Loading

Things to to to complete the evolutions:

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

pylapp added a commit that referenced this issue Sep 12, 2024
@pylapp
refactor: raw and semantic grid tokens (#40)
0b1ff9a 
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Sep 13, 2024
@pylapp
feat: add grid raw token for min width and max width (#40)
fd33681 
- Add new raw tokens for grid (min and max width)
- Update naming of grid raw tokens unit tests

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@pylapp pylapp linked a pull request Sep 13, 2024 that will close this issue
[#40] Add and update grid tokens #98
Merged
pylapp added a commit that referenced this issue Sep 13, 2024
@pylapp
feat: add and update grid tokens (#40) (#98)
28a4f4d 
- Add grid raw tokens for min width and max width
- Update grid semantic tokens naming
- Update grid raw tokens unit tests naming (no more use of word "IOS")
- Update changelog (some quotes to add)

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@pylapp
Copy link
Member

pylapp commented Sep 18, 2024

📣 New TestFlight ALPHA upload 🚀

  • Display name: OUDS Showcase ALPHA (78, 40, 9, 32, 106, 94, 87, 58, 89)
  • Version: 0.2.0
  • Build number: 1726677063
  • Build tag: fcb55ec
  • Build type: ALPHA
  • Build details (GitHub):78, 40, 9, 32, 106, 94, 87, 58, 89

This is an automated message sent with Fastlane from our CI/CD pipeline 🤘

pylapp added a commit that referenced this issue Sep 19, 2024
@pylapp @ludovic35 @julien-deramond
Version 0.2.0 (#113)
98640b4 
Released of version 0.2.0
See below the full CHANGELOG details.

Added:
- [Tests] Add UI regression tests using snapshot comparisons with *swift-snapshot-testing* tool ([#78](#78))
- [DemoApp] Display fake components for elevation rendering tests
- [Library] A theme can now override the custom font family
- [Tests] Add more unit tests for theme overriding and raw tokens controls
- [Library] Add and update raw and semantic grid tokens ([#40](#40))
- [Library] Manage regular and compact layouts for sizing and spacing tokens
- [Library] "Box shadow 0" has been defined and "elevation drag" changed
- [Doc] Create the basics of a documentation ([#9](#9))
- [Library] Add more semanttic and raw tokens for typography
- [Library] Add more semantic and raw tokens for typography, and SwiftUI API to apply them
- [Library] Computation of SwiftUI radius from Figma blur and spread values for elevation tokens
- [Library] Add elevation tokens ([#32](#32))

Changed:
- [Library] Split raws, semantics and components tokens definitions and also values, composites and type aliases
- [Showcase] Improve Fastlane alpha build notifications
- [Library] Do not store blur value in elevation semantic tokens
- [Library] Change type aliases for X and Y offsets of elevations tokens
- [Library] Update border semantic tokens values ([#106](#106))
- [Showcase] Add fake components for demo and tokens tests
- [Library] Remove spread value for elevation tokens
- [Library] Remove paragraph spacing tokens for typography
- [Library] Term "fluid" has been replaced by "adaptable" in spacing semantic tokens
- [Doc] Improve DocC documentation about tokens and views extensions
- [Doc] Add more details in release documentation
- [Library] Rename semantic token "opacityEmphasized" to "opacityStrong" ([#94](#94))
- [Library] Update value of opacity raw token "opacity800" from 0.88 to 0.80 ([#87](#87))
- [Tests] Add missing unit tests for opacity raw tokens
- [Library] "OUDSThemesCommons" product has been renamed to "OUDS"

Removed:
- [Library] Remove Z Index tokens for elevations ([#109](#109))
- [Library] Remove token "borderRadiusPill" and "borderRadiusCircle" ([#58](#58))
- [Library] "Emphasis" words have been replaced by "emphasized"
- [Library] "Box shadow" words have been removed in elevation semantic and raw tokens 

Fixed:
- [Library] Fix some typos in documentation ([#89](#89))

Acked-by: Ludovic Pinel <[email protected]>
Co-authored-by: Ludovic Pinel <[email protected]>
Co-authored-by: Pierre-Yves Lapersonne <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
@pylapp
Copy link
Member

pylapp commented Sep 19, 2024 •
edited
Loading

ℹ️ FYI available since version v0.2.0. Go to the discussion for more details 🚀

@pylapp pylapp added the 📀 token Related to tokens (raws, semantics or components) label Sep 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pylapp pylapp

Labels
🆕 feature Related to features 📀 token Related to tokens (raws, semantics or components)
Projects
[OUDS] Project
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[#40] Add and update grid tokens Orange-OpenSource/ouds-ios
2 participants
@pylapp @julien-deramond