@vaadin/vaadin-material-styles 24.1.0-alpha1 → 24.1.0-alpha10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/color-global.js +9 -0
  2. package/color.js +2 -3
  3. package/font-icons.js +28 -29
  4. package/global.js +5 -0
  5. package/package.json +3 -3
  6. package/shadow.js +2 -3
  7. package/typography-global.js +9 -0
  8. package/typography.js +2 -3
  9. package/user-colors.js +2 -3
  10. package/version.js +1 -1
package/color-global.js ADDED
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { colorLight } from './color.js';
7
+ import { addMaterialGlobalStyles } from './global.js';
8
+
9
+ addMaterialGlobalStyles('color', colorLight);
package/color.js CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import './version.js';
7
7
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
+ import { addMaterialGlobalStyles } from './global.js';
8
9
 
9
10
  const colorLight = css`
10
11
  :host {
@@ -179,8 +180,6 @@ const colorBase = css`
179
180
  }
180
181
  `;
181
182
 
182
- const $tpl = document.createElement('template');
183
- $tpl.innerHTML = `<style>${colorBase.toString().replace(':host', 'html')}</style>`;
184
- document.head.appendChild($tpl.content);
183
+ addMaterialGlobalStyles('color-base', colorBase);
185
184
 
186
185
  export { colorBase, colorDark, colorLight };
package/font-icons.js CHANGED
@@ -4,36 +4,35 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './version.js';
7
+ import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
+ import { addMaterialGlobalStyles } from './global.js';
7
9
 
8
- const template = document.createElement('template');
10
+ const fontIcons = css`
11
+ @font-face {
12
+ font-family: 'material-icons';
13
+ src: url(data:application/font-woff;charset=utf-8;base64,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)
14
+ format('woff');
15
+ font-weight: normal;
16
+ font-style: normal;
17
+ }
9
18
 
10
- template.innerHTML = `
11
- <style>
12
- @font-face {
13
- font-family: 'material-icons';
14
- src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
15
- font-weight: normal;
16
- font-style: normal;
17
- }
18
-
19
- html {
20
- --material-icons-arrow-downward: "\\ea01";
21
- --material-icons-arrow-upward: "\\ea02";
22
- --material-icons-calendar: "\\ea03";
23
- --material-icons-check: "\\ea04";
24
- --material-icons-chevron-left: "\\ea05";
25
- --material-icons-chevron-right: "\\ea06";
26
- --material-icons-clear: "\\ea07";
27
- --material-icons-clock: "\\ea08";
28
- --material-icons-dropdown: "\\ea09";
29
- --material-icons-error: "\\ea0a";
30
- --material-icons-eye: "\\ea0b";
31
- --material-icons-eye-disabled: "\\ea0c";
32
- --material-icons-play: "\\ea0d";
33
- --material-icons-reload: "\\ea0e";
34
- --material-icons-upload: "\\ea0f";
35
- }
36
- </style>
19
+ html {
20
+ --material-icons-arrow-downward: '\\ea01';
21
+ --material-icons-arrow-upward: '\\ea02';
22
+ --material-icons-calendar: '\\ea03';
23
+ --material-icons-check: '\\ea04';
24
+ --material-icons-chevron-left: '\\ea05';
25
+ --material-icons-chevron-right: '\\ea06';
26
+ --material-icons-clear: '\\ea07';
27
+ --material-icons-clock: '\\ea08';
28
+ --material-icons-dropdown: '\\ea09';
29
+ --material-icons-error: '\\ea0a';
30
+ --material-icons-eye: '\\ea0b';
31
+ --material-icons-eye-disabled: '\\ea0c';
32
+ --material-icons-play: '\\ea0d';
33
+ --material-icons-reload: '\\ea0e';
34
+ --material-icons-upload: '\\ea0f';
35
+ }
37
36
  `;
38
37
 
39
- document.head.appendChild(template.content);
38
+ addMaterialGlobalStyles('font-icons', fontIcons);
package/global.js ADDED
@@ -0,0 +1,5 @@
1
+ import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
2
+
3
+ export const addMaterialGlobalStyles = (id, ...styles) => {
4
+ addGlobalThemeStyles(`material-${id}`, styles);
5
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/vaadin-material-styles",
3
- "version": "24.1.0-alpha1",
3
+ "version": "24.1.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -39,7 +39,7 @@
39
39
  ],
40
40
  "dependencies": {
41
41
  "@polymer/polymer": "^3.0.0",
42
- "@vaadin/vaadin-themable-mixin": "24.1.0-alpha1"
42
+ "@vaadin/vaadin-themable-mixin": "24.1.0-alpha10"
43
43
  },
44
44
  "devDependencies": {
45
45
  "gulp": "^4.0.2",
@@ -48,5 +48,5 @@
48
48
  "gulp-sort": "^2.0.0",
49
49
  "gulp-svgmin": "^4.1.0"
50
50
  },
51
- "gitHead": "599a339181595923b9ad6373d6888d8a79540141"
51
+ "gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
52
52
  }
package/shadow.js CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import './version.js';
7
7
  import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
+ import { addMaterialGlobalStyles } from './global.js';
8
9
 
9
10
  const shadow = css`
10
11
  /* prettier-ignore */
@@ -21,8 +22,6 @@ const shadow = css`
21
22
  }
22
23
  `;
23
24
 
24
- const $tpl = document.createElement('template');
25
- $tpl.innerHTML = `<style>${shadow.toString().replace(':host', 'html')}</style>`;
26
- document.head.appendChild($tpl.content);
25
+ addMaterialGlobalStyles('shadow', shadow);
27
26
 
28
27
  export { shadow };
package/typography-global.js ADDED
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { addMaterialGlobalStyles } from './global.js';
7
+ import { typography } from './typography.js';
8
+
9
+ addMaterialGlobalStyles('typography', typography);
package/typography.js CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import './version.js';
7
7
  import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
+ import { addMaterialGlobalStyles } from './global.js';
8
9
 
9
10
  const font = css`
10
11
  :host {
@@ -105,9 +106,7 @@ const typography = css`
105
106
 
106
107
  registerStyles('', typography, { moduleId: 'material-typography' });
107
108
 
108
- const $tpl = document.createElement('template');
109
- $tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
110
- document.head.appendChild($tpl.content);
109
+ addMaterialGlobalStyles('font', font);
111
110
 
112
111
  export { font, typography };
113
112
 
package/user-colors.js CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import './version.js';
7
7
  import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
+ import { addMaterialGlobalStyles } from './global.js';
8
9
 
9
10
  const userColors = css`
10
11
  :host {
@@ -28,8 +29,6 @@ const userColors = css`
28
29
  }
29
30
  `;
30
31
 
31
- const $tpl = document.createElement('template');
32
- $tpl.innerHTML = `<style>${userColors.toString().replace(':host', 'html')}</style>`;
33
- document.head.appendChild($tpl.content);
32
+ addMaterialGlobalStyles('user-colors', userColors);
34
33
 
35
34
  export { userColors };
package/version.js CHANGED
@@ -12,7 +12,7 @@
12
12
  */
13
13
  class Material extends HTMLElement {
14
14
  static get version() {
15
- return '24.1.0-alpha1';
15
+ return '24.1.0-alpha10';
16
16
  }
17
17
  }
18
18