Skip to content

Commit

Permalink
refactor: use of multiple type for elevation semantic tokens (#279)
Browse files Browse the repository at this point in the history
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
  • Loading branch information
pylapp committed Nov 20, 2024
1 parent 93dbd3f commit 0752f24
Show file tree
Hide file tree
Showing 10 changed files with 303 additions and 102 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,15 @@ import Foundation
import OUDSTokensRaw
import OUDSTokensSemantic

// ଘ( ・ω・)_/゚・:*:・。☆
// [File to generate with the tokenator with Figma able to output composites and tokenatoer able to manage them]
// WARNING: Not synchronized anymore with the Figjam / Figma by developers team
// [File not generated with the tokenator]
// WARNING: Not synchronized with the Figjam / Figma by developers team
// Create an issue for update https://github.com/Orange-OpenSource/ouds-ios/issues/new?template=token_update.yml

/// Defines basic values common to all themes for `ElevationCompositeSemanticTokens`.
/// 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_.
///
/// The *tokenator* is not able to provide code for such "composite" objects because the *Figma* tool itself cannot manage that and does not output anything in its JSON to process/
/// It defines in fact box shadows effects.
extension OUDSTheme: ElevationCompositeSemanticTokens {

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
//
// 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

// [File not generated by the tokenator]
// WARNING: Not synchronized anymore with the Figjam / Figma by developers team
// Create an issue for update https://github.com/Orange-OpenSource/ouds-ios/issues/new?template=token_update.yml

/// Defines wrapper objects for eelvation color semantic tokens.
/// These values can be overriden inside `OUDSTheme` subclasses (in extensions or not, in the same module or not) thanks to the `@objc open` combination.
extension OUDSTheme: ElevationMultipleSemanticTokens {

@objc open var elevationColorDrag: MultipleColorTokens { MultipleColorTokens(ColorRawTokens.colorTransparentBlack500) }
@objc open var elevationColorNone: MultipleColorTokens { MultipleColorTokens(ColorRawTokens.colorTransparentBlack0) }
@objc open var elevationColorOverlayDefault: MultipleColorTokens { MultipleColorTokens(ColorRawTokens.colorTransparentBlack400) }
@objc open var elevationColorOverlayEmphasized: MultipleColorTokens { MultipleColorTokens(ColorRawTokens.colorTransparentBlack300) }
@objc open var elevationColorRaised: MultipleColorTokens { MultipleColorTokens(ColorRawTokens.colorTransparentBlack500) }
@objc open var elevationColorStickyDefault: MultipleColorTokens { MultipleColorTokens(ColorRawTokens.colorTransparentBlack300) }
@objc open var elevationColorStickyEmphasized: MultipleColorTokens { MultipleColorTokens(ColorRawTokens.colorTransparentBlack300) }
@objc open var elevationColorStickyNavigationScrolled: MultipleColorTokens { MultipleColorTokens(ColorRawTokens.colorTransparentBlack300) }
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ import Foundation
import OUDSTokensRaw
import OUDSTokensSemantic

// swiftlint:disable identifier_name

extension OUDSTheme: ElevationSemanticTokens {

@objc open var elevationBlurDrag: ElevationBlurSemanticToken { ElevationRawTokens.elevationBlur400 }
@objc open var elevationBlurNone: ElevationBlurSemanticToken { ElevationRawTokens.elevationBlur0 }
@objc open var elevationBlurOverlayDefault: ElevationBlurSemanticToken { ElevationRawTokens.elevationBlur300 }
Expand All @@ -24,6 +27,7 @@ extension OUDSTheme: ElevationSemanticTokens {
@objc open var elevationBlurStickyDefault: ElevationBlurSemanticToken { ElevationRawTokens.elevationBlur400 }
@objc open var elevationBlurStickyEmphasized: ElevationBlurSemanticToken { ElevationRawTokens.elevationBlur400 }
@objc open var elevationBlurStickyNavigationScrolled: ElevationBlurSemanticToken { ElevationRawTokens.elevationBlur400 }

@objc open var elevationXDrag: ElevationXSemanticToken { ElevationRawTokens.elevationX0 }
@objc open var elevationXNone: ElevationXSemanticToken { ElevationRawTokens.elevationX0 }
@objc open var elevationXOverlayDefault: ElevationXSemanticToken { ElevationRawTokens.elevationX0 }
Expand All @@ -32,6 +36,7 @@ extension OUDSTheme: ElevationSemanticTokens {
@objc open var elevationXStickyDefault: ElevationXSemanticToken { ElevationRawTokens.elevationX0 }
@objc open var elevationXStickyEmphasized: ElevationXSemanticToken { ElevationRawTokens.elevationX0 }
@objc open var elevationXStickyNavigationScrolled: ElevationXSemanticToken { ElevationRawTokens.elevationX0 }

@objc open var elevationYDrag: ElevationYSemanticToken { ElevationRawTokens.elevationY300 }
@objc open var elevationYNone: ElevationYSemanticToken { ElevationRawTokens.elevationY0 }
@objc open var elevationYOverlayDefault: ElevationYSemanticToken { ElevationRawTokens.elevationY200 }
Expand All @@ -40,12 +45,23 @@ extension OUDSTheme: ElevationSemanticTokens {
@objc open var elevationYStickyDefault: ElevationYSemanticToken { ElevationRawTokens.elevationY300 }
@objc open var elevationYStickyEmphasized: ElevationYSemanticToken { ElevationRawTokens.elevationY300 }
@objc open var elevationYStickyNavigationScrolled: ElevationYSemanticToken { ElevationRawTokens.elevationY300 }
@objc open var elevationColorDrag: ElevationColorSemanticToken { ElevationColorSemanticToken(ColorRawTokens.colorTransparentBlack500) }
@objc open var elevationColorNone: ElevationColorSemanticToken { ElevationColorSemanticToken(ColorRawTokens.colorTransparentBlack0) }
@objc open var elevationColorOverlayDefault: ElevationColorSemanticToken { ElevationColorSemanticToken(ColorRawTokens.colorTransparentBlack400) }
@objc open var elevationColorOverlayEmphasized: ElevationColorSemanticToken { ElevationColorSemanticToken(ColorRawTokens.colorTransparentBlack300) }
@objc open var elevationColorRaised: ElevationColorSemanticToken { ElevationColorSemanticToken(ColorRawTokens.colorTransparentBlack500) }
@objc open var elevationColorStickyDefault: ElevationColorSemanticToken { ElevationColorSemanticToken(ColorRawTokens.colorTransparentBlack300) }
@objc open var elevationColorStickyEmphasized: ElevationColorSemanticToken { ElevationColorSemanticToken(ColorRawTokens.colorTransparentBlack300) }
@objc open var elevationColorStickyNavigationScrolled: ElevationColorSemanticToken { ElevationColorSemanticToken(ColorRawTokens.colorTransparentBlack300) }

@objc open var elevationColorDragLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack500 }
@objc open var elevationColorDragDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack500 }
@objc open var elevationColorNoneLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack0 }
@objc open var elevationColorNoneDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack0 }
@objc open var elevationColorOverlayDefaultLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }
@objc open var elevationColorOverlayDefaultDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack400 }
@objc open var elevationColorOverlayEmphasizedLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorOverlayEmphasizedDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorRaisedLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack500 }
@objc open var elevationColorRaisedDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack500 }
@objc open var elevationColorStickyDefaultLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyDefaultDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyEmphasizedLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyEmphasizedDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyNavigationScrolledLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
@objc open var elevationColorStickyNavigationScrolledDark: ElevationColorSemanticToken { ColorRawTokens.colorTransparentBlack300 }
}

