Merge pull request #5022 from codeEmpress1/theme-switch-in-examples

Theme switch in examples
canonical · Mar 13, 2024 · 4e3b67e · 4e3b67e
2 parents 86603f1 + c33e881
commit 4e3b67e
Show file tree

Hide file tree

Showing 21 changed files with 142 additions and 49 deletions.
diff --git a/scss/_utilities_baseline-grid.scss b/scss/_utilities_baseline-grid.scss
@@ -37,8 +37,16 @@
 
   .u-baseline-grid__toggle {
     bottom: $spv--x-large;
+    color: $colors--light-theme--text-default; // Force light theme colour because of baseline grid background
     position: fixed;
     right: $sp-unit * 3;
     z-index: 201;
   }
+
+  // hide the theme toggle in Percy
+  @media only percy {
+    .u-baseline-grid__toggle {
+      visibility: hidden !important;
+    }
+  }
 }
diff --git a/scss/_utilities_theme-toggle.scss b/scss/_utilities_theme-toggle.scss
@@ -0,0 +1,39 @@
+@import 'settings';
+
+@mixin vf-u-theme-toggle {
+  .u-theme-toggle {
+    bottom: $spv--x-large;
+    position: fixed;
+    right: $sp-unit * 30;
+    z-index: 100;
+
+    .u-theme-toggle__button {
+      margin: 0;
+
+      &:not(:last-child) {
+        border-right: 0;
+      }
+    }
+
+    .u-theme-toggle__dark {
+      background-color: $colors--dark-theme--background-default;
+      color: $colors--dark-theme--text-default;
+    }
+
+    .u-theme-toggle__light {
+      background-color: $colors--light-theme--background-default;
+      color: $colors--light-theme--text-default;
+    }
+    .u-theme-toggle__paper {
+      background-color: $color-paper;
+      color: $color-x-dark;
+    }
+  }
+
+  // hide the theme toggle in Percy
+  @media only percy {
+    .u-theme-toggle {
+      visibility: hidden !important;
+    }
+  }
+}
diff --git a/scss/_vanilla.scss b/scss/_vanilla.scss
@@ -88,6 +88,7 @@
 @import 'utilities_no-print';
 @import 'utilities_text-max-width';
 @import 'utilities_text-figures';
+@import 'utilities_theme-toggle';
 
 // Include all the CSS
 @mixin vanilla {
@@ -180,4 +181,5 @@
   @include vf-u-no-print;
   @include vf-u-text-max-width;
   @include vf-u-text-figures;
+  @include vf-u-theme-toggle;
 }
diff --git a/scss/docs/example.scss b/scss/docs/example.scss
@@ -2,6 +2,7 @@
 
 @import '../vanilla';
 @include vf-u-baseline-grid;
