I'm confused about the design intention behind having two sets of color definitions, plus palettes and how these are to be used. I read the feature announcement, but other than Brand colors override the built-in Bootstrap default color variables, I'm not sure how these are intended to work together and if the user color set overrides any of the BS4 colors. Is there anything further on the logic and workflow that goes with these tools?
What I can infer from trying to use the feature, is the idea that "Brand" means the primary color palette and "User" means an extended color palette for modules? I get it that palettes are meant to be 4-color subsets that are applied as a group as 4 related overrides of the default Page colors at the element/block/section level and that palette colors are linked to and sampled from the Brand and User color schemes so that a change in a Brand or User color will propagate through the palettes. (I wonder if each palette should include an associated module chrome setting for a complete look in the palette preview.) It's the role of the major color schemes and setting site-wide defaults and how they map to the components, boxes and buttons that are not clear.
For symmetry and completeness, I know custom colors can be added to User by the user, but should the default setup include a Dark Link Hover to complement the Dark Link and match the Light setup's Link and Link Hover?
I did not see the equivalent of T3 Themes - is there any need for them, as opposed to having numerous template styles that are named for all the default color schemes a template designer chooses to create. If Themes are an extra level of complexity that can be eliminated, great!
Perhaps some of my confusion comes from the sequencing of the settings not following the dependencies. To help users, it is good design practice for menus to be sequenced according to the workflow necessary to avoid encountering unexpected dependencies. That means the settings should be displayed in the following order:
1. Primary/Brand Colors
2. Extended/User Colors
3. Page since it is a set of site-wide defaults selected from these two color sets
4. Palettes since they are also built from these two color sets and are to handle the module/block related exceptions from the Page defaults.
All of these Theme Customization settings should come before Layouts because, again, each Section's color settings are dependent upon using Palettes that were previously setup and available to apply.
Also, for completeness, under Navigation -> Off Canvas, a Palette selector should be added to apply an overall color scheme to the off-canvas position and its modules.
Is there a reason Pre is being hard coded to a color and font instead of a color variable and a font style variable like "$code-font-stack" or "$monospaced-font-stack"
pre { background-color: #f8f9fa; template.css @ 9288
via jpages.scss
pre, code { color: #e83e8c; font-family: Consolas, monaco, monospace;
Shouldn't we be using a Bootstrap / Brand or User / Extended scss variable? Ideally, we would not have any hard-coded colors OR fonts; just default values set in the variables section. (See in jpages.scss "body { font-family: 'Roboto', sans-serif;" hard coded at several locations instead of using $font-stack.)