chore: add standard lumo style sheets on dev pages (#3380)

vaadin · Feb 3, 2022 · b0533b4 · b0533b4
1 parent a407e3e
commit b0533b4
Show file tree

Hide file tree

Showing 94 changed files with 105 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">