+@include vf-u-theme-toggle;
 
 // stylelint-disable selector-max-type -- examples can use type selectors
 body {

diff --git a/templates/_layouts/examples.html b/templates/_layouts/examples.html
@@ -15,38 +15,18 @@
     <link rel="icon" href="https://assets.ubuntu.com/v1/ab36e6ed-vanilla_favicon_32px.png" type="image/x-icon" />
     {% block style %}{% endblock %}
 
+    {% if is_not_themed %}
     <script>
-      (function() {
-        function inIframe () {
-          try {
-            return window.self !== window.top;
-          } catch (e) {
-            return true;
-          }
-        }
-
-        function fragmentFromString(htmlString) {
-          var temp = document.createElement('template');
-          temp.innerHTML = htmlString;
-          return temp.content;
-        }
-
-        if (!inIframe()) {
-          document.documentElement.classList.add("u-baseline-grid");
-
-          document.addEventListener('DOMContentLoaded', function() {
-            var body = document.body;
-            var controls = fragmentFromString('<div class="u-baseline-grid__toggle"><label class="p-switch"><input type="checkbox" class="p-switch__input js-baseline-toggle" /><span class="p-switch__slider"></span><span class="p-switch__label">Toggle baseline grid</span></label></div>');
-            body.appendChild(controls);
-
-            var toggle = document.querySelector('.js-baseline-toggle');
-            toggle.addEventListener('click', function (event) {
-              body.classList.toggle('u-baseline-grid');
-            });
-          });
-        }
-      })();
+      var SHOW_THEME_SWITCH = false;
     </script>
+    {% else %}
+    <script>
+      var SHOW_THEME_SWITCH = true;
+    </script>
+    {% endif %}
+
+    <script defer src="{{ versioned_static('js/example-tools.js') }}"></script>
+
   </head>
 
   <body {% if is_dark %}class="is-dark"{% elif is_paper %}class="is-paper"{% endif %}>

diff --git a/templates/docs/examples/base/code-inline-dark.html b/templates/docs/examples/base/code-inline-dark.html
@@ -3,12 +3,7 @@
 
 {% block standalone_css %}base{% endblock %}
 
+{% set is_dark = True %}
 {% block content %}
-<div class="p-strip is-dark" style="background: #111">
-  <div class="row">
-    <div class="col-12">
-      <p style="color: #fff;">The quick brown <code class="is-dark">fox&nbsp;jumps</code> over the lazy dog</p>
-    </div>
-  </div>
-</div>
+<p>The quick brown <code>fox&nbsp;jumps</code> over the lazy dog</p>
 {% endblock %}
diff --git a/templates/docs/examples/base/hr-dark.html b/templates/docs/examples/base/hr-dark.html
@@ -11,7 +11,7 @@
 </style>
 {% endblock %}
 
-{% set is_dark = true %}
+{% set is_dark = True %}
 {% block content %}
-<hr class="is-dark">
+<hr>
 {% endblock %}
diff --git a/templates/docs/examples/patterns/article-pagination.html b/templates/docs/examples/patterns/article-pagination.html
@@ -3,6 +3,7 @@
 
 {% block standalone_css %}patterns_article-pagination{% endblock %}
 
+{% set is_not_themed = True %}
 {% block content %}
 <footer class="p-article-pagination">
   <a class="p-article-pagination__link--previous" href="#previous">

diff --git a/templates/docs/examples/patterns/card/overlay.html b/templates/docs/examples/patterns/card/overlay.html
@@ -3,6 +3,7 @@
 
 {% block standalone_css %}patterns_card{% endblock %}
 
+{% set is_not_themed = True %}
 {% block content %}
 <section class="p-strip--image is-light" style="background-image:url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')">
   <div class="row">

diff --git a/templates/docs/examples/patterns/divider/dark.html b/templates/docs/examples/patterns/divider/dark.html
@@ -3,16 +3,12 @@
 
 {% block standalone_css %}patterns_divider{% endblock %}
 
+{% set is_dark = True %}
 {% block style %}
-<style>
-  body {
-    background: #111;
-  }
-</style>
 {% endblock %}
 
 {% block content %}
-<div class="row p-divider is-dark">
+<div class="row p-divider">
   <div class="col-4 p-divider__block">
     <h2>Lorem ipsum</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.</p>

diff --git a/templates/docs/examples/patterns/lists/lists-stepped-dark.html b/templates/docs/examples/patterns/lists/lists-stepped-dark.html
@@ -3,9 +3,8 @@
 
 {% block standalone_css %}patterns_lists{% endblock %}
 
+{% set is_dark = True %}
 {% block content %}
-<div class="p-strip is-dark">
-
   <ol class="p-stepped-list">
     <li class="p-stepped-list__item">
       <h3 class="p-stepped-list__title">
@@ -65,5 +64,4 @@ <h4 class="p-stepped-list__title">
       <p class="p-stepped-list__content">Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.</p>
     </li>
   </ol>
-</div>
 {% endblock %}
diff --git a/templates/docs/examples/patterns/logo-section/logo-section-dark.html b/templates/docs/examples/patterns/logo-section/logo-section-dark.html
@@ -12,6 +12,7 @@
 </style>
 {% endblock %}
 
+{% set is_not_themed = True %}
 {% block content %}
 <div class="u-fixed-width">
   <div class="p-logo-section">

diff --git a/templates/docs/examples/patterns/pagination/pagination-deprecated.html b/templates/docs/examples/patterns/pagination/pagination-deprecated.html
@@ -3,6 +3,7 @@
 
 {% block standalone_css %}patterns_pagination{% endblock %}
 
+{% set is_not_themed = True %}
 {% block content %}
 <nav aria-label="Pagination">
   <ol class="p-pagination">

diff --git a/templates/docs/examples/patterns/rule/dark.html b/templates/docs/examples/patterns/rule/dark.html
@@ -3,8 +3,8 @@
 
 {% block standalone_css %}patterns_rule{% endblock %}
 
+{% set is_not_themed = True %}
 {% block content %}
-
 <div class="p-strip is-dark">
     <div class="u-fixed-width p-section--shallow">
       <hr class="p-rule--highlight is-dark">

diff --git a/templates/docs/examples/patterns/search-and-filter/chip-overflow.html b/templates/docs/examples/patterns/search-and-filter/chip-overflow.html
@@ -3,6 +3,7 @@
 
 {% block standalone_css %}patterns_search-and-filter{% endblock %}
 
+{% set is_not_themed = True %}
 {% block content %}
 <div class="p-search-and-filter">
   <div class="p-search-and-filter__search-container" aria-expanded="false" data-active="true" data-empty="false">

diff --git a/templates/docs/examples/patterns/search-and-filter/default.html b/templates/docs/examples/patterns/search-and-filter/default.html
@@ -3,6 +3,7 @@
 
 {% block standalone_css %}patterns_search-and-filter{% endblock %}
 
+{% set is_not_themed = True %}
 {% block content %}
 <div class="p-search-and-filter">
   <div class="p-search-and-filter__search-container" aria-expanded="false" data-active="true" data-empty="true">

diff --git a/templates/docs/examples/patterns/search-and-filter/expanded.html b/templates/docs/examples/patterns/search-and-filter/expanded.html
@@ -3,6 +3,7 @@
 
 {% block standalone_css %}patterns_search-and-filter{% endblock %}
 
+{% set is_not_themed = True %}
 {% block content %}
 <div class="p-search-and-filter">
   <div class="p-search-and-filter__search-container" aria-expanded="true" data-active="true" data-empty="true">

diff --git a/templates/docs/examples/patterns/search-and-filter/with-chips.html b/templates/docs/examples/patterns/search-and-filter/with-chips.html
@@ -3,6 +3,7 @@
 
 {% block standalone_css %}patterns_search-and-filter{% endblock %}
 
+{% set is_not_themed = True %}
 {% block content %}
 <div class="p-search-and-filter">
   <div class="p-search-and-filter__search-container" aria-expanded="false" data-active="true" data-empty="false">

diff --git a/templates/docs/examples/patterns/search-and-filter/with-search-prompt.html b/templates/docs/examples/patterns/search-and-filter/with-search-prompt.html
@@ -3,6 +3,7 @@
 
 {% block standalone_css %}patterns_search-and-filter{% endblock %}
 
+{% set is_not_themed = True %}
 {% block content %}
 <div class="p-search-and-filter">
   <button class="p-search-and-filter__clear"><i class="p-icon--close"></i></button>

diff --git a/templates/docs/examples/patterns/strips/dark.html b/templates/docs/examples/patterns/strips/dark.html
@@ -4,6 +4,7 @@
 {% block standalone_css %}patterns_strip{% endblock %}
 
 {% set is_paper = true %}
+{% set is_not_themed = true %}
 {% block content %}
 <div class="p-strip is-dark">
     <div class="row--25-75">

diff --git a/templates/static/js/example-tools.js b/templates/static/js/example-tools.js
@@ -0,0 +1,64 @@
+(function () {
+  function inIframe() {
+    try {
+      return window.self !== window.top;
+    } catch (e) {
+      return true;
+    }
+  }
+
+  function fragmentFromString(htmlString) {
+    var temp = document.createElement('template');
+    temp.innerHTML = htmlString;
+    return temp.content;
+  }
+
+  if (!inIframe()) {
+    document.documentElement.classList.add('u-baseline-grid');
+
+    document.addEventListener('DOMContentLoaded', function () {
+      var body = document.body;
+      var controls = fragmentFromString(
+        '<div class="u-baseline-grid__toggle"><label class="p-switch"><input type="checkbox" class="p-switch__input js-baseline-toggle" /><span class="p-switch__slider"></span><span class="p-switch__label">Toggle baseline grid</span></label></div>',
+      );
+      var themes = fragmentFromString(
+        '<div class="u-theme-toggle is-light"><button class="u-theme-toggle__button u-theme-toggle__dark js-dark-theme-toggle">Dark</button><button class="u-theme-toggle__button u-theme-toggle__light js-light-theme-toggle">Light</button><button class="u-theme-toggle__button u-theme-toggle__paper js-paper-theme-toggle">Paper</button></div>',
+      );
+
+      body.appendChild(themes);
+      body.appendChild(controls);
+
+      var toggle = document.querySelector('.js-baseline-toggle');
+      toggle.addEventListener('click', function (event) {
+        body.classList.toggle('u-baseline-grid');
+      });
+
+      var themeToggles = document.querySelector('.u-theme-toggle');
+
+      if (!SHOW_THEME_SWITCH) {
+        themeToggles.classList.add('u-hide');
+      }
+
+      var darkTheme = document.querySelector('.js-dark-theme-toggle');
+      darkTheme.addEventListener('click', function (event) {
+        body.classList.add('is-dark');
+        body.classList.remove('is-paper');
+        body.classList.remove('is-light');
+      });
+
+      var lightTheme = document.querySelector('.js-light-theme-toggle');
+      lightTheme.addEventListener('click', function (event) {
+        body.classList.add('is-light');
+        body.classList.remove('is-dark');
+        body.classList.remove('is-paper');
+      });
+
+      var paperTheme = document.querySelector('.js-paper-theme-toggle');
+      paperTheme.addEventListener('click', function (event) {
+        body.classList.add('is-paper');
+        body.classList.remove('is-dark');
+        body.classList.remove('is-light');
+      });
+    });
+  }
+})();