Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MitchAnderson93 opened this issue Jun 23, 2024 · 1 comment
Assignees

Comments

@MitchAnderson93
Copy link
Member

MitchAnderson93 commented Jun 23, 2024

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)
@MitchAnderson93
Copy link
Member Author

MitchAnderson93 commented Jun 23, 2024

Keen to hear your thoughts @re-becca @stvp-qld

As the intention is this will be re-used outside SWE (internal CMS/external CMS's) as per QLD savers example - custom colour pattern support and customisable areas vastly reduces debt required in each of these sites (debt has also been a blocker for this project, so it makes sense we reduce debt)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants