-
Notifications
You must be signed in to change notification settings - Fork 0
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
Comments
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
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]>
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]>
This comment was marked as resolved.
This comment was marked as resolved.
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.
It's a token that is a group of raw values (and sometimes associated with a cascade of raw tokens). // 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. |
This comment was marked as resolved.
This comment was marked as resolved.
It follows the CSS syntax: https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow#syntaxe (in French) |
This comment was marked as duplicate.
This comment was marked as duplicate.
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
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]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
This comment was marked as resolved.
This comment was marked as resolved.
FYI first version delivered with commit bd373b4 and released before version 0.1.0 |
This comment was marked as outdated.
This comment was marked as outdated.
Related to #32 Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
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. |
Related to #32 Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
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]>
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]>
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]>
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]>
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]>
FYI finaly defined the suitable formula to convert Figma elevation effect to SwiftUI shadow effect. |
📣 New TestFlight ALPHA upload 🚀
This is an automated message sent with Fastlane from our CI/CD pipeline 🤘 |
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]>
ℹ️ FYI available since version v0.2.0. Go to the discussion for more details 🚀 |
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.
Reminder: there will be in the end 3 layers of tokens:
Tokens: Elevation
Raw primitive values
Z-index
X
Y
Blur
Spread
Box shadow (Composite)
Caution
Figma doesn't accept composite tokens
Semantic applications
Z-index
X
Y
Blur
Spread
Color
Box shadow (Composite)
Caution
Figma doesn't accept composite tokens
Study
Technical details
TODO
The text was updated successfully, but these errors were encountered: