Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Jump to bottom

Tokens: Dimension #36

Open
1 task
julien-deramond opened this issue Jul 9, 2024 · 3 comments · May be fixed by #68
Open
1 task

Tokens: Dimension #36

julien-deramond opened this issue Jul 9, 2024 · 3 comments · May be fixed by #68
Assignees
@paulinea
Labels
feature

Comments

@julien-deramond
Copy link
Member

julien-deramond commented Jul 9, 2024 •
edited by paulinea
Loading

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 Android, but also what we're using for OUDS Android: Jetpack Compose, 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 Android.
    • These tokens cannot be used by developers using OUDS Android.
  • Semantic applications: Depends on raw primitive values.
    • Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS Android.
    • These tokens can be used by developers using OUDS Android.
  • Component applications: Depends on semantic applications.:
    • Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS Android.
    • These tokens can be used by developers using OUDS Android.

Tokens: Dimension

Raw primitive values

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

Semantic applications

Spacing

Scaled
Token name Token value (extra-compact/compact) Token value (medium)
space-scaled-none dimension-0 dimension-0
space-scaled-smash dimension-25 dimension-50
space-scaled-shortest dimension-50 dimension-100
space-scaled-shorter dimension-100 dimension-150
space-scaled-short dimension-150 dimension-200
space-scaled-medium dimension-200 dimension-300
space-scaled-tall dimension-300 dimension-400
space-scaled-taller dimension-400 dimension-500
space-scaled-tallest dimension-500 dimension-600
space-scaled-spacious dimension-600 dimension-700
Fixed
Token name Token value
space-fixed-none dimension-0
space-fixed-smash dimension-25
space-fixed-shortest dimension-50
space-fixed-shorter dimension-100
space-fixed-short dimension-150
space-fixed-medium dimension-200
space-fixed-tall dimension-300
space-fixed-taller dimension-400
space-fixed-tallest dimension-500
space-fixed-spacious dimension-600
space-fixed-huge dimension-700
space-fixed-jumbo dimension-800
Padding inline
Token name Token value
space-padding-inline-none dimension-0
space-padding-inline-shorter dimension-20
space-padding-inline-short dimension-40
space-padding-inline-medium dimension-60
space-padding-inline-tall dimension-80
space-padding-inline-taller dimension-100
space-padding-inline-tallest dimension-120
space-padding-inline-is-icon-none dimension-0
space-padding-inline-is-icon-shorter dimension-10
space-padding-inline-is-icon-short dimension-20
space-padding-inline-is-icon-medium dimension-30
space-padding-inline-is-icon-tall dimension-40
space-padding-inline-is-icon-taller dimension-60
space-padding-inline-is-icon-tallest dimension-80
space-padding-inline-is-arrow-none dimension-0
space-padding-inline-is-arrow-shorter dimension-10
space-padding-inline-is-arrow-short dimension-20
space-padding-inline-is-arrow-medium dimension-30
space-padding-inline-is-arrow-tall dimension-40
space-padding-inline-is-arrow-taller dimension-60
space-padding-inline-is-arrow-tallest dimension-80
Padding stack
Token name Token value
space-padding-block-none dimension-0
space-padding-block-shortest dimension-20
space-padding-block-shorter dimension-40
space-padding-block-short dimension-50
space-padding-block-medium dimension-60
space-padding-block-tall dimension-80
space-padding-block-taller dimension-100
space-padding-block-is-icon-none dimension-0
space-padding-block-is-icon-shorter dimension-10
space-padding-block-is-icon-short dimension-20
space-padding-block-is-icon-medium dimension-30
space-padding-block-is-icon-tall dimension-40
space-padding-block-is-icon-taller dimension-50
space-padding-block-is-icon-tallest dimension-60
Padding inset
Token name Token value
space-inset-none dimension-0
space-inset-smash dimension-10
space-inset-shortest dimension-20
space-inset-shorter dimension-30
space-inset-short dimension-40
space-inset-medium dimension-50
space-inset-tall dimension-60
space-inset-taller dimension-80
space-inset-tallest dimension-100
space-inset-spacious dimension-120
Gap inline
Token name Token value
space-column-gap-none dimension-0
space-column-gap-shorter dimension-20
space-column-gap-short dimension-40
space-column-gap-medium dimension-60
space-column-gap-tall dimension-80
space-column-gap-taller dimension-100
space-column-gap-is-icon-none dimension-0
space-column-gap-is-icon-shorter dimension-10
space-column-gap-is-icon-short dimension-20
space-column-gap-is-icon-medium dimension-30
space-column-gap-is-icon-tall dimension-40
space-column-gap-is-icon-taller dimension-60
space-column-gap-is-arrow-none dimension-0
space-column-gap-is-arrow-shorter dimension-10
space-column-gap-is-arrow-short dimension-20
space-column-gap-is-arrow-medium dimension-30
space-column-gap-is-arrow-tall dimension-40
space-column-gap-is-arrow-taller dimension-60
Gap stack
Token name Token value
space-row-gap-none dimension-0
space-row-gap-shorter dimension-10
space-row-gap-short dimension-20
space-row-gap-medium dimension-30
space-row-gap-tall dimension-40
space-row-gap-taller dimension-60
space-row-gap-is-icon-none dimension-0
space-row-gap-is-icon-shorter dimension-10
space-row-gap-is-icon-short dimension-20
space-row-gap-is-icon-medium dimension-30
space-row-gap-is-icon-tall dimension-40
space-row-gap-is-icon-taller dimension-60

