Skip to content

Commit

Permalink
feat: add raw tokens and semantic tokens for dimensions, spacings, si…
Browse files Browse the repository at this point in the history 
…zings (#36)

This commit reviews values of raw tokens for dimensions.
It reviews also semantic tokens for dimensions, spacings and sizings.
Unit tests have been added to check tokens order relationships and overridings.

Closes #36

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
  • Loading branch information
@pylapp
pylapp committed Aug 6, 2024
1 parent d960506 commit 3f511d5
Show file tree
Hide file tree
Showing 12 changed files with 978 additions and 50 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Added

- [Library] Add raw tokens and semantic tokens for dimensions ([#36](https://github.com/Orange-OpenSource/ouds-ios/issues/36))
- [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 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))
Expand Down
61 changes: 32 additions & 29 deletions .../Core/Themes/Sources/Shared/OUDSTheme+SemanticTokens/OUDSTheme+SizingSemanticTokens.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,41 +48,44 @@ extension OUDSTheme: SizingSemanticTokens {

// MARK: Semantic token - Sizing - Width height - Icon typography - Heading

@objc open var sizeWidthHeightIconIsHeadingSmallShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension400 }
@objc open var sizeWidthHeightIconIsHeadingSmallMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension500 }
@objc open var sizeWidthHeightIconIsHeadingSmallTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension550 }
@objc open var sizeWidthHeightIconIsHeadingMediumShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension500 }
@objc open var sizeWidthHeightIconIsHeadingMediumMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension550 }
@objc open var sizeWidthHeightIconIsHeadingMediumTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension600 }
@objc open var sizeWidthHeightIconIsHeadingLargeShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension550 }
@objc open var sizeWidthHeightIconIsHeadingLargeMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension600 }
@objc open var sizeWidthHeightIconIsHeadingLargeTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension650 }
@objc open var sizeWidthHeightIconIsHeadingXLargeShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension650 }
@objc open var sizeWidthHeightIconIsHeadingXLargeMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension700 }
// TODO: What should we do? In issue #36 there are 3 possible values (web paradigm ?), selected here the xl-2xl-3xl case
@objc open var sizeWidthHeightIconIsHeadingSmallShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension500 }
@objc open var sizeWidthHeightIconIsHeadingSmallMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension550 }
@objc open var sizeWidthHeightIconIsHeadingSmallTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension600 }
@objc open var sizeWidthHeightIconIsHeadingMediumShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension550 }
@objc open var sizeWidthHeightIconIsHeadingMediumMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension600 }
@objc open var sizeWidthHeightIconIsHeadingMediumTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension650 }
@objc open var sizeWidthHeightIconIsHeadingLargeShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension600 }
@objc open var sizeWidthHeightIconIsHeadingLargeMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension650 }
@objc open var sizeWidthHeightIconIsHeadingLargeTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension700 }
@objc open var sizeWidthHeightIconIsHeadingXLargeShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension700 }
@objc open var sizeWidthHeightIconIsHeadingXLargeMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension750 }
@objc open var sizeWidthHeightIconIsHeadingXLargeTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension800 }

// MARK: Semantic token - Sizing - Width height - Icon typography - Body

@objc open var sizeWidthHeightIconIsBodySmallShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension150 }
@objc open var sizeWidthHeightIconIsBodySmallMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension500 }
@objc open var sizeWidthHeightIconIsBodySmallTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension250 }
@objc open var sizeWidthHeightIconIsBodyMediumShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension200 }
@objc open var sizeWidthHeightIconIsBodyMediumMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension250 }
@objc open var sizeWidthHeightIconIsBodyMediumTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension300 }
@objc open var sizeWidthHeightIconIsBodyLargeShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension250 }
@objc open var sizeWidthHeightIconIsBodyLargeMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension300 }
@objc open var sizeWidthHeightIconIsBodyLargeTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension350 }
// TODO: What should we do? In issue #36 there are 3 possible values (web paradigm ?), selected here the xl-2xl-3xl case
@objc open var sizeWidthHeightIconIsBodySmallShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension200 }
@objc open var sizeWidthHeightIconIsBodySmallMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension250 }
@objc open var sizeWidthHeightIconIsBodySmallTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension300 }
@objc open var sizeWidthHeightIconIsBodyMediumShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension250 }
@objc open var sizeWidthHeightIconIsBodyMediumMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension300 }
@objc open var sizeWidthHeightIconIsBodyMediumTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension350 }
@objc open var sizeWidthHeightIconIsBodyLargeShort: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension400 }
@objc open var sizeWidthHeightIconIsBodyLargeMedium: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension500 }
@objc open var sizeWidthHeightIconIsBodyLargeTall: SizingWidthHeightSemanticToken { DimensionRawTokens.dimension550 }

// MARK: Semantic token - Sizing - Max width

