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

Tokens: Elevation #32

Closed
1 task done
julien-deramond opened this issue Jul 2, 2024 · 18 comments · Fixed by #80 or #105
Closed
1 task done

Tokens: Elevation #32

julien-deramond opened this issue Jul 2, 2024 · 18 comments · Fixed by #80 or #105
Assignees
Labels
🗳️ feature Related to features 🧬 token Related to tokens (raws, semantics or components)

Comments

@julien-deramond
Copy link
Contributor

julien-deramond commented Jul 2, 2024

Description

The aim of this issue is to study and implement the elevation 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.

  • 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 iOS.
    • These tokens cannot be used by developers using OUDS iOS.
  • Semantic applications: Depends on raw primitive values.
    • Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS iOS.
    • These tokens can be used by developers using OUDS iOS.
  • Component applications: Depends on semantic applications.:
    • Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS iOS.
    • These tokens can be used by developers using OUDS iOS.

Tokens: Elevation

Raw primitive values

Z-index

Token name Token value
elevation-z-index-0 0
elevation-z-index--9999 -9999
elevation-z-index-1000 1000
elevation-z-index-1010 1010
elevation-z-index-1020 1020
elevation-z-index-1030 1030
elevation-z-index-1035 1035
elevation-z-index-1038 1038
elevation-z-index-1040 1040
elevation-z-index-1045 1045
elevation-z-index-1050 1050
elevation-z-index-1060 1060
elevation-z-index-1070 1070
elevation-z-index-1080 1080
elevation-z-index-1090 1090

X

Token name Token value
elevation-x-0 0

Y

Token name Token value
elevation-y-0 0
elevation-y-100 1
elevation-y-200 2
elevation-y-300 4
elevation-y-400 8
elevation-y-500 12
elevation-y-600 20

Blur

Token name Token value
elevation-blur-0 0
elevation-blur-100 1
elevation-blur-200 2
elevation-blur-300 3
elevation-blur-400 4
elevation-blur-500 8
elevation-blur-600 12
elevation-blur-700 20

Spread

Token name Token value
elevation-spread-n100 -1
elevation-spread-n200 -2
elevation-spread-n300 -4
elevation-spread-n400 -8
elevation-spread-0 0
elevation-spread-300 3

Box shadow (Composite)

Caution

Figma doesn't accept composite tokens

Token name Token value
elevation-bottom-0 box-shadow: 0 0px 0px 0 rgba({core.color.transparent.black.0});
elevation-bottom-1-100 box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.100});
elevation-bottom-1-200 box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.200});
elevation-bottom-1-300 box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.300});
elevation-bottom-1-400 box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.400});
elevation-bottom-1-500 box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.500});
elevation-bottom-1-600 box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.600});
elevation-bottom-2-100 box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.100});
elevation-bottom-2-200 box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.200});
elevation-bottom-2-300 box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.300});
elevation-bottom-2-400 box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.400});
elevation-bottom-2-500 box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.500});
elevation-bottom-2-600 box-shadow: 0 2px 3px 0 rgba({core.color.transparent.black.600});
elevation-bottom-3-100 box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.100});
elevation-bottom-3-200 box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.200});
elevation-bottom-3-300 box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.300});
elevation-bottom-3-400 box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.400});
elevation-bottom-3-500 box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.500});
elevation-bottom-3-600 box-shadow: 0 4px 4px -1px rgba({core.color.transparent.black.600});
elevation-bottom-4-100 box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.100});
elevation-bottom-4-200 box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.200});
elevation-bottom-4-300 box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.300});
elevation-bottom-4-400 box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.400});
elevation-bottom-4-500 box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.500});
elevation-bottom-4-600 box-shadow: 0 8px 8px -2px rgba({core.color.transparent.black.600});
elevation-bottom-5-100 box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.100});
elevation-bottom-5-200 box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.200});
elevation-bottom-5-300 box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.300});
elevation-bottom-5-400 box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.400});
elevation-bottom-5-500 box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.500});
elevation-bottom-5-600 box-shadow: 0 12px 12px -4px rgba({core.color.transparent.black.600});
elevation-bottom-6-100 box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.100});
elevation-bottom-6-200 box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.200});
elevation-bottom-6-300 box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.300});
elevation-bottom-6-400 box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.400});
elevation-bottom-6-500 box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.500});
elevation-bottom-6-600 box-shadow: 0 20px 20px -8px rgba({core.color.transparent.black.600});

Semantic applications

Z-index

