Improve color handling (#594)

* Improve color handling

* Start documenting colors

* Finish renaming colors and remove old names

Author: jarrodmillman

assets/theme-css/footer.css

@@ -4,7 +4,8 @@
 }
 
 #footer {
-  background-color: var(--colorPrimaryDark);
+  background-color: var(--spht-color-dark);
+  color: var(--spht-color-light);
   position: sticky;
   top: calc(100vh - var(--spht-footer-height));
 }
@@ -31,11 +32,11 @@
 }
 
 .footer-item a {
-  color: var(--colorSecondary);
+  color: var(--spht-color-light);
 }
 
 .footer-item a:hover {
-  color: var(--colorPrimaryLight);
+  color: var(--spht-color-link-hover);
 }
 
 .footer-actions {
@@ -49,7 +50,6 @@
 
 .footer-actions p {
   margin: 0;
-  color: var(--colorSecondary);
 }
 
 @media only screen and (max-width: 850px) {
@@ -85,25 +85,23 @@
 }
 
 #footer svg.icon {
-  fill: var(--colorSecondary);
+  fill: var(--spht-color-light);
   margin-right: 0.5rem;
 }
 
 #footer svg.icon:hover {
-  fill: #ffffff;
+  fill: var(--spht-color-link-hover);
 }
 
 /* For information ⓘ, when icon is missing */
 #footer .icon {
   font-weight: 900;
-  color: var(--colorSecondary);
 }
 
 #footer nav {
-  background: var(--colorPrimaryDark);
+  background: var(--spht-color-dark);
 }
 
 .copyright {
   font-size: 0.75rem;
-  color: var(--colorSecondary);
 }

assets/theme-css/hero.css

@@ -72,16 +72,16 @@
   text-transform: uppercase;
   letter-spacing: 1.5px;
   font-weight: 500;
-  color: var(--colorSecondaryLight);
-  background-color: var(--colorPrimaryDark);
+  color: var(--spht-color-light);
+  background-color: var(--spht-color-dark);
   border: none;
   border-radius: 25px;
   outline: none;
   cursor: pointer;
 }
 
 .cta-button:hover {
-  color: var(--colorPrimaryLight);
+  color: var(--spht-color-link-hover);
 }
 
 @media only screen and (max-width: 1090px) {

assets/theme-css/news.css

@@ -4,17 +4,17 @@
   align-items: center;
   width: 100vw;
   min-height: 45px;
-  background-color: var(--colorPrimaryDark);
-  color: var(--colorSecondaryLight);
+  background-color: var(--spht-color-dark);
+  color: var(--spht-color-light);
   white-space: nowrap;
 }
 
 .news-container a {
-  color: var(--colorSecondaryLight);
+  color: var(--spht-color-light);
 }
 
 .news-container a:hover {
-  color: var(--colorPrimaryLight);
+  color: var(--spht-color-link-hover);
 }
 
 .news-title {

assets/theme-css/vars.css

@@ -2,17 +2,9 @@
 :root {
   --fontFamily: "{{ .Site.Params.font.name }}", "Noto Sans Symbols 2";
 
-  --colorPrimaryDark: rgb(1, 50, 67);
-  --colorPrimary: rgb(77, 119, 207);
-  --colorPrimaryLight: rgb(77, 171, 207);
-
-  --colorSecondaryDark: rgb(108, 122, 137);
-  --colorSecondary: rgb(238, 238, 238);
-  --colorSecondaryLight: rgb(255, 255, 255);
-
-  --colorBrightBlue: rgb(30, 135, 240);
-  --colorYellow: rgb(255, 197, 83);
-
+  --spht-color-dark: rgb(1, 50, 67);
+  --spht-color-light: rgb(255, 255, 255);
+  --spht-color-link-hover: rgb(77, 171, 207);
   --spht-footer-height: 6em;
 
   /* Font Awesome icon variables. */

doc/content/user_guide/_index.md

@@ -17,4 +17,11 @@ There are a number of options for configuring your site’s look and feel.
 
 - [Get Started](/user_guide/getstarted)
 - [Features](/user_guide/features)
+
+## Content and features
+
 - [Web Components](/user_guide/web-components)
+
+## Theming and Style
+
+- [Theme variables and CSS](/user_guide/styling)

doc/content/user_guide/features.md

@@ -25,49 +25,11 @@ preamble. It defaults to 2.
 Each page should contain a `summary` in the preamble, otherwise the
 site description is provided as metadata.
 
-## Custom stylesheets
-
-Custom styles should be added to `/assets/css/my_css.css` (where
-`my_css` can be any name, other than those already in the theme).
-
 ## Custom JavaScript
 
 Custom JavaScript can be added as `/assets/js/my_js.js` (where `my_js`
 can be any name).
 
-## Code styling
-
-To enable code styling, add the following to your config file:
-
-```yaml
-markup:
-  highlight:
-    noClasses: false
-```
-
-The default theme is [Witch Hazel](https://github.com/theacodes/witchhazel),
-but with a blue background.
-To use a different theme, [generate a new
-stylesheet](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode)
-using:
-
-```
-hugo gen chromastyles --style=monokai > /assets/css/code-highlight.css
-```
-
-You can replace `monokai` with any of the themes supported by
-[Chroma](https://github.com/alecthomas/chroma), as listed in their
-[gallery](https://xyproto.github.io/splash/docs/).
-
-Then, use fenced code blocks and remember to specify the language:
-
-````md
-```python
-def foo(x):
-    return x**2
-```
-````
-
 ## News
 
 The first post from `/content/en/news` will be highlighted on the

doc/content/user_guide/styling.md

@@ -0,0 +1,53 @@
+---
+title: Theme variables and CSS
+---
+
+This section covers a few ways that you can control the look and feel of your
+theme via your own CSS and theme variables.
+
+## Custom CSS stylesheets
+
+Custom styles should be added to `/assets/css/my_css.css` (where
+`my_css` can be any name, other than those already in the theme).
+
+## CSS theme variables
+
+### Color variables
+
+We mostly rely on PyData Sphinx Theme's
+[color variables](https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/styling.html#color-variables).
+
+However, we ...
+
+## Code styling
+
+To enable code styling, add the following to your config file:
+
+```yaml
+markup:
+  highlight:
+    noClasses: false
+```
+
+The default theme is [Witch Hazel](https://github.com/theacodes/witchhazel),
+but with a blue background.
+To use a different theme, [generate a new
+stylesheet](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode)
+using:
+
+```
+hugo gen chromastyles --style=monokai > /assets/css/code-highlight.css
+```
+
+You can replace `monokai` with any of the themes supported by
+[Chroma](https://github.com/alecthomas/chroma), as listed in their
+[gallery](https://xyproto.github.io/splash/docs/).
+
+Then, use fenced code blocks and remember to specify the language:
+
+````md
+```python
+def foo(x):
+    return x**2
+```
+````