Skip to content

Commit

Permalink
feat: add composite tokens for box shadows in elevation tokens (#32)
Browse files Browse the repository at this point in the history 
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
  • Loading branch information
@pylapp
pylapp committed Aug 6, 2024
1 parent d89fcad commit 2f206b9
Show file tree
Hide file tree
Showing 11 changed files with 362 additions and 13 deletions.
28 changes: 28 additions & 0 deletions OUDS/Core/Themes/Sources/Inverse/InverseTheme+ElevationSemanticTokens.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import Foundation
import OUDSTokensRaw
import OUDSTokensSemantic

// swiftlint:disable line_length
extension InverseTheme {

// MARK: Semantic token - Elevation - Color - None
Expand Down Expand Up @@ -61,4 +62,31 @@ extension InverseTheme {

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
28 changes: 28 additions & 0 deletions ...re/Themes/Sources/Shared/OUDSTheme+SemanticTokens/OUDSTheme+ElevationSemanticTokens.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ 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.
Expand Down Expand Up @@ -130,4 +131,31 @@ extension OUDSTheme: ElevationSemanticTokens {

@objc open var elevationColorFocusLight: ElevationColorSemanticToken { ColorRawTokens.colorTransparentWhite900 }
@objc open var elevationColorFocusDark: 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
11 changes: 11 additions & 0 deletions OUDS/Core/Themes/Tests/Inverse/TestInverseThemeElevationColors.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,15 @@ final class InverseThemeElevationColors: XCTestCase {
XCTAssertEqual(inverseTheme.elevationColorStickyNavigationScrolledLight, inverseTheme.elevationColorStickyNavigationScrolledDark)
XCTAssertEqual(inverseTheme.elevationColorFocusLight, inverseTheme.elevationColorFocusDark)
}

func testElevationBoxShadowsEquality() throws {
XCTAssertEqual(inverseTheme.elevationBoxShadowRaisedLight, inverseTheme.elevationBoxShadowRaisedDark)
XCTAssertEqual(inverseTheme.elevationBoxShadowDragLight, inverseTheme.elevationBoxShadowDragDark)
XCTAssertEqual(inverseTheme.elevationBoxShadowOverlayDefaultLight, inverseTheme.elevationBoxShadowOverlayDefaultDark)
XCTAssertEqual(inverseTheme.elevationBoxShadowOverlayEmphasisLight, inverseTheme.elevationBoxShadowOverlayEmphasisDark)
XCTAssertEqual(inverseTheme.elevationBoxShadowStickyDefaultLight, inverseTheme.elevationBoxShadowStickyDefaultDark)
XCTAssertEqual(inverseTheme.elevationBoxShadowStickyEmphasisLight, inverseTheme.elevationBoxShadowStickyEmphasisDark)
XCTAssertEqual(inverseTheme.elevationBoxShadowStickyNavigationScrolledLight, inverseTheme.elevationBoxShadowStickyNavigationScrolledDark)
XCTAssertEqual(inverseTheme.elevationBoxShadowFocusLight, inverseTheme.elevationBoxShadowFocusDark)
}
}
50 changes: 50 additions & 0 deletions OUDS/Core/Themes/Tests/Shared/TestThemeOverrideOfElevationSemanticTokens.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,4 +246,54 @@ final class TestThemeOverrideOfElevationSemanticTokens: XCTestCase {
XCTAssertNotEqual(inheritedTheme.elevationColorFocusDark, abstractTheme.elevationColorFocusDark)
XCTAssertTrue(inheritedTheme.elevationColorFocusDark == MockTheme.mockThemeColorRawToken)
}

func testInheritedThemeCanOverrideElevationBpxShadowSemanticTokens() throws {
XCTAssertNotEqual(inheritedTheme.elevationBoxShadowRaisedLight, abstractTheme.elevationBoxShadowRaisedLight)
XCTAssertTrue(inheritedTheme.elevationBoxShadowRaisedLight == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowRaisedDark, abstractTheme.elevationBoxShadowRaisedDark)
XCTAssertTrue(inheritedTheme.elevationBoxShadowRaisedDark == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowDragLight, abstractTheme.elevationBoxShadowDragLight)
XCTAssertTrue(inheritedTheme.elevationBoxShadowDragLight == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowDragDark, abstractTheme.elevationBoxShadowDragDark)
XCTAssertTrue(inheritedTheme.elevationBoxShadowDragDark == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowOverlayDefaultLight, abstractTheme.elevationBoxShadowOverlayDefaultLight)
XCTAssertTrue(inheritedTheme.elevationBoxShadowOverlayDefaultLight == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowOverlayDefaultDark, abstractTheme.elevationBoxShadowOverlayDefaultDark)
XCTAssertTrue(inheritedTheme.elevationBoxShadowOverlayDefaultDark == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowOverlayEmphasisLight, abstractTheme.elevationBoxShadowOverlayEmphasisLight)
XCTAssertTrue(inheritedTheme.elevationBoxShadowOverlayEmphasisLight == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowOverlayEmphasisDark, abstractTheme.elevationBoxShadowOverlayEmphasisDark)
XCTAssertTrue(inheritedTheme.elevationBoxShadowOverlayEmphasisDark == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowStickyDefaultLight, abstractTheme.elevationBoxShadowStickyDefaultLight)
XCTAssertTrue(inheritedTheme.elevationBoxShadowStickyDefaultLight == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowStickyDefaultDark, abstractTheme.elevationBoxShadowStickyDefaultDark)
XCTAssertTrue(inheritedTheme.elevationBoxShadowStickyDefaultDark == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowStickyEmphasisLight, abstractTheme.elevationBoxShadowStickyEmphasisLight)
XCTAssertTrue(inheritedTheme.elevationBoxShadowStickyEmphasisLight == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowStickyEmphasisDark, abstractTheme.elevationBoxShadowStickyEmphasisDark)
XCTAssertTrue(inheritedTheme.elevationBoxShadowStickyEmphasisDark == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowStickyNavigationScrolledLight, abstractTheme.elevationBoxShadowStickyNavigationScrolledLight)
XCTAssertTrue(inheritedTheme.elevationBoxShadowStickyNavigationScrolledLight == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowStickyNavigationScrolledDark, abstractTheme.elevationBoxShadowStickyNavigationScrolledDark)
XCTAssertTrue(inheritedTheme.elevationBoxShadowStickyNavigationScrolledDark == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowFocusLight, abstractTheme.elevationBoxShadowFocusLight)
XCTAssertTrue(inheritedTheme.elevationBoxShadowFocusLight == MockTheme.mockThemeBoxShadowRawToken)

XCTAssertNotEqual(inheritedTheme.elevationBoxShadowFocusDark, abstractTheme.elevationBoxShadowFocusDark)
XCTAssertTrue(inheritedTheme.elevationBoxShadowFocusDark == MockTheme.mockThemeBoxShadowRawToken)
}
}
31 changes: 31 additions & 0 deletions OUDS/Core/Themes/Tests/Shared/_/MockTheme+ElevationSemanticTokens.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ extension MockTheme {
static let mockThemeBlurRawToken: ElevationRawToken = 816
static let mockThemeSpreadRawToken: ElevationRawToken = 80085
static let mockThemeColorRawToken: ColorRawToken = ColorRawTokens.colorFunctionalMalachite500
static let mockThemeBoxShadowRawToken: ElevationBoxShadowRawToken = ElevationBoxShadowRawToken(x: 118,
y: 712,
blur: 118,
spread: 218,
color: ColorRawTokens.colorFunctionalDodgerBlue800)

// MARK: Semantic token - Elevation - Z index

Expand Down Expand Up @@ -133,4 +138,30 @@ extension MockTheme {

override var elevationColorFocusLight: ElevationColorSemanticToken { Self.mockThemeColorRawToken }
override var elevationColorFocusDark: ElevationColorSemanticToken { Self.mockThemeColorRawToken }

// MARK: Semantic token - Elevation - Box shadow

override var elevationBoxShadowRaisedLight: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }
override var elevationBoxShadowRaisedDark: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }

override var elevationBoxShadowDragLight: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }
override var elevationBoxShadowDragDark: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }

override var elevationBoxShadowOverlayDefaultLight: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }
override var elevationBoxShadowOverlayDefaultDark: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }

override var elevationBoxShadowOverlayEmphasisLight: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }
override var elevationBoxShadowOverlayEmphasisDark: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }

override var elevationBoxShadowStickyDefaultLight: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }
override var elevationBoxShadowStickyDefaultDark: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }

override var elevationBoxShadowStickyEmphasisLight: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }
override var elevationBoxShadowStickyEmphasisDark: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }

override var elevationBoxShadowStickyNavigationScrolledLight: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }
override var elevationBoxShadowStickyNavigationScrolledDark: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }

override var elevationBoxShadowFocusLight: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }
override var elevationBoxShadowFocusDark: ElevationBoxShadowSemanticToken { Self.mockThemeBoxShadowRawToken }
}
Loading

0 comments on commit 2f206b9

Please sign in to comment.