Token name Token value
elevation-z-index-deep elevation-zindex--9999
elevation-z-index-default elevation-zindex-0
elevation-z-index-dropdown elevation-zindex-1000
elevation-z-index-sticky elevation-zindex-1020
elevation-z-index-fixed elevation-zindex-1030
elevation-z-index-back-to-top elevation-zindex-1035
elevation-z-index-spinner elevation-zindex-1038
elevation-z-index-offcanvas-backdrop elevation-zindex-1040
elevation-z-index-offcanvas elevation-zindex-1045
elevation-z-index-modal-backdrop elevation-zindex-1050
elevation-z-index-modal elevation-zindex-1060
elevation-z-index-popover elevation-zindex-1070
elevation-z-index-tooltip elevation-zindex-1080
elevation-z-index-toast elevation-zindex-1090

X

Token name Token value
elevation-x-none elevation-x-0
elevation-x-raised elevation-x-0
elevation-x-drag elevation-x-0
elevation-x-overlay-default elevation-x-0
elevation-x-overlay-emphasized elevation-x-0
elevation-x-sticky-default elevation-x-0
elevation-x-sticky-emphasized elevation-x-0
elevation-x-sticky-navigation-scrolled elevation-x-0
elevation-x-focus elevation-x-0

Y

Token name Token value
elevation-y-none elevation-y-0
elevation-y-raised elevation-y-100
elevation-y-drag elevation-y-300
elevation-y-overlay-default elevation-y-200
elevation-y-overlay-emphasized elevation-y-500
elevation-y-sticky-default elevation-y-300
elevation-y-sticky-emphasized elevation-y-300
elevation-y-sticky-navigation-scrolled elevation-y-300
elevation-y-focus elevation-y-0

Blur

Token name Token value
elevation-blur-none elevation-blur-0
elevation-blur-raised elevation-blur-200
elevation-blur-drag elevation-blur-400
elevation-blur-overlay-default elevation-blur-300
elevation-blur-overlay-emphasized elevation-blur-600
elevation-blur-sticky-default elevation-blur-400
elevation-blur-sticky-emphasized elevation-blur-400
elevation-blur-sticky-navigation-scrolled elevation-blur-400
elevation-blur-focus elevation-blur-0

Spread

Token name Token value
elevation-spread-none elevation-spread-0
elevation-spread-raised elevation-spread-0
elevation-spread-drag elevation-spread-n100
elevation-spread-overlay-default elevation-spread-n100
elevation-spread-overlay-emphasized elevation-spread-n300
elevation-spread-sticky-default elevation-spread-n100
elevation-spread-sticky-emphasized elevation-spread-n100
elevation-spread-sticky-navigation-scrolled elevation-spread-n100
elevation-spread-focus elevation-spread-300

Color

Token name Token value (light) Token value (inverse) Token value (dark)
elevation-color-none color-transparent-black-0 color-transparent-black-0 color-transparent-black-0
elevation-color-raised color-transparent-black-500 color-transparent-black-500 color-transparent-black-500
elevation-color-drag color-transparent-black-600 color-transparent-black-600 color-transparent-black-600
elevation-color-overlay-default color-transparent-black-400 color-transparent-black-400 color-transparent-black-400
elevation-color-overlay-emphasized color-transparent-black-300 color-transparent-black-300 color-transparent-black-300
elevation-color-sticky-default color-transparent-black-300 color-transparent-black-300 color-transparent-black-300
elevation-color-sticky-emphasized color-transparent-black-300 color-transparent-black-300 color-transparent-black-300
elevation-color-sticky-navigation-scrolled color-transparent-black-300 color-transparent-black-300 color-transparent-black-300
elevation-color-focus color-transparent-white-900 color-transparent-white-900 color-transparent-white-900

Box shadow (Composite)

Caution

Figma doesn't accept composite tokens

Token name Token value (light) Token value (inverse) Token value (dark)
elevation-none elevation-bottom-0 elevation-bottom-0 elevation-bottom-0
elevation-raised elevation-bottom-1-500 elevation-bottom-1-500 elevation-bottom-1-500
elevation-drag elevation-bottom-3-500 elevation-bottom-3-500 elevation-bottom-3-500
elevation-overlay-default elevation-bottom-2-400 elevation-bottom-2-400 elevation-bottom-2-400
elevation-overlay-emphasized elevation-bottom-5-300 elevation-bottom-5-300 elevation-bottom-5-300
elevation-sticky-default elevation-bottom-3-300 elevation-bottom-3-300 elevation-bottom-3-300
elevation-sticky-emphasized elevation-bottom-3-300 elevation-bottom-3-300 elevation-bottom-3-300
elevation-sticky-navigation-scrolled elevation-bottom-3-300 elevation-bottom-3-300 elevation-bottom-3-300
elevation-focus box-shadow: 0 0px 0px 3px rgba({sys-color-transparent-black-900}); box-shadow: 0 0px 0px 3px rgba({sys-color-transparent-white-900}); box-shadow: 0 0px 0px 3px rgba({sys-color-transparent-white-900});

Study

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

Technical details

TODO

@julien-deramond julien-deramond added 🗳️ feature Related to features ⚠️ on hold Not blocked but should not be processed yet labels Jul 2, 2024
@pylapp

