search

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

Tokens: Typography #51

Open julien-deramond opened 1 month ago

julien-deramond commented 1 month ago

⚠️ On hold until https://github.com/Orange-OpenSource/ouds-ios/issues/33 is resolved

Description

The aim of this issue is to study and implement the typography 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: Typography

Raw primitive values

Font

Family
Token name Token value
font-family-brand-default Helvetica Neue
font-family-brand-tv Helvetica Neue LT
font-family-system-arial Arial
font-family-system-helvetica Helvetica
font-family-system-noto-sans Noto sans
font-family-system-sf-pro-text SF Pro Text
font-family-system-roboto Roboto
font-family-monospace-menlo Menlo
font-family-monospace-monaco Monaco
font-family-monospace-courier-new Courier New
Weight
Token name Token value
font-weight-100 thin, hairline
font-weight-200 extra-light, ultra-light
font-weight-300 light
font-weight-400 normal, regular, book
font-weight-500 medium
font-weight-600 semi-bold, demi-bold
font-weight-700 bold
font-weight-800 extra-bold, ultra-bold
font-weight-900 black, heavy
font-weight-950 extra-black, ultra-black
Size
Token name Token value
font-size-150 12px / XXXrem
font-size-175 13px / XXXrem
font-size-200 14px / XXXrem
font-size-250 16px / XXXrem
font-size-300 18px / XXXrem
font-size-350 20px / XXXrem
font-size-450 24px / XXXrem
font-size-550 28px / XXXrem
font-size-650 32px / XXXrem
font-size-750 36px / XXXrem
font-size-850 40px / XXXrem
font-size-950 44px / XXXrem
font-size-1050 48px / XXXrem
font-size-1150 52px / XXXrem
font-size-1250 56px / XXXrem
font-size-1450 64px / XXXrem
font-size-1850 72px / XXXrem
Line-height
Token name Token value
font-line-height-250 16px / 1rem
font-line-height-350 20px / XXXrem
font-line-height-450 24px / XXXrem
font-line-height-550 28px / XXXrem
font-line-height-650 32px / XXXrem
font-line-height-750 36px / XXXrem
font-line-height-850 40px / XXXrem
font-line-height-950 44px / XXXrem
font-line-height-1050 48px / XXXrem
font-line-height-1150 52px / XXXrem
font-line-height-1250 56px / XXXrem
font-line-height-1350 60px / XXXrem
font-line-height-1450 64px / XXXrem
font-line-height-1850 72px / XXXrem
font-line-height-2050 80px / XXXrem
Letter spacing (%)

[!CAUTION] Figma doesn't accept % values

Token name Token value
font-letter-spacing-n600 -1.5%
font-letter-spacing-n500 -1.25%
font-letter-spacing-n400 -1%
font-letter-spacing-n300 -0.75%
font-letter-spacing-n200 -0.5%
font-letter-spacing-n100 -0.25%
font-letter-spacing-0 0%
font-letter-spacing-100 0.25%
font-letter-spacing-200 0.5%
font-letter-spacing-300 0.75%
font-letter-spacing-400 1%
font-letter-spacing-500 1.25%
font-letter-spacing-600 1.5%
Letter spacing (px)
Token name Token value
font-letter-spacing-150 {font-size-150}*{font-letter-spacing-600}=0.18px / XXXrem
font-letter-spacing-175 {font-size-175}*{font-letter-spacing-600}=0.195px / XXXrem
font-letter-spacing-200 {font-size-200}*{font-letter-spacing-500}=0.175px / XXXrem
font-letter-spacing-250 {font-size-250}*{font-letter-spacing-500}=0.2px / XXXrem
font-letter-spacing-300 {font-size-300}*{font-letter-spacing-400}=0.18px / xxxrem
font-letter-spacing-350 {font-size-350}*{font-letter-spacing-0}=0px / 0rem
font-letter-spacing-450 {font-size-450}*{font-letter-spacing-n200}=-0.12px / XXXrem
font-letter-spacing-550 {font-size-550}*{font-letter-spacing-n400}=-0.28px / XXXrem
font-letter-spacing-650 {font-size-650}*{font-letter-spacing-n400}=-0.32px / XXXrem
font-letter-spacing-750 {font-size-750}*{font-letter-spacing-n400}=-0.36px / XXXrem
font-letter-spacing-850 {font-size-850}*{font-letter-spacing-n400}=-0.4px / XXXrem
font-letter-spacing-950 {font-size-950}*{font-letter-spacing-n500}=-0.55px / XXXrem
font-letter-spacing-1050 {font-size-1050}*{font-letter-spacing-n500}=-0.6px / XXXrem
font-letter-spacing-1150 {font-size-1150}*{font-letter-spacing-n500}=0.65px / XXXrem
font-letter-spacing-1250 {font-size-1250}*{font-letter-spacing-n500}=-0.7px / XXXrem
font-letter-spacing-1450 {font-size-1450}*{font-letter-spacing-n600}=-0.96px / XXXrem
font-letter-spacing-1850 {font-size-1850}*{font-letter-spacing-n600}=-1.08px / XXXrem
Paragraph spacing
Token name Token value
font-paragraph-spacing-100 0px / 0rem
font-paragraph-spacing-200 8px / 0.5rem
font-paragraph-spacing-300 16px / 1rem
font-paragraph-spacing-400 24px / 1.5rem

