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.

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

[Library] Apply letter spacing for fonts #347

Closed
5 tasks
pylapp opened this issue Dec 11, 2024 · 2 comments
Closed
5 tasks

[Library] Apply letter spacing for fonts #347

pylapp opened this issue Dec 11, 2024 · 2 comments
Assignees
Labels
🧩 enhancement Related to enhancements or feature requests 🗳️ feature Related to features 🧬 token Related to tokens (raws, semantics or components)

Comments

@pylapp
Copy link
Member

pylapp commented Dec 11, 2024

Context

Today we did not implement yet the letter spacing feature using the FontLetterSpacingRawToken tokens.
In fact, this feature was not implemented until now because we got unusable values from Figma.
Since the tokenator can update these tokens, we have now usable values.

However, we need confirmation about the SwiftUI API to use, i.e. kerning or tracking.
In fact, the behaviour is not the same: kerning tries to prevent ligatures and tracking may add leading and trailing whitespace.

Documentation for tracking: https://developer.apple.com/documentation/swiftui/text/tracking(_:)
Documentation for kerning: https://developer.apple.com/documentation/swiftui/text/kerning(_:)

See the difference in the screenshot:

Image

For the Swift code:

#Preview {
    Text("(0.18) Tracking - Nous vivons tous dans le ventre d'un chien géant")
        .tracking(0.18)
        .border(.green)

    Text("(0.18) Kerning - Nous vivons tous dans le ventre d'un chien géant")
        .kerning(0.18)
        .border(.green)

    Text("(-1.08) Tracking - Nous vivons tous dans le ventre d'un chien géant")
        .tracking(-1.08)
        .border(.blue)

    Text("(-1.08) Kerning - Nous vivons tous dans le ventre d'un chien géant")
        .kerning(-1.08)
        .border(.blue)
    
    Text("(10) Tracking - Nous vivons tous dans le ventre d'un chien géant")
        .tracking(10)
        .border(.red)

    Text("(10) Kerning - Nous vivons tous dans le ventre d'un chien géant")
        .kerning(10)
        .border(.red)
}

Definition of Ready

  • Got answer from @MaximeTonnerre to know if tracking or kerning must be used

Definition of Done

  • Update TypographyModifier (beware, feature available for iOS16+, not iOS 15)
  • Update UI tests references images
  • Update documentation
  • Update CHANGELOG
@pylapp pylapp added 🗳️ feature Related to features 🧬 token Related to tokens (raws, semantics or components) 🔍 triage A new issue that needs to be treated 🧩 enhancement Related to enhancements or feature requests labels Dec 11, 2024
@pylapp

This comment has been minimized.

@pylapp pylapp moved this from Triage to Todo in ⚛️ [OUDS] Project Dec 11, 2024
@pylapp pylapp added ⚠️ on hold Not blocked but should not be processed yet 💥 blocking Issue can go further and is blocked by something and removed ⚠️ on hold Not blocked but should not be processed yet labels Dec 11, 2024
pylapp added a commit that referenced this issue Dec 11, 2024
…ier (#347) (#348)

We are waitning for information from the design team about the use of line height and letter spacing tokens.
The source code now reflects the situation.

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Dec 11, 2024
…ier (#347) (#348)

We are waitning for information from the design team about the use of line height and letter spacing tokens.
The source code now reflects the situation.

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@pylapp pylapp removed the 💥 blocking Issue can go further and is blocked by something label Dec 11, 2024
@pylapp
Copy link
Member Author

pylapp commented Dec 11, 2024

tracking should be prefered

@pylapp pylapp self-assigned this Dec 11, 2024
pylapp added a commit that referenced this issue Dec 18, 2024
…ier (#347) (#348)

We are waitning for information from the design team about the use of line height and letter spacing tokens.
The source code now reflects the situation.

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Jan 17, 2025
@pylapp pylapp moved this from Todo to In Progress in ⚛️ [OUDS] Project Jan 17, 2025
pylapp added a commit that referenced this issue Jan 17, 2025
pylapp added a commit that referenced this issue Jan 17, 2025
pylapp added a commit that referenced this issue Jan 17, 2025
@pylapp pylapp closed this as completed Jan 17, 2025
@github-project-automation github-project-automation bot moved this from In Progress to Done in ⚛️ [OUDS] Project Jan 17, 2025
pylapp added a commit that referenced this issue Jan 17, 2025
@pylapp pylapp removed the 🔍 triage A new issue that needs to be treated label Jan 28, 2025
@pylapp pylapp mentioned this issue Jan 30, 2025
pylapp added a commit that referenced this issue Jan 30, 2025
Release of version 0.10.0
See below the full CHANGELOG details.

Added:
- [Library] Checkbox and radio button component tokens ([#421](#421))
- [Library] Badge component tokens (partial implementation) ([#420](#420))
- [Library] Input text component tokens ([#418](#418))
- [Library] Bullet list component tokens ([#417](#417))
- [Library] Breadcrumb component tokens ([#416](#416))
- [Library] Chip component tokens ([#415](#415))
- [Library] List item component tokens ([#414](#414))
- [Library] Switch component tokens ([#412](#412))
- [Library] Color semantic tokens `colorRepositoryOpacityBlack{High,Soft}*`, `colorRepositoryOpacityWhiteMedium*`, `colorRepositoryPositiveHighDark*` (token library v0.3.0)
- [Library] Button component ([#159](#159))
- [Library] Apply letter spacing in typography ([#347](#347))
- [Library] Apply line height in typography ([#348](#348))
- [Library] Tag component tokens ([#390](#390))
- [Library] Skeleton component tokens ([#388](#388))
- [Library] Select component tokens ([#386](#386))
- [Library] Link component tokens ([#384](#384))

Changed:
- [Library] Value for color raw token `colorFunctionalScarlet600` (token library v0.4.0)
- [Library] Value for `colorRepositoryOpacityBlackMedium*` (token library v0.3.0)
- [Library] Rename button component token `buttonSizeMaxHeight` to `buttonSizeMaxHeightIconOnly` (token library v0.3.0)
- [Library] Rename color semantic tokens `colorChartFunctionalInformation*` to `colorChartFunctionalInfo*` (token library v0.3.0)
- [DesignToolbox] Rename demo app "Showcase" to "DesignToolbox" ([#85](#85))
- [DesignToolbox] Update size screen ([#284](#284))
- [Library] Change stroke style for `BorderModifier`
- [DesignToolbox] Update colors and some refactoring ([#354](#354))
- [Library] Theme initialization flow ([#393](#393))

Fixed:
- [DesignToolbox] Add missing illustrations for Button screen ([#403](#403))

WARNING: Troubles with GitHub and conflicts on OrangeTheme+ButtonComponentTokens.swift and ODUSTokensSemantic.md.
Made a manual merge to try solving it.

Assisted-by: GPT-4o-mini (Dinootoo)
Co-authored-by: Benoit Suzanne <[email protected]>
Co-authored-by: Pierre-Yves Lapersonne <[email protected]>
Co-authored-by: Ludovic Pinel <[email protected]>
Co-authored-by: boosted-bot <[email protected]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧩 enhancement Related to enhancements or feature requests 🗳️ feature Related to features 🧬 token Related to tokens (raws, semantics or components)
Projects
None yet
Development

No branches or pull requests

1 participant