Skip to content

Commit

Permalink
refactor: architecture for components tokens
Browse files Browse the repository at this point in the history
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
  • Loading branch information
pylapp committed Jan 8, 2025
1 parent 9aa2d12 commit 6ce7cb5
Show file tree
Hide file tree
Showing 14 changed files with 155 additions and 25 deletions.
20 changes: 16 additions & 4 deletions OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme.swift
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
//

import Foundation
import OUDSTokensComponent
import OUDSTokensSemantic

/// This is a basic theme any theme must be a subclass off, or all themes must have as ancestor.
Expand All @@ -29,7 +30,7 @@ import OUDSTokensSemantic
/// - Since: 0.8.0
open class OUDSTheme: @unchecked Sendable {

// MARK: - Properties
// MARK: - Semantic tokens

/// All color semantic tokens exposed in one object
public let colors: AllColorSemanticTokensProvider
Expand Down Expand Up @@ -58,7 +59,12 @@ open class OUDSTheme: @unchecked Sendable {
/// All size semantic tokens exposed in one object
public let spaces: AllSpaceSemanticTokensProvider

// TODO: Add components tokens
// MARK: - Component tokens

// TODO: Wrap all components tokens provider inside one dedicated wrapper?

/// All components tokens related to `OUDSButton`
public let button: AllButtonComponentTokens

// MARK: - Initializers

Expand All @@ -73,14 +79,16 @@ open class OUDSTheme: @unchecked Sendable {
/// - opacities: An object providing all the opacity semantic tokens
/// - sizes: An object providing all the size semantic tokens
/// - spaces: An object providing all the space semantic tokens
/// - button: An object providing all the component tokens for an `OUDSButton`
public init(colors: AllColorSemanticTokensProvider,
borders: AllBorderSemanticTokensProvider,
elevations: AllElevationSemanticTokensProvider,
fonts: AllFontSemanticTokensProvider,
grids: AllGridSemanticTokensProvider,
opacities: AllOpacitySemanticTokensProvider,
sizes: AllSizeSemanticTokensProvider,
spaces: AllSpaceSemanticTokensProvider) {
spaces: AllSpaceSemanticTokensProvider,
button: AllButtonComponentTokens) {
self.colors = colors
self.borders = borders
self.elevations = elevations
Expand All @@ -90,6 +98,7 @@ open class OUDSTheme: @unchecked Sendable {
self.opacities = opacities
self.sizes = sizes
self.spaces = spaces
self.button = button
}

/// Defines a basic kind of abstract theme to subclass then.
Expand All @@ -103,6 +112,7 @@ open class OUDSTheme: @unchecked Sendable {
/// - opacities: An object providing all the opacity semantic tokens, as `AllOpacitySemanticTokensProvider` implementation
/// - sizes: An object providing all the size semantic tokens, as `AllSizeSemanticTokens` implementation
/// - spaces: An object providing all the space semantic tokens, as `AllSpaceSemanticTokensProvider` implementation
/// - button: An object providing all the component tokens for an `OUDSButton`
public init(colors: AllColorSemanticTokensProvider,
borders: AllBorderSemanticTokensProvider,
elevations: AllElevationSemanticTokensProvider,
Expand All @@ -111,7 +121,8 @@ open class OUDSTheme: @unchecked Sendable {
grids: AllGridSemanticTokensProvider,
opacities: AllOpacitySemanticTokensProvider,
sizes: AllSizeSemanticTokensProvider,
spaces: AllSpaceSemanticTokensProvider) {
spaces: AllSpaceSemanticTokensProvider,
button: AllButtonComponentTokens) {
self.colors = colors
self.borders = borders
self.elevations = elevations
Expand All @@ -121,6 +132,7 @@ open class OUDSTheme: @unchecked Sendable {
self.opacities = opacities
self.sizes = sizes
self.spaces = spaces
self.button = button
}

deinit { }
Expand Down
39 changes: 37 additions & 2 deletions OUDS/Core/Themes/Orange/Sources/OrangeTheme.swift
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

import OUDS
import OUDSFoundations
import OUDSTokensComponent
import OUDSTokensSemantic

// swiftlint:disable line_length
Expand Down Expand Up @@ -62,14 +63,16 @@ open class OrangeTheme: OUDSTheme, @unchecked Sendable {
/// - opacities: An object providing all the opacity semantic tokens, as `AllOpacitySemanticTokensProvider` implementation, default set to ``OrangeThemeOpacitySemanticTokensProvider``
/// - sizes: An object providing all the size semantic tokens, as `AllSizeSemanticTokensProvider` implementation, default set to ``OrangeThemeSizeSemanticTokensProvider``
/// - spaces: An object providing all the space semantic tokens, as `AllSpaceSemanticTokensProvider` implementation, default set to ``OrangeThemeSpaceSemanticTokensProvider``
/// - button: An object providing all the component tokens for an `OUDSButton`
override public init(colors: AllColorSemanticTokensProvider = OrangeThemeColorSemanticTokensProvider(),
borders: AllBorderSemanticTokensProvider = OrangeThemeBorderSemanticTokensProvider(),
elevations: AllElevationSemanticTokensProvider = OrangeThemeElevationSemanticTokensProvider(),
fonts: AllFontSemanticTokensProvider = OrangeThemeFontSemanticTokensProvider(),
grids: AllGridSemanticTokensProvider = OrangeThemeGridSemanticTokensProvider(),
opacities: AllOpacitySemanticTokensProvider = OrangeThemeOpacitySemanticTokensProvider(),
sizes: AllSizeSemanticTokensProvider = OrangeThemeSizeSemanticTokensProvider(),
spaces: AllSpaceSemanticTokensProvider = OrangeThemeSpaceSemanticTokensProvider()) {
spaces: AllSpaceSemanticTokensProvider = OrangeThemeSpaceSemanticTokensProvider(),
button: AllButtonComponentTokens) {
OUDSLogger.debug("Init of OrangeTheme")
super.init(colors: colors,
borders: borders,
Expand All @@ -78,7 +81,39 @@ open class OrangeTheme: OUDSTheme, @unchecked Sendable {
grids: grids,
opacities: opacities,
sizes: sizes,
spaces: spaces)
spaces: spaces,
button: button)
}

/// Initializes the `OrangeTheme` and lets children classes to user their own tokens implementations.
/// Uses the given tokens of sizes, borders, colors and spaces to define the `AllButtonComponentTokens` to use (here `OrangeThemeButtonComponentTokensProvider`)
/// - Parameters:
/// - colors: An object providing all the color semantic tokens, as `AllColorSemanticTokens` implementation, default set to ``OrangeThemeColorSemanticTokensProvider``
/// - borders: An object providing all the border semantic tokens, as `AllBorderSemanticTokensProvider` implementation, default set to ``OrangeThemeBorderSemanticTokensProvider``
/// - elevations: An object providing all the elevation semantic tokens, by default `AllElevationSemanticTokensProvider`, default set to ``OrangeThemeElevationSemanticTokensProvider``
/// - fonts: An object providing all the font semantic tokens, by default `AllFontemanticTokens`, default set to ``OrangeThemeFontSemanticTokensProvider``
/// - grids: An object providing all the grid semantic tokens, by default `AllGridSemanticTokensProvider`, default set to ``OrangeThemeGridSemanticTokensProvider``
/// - opacities: An object providing all the opacity semantic tokens, as `AllOpacitySemanticTokensProvider` implementation, default set to ``OrangeThemeOpacitySemanticTokensProvider``
/// - sizes: An object providing all the size semantic tokens, as `AllSizeSemanticTokensProvider` implementation, default set to ``OrangeThemeSizeSemanticTokensProvider``
/// - spaces: An object providing all the space semantic tokens, as `AllSpaceSemanticTokensProvider` implementation, default set to ``OrangeThemeSpaceSemanticTokensProvider``
public init(colors: AllColorSemanticTokensProvider = OrangeThemeColorSemanticTokensProvider(),
borders: AllBorderSemanticTokensProvider = OrangeThemeBorderSemanticTokensProvider(),
elevations: AllElevationSemanticTokensProvider = OrangeThemeElevationSemanticTokensProvider(),
fonts: AllFontSemanticTokensProvider = OrangeThemeFontSemanticTokensProvider(),
grids: AllGridSemanticTokensProvider = OrangeThemeGridSemanticTokensProvider(),
opacities: AllOpacitySemanticTokensProvider = OrangeThemeOpacitySemanticTokensProvider(),
sizes: AllSizeSemanticTokensProvider = OrangeThemeSizeSemanticTokensProvider(),
spaces: AllSpaceSemanticTokensProvider = OrangeThemeSpaceSemanticTokensProvider()) {
OUDSLogger.debug("Init of OrangeTheme")
super.init(colors: colors,
borders: borders,
elevations: elevations,
fonts: fonts,
grids: grids,
opacities: opacities,
sizes: sizes,
spaces: spaces,
button: OrangeThemeButtonComponentTokensProvider(sizes: sizes, borders: borders, colors: colors, spaces: spaces))
}

deinit { }
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
//
// 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 OUDSFoundations
import OUDSTokensComponent
import OUDSTokensSemantic

/// Defines a provider of component tokens for `OUDSButton`.
/// Implements `ButtonsComponentTokensRequirements` so as to be forced to get the needed semantic token providers
/// to be able to use them later for definition of `ButtonsComponentTokens`
///
/// - Since: 0.10.0
open class OrangeThemeButtonComponentTokensProvider: ButtonsComponentTokensRequirements {

public var sizes: AllSizeSemanticTokensProvider
public var borders: AllBorderSemanticTokensProvider
public var colors: AllColorSemanticTokensProvider
public var spaces: AllSpaceSemanticTokensProvider

init(sizes: AllSizeSemanticTokensProvider,
borders: AllBorderSemanticTokensProvider,
colors: AllColorSemanticTokensProvider,
spaces: AllSpaceSemanticTokensProvider) {
OUDSLogger.debug("Init of OrangeThemeButtonComponentTokensProvider")
self.sizes = sizes
self.borders = borders
self.colors = colors
self.spaces = spaces
}

deinit{ }
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
//
// 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 OUDSTokensComponent
import OUDSTokensRaw
import OUDSTokensSemantic

// [File to generate and upload with the tokenator]

extension OrangeThemeButtonComponentTokensProvider: ButtonsComponentTokens {

public var buttonSizeMaxHeight: SizeSemanticToken { DimensionRawTokens.dimension600 }
public var buttonBorderRadius: BorderRadiusSemanticToken { borders.borderRadiusNone }
public var buttonColorBgDefaultFocusMono: MultipleColorSemanticTokens { colors.colorRepositoryOpacityBlackHigher }

// ...
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
//
// 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
//

/// Provider of component tokens for buttons are embeded in `OUDSTheme` as both `ButtonsComponentTokens` and`ButtonsComponentTokensRequirements`
/// to force users to implement these two protocols so as to be able to use semantic tokens providers
public typealias AllButtonComponentTokens = ButtonsComponentTokens & ButtonsComponentTokensRequirements
Original file line number Diff line number Diff line change
Expand Up @@ -13,34 +13,32 @@

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

// swiftlint:disable missing_docs

/// - Since: 0.10.0
public protocol ButtonsComponentTokensRequirements {
var sizes: AllSizeSemanticTokensProvider { get }
var borders: AllBorderSemanticTokensProvider { get }
var colors: AllColorSemanticTokensProvider { get }
var spaces: AllSpaceSemanticTokensProvider { get }
}

/// This is a component tokens list for buttons like `OUDSButton`.
/// **Warning: This is a draft component **
///
/// - Since: 0.8.0
/// - Since: 0.10.0
public protocol ButtonsComponentTokens {

/*
NOTE:
1. Maybe composite tokens for border can be useful to define several types of buttons
2. Maybe a composite tokens should be defined and used to gather all these atomic semantic tokens
*/
// MARK: - Components tokens for buttons

var buttonInternalSpacing: SpaceSemanticToken { get }

var buttonBorderStyle: BorderStyleSemanticToken { get }
var buttonBorderColor: ColorSemanticToken { get }
var buttonBorderWidth: BorderWidthSemanticToken { get }
var buttonSizeMaxHeight: SizeSemanticToken { get }
var buttonBorderRadius: BorderRadiusSemanticToken { get }
var buttonColorBgDefaultFocusMono: MultipleColorSemanticTokens { get }

var buttonForegroundColor: ColorSemanticToken { get }
var buttonBackgroundColor: ColorSemanticToken { get }

var buttonWidth: SizeSemanticToken { get }
var buttonHeight: SizeSemanticToken { get }

var buttonFont: MultipleFontCompositeRawTokens { get }
// ...
}

// swiftlint:enable missing_docs

0 comments on commit 6ce7cb5

Please sign in to comment.