Typography (Composite)

[!CAUTION] Figma doesn't accept composite tokens

Token name Token value
type-regular-150 font-family:{$font-family}, font-size:{$font-size-150}, font-line-height:{$font-line-height-value-250}, font-weight:{$font-weight-400}, font-letter-spacing:{$font-letter-spacing-150}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-regular-175 font-family:{$font-family}, font-size:{$font-size-175}, font-line-height:{$font-line-height-value-250}, font-weight:{$font-weight-400}, font-letter-spacing:{$font-letter-spacing-175}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-regular-200 font-family:{$font-family}, font-size:{$font-size-200}, font-line-height:{$font-line-height-value-350}, font-weight:{$font-weight-400}, font-letter-spacing:{$font-letter-spacing-200}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-regular-250 font-family:{$font-family}, font-size:{$font-size-250}, font-line-height:{$font-line-height-value-450}, font-weight:{$font-weight-400}, font-letter-spacing:{$font-letter-spacing-250}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-150 font-family:{$font-family}, font-size:{$font-size-150}, font-line-height:{$font-line-height-value-250}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-150}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-175 font-family:{$font-family}, font-size:{$font-size-175}, font-line-height:{$font-line-height-value-250}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-175}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-200 font-family:{$font-family}, font-size:{$font-size-200}, font-line-height:{$font-line-height-value-350}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-200}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-250 font-family:{$font-family}, font-size:{$font-size-250}, font-line-height:{$font-line-height-value-450}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-250}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-300 font-family:{$font-family}, font-size:{$font-size-300}, font-line-height:{$font-line-height-value-450}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-300}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-350 font-family:{$font-family}, font-size:{$font-size-350}, font-line-height:{$font-line-height-value-550}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-350}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-450 font-family:{$font-family}, font-size:{$font-size-450}, font-line-height:{$font-line-height-value-650}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-450}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-550 font-family:{$font-family}, font-size:{$font-size-550}, font-line-height:{$font-line-height-value-750}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-550}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-650 font-family:{$font-family}, font-size:{$font-size-650}, font-line-height:{$font-line-height-value-850}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-650}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-750 font-family:{$font-family}, font-size:{$font-size-750}, font-line-height:{$font-line-height-value-950}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-750}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-850 font-family:{$font-family}, font-size:{$font-size-850}, font-line-height:{$font-line-height-value-1050}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-850}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-950 font-family:{$font-family}, font-size:{$font-size-950}, font-line-height:{$font-line-height-value-1150}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-950, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-1050 font-family:{$font-family}, font-size:{$font-size-1050}, font-line-height:{$font-line-height-value-1250}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-1050}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-1150 font-family:{$font-family}, font-size:{$font-size-1150}, font-line-height:{$font-line-height-value-1350}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-1150}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-1250 font-family:{$font-family}, font-size:{$font-size-1250}, font-line-height:{$font-line-height-value-1450}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-1250}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-1450 font-family:{$font-family}, font-size:{$font-size-1450}, font-line-height:{$font-line-height-value-1850}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-1450}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-1850 font-family:{$font-family}, font-size:{$font-size-1850}, font-line-height:{$font-line-height-value-2050}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-1850}, font-paragraph-spacing:{$font-paragraph-spacing-100}

Semantic applications

Font

