Add the DesignKit package to the project #6275
Conversation
pixlwave
force-pushed
the
doug/43_design_kit
branch
from
da8db28
to
27943b6
Compare
| public let quarterlyContent: UIColor | ||
| public let navigation: UIColor | ||
| public let tile: UIColor | ||
| public let separator: UIColor |
There was a problem hiding this comment.
These are colours that were in the theme, but not in compound.
| @@ -17,6 +17,8 @@ | |||
| import Foundation | |||
| import UIKit | |||
|
|
|||
| // TODO: Move into element-design-tokens repo. | |||
|
|
|||
| // Figma Avatar Sizes: https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1258%3A19678 | |||
| public enum AvatarSize: Int { | |||
There was a problem hiding this comment.
These can become tokens that are shared between all platforms.
| @@ -51,7 +51,7 @@ struct BorderedInputFieldStyle: TextFieldStyle { | |||
| if (theme.identifier == ThemeIdentifier.dark) { | |||
| return (isEnabled ? theme.colors.primaryContent : theme.colors.tertiaryContent) | |||
| } else { | |||
| return (isEnabled ? theme.colors.primaryContent : theme.colors.quarterlyContent) | |||
| return (isEnabled ? theme.colors.primaryContent : theme.colors.quaternaryContent) | |||
There was a problem hiding this comment.
It seems there were different names for the same colour. I have updated SwiftUI to be consistent with compound/DesignKit but left both available for UIKit.
| @@ -76,7 +76,7 @@ struct MultilineTextField: View { | |||
| .overlay(rect.stroke(borderColor, lineWidth: borderWidth)) | |||
| .introspectTextView { textView in | |||
| textView.textColor = UIColor(textColor) | |||
| textView.font = theme.fonts.uiFonts.callout | |||
| textView.font = .element.callout | |||
There was a problem hiding this comment.
It is no longer necessary to have a uiFonts property on the SwiftUI themes as these can be referenced statically now.
| @@ -39,15 +39,15 @@ struct SearchBar: View { | |||
| } | |||
| .padding(8) | |||
| .padding(.horizontal, 25) | |||
| .background(theme.colors.navigation) | |||
| .background(theme.colors.system) | |||
There was a problem hiding this comment.
Same as quarterly/quaternary content.
pixlwave
force-pushed
the
doug/43_design_kit
branch
from
27943b6
to
20673d7
Compare
|
📱 Scan the QR code below to install the build for this PR. If you can't scan the QR code you can install the build via this link: https://i.diawi.com/zCXCXF |
pixlwave
force-pushed
the
doug/43_design_kit
branch
from
20673d7
to
6a5a056
Compare
Fix the confetti colour when using DesignKit. Pin swift packages. Fix UI tests target.
pixlwave
force-pushed
the
doug/43_design_kit
branch
from
6a5a056
to
6252745
Compare
pixlwave
force-pushed
the
doug/43_design_kit
branch
from
de4451c
to
e759002
Compare
|
Kudos, SonarCloud Quality Gate passed!
|
This PRs adopts the new DesignKit package from ElementX (#6276). It uses the package for both fonts and colours in the SwiftUI theme and ThemeV2 and removes the old DesignKit framework from the project.
Currently the colours come from element-design-tokens and the fonts live in the DesignKit package (along with some SwiftUI components which are unused in this initial PR).
DesignTokens uses a more modern architecture for our colours, adding the Dark Variant value by loading colours from an asset catalog. In ElementX we can use these colours directly and let the system handle all theming for us automatically. To make this work with Element iOS the following has been adopted:
VectorHostingControlleris updated to utilise the theme'sUIUserInterfaceStyle. This means that the SwiftUIElementColorscan be used as is, with the theme dictating the correct colorScheme to render the view with.ElementUIColorsResolvedclass which takes theElementUIColorsfrom DesignTokens and resolves them for both light and dark modes. These resolved colours are then used in ThemeV2 replacingColorsUIKit.Technically the SwiftUI theme is now redundant as colours could be accessed via
.element.accentand fonts via.element.bodylike we do in ElementX, but that would be a large update and needs further discussion as to whether we should actually do this in Element-iOS or not. Additionally I have (where possible) updated SwiftUI views to use the colours as named in compound but added additional properties toElementUIColorsResolvedto maintain source compatibility with the UIKit screens (as there are rather more of those that would need updating).No screenshots as nothing has changed visually.