Fix light mode, top nav external links, etc:

- Top nav external links now open in a new tab as intended (not specific
  to light mode)
- Consistently adjust opacity (not placement) of background images in
  mobile; lighter in light mode for legibility.
- Add a subtle white "shadow" to eyebrow text in light mode to improve
  legibility
- Fix focus styles for buttons & multicode tabs in light mode
- Make all buttons sized the same as primary buttons by default
- Fix typo that caused the "Reset" button on get-started to be unstyled
- Refactor theme switcher JS for simplicity.
- Fix issue with theme select icon not being visible in some cases.
- Update color of ✅ icons in interactive tutorial breadcrumbs

assets/js/theme-switch.js

@@ -1,66 +1,46 @@
 // Check user prefers color, toggle light/dark, save state
-// Based partly on https://github.com/vinorodrigues/bootstrap-dark
+// Based loosely on https://github.com/vinorodrigues/bootstrap-dark
 
+function apply_color_scheme(theme) {
+  const disable_theme = (theme == "dark") ? "light" : "dark";
+  document.documentElement.classList.add(theme)
+  document.documentElement.classList.remove(disable_theme)
+  // $("#css-toggle-btn").prop( "checked", (theme == 'dark') );
+}
 
-
-//////// NOTES
-// On mac the system will be either light, dark or auto.  Auto will return either light or dark and NOT no preference. 
-// If users have set to auto then light will default durring daylight hours.  
-// Option 1 is to NOT respect user-prefers-color and only respect a toggle. This will default to a dark theme with light being optional. 
-// Option 2 is respect user-prefers-color at first. This will likely load the light theme during daylight. And switch auto. Then if user toggles switch we then respect that as override. 
-
-    // function to toggle the css
-    function toggle_color_scheme_css($mode) {
-      // amend the body classes
-      if ($mode == 'dark') {
-        $("html").removeClass('light').addClass("dark");
-      } else {
-        $("html").removeClass("dark").addClass('light');
-      }
-      // if on user prefers color then update stored value
-      $upc = window.localStorage.getItem('user-prefers-color');
-      if ($upc !== null) {
-        // if ($upc == 0) $("#css-save-btn").prop( "checked", true );  // first time click
-        window.localStorage.setItem('user-prefers-color', ($mode == 'dark') ? 2 : 1);
-      }
+function auto_update_theme() {
+  const upc = window.localStorage.getItem('user-prefers-color')
+  let theme = "dark"; // Default to dark theme
+  if (!upc) {
+    // User hasn't saved a preference specifically for this site; check
+    // the browser-level preferences.
+    if (window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: light)").matches) {
+      theme = "light"
     }
+  } else { // Follow user's saved setting.
+    theme = (upc == "light") ? "light" : "dark"
+  }
+  apply_color_scheme(theme)
+}
 
-    // function / listener action to toggle the button
-    function update_color_scheme_css() {
-      $upc = window.localStorage.getItem('user-prefers-color');
-      if (($upc === null) || ($upc == 0)) {
-        if (window.matchMedia && window.matchMedia("(prefers-color-scheme: no-preference)").matches){
-          $mode = 'dark';
-        }else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches){
-          $mode = 'light';
-        }else{
-          $mode = 'dark';
-        }
-      } else {
-        $mode = ($upc == 2) ? 'dark' : 'light';
-      }
-      $("#css-toggle-btn").prop( "checked", ('dark' == $mode) );
-      toggle_color_scheme_css($mode);
-    }
+function user_toggle_theme() {
+  const new_theme = document.documentElement.classList.contains("dark") ? "light" : "dark"
+  window.localStorage.setItem("user-prefers-color", new_theme)
+  // Animate this style switch, but not the ones that happen on page load:
+  document.body.style.transition = "background-color .2s ease"
+  apply_color_scheme(new_theme)
+}
 
-    // initial mode discovery & update button
-    update_color_scheme_css();
+auto_update_theme()
+// update automatically if the user's theme preference changes
+if (window.matchMedia) {
+  window.matchMedia("(prefers-color-scheme: dark)").addListener( auto_update_theme )
+}
+// Note: .addListener is considered deprecated, and is supposed to be updated to
+// addEventListener("change", callback) instead; however, as recently as macOS
+// High Sierra (~2017-2018) Safari does not support addEventListener here.
 
-    // update every time it changes
-    if (window.matchMedia) window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme_css );
-    
-  $(document).ready(function() {
-
-    // toggle button click code
-    $("#css-toggle-btn").bind("click", function() {
-      // disable further automatic toggles
-      if (window.localStorage.getItem('user-prefers-color') === null)
-        window.localStorage.setItem('user-prefers-color', 0);
-      // get current mode, i.e. does body have the `.dark`` classname
-      $mode = $("html").hasClass("dark") ? 'light' : 'dark';
-      $upc = $("html").hasClass("dark") ? 1 : 2;
-      window.localStorage.setItem("user-prefers-color", $upc);
-      toggle_color_scheme_css($mode);
-    });
-
-})
+window.addEventListener('DOMContentLoaded', (event) => {
+  document.getElementById("css-toggle-btn").onclick = user_toggle_theme
+})

styles/_buttons.scss

@@ -5,6 +5,8 @@
   cursor: pointer;
   text-decoration: none;
   transition: 0.2s;
+  padding: 0.5rem 1rem;
+  line-height: 16px;
 }
 
 .content a.button {
@@ -19,33 +21,6 @@ button.disabled,
 button[disabled="disabled"] {
   cursor: not-allowed;
 }
-//
-// // .btn-outline-secondary,
-// .content a.button,
-// .navbar-dark .navbar-nav .nav-link.btn-outline-secondary {
-//   color: $white;
-//   border-color: $white;
-//   border-width: 2px;
-//   border-style: solid;
-//
-//   &:not(:disabled):not(.disabled):hover, &:not(:disabled):not(.disabled):active {
-//     color: $primary;
-//     border-color: $primary;
-//     background-color: transparent;
-//   }
-// }
-//
-// .navbar-dark .navbar-nav .nav-link:hover {
-//   color: $white;
-// }
-//
-// p + .readmore {
-//   margin-top: 12px;
-// }
-//
-// .card-header a i {
-//   margin: 0 0.2em 0 0.8em;
-// }
 
 .btn-primary code,
 .btn-secondary code {
@@ -58,9 +33,6 @@ button[disabled="disabled"] {
   color: $white;
   border: none;
   border-color: transparent;
-  border-radius: 4px;
-  padding: 0.5rem 1rem;
-  line-height: 16px;
   &:hover {
     background: $blue-purple-600;
   }

styles/_pages.scss

@@ -70,9 +70,29 @@
 
 // Page backgrounds
 .landing-bg {
-  @include media-breakpoint-down(sm) {
-    opacity: .6;
-    margin-right: -20vw;//CURSOR
+  opacity: 0.6;
+  @include media-breakpoint-up(md) {
+    opacity: 1.0;
+  }
+}
+
+.landing-builtin-bg {
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    // background-image set on the page-* classes
+    background-repeat: no-repeat;
+    background-position-x: left -20vw;
+    background-position-y: top;
+    opacity: 0.6;
+    @include media-breakpoint-up(md) {
+      background-position-x: left;
+      opacity: 1.0;
+    }
   }
 }
 
@@ -146,11 +166,21 @@
 }
 
 .page-uses {
-  background: url(../img/backgrounds/use-cases-blue.svg) no-repeat;
-  background-position-x: left -20vw;
-  background-position-y: top;
-  @include media-breakpoint-up(md) {
-    background-position-x: left;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: url(../img/backgrounds/use-cases-blue.svg) no-repeat;
+    background-position-x: left -20vw;
+    background-position-y: top;
+    opacity: 0.6;
+    @include media-breakpoint-up(md) {
+      background-position-x: left;
+      opacity: 1.0;
+    }
   }
   @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
     ##{$usecase} {
@@ -285,11 +315,8 @@
 }
 
 .page-docs-index {
-  background: url(../img/backgrounds/bg-docs.png) no-repeat;
-  background-position-x: left -20vw;
-  background-position-y: top;
-  @include media-breakpoint-up(md) {
-    background-position-x: left;
+  &::before {
+    background-image: url(../img/backgrounds/bg-docs.png);
   }
 
   .center-search {

styles/_top-nav.scss

@@ -615,29 +615,23 @@ a {
     position: static;
     display: inline-block;
     content: " ";
-    background: url("../img/sun-moon.svg");
     cursor: pointer;
     border: 0;
+    background-image: url("../img/sun-moon.svg");
     background-size: 3rem;
     background-color: transparent;
-    background-position: top left;
     transform-origin: center;
     margin-left: -.5rem;
     margin-right: .5rem;
-    transition: all .4s ease;
+    transition: transform .4s ease, background-position .4s ease;
+    // Default: dark mode, show moon
     transform: rotate(15deg);
+    background-position: top left;
   }
   .custom-control-label::after {
     display: none;
   }
 }
-html.light .custom-theme-toggle {
-  .custom-control-label::before {
-    background-color: transparent;
-    background-position: bottom right;
-    transform: rotate(-15deg);
-  }
-}
 
 // Fix dropdown box-shadows on mobile (language selector's shadow overlaps the
 // rest of the menu, so it's offset more with a negative spread)

styles/light/_light-theme.scss

@@ -14,6 +14,13 @@ body {
     background-color: $light-bg;
     color: $light-fg;
 }
+#topnav-theme .custom-theme-toggle {
+  .custom-control-label::before {
+    background-color: transparent;
+    background-position: bottom right;
+    transform: rotate(-15deg);
+  }
+}
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -22,6 +29,7 @@ h1, h2, h3, h4, h5, h6,
   }
   &.green-500 {
     color: $green-700;
+    text-shadow: white 0 0 2px, white -1px -1px 2px, white 1px 1px 2px;
   }
 }
 
@@ -102,7 +110,7 @@ a, nav a {
     color: $light-link-hover-color;
   }
 
-  &:focus {
+  &:not(.btn):focus {
     background-color: transparent;
   }
 }
@@ -358,6 +366,9 @@ pre code {
       background-color: $light-form-bg;
       color: $white;
     }
+    &:focus {
+      background-color: $gray-800;
+    }
   }
 
   .code_toggler {
@@ -367,6 +378,12 @@ pre code {
   }
 }
 