Family
Token name Token value
font-family-web font-family-brand
font-family-ios font-family-brand
font-family-android font-family-brand
font-family-tv font-family-brand-tv
font-family-web-display font-family-web
font-family-web-heading font-family-web
font-family-web-body font-family-web
font-family-web-label font-family-web
font-family-web-code font-family-monospace-menlo
font-family-ios-display font-family-ios
font-family-ios-heading font-family-ios
font-family-ios-body font-family-ios
font-family-ios-label font-family-ios
font-family-ios-code font-family-monospace-menlo
font-family-android-display font-family-android
font-family-android-heading font-family-android
font-family-android-body font-family-android
font-family-android-label font-family-android
font-family-android-code font-family-monospace-menlo
font-family-tv-display font-family-tv
font-family-tv-heading font-family-tv
font-family-tv-body font-family-tv
font-family-tv-label font-family-tv
font-family-tv-code font-family-monospace-menlo
Weight
Token name Token value
font-weight-web-default font-weight-400
font-weight-web-strong font-weight-700
font-weight-ios-default font-weight-400
font-weight-ios-strong font-weight-700
font-weight-android-default font-weight-400
font-weight-android-strong font-weight-700
font-weight-tv-default font-weight-400
font-weight-tv-strong font-weight-700
font-weight-web-display font-weight-web-strong
font-weight-web-heading font-weight-web-strong
font-weight-web-body-default font-weight-web-default
font-weight-web-body-strong font-weight-web-strong
font-weight-web-label-default font-weight-web-default
font-weight-web-label-strong font-weight-web-strong
font-weight-web-code font-weight-400
font-weight-ios-display font-weight-ios-strong
font-weight-ios-heading font-weight-ios-strong
font-weight-ios-body-default font-weight-ios-default
font-weight-ios-body-strong font-weight-ios-strong
font-weight-ios-label-default font-weight-ios-default
font-weight-ios-label-strong font-weight-ios-strong
font-weight-ios-code font-weight-400
font-weight-android-display font-weight-android-strong
font-weight-android-heading font-weight-android-strong
font-weight-android-body-default font-weight-android-default
font-weight-android-body-strong font-weight-android-strong
font-weight-android-label-default font-weight-android-default
font-weight-android-label-strong font-weight-android-strong
font-weight-android-code font-weight-400
font-weight-tv-display font-weight-tv-strong
font-weight-tv-heading font-weight-tv-strong
font-weight-tv-body-default font-weight-tv-default
font-weight-tv-body-strong font-weight-tv-strong
font-weight-tv-label-default font-weight-tv-default
font-weight-tv-label-strong font-weight-tv-strong
font-weight-tv-code font-weight-400
Size
Token name Token value (col: 2xs/xs/sm) (extra-compact/compact) Token value (col: md/lg) (regular/medium) Token value (col: xl/2xl/3xl)
font-size-mobile-display-large font-size-850
font-size-mobile-display-medium font-size-750
font-size-mobile-display-small font-size-650
font-size-mobile-heading-xLarge font-size-550
font-size-mobile-heading-large font-size-450
font-size-mobile-heading-medium font-size-350
font-size-mobile-heading-small font-size-300
font-size-mobile-body-large font-size-250
font-size-mobile-body-medium font-size-200
font-size-mobile-body-small font-size-150
font-size-tablet-display-large font-size-1450
font-size-tablet-display-medium font-size-1050
font-size-tablet-display-small font-size-850
font-size-tablet-heading-xLarge font-size-750
font-size-tablet-heading-large font-size-550
font-size-tablet-heading-medium font-size-450
font-size-tablet-heading-small font-size-350
font-size-tablet-body-large   font-size-250
font-size-tablet-body-medium   font-size-200
font-size-tablet-body-small   font-size-150
font-size-desktop-display-large font-size-1850
font-size-desktop-display-medium font-size-1250
font-size-desktop-display-small font-size-1050
font-size-desktop-heading-xLarge font-size-850
font-size-desktop-heading-large font-size-650
font-size-desktop-heading-medium font-size-550
font-size-desktop-heading-small font-size-450
font-size-desktop-body-large   font-size-300
font-size-desktop-body-medium   font-size-250
font-size-desktop-body-small   font-size-200
Token name Token value
font-size-label-xLarge font-size-300
font-size-label-large font-size-250
font-size-label-medium font-size-200
font-size-label-small font-size-150
font-size-code-medium font-size-200
font-size-code-small font-size-150
Line-height
Token name Token value (col: 2xs/xs/sm) (extra-compact/compact) Token value (col: md/lg) (regular/medium) Token value (col: xl/2xl/3xl)
font-line-height-mobile-display-large font-line-height-1050
font-line-height-mobile-display-medium font-line-height-950
font-line-height-mobile-display-small font-line-height-850
font-line-height-mobile-heading-xLarge font-line-height-750
font-line-height-mobile-heading-large font-line-height-650
font-line-height-mobile-heading-medium font-line-height-550
font-line-height-mobile-heading-small font-line-height-450
font-line-height-mobile-body-large font-line-height-450
font-line-height-mobile-body-medium font-line-height-350
font-line-height-mobile-body-small font-line-height-250
font-line-height-tablet-display-large font-line-height-1850
font-line-height-tablet-display-medium font-line-height-1250
font-line-height-tablet-display-small font-line-height-1050
font-line-height-tablet-heading-xLarge font-line-height-950
font-line-height-tablet-heading-large font-line-height-750
font-line-height-tablet-heading-medium font-line-height-650
font-line-height-tablet-heading-small font-line-height-550
font-line-height-tablet-body-large   font-line-height-450
font-line-height-tablet-body-medium   font-line-height-350
font-line-height-tablet-body-small   font-line-height-250
font-line-height-desktop-display-large font-line-height-2050
font-line-height-desktop-display-medium font-line-height-1450
font-line-height-desktop-display-small font-line-height-1250
font-line-height-desktop-heading-xLarge font-line-height-1050
font-line-height-desktop-heading-large font-line-height-850
font-line-height-desktop-heading-medium font-line-height-750
font-line-height-desktop-heading-small font-line-height-650
font-line-height-desktop-body-large   font-line-height-450
font-line-height-desktop-body-medium   font-line-height-450
font-line-height-desktop-body-small   font-line-height-350
Token name Token value
font-line-height-label-xLarge font-line-height-450
font-line-height-label-large font-line-height-450
font-line-height-label-medium font-line-height-350
font-line-height-label-small font-line-height-250
font-line-height-code-medium font-line-height-350
font-line-height-code-small font-line-height-250
Letter-spacing
Token name Token value (col: 2xs/xs/sm) (extra-compact/compact) Token value (col: md/lg) (regular/medium) Token value (col: xl/2xl/3xl)
font-letter-spacing-mobile-display-large font-letter-spacing-850
font-letter-spacing-mobile-display-medium font-letter-spacing-750
font-letter-spacing-mobile-display-small font-letter-spacing-650
font-letter-spacing-mobile-heading-xLarge font-letter-spacing-550
font-letter-spacing-mobile-heading-large font-letter-spacing-450
font-letter-spacing-mobile-heading-medium font-letter-spacing-350
font-letter-spacing-mobile-heading-small font-letter-spacing-300
font-letter-spacing-mobile-body-large font-letter-spacing-250
font-letter-spacing-mobile-body-medium font-letter-spacing-200
font-letter-spacing-mobile-body-small font-letter-spacing-150
font-letter-spacing-tablet-display-large font-letter-spacing-1450
font-letter-spacing-tablet-display-medium font-letter-spacing-1050
font-letter-spacing-tablet-display-small font-letter-spacing-850
font-letter-spacing-tablet-heading-xLarge font-letter-spacing-750
font-letter-spacing-tablet-heading-large font-letter-spacing-550
font-letter-spacing-tablet-heading-medium font-letter-spacing-450
font-letter-spacing-tablet-heading-small font-letter-spacing-350
font-letter-spacing-tablet-body-large   font-letter-spacing-250
font-letter-spacing-tablet-body-medium   font-letter-spacing-200
font-letter-spacing-tablet-body-small   font-letter-spacing-150
font-letter-spacing-desktop-display-large font-letter-spacing-1850
font-letter-spacing-desktop-display-medium font-letter-spacing-1250
font-letter-spacing-desktop-display-small font-letter-spacing-1050
font-letter-spacing-desktop-heading-xLarge font-letter-spacing-850
font-letter-spacing-desktop-heading-large font-letter-spacing-650
font-letter-spacing-desktop-heading-medium font-letter-spacing-550
font-letter-spacing-desktop-heading-small font-letter-spacing-450
font-letter-spacing-desktop-body-large   font-letter-spacing-300
font-letter-spacing-desktop-body-medium   font-letter-spacing-250
font-letter-spacing-desktop-body-small   font-letter-spacing-200
Token name Token value
font-letter-spacing-label-xLarge font-letter-spacing-300
font-letter-spacing-label-large font-letter-spacing-250
font-letter-spacing-label-medium font-letter-spacing-200
font-letter-spacing-label-small font-letter-spacing-150
font-letter-spacing-code-medium font-letter-spacing-200
font-letter-spacing-code-small font-letter-spacing-150
Paragraph-spacing
Token name Token value (col: 2xs/xs/sm) (extra-compact/compact) Token value (col: md/lg) (regular/medium) Token value (col: xl/2xl/3xl)
font-paragraph-spacing-mobile-display-large font-paragraph-spacing-100
font-paragraph-spacing-mobile-display-medium font-paragraph-spacing-100
font-paragraph-spacing-mobile-display-small font-paragraph-spacing-100
font-paragraph-spacing-mobile-heading-xLarge font-paragraph-spacing-100
font-paragraph-spacing-mobile-heading-large font-paragraph-spacing-100
font-paragraph-spacing-mobile-heading-medium font-paragraph-spacing-100
font-paragraph-spacing-mobile-heading-small font-paragraph-spacing-100
font-paragraph-spacing-mobile-body-large font-paragraph-spacing-100
font-paragraph-spacing-mobile-body-medium font-paragraph-spacing-100
font-paragraph-spacing-mobile-body-small font-paragraph-spacing-100
font-paragraph-spacing-tablet-display-large font-paragraph-spacing-100
font-paragraph-spacing-tablet-display-medium font-paragraph-spacing-100
font-paragraph-spacing-tablet-display-small font-paragraph-spacing-100
font-paragraph-spacing-tablet-heading-xLarge font-paragraph-spacing-100
font-paragraph-spacing-tablet-heading-large font-paragraph-spacing-100
font-paragraph-spacing-tablet-heading-medium font-paragraph-spacing-100
font-paragraph-spacing-tablet-heading-small font-paragraph-spacing-100
font-paragraph-spacing-tablet-body-large   font-paragraph-spacing-100
font-paragraph-spacing-tablet-body-medium   font-paragraph-spacing-100
font-paragraph-spacing-tablet-body-small   font-paragraph-spacing-100
font-paragraph-spacing-desktop-display-large font-paragraph-spacing-100
font-paragraph-spacing-desktop-display-medium font-paragraph-spacing-100
font-paragraph-spacing-desktop-display-small font-paragraph-spacing-100
font-paragraph-spacing-desktop-heading-xLarge font-paragraph-spacing-100
font-paragraph-spacing-desktop-heading-large font-paragraph-spacing-100
font-paragraph-spacing-desktop-heading-medium font-paragraph-spacing-100
font-paragraph-spacing-desktop-heading-small font-paragraph-spacing-100
font-paragraph-spacing-desktop-body-large   font-paragraph-spacing-100
font-paragraph-spacing-desktop-body-medium   font-paragraph-spacing-100
font-paragraph-spacing-desktop-body-small   font-paragraph-spacing-100
Token name Token value
font-paragraph-spacing-label-xLarge font-paragraph-spacing-100
font-paragraph-spacing-label-large font-paragraph-spacing-100
font-paragraph-spacing-label-medium font-paragraph-spacing-100
font-paragraph-spacing-label-small font-paragraph-spacing-100
font-paragraph-spacing-code-medium font-paragraph-spacing-100
font-paragraph-spacing-code-small font-paragraph-spacing-100

