Theme palette

[voorloopnul]

Relevant to #8

[ES-Alexander]

Works well - nice work! 😄

1. Would be nice if we included (possibly by adding an extra colour (e.g. quaternary)):

   • megamenu item text colour on hover
     • At least the navbar items
       • This could be applied to the "Try BlueOS" button background too, which is currently static
     • Preferably also the items in the menus themselves
   • sidebar "selected" page colour (defined in the if blocks in the docs/page.html template)
   • button background colour

2. On the colours themselves, I think the navbar and headings can both be the primary colour, and the colour ordinals should match our style guides, e.g.:

   Ordinal	BlueOS	Cockpit	Used By
   primary	#135da3	#4fa483	page headings(h1-h3), page titles, sidebar sections, navbar
   secondary	#2699d0	#135da3	links, navbar-hovers (including "Try BlueOS" button background)
   tertiary	#012f46	#012f46	page headings(h4-h5), sidebar "selected", megamenu background, button background hovers
   quaternary	#2699d0	#2699d0	megamenu headings, megamenu item hovers, button background

3. Ideally the docs would be able to directly specify the individual colours in the palette, instead of us needing to have a small set of predefined palettes to choose between

   • I know it's possible to override CSS variables, so if tailwind needs values for the initial build, maybe we can specify some defaults and then use the docs config to optionally specify overrides (e.g. with a variable-set for config.extra.palette)?
     • I tried this, and it worked fine to add the following:
       templates/base.html:

       <link href="{{ config.base_url | safe }}/output.css" rel="stylesheet">
       {% if config.extra.palette %}
       <style>
       /* override default theme colours */
       :root {
           {% for name, colour in config.extra.palette
            %}--twc-{{ name }}: {{ colour }};{%
            endfor %}
       }
       </style>
       {% endif %}

       config.toml

       [extra.palette]
       navbar = "100 70% 50%"
       primary = "200 69.1% 48.2%"

     • I recommend we do something similar (with the new variables from 2.), perhaps with a separate stylesheet file for the overrides (although I'm personally fine with having that inline in the base template), and add comments in theme.toml about what each variable is for, and to specify they need to be HSL values