From b0533b499c386ba204372441056951f270da6eb3 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <tomivirkki@users.noreply.github.com>
Date: Thu, 3 Feb 2022 09:34:18 +0200
Subject: [PATCH] chore: add standard lumo style sheets on dev pages (#3380)

---
 dev/accordion.html                       |  1 +
 dev/app-layout.html                      | 23 +++++++----------------
 dev/avatar-group.html                    |  1 +
 dev/button.html                          |  1 +
 dev/charts/lumo/area.html                |  1 +
 dev/charts/lumo/arearange.html           |  1 +
 dev/charts/lumo/areaspline.html          |  1 +
 dev/charts/lumo/areasplinerange.html     |  1 +
 dev/charts/lumo/bar.html                 |  1 +
 dev/charts/lumo/boxplot.html             |  1 +
 dev/charts/lumo/bubble.html              |  1 +
 dev/charts/lumo/bullet.html              |  1 +
 dev/charts/lumo/candlestick.html         |  1 +
 dev/charts/lumo/column.html              |  1 +
 dev/charts/lumo/columnrange.html         |  1 +
 dev/charts/lumo/errorbar.html            |  1 +
 dev/charts/lumo/funnel.html              |  1 +
 dev/charts/lumo/gauge.html               |  1 +
 dev/charts/lumo/gaugedual.html           |  1 +
 dev/charts/lumo/heatmap.html             |  1 +
 dev/charts/lumo/line.html                |  1 +
 dev/charts/lumo/ohlc.html                |  1 +
 dev/charts/lumo/organization.html        |  1 +
 dev/charts/lumo/pie.html                 |  1 +
 dev/charts/lumo/polar.html               |  1 +
 dev/charts/lumo/polygon.html             |  1 +
 dev/charts/lumo/pyramid.html             |  1 +
 dev/charts/lumo/scatter.html             |  1 +
 dev/charts/lumo/solidgauge.html          |  1 +
 dev/charts/lumo/spiderweb.html           |  1 +
 dev/charts/lumo/timeline.html            |  1 +
 dev/charts/lumo/treemap.html             |  1 +
 dev/charts/lumo/waterfall.html           |  1 +
 dev/charts/material/area.html            |  1 +
 dev/charts/material/arearange.html       |  1 +
 dev/charts/material/areaspline.html      |  1 +
 dev/charts/material/areasplinerange.html |  1 +
 dev/charts/material/bar.html             |  1 +
 dev/charts/material/boxplot.html         |  1 +
 dev/charts/material/bubble.html          |  1 +
 dev/charts/material/bullet.html          |  1 +
 dev/charts/material/candlestick.html     |  1 +
 dev/charts/material/column.html          |  1 +
 dev/charts/material/columnrange.html     |  1 +
 dev/charts/material/errorbar.html        |  1 +
 dev/charts/material/funnel.html          |  1 +
 dev/charts/material/gauge.html           |  1 +
 dev/charts/material/gaugedual.html       |  1 +
 dev/charts/material/heatmap.html         |  1 +
 dev/charts/material/line.html            |  1 +
 dev/charts/material/ohlc.html            |  1 +
 dev/charts/material/organization.html    |  1 +
 dev/charts/material/pie.html             |  1 +
 dev/charts/material/polar.html           |  1 +
 dev/charts/material/polygon.html         |  1 +
 dev/charts/material/pyramid.html         |  1 +
 dev/charts/material/scatter.html         |  1 +
 dev/charts/material/solidgauge.html      |  1 +
 dev/charts/material/spiderweb.html       |  1 +
 dev/charts/material/timeline.html        |  1 +
 dev/charts/material/treemap.html         |  1 +
 dev/charts/material/waterfall.html       |  1 +
 dev/checkbox-group.html                  |  1 +
 dev/checkbox.html                        |  1 +
 dev/combo-box.html                       |  1 +
 dev/confirm-dialog.html                  |  8 ++------
 dev/context-menu.html                    |  1 +
 dev/crud.html                            |  7 +------
 dev/custom-field.html                    |  1 +
 dev/date-picker.html                     |  1 +
 dev/date-time-picker.html                |  1 +
 dev/details.html                         |  1 +
 dev/email-field.html                     |  1 +
 dev/field-highlighter.html               |  1 +
 dev/form-layout.html                     |  1 +
 dev/grid-pro.html                        |  1 +
 dev/grid.html                            |  1 +
 dev/icon.html                            |  1 +
 dev/index.html                           |  1 +
 dev/integer-field.html                   |  1 +
 dev/lumo-globals.js                      |  5 +++++
 dev/map.html                             |  1 +
 dev/menu-bar.html                        |  1 +
 dev/number-field.html                    |  1 +
 dev/password-field.html                  |  1 +
 dev/radio-group.html                     |  1 +
 dev/scroller.html                        |  1 +
 dev/select.html                          |  1 +
 dev/split-layout.html                    |  1 +
 dev/tabs.html                            |  1 +
 dev/text-area.html                       |  1 +
 dev/text-field.html                      |  1 +
 dev/time-picker.html                     |  1 +
 dev/upload.html                          |  1 +
 94 files changed, 105 insertions(+), 28 deletions(-)
 create mode 100644 dev/lumo-globals.js

diff --git a/dev/accordion.html b/dev/accordion.html
index 4602a40799..c8461124b8 100644
--- a/dev/accordion.html
+++ b/dev/accordion.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Accordion</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/accordion';
diff --git a/dev/app-layout.html b/dev/app-layout.html
index 388430c766..7698b8b03f 100644
--- a/dev/app-layout.html
+++ b/dev/app-layout.html
@@ -5,23 +5,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>App Layout</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
-    <script type="module">
-      import { color } from '@vaadin/vaadin-lumo-styles';
-      import { typography } from '@vaadin/vaadin-lumo-styles';
-
-      const tpl = document.createElement('template');
-      tpl.innerHTML = `<style>
-        ${color.cssText}
-        ${typography.cssText}
-
-        h1 {
-          font-size: var(--lumo-font-size-l);
-          margin: 0;
-        }
-      </style>`;
-      document.head.appendChild(tpl.content);
-    </script>
+    <style>
+      h1 {
+        font-size: var(--lumo-font-size-l);
+        margin: 0;
+      }
+    </style>
 
     <script type="module">
       import '@vaadin/app-layout';
diff --git a/dev/avatar-group.html b/dev/avatar-group.html
index dba99a3f3d..73eba4c1ab 100644
--- a/dev/avatar-group.html
+++ b/dev/avatar-group.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Avatar group</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/avatar-group';
diff --git a/dev/button.html b/dev/button.html
index 88443cdde3..e3189748b6 100644
--- a/dev/button.html
+++ b/dev/button.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/button';
diff --git a/dev/charts/lumo/area.html b/dev/charts/lumo/area.html
index 155457e402..beab237809 100644
--- a/dev/charts/lumo/area.html
+++ b/dev/charts/lumo/area.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | area</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/arearange.html b/dev/charts/lumo/arearange.html
index 6c104bbbbb..88d498b40c 100644
--- a/dev/charts/lumo/arearange.html
+++ b/dev/charts/lumo/arearange.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | area range</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script defer>
diff --git a/dev/charts/lumo/areaspline.html b/dev/charts/lumo/areaspline.html
index 59d0745c9e..4feb84f8c1 100644
--- a/dev/charts/lumo/areaspline.html
+++ b/dev/charts/lumo/areaspline.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | area spline</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/areasplinerange.html b/dev/charts/lumo/areasplinerange.html
index efa337acec..46b7f65108 100644
--- a/dev/charts/lumo/areasplinerange.html
+++ b/dev/charts/lumo/areasplinerange.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | area spline range</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/bar.html b/dev/charts/lumo/bar.html
index e24c5de85b..27a723e177 100644
--- a/dev/charts/lumo/bar.html
+++ b/dev/charts/lumo/bar.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | bar</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/boxplot.html b/dev/charts/lumo/boxplot.html
index f7bfdf06ae..e0c93cc601 100644
--- a/dev/charts/lumo/boxplot.html
+++ b/dev/charts/lumo/boxplot.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | box plot</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/bubble.html b/dev/charts/lumo/bubble.html
index 9036b9411f..351e9ed228 100644
--- a/dev/charts/lumo/bubble.html
+++ b/dev/charts/lumo/bubble.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | bubble</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/bullet.html b/dev/charts/lumo/bullet.html
index 0490a1d375..6bcfea464a 100644
--- a/dev/charts/lumo/bullet.html
+++ b/dev/charts/lumo/bullet.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | bullet</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/candlestick.html b/dev/charts/lumo/candlestick.html
index c7322e0c7c..72628b3726 100644
--- a/dev/charts/lumo/candlestick.html
+++ b/dev/charts/lumo/candlestick.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | candle stick</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/column.html b/dev/charts/lumo/column.html
index aec2a65121..d6754dc72c 100644
--- a/dev/charts/lumo/column.html
+++ b/dev/charts/lumo/column.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | column</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/columnrange.html b/dev/charts/lumo/columnrange.html
index 44237ca1f1..ef76a8c2dc 100644
--- a/dev/charts/lumo/columnrange.html
+++ b/dev/charts/lumo/columnrange.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | column range</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/errorbar.html b/dev/charts/lumo/errorbar.html
index feec83e649..f906d77d4b 100644
--- a/dev/charts/lumo/errorbar.html
+++ b/dev/charts/lumo/errorbar.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | error bar</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/funnel.html b/dev/charts/lumo/funnel.html
index b2149e7665..08e30550b1 100644
--- a/dev/charts/lumo/funnel.html
+++ b/dev/charts/lumo/funnel.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | funnel</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/gauge.html b/dev/charts/lumo/gauge.html
index 497f74d976..42289992e4 100644
--- a/dev/charts/lumo/gauge.html
+++ b/dev/charts/lumo/gauge.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | gauge</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/gaugedual.html b/dev/charts/lumo/gaugedual.html
index 8b67fd46f5..293cf2cc1c 100644
--- a/dev/charts/lumo/gaugedual.html
+++ b/dev/charts/lumo/gaugedual.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | gauge with dual axes</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/heatmap.html b/dev/charts/lumo/heatmap.html
index 39e5ae463c..13f2f5053f 100644
--- a/dev/charts/lumo/heatmap.html
+++ b/dev/charts/lumo/heatmap.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | heatmap</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/line.html b/dev/charts/lumo/line.html
index 9e5bfef0a0..c0920c7322 100644
--- a/dev/charts/lumo/line.html
+++ b/dev/charts/lumo/line.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | line</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/ohlc.html b/dev/charts/lumo/ohlc.html
index b80b483a59..f995fc3638 100644
--- a/dev/charts/lumo/ohlc.html
+++ b/dev/charts/lumo/ohlc.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | ohlc</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/organization.html b/dev/charts/lumo/organization.html
index f7019ad6b6..0f52f3ed12 100644
--- a/dev/charts/lumo/organization.html
+++ b/dev/charts/lumo/organization.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | organization</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/pie.html b/dev/charts/lumo/pie.html
index aca0ad9f2d..3b7ed985f4 100644
--- a/dev/charts/lumo/pie.html
+++ b/dev/charts/lumo/pie.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | pie</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/polar.html b/dev/charts/lumo/polar.html
index d7b96ea82e..a2df70ce0c 100644
--- a/dev/charts/lumo/polar.html
+++ b/dev/charts/lumo/polar.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | polar</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/polygon.html b/dev/charts/lumo/polygon.html
index 96320c37a1..e462d883cf 100644
--- a/dev/charts/lumo/polygon.html
+++ b/dev/charts/lumo/polygon.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | polygon</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/pyramid.html b/dev/charts/lumo/pyramid.html
index 6d63e53518..74da04f3fd 100644
--- a/dev/charts/lumo/pyramid.html
+++ b/dev/charts/lumo/pyramid.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | pyramid</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/scatter.html b/dev/charts/lumo/scatter.html
index e853853789..d2e076150a 100644
--- a/dev/charts/lumo/scatter.html
+++ b/dev/charts/lumo/scatter.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | scatter</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/solidgauge.html b/dev/charts/lumo/solidgauge.html
index d72aa4952a..d09400b5ce 100644
--- a/dev/charts/lumo/solidgauge.html
+++ b/dev/charts/lumo/solidgauge.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | solid gauge</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/spiderweb.html b/dev/charts/lumo/spiderweb.html
index d68e1863b9..c405d32b67 100644
--- a/dev/charts/lumo/spiderweb.html
+++ b/dev/charts/lumo/spiderweb.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | spiderweb</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/timeline.html b/dev/charts/lumo/timeline.html
index 2208eac15e..5d06e1f834 100644
--- a/dev/charts/lumo/timeline.html
+++ b/dev/charts/lumo/timeline.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | timeline</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/treemap.html b/dev/charts/lumo/treemap.html
index 5f04dd7f43..7ea94cbca5 100644
--- a/dev/charts/lumo/treemap.html
+++ b/dev/charts/lumo/treemap.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | treemap</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/lumo/waterfall.html b/dev/charts/lumo/waterfall.html
index aa4e9f7c3c..28b3c956ea 100644
--- a/dev/charts/lumo/waterfall.html
+++ b/dev/charts/lumo/waterfall.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | treemap</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/area.html b/dev/charts/material/area.html
index 8bf6278d59..70165bc3d1 100644
--- a/dev/charts/material/area.html
+++ b/dev/charts/material/area.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | area</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/arearange.html b/dev/charts/material/arearange.html
index cf52aca414..b400a73c62 100644
--- a/dev/charts/material/arearange.html
+++ b/dev/charts/material/arearange.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | area range</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script defer>
diff --git a/dev/charts/material/areaspline.html b/dev/charts/material/areaspline.html
index 0b24b37c89..09c9ad1b6d 100644
--- a/dev/charts/material/areaspline.html
+++ b/dev/charts/material/areaspline.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | area spline</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/areasplinerange.html b/dev/charts/material/areasplinerange.html
index 059779a382..d0a99ef0f3 100644
--- a/dev/charts/material/areasplinerange.html
+++ b/dev/charts/material/areasplinerange.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | area spline range</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/bar.html b/dev/charts/material/bar.html
index 58658dcd39..6659c30035 100644
--- a/dev/charts/material/bar.html
+++ b/dev/charts/material/bar.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | bar</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/boxplot.html b/dev/charts/material/boxplot.html
index a5897d2fa5..cc0d6c9ae9 100644
--- a/dev/charts/material/boxplot.html
+++ b/dev/charts/material/boxplot.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | box plot</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/bubble.html b/dev/charts/material/bubble.html
index f8d5253f6b..61b5d87fa6 100644
--- a/dev/charts/material/bubble.html
+++ b/dev/charts/material/bubble.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | bubble</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/bullet.html b/dev/charts/material/bullet.html
index 4a40ca9ca8..0205646c2c 100644
--- a/dev/charts/material/bullet.html
+++ b/dev/charts/material/bullet.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | bullet</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/candlestick.html b/dev/charts/material/candlestick.html
index 80720fc440..02d3c31c0d 100644
--- a/dev/charts/material/candlestick.html
+++ b/dev/charts/material/candlestick.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | candle stick</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/column.html b/dev/charts/material/column.html
index 5a8875e17c..09ed14ad15 100644
--- a/dev/charts/material/column.html
+++ b/dev/charts/material/column.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | column</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/columnrange.html b/dev/charts/material/columnrange.html
index f225b4c6ae..87cb2c2bfe 100644
--- a/dev/charts/material/columnrange.html
+++ b/dev/charts/material/columnrange.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | column range</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/errorbar.html b/dev/charts/material/errorbar.html
index ee0b948fbd..5296e548ef 100644
--- a/dev/charts/material/errorbar.html
+++ b/dev/charts/material/errorbar.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | error bar</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/funnel.html b/dev/charts/material/funnel.html
index 6460cb0de4..1f58023234 100644
--- a/dev/charts/material/funnel.html
+++ b/dev/charts/material/funnel.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | funnel</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/gauge.html b/dev/charts/material/gauge.html
index a2ef9b5097..97a3aac72a 100644
--- a/dev/charts/material/gauge.html
+++ b/dev/charts/material/gauge.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | gauge</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/gaugedual.html b/dev/charts/material/gaugedual.html
index 22744710f5..01ca6a20ab 100644
--- a/dev/charts/material/gaugedual.html
+++ b/dev/charts/material/gaugedual.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | gauge with dual axes</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/heatmap.html b/dev/charts/material/heatmap.html
index c80751d2dc..8784d06a3f 100644
--- a/dev/charts/material/heatmap.html
+++ b/dev/charts/material/heatmap.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | heatmap</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/line.html b/dev/charts/material/line.html
index 735de62f34..f257f53ce6 100644
--- a/dev/charts/material/line.html
+++ b/dev/charts/material/line.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | line</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/ohlc.html b/dev/charts/material/ohlc.html
index 25a96b4f80..4e77f32608 100644
--- a/dev/charts/material/ohlc.html
+++ b/dev/charts/material/ohlc.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | ohlc</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/organization.html b/dev/charts/material/organization.html
index 8c5003c888..a14fdc2584 100644
--- a/dev/charts/material/organization.html
+++ b/dev/charts/material/organization.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | organization</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/pie.html b/dev/charts/material/pie.html
index f130217143..708940bd17 100644
--- a/dev/charts/material/pie.html
+++ b/dev/charts/material/pie.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | pie</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/polar.html b/dev/charts/material/polar.html
index 78c1a2b86e..63b1ed5b99 100644
--- a/dev/charts/material/polar.html
+++ b/dev/charts/material/polar.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | polar</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/polygon.html b/dev/charts/material/polygon.html
index e5ac4f91c8..840f0aa443 100644
--- a/dev/charts/material/polygon.html
+++ b/dev/charts/material/polygon.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | polygon</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/pyramid.html b/dev/charts/material/pyramid.html
index 4dac197b7c..3ce687f9f4 100644
--- a/dev/charts/material/pyramid.html
+++ b/dev/charts/material/pyramid.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | pyramid</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/scatter.html b/dev/charts/material/scatter.html
index 3c093a1e8c..3fa2bf7e3c 100644
--- a/dev/charts/material/scatter.html
+++ b/dev/charts/material/scatter.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | scatter</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/solidgauge.html b/dev/charts/material/solidgauge.html
index bf6873d457..36b507bd48 100644
--- a/dev/charts/material/solidgauge.html
+++ b/dev/charts/material/solidgauge.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | solid gauge</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/spiderweb.html b/dev/charts/material/spiderweb.html
index 93f320bd0e..5f87e83cb2 100644
--- a/dev/charts/material/spiderweb.html
+++ b/dev/charts/material/spiderweb.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | spiderweb</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/timeline.html b/dev/charts/material/timeline.html
index b7d301f2d2..795d25d336 100644
--- a/dev/charts/material/timeline.html
+++ b/dev/charts/material/timeline.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | timeline</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/treemap.html b/dev/charts/material/treemap.html
index cb4496c897..f7e5b287e1 100644
--- a/dev/charts/material/treemap.html
+++ b/dev/charts/material/treemap.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | treemap</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/charts/material/waterfall.html b/dev/charts/material/waterfall.html
index 775390eb93..785d48942d 100644
--- a/dev/charts/material/waterfall.html
+++ b/dev/charts/material/waterfall.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Vaadin charts | treemap</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="module">
diff --git a/dev/checkbox-group.html b/dev/checkbox-group.html
index 2c52c2f788..1f9dd7a7ce 100644
--- a/dev/checkbox-group.html
+++ b/dev/checkbox-group.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Checkbox Group</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/checkbox-group';
diff --git a/dev/checkbox.html b/dev/checkbox.html
index bbddefa521..13248fefbd 100644
--- a/dev/checkbox.html
+++ b/dev/checkbox.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/checkbox';
diff --git a/dev/combo-box.html b/dev/combo-box.html
index 459b2e5955..887f5634a3 100644
--- a/dev/combo-box.html
+++ b/dev/combo-box.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Combo box</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <script type="module">
       import '@vaadin/combo-box';
     </script>
diff --git a/dev/confirm-dialog.html b/dev/confirm-dialog.html
index 836add6e9e..e5455dea48 100644
--- a/dev/confirm-dialog.html
+++ b/dev/confirm-dialog.html
@@ -5,14 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Confirm dialog</title>
+    <script type="module" src="./lumo-globals.js"></script>
+
     <script type="module">
       import '@vaadin/confirm-dialog';
-      import { color, typography } from '@vaadin/vaadin-lumo-styles';
-
-      // Global color and typography styles affect the contents of the dialog
-      const style = document.createElement('style');
-      style.innerHTML = `${color.toString()} ${typography.toString()}`;
-      document.head.appendChild(style);
     </script>
   </head>
   <body>
diff --git a/dev/context-menu.html b/dev/context-menu.html
index eedfe4941d..f1b2b3df95 100644
--- a/dev/context-menu.html
+++ b/dev/context-menu.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Context Menu</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/context-menu';
diff --git a/dev/crud.html b/dev/crud.html
index d7f0cc41bf..78e761478f 100644
--- a/dev/crud.html
+++ b/dev/crud.html
@@ -5,18 +5,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CRUD</title>
+    <script type="module" src="./lumo-globals.js"></script>
   </head>
 
   <body>
     <script type="module">
       import '@vaadin/crud';
       import '@vaadin/radio-group';
-      import { color, typography } from '@vaadin/vaadin-lumo-styles';
-
-      // Global color and typography styles affect the contents of the dialog
-      const style = document.createElement('style');
-      style.innerHTML = `${color.toString()} ${typography.toString()}`;
-      document.head.appendChild(style);
 
       const crud = document.querySelector('vaadin-crud');
       crud.items = [
diff --git a/dev/custom-field.html b/dev/custom-field.html
index 931f984249..ce1b2bdfc9 100644
--- a/dev/custom-field.html
+++ b/dev/custom-field.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Custom Field</title>
+    <script type="module" src="./lumo-globals.js"></script>
   </head>
 
   <body>
diff --git a/dev/date-picker.html b/dev/date-picker.html
index 2b0ff62055..6e3c5e08fd 100644
--- a/dev/date-picker.html
+++ b/dev/date-picker.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Date picker</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <script type="module">
       import '@vaadin/date-picker';
     </script>
diff --git a/dev/date-time-picker.html b/dev/date-time-picker.html
index 83adf5b4a5..f64642e70c 100644
--- a/dev/date-time-picker.html
+++ b/dev/date-time-picker.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Date Time picker</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <script type="module">
       import '@vaadin/date-time-picker';
     </script>
diff --git a/dev/details.html b/dev/details.html
index eed81359d2..d43e341d9f 100644
--- a/dev/details.html
+++ b/dev/details.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Details</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/details';
diff --git a/dev/email-field.html b/dev/email-field.html
index 107f3288c8..b92b1f3214 100644
--- a/dev/email-field.html
+++ b/dev/email-field.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Email field</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/email-field';
diff --git a/dev/field-highlighter.html b/dev/field-highlighter.html
index 0134a6dccb..0120d7cf9a 100644
--- a/dev/field-highlighter.html
+++ b/dev/field-highlighter.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Field highlighter</title>
+    <script type="module" src="./lumo-globals.js"></script>
   </head>
 
   <body>
diff --git a/dev/form-layout.html b/dev/form-layout.html
index 63d3c2adc9..4c0b4770cc 100644
--- a/dev/form-layout.html
+++ b/dev/form-layout.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Form Layout</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/form-layout';
diff --git a/dev/grid-pro.html b/dev/grid-pro.html
index 507ca0ef80..8265487b9c 100644
--- a/dev/grid-pro.html
+++ b/dev/grid-pro.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Grid Pro</title>
+    <script type="module" src="./lumo-globals.js"></script>
   </head>
   <body>
     <vaadin-grid-pro single-cell-edit>
diff --git a/dev/grid.html b/dev/grid.html
index 84e430471a..d9b6335695 100644
--- a/dev/grid.html
+++ b/dev/grid.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <script type="module" src="./lumo-globals.js"></script>
   </head>
   <body>
     <script type="module">
diff --git a/dev/icon.html b/dev/icon.html
index ea240786b8..3446861dee 100644
--- a/dev/icon.html
+++ b/dev/icon.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/icon';
diff --git a/dev/index.html b/dev/index.html
index db99499e44..11fc97f166 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -5,6 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dev pages</title>
+  <script type="module" src="./dev/lumo-globals.js"></script>
 </head>
 <body>
   <h1>Web Component development pages</h1>
diff --git a/dev/integer-field.html b/dev/integer-field.html
index 5e38d91b7d..3d61bf9383 100644
--- a/dev/integer-field.html
+++ b/dev/integer-field.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Integer field</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/integer-field';
diff --git a/dev/lumo-globals.js b/dev/lumo-globals.js
new file mode 100644
index 0000000000..5ab816da5e
--- /dev/null
+++ b/dev/lumo-globals.js
@@ -0,0 +1,5 @@
+import { color, typography } from '@vaadin/vaadin-lumo-styles';
+
+const style = document.createElement('style');
+style.innerHTML = `${color.toString()} ${typography.toString()}`;
+document.head.appendChild(style);
diff --git a/dev/map.html b/dev/map.html
index ddd9d98100..46e41d8899 100644
--- a/dev/map.html
+++ b/dev/map.html
@@ -5,6 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Map</title>
+  <script type="module" src="./lumo-globals.js"></script>
   <style>
       vaadin-map {
           width: 100%;
diff --git a/dev/menu-bar.html b/dev/menu-bar.html
index 2f6593ee1d..d5e1a4c379 100644
--- a/dev/menu-bar.html
+++ b/dev/menu-bar.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Menu bar</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/menu-bar';
diff --git a/dev/number-field.html b/dev/number-field.html
index 802a3b52fd..91b9bc75ef 100644
--- a/dev/number-field.html
+++ b/dev/number-field.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Number field</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/number-field';
diff --git a/dev/password-field.html b/dev/password-field.html
index 420b6a98fc..3365161675 100644
--- a/dev/password-field.html
+++ b/dev/password-field.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Password field</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/password-field';
diff --git a/dev/radio-group.html b/dev/radio-group.html
index ebd863e505..2f77d68cd7 100644
--- a/dev/radio-group.html
+++ b/dev/radio-group.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Radio Group</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/radio-group';
diff --git a/dev/scroller.html b/dev/scroller.html
index d3ea49edfe..40431728b9 100644
--- a/dev/scroller.html
+++ b/dev/scroller.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Scroller</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <script type="module">
       import '@vaadin/scroller';
 
diff --git a/dev/select.html b/dev/select.html
index 4f2249c806..c46f7ec8b2 100644
--- a/dev/select.html
+++ b/dev/select.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Select</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <script type="module">
       import '@vaadin/select';
     </script>
diff --git a/dev/split-layout.html b/dev/split-layout.html
index 665c9410c9..fb6537b4f9 100644
--- a/dev/split-layout.html
+++ b/dev/split-layout.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Split Layout</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/split-layout';
diff --git a/dev/tabs.html b/dev/tabs.html
index 87f4a1fe46..d5ed827006 100644
--- a/dev/tabs.html
+++ b/dev/tabs.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tabs</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/tabs';
diff --git a/dev/text-area.html b/dev/text-area.html
index c9b32249d8..d3974e6cd0 100644
--- a/dev/text-area.html
+++ b/dev/text-area.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Text Area</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/text-area';
diff --git a/dev/text-field.html b/dev/text-field.html
index ee9257b34d..b4e4a2fcc2 100644
--- a/dev/text-field.html
+++ b/dev/text-field.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Text field</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/text-field';
diff --git a/dev/time-picker.html b/dev/time-picker.html
index 7548094f10..eb37a26f50 100644
--- a/dev/time-picker.html
+++ b/dev/time-picker.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Time picker</title>
+    <script type="module" src="./lumo-globals.js"></script>
     <script type="module">
       import '@vaadin/time-picker';
     </script>
diff --git a/dev/upload.html b/dev/upload.html
index ce4efa4663..2a93c3ccdd 100644
--- a/dev/upload.html
+++ b/dev/upload.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Upload</title>
+    <script type="module" src="./lumo-globals.js"></script>
 
     <script type="module">
       import '@vaadin/upload';