Typography (Composite)

Display

[!CAUTION] Figma doesn't accept composite tokens

Token name Token value (col: 2xs/xs/sm) (extra-compact/compact) Token value (col: md/lg) (regular/medium) Token value (col: xl/2xl/3xl)
type-display-large type-bold-850 type-bold-1450  type-bold-1850
type-display-medium type-bold-750 type-bold-1050  type-bold-1250
type-display-small type-bold-650 type-bold-850  type-bold-1050
Heading

[!CAUTION] Figma doesn't accept composite tokens

Token name Token value (col: 2xs/xs/sm) (extra-compact/compact) Token value (col: md/lg) (regular/medium) Token value (col: xl/2xl/3xl)
type-heading-xLarge type-bold-550 type-bold-750 type-bold-850
type-heading-large type-bold-450 type-bold-550 type-bold-650
type-heading-medium type-bold-350 type-bold-450 type-bold-550
type-heading-small type-bold-300 type-bold-350 type-bold-450
Body

[!CAUTION] Figma doesn't accept composite tokens

Token name Token value (col: 2xs/xs/sm) (extra-compact/compact) Token value (col: md/lg) (regular/medium) Token value (col: xl/2xl/3xl)
type-body-default-large type-regular-250 type-regular-250 type-regular-300
type-body-default-medium type-regular-200 type-regular-200 type-regular-250
type-body-default-small type-regular-150 type-regular-150 type-regular-200
type-body-strong-large type-regular-250 type-regular-250 type-regular-300
type-body-strong-medium type-regular-200 type-regular-200 type-regular-250
type-body-strong-small type-regular-150 type-regular-150 type-regular-200
Label

