The Australian Government coat of Arms

Communities of practice

Communities of practice

Colour System

core

#1

Hey all. I thought I would share a quick mock-up/draft I did not long ago to test how the colour-system is intended to work.

It’s a really difficult thing to explain well on our docs site – and I’d been trying to work out how – but the idea is that if components are built using semantic colour variables ($AU-color-foreground-text rather than $au-primary or $teal) and use the inbuilt functions, than the components become themeable for any agency’s branding and much more shareable.

Example:

You can see how we do this in the Design System, changing the default palette to the DTA palette in _colors.scss which is loaded before auds.

If anyone is trying out theming with the colour-system I’d be super keen to hear your feedback.


#2

Hi treb,

Could be me not getting this, but I’m trying to set up the colors as explained in your docs. I’ve downloaded the design system starter kit and used npm install to install dependencies and npm run watch to compile the Sass. Only thing is that I’ve only got a main.sccs and an _auds.scss in my sass folder (no _colors.scss etc.). I’m I doing something wrong?

Appreciatie the help.
Regards,
Mark


#3

Tred, it seems like I’m getting how it works now! Took the dark and light theme overrides variables to change the colors.


#4

@Mark nice work! Let me know if you have any issues, we have some guides on customising the colours here:


#5

Thanks Alex :smile: