example color theme rework supports pre-existing example theme defaul…

…ts / restrictions
canonical · May 9, 2024 · 82522ed · 82522ed
1 parent 9f8241d
commit 82522ed
Show file tree

Hide file tree

Showing 79 changed files with 379 additions and 183 deletions.
diff --git a/color-themes.yml b/color-themes.yml
@@ -1,5 +1,95 @@
+default_theme: 'light'
 themes:
-  - "light"
-  - "dark"
-  - "paper"
-default_theme: "light"
+  light:
+  dark:
+  paper:
+path_overrides:
+  'docs/examples/layouts/application/structure':
+    is_not_themed: true
+  'docs/examples/layouts/application/default':
+    is_not_themed: true
+  'docs/examples/layouts/application/jaas':
+    is_not_themed: true
+  'docs/examples/layouts/application/split':
+    is_not_themed: true
+  'docs/examples/patterns/card/overlay':
+    is_not_themed: true
+  'docs/examples/patterns/article-pagination':
+    is_not_themed: true
+  'docs/examples/patterns/pagination/pagination-deprecated':
+    is_not_themed: true
+  'docs/examples/patterns/search-and-filter/chip-overflow':
+    is_not_themed: true
+  'docs/examples/patterns/search-and-filter/default':
+    is_not_themed: true
+  'docs/examples/patterns/search-and-filter/expanded':
+    is_not_themed: true
+  'docs/examples/patterns/search-and-filter/with-chips':
+    is_not_themed: true
+  'docs/examples/patterns/search-and-filter/with-search-prompt':
+    is_not_themed: true
+  'docs/examples/patterns/suru/50-50':
+    available_themes:
+      - 'paper'
+      - 'dark'
+  'docs/examples/patterns/suru/default':
+    available_themes:
+      - 'paper'
+      - 'dark'
+  'docs/examples/patterns/suru/divider':
+    available_themes:
+      - 'paper'
+      - 'dark'
+  'docs/examples/patterns/suru/fan-bottom':
+    available_themes:
+      - 'paper'
+      - 'dark'
+  'docs/examples/patterns/suru/fan-pyramid-left':
+    available_themes:
+      - 'paper'
+      - 'dark'
+  'docs/examples/patterns/suru/fan-pyramid-right':
+    available_themes:
+      - 'paper'
+      - 'dark'
+  'docs/examples/patterns/suru/fan-top':
+    available_themes:
+      - 'paper'
+      - 'dark'
+  'docs/examples/patterns/suru/variants':
+    available_themes:
+      - 'paper'
+      - 'dark'
+  'docs/examples/patterns/strips/white':
+    available_themes:
+      - 'paper'
+  'docs/examples/patterns/strips/shallow':
+    default_theme: 'paper'
+  'docs/examples/patterns/strips/deep':
+    default_theme: 'paper'
+  'docs/examples/patterns/strips/highlighted':
+    default_theme: 'paper'
+  'docs/examples/patterns/hero/hero-404':
+    default_theme: 'paper'
+  'docs/examples/patterns/hero/hero-blog':
+    default_theme: 'paper'
+  'docs/examples/patterns/hero/hero-heading-1':
+    default_theme: 'paper'
+  'docs/examples/patterns/hero/hero-heading-2':
+    default_theme: 'paper'
+  'docs/examples/patterns/hero/hero-line-breaks':
+    default_theme: 'paper'
+  'docs/examples/patterns/hero/hero-nested-grid':
+    default_theme: 'paper'
+  'docs/examples/patterns/hero/hero-rules':
+    default_theme: 'paper'
+  'docs/examples/patterns/hero/hero-sections-search':
+    default_theme: 'paper'
+  'docs/examples/patterns/hero/hero-sections':
+    default_theme: 'paper'
+  'docs/examples/patterns/hero/hero-signpost':
+    default_theme: 'paper'
+  'docs/examples/brochure/index':
+    default_theme: 'paper'
+  'docs/examples/layouts/docs':
+    default_theme: 'paper'
diff --git a/scss/_utilities_example_controls.scss b/scss/_utilities_example_controls.scss
@@ -26,4 +26,4 @@
       visibility: hidden !important;
     }
   }
-}
+}
diff --git a/templates/_layouts/examples.html b/templates/_layouts/examples.html
@@ -15,21 +15,11 @@
     <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>
-      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 %}>
+  <body>
     {% block content %}{% endblock %}
   </body>
 </html>
diff --git a/templates/docs/examples/base/code-inline-dark.html b/templates/docs/examples/base/code-inline-dark.html
@@ -3,7 +3,7 @@
 
 {% block standalone_css %}base{% endblock %}
 