This comment was marked as off-topic.

@pylapp pylapp self-assigned this Aug 4, 2024
@julien-deramond julien-deramond moved this from Triage to Todo in ⚛️ [OUDS] Project Aug 5, 2024
@julien-deramond julien-deramond removed the ⚠️ on hold Not blocked but should not be processed yet label Aug 5, 2024
@pylapp

This comment was marked as resolved.

@pylapp

This comment was marked as resolved.

pylapp added a commit that referenced this issue Aug 5, 2024
Review and fix draft raw and semantic tokens for elevation.
Add unit tests for elevations raw tokens.
Add unit tests for eelvation semantic tokens overriding.
Add unit tests for inverse theme colors.

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Aug 5, 2024
Review and fix draft raw and semantic tokens for elevation.
Add unit tests for elevations raw tokens.
Add unit tests for eelvation semantic tokens overriding.
Add unit tests for inverse theme colors.

Tested-by: Pierre-Yves Lapersonne <[email protected]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@pylapp pylapp linked a pull request Aug 5, 2024 that will close this issue
15 tasks
@julien-deramond

This comment was marked as resolved.

@julien-deramond
Copy link
Contributor Author

About the colors, we agreed with Android side to put the "inverse" colors in a dedicaed "Inverse theme".

Be careful, the color definition/specification is not defined/finalized yet. We might have only the light and dark modes, and the "inverse" being the contextual dark mode.

@julien-deramond is "Box shadow (Composite)" a raw token for elevation too?
Is so, what does box-shadow: 0 1px 2px 0 rgba({core.color.transparent.black.100}); mean?

It's a token that is a group of raw values (and sometimes associated with a cascade of raw tokens).
Its value would be 0 1px 2px 0 rgba({core.color.transparent.black.100}); (which is not correct as you wouldn't have rgba which is already in core.color.transparent.black.100 btw).
In the web world, it would mean something like that, for instance, https://codepen.io/julien-deramond/pen/jOjwywZ:

// Raw

$color-black: #000;
$opacity-100: 0.04;
$color-transparent-black-100: rgba($color-black , $opacity-100);
$elevation-box-shadow-bottom-1-100: 0 1px 2px 0 $color-transparent-black-100;

// Semantic

$elevation-box-shadow-something: $elevation-box-shadow-bottom-1-100;

.example-element {
  box-shadow: $elevation-box-shadow-something;
}

On your side, it might be handled differently.

@pylapp

This comment was marked as resolved.

@julien-deramond
Copy link
Contributor Author

Ok, but I would like to know what are the 0 1px 2px 0 values in your raw token.
I needed to understand what they are and how they should be used so as to define this token in iOS side.

It follows the CSS syntax: https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow#syntaxe (in French)

@pylapp pylapp added the 💥 blocking Issue can go further and is blocked by something label Aug 6, 2024
@pylapp

This comment was marked as duplicate.

pylapp added a commit that referenced this issue Aug 6, 2024
pylapp added a commit that referenced this issue Aug 6, 2024
pylapp added a commit that referenced this issue Aug 6, 2024
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Aug 7, 2024
Review and fix draft raw and semantic tokens for elevation.
Add unit tests for elevations raw tokens.
Add unit tests for eelvation semantic tokens overriding.
Add unit tests for inverse theme colors.

Tested-by: Pierre-Yves Lapersonne <[email protected]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Aug 7, 2024
pylapp added a commit that referenced this issue Aug 7, 2024
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@pylapp

This comment was marked as resolved.

@pylapp
Copy link
Member

pylapp commented Aug 21, 2024

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

@pylapp

This comment was marked as outdated.

pylapp added a commit that referenced this issue Sep 6, 2024
Related to #32

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@pylapp pylapp mentioned this issue Sep 6, 2024
9 tasks
@pylapp pylapp linked a pull request Sep 6, 2024 that will close this issue
9 tasks
@pylapp

This comment was marked as resolved.

@pylapp

This comment was marked as resolved.

@pylapp
Copy link
Member

pylapp commented Sep 10, 2024

Tokens workshop 27_06

@pylapp
Copy link
Member

pylapp commented Sep 10, 2024

Find attached a ZIP archive containing the Swift demo code and its Git patch, and also 2 screenshots (iPhone and iPad) showing the rendering of the elevation effects.

elevation effects tests.zip

pylapp added a commit that referenced this issue Sep 12, 2024
Related to #32

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Sep 12, 2024
Does not close related issue because some of the specifications must be validated, again.
However we don't want to keep stale branches, thus in an incremental way we merge this current version.

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@github-project-automation github-project-automation bot moved this from In Progress to Done in ⚛️ [OUDS] Project Sep 12, 2024
@pylapp pylapp reopened this Sep 12, 2024
@github-project-automation github-project-automation bot moved this from Done to Triage in ⚛️ [OUDS] Project Sep 12, 2024
@pylapp pylapp moved this from Triage to In Progress in ⚛️ [OUDS] Project Sep 12, 2024
pylapp added a commit that referenced this issue Sep 17, 2024
Shadow effect of elevation can be computed only with Figma blur, thus the spread is useless. Related to #32 but does not resolve it

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@pylapp pylapp removed the 💥 blocking Issue can go further and is blocked by something label Sep 17, 2024
pylapp added a commit that referenced this issue Sep 17, 2024
Shadow effect of elevation can be computed only with Figma blur, thus the spread is useless.

Closes #32

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Sep 17, 2024
Shadow effect of elevation can be computed only with Figma blur, thus the spread is useless.

Closes #32

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
pylapp added a commit that referenced this issue Sep 17, 2024
Shadow effect of elevation can be computed only with Figma blur, thus the spread is useless.

Closes #32

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
@pylapp
Copy link
Member

pylapp commented Sep 17, 2024

FYI finaly defined the suitable formula to convert Figma elevation effect to SwiftUI shadow effect.
We don't use spread anymore, only blur.
This was thelast blocking point to close this issue :)

