ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-02 12:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adopt Compound Colours (#1086)

Browse Source 
* Delete deprecated font tokens.

* Migrate from primaryContent to textPrimary/iconPrimary.

* Migrate from links to textLinkExternal.

* Migrate from secondaryContent to textSecondary/iconSecondary.

* Migrate from accent to textActionPrimary.

- Some uses changed to textPrimary or iconPrimary as necessary.
- Some manual tints removed now that that Sentry is fixed.

* Migrate alert to textCriticalPrimary/iconCriticalPrimary.

* Migrate from brand to textActionAccent/iconAccentTertiary.

* Migrate from background to bgCanvasDefault or text/iconOnSolidPrimary

* Migrate system to bgSubtleSecondary.

* Remove ElementUIColors and obsolete migrated colours.

* Migrate tertiaryContent/quaternaryContent/quinaryContent to Compound.

* Migrate bubblesYou/bubblesNotYou to use Compound.

* Update Compound.
This commit is contained in:
Doug
2023-06-16 10:49:13 +01:00
committed by GitHub
parent ac41704821
commit de0213abb2
80 changed files with 274 additions and 723 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DesignKit/Sources/Colors/ElementColors.swift
+26 -66
View File
@@ -27,22 +27,32 @@ public extension Color {
public struct ElementColors {
// MARK: - Legacy Compound
private let compound = DesignTokens.CompoundColors()
private let colors = DesignTokens.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 }
// Should be the accent color
public var brand: Color { compound.accent }
@available(swift, obsoleted: 5.0, message: "Use textActionPrimary from Compound.")
public var accent: Color { colors.primaryContent }
@available(swift, obsoleted: 5.0, message: "Use textCriticalPrimary/iconCriticalPrimary from Compound.")
public var alert: Color { colors.alert }
@available(swift, obsoleted: 5.0, message: "Use textLinkExternal from Compound.")
public var links: Color { colors.links }
@available(swift, obsoleted: 5.0, message: "Use textPrimary/iconPrimary from Compound.")
public var primaryContent: Color { colors.primaryContent }
@available(swift, obsoleted: 5.0, message: "Use textSecondary/iconSecondary from Compound.")
public var secondaryContent: Color { colors.secondaryContent }
@available(swift, obsoleted: 5.0, message: "Use iconTertiary form Compound for icons. For text use textSecondary. For borders and backgrounds check with Design.")
public var tertiaryContent: Color { colors.tertiaryContent }
@available(swift, obsoleted: 5.0, message: "Use iconQuaternary from Compound for icons. For text, borders and backgrounds check with Design.")
public var quaternaryContent: Color { colors.quaternaryContent }
@available(swift, obsoleted: 5.0, message: "Check with Design for the tokens to use from Compound.")
public var quinaryContent: Color { colors.quinaryContent }
@available(swift, obsoleted: 5.0, message: "Use bgSubtleSecondary from Compound.")
public var system: Color { colors.system }
@available(swift, obsoleted: 5.0, message: "Use bgCanvasDefault from Compound for backgrounds. For text or icons use textOnSolidPrimary/iconOnSolidPrimary.")
public var background: Color { colors.background }
@available(swift, obsoleted: 5.0, message: "Use textActionAccent/iconAccentTertiary from Compound.")
public var brand: Color { colors.accent }
public var contentAndAvatars: [Color] { compound.contentAndAvatars }
public var contentAndAvatars: [Color] { colors.contentAndAvatars }
public func avatarBackground(for contentId: String) -> Color {
let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))
@@ -51,31 +61,12 @@ public struct ElementColors {
// MARK: - Temp
public var systemPrimaryLabel: Color { .primary }
public var systemPrimaryBackground: Color { Color(.systemBackground) }
public var systemGray4: Color { Color(.systemGray4) }
public var systemGray6: Color { Color(.systemGray6) }
public var bubblesYou: Color {
Color(UIColor { collection in
// Note: Light colour doesn't currently match Figma.
collection.userInterfaceStyle == .light ? .systemGray5 : UIColor(red: 0.16, green: 0.18, blue: 0.21, alpha: 1)
})
}
public var bubblesNotYou: Color {
Color(UIColor { collection in
// Note: Light colour doesn't currently match Figma.
collection.userInterfaceStyle == .light ? .systemGray6 : .element.system
})
}
/// The colour to use on the background of a Form or grouped List.
///
/// This colour is a special case as it uses `system` in light mode and `background` in dark mode.
public var formBackground: Color {
Color(UIColor { collection in
collection.userInterfaceStyle == .light ? .element.system : .element.background
collection.userInterfaceStyle == .light ? UIColor(.compound.bgSubtleSecondary) : UIColor(.compound.bgCanvasDefault)
})
}
@@ -84,42 +75,11 @@ public struct ElementColors {
/// This colour is a special case as it uses `background` in light mode and `system` in dark mode.
public var formRowBackground: Color {
Color(UIColor { collection in
collection.userInterfaceStyle == .light ? .element.background : .element.system
collection.userInterfaceStyle == .light ? UIColor(.compound.bgCanvasDefault) : UIColor(.compound.bgSubtleSecondary)
})
}
}
// 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 = DesignTokens.CompoundUIColors()
public var accent: UIColor { .label }
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 }
public func avatarBackground(for contentId: String) -> UIColor {
let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))
return contentAndAvatars[colorIndex % contentAndAvatars.count]
}
}
private extension String {
/// Calculates a numeric hash same as Element Web
/// See original function here https://github.com/matrix-org/matrix-react-sdk/blob/321dd49db4fbe360fc2ff109ac117305c955b061/src/utils/FormattingUtils.js#L47