+.interactive-block {
+  .breadcrumb-item.done a::after {
+    color: $green-900;
+  }
+}
+
 // Dev tools -------------------------------------------------------------------
 .modal-content {
   background-color: $light-standout-bg;
@@ -492,6 +509,21 @@ pre code {
   }
 }
 
+.landing-bg {
+  opacity: 0.4;
+  @include media-breakpoint-up(md) {
+    opacity: 1.0;
+  }
+}
+.landing-builtin-bg {
+  &::before {
+    opacity: 0.4;
+    @include media-breakpoint-up(md) {
+      opacity: 1.0;
+    }
+  }
+}
+
 
 // feedback widget
 #feedback-content {

template/base.html.jinja

@@ -161,7 +161,6 @@ $(document).ready(() => {
 <script type="application/javascript" src="{{currentpage.prefix}}assets/js/interactive-tutorial.js"></script>
 {% endif %}
 
-
 {% block endbody %}{% endblock %}
 </body>
 </html>

template/component-top-nav.html.jinja

@@ -42,14 +42,14 @@
             {% endif %}
             {% set _ = printed_groupings.append(link.top_nav_grouping) %}
             {% endif %}
-            <a class="dropdown-item{% if currentpage == link %} active{% endif %}{% if "//" in link.html %} external-link{% endif %}" href="{{link.html}}">{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
+            <a class="dropdown-item{% if currentpage == link %} active{% endif %}{% if "//" in link.html %} external-link{% endif %}" href="{{link.html}}"{% if "//" in link.html %} target="_blank"{% endif %}>{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
           {% endfor %}
           </div><!--./col-->
         </div><!--/.dropdown-menu-->
       </li>
       {% elif not top_page.top_nav_omit %}
       <li class="nav-item">
-            <a class="nav-link{% if "//" in link.html %} external-link{% endif %}" href="{{top_page.html}}"><span>{{top_page.name}}</span></a>
+            <a class="nav-link{% if "//" in link.html %} external-link{% endif %}" href="{{top_page.html}}"{% if "//" in link.html %} target="_blank"{% endif %}><span>{{top_page.name}}</span></a>
       </li>
       {% endif %}
       {% endmacro %}

template/page-docs.html.jinja

@@ -1,6 +1,6 @@
 {% extends "base.html.jinja" %}
 
-{% block mainclasses %}landing padded-landing page-docs-index{% endblock %}
+{% block mainclasses %}landing padded-landing page-docs-index landing-builtin-bg{% endblock %}
 
 {% block breadcrumbs %}{% endblock %}
 

template/page-uses.html.jinja

@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block bodyclasses %}no-sidebar{% endblock %}
-{% block mainclasses %}landing page-uses{% endblock %}
+{% block mainclasses %}landing page-uses landing-builtin-bg{% endblock %}
 
 {% block breadcrumbs %}{% endblock %}
 

tool/filter_js_editor.py

@@ -34,7 +34,7 @@ START_REPL = """<div class="js_interactive" id="\\1">
 END_REPL = """
 <p>
   <button type="button" class="btn btn-primary run-button">Run</button>
-  <button type="reset" class="btn btn-secondary-outline reset-button">Reset</button>
+  <button type="reset" class="btn btn-outline-secondary reset-button">Reset</button>
 </p>
 <div class="response"></div>
 </div>"""