Updating note color and adding docs for colors

[choldgraf]

Related to #279 - this does two things:

1. Updates the note admonition so that it is the same color as the default admonition (this is what RTD does)
2. Updates the documentation around custom CSS and variables so that it's a bit easier to follow

Here are the admonitions for comparison: https://pydata-sphinx-theme--281.org.readthedocs.build/en/281/demo/demo.html#admonitions

Here are the updated docs: https://pydata-sphinx-theme--281.org.readthedocs.build/en/281/user_guide/customizing.html#custom-css-stylesheets

[jorisvandenbossche]

Looking at this PR now, after my way too long dive into the topic and resulting topic at #279 (comment) ;)

But thanks for improving those docs!

[jorisvandenbossche]

Using the categorization of RTD, this should be "success" I think, instead.

And so the "hint" just above, should not use "warning", but also "success"

[jorisvandenbossche]

I would prefer that we keep this at "info" category, but so we should maybe combine the info/primary categories (or at least give them the same colors, see the "third issue" in #279 (comment))

[jorisvandenbossche]

Thanks a lot for updating this text. A link to the actual file with the variables is quite crucial to know which variables are available to override ..

[jorisvandenbossche]

There is something wrong in this sentence I think

[jorisvandenbossche]

@choldgraf I updated the colors of the different admonition types to now use a consistent categorization. So the demo of this PR: https://pydata-sphinx-theme--281.org.readthedocs.build/en/281/demo/demo.html#admonitions now should show the same grouping as on the RTD demo (https://sphinx-rtd-theme.readthedocs.io/en/stable/demo/demo.html#admonitions)

That solves the first issue of #279, but of course still leaves open the two other questions of:

• The exact color to use for each group. Do we want to take colors closer to RTD (basically what you did in the original version of adding custom admonitions classes #183), or are we fine with bootstrap success/info colors?
• Which group/color to use as a default when no specific class is used (when "making your own admonition" without specifying a class. Currently this is using the "primary" color of the theme, which is also used for the navigation highlighting, but we could also have it the same as the "note" class (which is what RTD does).

[jorisvandenbossche]

For the default color question, doing a quick comparison (with a slightly updated demo.rst locally to just have one admonition of each category).

The current colors (using bootstrap theme colors):

Using RTD's colors (but with our logic of using 0.1 alpha for the lighter background of the title, so this gives a lighter impression as on RTD):

And thanks to the CSS variables, the above is only a small change:

--- a/pydata_sphinx_theme/static/css/theme.css
+++ b/pydata_sphinx_theme/static/css/theme.css
@@ -27,10 +27,10 @@
   * Colors are defined in rgb string way, "red, green, blue"
   **/
   --color-primary: 19, 6, 84;
-  --color-success: 40, 167, 69;
-  --color-info: 23, 162, 184;
-  --color-warning: 255, 193, 7;
-  --color-danger: 220, 53, 69;
+  --color-success: 26, 188, 156;
+  --color-info: 106, 176, 222;
+  --color-warning: 240, 179, 126;
+  --color-danger: 242, 159, 151;
   --color-text-base: 51, 51, 51;

So this are then the colors you had in the original commit in #183, eg as in the screenshot in the top post of that PR.
As mentioned above, it only looks "lighter" because we are now using a fixed alpha of 0.1 instead of allowing to define this color manually as well (we should maybe add a variable for this as well?)

Using an alpha of 0.2 instead of 0.1, I get:

[jorisvandenbossche]

And as reference, here is how it currently looks with the released version 0.4.1 (only with one additional admonition, to show the 4th color, because "warning" was using the "wrong" color):

So we could restore some of those colors to keep them as the default in the upcoming release as well (for example, the "blue" for the notes), but I think having both the yellow, orange and red shades is maybe not something we should keep (only two shades like orange and red, or yellow and red, seems sufficient, so there is more variation in colors?)

[choldgraf]

Two quick thoughts -

1. I don't feel super strongly about all the specific colors, though I think that the most-common admonition is probably "note" and that we should probably keep ~ the same, so maybe that's the minimal thing to keep?
2. One reason I like the yellow for "hint" is because the lightbulb icon naturally pairs well with the "yellow" as in "the color of the lightbulb"...that's one reason the green feels weird to me there.

[jorisvandenbossche]

So I pushed:

• added variables for all admonition types, so you have more control (eg if you want to update the color for just the hint admonition). At the same time, I also made variables for the icons.
• updated the color used for the "primary" group (note + the generic admonition) to the bright blue from bootstrap that was used before for the note admonition

[choldgraf]

this seems good to me 👍 thanks for pushing to the PR! Feel free to merge if you are good w/ it