Version 0.9.0 (#381)

Release of version 0.9.0 See below the full CHANGELOG details. Added: - [Library] Button component tokens (tokenator *20250109124012*) - [Library] Size semantic tokens `sizeIconWithLabelMediumSizeXs` and `sizeIconWithLabelSmallSizeXs` - [Library] Color semantic tokens `colorOpacityLowest*`, `colorOpacityLower*`, `colorChartBorder*` and `colorChartBorderContrast*` Changed: - [Library] Rename color semantic tokens `colorContentOnStatusEmphasizedNeutral*` to `colorContentOnStatusEmphasizedAlt*` - [Library] Rename color semantic tokens `colorOpacityInvisibleBlack*` to `colorOpacityTransparent*` - [Library] Update color tokens and size tokens (tokenator *20250108083200*, tokens *v24.12.17*, tokens *v24.12.18*) - [Library] Add details about API versions in documentation ([#374](#374)) - [DemoApp] Update show code text ([#361](#361)) Removed: - [Library] `colorOpacityInvisibleWhite*`, `colorContentOnActionNegative*` color semantic tokens Signed-off-by: Pierre-Yves Lapersonne <[email protected]> Co-authored-by: Pierre-Yves Lapersonne <[email protected]> Co-authored-by: Ludovic Pinel <[email protected]> Co-authored-by: boosted-bot <[email protected]>
Orange-OpenSource · Jan 9, 2025 · 681c874 · 681c874
2 parents 921db77 + b8a4c19
commit 681c874
Show file tree

Hide file tree

Showing 129 changed files with 1,778 additions and 237 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.0](https://github.com/Orange-OpenSource/ouds-ios/compare/0.8.0...0.9.0) - 2025-01-09
+
+### Added
+
+- [Library] Button component tokens (tokenator *20250109124012*)
+- [Library] Size semantic tokens `sizeIconWithLabelMediumSizeXs` and `sizeIconWithLabelSmallSizeXs`
+- [Library] Color semantic tokens `colorOpacityLowest*`, `colorOpacityLower*`, `colorChartBorder*` and `colorChartBorderContrast*`
+
+### Changed
+
+- [Library] Rename color semantic tokens `colorContentOnStatusEmphasizedNeutral*` to `colorContentOnStatusEmphasizedAlt*`
+- [Library] Rename color semantic tokens `colorOpacityInvisibleBlack*` to `colorOpacityTransparent*`
+- [Library] Update color tokens and size tokens (tokenator *20250108083200*, tokens *v24.12.17*, tokens *v24.12.18*)
+- [Library] Add details about API versions in documentation ([#374](https://github.com/Orange-OpenSource/ouds-ios/issues/374))
+- [DemoApp] Update show code text ([#361](https://github.com/Orange-OpenSource/ouds-ios/issues/361))
+
+### Removed
+
+- [Library] `colorOpacityInvisibleWhite*`, `colorContentOnActionNegative*` color semantic tokens
+
 ## [0.8.0](https://github.com/Orange-OpenSource/ouds-ios/compare/0.7.0...0.8.0) - 2024-12-18
 
 ### Added

diff --git a/OUDS/Core/Components/Sources/ViewModifiers/AccessibleModifiers/AccessibleModifiers.swift b/OUDS/Core/Components/Sources/ViewModifiers/AccessibleModifiers/AccessibleModifiers.swift
@@ -70,6 +70,8 @@ struct RequestAccessibleFocusModifier: ViewModifier {
 ///         .oudsRequestAccessibleFocus(_requestFocus, for: .some(id: elements[0].id))
 ///     }
 /// ```
+///
+/// - Since: 0.8.0
 public enum AccessibilityFocusable: Hashable {
     case none
     case some(id: String)

diff --git a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme.swift b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme.swift
@@ -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.
@@ -25,9 +26,11 @@ import OUDSTokensSemantic
 /// Because `OUDSTheme` is not a *final* class, its type cannot be seen as `Sendable`, that is the reason why this conformity is unchecked.
 ///
 /// **Warning: You are not supposed to use this abstract default theme directly. Please prefer `OrangeTheme` instead**
+///
+/// - 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
@@ -56,7 +59,10 @@ open class OUDSTheme: @unchecked Sendable {
     /// All size semantic tokens exposed in one object
     public let spaces: AllSpaceSemanticTokensProvider
 
-    // TODO: Add components tokens
+    // MARK: - Component tokens
+
+    /// All components tokens related to button components like `OUDSButton`
+    public let button: AllButtonComponentTokensProvider
 
     // MARK: - Initializers
 
@@ -71,14 +77,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 buttons
     public init(colors: AllColorSemanticTokensProvider,
                 borders: AllBorderSemanticTokensProvider,
                 elevations: AllElevationSemanticTokensProvider,
                 fonts: AllFontSemanticTokensProvider,
                 grids: AllGridSemanticTokensProvider,
                 opacities: AllOpacitySemanticTokensProvider,
                 sizes: AllSizeSemanticTokensProvider,
-                spaces: AllSpaceSemanticTokensProvider) {
+                spaces: AllSpaceSemanticTokensProvider,
+                button: AllButtonComponentTokensProvider) {
         self.colors = colors
         self.borders = borders
         self.elevations = elevations
@@ -88,6 +96,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.
@@ -101,6 +110,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 buttons
     public init(colors: AllColorSemanticTokensProvider,
                 borders: AllBorderSemanticTokensProvider,
                 elevations: AllElevationSemanticTokensProvider,
@@ -109,7 +119,8 @@ open class OUDSTheme: @unchecked Sendable {
                 grids: AllGridSemanticTokensProvider,
                 opacities: AllOpacitySemanticTokensProvider,
                 sizes: AllSizeSemanticTokensProvider,
-                spaces: AllSpaceSemanticTokensProvider) {
+                spaces: AllSpaceSemanticTokensProvider,
+                button: AllButtonComponentTokensProvider) {
         self.colors = colors
         self.borders = borders
         self.elevations = elevations
@@ -119,6 +130,7 @@ open class OUDSTheme: @unchecked Sendable {
         self.opacities = opacities
         self.sizes = sizes
         self.spaces = spaces
+        self.button = button
     }
 
     deinit { }

diff --git a/OUDS/Core/OUDS/Sources/OUDSTheme/Views/OUDSThemeableView.swift b/OUDS/Core/OUDS/Sources/OUDSTheme/Views/OUDSThemeableView.swift
@@ -67,6 +67,7 @@ extension EnvironmentValues {
 ///         YourRootView()
 ///     }
 ///
+/// - Since: 0.8.0
 public struct OUDSThemeableView<Content>: View where Content: View {
 
     private let theme: OUDSTheme

diff --git a/OUDS/Core/OUDS/Sources/OUDSUserInterfaceSizeClass.swift b/OUDS/Core/OUDS/Sources/OUDSUserInterfaceSizeClass.swift
@@ -75,6 +75,8 @@ extension EnvironmentValues {
 ///     @Environment(\.oudsHorizontalSizeClass) var horizontalSizeClass
 ///     @Environment(\.oudsVerticalSizeClass) var verticalSizeClass
 /// ```
+///
+/// - Since: 0.8.0
 public enum OUDSUserInterfaceSizeClass: String, Sendable {
     case extraCompact = "Extra Compact"
     case compact = "Compact"

diff --git a/OUDS/Core/OUDS/Sources/_OUDS.docc/Tokens.md b/OUDS/Core/OUDS/Sources/_OUDS.docc/Tokens.md
@@ -23,7 +23,44 @@ flowchart TD
 
 ## Component tokens
 
-No _tokens_ ([OUDSTokensComponent](https://ios.unified-design-system.orange.com/documentation/oudstokenscomponent/)) are defined for components yet.
+### What they are
+
+These _tokens_ ([OUDSTokensComponent](https://ios.unified-design-system.orange.com/documentation/oudstokenscomponent/)) are defined for components and refer to semantic tokens or raw tokens.
+They can be seen as a kind of bridge between components and in the end primitive values of the design kit.
+
+Components tokens are defined and gathered inside _Swift protocol_ so as to be exposed then through implementation of `OUDSTheme` thanks to dedicated tokens providers. Because we choose to split responsabilities and objects into their own modules, we faced troubles to make possible for children themes or providers to override properties declared in _protocols_ and defined in _extensions_.
+That is the reason why tokens are exposed as `@objc open` to be available and overridable anywhere. 
+
+```swift
+// Declare some component tokens for buttons with properties they must apply
+public protocol ButtonComponentTokens {
+    var buttonSizeMaxHeight: SizeSemanticToken { get }
+    var buttonBorderWidthDefault: BorderWidthSemanticToken { get }
+    var buttonBorderRadius: BorderRadiusSemanticToken { get }
+    var buttonColorBgDefaultPressedMono: MultipleColorSemanticTokens { get }
+    var buttonSpacePaddingBlock: SpaceSemanticToken { get }
+}
+
+// There is an existing provider for such tokens
+open class OrangeThemeButtonComponentTokensProvider { }
+
+// Define the components tokens exposed through the theme thanks to provider
+extension OrangeThemeButtonComponentTokensProvider: ButtonComponentTokens {
+
+    // Raw tokens can be used
+
+    @objc open var buttonSizeMaxHeight: SizeSemanticToken { DimensionRawTokens.dimension600 }
+
+    // And also semantic tokens
+
+    @objc open var buttonBorderWidthDefault: BorderWidthSemanticToken { borders.borderWidthThicker }
+    @objc open var buttonBorderRadius: BorderRadiusSemanticToken { borders.borderRadiusMedium }
+    @objc open var buttonColorBgDefaultPressedMono: MultipleColorSemanticTokens { colors.colorRepositoryOpacityBlackHigher }
+    @objc open var buttonSpacePaddingBlock: SpaceSemanticToken { spaces.spacePaddingInlineSpacious }
+}
+
+// This provider is then exposed through OUDSTheme as an AllButtonComponentTokensProvider
+```
 
 ## Semantic tokens
 
@@ -32,7 +69,11 @@ No _tokens_ ([OUDSTokensComponent](https://ios.unified-design-system.orange.com/
 These _tokens_ ([OUDSTokensSemantic](https://ios.unified-design-system.orange.com/documentation/oudstokenssemantic/)) can be used mainly for _component tokens_ to apply some style and configuration values.
 They can be seen as an high level of usage with functional meanings.
 
-A semantic token points to a raw token, and is used by components. A semantic token brings meanings, higher level notions. For example, a raw token can be a "red color", and a semantic token pointing to it can be a "danger information color". Semantic tokens are used by components tokens and shared definition of themes. They are splitted in kind of families, i.e. borders, colors, spacings, elevations, sizings, opacities, grids and fonts. For some of theses tokens, like for borders, subfamilies can be defined likes width, radius and style. Finally, any of these semantic tokens is associated to a raw value which will be - in the end - applied to *SwiftUI* views inside components. *Type aliases* will help to make a simple match between any semantic tokens and raw tokens. Thus if we need for example to change a warning color, supposing this color is defined as a _semantic token_, we only have to change its assigned value and all components using the _semantic token_ won't be impacted in their definition, only their rendering.
+A semantic token points to a raw token, and is used by components. 
+A semantic token brings meanings, higher level notions. For example, a raw token can be a "red color", and a semantic token pointing to it can be a "danger information color". 
+Semantic tokens are used by components tokens and shared definition of themes. They are splitted in kind of families, i.e. borders, colors, spacings, elevations, sizings, opacities, grids and fonts. For some of theses tokens, like for borders, subfamilies can be defined likes width, radius and style. 
+Finally, any of these semantic tokens is associated to a raw value which will be - in the end - applied to *SwiftUI* views inside components. *Type aliases* will help to make a simple match between any semantic tokens and raw tokens. 
+Thus if we need for example to change a warning color, supposing this color is defined as a _semantic token_, we only have to change its assigned value and all components using the _semantic token_ won't be impacted in their definition, only their rendering.
 
 Each _semantic token_ "family" is then declared in its dedicated _Swift protocol_ any root theme must implement through *tokens providers*. Because we choose to split responsabilities and objects into their own modules, we faced troubles to make possible for children themes or providers to override properties declared in _protocols_ and defined in _extensions_.
 That is the reason why tokens are exposed as `@objc open` to be available and overridable anywhere. 

diff --git a/OUDS/Core/Themes/Inverse/Sources/InverseTheme+ColorSemanticTokens.swift b/OUDS/Core/Themes/Inverse/Sources/InverseTheme+ColorSemanticTokens.swift
@@ -36,11 +36,13 @@ final class InverseThemeColorSemanticTokensProvider: OrangeThemeColorSemanticTok
 
     // MARK: - Overrides
 
-    // MARK: - Color - Opacity - Invisible
+    // MARK: - Color - Opacity
 
-    override public var colorOpacityInvisibleBlack: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorOpacityInvisibleBlackDark) }
+    override public var colorOpacityLowest: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorOpacityLowestDark) }
 
-    override public var colorOpacityInvisibleWhite: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorOpacityInvisibleWhiteDark) }
+    override public var colorOpacityLower: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorOpacityLowerDark) }
+
+    override public var colorOpacityTransparent: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorOpacityTransparentDark) }
 
     // MARK: - Color - Action
 
@@ -138,8 +140,6 @@ final class InverseThemeColorSemanticTokensProvider: OrangeThemeColorSemanticTok
 
     override public var colorContentOnActionLoading: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorContentOnActionLoadingDark) }
 
-    override public var colorContentOnActionNegative: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorContentOnActionNegativeDark) }
-
     override public var colorContentOnActionPressed: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorContentOnActionPressedDark) }
 
     override public var colorContentOnBrandPrimary: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorContentOnBrandPrimaryDark) }
@@ -148,7 +148,7 @@ final class InverseThemeColorSemanticTokensProvider: OrangeThemeColorSemanticTok
 
     override public var colorContentOnStatusEmphasized: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorContentOnStatusEmphasizedDark) }
 
-    override public var colorContentOnStatusEmphasizedNeutral: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorContentOnStatusEmphasizedNeutralDark) }
+    override public var colorContentOnStatusEmphasizedAlt: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorContentOnStatusEmphasizedAltDark) }
 
     override public var colorContentOnStatusMuted: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorContentOnStatusMutedDark) }
 