@objc open var sizeMaxWidthTypographyDisplaySmall: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension9000 }
@objc open var sizeMaxWidthTypographyDisplayMedium: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension9000 }
@objc open var sizeMaxWidthTypographyDisplayLarge: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension9000 }
@objc open var sizeMaxWidthTypographyHeadingSmall: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension6000 }
@objc open var sizeMaxWidthTypographyHeadingMedium: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension9000 }
@objc open var sizeMaxWidthTypographyHeadingLarge: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension9000 }
@objc open var sizeMaxWidthTypographyHeadingXLarge: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension9000 }
// TODO: What should we do? In issue #36 there are 3 possible values (web paradigm ?), selected here the xl-2xl-3xl case
@objc open var sizeMaxWidthTypographyDisplaySmall: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension11000 }
@objc open var sizeMaxWidthTypographyDisplayMedium: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension11000 }
@objc open var sizeMaxWidthTypographyDisplayLarge: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension11000 }
@objc open var sizeMaxWidthTypographyHeadingSmall: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension7000 }
@objc open var sizeMaxWidthTypographyHeadingMedium: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension11000 }
@objc open var sizeMaxWidthTypographyHeadingLarge: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension11000 }
@objc open var sizeMaxWidthTypographyHeadingXLarge: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension11000 }
@objc open var sizeMaxWidthTypographyBodySmall: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension6000 }
@objc open var sizeMaxWidthTypographyBodyMedium: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension6000 }
@objc open var sizeMaxWidthTypographyBodyLarge: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension6000 }
@objc open var sizeMaxWidthTypographyBodyMedium: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension7000 }
@objc open var sizeMaxWidthTypographyBodyLarge: SizingMaxWidthSemanticToken { DimensionRawTokens.dimension7000 }
}
55 changes: 45 additions & 10 deletions ...Core/Themes/Sources/Shared/OUDSTheme+SemanticTokens/OUDSTheme+SpacingSemanticTokens.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,49 @@ import OUDSTokensSemantic
/// 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: SpacingSemanticTokens {

// MARK: Semantic token - Spacing - Layout fix

@objc open var spaceLayoutFixNone: SpacingLayoutSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spaceLayoutFixSmash: SpacingLayoutSemanticToken { DimensionRawTokens.dimension25 }
@objc open var spaceLayoutFixShortest: SpacingLayoutSemanticToken { DimensionRawTokens.dimension50 }
@objc open var spaceLayoutFixShorter: SpacingLayoutSemanticToken { DimensionRawTokens.dimension100 }
@objc open var spaceLayoutFixShort: SpacingLayoutSemanticToken { DimensionRawTokens.dimension150 }
@objc open var spaceLayoutFixMedium: SpacingLayoutSemanticToken { DimensionRawTokens.dimension200 }
@objc open var spaceLayoutFixTall: SpacingLayoutSemanticToken { DimensionRawTokens.dimension300 }
@objc open var spaceLayoutFixTaller: SpacingLayoutSemanticToken { DimensionRawTokens.dimension400 }
@objc open var spaceLayoutFixTallest: SpacingLayoutSemanticToken { DimensionRawTokens.dimension500 }
@objc open var spaceLayoutFixSpacious: SpacingLayoutSemanticToken { DimensionRawTokens.dimension600 }

// MARK: Semantic token - Spacing - Layout fluid

// TODO: What should we do? In issue #36 there are 3 possible values (web paradigm ?), selected here the xl-2xl-3xl case
@objc open var spaceLayoutFluidNone: SpacingLayoutSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spaceLayoutFluidSmash: SpacingLayoutSemanticToken { DimensionRawTokens.dimension50 }
@objc open var spaceLayoutFluidShortest: SpacingLayoutSemanticToken { DimensionRawTokens.dimension100 }
@objc open var spaceLayoutFluidShorter: SpacingLayoutSemanticToken { DimensionRawTokens.dimension200 }
@objc open var spaceLayoutFluidShort: SpacingLayoutSemanticToken { DimensionRawTokens.dimension300 }
@objc open var spaceLayoutFluidMedium: SpacingLayoutSemanticToken { DimensionRawTokens.dimension400 }
@objc open var spaceLayoutFluidTall: SpacingLayoutSemanticToken { DimensionRawTokens.dimension500 }
@objc open var spaceLayoutFluidTaller: SpacingLayoutSemanticToken { DimensionRawTokens.dimension600 }
@objc open var spaceLayoutFluidTallest: SpacingLayoutSemanticToken { DimensionRawTokens.dimension700 }
@objc open var spaceLayoutFluidSpacious: SpacingLayoutSemanticToken { DimensionRawTokens.dimension800 }

// MARK: Semantic token - Spacing - Padding - Padding inline

