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

[B3nz01d]

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

[ludovic35]

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

• Dimention spacing [[Demo App] Add spacing screen  #149
• Dimention sizing [[Demo App] Add sizing token screen #150]
• Gid [[Demo App] Add Grid token screen #151]
• Colors [[Demo App] Add Colors token screen #152]

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

[B3nz01d]

@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

[pylapp]

📣 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]

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