@@ -262,6 +262,10 @@ final class InverseThemeColorSemanticTokensProvider: OrangeThemeColorSemanticTok
 
     // MARK: - Color - Chart
 
+    override public var colorChartBorder: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorChartBorderDark) }
+
+    override public var colorChartBorderContrast: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorChartBorderContrastDark) }
+
     override public var colorChartCategoricalTier1: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorChartCategoricalTier1Dark) }
 
     override public var colorChartCategoricalTier2: MultipleColorSemanticTokens { MultipleColorSemanticTokens(colorChartCategoricalTier2Dark) }

diff --git a/OUDS/Core/Themes/Inverse/Sources/InverseTheme.swift b/OUDS/Core/Themes/Inverse/Sources/InverseTheme.swift
@@ -43,7 +43,8 @@ import OUDSTokensSemantic
 ///
 ///     @Environment(\.theme) var theme
 /// ```
-/// 
+///
+/// - Since: 0.8.0
 public final class InverseTheme: OrangeTheme, @unchecked Sendable {
 
     // MARK: - Initializers

diff --git a/OUDS/Core/Themes/Inverse/Sources/_OUDSThemesInverse.docc/OUDSThemesInverse.md b/OUDS/Core/Themes/Inverse/Sources/_OUDSThemesInverse.docc/OUDSThemesInverse.md
@@ -1,6 +1,6 @@
 # ``OUDSThemesInverse``
 
-This theme overrides the [Orange theme](https://ios.unified-design-system.orange.com/documentation/oudsthemesorange/) for some colors so as to bring an "inverse"-colored experience.
+This theme overrides the *Orange theme* for some colors so as to bring an "inverse"-colored experience.
 
 ## Overview
 

diff --git a/OUDS/Core/Themes/Inverse/Tests/TestInverseThemeColors.swift b/OUDS/Core/Themes/Inverse/Tests/TestInverseThemeColors.swift
@@ -38,12 +38,16 @@ final class TestInverseThemeColors: XCTestCase {
 
     // MARK: - Test cases
 
-    func testColorsHomogeneityColorOpacityInvisibleBlack() throws {
-        assertHomogeneity(inverseTheme.colors.colorOpacityInvisibleBlack)
+    func testColorsHomogeneityColorOpacityLowest() throws {
+        assertHomogeneity(inverseTheme.colors.colorOpacityLowest)
     }
 
-    func testColorsHomogeneityColorOpacityInvisibleWhite() throws {
-        assertHomogeneity(inverseTheme.colors.colorOpacityInvisibleWhite)
+    func testColorsHomogeneityColorOpacityLower() throws {
+        assertHomogeneity(inverseTheme.colors.colorOpacityLower)
+    }
+
+    func testColorsHomogeneityColorOpacityTransparent() throws {
+        assertHomogeneity(inverseTheme.colors.colorOpacityTransparent)
     }
 
     // MARK: - Color - Action
@@ -228,10 +232,6 @@ final class TestInverseThemeColors: XCTestCase {
         assertHomogeneity(inverseTheme.colors.colorContentOnActionLoading)
     }
 
-    func testColorsHomogeneityColorContentOnActionNegative() throws {
-        assertHomogeneity(inverseTheme.colors.colorContentOnActionNegative)
-    }
-
     func testColorsHomogeneityColorContentOnActionPressed() throws {
         assertHomogeneity(inverseTheme.colors.colorContentOnActionPressed)
     }
@@ -248,8 +248,8 @@ final class TestInverseThemeColors: XCTestCase {
         assertHomogeneity(inverseTheme.colors.colorContentOnStatusEmphasized)
     }
 
-    func testColorsHomogeneityColorContentOnStatusEmphasizedNeutral() throws {
-        assertHomogeneity(inverseTheme.colors.colorContentOnStatusEmphasizedNeutral)
+    func testColorsHomogeneityColorContentOnStatusEmphasizedAlt() throws {
+        assertHomogeneity(inverseTheme.colors.colorContentOnStatusEmphasizedAlt)
     }
 
     func testColorsHomogeneityColorContentOnStatusMuted() throws {
@@ -468,6 +468,14 @@ final class TestInverseThemeColors: XCTestCase {
 
     // MARK: - Color - Chart
 
+    func testColorsHomogeneityColorChartBorder() throws {
+        assertHomogeneity(inverseTheme.colors.colorChartBorder)
+    }
+
+    func testColorsHomogeneityColorChartBorderContrast() throws {
+        assertHomogeneity(inverseTheme.colors.colorChartBorderContrast)
+    }
+
     func testColorsHomogeneityColorChartCategoricalTier1() throws {
         assertHomogeneity(inverseTheme.colors.colorChartCategoricalTier1)
     }

diff --git a/OUDS/Core/Themes/Orange/Sources/Declarations/OrangeBrandColorRawTokens.swift b/OUDS/Core/Themes/Orange/Sources/Declarations/OrangeBrandColorRawTokens.swift
@@ -14,6 +14,8 @@
 /// This enum helps to add new **color raw tokens** exclusive to this ``OrangeTheme``.
 /// Such tokens are packed in a _Swift enum_ so as to gather them in one object with the suitable namespace and avoid to have just constants in nothing else
 ///  (i.e. publicly accessible from everywhere). More optimized than _struct_.
+///
+/// - Since: 0.8.0
 public enum OrangeBrandColorRawTokens {
 
     // ଘ( ･ω･)_/ﾟ･:*:･｡☆

diff --git a/OUDS/Core/Themes/Orange/Sources/Declarations/OrangeBrandFontRawTokens.swift b/OUDS/Core/Themes/Orange/Sources/Declarations/OrangeBrandFontRawTokens.swift
@@ -14,6 +14,8 @@
 /// This enum helps to add new **font raw tokens** exclusive to this ``OrangeTheme``
 /// Such tokens are packed in a _Swift enum_ so as to gather them in one object with the suitable namespace and avoid to have just constants in nothing else
 ///  (i.e. publicly accessible from everywhere). More optimized than _struct_.
+///  
+/// - Since: 0.8.0
 public enum OrangeBrandFontRawTokens {
 
     // ଘ( ･ω･)_/ﾟ･:*:･｡☆