DesignKit: Update design tokens and create ElementColors locally. (#186)

* Use latest design tokens and create Element colors
* Keep the old colours and add system… ones.
This commit is contained in:
Doug
2022-09-14 19:16:50 +01:00
committed by GitHub
parent ffee192e89
commit bc457958db
5 changed files with 147 additions and 5 deletions
@@ -0,0 +1,141 @@
//
// Copyright 2022 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
import DesignTokens
import SwiftUI
// MARK: SwiftUI
public extension Color {
static let element = ElementColors()
}
public struct ElementColors {
// MARK: - Compound
private let compound = CompoundColors()
public var accent: Color { systemPrimaryLabel }
public var alert: Color { compound.alert }
public var links: Color { compound.links }
public var primaryContent: Color { compound.primaryContent }
public var secondaryContent: Color { compound.secondaryContent }
public var tertiaryContent: Color { compound.tertiaryContent }
public var quaternaryContent: Color { compound.quaternaryContent }
public var quinaryContent: Color { compound.quinaryContent }
public var system: Color { compound.system }
public var background: Color { compound.background }
public var contentAndAvatars: [Color] { compound.contentAndAvatars }
// MARK: - System
public var systemPrimaryLabel: Color { .primary }
public var systemSecondaryLabel: Color { .secondary }
public var systemTertiaryLabel: Color { Color(.tertiaryLabel) }
public var systemQuaternaryLabel: Color { Color(.quaternaryLabel) }
public var systemPrimaryBackground: Color { Color(.systemBackground) }
public var systemSecondaryBackground: Color { Color(.secondarySystemBackground) }
public var systemGray: Color { Color(.systemGray) }
public var systemGray2: Color { Color(.systemGray2) }
public var systemGray3: Color { Color(.systemGray3) }
public var systemGray4: Color { Color(.systemGray4) }
public var systemGray5: Color { Color(.systemGray5) }
public var systemGray6: Color { Color(.systemGray6) }
// MARK: - Temp
private var tempActionBlack: UIColor { UIColor(red: 20 / 255, green: 20 / 255, blue: 20 / 255, alpha: 1.0) }
public var tempActionBackground: Color {
Color(UIColor { collection in
collection.userInterfaceStyle == .light ? tempActionBlack : .white
})
}
public var tempActionForeground: Color {
Color(UIColor { collection in
collection.userInterfaceStyle == .light ? .white : tempActionBlack
})
}
public var tempActionBackgroundTint: Color { tempActionBackground.opacity(0.2) }
public var tempActionForegroundTint: Color { tempActionForeground.opacity(0.2) }
}
// MARK: UIKit
public extension UIColor {
/// The colors from Compound, as dynamic colors that automatically update for light and dark mode.
static let element = ElementUIColors()
}
@objcMembers public class ElementUIColors: NSObject {
// MARK: - Compound
private let compound = CompoundUIColors()
public var accent: UIColor { systemPrimaryLabel }
public var alert: UIColor { compound.alert }
public var links: UIColor { compound.links }
public var primaryContent: UIColor { compound.primaryContent }
public var secondaryContent: UIColor { compound.secondaryContent }
public var tertiaryContent: UIColor { compound.tertiaryContent }
public var quaternaryContent: UIColor { compound.quaternaryContent }
public var quinaryContent: UIColor { compound.quinaryContent }
public var system: UIColor { compound.system }
public var background: UIColor { compound.background }
public var contentAndAvatars: [UIColor] { compound.contentAndAvatars }
// MARK: - System
public var systemPrimaryLabel: UIColor { .label }
public var systemSecondaryLabel: UIColor { .secondaryLabel }
public var systemTertiaryLabel: UIColor { .tertiaryLabel }
public var systemQuaternaryLabel: UIColor { .quaternaryLabel }
public var systemPrimaryBackground: UIColor { .systemBackground }
public var systemSecondaryBackground: UIColor { .secondarySystemBackground }
public var systemGray: UIColor { .systemGray }
public var systemGray2: UIColor { .systemGray2 }
public var systemGray3: UIColor { .systemGray3 }
public var systemGray4: UIColor { .systemGray4 }
public var systemGray5: UIColor { .systemGray5 }
public var systemGray6: UIColor { .systemGray6 }
// MARK: - Temp
private var tempActionBlack: UIColor { UIColor(red: 20 / 255, green: 20 / 255, blue: 20 / 255, alpha: 1.0) }
public var tempActionBackground: UIColor {
UIColor { collection in
collection.userInterfaceStyle == .light ? self.tempActionBlack : .white
}
}
public var tempActionForeground: UIColor {
UIColor { collection in
collection.userInterfaceStyle == .light ? .white : self.tempActionBlack
}
}
public var tempActionBackgroundTint: UIColor { tempActionBackground.withAlphaComponent(0.2) }
public var tempActionForegroundTint: UIColor { tempActionForeground.withAlphaComponent(0.2) }
}
+2 -2
View File
@@ -3,7 +3,7 @@
archiveVersion = 1;
classes = {
};
objectVersion = 51;
objectVersion = 52;
objects = {
/* Begin PBXBuildFile section */
@@ -610,7 +610,7 @@
8C37FB986891D90BEAA93EAE /* UserSessionStore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserSessionStore.swift; sourceTree = "<group>"; };
8D8169443E5AC5FF71BFB3DB /* cs */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = cs; path = cs.lproj/Localizable.strings; sourceTree = "<group>"; };
8DC2C9E0E15C79BBDA80F0A2 /* TimelineStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TimelineStyle.swift; sourceTree = "<group>"; };
8E088F2A1B9EC529D3221931 /* UITests.xctestplan */ = {isa = PBXFileReference; path = UITests.xctestplan; sourceTree = "<group>"; };
8E088F2A1B9EC529D3221931 /* UITests.xctestplan */ = {isa = PBXFileReference; lastKnownFileType = text; path = UITests.xctestplan; sourceTree = "<group>"; };
9010EE0CC913D095887EF36E /* OIDCService.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OIDCService.swift; sourceTree = "<group>"; };
90733775209F4D4D366A268F /* RootRouterType.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RootRouterType.swift; sourceTree = "<group>"; };
92B61C243325DC76D3086494 /* EventBriefFactoryProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EventBriefFactoryProtocol.swift; sourceTree = "<group>"; };
@@ -32,8 +32,8 @@
"kind" : "remoteSourceControl",
"location" : "https://github.com/vector-im/element-design-tokens.git",
"state" : {
"revision" : "02ba42d9ec02f90370a6cfc35a68d7312696636c",
"version" : "0.0.2"
"revision" : "63e40f10b336c136d6d05f7967e4565e37d3d760",
"version" : "0.0.3"
}
},
{
+1 -1
View File
@@ -10,7 +10,7 @@ let package = Package(
.library(name: "DesignKit", targets: ["DesignKit"])
],
dependencies: [
.package(url: "https://github.com/vector-im/element-design-tokens.git", exact: "0.0.2"),
.package(url: "https://github.com/vector-im/element-design-tokens.git", exact: "0.0.3"),
.package(url: "https://github.com/siteline/SwiftUI-Introspect.git", from: "0.1.4")
],
targets: [
+1
View File
@@ -0,0 +1 @@
DesignKit: Update design tokens and add system colours to a local copy of ElementColors.