Skip to content

Support for site wide custom colour palette and customisable areas  #294

@MitchAnderson93

Description

@MitchAnderson93

1. Colour patterns:

As per the specification in Figma (colour matrix/brand hierarchy):
https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=45445-46542&t=u8K2kc6GuFTlIPl1-0 and the use of alternative colours on:
https://www.queenslandsavers.qld.gov.au/ (and likely other websites in future)

The qds-bs5 project should:

  • Have full support for generic colour tokens e.g. Primary button bg should appear as per the instances bespoke colour palette:
image ^ In this instance, body components still have the sapphire action colour (incorrect)

Use in campaign sites/non SWE (simple):

  • Colours can be overridden after stylesheet loads (non franchise/non SWE):
<style>
   :root 
   [list of vars)
</style>

Use in campaign sites (advanced):

  • Forking qgds-tokens and generating their own in Figma (re-usable token)

  • Any additional repositories e.g. core/web components should also share the same colour referencing (so that a single root set of variables is interoperable across various combinations of use).

2. Areas of customisation:

As per the bespoke CTA box on ForGov (Preheader) and the Queensland Savers banner (fully custom design). The BS5 codebase should have known area's of customisation:
Screenshot 2024-06-23 at 4 15 30 pm

  • CTA elements have a unique class/ID for projects to target with event listeners

  • As per the login (3rd CTA option) area's like the custom banner should allow for customisations via a generic container (e.g. RAW HTML element is loaded into a content area)

Testing:

  • To be tested in single kitchen sink example (SB)
  • Tests can be used to verify colour compliance across all components
    (e.g. load this set of root vars, element X bg colour should be Y)

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions