Skip to content

Commit

Permalink
feat: add first versions of raw and semantic tokens for elevation
Browse files Browse the repository at this point in the history
The aim of this commit is to bring first version of raw tokens and semantic tokens for elevation.
It updates existing raw and semantic tokens, and improves the unit tests (raw tokens order relationships and theme overriding for semantic tokens).

This commit does not close the related issue (n°32) as some topics must still be tackled.

The merge of this first version will help to check ou CI/CD chain velocity with unit tests and the production release.
Related to pull request n°59.

Acked-by: Ludovic Pinel <[email protected]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
  • Loading branch information
pylapp authored Aug 7, 2024
1 parent 2aa7294 commit bd373b4
Show file tree
Hide file tree
Showing 16 changed files with 1,023 additions and 52 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

- [Library] Add raw tokens and semantic tokens for opacity ([#29](https://github.com/Orange-OpenSource/ouds-ios/issues/29))
- [Showcase] Publication of comment on issues about new alpha build upload on TestFlight ([#56](https://github.com/Orange-OpenSource/ouds-ios/issues/56))
- [Library] Add raw tokens and semantic tokens for elevation ([#32](https://github.com/Orange-OpenSource/ouds-ios/issues/32))
- [Library] Add raw tokens and semantic tokens for border ([#30](https://github.com/Orange-OpenSource/ouds-ios/issues/30))
- [Library] Define Swift Package architecture of library and tokens (raw and semantic) ([#33](https://github.com/Orange-OpenSource/ouds-ios/issues/33))
- [Showcase] Distribute demo app development version ([#12](https://github.com/Orange-OpenSource/ouds-ios/issues/12))
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
//
// Software Name: OUDS iOS
// SPDX-FileCopyrightText: Copyright (c) Orange SA
// SPDX-License-Identifier: MIT
//
// This software is distributed under the MIT license,
// the text of which is available at https://opensource.org/license/MIT/
// or see the "LICENSE" file for more details.
//
// Authors: See CONTRIBUTORS.txt
// Software description: A SwiftUI components library with code examples for Orange Unified Design System
//

import Foundation
import OUDSTokensRaw
import OUDSTokensSemantic

// swiftlint:disable line_length
extension InverseTheme {

// MARK: Semantic token - Elevation - Color - None

public override var elevationColorNoneLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack0 }
public override var elevationColorNoneDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack0 }

// MARK: Semantic token - Elevation - Color - Raised

public override var elevationColorRaisedLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack500 }
public override var elevationColorRaisedDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack500 }

// MARK: Semantic token - Elevation - Color - Drag

public override var elevationColorDragLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack600 }
public override var elevationColorDragDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack600 }

// MARK: Semantic token - Elevation - Color - Overlay - Default

public override var elevationColorOverlayDefaultLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }
public override var elevationColorOverlayDefaultDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }

// MARK: Semantic token - Elevation - Color - Overlay - Emphasis

public override var elevationColorOverlayEmphasisLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
public override var elevationColorOverlayEmphasisDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }

// MARK: Semantic token - Elevation - Color - Sticky - Default

public override var elevationColorStickyDefaultLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
public override var elevationColorStickyDefaultDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }

// MARK: Semantic token - Elevation - Color - Sticky - Emphasis

public override var elevationColorStickyEmphasisLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
public override var elevationColorStickyEmphasisDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }

// MARK: Semantic token - Elevation - Color - Sticky - Navigation scrolled

public override var elevationColorStickyNavigationScrolledLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
public override var elevationColorStickyNavigationScrolledDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }

// MARK: Semantic token - Elevation - Color - Focus

public override var elevationColorFocusLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentWhite900 }
public override var elevationColorFocusDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentWhite900 }

// MARK: Semantic token - Elevation - Box shadow

public override var elevationBoxShadowRaisedLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_1_500 }
public override var elevationBoxShadowRaisedDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_1_500 }

public override var elevationBoxShadowDragLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_600 }
public override var elevationBoxShadowDragDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_600 }

public override var elevationBoxShadowOverlayDefaultLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_2_400 }
public override var elevationBoxShadowOverlayDefaultDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_2_400 }

public override var elevationBoxShadowOverlayEmphasisLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_5_300 }
public override var elevationBoxShadowOverlayEmphasisDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_5_300 }

public override var elevationBoxShadowStickyDefaultLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_300 }
public override var elevationBoxShadowStickyDefaultDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_300 }

public override var elevationBoxShadowStickyEmphasisLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_300 }
public override var elevationBoxShadowStickyEmphasisDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_300 }

public override var elevationBoxShadowStickyNavigationScrolledLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_1_500 }
public override var elevationBoxShadowStickyNavigationScrolledDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_1_500 }

public override var elevationBoxShadowFocusLight: ElevationBoxShadowSemanticToken { ElevationBoxShadowRawToken(x: 0, y: 0, blur: 0, spread: 3, color: ColorRawTokens.colorTransparentWhite900) }
public override var elevationBoxShadowFocusDark: ElevationBoxShadowSemanticToken { ElevationBoxShadowRawToken(x: 0, y: 0, blur: 0, spread: 3, color: ColorRawTokens.colorTransparentWhite900) }
}
// swiftlint:enable line_length
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,11 @@ import Foundation
import OUDSTokensRaw
import OUDSTokensSemantic