Size

Icon: Decorative
Token name Token value
size-icon-decorative-shortest dimension-200
size-icon-decorative-shorter dimension-300
size-icon-decorative-short dimension-400
size-icon-decorative-medium dimension-500
size-icon-decorative-tall dimension-600
size-icon-decorative-taller dimension-700
size-icon-decorative-tallest dimension-900
Icon: With typography
Token name Token value (extract-compact/compact) Token value (medium)
size-icon-with-type-heading-small-short dimension-400 dimension-400
size-icon-with-type-heading-small-medium dimension-500 dimension-500
size-icon-with-type-heading-small-tall dimension-550 dimension-550
size-icon-with-type-heading-medium-short dimension-400 dimension-500
size-icon-with-type-heading-medium-medium dimension-500 dimension-550
size-icon-with-type-heading-medium-tall dimension-550 dimension-600
size-icon-with-type-heading-large-short dimension-500 dimension-550
size-icon-with-type-heading-large-medium dimension-550 dimension-600
size-icon-with-type-heading-large-tall dimension-600 dimension-650
size-icon-with-type-heading-Xlarge-short dimension-550 dimension-650
size-icon-with-type-heading-Xlarge-medium dimension-600 dimension-700
size-icon-with-type-heading-Xlarge-tall dimension-650 dimension-800
Token name Token value (extract-compact/compact) Token value (medium)
size-icon-with-type-body-small-short dimension-150 dimension-150
size-icon-with-type-body-small-medium dimension-200 dimension-200
size-icon-with-type-body-small-tall dimension-250 dimension-250
size-icon-with-type-body-medium-short dimension-200 dimension-200
size-icon-with-type-body-medium-medium dimension-250 dimension-250
size-icon-with-type-body-medium-tall dimension-300 dimension-300
size-icon-with-type-body-large-short dimension-250 dimension-250
size-icon-with-type-body-large-medium dimension-300 dimension-300
size-icon-with-type-body-large-tall dimension-350 dimension-350
Max width: Typography
Token name Token value (extract-compact/compact) Token value (medium)
size-max-width-type-display-small dimension-9000 dimension-9000
size-max-width-type-display-medium dimension-9000 dimension-9000
size-max-width-type-display-large dimension-9000 dimension-9000
Token name Token value (extract-compact/compact) Token value (medium)
size-max-width-type-heading-small dimension-6000 dimension-6000
size-max-width-type-heading-medium dimension-9000 dimension-9000
size-max-width-type-heading-large dimension-9000 dimension-9000
size-max-width-type-heading-xLarge dimension-9000 dimension-9000
Token name Token value (extract-compact/compact) Token value (medium)
size-max-width-type-body-small dimension-6000 dimension-6000
size-max-width-type-body-medium dimension-6000 dimension-6000
size-max-width-type-body-large dimension-6000 dimension-6000

Study

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

Technical details

TODO
@paulinea

This comment was marked as resolved.

# to view
@pylapp

This comment was marked as resolved.

# to view
@paulinea

This comment was marked as resolved.

# to view
@paulinea paulinea self-assigned this Sep 19, 2024
@paulinea paulinea linked a pull request Sep 19, 2024 that will close this issue
feat: add dimension tokens #68
Open
12 tasks
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees

@paulinea paulinea

Labels
feature
Projects
[OUDS] Project
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: add dimension tokens Orange-OpenSource/ouds-android
3 participants
@pylapp @julien-deramond @paulinea