// swiftlint:enable identifier_name
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ extension MockTheme {
static let mockThemeElevationYRawToken: ElevationRawToken = 713
static let mockThemeElevationBlurRawToken: ElevationRawToken = 816
static let mockThemeElevationColorRawToken: ColorRawToken = ColorRawTokens.colorFunctionalMalachite500
static let mockThemeElevationMultipleColorSemanticToken = ElevationColorSemanticToken(mockThemeElevationColorRawToken)
static let mockThemeElevationMultipleColorSemanticToken = MultipleColorTokens(mockThemeElevationColorRawToken)

// MARK: Semantic token - Elevation - X

Expand Down Expand Up @@ -58,36 +58,34 @@ extension MockTheme {
override open var elevationBlurStickyEmphasized: ElevationBlurSemanticToken { Self.mockThemeElevationBlurRawToken }
override open var elevationBlurStickyNavigationScrolled: ElevationBlurSemanticToken { Self.mockThemeElevationBlurRawToken }

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

override open var elevationColorNone: ElevationColorSemanticToken { Self.mockThemeElevationMultipleColorSemanticToken }

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

override open var elevationColorRaised: ElevationColorSemanticToken { Self.mockThemeElevationMultipleColorSemanticToken }

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

override open var elevationColorDrag: ElevationColorSemanticToken { Self.mockThemeElevationMultipleColorSemanticToken }

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

override open var elevationColorOverlayDefault: ElevationColorSemanticToken { Self.mockThemeElevationMultipleColorSemanticToken }

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

override open var elevationColorOverlayEmphasized: ElevationColorSemanticToken { Self.mockThemeElevationMultipleColorSemanticToken }

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

override open var elevationColorStickyDefault: ElevationColorSemanticToken { Self.mockThemeElevationMultipleColorSemanticToken }

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

override open var elevationColorStickyEmphasized: ElevationColorSemanticToken { Self.mockThemeElevationMultipleColorSemanticToken }

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

override open var elevationColorStickyNavigationScrolled: ElevationColorSemanticToken { Self.mockThemeElevationMultipleColorSemanticToken }
// MARK: Semantic token - Elevation - Color (Multiples)

override open var elevationColorNone: MultipleColorTokens { Self.mockThemeElevationMultipleColorSemanticToken }
override open var elevationColorRaised: MultipleColorTokens { Self.mockThemeElevationMultipleColorSemanticToken }
override open var elevationColorDrag: MultipleColorTokens { Self.mockThemeElevationMultipleColorSemanticToken }
override open var elevationColorOverlayDefault: MultipleColorTokens { Self.mockThemeElevationMultipleColorSemanticToken }
override open var elevationColorOverlayEmphasized: MultipleColorTokens { Self.mockThemeElevationMultipleColorSemanticToken }
override open var elevationColorStickyDefault: MultipleColorTokens { Self.mockThemeElevationMultipleColorSemanticToken }
override open var elevationColorStickyEmphasized: MultipleColorTokens { Self.mockThemeElevationMultipleColorSemanticToken }
override open var elevationColorStickyNavigationScrolled: MultipleColorTokens { Self.mockThemeElevationMultipleColorSemanticToken }

// MARK: Semantic token - Elevation - Color (semantic tokens)

override open var elevationColorNoneLight: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorNoneDark: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorRaisedLight: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorRaisedDark: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorDragLight: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorDragDark: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorOverlayDefaultLight: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorOverlayDefaultDark: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorOverlayEmphasizedLight: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorOverlayEmphasizedDark: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorStickyDefaultLight: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorStickyDefaultDark: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorStickyEmphasizedLight: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorStickyEmphasizedDark: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorStickyNavigationScrolledLight: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
override open var elevationColorStickyNavigationScrolledDark: ElevationColorSemanticToken { Self.mockThemeElevationColorRawToken }
}
// swiftlint:enable identifier_name
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
//
// 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 OUDS
import XCTest

// swiftlint:disable required_deinit
// swiftlint:disable implicitly_unwrapped_optional
// swiftlint:disable type_name

/// The architecture of _OUDS iOS_ _Swift package_ library is based on _object oriented paradigm_ and overriding of classes.
/// In fact, the `OUDSTheme` object is a class, which can be seen as an _asbtract class_, exposing through its extensions and protocols _elevation semantic tokens_.
/// These semantic tokens should be overriden by subclass like the `OrangeTheme` default theme.
/// **These tests checks if any _elevation semantic tokens_ can be surcharged by a child theme**
final class TestThemeOverrideOfElevationMultipleSemanticTokens: XCTestCase {

private var abstractTheme: OUDSTheme!
private var inheritedTheme: OUDSTheme!

override func setUp() async throws {
abstractTheme = OUDSTheme()
inheritedTheme = MockTheme()
}

// MARK: - Semantic token - Elevation - Colors

func testInheritedThemeCanOverrideSemanticTokenElevationColorNone() throws {
XCTAssertNotEqual(inheritedTheme.elevationColorNone, abstractTheme.elevationColorNone)
XCTAssertTrue(inheritedTheme.elevationColorNone.isEqual(MockTheme.mockThemeElevationMultipleColorSemanticToken))
}

func testInheritedThemeCanOverrideSemanticTokenElevationColorRaised() throws {
XCTAssertNotEqual(inheritedTheme.elevationColorRaised, abstractTheme.elevationColorRaised)
XCTAssertTrue(inheritedTheme.elevationColorRaised.isEqual(MockTheme.mockThemeElevationMultipleColorSemanticToken))
}

func testInheritedThemeCanOverrideSemanticTokenElevationColorDrag() throws {
XCTAssertNotEqual(inheritedTheme.elevationColorDrag, abstractTheme.elevationColorDrag)
XCTAssertTrue(inheritedTheme.elevationColorDrag.isEqual(MockTheme.mockThemeElevationMultipleColorSemanticToken))
}

func testInheritedThemeCanOverrideSemanticTokenElevationColorOverlayDefault() throws {
XCTAssertNotEqual(inheritedTheme.elevationColorOverlayDefault, abstractTheme.elevationColorOverlayDefault)
XCTAssertTrue(inheritedTheme.elevationColorOverlayDefault.isEqual(MockTheme.mockThemeElevationMultipleColorSemanticToken))
}

func testInheritedThemeCanOverrideSemanticTokenElevationColorOverlayEmphasized() throws {
XCTAssertNotEqual(inheritedTheme.elevationColorOverlayEmphasized, abstractTheme.elevationColorOverlayEmphasized)
XCTAssertTrue(inheritedTheme.elevationColorOverlayEmphasized.isEqual(MockTheme.mockThemeElevationMultipleColorSemanticToken))
}

func testInheritedThemeCanOverrideSemanticTokenElevationColorStickyDefault() throws {
XCTAssertNotEqual(inheritedTheme.elevationColorStickyDefault, abstractTheme.elevationColorStickyDefault)
XCTAssertTrue(inheritedTheme.elevationColorStickyDefault.isEqual(MockTheme.mockThemeElevationMultipleColorSemanticToken))
}

func testInheritedThemeCanOverrideSemanticTokenElevationColorStickyEmphasized() throws {
XCTAssertNotEqual(inheritedTheme.elevationColorStickyEmphasized, abstractTheme.elevationColorStickyEmphasized)
XCTAssertTrue(inheritedTheme.elevationColorStickyEmphasized.isEqual(MockTheme.mockThemeElevationMultipleColorSemanticToken))
}

func testInheritedThemeCanOverrideSemanticTokenElevationColorStickyNavigationScrolled() throws {
XCTAssertNotEqual(inheritedTheme.elevationColorStickyNavigationScrolled, abstractTheme.elevationColorStickyNavigationScrolled)
XCTAssertTrue(inheritedTheme.elevationColorStickyNavigationScrolled.isEqual(MockTheme.mockThemeElevationMultipleColorSemanticToken))
}
}

// swiftlint:enable required_deinit
// swiftlint:enable implicitly_unwrapped_optional
// swiftlint:enable type_name
Loading

0 comments on commit 0752f24

Please sign in to comment.