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

[Demo App] Create the tokens section in the demo application #120

Closed
B3nz01d opened this issue Sep 20, 2024 · 10 comments · Fixed by #137
Closed

[Demo App] Create the tokens section in the demo application #120

B3nz01d opened this issue Sep 20, 2024 · 10 comments · Fixed by #137
Assignees
@ludovic35
Labels
📱 demo app Update of the Demo App

Comments

@B3nz01d
Copy link
Collaborator

B3nz01d commented Sep 20, 2024 •
edited by pylapp
Loading

Internal reference

Jira reference: OUDS-284

Description

As a user of the design system for mobile
I want to find the token section in the demo app 
So that the user can access the list of the available tokens in alphabetical order:

  • Border
  • Color
  • Dimention
  • Elevation
  • Grid
  • Opacity
  • Motion
  • Typography

Context

The Ouds Mobile app is demonstrating the available work within the Design System dev library. The objective is to present the tokens.

  • The initial app architecture should follow previous ODS app structure Navigation menu sections > Top Navigation item > card view to selec an item > item page with content description
  • As for the ODS app the bottom navigation will replace the "Guidelines" menu item section with this new "Tokens" menu item
  • The selection page of this section will use the large card model and prensent the list of tokens in alphabetical order
  • A new design will be provided to support each component page description
