Remotely Configured Colour Palettes in TypographyKit

TypographyKit was originally created to support the use of Dynamic Type in iOS apps by providing the ability to define typographical styles that could be applied consistently across an app. A typography style could optionally include a colour and the framework was expanded so that the colour palette defined could be applied not just to the typography but across the entire app. This helped with the visual consistency of an app by allowing the same colour palette and typography styles to be applied consistently everywhere.

Adding a colour to your app using TypographyKit involves updating the configuration file:

"typography-colors": {
    "royal-blue": "#08224C"
}

and then creating an extension on UIColor:

extension UIColor {
    static let royalBlue: UIColor = TypographyKit.colors["royal-blue"]!
}

TypographyKit configuration files may optionally be remotely hosted meaning that the colour palette of your app can be updated without releasing a new build. However what if you decide that after releasing your app you’d rather use red everywhere rather than blue? You could simply update the hex code for the colour in the configuration file which would do the trick however there would still be references to the UIColor.royalBlue across your app which you would have update on your next release.

A better strategy might involve defining your colours according to where they are used rather than using the name of the colour itself e.g.

"typography-colors": {
    "text-color": "#08224C"
}
extension UIColor {
    static let textColor: UIColor = TypographyKit.colors["text-color"]!
}

However now it is difficult to tell from looking at your configuration which colour is being used for the app’s text.

To this end, v0.4.0 of TypographyKit allows you to reference colours already defined in your configuration file as part of new colour definitions e.g.

"typography-colors": {
    "royal-blue": "#08224C",
    "text": "royal-blue"
},

In the above example TypographyKit configuration, the colour royal blue is defined and then the text colour is set to royal blue meaning that we can easily observe the colour being used as our text colour at a glance and switch to another colour if needs be.

v0.4.0 also includes this extension for obtaining lighter / darker shades of any given colour e.g. to retrieve a lighter shade of a colour:

UIColor.royalBlue.shade(.lighter)

Better still, you can make use of this extension directly from within your configuration file meaning that you can tweak the colour remotely later:

"typography-colors": {
    "background": "lighter royal-blue",
    "royal-blue": "#08224C",
}

Note that if this extension is unwanted, it may be compiled out by setting the preprocessor flag TYPOGRAPHYKIT_UICOLOR_EXTENSION.

Finally, by running the Palette for TypographyKit tool all of the colours defined in your configuration file will be made available for use directly within Xcode’s Interface Builder.