// swiftlint:disable line_length
/// Defines basic values common to all themes for `ElevationSemanticTokenss`.
/// These values can be overriden inside `OUDSTheme` subclasses (in extensions or not, in the same module or not) thanks to the `@objc open` combination.
/// The aim of this extensions is to make relationships between all semantic tokens for elevations and associated raw tokens.
/// `OUDSTheme` can be seen as a kind of "abstract class" in _object oriented paradigm_.
extension OUDSTheme: ElevationSemanticTokens {

// MARK: Semantic token - Elevation - Z index
Expand Down Expand Up @@ -46,7 +49,7 @@ extension OUDSTheme: ElevationSemanticTokens {
@objc open var elevationXStickyDefault: ElevationZIndexSemanticToken { ElevationRawTokens.elevationX0 }
@objc open var elevationXStickyEmphasis: ElevationZIndexSemanticToken { ElevationRawTokens.elevationX0 }
@objc open var elevationXStickyNavigationScrolled: ElevationZIndexSemanticToken { ElevationRawTokens.elevationX0 }
@objc open var elevationXFOcus: ElevationZIndexSemanticToken { ElevationRawTokens.elevationX0 }
@objc open var elevationXFocus: ElevationZIndexSemanticToken { ElevationRawTokens.elevationX0 }

// MARK: Semantic token - Elevation - Y

Expand Down Expand Up @@ -86,56 +89,73 @@ extension OUDSTheme: ElevationSemanticTokens {

// MARK: Semantic token - Elevation - Color - None

@objc open var elevationColorNoneLigh: ElevationColorSemanticToken { ColorRawTokens.colorTransparentWhite0 }
@objc open var elevationColorNoneDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentWhite0 }
@objc open var elevationColorNoneInverse: ElevationColorSemanticToken { ColorRawTokens.colorTransparentWhite0 }
@objc open var elevationColorNoneLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack0 }
@objc open var elevationColorNoneDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack0 }

// MARK: Semantic token - Elevation - Color - Raised

@objc open var elevationColorRaisedLigh: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack500 }
@objc open var elevationColorRaisedLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack500 }
@objc open var elevationColorRaisedDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack500 }
@objc open var elevationColorRaisedInverse: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack500 }

// MARK: Semantic token - Elevation - Color - Drag

@objc open var elevationColorDragLigh: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack600 }
@objc open var elevationColorDragLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack600 }
@objc open var elevationColorDragDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack600 }
@objc open var elevationColorDragInverse: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack600 }

// MARK: Semantic token - Elevation - Color - Overlay - Default

@objc open var elevationColorOverlayDefaultLigh: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }
@objc open var elevationColorOverlayDefaultLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }
@objc open var elevationColorOverlayDefaultDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }
@objc open var elevationColorOverlayDefaultInverse: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }

// MARK: Semantic token - Elevation - Color - Overlay - Emphasis

@objc open var elevationColorOverlayEmphasisLigh: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorOverlayEmphasisLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorOverlayEmphasisDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorOverlayEmphasisInverse: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }

// MARK: Semantic token - Elevation - Color - Sticky - Default

@objc open var elevationColorStickyDefaultLigh: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }
@objc open var elevationColorStickyDefaultDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }
@objc open var elevationColorStickyDefaultInverse: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }
@objc open var elevationColorStickyDefaultLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyDefaultDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }

// MARK: Semantic token - Elevation - Color - Sticky - Emphasis

@objc open var elevationColorStickyEmphasisLigh: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyEmphasisLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyEmphasisDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyEmphasisInverse: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }

// MARK: Semantic token - Elevation - Color - Sticky - Navigation scrolled

@objc open var elevationColorStickyNavigationScrolledLigh: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyNavigationScrolledLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyNavigationScrolledDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyNavigationScrolledInverse: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }

// MARK: Semantic token - Elevation - Color - Focus

@objc open var elevationColorFocusLigh: ElevationColorSemanticToken { ColorRawTokens.colorTransparentWhite900 }
@objc open var elevationColorFocusLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentWhite900 }
@objc open var elevationColorFocusDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentWhite900 }
@objc open var elevationColorFocusInverse: ElevationColorSemanticToken { ColorRawTokens.colorTransparentWhite900 }

// MARK: Semantic token - Elevation - Box shadow

@objc open var elevationBoxShadowRaisedLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_1_500 }
@objc open var elevationBoxShadowRaisedDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_1_500 }

@objc open var elevationBoxShadowDragLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_600 }
@objc open var elevationBoxShadowDragDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_600 }

@objc open var elevationBoxShadowOverlayDefaultLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_2_400 }
@objc open var elevationBoxShadowOverlayDefaultDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_2_400 }

@objc open var elevationBoxShadowOverlayEmphasisLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_5_300 }
@objc open var elevationBoxShadowOverlayEmphasisDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_5_300 }

@objc open var elevationBoxShadowStickyDefaultLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_300 }
@objc open var elevationBoxShadowStickyDefaultDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_300 }

@objc open var elevationBoxShadowStickyEmphasisLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_300 }
@objc open var elevationBoxShadowStickyEmphasisDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_3_300 }

@objc open var elevationBoxShadowStickyNavigationScrolledLight: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_1_500 }
@objc open var elevationBoxShadowStickyNavigationScrolledDark: ElevationBoxShadowSemanticToken { ElevationRawTokens.elevationBoxShadowBottom_1_500 }

@objc open var elevationBoxShadowFocusLight: ElevationBoxShadowSemanticToken { ElevationBoxShadowRawToken(x: 0, y: 0, blur: 0, spread: 3, color: ColorRawTokens.colorTransparentWhite900) }
@objc open var elevationBoxShadowFocusDark: ElevationBoxShadowSemanticToken { ElevationBoxShadowRawToken(x: 0, y: 0, blur: 0, spread: 3, color: ColorRawTokens.colorTransparentWhite900) }
}
// swiftlint:enable line_length
Loading

0 comments on commit bd373b4

Please sign in to comment.