diff --git a/CHANGELOG.md b/CHANGELOG.md index e683b3dd7b..0a7bf5570a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- [DemoApp] Add grid tokens screen in demo app ([#151](https://github.com/Orange-OpenSource/ouds-ios/issues/151)) - [Tool] GitHub Action to run SwiftLint for *main* and *develop* branches ### Changed diff --git a/NOTICE.txt b/NOTICE.txt index c68042ae5a..30ccbf17cc 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -26,14 +26,20 @@ Any use or displaying shall constitute an infringement under intellectual proper ./Showcase/Showcase/Resources/Assets.xcassets/ic_info.imageset/ic_info.svg ./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_empty_screen.imageset/il_empty_screen.svg - +./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin.png +./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin_dark.png +./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width.png +./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width_dark.png +./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width.png +./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width_dark.png ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_border.imageset/ic_border.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_dimension.imageset/ic_dimension.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_filter_effects.imageset/ic_filter_effects.svg +./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/ic_grid.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_layers.imageset/ic_layers.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_palette.imageset/ic_palette.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_vector.imageset/ic_vector.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_typography.imageset/ic_typography.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_union.imageset/ic_union.svg -End of the parts list under Orange SA Copyright \ No newline at end of file +End of the parts list under Orange SA Copyright diff --git a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme+SemanticTokens/OUDSTheme+GridSemanticTokensHelper.swift b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme+SemanticTokens/OUDSTheme+GridSemanticTokensHelper.swift new file mode 100644 index 0000000000..c500da3b1a --- /dev/null +++ b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme+SemanticTokens/OUDSTheme+GridSemanticTokensHelper.swift @@ -0,0 +1,100 @@ +// +// 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 OUDSTokensRaw +import OUDSTokensSemantic + +extension OUDSTheme { + + // MARK: Semantic Grid token - Helper + + /// The min column width of a grid. + /// - Parameter sizeClass: The current interface size class + /// - Returns `GridRawToken`: The minimal width according to viewports / size classes. + public final func gridMinWidth(for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch sizeClass { + case .extraCompact: + return gridExtraCompactMinWidth + case .compact: + return gridCompactMinWidth + case .regular: + return gridRegularMinWidth + @unknown default: + fatalError("🤖 Raw token unavailable for \(sizeClass)!") + } + } + + /// The max column width of a grid. + /// - Parameter sizeClass: The current interface size class + /// - Returns `GridRawToken`: The maximal width according to viewports / size classes. + public final func gridMaxWidth(for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch sizeClass { + case .extraCompact: + return gridExtraCompactMaxWidth + case .compact: + return gridCompactMaxWidth + case .regular: + return gridRegularMaxWidth + @unknown default: + fatalError("🤖 Raw token unavailable for \(sizeClass)!") + } + } + + /// The margin of a grid. + /// - Parameter sizeClass: The current interface size class + /// - Returns `GridRawToken`: The margin according to viewports / size classes. + public final func gridMargin(for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch sizeClass { + case .extraCompact: + return gridExtraCompactMargin + case .compact: + return gridCompactMargin + case .regular: + return gridRegularMargin + @unknown default: + fatalError("🤖 Raw token unavailable for \(sizeClass)!") + } + } + + /// The column gap of a grid. + /// - Parameter sizeClass: The current interface size class + /// - Returns `GridRawToken`: The column gap according to viewports / size classes. + public final func gridColumnGap(for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch sizeClass { + case .extraCompact: + return gridExtraCompactColumnGap + case .compact: + return gridCompactColumnGap + case .regular: + return gridRegularColumnGap + @unknown default: + fatalError("🤖 Raw token unavailable for \(sizeClass)!") + } + } + + /// The column count of a grid. + /// - Parameter sizeClass: The current interface size class + /// - Returns `GridRawToken`: The column count according to viewports / size classes. + public final func gridColumnCount(for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch sizeClass { + case .extraCompact: + return gridExtraCompactColumnCount + case .compact: + return gridCompactColumnCount + case .regular: + return gridRegularColumnCount + @unknown default: + fatalError("🤖 Raw token unavailable for \(sizeClass)!") + } + } +} diff --git a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSThemeableView.swift b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSThemeableView.swift index ccb2140cd6..7b8f1d4c38 100644 --- a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSThemeableView.swift +++ b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSThemeableView.swift @@ -16,7 +16,7 @@ import SwiftUI // MARK: - Environment values -private struct ThemeContractEnvironmentKey: EnvironmentKey { +private struct ThemeEnvironmentKey: EnvironmentKey { static let defaultValue = OUDSTheme() } @@ -26,10 +26,10 @@ extension EnvironmentValues { /// The `OUDSTheme` instance exposed as en environment values across the library public var theme: OUDSTheme { get { - self[ThemeContractEnvironmentKey.self] + self[ThemeEnvironmentKey.self] } set { - self[ThemeContractEnvironmentKey.self] = newValue + self[ThemeEnvironmentKey.self] = newValue } } } @@ -69,5 +69,37 @@ public struct OUDSThemeableView: View where Content: View { public var body: some View { content() .environment(\.theme, theme) + .modifier(UserInterfaceSizeClassModifier()) + } +} + +/// Private modifier used to set in environment the computed orizontal and vertical size classes. +private struct UserInterfaceSizeClassModifier: ViewModifier { + + @Environment(\.horizontalSizeClass) private var horizontalSizeClass + @Environment(\.verticalSizeClass) private var verticalSizeClass + + /// According to Apple guidelines, this value of 390 is the limit defining extract compact size classes if lower and compact if higher or equal + private static let extraCompactMaxWidth = 390.0 + + private var horizontalUserInterfaceSizeClass: OUDSUserInterfaceSizeClass { + if UIScreen.main.bounds.width < Self.extraCompactMaxWidth { + return .extraCompact + } else { + return horizontalSizeClass == .compact ? .compact : .regular + } + } + private var verticalUserInterfaceSizeClass: OUDSUserInterfaceSizeClass { + if UIScreen.main.bounds.width < Self.extraCompactMaxWidth { + return .extraCompact + } else { + return verticalSizeClass == .compact ? .compact : .regular + } + } + + func body(content: Content) -> some View { + content + .environment(\.oudsHorizontalSizeClass, horizontalUserInterfaceSizeClass) + .environment(\.oudsVerticalSizeClass, verticalUserInterfaceSizeClass) } } diff --git a/OUDS/Core/OUDS/Sources/OUDSUserInterfaceSizeClass.swift b/OUDS/Core/OUDS/Sources/OUDSUserInterfaceSizeClass.swift new file mode 100644 index 0000000000..0082a7a4f9 --- /dev/null +++ b/OUDS/Core/OUDS/Sources/OUDSUserInterfaceSizeClass.swift @@ -0,0 +1,76 @@ +// +// 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 SwiftUICore +import UIKit + +// MARK: - Environment values + +private struct HorizontalSizeClassEnvironmentKey: EnvironmentKey { + + static let defaultValue = OUDSUserInterfaceSizeClass.regular +} + +private struct VerticalSizeClassEnvironmentKey: EnvironmentKey { + + static let defaultValue = OUDSUserInterfaceSizeClass.regular +} + +extension EnvironmentValues { + + /// The `OUDSUserInterfaceSizeClass` instance exposed as en environment values across the library for the horizontal viewport. + /// + /// You receive a ``OUDSUserInterfaceSizeClass`` value when you read this environment value. + /// The value tells you about the amount of horizontal space available to the view that reads it. + /// You can read this size class like any other of the ``EnvironmentValues``, by creating a property with the ``Environment`` property wrapper: + /// + /// @Environment(\.oudsHorizontalSizeClass) private var horizontalSizeClass + /// + public var oudsHorizontalSizeClass: OUDSUserInterfaceSizeClass { + get { + self[HorizontalSizeClassEnvironmentKey.self] + } + set { + self[HorizontalSizeClassEnvironmentKey.self] = newValue + } + } + + /// The `OUDSUserInterfaceSizeClass` instance exposed as en environment values across the library for the vertical viewport. + /// + /// You receive a ``OUDSUserInterfaceSizeClass`` value when you read this environment value. + /// The value tells you about the amount of vertical space available to the view that reads it. + /// You can read this size class like any other of the ``EnvironmentValues``, by creating a property with the ``Environment`` property wrapper: + /// + /// @Environment(\.oudsVerticalSizeClass) private var verticalSizeClass + /// + public var oudsVerticalSizeClass: OUDSUserInterfaceSizeClass { + get { + self[VerticalSizeClassEnvironmentKey.self] + } + set { + self[VerticalSizeClassEnvironmentKey.self] = newValue + } + } +} + +/// Enumerates the size classes defined by the design system. +/// The __extraCompact__ size class if for screens with width < 389. +/// The __compact__ and __regular__ size classes are the standard Apple classes. +/// +/// See: https://developer.apple.com/design/human-interface-guidelines/layout#iOS-iPadOS-device-size-classes +/// Remark: This enum is defined as a string to easily display its raw value. +public enum OUDSUserInterfaceSizeClass: String, Sendable { + case extraCompact = "Extra Compact" + case compact = "Compact" + case regular = "Regular" +} diff --git a/Showcase/Showcase.xcodeproj/project.pbxproj b/Showcase/Showcase.xcodeproj/project.pbxproj index 0fad8b8284..5c4e48d9c1 100644 --- a/Showcase/Showcase.xcodeproj/project.pbxproj +++ b/Showcase/Showcase.xcodeproj/project.pbxproj @@ -24,6 +24,8 @@ 070C35622C75EB1C0029C6A8 /* OUDS in Frameworks */ = {isa = PBXBuildFile; productRef = 070C35612C75EB1C0029C6A8 /* OUDS */; }; 070C35642C773A0D0029C6A8 /* OUDSThemesInverse in Frameworks */ = {isa = PBXBuildFile; productRef = 070C35632C773A0D0029C6A8 /* OUDSThemesInverse */; }; 070C35662C7762B90029C6A8 /* OUDSModules in Frameworks */ = {isa = PBXBuildFile; productRef = 070C35652C7762B90029C6A8 /* OUDSModules */; }; + 070DF8B12CDD07F20043D558 /* GrisTokenPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 070DF8AF2CDD07F20043D558 /* GrisTokenPage.swift */; }; + 070DF8B22CDD07F20043D558 /* GridTokenElement.swift in Sources */ = {isa = PBXBuildFile; fileRef = 070DF8AE2CDD07F20043D558 /* GridTokenElement.swift */; }; 073543112CA154DE001187EA /* Card.swift in Sources */ = {isa = PBXBuildFile; fileRef = 073543102CA154DE001187EA /* Card.swift */; }; 073543132CA1676C001187EA /* Colors.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 073543122CA1676C001187EA /* Colors.xcassets */; }; 073543162CA17275001187EA /* ShowcaseElement.swift in Sources */ = {isa = PBXBuildFile; fileRef = 073543152CA17275001187EA /* ShowcaseElement.swift */; }; @@ -120,6 +122,8 @@ /* Begin PBXFileReference section */ 0707B6402C2C3C0400A911E7 /* .github */ = {isa = PBXFileReference; lastKnownFileType = folder; name = .github; path = ../.github; sourceTree = ""; }; 0707B6432C2C569500A911E7 /* Gemfile */ = {isa = PBXFileReference; lastKnownFileType = text; name = Gemfile; path = ../Gemfile; sourceTree = ""; }; + 070DF8AE2CDD07F20043D558 /* GridTokenElement.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GridTokenElement.swift; sourceTree = ""; }; + 070DF8AF2CDD07F20043D558 /* GrisTokenPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GrisTokenPage.swift; sourceTree = ""; }; 073543102CA154DE001187EA /* Card.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Card.swift; sourceTree = ""; }; 073543122CA1676C001187EA /* Colors.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Colors.xcassets; sourceTree = ""; }; 073543152CA17275001187EA /* ShowcaseElement.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShowcaseElement.swift; sourceTree = ""; }; @@ -249,6 +253,15 @@ /* End PBXFrameworksBuildPhase section */ /* Begin PBXGroup section */ + 070DF8B02CDD07F20043D558 /* Grid */ = { + isa = PBXGroup; + children = ( + 070DF8AE2CDD07F20043D558 /* GridTokenElement.swift */, + 070DF8AF2CDD07F20043D558 /* GrisTokenPage.swift */, + ); + path = Grid; + sourceTree = ""; + }; 0735430F2CA15440001187EA /* Cards */ = { isa = PBXGroup; children = ( @@ -523,6 +536,7 @@ 075114DD2CB7FD7E00B8B759 /* Color */, 077CCE562CB426090059CC28 /* Dimension */, 07CF42752CA3F461000BD03E /* Elevation */, + 070DF8B02CDD07F20043D558 /* Grid */, 07CF427C2CA412F5000BD03E /* Opacity */, 073543192CA17388001187EA /* Typography */, 073543222CA192F9001187EA /* TokenElement.swift */, @@ -858,6 +872,8 @@ 07F7533B2CC785620007450D /* ShowcaseSectionHeaderStyle.swift in Sources */, 073543182CA172CA001187EA /* TypographyTokenElement.swift in Sources */, 077CCE5C2CB431C50059CC28 /* ShowcaseVariantElement.swift in Sources */, + 070DF8B12CDD07F20043D558 /* GrisTokenPage.swift in Sources */, + 070DF8B22CDD07F20043D558 /* GridTokenElement.swift in Sources */, 077CCE582CB426090059CC28 /* SpaceTokenPage.swift in Sources */, 07F75A3F2CC653CD0004F1AD /* NameSpace+GapInline.swift in Sources */, 51BD76292C466FCF0033365D /* WebView.swift in Sources */, diff --git a/Showcase/Showcase.xcworkspace/xcshareddata/swiftpm/Package.resolved b/Showcase/Showcase.xcworkspace/xcshareddata/swiftpm/Package.resolved index 81ed0d1e2d..10bbabf032 100644 --- a/Showcase/Showcase.xcworkspace/xcshareddata/swiftpm/Package.resolved +++ b/Showcase/Showcase.xcworkspace/xcshareddata/swiftpm/Package.resolved @@ -1,5 +1,5 @@ { - "originHash" : "ce9d2b5fcd836ee7f16c345c970c6dad8b1405cc6afc0904bafd4a5916517710", + "originHash" : "37157bb82d55cf8fef2178d1e02e303f55f01b545bfb15038a1dd61301498d2b", "pins" : [ { "identity" : "accessibility-statement-lib-ios", diff --git a/Showcase/Showcase/Pages/Tokens/Grid/GridTokenElement.swift b/Showcase/Showcase/Pages/Tokens/Grid/GridTokenElement.swift new file mode 100644 index 0000000000..c7efe7645e --- /dev/null +++ b/Showcase/Showcase/Pages/Tokens/Grid/GridTokenElement.swift @@ -0,0 +1,28 @@ +// +// 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 SwiftUI + +struct GridTokenElement: TokenElement { + let name: String + let imageName: String + let description: String + let pageDescription: AnyView + + init() { + name = "app_tokens_grid_label" + imageName = "ic_grid" + description = "app_tokens_grid_description_text" + pageDescription = AnyView(GridTokenPage()) + } +} diff --git a/Showcase/Showcase/Pages/Tokens/Grid/GrisTokenPage.swift b/Showcase/Showcase/Pages/Tokens/Grid/GrisTokenPage.swift new file mode 100644 index 0000000000..407199f778 --- /dev/null +++ b/Showcase/Showcase/Pages/Tokens/Grid/GrisTokenPage.swift @@ -0,0 +1,95 @@ +// +// 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 OUDSTokensRaw +import OUDSTokensSemantic +import SwiftUI + +struct GridTokenPage: View { + + @Environment(\.theme) private var theme + @Environment(\.oudsHorizontalSizeClass) private var horizontalSizeClass + @Environment(\.colorScheme) private var colorScheme + + // MARK: Body + + var body: some View { + Group { + VStack(alignment: .leading, spacing: theme.spaceFixedMedium) { + Image(decorative: "il_tokens_grid_column_margin") + .resizable() + .aspectRatio(contentMode: .fit) + .background(theme.colorBgEmphasized.color(for: colorScheme)) + Image(decorative: "il_tokens_grid_min_width") + .resizable() + .aspectRatio(contentMode: .fit) + .background(theme.colorBgEmphasized.color(for: colorScheme)) + Image(decorative: "il_tokens_grid_max_width") + .resizable() + .aspectRatio(contentMode: .fit) + .background(theme.colorBgEmphasized.color(for: colorScheme)) + } + + Section { illustrationForGridTokens() } header: { + Text(horizontalSizeClass.rawValue) + .showcaseSectionHeaderStyle() + } + } + .padding(.horizontal, theme.spaceFixedMedium) + } + + // MARK: Private helpers + + private func illustrationForGridTokens() -> some View { + VStack(alignment: .leading, spacing: theme.spaceFixedNone) { + ForEach(NamedGrid.allCases, id: \.rawValue) { namedGrid in + illustration(for: namedGrid) + } + } + } + + private func illustration(for namedGrid: NamedGrid) -> some View { + let token = namedGrid.token(from: theme, for: horizontalSizeClass) + let name = namedGrid.rawValue + let value = String(format: "(%.0f) pt", token) + + return ShowcaseTokenIllustration(tokenName: name, tokenValue: value) { + EmptyView() + } + } +} + +private enum NamedGrid: String, CaseIterable { + case gridMinWidth + case gridMaxWidth + case gridMargin + case gridColumnGap + case gridColumnCount + + @MainActor + func token(from theme: OUDSTheme, for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch self { + case .gridMinWidth: + return theme.gridMinWidth(for: sizeClass) + case .gridMaxWidth: + return theme.gridMaxWidth(for: sizeClass) + case .gridMargin: + return theme.gridMargin(for: sizeClass) + case .gridColumnGap: + return theme.gridColumnGap(for: sizeClass) + case .gridColumnCount: + return theme.gridColumnCount(for: sizeClass) + } + } +} diff --git a/Showcase/Showcase/Pages/Tokens/TokensPage.swift b/Showcase/Showcase/Pages/Tokens/TokensPage.swift index beb37a178e..12d3cbe93a 100644 --- a/Showcase/Showcase/Pages/Tokens/TokensPage.swift +++ b/Showcase/Showcase/Pages/Tokens/TokensPage.swift @@ -20,6 +20,7 @@ struct TokensPage: View { ColorTokenElement(), DimensionTokenElement(), ElevationTokenElement(), + GridTokenElement(), OpacityTokenElement(), TypographyTokenElement(), ] diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/Contents.json b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/Contents.json new file mode 100644 index 0000000000..a1c0e6501e --- /dev/null +++ b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/Contents.json @@ -0,0 +1,22 @@ +{ + "images" : [ + { + "filename" : "il_tokens_grid_column_margin.png", + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "filename" : "il_tokens_grid_column_margin_dark.png", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin.png new file mode 100644 index 0000000000..381ad2f53c Binary files /dev/null and b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin.png differ diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin_dark.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin_dark.png new file mode 100644 index 0000000000..741f740a18 Binary files /dev/null and b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin_dark.png differ diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/Contents.json b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/Contents.json new file mode 100644 index 0000000000..4457460a51 --- /dev/null +++ b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/Contents.json @@ -0,0 +1,22 @@ +{ + "images" : [ + { + "filename" : "il_tokens_grid_max_width.png", + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "filename" : "il_tokens_grid_max_width_dark.png", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width.png new file mode 100644 index 0000000000..140a3ea282 Binary files /dev/null and b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width.png differ diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width_dark.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width_dark.png new file mode 100644 index 0000000000..0dd45f94a9 Binary files /dev/null and b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width_dark.png differ diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/Contents.json b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/Contents.json new file mode 100644 index 0000000000..1a045c9ca1 --- /dev/null +++ b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/Contents.json @@ -0,0 +1,22 @@ +{ + "images" : [ + { + "filename" : "il_tokens_grid_min_width.png", + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "filename" : "il_tokens_grid_min_width_dark.png", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width.png new file mode 100644 index 0000000000..856d1384d3 Binary files /dev/null and b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width.png differ diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width_dark.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width_dark.png new file mode 100644 index 0000000000..5f0d109cb9 Binary files /dev/null and b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width_dark.png differ diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/Contents.json b/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/Contents.json new file mode 100644 index 0000000000..266e28e494 --- /dev/null +++ b/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/Contents.json @@ -0,0 +1,12 @@ +{ + "images" : [ + { + "filename" : "ic_grid.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/ic_grid.svg b/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/ic_grid.svg new file mode 100644 index 0000000000..df8f300681 --- /dev/null +++ b/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/ic_grid.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Showcase/Showcase/Resources/en.lproj/Localizable.strings b/Showcase/Showcase/Resources/en.lproj/Localizable.strings index 03bd3ca037..704cb39381 100644 --- a/Showcase/Showcase/Resources/en.lproj/Localizable.strings +++ b/Showcase/Showcase/Resources/en.lproj/Localizable.strings @@ -53,12 +53,15 @@ "app_tokens_dimension_size_label" = "Size"; "app_tokens_dimension_size_description_text" = "Size refers to the specific measurements used to define the dimensions of UI elements within the design system."; -"app_tokens_dimension_size_iconWithLabel_label" = "Icon with label"; +"app_tokens_dimension_size_iconWithLabel_label" = "Icon with text"; "app_tokens_dimension_size_iconDecorative_label" = "Icon decorative"; "app_tokens_elevation_label" = "Elevation"; "app_tokens_elevation_description_text" = "Shadows are used to give the impression of distance or elevation between surfaces, which adds depth to our designs."; +"app_tokens_grid_label" = "Grid"; +"app_tokens_grid_description_text" = "Grids are used to position content and create consistent page layouts"; + "app_tokens_opacity_label" = "Opacity"; "app_tokens_opacity_description_text" = "Opacity can help distinguish foreground elements from background elements, making content easier to read and important actions more noticeable.";