[!CAUTION] Figma doesn't accept composite tokens

Token name Token value (all viewport sizes) (all class sizes)
type-label-default-xLarge type-regular-300
type-label-default-large type-regular-250
type-label-default-medium type-regular-200
type-label-default-small type-regular-150
type-label-strong-xLarge type-regular-300
type-label-strong-large type-regular-250
type-label-strong-medium type-regular-200
type-label-strong-small type-regular-150
Code

[!CAUTION] Figma doesn't accept composite tokens

Token name Token value (all viewport sizes) (all class sizes)
type-code-medium type-regular-200
type-code-small type-regular- 150

Study

Technical details

TODO

pylapp commented 1 month 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 1 month ago

It seems some tokens rely on web paradigm like viewports or breakpoins, i.e. tokens with multiple values for cases "Token name Token value (col-xs-sm) Token value (col-md-lg) Token value (col-xl-2xl-3xl)".

How should we manage that for iOS / iPadOS? These logic is not used for mobile apps, maybe we can only rely on case xl/2xl/3xl.

pylapp commented 1 month ago

Other topics to tackle:

There are many font families. It seems some of them are not iOS native. And others like Helvetica may rely on externala ssets to add (like woff or stuff like that). What should we do? Should we consider only native font families on iOS and let themes add their own fonts?

Not that font-weight-950 won't be implemented because SwftUI does not provide extra-black or ultra-black values (see documentation.

About letter spacing, we cannot use percentages nor floating point pixels, but points starting from 0 (see documentation). What sould we do?

pylapp commented 1 month 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 typography tokens.

1) font families

How should we manage font families embeded natively in iOS (e.g. San Francisco) and those which need external assets (like TTF or WOFF files)?

Are we supposed for example to have Helvetica assets for OrangeTheme stored elsewhere?

What about missing font families (see this comment)?

Are we supposed to add "iOS" word in each of our token name? It is a non sense, we expose an iOS library, no need to repeat ourselves.

2) font-weight-950, font-weight-800

iOS with SwftUI does not expose extra-black, extra-bold, ultra-black and ultra-bold values, so should we remove these raw tokens values and not integrate fontweight-800 and fontweight-950? What should we do for any semantic token using them?

3) Letter spacing