@github-project-automation github-project-automation bot moved this from In Progress to Done in ⚛️ [OUDS] Project Sep 17, 2024
@pylapp
Copy link
Member

pylapp commented Sep 18, 2024

📣 New TestFlight ALPHA upload 🚀

  • Display name: OUDS Showcase ALPHA (78, 40, 9, 32, 106, 94, 87, 58, 89)
  • Version: 0.2.0
  • Build number: 1726677063
  • Build tag: fcb55ec
  • Build type: ALPHA
  • Build details (GitHub):78, 40, 9, 32, 106, 94, 87, 58, 89

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

pylapp added a commit that referenced this issue Sep 19, 2024
Released of version 0.2.0
See below the full CHANGELOG details.

Added:
- [Tests] Add UI regression tests using snapshot comparisons with *swift-snapshot-testing* tool ([#78](#78))
- [DemoApp] Display fake components for elevation rendering tests
- [Library] A theme can now override the custom font family
- [Tests] Add more unit tests for theme overriding and raw tokens controls
- [Library] Add and update raw and semantic grid tokens ([#40](#40))
- [Library] Manage regular and compact layouts for sizing and spacing tokens
- [Library] "Box shadow 0" has been defined and "elevation drag" changed
- [Doc] Create the basics of a documentation ([#9](#9))
- [Library] Add more semanttic and raw tokens for typography
- [Library] Add more semantic and raw tokens for typography, and SwiftUI API to apply them
- [Library] Computation of SwiftUI radius from Figma blur and spread values for elevation tokens
- [Library] Add elevation tokens ([#32](#32))

Changed:
- [Library] Split raws, semantics and components tokens definitions and also values, composites and type aliases
- [Showcase] Improve Fastlane alpha build notifications
- [Library] Do not store blur value in elevation semantic tokens
- [Library] Change type aliases for X and Y offsets of elevations tokens
- [Library] Update border semantic tokens values ([#106](#106))
- [Showcase] Add fake components for demo and tokens tests
- [Library] Remove spread value for elevation tokens
- [Library] Remove paragraph spacing tokens for typography
- [Library] Term "fluid" has been replaced by "adaptable" in spacing semantic tokens
- [Doc] Improve DocC documentation about tokens and views extensions
- [Doc] Add more details in release documentation
- [Library] Rename semantic token "opacityEmphasized" to "opacityStrong" ([#94](#94))
- [Library] Update value of opacity raw token "opacity800" from 0.88 to 0.80 ([#87](#87))
- [Tests] Add missing unit tests for opacity raw tokens
- [Library] "OUDSThemesCommons" product has been renamed to "OUDS"

Removed:
- [Library] Remove Z Index tokens for elevations ([#109](#109))
- [Library] Remove token "borderRadiusPill" and "borderRadiusCircle" ([#58](#58))
- [Library] "Emphasis" words have been replaced by "emphasized"
- [Library] "Box shadow" words have been removed in elevation semantic and raw tokens 

Fixed:
- [Library] Fix some typos in documentation ([#89](#89))

Acked-by: Ludovic Pinel <[email protected]>
Co-authored-by: Ludovic Pinel <[email protected]>
Co-authored-by: Pierre-Yves Lapersonne <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
@pylapp
Copy link
Member

pylapp commented Sep 19, 2024

ℹ️ FYI available since version v0.2.0. Go to the discussion for more details 🚀

@pylapp pylapp added the 🧬 token Related to tokens (raws, semantics or components) label Sep 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🗳️ feature Related to features 🧬 token Related to tokens (raws, semantics or components)
Projects
None yet
2 participants