@vaadin/vaadin-material-styles - npm Package Compare versions

Comparing version 1.3.2 to 1.4.0-alpha1

all-imports.js

 import './mixins/field-button.js';
+export * from './mixins/field-button.js';
 import './mixins/menu-overlay.js';
+export * from './mixins/menu-overlay.js';
 import './mixins/overlay.js';
+export * from './mixins/overlay.js';
 import './mixins/required-field.js';
+export * from './mixins/required-field.js';
 import './color.js';
+export * from './color.js';
 import './font-icons.js';
+export * from './font-icons.js';
 import './shadow.js';
+export * from './shadow.js';
 import './typography.js';
+export * from './typography.js';
 
@@ -15,7 +23,1 @@ /**
 */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;

color.js

 import './version.js';
 import '@polymer/polymer/lib/elements/custom-style.js';
-import '@polymer/polymer/lib/elements/dom-module.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const colorLight = css`
+  :host,
+  #host-fix {
+    /* Text colors */
+    --material-body-text-color: var(--light-theme-text-color, rgba(0, 0, 0, 0.87));
+    --material-secondary-text-color: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
+    --material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
 
-$_documentContainer.innerHTML = `<dom-module id="material-color-light">
-  <template>
-    <style>
-      :host,
-      #host-fix {
-        /* Text colors */
-        --material-body-text-color: var(--light-theme-text-color, rgba(0, 0, 0, 0.87));
-        --material-secondary-text-color: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
-        --material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
+    /* Primary colors */
+    --material-primary-color: var(--primary-color, #6200ee);
+    --material-primary-contrast-color: var(--dark-theme-base-color, #fff);
+    --material-primary-text-color: var(--material-primary-color);
 
-        /* Primary colors */
-        --material-primary-color: var(--primary-color, #6200ee);
-        --material-primary-contrast-color: var(--dark-theme-base-color, #fff);
-        --material-primary-text-color: var(--material-primary-color);
+    /* Error colors */
+    --material-error-color: var(--error-color, #b00020);
+    --material-error-text-color: var(--material-error-color);
 
-        /* Error colors */
-        --material-error-color: var(--error-color, #b00020);
-        --material-error-text-color: var(--material-error-color);
+    /* Background colors */
+    --material-background-color: var(--light-theme-background-color, #fff);
+    --material-secondary-background-color: var(--light-theme-secondary-background-color, #f5f5f5);
+    --material-disabled-color: rgba(0, 0, 0, 0.26);
 
-        /* Background colors */
-        --material-background-color: var(--light-theme-background-color, #fff);
-        --material-secondary-background-color: var(--light-theme-secondary-background-color, #f5f5f5);
-        --material-disabled-color: rgba(0, 0, 0, 0.26);
+    /* Divider colors */
+    --material-divider-color: rgba(0, 0, 0, 0.12);
 
-        /* Divider colors */
-        --material-divider-color: rgba(0, 0, 0, 0.12);
+    /* Undocumented internal properties (prefixed with three dashes) */
 
-        /* Undocumented internal properties (prefixed with three dashes) */
+    /* Text field tweaks */
+    --_material-text-field-input-line-background-color: initial;
+    --_material-text-field-input-line-opacity: initial;
+    --_material-text-field-input-line-hover-opacity: initial;
+    --_material-text-field-focused-label-opacity: initial;
 
-        /* Text field tweaks */
-        --_material-text-field-input-line-background-color: initial;
-        --_material-text-field-input-line-opacity: initial;
-        --_material-text-field-input-line-hover-opacity: initial;
-        --_material-text-field-focused-label-opacity: initial;
+    /* Button tweaks */
+    --_material-button-raised-background-color: initial;
+    --_material-button-outline-color: initial;
 
-        /* Button tweaks */
-        --_material-button-raised-background-color: initial;
-        --_material-button-outline-color: initial;
+    /* Grid tweaks */
+    --_material-grid-row-hover-background-color: initial;
 
-        /* Grid tweaks */
-        --_material-grid-row-hover-background-color: initial;
+    /* Split layout tweaks */
+    --_material-split-layout-splitter-background-color: initial;
 
-        /* Split layout tweaks */
-        --_material-split-layout-splitter-background-color: initial;
+    background-color: var(--material-background-color);
+    color: var(--material-body-text-color);
+  }
 
-        background-color: var(--material-background-color);
-        color: var(--material-body-text-color);
-      }
+  [theme~="dark"] {
+    /* Text colors */
+    --material-body-text-color: var(--dark-theme-text-color, rgba(255, 255, 255, 1));
+    --material-secondary-text-color: var(--dark-theme-secondary-color, rgba(255, 255, 255, 0.7));
+    --material-disabled-text-color: var(--dark-theme-disabled-color, rgba(255, 255, 255, 0.5));
 
-      [theme~="dark"] {
-        /* Text colors */
-        --material-body-text-color: var(--dark-theme-text-color, rgba(255, 255, 255, 1));
-        --material-secondary-text-color: var(--dark-theme-secondary-color, rgba(255, 255, 255, 0.7));
-        --material-disabled-text-color: var(--dark-theme-disabled-color, rgba(255, 255, 255, 0.5));
+    /* Primary colors */
+    --material-primary-color: var(--light-primary-color, #7e3ff2);
+    --material-primary-text-color: #b794f6;
 
-        /* Primary colors */
-        --material-primary-color: var(--light-primary-color, #7e3ff2);
-        --material-primary-text-color: #b794f6;
+    /* Error colors */
+    --material-error-color: var(--error-color, #de2839);
+    --material-error-text-color: var(--material-error-color);
 
-        /* Error colors */
-        --material-error-color: var(--error-color, #de2839);
-        --material-error-text-color: var(--material-error-color);
+    /* Background colors */
+    --material-background-color: var(--dark-theme-background-color, #303030);
+    --material-secondary-background-color: var(--dark-theme-secondary-background-color, #3b3b3b);
+    --material-disabled-color: rgba(255, 255, 255, 0.3);
 
-        /* Background colors */
-        --material-background-color: var(--dark-theme-background-color, #303030);
-        --material-secondary-background-color: var(--dark-theme-secondary-background-color, #3b3b3b);
-        --material-disabled-color: rgba(255, 255, 255, 0.3);
+    /* Divider colors */
+    --material-divider-color: rgba(255, 255, 255, 0.12);
 
-        /* Divider colors */
-        --material-divider-color: rgba(255, 255, 255, 0.12);
+    /* Undocumented internal properties (prefixed with three dashes) */
 
-        /* Undocumented internal properties (prefixed with three dashes) */
+    /* Text field tweaks */
+    --_material-text-field-input-line-background-color: #fff;
+    --_material-text-field-input-line-opacity: 0.7;
+    --_material-text-field-input-line-hover-opacity: 1;
+    --_material-text-field-focused-label-opacity: 1;
 
-        /* Text field tweaks */
-        --_material-text-field-input-line-background-color: #fff;
-        --_material-text-field-input-line-opacity: 0.7;
-        --_material-text-field-input-line-hover-opacity: 1;
-        --_material-text-field-focused-label-opacity: 1;
+    /* Button tweaks */
+    --_material-button-raised-background-color: rgba(255, 255, 255, 0.08);
+    --_material-button-outline-color: rgba(255, 255, 255, 0.2);
 
-        /* Button tweaks */
-        --_material-button-raised-background-color: rgba(255, 255, 255, 0.08);
-        --_material-button-outline-color: rgba(255, 255, 255, 0.2);
+    /* Grid tweaks */
+    --_material-grid-row-hover-background-color: rgba(255, 255, 255, 0.08);
+    --_material-grid-row-selected-overlay-opacity: 0.16;
 
-        /* Grid tweaks */
-        --_material-grid-row-hover-background-color: rgba(255, 255, 255, 0.08);
-        --_material-grid-row-selected-overlay-opacity: 0.16;
+    /* Split layout tweaks */
+    --_material-split-layout-splitter-background-color: rgba(255, 255, 255, 0.8);
 
-        /* Split layout tweaks */
-        --_material-split-layout-splitter-background-color: rgba(255, 255, 255, 0.8);
+    background-color: var(--material-background-color);
+    color: var(--material-body-text-color);
+  }
 
-        background-color: var(--material-background-color);
-        color: var(--material-body-text-color);
-      }
+  a {
+    color: inherit;
+  }
+`;
+registerStyles('', colorLight, {moduleId: 'material-color-light'});
 