iOS with SwftUI does not manage percentages nor floating point pixels for letter spacing, only integers which should start from 0. What should we done? It could be much simple to have the suitable points values (best case), or for the worst case a kind of conversion table to convert raw tokens values to points.

### 4) 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?

5) Use of pixels as values units

Values for font sizes, line heights and spacings here are listed in pixels, not in points. What should we do? Convert them to points? Use them as is?

6) Line height and paragraph spacing

What are they supposed to be?

The only API we have with SwiftUI are:

cc @B3nz01d @mccart77 @ludovic35

pylapp commented 3 weeks ago

FYI first version delivered with commit f4ec34d3702300e24087627d2051dfc5f9387242 and released before version 0.1.0

pylapp commented 2 days ago

FYI here are the available fonts with their associated font families. Some of them are not available like:

How should we also manage the San Franciso iOS default font?

    for someFontFamily in UIFont.familyNames {
                for someFont in UIFont.fontNames(forFamilyName: someFontFamily) {
                    print("\(someFontFamily) / \(someFont)")
                }
            }
Academy Engraved LET / AcademyEngravedLetPlain
Al Nile / AlNile
Al Nile / AlNile-Bold
American Typewriter / AmericanTypewriter
American Typewriter / AmericanTypewriter-Light
American Typewriter / AmericanTypewriter-Semibold
American Typewriter / AmericanTypewriter-Bold
American Typewriter / AmericanTypewriter-Condensed
American Typewriter / AmericanTypewriter-CondensedLight
American Typewriter / AmericanTypewriter-CondensedBold
Apple Color Emoji / AppleColorEmoji
Apple SD Gothic Neo / AppleSDGothicNeo-Regular
Apple SD Gothic Neo / AppleSDGothicNeo-Thin
Apple SD Gothic Neo / AppleSDGothicNeo-UltraLight
Apple SD Gothic Neo / AppleSDGothicNeo-Light
Apple SD Gothic Neo / AppleSDGothicNeo-Medium
Apple SD Gothic Neo / AppleSDGothicNeo-SemiBold
Apple SD Gothic Neo / AppleSDGothicNeo-Bold
Apple Symbols / AppleSymbols
Arial / ArialMT
Arial / Arial-ItalicMT
Arial / Arial-BoldMT
Arial / Arial-BoldItalicMT
Arial Hebrew / ArialHebrew
Arial Hebrew / ArialHebrew-Light
Arial Hebrew / ArialHebrew-Bold
Arial Rounded MT Bold / ArialRoundedMTBold
Avenir / Avenir-Book
Avenir / Avenir-Roman
Avenir / Avenir-BookOblique
Avenir / Avenir-Oblique
Avenir / Avenir-Light
Avenir / Avenir-LightOblique
Avenir / Avenir-Medium
Avenir / Avenir-MediumOblique
Avenir / Avenir-Heavy
Avenir / Avenir-HeavyOblique
Avenir / Avenir-Black
Avenir / Avenir-BlackOblique
Avenir Next / AvenirNext-Regular
Avenir Next / AvenirNext-Italic
Avenir Next / AvenirNext-UltraLight
Avenir Next / AvenirNext-UltraLightItalic
Avenir Next / AvenirNext-Medium
Avenir Next / AvenirNext-MediumItalic
Avenir Next / AvenirNext-DemiBold
Avenir Next / AvenirNext-DemiBoldItalic
Avenir Next / AvenirNext-Bold
Avenir Next / AvenirNext-BoldItalic
Avenir Next / AvenirNext-Heavy
Avenir Next / AvenirNext-HeavyItalic
Avenir Next Condensed / AvenirNextCondensed-Regular
Avenir Next Condensed / AvenirNextCondensed-Italic
Avenir Next Condensed / AvenirNextCondensed-UltraLight
Avenir Next Condensed / AvenirNextCondensed-UltraLightItalic
Avenir Next Condensed / AvenirNextCondensed-Medium
Avenir Next Condensed / AvenirNextCondensed-MediumItalic
Avenir Next Condensed / AvenirNextCondensed-DemiBold
Avenir Next Condensed / AvenirNextCondensed-DemiBoldItalic
Avenir Next Condensed / AvenirNextCondensed-Bold
Avenir Next Condensed / AvenirNextCondensed-BoldItalic
Avenir Next Condensed / AvenirNextCondensed-Heavy
Avenir Next Condensed / AvenirNextCondensed-HeavyItalic
Baskerville / Baskerville
Baskerville / Baskerville-Italic
Baskerville / Baskerville-SemiBold
Baskerville / Baskerville-SemiBoldItalic
Baskerville / Baskerville-Bold
Baskerville / Baskerville-BoldItalic
Bodoni 72 / BodoniSvtyTwoITCTT-Book
Bodoni 72 / BodoniSvtyTwoITCTT-BookIta
Bodoni 72 / BodoniSvtyTwoITCTT-Bold
Bodoni 72 Oldstyle / BodoniSvtyTwoOSITCTT-Book
Bodoni 72 Oldstyle / BodoniSvtyTwoOSITCTT-BookIt
Bodoni 72 Oldstyle / BodoniSvtyTwoOSITCTT-Bold
Bodoni 72 Smallcaps / BodoniSvtyTwoSCITCTT-Book
Bodoni Ornaments / BodoniOrnamentsITCTT
Bradley Hand / BradleyHandITCTT-Bold
Chalkboard SE / ChalkboardSE-Regular
Chalkboard SE / ChalkboardSE-Light
Chalkboard SE / ChalkboardSE-Bold
Chalkduster / Chalkduster
Charter / Charter-Roman
Charter / Charter-Italic
Charter / Charter-Bold
Charter / Charter-BoldItalic
Charter / Charter-Black
Charter / Charter-BlackItalic
Cochin / Cochin
Cochin / Cochin-Italic
Cochin / Cochin-Bold
Cochin / Cochin-BoldItalic
Copperplate / Copperplate
Copperplate / Copperplate-Light
Copperplate / Copperplate-Bold
Courier New / CourierNewPSMT
Courier New / CourierNewPS-ItalicMT
Courier New / CourierNewPS-BoldMT
Courier New / CourierNewPS-BoldItalicMT
Damascus / Damascus
Damascus / DamascusLight
Damascus / DamascusMedium
Damascus / DamascusSemiBold
Damascus / DamascusBold
Devanagari Sangam MN / DevanagariSangamMN
Devanagari Sangam MN / DevanagariSangamMN-Bold
Didot / Didot
Didot / Didot-Italic
Didot / Didot-Bold
DIN Alternate / DINAlternate-Bold
DIN Condensed / DINCondensed-Bold
Euphemia UCAS / EuphemiaUCAS
Euphemia UCAS / EuphemiaUCAS-Italic
Euphemia UCAS / EuphemiaUCAS-Bold
Farah / Farah
Futura / Futura-Medium
Futura / Futura-MediumItalic
Futura / Futura-Bold
Futura / Futura-CondensedMedium
Futura / Futura-CondensedExtraBold
Galvji / Galvji
Galvji / Galvji-Bold
Geeza Pro / GeezaPro
Geeza Pro / GeezaPro-Bold
Georgia / Georgia
Georgia / Georgia-Italic
Georgia / Georgia-Bold
Georgia / Georgia-BoldItalic
Gill Sans / GillSans
Gill Sans / GillSans-Italic
Gill Sans / GillSans-Light
Gill Sans / GillSans-LightItalic
Gill Sans / GillSans-SemiBold
Gill Sans / GillSans-SemiBoldItalic
Gill Sans / GillSans-Bold
Gill Sans / GillSans-BoldItalic
Gill Sans / GillSans-UltraBold
Grantha Sangam MN / GranthaSangamMN-Regular
Grantha Sangam MN / GranthaSangamMN-Bold
Helvetica / Helvetica
Helvetica / Helvetica-Oblique
Helvetica / Helvetica-Light
Helvetica / Helvetica-LightOblique
Helvetica / Helvetica-Bold
Helvetica / Helvetica-BoldOblique
Helvetica Neue / HelveticaNeue
Helvetica Neue / HelveticaNeue-Italic
Helvetica Neue / HelveticaNeue-UltraLight
Helvetica Neue / HelveticaNeue-UltraLightItalic
Helvetica Neue / HelveticaNeue-Thin
Helvetica Neue / HelveticaNeue-ThinItalic
Helvetica Neue / HelveticaNeue-Light
Helvetica Neue / HelveticaNeue-LightItalic
Helvetica Neue / HelveticaNeue-Medium
Helvetica Neue / HelveticaNeue-MediumItalic
Helvetica Neue / HelveticaNeue-Bold
Helvetica Neue / HelveticaNeue-BoldItalic
Helvetica Neue / HelveticaNeue-CondensedBold
Helvetica Neue / HelveticaNeue-CondensedBlack
Hiragino Maru Gothic ProN / HiraMaruProN-W4
Hiragino Mincho ProN / HiraMinProN-W3
Hiragino Mincho ProN / HiraMinProN-W6
Hiragino Sans / HiraginoSans-W3
Hiragino Sans / HiraginoSans-W6
Hiragino Sans / HiraginoSans-W7
Hoefler Text / HoeflerText-Regular
Hoefler Text / HoeflerText-Italic
Hoefler Text / HoeflerText-Black
Hoefler Text / HoeflerText-BlackItalic
Impact / Impact
Kailasa / Kailasa
Kailasa / Kailasa-Bold
Kefa / Kefa-Regular
Khmer Sangam MN / KhmerSangamMN
Kohinoor Bangla / KohinoorBangla-Regular
Kohinoor Bangla / KohinoorBangla-Light
Kohinoor Bangla / KohinoorBangla-Semibold
Kohinoor Devanagari / KohinoorDevanagari-Regular
Kohinoor Devanagari / KohinoorDevanagari-Light
Kohinoor Devanagari / KohinoorDevanagari-Semibold
Kohinoor Gujarati / KohinoorGujarati-Regular
Kohinoor Gujarati / KohinoorGujarati-Light
Kohinoor Gujarati / KohinoorGujarati-Bold
Kohinoor Telugu / KohinoorTelugu-Regular
Kohinoor Telugu / KohinoorTelugu-Light
Kohinoor Telugu / KohinoorTelugu-Medium
Lao Sangam MN / LaoSangamMN
Malayalam Sangam MN / MalayalamSangamMN
Malayalam Sangam MN / MalayalamSangamMN-Bold
Marker Felt / MarkerFelt-Thin
Marker Felt / MarkerFelt-Wide
Menlo / Menlo-Regular
Menlo / Menlo-Italic
Menlo / Menlo-Bold
Menlo / Menlo-BoldItalic
Mishafi / DiwanMishafi
Mukta Mahee / MuktaMahee-Regular
Mukta Mahee / MuktaMahee-Light
Mukta Mahee / MuktaMahee-Bold
Myanmar Sangam MN / MyanmarSangamMN
Myanmar Sangam MN / MyanmarSangamMN-Bold
Noteworthy / Noteworthy-Light
Noteworthy / Noteworthy-Bold
Noto Nastaliq Urdu / NotoNastaliqUrdu
Noto Nastaliq Urdu / NotoNastaliqUrdu-Bold
Noto Sans Kannada / NotoSansKannada-Regular
Noto Sans Kannada / NotoSansKannada-Light
Noto Sans Kannada / NotoSansKannada-Bold
Noto Sans Myanmar / NotoSansMyanmar-Regular
Noto Sans Myanmar / NotoSansMyanmar-Light
Noto Sans Myanmar / NotoSansMyanmar-Bold
Noto Sans Oriya / NotoSansOriya
Noto Sans Oriya / NotoSansOriya-Bold
Optima / Optima-Regular
Optima / Optima-Italic
Optima / Optima-Bold
Optima / Optima-BoldItalic
Optima / Optima-ExtraBlack
Palatino / Palatino-Roman
Palatino / Palatino-Italic
Palatino / Palatino-Bold
Palatino / Palatino-BoldItalic
Papyrus / Papyrus
Papyrus / Papyrus-Condensed
Party LET / PartyLetPlain
PingFang HK / PingFangHK-Regular
PingFang HK / PingFangHK-Ultralight
PingFang HK / PingFangHK-Thin
PingFang HK / PingFangHK-Light
PingFang HK / PingFangHK-Medium
PingFang HK / PingFangHK-Semibold
PingFang SC / PingFangSC-Regular
PingFang SC / PingFangSC-Ultralight
PingFang SC / PingFangSC-Thin
PingFang SC / PingFangSC-Light
PingFang SC / PingFangSC-Medium
PingFang SC / PingFangSC-Semibold
PingFang TC / PingFangTC-Regular
PingFang TC / PingFangTC-Ultralight
PingFang TC / PingFangTC-Thin
PingFang TC / PingFangTC-Light
PingFang TC / PingFangTC-Medium
PingFang TC / PingFangTC-Semibold
Rockwell / Rockwell-Regular
Rockwell / Rockwell-Italic
Rockwell / Rockwell-Bold
Rockwell / Rockwell-BoldItalic
Savoye LET / SavoyeLetPlain
Sinhala Sangam MN / SinhalaSangamMN
Sinhala Sangam MN / SinhalaSangamMN-Bold
Snell Roundhand / SnellRoundhand
Snell Roundhand / SnellRoundhand-Bold
Snell Roundhand / SnellRoundhand-Black
STIX Two Math / STIXTwoMath-Regular
STIX Two Text / STIXTwoText
STIX Two Text / STIXTwoText-Italic
STIX Two Text / STIXTwoText_Medium
STIX Two Text / STIXTwoText-Italic_Medium-Italic
STIX Two Text / STIXTwoText_SemiBold
STIX Two Text / STIXTwoText-Italic_SemiBold-Italic
STIX Two Text / STIXTwoText_Bold
STIX Two Text / STIXTwoText-Italic_Bold-Italic
Symbol / Symbol
Tamil Sangam MN / TamilSangamMN
Tamil Sangam MN / TamilSangamMN-Bold
Thonburi / Thonburi
Thonburi / Thonburi-Light
Thonburi / Thonburi-Bold
Times New Roman / TimesNewRomanPSMT
Times New Roman / TimesNewRomanPS-ItalicMT
Times New Roman / TimesNewRomanPS-BoldMT
Times New Roman / TimesNewRomanPS-BoldItalicMT
Trebuchet MS / TrebuchetMS
Trebuchet MS / TrebuchetMS-Italic
Trebuchet MS / TrebuchetMS-Bold
Trebuchet MS / Trebuchet-BoldItalic
Verdana / Verdana
Verdana / Verdana-Italic
Verdana / Verdana-Bold
Verdana / Verdana-BoldItalic
Zapf Dingbats / ZapfDingbatsITC
Zapfino / Zapfino