@B3nz01d B3nz01d added 📖 documentation Improvements or additions to documentation 📀 token Related to tokens (raws, semantics or components) labels Sep 20, 2024
@ludovic35 ludovic35 self-assigned this Sep 23, 2024
@pylapp pylapp added 📱 demo app Update of the Demo App 🆕 feature Related to features and removed 📖 documentation Improvements or additions to documentation 📀 token Related to tokens (raws, semantics or components) labels Sep 23, 2024
@pylapp pylapp mentioned this issue Sep 25, 2024
Merged
9 tasks
@pylapp pylapp linked a pull request Sep 25, 2024 that will close this issue
[#120] Create the token section in the demo app #137
Merged
9 tasks
@pylapp pylapp removed a link to a pull request Sep 25, 2024
[#120] Create the token section in the demo app #137
Merged
9 tasks
@pylapp pylapp linked a pull request Sep 25, 2024 that will close this issue
[#120] Create the token section in the demo app #137
Merged
9 tasks
@pylapp

This comment has been minimized.

Sign in to view
@pylapp

This comment has been minimized.

Sign in to view
@ludovic35
Copy link
Member

ludovic35 commented Sep 30, 2024 •
edited
Loading

This release contains Opacity, Typography, elevation, and border tokens in first version
New issues, will be created to add :

New issue will be created to update design of existing tokens screens regarding last update of the figma file

@B3nz01d
Copy link
Collaborator Author

B3nz01d commented Sep 30, 2024 •
edited by ludovic35
Loading

@ludovic35 & @pylapp this new version looks great.

While going through the alpha version and comparing with the source tokens I see the following:

  • Border page
    • In the radius list I see the borderRadiusPill
    • also Anton updated the design with a color for the square as you requested in your feedback
  • Elevation
    • I do not see the same list, but you do seem to have the right semantic list, let's wait until you get the file from @julien-deramond 's work on tokens
    • in this one you've name them with the "Light" attribute (and dark in dark) - but not in the border token page, maybe you do not need to put at all assuming that the light and dark would apply when switching the mode you would get the right value, a dev would only use the token without the light or dark.
  • Opacity
    • the brand color used in the example was not appropriate and was updated by Anton in the figma design
  • Typography
    • the icon was updated by @mccart77, and it's been updated by Anton on the DSM
    • the token names are correct but the token title should show the name is not in camel case (it's shown in plain text right now)
    • the token should show in a list with the attributes associated to the token (font, weight, size, line height, letter spacing) all as text
      ie: "fontFamilyIos (SF Pro) - fontWeightIosBodyDefault (400) - sizeMobileBodyMedium (14) - lineHeightMobileBodyMedium (20) - letterSpacingMobileBodyMedium (0.175)"
      need to see how long this is in terms of number of lines on the device?
    • the code token should show in a courrier style font, what is the default font in ios @mccart77 ? and has this been synched with the token on the figma file?
  • Components
    • the page is for the mement empty and it should contain the placeholder image as in the design example

@ludovic35

This comment has been minimized.

Sign in to view
@pylapp pylapp changed the title Create the Token section in the Demo App [Demo App] Create the tokens section in the demo application Oct 2, 2024
@ludovic35 ludovic35 mentioned this issue Oct 3, 2024
Closed
1 task
pylapp added a commit that referenced this issue Oct 4, 2024
@pylapp
refactor(review): doc, warnings, typo (#120)
0c5caf4 
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
pylapp added a commit that referenced this issue Oct 4, 2024
@pylapp
refactor(review): doc, warnings, typo (#120)
ac42435 
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
pylapp added a commit that referenced this issue Oct 4, 2024
@pylapp @ludovic35
feat: add tokens section (border, elevation, opacity, typography) in …
70e992d 
…demo app (#120) (#137)

Co-authored-by: Ludovic PINEL <ludovic.pinel@orange.com>
Co-authored-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
@github-project-automation github-project-automation bot moved this from In Progress to Done in [OUDS] Project Oct 4, 2024
@pylapp pylapp moved this from Done to In Progress in [OUDS] Project Oct 4, 2024
@pylapp pylapp reopened this Oct 4, 2024
@github-project-automation github-project-automation bot moved this from In Progress to Triage in [OUDS] Project Oct 4, 2024
@pylapp

This comment has been minimized.

Sign in to view
@pylapp

This comment has been minimized.

Sign in to view
@pylapp

This comment has been minimized.

Sign in to view
@pylapp
Copy link
Member

pylapp commented Oct 4, 2024 •
edited
Loading

📣 New TestFlight ALPHA upload available 🚀

Please, get the new build from TestFlight app.

  • Display name: OUDS Showcase ALPHA (120)
  • Version: 0.3.0
  • Build number: 1728050820
  • Build tag: fd3cb86
  • Build type: ALPHA
  • Build details (GitHub): 120

cc @B3nz01d @pylapp @ludovic35 @Tayebsed93 @mccart77

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

pylapp added a commit that referenced this issue Oct 4, 2024
@pylapp @ludovic35 @Tayebsed93
Version 0.3.0 (#164)
07c21cd 
Release of version 0.3.0
See below the full CHANGELOG details.

Added

- [Library] Add color semantic tokens `colorBackgroundStatusNeutral`, some `OnBackgroundEmphasized`, `colorBackgroundAction`, `colorBackgroundAlways`, `colorContent` variants
- [Library] Add typography semantic tokens for font letter spacing
- [DemoApp] Create token section (Border, Typography, Elevation, Opacity) ([#120](#120))
- [Library] Unit tests for multiple tokens
- [Library] Add color semantic composite tokens embeding light and dark modes values
- [Library] Add spacing semantic tokens "huge" and "jumbo"
- [Library] Add closed "sys" dimension semantic tokens
- [Tool] GitHub issue template for tokens update request
- [Library] Add more sizing semantic tokens ([#122](#122))
- [Library] Add letter spacing and more font family tokens for typography ([#51](#51))

Changed

- [Library] Rename and move color raw tokens for core, Orange brand and Sosh brand
- [Library] Remove web-specific grid tokens, keep compact/regular widths ([#147](#147))
- [Library] Rename of typography font weight raw tokens
- [Library] Rename dimension semantic tokens to apply T-Shirt size rules ([#130](#130))
- [Library] Rename `SizingCompositeSemanticToken` to `MultipleSizingSemanticToken` to keep "composite" word for *Figma* design system
- [Library] Rename `ColorCompositeSemanticToken` to `MultipleColorRawToken` to keep "composite" word for *Figma* design system
- [Library] Rename `TypographyCompositeSemanticToken` to `MultipleTypographyTokens` to keep "composite" word for *Figma* design system
- [Library] Rename `SpacingCompositeSemanticToken` to `MultipleSpacingTokens` to keep "composite" word for *Figma* design system
- [Library] Rename `SizingCompositeSemanticToken` to `MultipleSizingTokens` to keep "composite" word for *Figma* design system
- [Library] Rename `ColorCompositeSemanticToken` to `MultipleColorTokens` to keep "composite" word for *Figma* design system
- [Library] Elevation colors have been merged into "multiple" objects colors to have less variables and manage color schemes
- [Library] Rename `ColorCompositeSemanticToken` to `MultipleColorSemanticToken` to keep "composite" word for *Figma* design system
- [Library] Elevation colors have been merged into composite colors to have less variables and manage color schemes
- [Library] Rename `SpacingCompositeSemanticToken` to `MultipleSpacingTokens` to keep "composite" word for *Figma* design system
- [Library] Rename `SizingCompositeSemanticToken` to `MultipleSizingTokens` to keep "composite" word for *Figma* design system
- [Library] Rename `ColorCompositeSemanticToken` to `MultipleColorTokens` to keep "composite" word for *Figma* design system
- [Library] Elevation colors have been merged into "multiple" objects colors to have less variables and manage color schemes
- [Library] Update color semantic tokens to better manage light and dark modes values
- [Library] Update elevation colors focus light and dark
- [Library] Rename space padding inline component tokens by removing "component" word
- [Library] Improve documentation about raw and semantic tokens definitions ([#127](#127))
- [Library] Improve documentation about raw tokens definitions
- [Library] Move composite tokens elsewhere to help parser ([#129](#129))
- [Library] Improve documentation about raw and semantic tokens definitions ([#127](#127))
- [Library] Rename some sizing semantic tokens ([#122](#122))
- [Library] Replace "adaptable" word by "scaled" in space semantic tokens, "fix" by "fixed" and remove "layout" ([#117](#117))

Removed

- [Library] Color semantic token `colorBackgroundEmphasizedSecondary`, `colorOnBackground` variants
- [Library] Remove raw tokens `elevationZIndex` ([#119](#119))

Fixed

- [Library] Blur values for elevation composite raw tokens

Co-authored-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
Co-authored-by: Ludovic Pinel <ludovic.pinel@orange.com>
Co-authored-by: Tayeb Sedraia <tayeb.sedraia@orange.com>
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
pylapp added a commit that referenced this issue Oct 4, 2024
@pylapp @ludovic35 @Tayebsed93
Version 0.3.0 (#165)
7b795ed 
Release of version 0.3.0
See below the full CHANGELOG details.

Added

- [Library] Add color semantic tokens `colorBackgroundStatusNeutral`, some `OnBackgroundEmphasized`, `colorBackgroundAction`, `colorBackgroundAlways`, `colorContent` variants
- [Library] Add typography semantic tokens for font letter spacing
- [DemoApp] Create token section (Border, Typography, Elevation, Opacity) ([#120](#120))
- [Library] Unit tests for multiple tokens
- [Library] Add color semantic composite tokens embeding light and dark modes values
- [Library] Add spacing semantic tokens "huge" and "jumbo"
- [Library] Add closed "sys" dimension semantic tokens
- [Tool] GitHub issue template for tokens update request
- [Library] Add more sizing semantic tokens ([#122](#122))
- [Library] Add letter spacing and more font family tokens for typography ([#51](#51))

Changed

- [Library] Rename and move color raw tokens for core, Orange brand and Sosh brand
- [Library] Remove web-specific grid tokens, keep compact/regular widths ([#147](#147))
- [Library] Rename of typography font weight raw tokens
- [Library] Rename dimension semantic tokens to apply T-Shirt size rules ([#130](#130))
- [Library] Rename `SizingCompositeSemanticToken` to `MultipleSizingSemanticToken` to keep "composite" word for *Figma* design system
- [Library] Rename `ColorCompositeSemanticToken` to `MultipleColorRawToken` to keep "composite" word for *Figma* design system
- [Library] Rename `TypographyCompositeSemanticToken` to `MultipleTypographyTokens` to keep "composite" word for *Figma* design system
- [Library] Rename `SpacingCompositeSemanticToken` to `MultipleSpacingTokens` to keep "composite" word for *Figma* design system
- [Library] Rename `SizingCompositeSemanticToken` to `MultipleSizingTokens` to keep "composite" word for *Figma* design system
- [Library] Rename `ColorCompositeSemanticToken` to `MultipleColorTokens` to keep "composite" word for *Figma* design system
- [Library] Elevation colors have been merged into "multiple" objects colors to have less variables and manage color schemes
- [Library] Rename `ColorCompositeSemanticToken` to `MultipleColorSemanticToken` to keep "composite" word for *Figma* design system
- [Library] Elevation colors have been merged into composite colors to have less variables and manage color schemes
- [Library] Rename `SpacingCompositeSemanticToken` to `MultipleSpacingTokens` to keep "composite" word for *Figma* design system
- [Library] Rename `SizingCompositeSemanticToken` to `MultipleSizingTokens` to keep "composite" word for *Figma* design system
- [Library] Rename `ColorCompositeSemanticToken` to `MultipleColorTokens` to keep "composite" word for *Figma* design system
- [Library] Elevation colors have been merged into "multiple" objects colors to have less variables and manage color schemes
- [Library] Update color semantic tokens to better manage light and dark modes values
- [Library] Update elevation colors focus light and dark
- [Library] Rename space padding inline component tokens by removing "component" word
- [Library] Improve documentation about raw and semantic tokens definitions ([#127](#127))
- [Library] Improve documentation about raw tokens definitions
- [Library] Move composite tokens elsewhere to help parser ([#129](#129))
- [Library] Improve documentation about raw and semantic tokens definitions ([#127](#127))
- [Library] Rename some sizing semantic tokens ([#122](#122))
- [Library] Replace "adaptable" word by "scaled" in space semantic tokens, "fix" by "fixed" and remove "layout" ([#117](#117))

Removed

- [Library] Color semantic token `colorBackgroundEmphasizedSecondary`, `colorOnBackground` variants
- [Library] Remove raw tokens `elevationZIndex` ([#119](#119))

Fixed

- [Library] Blur values for elevation composite raw tokens

Co-authored-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
Co-authored-by: Ludovic Pinel <ludovic.pinel@orange.com>
Co-authored-by: Tayeb Sedraia <tayeb.sedraia@orange.com>
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
@pylapp
Copy link
Member

pylapp commented Oct 4, 2024 •
edited
Loading

New version available since version v0.3.0 (see this thread)

@pylapp pylapp removed the 🆕 feature Related to features label Oct 17, 2024
@B3nz01d B3nz01d moved this from In Progress to Done in [OUDS] Project Nov 22, 2024
@B3nz01d B3nz01d closed this as completed by moving to Done in [OUDS] Project Nov 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ludovic35 ludovic35

Labels
📱 demo app Update of the Demo App
Projects
[OUDS] Project
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[#120] Create the token section in the demo app Orange-OpenSource/ouds-ios
3 participants
@pylapp @ludovic35 @B3nz01d