-      a {
-        color: inherit;
-      }
-    </style>
-  </template>
-</dom-module><dom-module id="material-color-dark">
-  <template>
-    <style>
-      :host,
-      #host-fix {
-        /* Text colors */
-        --material-body-text-color: var(--dark-theme-text-color, rgba(255, 255, 255, 1));
-        --material-secondary-text-color: var(--dark-theme-secondary-color, rgba(255, 255, 255, 0.7));
-        --material-disabled-text-color: var(--dark-theme-disabled-color, rgba(255, 255, 255, 0.5));
+export { colorLight };
 
-        /* Primary colors */
-        --material-primary-color: var(--light-primary-color, #7e3ff2);
-        --material-primary-text-color: #b794f6;
+const colorDark = css`
+  :host,
+  #host-fix {
+    /* Text colors */
+    --material-body-text-color: var(--dark-theme-text-color, rgba(255, 255, 255, 1));
+    --material-secondary-text-color: var(--dark-theme-secondary-color, rgba(255, 255, 255, 0.7));
+    --material-disabled-text-color: var(--dark-theme-disabled-color, rgba(255, 255, 255, 0.5));
 
-        /* Error colors */
-        --material-error-color: var(--error-color, #de2839);
-        --material-error-text-color: var(--material-error-color);
+    /* Primary colors */
+    --material-primary-color: var(--light-primary-color, #7e3ff2);
+    --material-primary-text-color: #b794f6;
 
-        /* Background colors */
-        --material-background-color: var(--dark-theme-background-color, #303030);
-        --material-secondary-background-color: var(--dark-theme-secondary-background-color, #3b3b3b);
-        --material-disabled-color: rgba(255, 255, 255, 0.3);
+    /* Error colors */
+    --material-error-color: var(--error-color, #de2839);
+    --material-error-text-color: var(--material-error-color);
 
-        /* Divider colors */
-        --material-divider-color: rgba(255, 255, 255, 0.12);
+    /* Background colors */
+    --material-background-color: var(--dark-theme-background-color, #303030);
+    --material-secondary-background-color: var(--dark-theme-secondary-background-color, #3b3b3b);
+    --material-disabled-color: rgba(255, 255, 255, 0.3);
 
-        /* Undocumented internal properties (prefixed with three dashes) */
+    /* Divider colors */
+    --material-divider-color: rgba(255, 255, 255, 0.12);
 
-        /* Text field tweaks */
-        --_material-text-field-input-line-background-color: #fff;
-        --_material-text-field-input-line-opacity: 0.7;
-        --_material-text-field-input-line-hover-opacity: 1;
-        --_material-text-field-focused-label-opacity: 1;
+    /* Undocumented internal properties (prefixed with three dashes) */
 
-        /* Button tweaks */
-        --_material-button-raised-background-color: rgba(255, 255, 255, 0.08);
-        --_material-button-outline-color: rgba(255, 255, 255, 0.2);
+    /* Text field tweaks */
+    --_material-text-field-input-line-background-color: #fff;
+    --_material-text-field-input-line-opacity: 0.7;
+    --_material-text-field-input-line-hover-opacity: 1;
+    --_material-text-field-focused-label-opacity: 1;
 
-        /* Grid tweaks */
-        --_material-grid-row-hover-background-color: rgba(255, 255, 255, 0.08);
-        --_material-grid-row-selected-overlay-opacity: 0.16;
+    /* Button tweaks */
+    --_material-button-raised-background-color: rgba(255, 255, 255, 0.08);
+    --_material-button-outline-color: rgba(255, 255, 255, 0.2);
 
-        /* Split layout tweaks */
-        --_material-split-layout-splitter-background-color: rgba(255, 255, 255, 0.8);
+    /* Grid tweaks */
+    --_material-grid-row-hover-background-color: rgba(255, 255, 255, 0.08);
+    --_material-grid-row-selected-overlay-opacity: 0.16;
 
-        background-color: var(--material-background-color);
-        color: var(--material-body-text-color);
-      }
-    </style>
-  </template>
-</dom-module><custom-style>
-  <style>
-    :root {
-      /* Text colors */
-      --material-body-text-color: var(--light-theme-text-color, rgba(0, 0, 0, 0.87));
-      --material-secondary-text-color: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
-      --material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
+    /* Split layout tweaks */
+    --_material-split-layout-splitter-background-color: rgba(255, 255, 255, 0.8);
 
-      /* Primary colors */
-      --material-primary-color: var(--primary-color, #6200ee);
-      --material-primary-contrast-color: var(--dark-theme-base-color, #fff);
-      --material-primary-text-color: var(--material-primary-color);
+    background-color: var(--material-background-color);
+    color: var(--material-body-text-color);
+  }
+`;
+registerStyles('', colorDark, {moduleId: 'material-color-dark'});
 
-      /* Error colors */
-      --material-error-color: var(--error-color, #b00020);
-      --material-error-text-color: var(--material-error-color);
+export { colorDark };
 
-      /* Background colors */
-      --material-background-color: var(--light-theme-background-color, #fff);
-      --material-secondary-background-color: var(--light-theme-secondary-background-color, #f5f5f5);
-      --material-disabled-color: rgba(0, 0, 0, 0.26);
+const colorBase = css`
+:host {
+  /* Text colors */
+  --material-body-text-color: var(--light-theme-text-color, rgba(0, 0, 0, 0.87));
+  --material-secondary-text-color: var(--light-theme-secondary-color, rgba(0, 0, 0, 0.54));
+  --material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
 
-      /* Divider colors */
-      --material-divider-color: rgba(0, 0, 0, 0.12);
-    }
-  </style>
-</custom-style>`;
+  /* Primary colors */
+  --material-primary-color: var(--primary-color, #6200ee);
+  --material-primary-contrast-color: var(--dark-theme-base-color, #fff);
+  --material-primary-text-color: var(--material-primary-color);
 
-document.head.appendChild($_documentContainer.content);
+  /* Error colors */
+  --material-error-color: var(--error-color, #b00020);
+  --material-error-text-color: var(--material-error-color);
+
+  /* Background colors */
+  --material-background-color: var(--light-theme-background-color, #fff);
+  --material-secondary-background-color: var(--light-theme-secondary-background-color, #f5f5f5);
+  --material-disabled-color: rgba(0, 0, 0, 0.26);
+
+  /* Divider colors */
+  --material-divider-color: rgba(0, 0, 0, 0.12);
+}
+`;
+const $tpl = document.createElement('template');
+$tpl.innerHTML = `<custom-style><style>${colorBase.toString().replace(':host', 'html')}</style></custom-style>`;
+document.head.appendChild($tpl.content);
+
+export { colorBase };

font-icons.js

@@ -9,3 +9,3 @@ import '@polymer/polymer/lib/elements/custom-style.js';
       font-family: 'material-icons';
-      src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
+      src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
       font-weight: normal;
@@ -26,4 +26,4 @@ font-style: normal;
       --material-icons-error: "\\ea0a";
-      --material-icons-eye-disabled: "\\ea0b";
-      --material-icons-eye: "\\ea0c";
+      --material-icons-eye: "\\ea0b";
+      --material-icons-eye-disabled: "\\ea0c";
       --material-icons-play: "\\ea0d";
@@ -30,0 +30,0 @@ --material-icons-reload: "\\ea0e";

mixins/field-button.js

 import '../font-icons.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const fieldButton = css`
+  [part$="button"] {
+    flex: none;
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    color: var(--material-secondary-text-color);
+    font-size: var(--material-icon-font-size);
+    line-height: 24px;
+    text-align: center;
+  }
 
-$_documentContainer.innerHTML = `<dom-module id="material-field-button">
-  <template>
-    <style>
-      /* TODO(platosha): align icon sizes with other elements */
-      [part\$="button"] {
-        flex: none;
-        width: 24px;
-        height: 24px;
-        padding: 4px;
-        color: var(--material-secondary-text-color);
-        font-size: var(--material-icon-font-size);
-        line-height: 24px;
-        text-align: center;
-      }
+  :host(:not([readonly])) [part$="button"] {
+    cursor: pointer;
+  }
 
-      :host(:not([readonly])) [part\$="button"] {
-        cursor: pointer;
-      }
+  :host(:not([readonly])) [part$="button"]:hover {
+    color: var(--material-text-color);
+  }
 
-      :host(:not([readonly])) [part\$="button"]:hover {
-        color: var(--material-text-color);
-      }
+  :host([disabled]) [part$="button"],
+  :host([readonly]) [part$="button"] {
+    color: var(--material-disabled-text-color);
+  }
 
-      :host([disabled]) [part\$="button"],
-      :host([readonly]) [part\$="button"] {
-        color: var(--material-disabled-text-color);
-      }
+  :host([disabled]) [part="clear-button"] {
+    display: none;
+  }
 
-      :host([disabled]) [part="clear-button"] {
-        display: none;
-      }
+  [part$="button"]::before {
+    font-family: "material-icons";
+  }
+`;
+registerStyles('', fieldButton, {moduleId: 'material-field-button'});
 
-      [part\$="button"]::before {
-        font-family: "material-icons";
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+export { fieldButton };

mixins/menu-overlay.js

 import '../color.js';
 import './overlay.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const menuOverlay = css`
+`;
+registerStyles('', menuOverlay, {moduleId: 'material-menu-overlay', include: ['material-overlay']});
 
-$_documentContainer.innerHTML = `<dom-module id="material-menu-overlay">
-  <template>
-    <style include="material-overlay">
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+export { menuOverlay };

mixins/overlay.js

 import '../color.js';
 import '../typography.js';
 import '../shadow.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const overlay = css`
+  :host {
+    top: 16px;
+    right: 16px;
+    /* TODO (@jouni): remove unnecessary multiplication after https://github.com/vaadin/vaadin-overlay/issues/90 is fixed */
+    bottom: calc(1px * var(--vaadin-overlay-viewport-bottom) + 16px);
+    left: 16px;
+  }
 
-$_documentContainer.innerHTML = `<dom-module id="material-overlay">
-  <template>
-    <style>
-      :host {
-        top: 16px;
-        right: 16px;
-        /* TODO (@jouni): remove unnecessary multiplication after https://github.com/vaadin/vaadin-overlay/issues/90 is fixed */
-        bottom: calc(1px * var(--vaadin-overlay-viewport-bottom) + 16px);
-        left: 16px;
-      }
+  [part="overlay"] {
+    background-color: var(--material-background-color);
+    border-radius: 4px;
+    box-shadow: var(--material-shadow-elevation-4dp);
+    color: var(--material-body-text-color);
+    font-family: var(--material-font-family);
+    font-size: var(--material-body-font-size);
+    font-weight: 400;
+  }
 
-      [part="overlay"] {
-        background-color: var(--material-background-color);
-        border-radius: 4px;
-        box-shadow: var(--material-shadow-elevation-4dp);
-        color: var(--material-body-text-color);
-        font-family: var(--material-font-family);
-        font-size: var(--material-body-font-size);
-        font-weight: 400;
-      }
+  [part="content"] {
+    padding: 8px 0;
+  }
 
-      [part="content"] {
-        padding: 8px 0;
-      }
+  [part="backdrop"] {
+    opacity: 0.2;
+    animation: 0.2s vaadin-overlay-backdrop-enter;
+    will-change: opacity;
+  }
 
-      [part="backdrop"] {
-        opacity: 0.2;
-        animation: 0.2s vaadin-overlay-backdrop-enter;
-        will-change: opacity;
-      }
+  @keyframes vaadin-overlay-backdrop-enter {
+    0% {
+      opacity: 0;
+    }
+  }
+`;
+registerStyles('', overlay, {moduleId: 'material-overlay'});
 
-      @keyframes vaadin-overlay-backdrop-enter {
-        0% {
-          opacity: 0;
-        }
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+export { overlay };

mixins/required-field.js

 import '../color.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const requiredField = css`
+  [part="label"] {
+    display: block;
+    position: absolute;
+    top: 8px;
+    font-size: 1em;
+    line-height: 1;
+    height: 20px;
+    margin-bottom: -4px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    color: var(--material-secondary-text-color);
+    transform-origin: 0 75%;
+    transform: scale(0.75);
+  }
 
-$_documentContainer.innerHTML = `<dom-module id="material-required-field">
-  <template>
-    <style>
-      [part="label"] {
-        display: block;
-        position: absolute;
-        top: 8px;
-        font-size: 1em;
-        line-height: 1;
-        height: 20px;
-        margin-bottom: -4px;
-        white-space: nowrap;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        color: var(--material-secondary-text-color);
-        transform-origin: 0 75%;
-        transform: scale(0.75);
-      }
+  :host([required]) [part="label"]::after {
+    content: " *";
+    color: inherit;
+  }
 
-      :host([required]) [part="label"]::after {
-        content: " *";
-        color: inherit;
-      }
+  :host([invalid]) [part="label"] {
+    color: var(--material-error-text-color);
+  }
 
-      :host([invalid]) [part="label"] {
-        color: var(--material-error-text-color);
-      }
+  [part="error-message"] {
+    font-size: .75em;
+    line-height: 1;
+    color: var(--material-error-text-color);
+  }
 
-      [part="error-message"] {
-        font-size: .75em;
-        line-height: 1;
-        color: var(--material-error-text-color);
-      }
+  /* Margin that doesn’t reserve space when there’s no error message */
+  [part="error-message"]:not(:empty)::before {
+    content: "";
+    display: block;
+    height: 6px;
+  }
 
-      /* Margin that doesn’t reserve space when there’s no error message */
-      [part="error-message"]:not(:empty)::before {
-        content: "";
-        display: block;
-        height: 6px;
-      }
+  :host(:not([invalid])) [part="error-message"] {
+    margin-top: 0;
+    max-height: 0;
+    overflow: hidden;
+  }
 
-      :host(:not([invalid])) [part="error-message"] {
-        margin-top: 0;
-        max-height: 0;
-        overflow: hidden;
-      }
+  :host([invalid]) [part="error-message"] {
+    animation: reveal 0.2s;
+  }
 
-      :host([invalid]) [part="error-message"] {
-        animation: reveal 0.2s;
-      }
+  @keyframes reveal {
+    0% {
+      opacity: 0;
+    }
+  }
 
-      @keyframes reveal {
-        0% {
-          opacity: 0;
-        }
-      }
+  /* RTL specific styles */
+  :host([dir="rtl"]) [part="label"] {
+    transform-origin: 100% 75%;
+  }
+`;
+registerStyles('', requiredField, {moduleId: 'material-required-field'});
 
-      /* RTL specific styles */
-
-      :host([dir="rtl"]) [part="label"] {
-        transform-origin: 100% 75%;
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+export { requiredField };

package.json

@@ -15,3 +15,3 @@ {
   "name": "@vaadin/vaadin-material-styles",
-  "version": "1.3.2",
+  "version": "1.4.0-alpha1",
   "main": "all-imports.js",
@@ -25,6 +25,10 @@ "author": "Vaadin Ltd",
     "*.js",
+    "*.d.ts",
     "mixins/*.js",
+    "mixins/*.d.ts",
     "!wdio.conf.js"
   ],
   "resolutions": {
+    "es-abstract": "1.17.6",
+    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
@@ -36,5 +40,9 @@ "samsam": "1.1.3",
   "dependencies": {
-    "@polymer/polymer": "^3.0.0"
+    "@polymer/polymer": "^3.0.0",
+    "@vaadin/vaadin-themable-mixin": "^1.6.1"
   },
-  "devDependencies": {
+  "scripts": {
+  "generate-typings": "gen-typescript-declarations --outDir . --verify"
+},
+"devDependencies": {
     "wct-browser-legacy": "^1.0.1",
@@ -41,0 +49,0 @@ "@vaadin/vaadin-button": "^2.1.0",

shadow.js

 import './version.js';
 import '@polymer/polymer/lib/elements/custom-style.js';
-const $_documentContainer = document.createElement('template');
+import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const shadow = css`
+:host {
+  /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
+  --material-shadow-elevation-2dp: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  --material-shadow-elevation-3dp: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
+  --material-shadow-elevation-4dp: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+  --material-shadow-elevation-6dp: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
+  --material-shadow-elevation-8dp: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
+  --material-shadow-elevation-12dp: 0 12px 16px 1px rgba(0, 0, 0, 0.14), 0 4px 22px 3px rgba(0, 0, 0, 0.12), 0 6px 7px -4px rgba(0, 0, 0, 0.4);
+  --material-shadow-elevation-16dp: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
+  --material-shadow-elevation-24dp: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4);
+}
+`;
+const $tpl = document.createElement('template');
+$tpl.innerHTML = `<custom-style><style>${shadow.toString().replace(':host', 'html')}</style></custom-style>`;
+document.head.appendChild($tpl.content);
 
-$_documentContainer.innerHTML = `<custom-style>
-  <style is="custom-style">
-    html {
-      /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
-      --material-shadow-elevation-2dp: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-      --material-shadow-elevation-3dp: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
-      --material-shadow-elevation-4dp: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
-      --material-shadow-elevation-6dp: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
-      --material-shadow-elevation-8dp: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
-      --material-shadow-elevation-12dp: 0 12px 16px 1px rgba(0, 0, 0, 0.14), 0 4px 22px 3px rgba(0, 0, 0, 0.12), 0 6px 7px -4px rgba(0, 0, 0, 0.4);
-      --material-shadow-elevation-16dp: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
-      --material-shadow-elevation-24dp: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4);
-    }
-  </style>
-</custom-style>`;
-
-document.head.appendChild($_documentContainer.content);
+export { shadow };

typography.js

@@ -1,115 +0,123 @@
-/* Import Roboto from Google Fonts */
-/* MAGI REMOVE START */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
 import './version.js';
-
 import '@polymer/polymer/lib/elements/custom-style.js';
-import '@polymer/polymer/lib/elements/dom-module.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const font = css`
+:host {
+  /* Font family */
+  --material-font-family: 'Roboto', sans-serif;
 
-$_documentContainer.innerHTML = `<custom-style>
-  <style>
-    html {
-      /* Font family */
-      --material-font-family: 'Roboto', sans-serif;
+  /* Font sizes */
+  --material-h1-font-size: 6rem;
+  --material-h2-font-size: 3.75rem;
+  --material-h3-font-size: 3rem;
+  --material-h4-font-size: 2.125rem;
+  --material-h5-font-size: 1.5rem;
+  --material-h6-font-size: 1.25rem;
+  --material-body-font-size: 1rem;
+  --material-small-font-size: 0.875rem;
+  --material-button-font-size: 0.875rem;
+  --material-caption-font-size: 0.75rem;
 
-      /* Font sizes */
-      --material-h1-font-size: 6rem;
-      --material-h2-font-size: 3.75rem;
-      --material-h3-font-size: 3rem;
-      --material-h4-font-size: 2.125rem;
-      --material-h5-font-size: 1.5rem;
-      --material-h6-font-size: 1.25rem;
-      --material-body-font-size: 1rem;
-      --material-small-font-size: 0.875rem;
-      --material-button-font-size: 0.875rem;
-      --material-caption-font-size: 0.75rem;
+  /* Icon size */
+  --material-icon-font-size: 20px;
+}
+`;
+const $tpl = document.createElement('template');
+$tpl.innerHTML = `<custom-style><style>${font.toString().replace(':host', 'html')}</style></custom-style>`;
+document.head.appendChild($tpl.content);
 
-      /* Icon size */
-      --material-icon-font-size: 20px;
-    }
-  </style>
-</custom-style><dom-module id="material-typography">
-  <template>
-    <style>
-      body {
-        font-family: var(--material-font-family);
-        font-size: var(--material-body-font-size);
-        line-height: 1.4;
-        -webkit-text-size-adjust: 100%;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
+export { font };
 
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: inherit;
-        line-height: 1.1;
-        margin-top: 1.5em;
-      }
+const typography = css`
+  body {
+    font-family: var(--material-font-family);
+    font-size: var(--material-body-font-size);
+    line-height: 1.4;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-      h1 {
-        font-size: var(--material-h3-font-size);
-        font-weight: 300;
-        letter-spacing: -0.015em;
-        margin-bottom: 1em;
-        text-indent: -0.07em;
-      }
+  /* Can’t combine with the above selector because that doesn’t work in browsers without native shadow dom */
+  :host {
+    font-family: var(--material-font-family);
+    font-size: var(--material-body-font-size);
+    line-height: 1.4;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-      h2 {
-        font-size: var(--material-h4-font-size);
-        font-weight: 300;
-        letter-spacing: -0.01em;
-        margin-bottom: 0.75em;
-        text-indent: -0.07em;
-      }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: inherit;
+    line-height: 1.1;
+    margin-top: 1.5em;
+  }
 
-      h3 {
-        font-size: var(--material-h5-font-size);
-        font-weight: 400;
-        margin-bottom: 0.75em;
-        text-indent: -0.05em;
-      }
+  h1 {
+    font-size: var(--material-h3-font-size);
+    font-weight: 300;
+    letter-spacing: -0.015em;
+    margin-bottom: 1em;
+    text-indent: -0.07em;
+  }
 
-      h4 {
-        font-size: var(--material-h6-font-size);
-        font-weight: 400;
-        letter-spacing: 0.01em;
-        margin-bottom: 0.75em;
-        text-indent: -0.05em;
-      }
+  h2 {
+    font-size: var(--material-h4-font-size);
+    font-weight: 300;
+    letter-spacing: -0.01em;
+    margin-bottom: 0.75em;
+    text-indent: -0.07em;
+  }
 
-      h5 {
-        font-size: var(--material-body-font-size);
-        font-weight: 500;
-        margin-bottom: 0.5em;
-        text-indent: -0.025em;
-      }
+  h3 {
+    font-size: var(--material-h5-font-size);
+    font-weight: 400;
+    margin-bottom: 0.75em;
+    text-indent: -0.05em;
+  }
 
-      h6 {
-        font-size: var(--material-small-font-size);
-        font-weight: 500;
-        letter-spacing: 0.01em;
-        margin-bottom: 0.25em;
-        text-indent: -0.025em;
-      }
+  h4 {
+    font-size: var(--material-h6-font-size);
+    font-weight: 400;
+    letter-spacing: 0.01em;
+    margin-bottom: 0.75em;
+    text-indent: -0.05em;
+  }
 
-      a,
-      b,
-      strong {
-        font-weight: 500;
-      }
-    </style>
-  </template>
-</dom-module>`;
+  h5 {
+    font-size: var(--material-body-font-size);
+    font-weight: 500;
+    margin-bottom: 0.5em;
+    text-indent: -0.025em;
+  }
 
-document.head.appendChild($_documentContainer.content);
+  h6 {
+    font-size: var(--material-small-font-size);
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    margin-bottom: 0.25em;
+    text-indent: -0.025em;
+  }
+
+  a,
+  b,
+  strong {
+    font-weight: 500;
+  }
+`;
+registerStyles('', typography, {moduleId: 'material-typography'});
+
+export { typography };
+/* Import Roboto from Google Fonts */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
 if (!window.polymerSkipLoadingFontRoboto) {
@@ -124,9 +132,1 @@ const font = 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic';
 }
-
-/* MAGI REMOVE END */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;

version.js

 class Material extends HTMLElement {
   static get version() {
-    return '1.3.2';
+    return '1.4.0-alpha1';
   }
@@ -5,0 +5,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36613

increased by0.33%

Number of package files

21

increased by61.54%

Lines of code

513

increased by2.4%

Worsened metrics

Dependency count

2

increased by100%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/vaadin-themable-mixin@^1.6.1

• + Added@vaadin/vaadin-themable-mixin@1.6.2(transitive)

• + Addedlit-element@2.5.1(transitive)

• + Addedlit-html@1.4.1(transitive)