@objc open var spacePaddingInlineComponentNone: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spacePaddingInlineComponentShorter: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension50 }
@objc open var spacePaddingInlineComponentShort: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension100 }
@objc open var spacePaddingInlineComponentMedium: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension200 }
@objc open var spacePaddingInlineComponentTall: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension300 }
@objc open var spacePaddingInlineComponentTaller: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension400 }

@objc open var spacePaddingInlineComponentIsIconNone: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spacePaddingInlineComponentIsIconShorter: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension25 }
@objc open var spacePaddingInlineComponentIsIconShort: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension50 }
@objc open var spacePaddingInlineComponentIsIconMedium: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension75 }
@objc open var spacePaddingInlineComponentIsIconTall: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension100 }
@objc open var spacePaddingInlineComponentIsIconTaller: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension200 }

@objc open var spacePaddingInlineComponentIsArrowNone: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spacePaddingInlineComponentIsArrowShorter: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension25 }
@objc open var spacePaddingInlineComponentIsArrowShort: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension50 }
Expand All @@ -46,6 +77,7 @@ extension OUDSTheme: SpacingSemanticTokens {
@objc open var spacePaddingBlockComponentMedium: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension200 }
@objc open var spacePaddingBlockComponentTall: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension300 }
@objc open var spacePaddingBlockComponentTaller: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension400 }

@objc open var spacePaddingBlockComponentIsIconNone: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spacePaddingBlockComponentIsIconShorter: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension25 }
@objc open var spacePaddingBlockComponentIsIconShort: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension50 }
Expand All @@ -55,16 +87,16 @@ extension OUDSTheme: SpacingSemanticTokens {

// MARK: Semantic token - Padding - Padding inset

@objc open var spaceInsetComponentGapComponentNone: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spaceInsetComponentGapComponentSmash: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension25 }
@objc open var spaceInsetComponentGapComponentShortest: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension50 }
@objc open var spaceInsetComponentGapComponentShorter: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension75 }
@objc open var spaceInsetComponentGapComponentShort: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension100 }
@objc open var spaceInsetComponentGapComponentMedium: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension150 }
@objc open var spaceInsetComponentGapComponentTall: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension200 }
@objc open var spaceInsetComponentGapComponentTaller: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension300 }
@objc open var spaceInsetComponentGapComponentTallest: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension400 }
@objc open var spaceInsetComponentGapComponentSpacious: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension500 }
@objc open var spaceInsetComponentNone: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spaceInsetComponentSmash: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension25 }
@objc open var spaceInsetComponentShortest: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension50 }
@objc open var spaceInsetComponentShorter: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension75 }
@objc open var spaceInsetComponentShort: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension100 }
@objc open var spaceInsetComponentMedium: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension150 }
@objc open var spaceInsetComponentTall: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension200 }
@objc open var spaceInsetComponentTaller: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension300 }
@objc open var spaceInsetComponentTallest: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension400 }
@objc open var spaceInsetComponentSpacious: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension500 }

// MARK: Semantic token - Padding - Gap inline

Expand All @@ -74,12 +106,14 @@ extension OUDSTheme: SpacingSemanticTokens {
@objc open var spaceColumnGapComponentMedium: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension200 }
@objc open var spaceColumnGapComponentTall: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension300 }
@objc open var spaceColumnGapComponentTaller: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension400 }

@objc open var spaceColumnGapComponentIsIconNone: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spaceColumnGapComponentIsIconShorter: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension25 }
@objc open var spaceColumnGapComponentIsIconShort: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension50 }
@objc open var spaceColumnGapComponentIsIconMedium: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension75 }
@objc open var spaceColumnGapComponentIsIconTall: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension100 }
@objc open var spaceColumnGapComponentIsIconTaller: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension200 }

@objc open var spaceColumnGapComponentIsArrowNone: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spaceColumnGapComponentIsArrowShorter: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension25 }
@objc open var spaceColumnGapComponentIsArrowShort: SpacingPaddingInlineSemanticToken { DimensionRawTokens.dimension50 }
Expand All @@ -95,6 +129,7 @@ extension OUDSTheme: SpacingSemanticTokens {
@objc open var spaceRowGapComponentMedium: SpacingGapStackSemanticToken { DimensionRawTokens.dimension75 }
@objc open var spaceRowGapComponentTall: SpacingGapStackSemanticToken { DimensionRawTokens.dimension100 }
@objc open var spaceRowGapComponentTaller: SpacingGapStackSemanticToken { DimensionRawTokens.dimension200 }

@objc open var spaceRowGapComponentIsIconNone: SpacingGapStackSemanticToken { DimensionRawTokens.dimension0 }
@objc open var spaceRowGapComponentIsIconShorter: SpacingGapStackSemanticToken { DimensionRawTokens.dimension25 }
@objc open var spaceRowGapComponentIsIconShort: SpacingGapStackSemanticToken { DimensionRawTokens.dimension50 }
Expand Down
Loading

0 comments on commit 3f511d5

Please sign in to comment.