@vaadin/vaadin-lumo-styles 24.1.0-alpha2 → 24.1.0-alpha3

package/badge-global.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { badge } from './badge.js';
+import { addLumoGlobalStyles } from './global.js';
+
+addLumoGlobalStyles('badge', badge);

package/color-global.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { color } from './color.js';
+import { addLumoGlobalStyles } from './global.js';
+
+addLumoGlobalStyles('color', color);

package/color.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const colorBase = css`
   :host {
@@ -80,9 +81,7 @@ const colorBase = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${colorBase.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('color-props', colorBase);
 
 const color = css`
   [theme~='dark'] {

package/global.js

@@ -0,0 +1,12 @@
+const prefix = 'lumo-';
+
+export const addLumoGlobalStyles = (id, ...styles) => {
+  const styleTag = document.createElement('style');
+  styleTag.id = `${prefix}${id}`;
+  styleTag.textContent = styles
+    .map((style) => style.toString())
+    .join('\n')
+    .replace(':host', 'html');
+
+  document.head.insertAdjacentElement('afterbegin', styleTag);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "24.1.0-alpha2",
+  "version": "24.1.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -41,8 +41,8 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/icon": "24.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.1.0-alpha2"
+    "@vaadin/icon": "24.1.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "24.1.0-alpha3"
   },
   "devDependencies": {
     "gulp": "^4.0.2",
@@ -51,5 +51,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^4.1.0"
   },
-  "gitHead": "9e3ee2557109030f2aba59e17a84e4e121d699c0"
+  "gitHead": "077b4a8e8fff063b9eba4581af81f9e152cb852d"
 }

package/sizing.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const sizing = css`
   :host {
@@ -23,8 +24,6 @@ const sizing = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${sizing.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('sizing-props', sizing);
 
 export { sizing };

package/spacing.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const spacing = css`
   :host {
@@ -31,8 +32,6 @@ const spacing = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${spacing.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('spacing-props', spacing);
 
 export { spacing };

package/style.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const style = css`
   :host {
@@ -36,8 +37,6 @@ const globals = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${style.toString().replace(':host', 'html')}$</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('style-props', style);
 
 export { globals, style };

package/typography-global.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { addLumoGlobalStyles } from './global.js';
+import { typography } from './typography.js';
+
+addLumoGlobalStyles('typography', typography);

package/typography.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const font = css`
   :host {
@@ -123,9 +124,6 @@ const typography = css`
 `;
 
 registerStyles('', typography, { moduleId: 'lumo-typography' });
-
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('typography-props', font);
 
 export { font, typography };

package/user-colors.js

@@ -5,6 +5,7 @@
  */
 import './version.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
 
 const userColors = css`
   :host {
@@ -28,8 +29,5 @@ const userColors = css`
   }
 `;
 
-const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${userColors.toString().replace(':host', 'html')}</style>`;
-document.head.appendChild($tpl.content);
-
+addLumoGlobalStyles('user-color-props', userColors);
 export { userColors };

package/utility-global.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { addLumoGlobalStyles } from './global.js';
+import { utility } from './utility.js';
+
+addLumoGlobalStyles('utility', utility);

package/version.js

@@ -12,7 +12,7 @@
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '24.1.0-alpha2';
+    return '24.1.0-alpha3';
   }
 }