Change Accent and Header Background Color for Fast Templates

[MarcSkovMadsen]

Addresses #2983

Looks like

[MarcSkovMadsen]

I wanted a way for the user to get the color for their app to make it easier to use the color in plots etc.

[codecov]

Codecov Report

Merging #2984 (be1c1d3) into master (137c873) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master    #2984   +/-   ##
=======================================
  Coverage   83.21%   83.22%           
=======================================
  Files         190      190           
  Lines       24962    24973   +11     
=======================================
+ Hits        20773    20784   +11     
  Misses       4189     4189           

Impacted Files	Coverage Δ
panel/template/fast/base.py	96.70% <100.00%> (+0.23%)	⬆️
panel/template/fast/theme.py	97.72% <100.00%> (ø)
...nel/tests/template/fast/test_fast_list_template.py	93.10% <100.00%> (+1.43%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 137c873...be1c1d3. Read the comment docs.

[philippjfr]

I like the color but really we need to be way more consistent about theming and styling. If we make this change it needs to apply to all templates and we should define a fixed color palette for both light (default) and dark themes which all the template specific themes can reference somehow.

[MarcSkovMadsen]

I don't think vanilla, bootstrap, material and fast templates can be alike. They are different design systems with very different properties.

And the Fast Templates are so far ahead of the rest of the templates. Who will ever take the time to develop the required css files for the other templates?

[philippjfr]

I don't think vanilla, bootstrap, material and fast templates can be alike. They are different design systems with very different properties.

I'm not saying the need to be alike but I think there should a central definition of the default color palette, which is then reused by most of the templates.

default_palette = {
    'primary': ...,
    'accent': ...,
    'secondary': ...,
    ...
}

and then we can have a templated CSS file like this:

:root {
  --pn-primary-color: {{ primary }};
  --pn-accent-color: {{ accent }};
  --pn-secondary-color: {{ secondary }};
}

then finally each template can use those variables to control its color scheme, e.g. the fast template CSS can then just use:

:root {
    --container-background: var(--pn-primary-color);
}

[MarcSkovMadsen]

I'm not quite sure what the status on this is. Would it be possible to get into 0.13? Is there anything I should do to get this in?

(It would make my "developer advocate" work much easier to have this in. Then I would not have to always pick some more beautiful colors to make examples look nice. And the new users would have less code to worry about).

[MarcSkovMadsen]

I don't think vanilla, bootstrap, material and fast templates can be alike. They are different design systems with very different properties.

I'm not saying the need to be alike but I think there should a central definition of the default color palette, which is then reused by most of the templates.

default_palette = {
    'primary': ...,
    'accent': ...,
    'secondary': ...,
    ...
}

and then we can have a templated CSS file like this:

:root {
  --pn-primary-color: {{ primary }};
  --pn-accent-color: {{ accent }};
  --pn-secondary-color: {{ secondary }};
}

then finally each template can use those variables to control its color scheme, e.g. the fast template CSS can then just use:

:root {
    --container-background: var(--pn-primary-color);
}

This problem here is that the accent color in Fast corresponds to the primary color in Bootstrap. We need some decision on whether to only use primary color terminology only. Or we use different terminologies for different frameworks, so that it is easier to relate to their documentation. In my head I've been implementing and describing everything as the latter.

[MarcSkovMadsen]

You can see this change in action at https://awesome-panel.org

[MarcSkovMadsen]

If you don't like BLUE, we might be able to find a better green than the suggested one :-)

[philippjfr]

Will merge and probably follow up separately.