-{% set is_dark = True %}
+
 {% block content %}
 <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 %}
+
 {% block content %}
 <hr>
 {% endblock %}
diff --git a/templates/docs/examples/base/paper/input-on-paper.html b/templates/docs/examples/base/paper/input-on-paper.html
@@ -2,7 +2,7 @@
 {% block title %}Paper background / Inputs{% endblock %}
 
 {% block standalone_css %}patterns_forms{% endblock %}
-{% set is_paper = True %}
+
 
 {% block content %}
 <label for="full-name-stacked" class="p-form__label">Full name</label>

diff --git a/templates/docs/examples/base/paper/search-box-on-paper.html b/templates/docs/examples/base/paper/search-box-on-paper.html
@@ -2,7 +2,7 @@
 {% block title %}Paper background / Search box{% endblock %}
 
 {% block standalone_css %}patterns_forms{% endblock %}
-{% set is_paper = True %}
+
 
 {% block content %}
 <form class="p-search-box on-paper">

diff --git a/templates/docs/examples/brochure/index.html b/templates/docs/examples/brochure/index.html
@@ -7,7 +7,7 @@
 </style>
 {% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 <header id="navigation" class="p-navigation is-dark">
   <div class="p-navigation__row">

diff --git a/templates/docs/examples/layouts/application/JAAS.html b/templates/docs/examples/layouts/application/JAAS.html
@@ -78,7 +78,7 @@
           </div>
         </div>
         <div class="p-panel__content">
-          {% set is_dark = True %}
+
           {% include "docs/examples/patterns/side-navigation/_layout-JAAS.html" %}
         </div>
       </div>

diff --git a/templates/docs/examples/layouts/application/default.html b/templates/docs/examples/layouts/application/default.html
@@ -38,7 +38,7 @@
           </div>
         </div>
         <div class="p-panel__content">
-          {% set is_dark = True %}
+
           {% include "docs/examples/patterns/side-navigation/_layout-application.html" %}
         </div>
       </div>

diff --git a/templates/docs/examples/layouts/application/split.html b/templates/docs/examples/layouts/application/split.html
@@ -50,7 +50,7 @@
           </div>
         </div>
         <div class="p-panel__content">
-          {% set is_dark = True %}
+
           {% include "docs/examples/patterns/side-navigation/_layout-application.html" %}
         </div>
       </div>

diff --git a/templates/docs/examples/layouts/docs.html b/templates/docs/examples/layouts/docs.html
@@ -7,7 +7,7 @@
 </style>
 {% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 
 

diff --git a/templates/docs/examples/patterns/article-pagination.html b/templates/docs/examples/patterns/article-pagination.html
@@ -3,7 +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/buttons/dark.html b/templates/docs/examples/patterns/buttons/dark.html
@@ -3,7 +3,7 @@
 
 {% block standalone_css %}patterns_buttons{% endblock %}
 
-{% set is_dark = True %}
+
 {% block content %}
 <button class="p-button">Default button</button>
 <button class="p-button--base">Base button</button>

diff --git a/templates/docs/examples/patterns/card/overlay.html b/templates/docs/examples/patterns/card/overlay.html
@@ -3,7 +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/chip/dark.html b/templates/docs/examples/patterns/chip/dark.html
@@ -3,7 +3,7 @@
 
 {% block standalone_css %}patterns_chip{% endblock %}
 
-{% set is_dark = true %}
+
 {% block content %}
 <section class="p-strip">
   <button class="p-chip">

diff --git a/templates/docs/examples/patterns/code-snippet/default-dark.html b/templates/docs/examples/patterns/code-snippet/default-dark.html
@@ -3,7 +3,7 @@
 
 {% block standalone_css %}patterns_code-snippet{% endblock %}
 
-{% set is_dark = true %}
+
 {% block content %}
 {% include "/docs/examples/patterns/code-snippet/_default.html" %}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/code-snippet/dropdown-multiple-dark.html b/templates/docs/examples/patterns/code-snippet/dropdown-multiple-dark.html
@@ -3,7 +3,7 @@
 
 {% block standalone_css %}patterns_code-snippet{% endblock %}
 
-{% set is_dark = true %}
+
 {% block content %}
 {% include "/docs/examples/patterns/code-snippet/_dropdown-multiple.html" %}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/code-snippet/icon-dark.html b/templates/docs/examples/patterns/code-snippet/icon-dark.html
@@ -3,7 +3,7 @@
 
 {% block standalone_css %}patterns_code-snippet{% endblock %}
 
-{% set is_dark = true %}
+
 {% block content %}
 {% include "/docs/examples/patterns/code-snippet/_icon.html" %}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/contextual-menu/dark.html b/templates/docs/examples/patterns/contextual-menu/dark.html
@@ -3,7 +3,7 @@
 
 {% block standalone_css %}patterns_contextual-menu{% endblock %}
 
-{% set is_dark = True %}
+
 {% block content %}
 <span class="p-contextual-menu--left">
   <button class="p-contextual-menu__toggle" aria-controls="menu-3" aria-expanded="false" aria-haspopup="true">Take action&hellip;</button>

diff --git a/templates/docs/examples/patterns/divider/dark.html b/templates/docs/examples/patterns/divider/dark.html
@@ -3,7 +3,7 @@
 
 {% block standalone_css %}patterns_divider{% endblock %}
 
-{% set is_dark = True %}
+
 {% block style %}
 {% endblock %}
 

diff --git a/templates/docs/examples/patterns/forms/form-validation-dark.html b/templates/docs/examples/patterns/forms/form-validation-dark.html
@@ -3,7 +3,7 @@
 
 {% block standalone_css %}patterns_forms{% endblock %}
 
-{% set is_dark = true %}
+
 {% block content %}
 <form>
   <div class="p-form-validation is-error">

diff --git a/templates/docs/examples/patterns/forms/forms-dark.html b/templates/docs/examples/patterns/forms/forms-dark.html
@@ -3,7 +3,7 @@
 
 {% block standalone_css %}patterns_forms{% endblock %}
 
-{% set is_dark = true %}
+
 {% block content %}
 <form>
   <label for="exampleTextInputHelp">Email address</label>

diff --git a/templates/docs/examples/patterns/hero/hero-404.html b/templates/docs/examples/patterns/hero/hero-404.html
@@ -2,7 +2,7 @@
 {% block title %}Hero / 404{% endblock %}
 {% block standalone_css %}patterns_hero{% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 
 <section class="p-section--hero">

diff --git a/templates/docs/examples/patterns/hero/hero-blog.html b/templates/docs/examples/patterns/hero/hero-blog.html
@@ -2,7 +2,7 @@
 {% block title %}Hero / Blog{% endblock %}
 {% block standalone_css %}patterns_hero{% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 
 <section class="p-section--hero">

diff --git a/templates/docs/examples/patterns/hero/hero-heading-1.html b/templates/docs/examples/patterns/hero/hero-heading-1.html
@@ -2,7 +2,7 @@
 {% block title %}Hero / Heading{% endblock %}
 {% block standalone_css %}patterns_hero{% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 
 <section class="p-section--hero">

diff --git a/templates/docs/examples/patterns/hero/hero-heading-2.html b/templates/docs/examples/patterns/hero/hero-heading-2.html
@@ -2,7 +2,7 @@
 {% block title %}Hero / Subtitle{% endblock %}
 {% block standalone_css %}patterns_hero{% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 
 <section class="p-section--hero">

diff --git a/templates/docs/examples/patterns/hero/hero-line-breaks.html b/templates/docs/examples/patterns/hero/hero-line-breaks.html
@@ -2,7 +2,7 @@
 {% block title %}Hero / Line break{% endblock %}
 {% block standalone_css %}patterns_hero{% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 
 <section class="p-section--hero">

diff --git a/templates/docs/examples/patterns/hero/hero-nested-grid.html b/templates/docs/examples/patterns/hero/hero-nested-grid.html
@@ -2,7 +2,7 @@
 {% block title %}Hero / Nested grid{% endblock %}
 {% block standalone_css %}patterns_hero{% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 
 <section class="p-section--hero">

diff --git a/templates/docs/examples/patterns/hero/hero-rules.html b/templates/docs/examples/patterns/hero/hero-rules.html
@@ -2,7 +2,7 @@
 {% block title %}Hero / Horizontal rules{% endblock %}
 {% block standalone_css %}patterns_hero{% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 
 <section class="p-section--hero">

diff --git a/templates/docs/examples/patterns/hero/hero-sections-search.html b/templates/docs/examples/patterns/hero/hero-sections-search.html
@@ -2,7 +2,7 @@
 {% block title %}Hero / Search{% endblock %}
 {% block standalone_css %}patterns_hero{% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 
 <section class="p-section--hero">

diff --git a/templates/docs/examples/patterns/hero/hero-sections.html b/templates/docs/examples/patterns/hero/hero-sections.html
@@ -2,7 +2,7 @@
 {% block title %}Hero / Sections{% endblock %}
 {% block standalone_css %}patterns_hero{% endblock %}
 
-{% set is_paper = True %}
+
 {% block content %}
 
 <section class="p-section--hero">