ENH - Scalable colour system for theme

docs/community/structure.md

@@ -9,14 +9,14 @@ The content is written in a combination of reStructuredText and MyST Markdown.
 ## Location and structure of CSS/JS assets
 
 The CSS and JS for this theme are built for the browser from `src/pydata_sphinx_theme/assets/*` with
-[webpack](https://webpack.js.org/). The main entrypoints are:
+[webpack](https://webpack.js.org/). The main entry points are:
 
-- CSS: `src/pydata_sphinx_theme/assets/styles/index.scss`
+- CSS: `src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss`
 
   - the main part of the theme assets
   - customizes [Bootstrap](https://getbootstrap.com/) with [Sass](https://sass-lang.com)
 
-- JS: `src/pydata_sphinx_theme/assets/scripts/index.js`
+- JS: `src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js`
 
   - provides add-on Bootstrap features, as well as some custom navigation behavior
 

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

@@ -53,7 +53,8 @@ $extra-semantic-colors: (
   "dark": map-get($pst-semantic-colors, "text-base"),
   "muted": map-get($pst-semantic-colors, "text-muted"),
   "light": rgb(201, 201, 201),
-  "black": rgb(0, 0, 0),
+  "black": hsl(216, 20%, 10%),
+  //gray-900
   "white": rgb(255, 255, 255),
 );
 

src/pydata_sphinx_theme/assets/styles/variables/_color.scss

@@ -5,97 +5,160 @@
 * NOTE: this theme defines "info == primary" and "warning == secondary"
 */
 $pst-semantic-colors: (
-  "primary": rgb(69, 157, 185),
-  "secondary": rgb(238, 144, 64),
-  "info": rgb(69, 157, 185),
-  "warning": rgb(238, 144, 64),
+  "primary": (
+    //WCAG AA compliant against dark bg
+    "50": #f4fbfc,
+    "100": #e9f6f8,
+    "200": #d0ecf1,
+    "300": #abdde6,
+    "400": #3fb1c5,
+    //WCAG AA compliant against light bg
+    "500": #0a7d91,
+    "600": #085d6c,
+    "700": #064752,
+    "800": #042c33,
+    "900": #021b1f,
+  ),
+  "secondary": (
+    //WCAG AA compliant against dark bg
+    "50": #fbf8fe,
+    "100": #f6f2fe,
+    "200": #ece3fc,
+    "300": #decdfa,
+    "400": #b691f5,
+    //WCAG AA compliant against light bg
+    "500": #894def,
+    "600": #6730c5,
+    "700": #4e2595,
+    "800": #31175f,
+    "900": #1e0e39,
+  ),
+  "info": (
+    "light": #276be9,
+    "light-bg": #eff4fd,
+    "dark": #79a3f2,
+    "dark-bg": #06245d,
+  ),
+  "warning": (
+    "light": #f66a0a,
+    "light-bg": #fff8f2,
+    "dark": #ff9245,
+    "dark-bg": #652a02,
+  ),
   "success": (
-    "light": rgb(40, 167, 69),
-    "dark": rgb(72, 135, 87),
+    "light": #00843f,
+    "light-bg": #ecf6f1,
+    "dark": #5fb488,
+    "dark-bg": #002f17,
   ),
   "attention": (
-    "light": rgb(255, 193, 7),
-    "dark": rgb(220, 169, 15),
+    "light": #f66a0a,
+    "light-bg": #fff8f2,
+    "dark": #ff9245,
+    "dark-bg": #652a02,
   ),
   "danger": (
-    "light": rgb(220, 53, 69),
-    "dark": rgb(203, 70, 83),
+    "light": #d72d47,
+    "light-bg": #fcf1f2,
+    "dark": #e78894,
+    "dark-bg": #4e111b,
   ),
   "text-base": (
-    "light": rgb(50, 50, 50),
-    // Black + 50
-    "dark": rgb(206, 206, 206),
-    // White - 50
+    "light": rgb(34, 40, 50),
+    // gray-800
+    // "dark": #e5e7ea
+    "dark": #ced6dd,
+    // gray-100
   ),
   "text-muted": (
-    "light": rgb(100, 100, 100),
-    // Twice as far from 0 as base
-    "dark": rgb(166, 166, 166),
-    // Twice as far from 256 as base
-  ),
-  "shadow": (
-    "light": rgb(216, 216, 216),
-    "dark": rgb(33, 33, 33),
-  ),
-  "border": (
-    "light": rgb(201, 201, 201),
-    "dark": rgb(192, 192, 192),
-  ),
-  "inline-code": (
-    "light": rgb(232, 62, 140),
-    "dark": rgb(221, 158, 194),
-  ),
-  "target": (
-    "light": rgb(251, 229, 78),
-    "dark": rgb(71, 39, 0),
+    "light": #48566b,
+    // gray-600
+    "dark": #d1d5da,
+    // gray-300
   ),
+  // TODO - update
+  "shadow":
+    (
+      // "light": rgb(216, 216, 216),
+      "light": rgba(0, 0, 0, 0.1),
+      "dark": rgba(0, 0, 0, 0.2),
+    ),
+  // TODO- update (need muted and regular - this is muted)
+  "border":
+    (
+      "light": rgba(23, 23, 26, 0.2),
+      "dark": #48566b,
+    ),
+  // TODO - update
+  "inline-code":
+    (
+      "light": rgb(232, 62, 140),
+      "dark": rgb(221, 158, 194),
+    ),
+  // TODO - update
+  "target":
+    (
+      "light": rgb(251, 229, 78),
+      "dark": rgb(71, 39, 0),
+    ),
   // DEPTH COLORS
   // background: color of the canvas / the furthest back layer
   "background":
     (
       "light": rgb(255, 255, 255),
-      "dark": rgb(18, 18, 18),
+      "dark": #14181e,
     ),
   // on-background: provides slight contrast against background
   // (by use of shadows in light theme)
   "on-background":
     (
       "light": rgb(255, 255, 255),
-      "dark": rgb(30, 30, 30),
+      "dark": #222832,
+      // gray-800
     ),
   // surface: object set above the background (without shadows)
   // Uses JupyterLab cell background colors in light/dark theme
   "surface":
     (
-      "light": rgb(245, 245, 245),
-      "dark": rgb(33, 33, 33),
+      "light": #f3f4f5,
+      // gray-100
+      "dark": #364150,
+      // gray-700
     ),
   // on_surface: object on top of surface object (without shadows)
+  //TODO - update
   "on-surface":
     (
       "light": rgb(225, 225, 225),
       "dark": rgb(55, 55, 55),
     ),
 );
 
-/*******************************************************************************
-* write the color rules for each theme (light/dark)
-*/
+@mixin create-color-var($key, $value, $identifier: "") {
+  //$identifier is an optional variable - used for the new system
+  @if $identifier != "" {
+    --pst-color-#{$key}-#{$identifier}: #{$value};
+  } @else {
+    --pst-color-#{$key}: #{$value};
+  }
+}
 
-/* NOTE:
- * Mixins enable us to reuse the same definitions for the different modes
- * https://sass-lang.com/documentation/at-rules/mixin
- * #{...} inserts a variable into a CSS selector or property name
- * https://sass-lang.com/documentation/interpolation
- */
 @mixin theme-colors($mode) {
-  // check if this color is defined differently for light/dark
   @each $name, $value in $pst-semantic-colors {
+    // check if there is a map (i.e. multiple light/dark definitions)
     @if type-of($value) == map {
-      $value: map-get($value, $mode);
-    }
-    & {
-      --pst-color-#{$name}: #{$value};
+      // support for single light/dark colour definitions
+      @if map-has-key($value, $mode) {
+        $value: map-get($value, $mode);
+        @include create-color-var($name, $value);
+      } // support for multiple light/dark colour definitions - as our new design system
+      @else {
+        @each $key, $val in $value {
+          @include create-color-var($key, $val, $name);
+        }
+      }
+    } @else {
+      @include create-color-var($name, $value);
     }
   }
   // assign the "duplicate" colors (ones that just reference other variables)