@polymer/paper-styles - npm Package Compare versions

Comparing version 3.0.0-pre.21 to 3.0.0-pre.22

classes/global.js

@@ -0,6 +1,22 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+/*
+Note that this file probably doesn't do what you expect it to do. It's not
+a `<style is=custom-style include="..."` type of style include, which mean
+these styles will only apply to the main document, regardless of where
+you import this file.
+*/
+
 import '../paper-styles-classes.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
 
-$_documentContainer.innerHTML = `<style>
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+const template = html`<style>
 /* Mixins */
@@ -80,25 +96,3 @@
 </style>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-Note that this file probably doesn't do what you expect it to do. It's not
-a `<style is=custom-style include="..."` type of style include, which mean
-these styles will only apply to the main document, regardless of where
-you import this file.
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

classes/shadow.js

@@ -1,5 +0,23 @@
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+/*
+Note that this file probably doesn't do what you expect it to do. It's not
+a `<style is=custom-style include="..."` type of style include, which mean
+these styles will only apply to the main document, regardless of where
+you import this file.
 
-$_documentContainer.innerHTML = `<style>
+For a set of styles that can be applied to an element, check
+paper-styles/shadow.js.
+*/
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+const template = html`
+<style>
 .shadow-transition {
@@ -46,27 +64,3 @@ transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 </style>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-Note that this file probably doesn't do what you expect it to do. It's not
-a `<style is=custom-style include="..."` type of style include, which mean
-these styles will only apply to the main document, regardless of where
-you import this file.
-
-For a set of styles that can be applied to an element, check paper-styles/shadow.html.
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

classes/typography.js

@@ -0,7 +1,25 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+/*
+Note that this file probably doesn't do what you expect it to do. It's not
+a `<style is=custom-style include="..."` type of style include, which mean
+these styles will only apply to the main document, regardless of where
+you import this file.
+
+For a set of styles that can be applied to an element, check
+paper-styles/typography.html.
+*/
 import '@polymer/font-roboto/roboto.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+const template = html`
+<style>
 
-$_documentContainer.innerHTML = `<style>
-
 .paper-font-display4,
@@ -150,27 +168,3 @@ .paper-font-display3,
 </style>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-Note that this file probably doesn't do what you expect it to do. It's not
-a `<style is=custom-style include="..."` type of style include, which mean
-these styles will only apply to the main document, regardless of where
-you import this file.
-
-For a set of styles that can be applied to an element, check paper-styles/typography.html.
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

color.js

@@ -0,6 +1,17 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+
 import '@polymer/polymer/polymer-legacy.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
 
-$_documentContainer.innerHTML = `<custom-style>
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+const template = html`
+<custom-style>
   <style is="custom-style">
@@ -326,20 +337,5 @@ html {
   </style>
-</custom-style>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+</custom-style>
+`;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

default-theme.js

@@ -0,7 +1,20 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+/* Taken from
+ * https://www.google.com/design/spec/style/color.html#color-ui-color-application
+ */
 import '@polymer/polymer/polymer-legacy.js';
 import './color.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
 
-$_documentContainer.innerHTML = `<custom-style>
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+const template = html`
+<custom-style>
   <style is="custom-style">
@@ -23,3 +36,3 @@ html {
       /*
-       * Primary and accent colors. Also see color.html for more colors.
+       * Primary and accent colors. Also see color.js for more colors.
        */
@@ -63,20 +76,3 @@ --primary-color: var(--paper-indigo-500);
 </custom-style>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/* Taken from https://www.google.com/design/spec/style/color.html#color-ui-color-application */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

demo-pages.js

@@ -0,1 +1,21 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+/*
+Note that this file probably doesn't do what you expect it to do. It's not
+a `<style is=custom-style include="..."` type of style include, which mean
+these styles will only apply to the main document, regardless of where
+you import this file.
+
+For a set of styles that can be applied to an element,
+check iron-demo-helpers/demo-pages-shared-styles.html.
+*/
+
 import '@polymer/polymer/polymer-legacy.js';
@@ -6,6 +26,5 @@ import '@polymer/iron-flex-layout/iron-flex-layout.js';
 import './shadow.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
 
-$_documentContainer.innerHTML = `<custom-style>
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+const template = html`<custom-style>
   <style is="custom-style">
@@ -59,3 +78,3 @@ body {
     /* TODO: remove this hack and use horizontal-section-container instead */
-    body &gt; div.layout.horizontal.center-justified {
+    body > div.layout.horizontal.center-justified {
       @apply --layout-wrap;
@@ -65,28 +84,3 @@ }
 </custom-style>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-Note that this file probably doesn't do what you expect it to do. It's not
-a `<style is=custom-style include="..."` type of style include, which mean
-these styles will only apply to the main document, regardless of where
-you import this file.
-
-For a set of styles that can be applied to an element,
-check iron-demo-helpers/demo-pages-shared-styles.html.
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

element-styles/paper-item-styles.js

@@ -0,1 +1,32 @@
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+/**
+Material design:
+[Lists](https://www.google.com/design/spec/components/lists.html)
+
+Shared styles for a native `button` to be used as an item in a `paper-listbox`
+element:
+
+    <custom-style>
+      <style is="custom-style" include="paper-item-styles"></style>
+    </custom-style>
+
+    <paper-listbox>
+      <button class="paper-item" role="option">Inbox</button>
+      <button class="paper-item" role="option">Starred</button>
+      <button class="paper-item" role="option">Sent mail</button>
+    </paper-listbox>
+
+@group Paper Elements
+@demo demo/index.html
+*/
+
 import '@polymer/polymer/polymer-legacy.js';
@@ -5,9 +36,9 @@ import '../color.js';
 import '../typography.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
 
-$_documentContainer.innerHTML = `<dom-module id="paper-item-styles">
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+const template = html`
+<dom-module id="paper-item-styles">
   <template>
     <style>
-      :host, html {
+      html {
         --paper-item: {
@@ -26,2 +57,17 @@ display: block;
       }
+      /* Duplicate the style because of https://github.com/webcomponents/shadycss/issues/193 */
+      :host {
+        --paper-item: {
+          display: block;
+          position: relative;
+          min-height: var(--paper-item-min-height, 48px);
+          padding: 0px 16px;
+          @apply --paper-font-subhead;
+          border:none;
+          outline: none;
+          background: white;
+          width: 100%;
+          text-align: left;
+        };
+      }
 
@@ -67,37 +113,3 @@ .paper-item {
 </dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@license
-Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/**
-Material design: [Lists](https://www.google.com/design/spec/components/lists.html)
-
-Shared styles for a native `button` to be used as an item in a `paper-listbox` element:
-
-    <custom-style>
-      <style is="custom-style" include="paper-item-styles"></style>
-    </custom-style>
-
-    <paper-listbox>
-      <button class="paper-item" role="option">Inbox</button>
-      <button class="paper-item" role="option">Starred</button>
-      <button class="paper-item" role="option">Sent mail</button>
-    </paper-listbox>
-
-@group Paper Elements
-@demo demo/index.html
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

element-styles/paper-material-styles.js

@@ -0,10 +1,41 @@
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+/**
+Material design:
+[Cards](https://www.google.com/design/spec/components/cards.html)
+
+Shared styles that you can apply to an element to renders two shadows on top
+of each other,that create the effect of a lifted piece of paper.
+
+Example:
+
+    <custom-style>
+      <style is="custom-style" include="paper-material-styles"></style>
+    </custom-style>
+
+    <div class="paper-material" elevation="1">
+      ... content ...
+    </div>
+
+@group Paper Elements
+@demo demo/index.html
+*/
+
 import '@polymer/polymer/polymer-legacy.js';
 import '../shadow.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
 
-$_documentContainer.innerHTML = `<dom-module id="paper-material-styles">
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+const template = html`
+<dom-module id="paper-material-styles">
   <template>
     <style>
-      :host, html {
+      html {
         --paper-material: {
@@ -30,59 +61,65 @@ display: block;
       }
-      :host(.paper-material), .paper-material {
+      .paper-material {
         @apply --paper-material;
       }
-      :host(.paper-material[elevation="1"]), .paper-material[elevation="1"] {
+      .paper-material[elevation="1"] {
         @apply --paper-material-elevation-1;
       }
-      :host(.paper-material[elevation="2"]), .paper-material[elevation="2"] {
+      .paper-material[elevation="2"] {
         @apply --paper-material-elevation-2;
       }
-      :host(.paper-material[elevation="3"]), .paper-material[elevation="3"] {
+      .paper-material[elevation="3"] {
         @apply --paper-material-elevation-3;
       }
-      :host(.paper-material[elevation="4"]), .paper-material[elevation="4"] {
+      .paper-material[elevation="4"] {
         @apply --paper-material-elevation-4;
       }
-      :host(.paper-material[elevation="5"]), .paper-material[elevation="5"] {
+      .paper-material[elevation="5"] {
         @apply --paper-material-elevation-5;
       }
+
+      /* Duplicate the styles because of https://github.com/webcomponents/shadycss/issues/193 */
+      :host {
+        --paper-material: {
+          display: block;
+          position: relative;
+        };
+        --paper-material-elevation-1: {
+          @apply --shadow-elevation-2dp;
+        };
+        --paper-material-elevation-2: {
+          @apply --shadow-elevation-4dp;
+        };
+        --paper-material-elevation-3: {
+          @apply --shadow-elevation-6dp;
+        };
+        --paper-material-elevation-4: {
+          @apply --shadow-elevation-8dp;
+        };
+        --paper-material-elevation-5: {
+          @apply --shadow-elevation-16dp;
+        };
+      }
+      :host(.paper-material) {
+        @apply --paper-material;
+      }
+      :host(.paper-material[elevation="1"]) {
+        @apply --paper-material-elevation-1;
+      }
+      :host(.paper-material[elevation="2"]) {
+        @apply --paper-material-elevation-2;
+      }
+      :host(.paper-material[elevation="3"]) {
+        @apply --paper-material-elevation-3;
+      }
+      :host(.paper-material[elevation="4"]) {
+        @apply --paper-material-elevation-4;
+      }
+      :host(.paper-material[elevation="5"]) {
+        @apply --paper-material-elevation-5;
+      }
     </style>
   </template>
 </dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@license
-Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/**
-Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
-
-Shared styles that you can apply to an element to renders two shadows on top
-of each other,that create the effect of a lifted piece of paper.
-
-Example:
-
-    <custom-style>
-      <style is="custom-style" include="paper-material-styles"></style>
-    </custom-style>
-
-    <div class="paper-material" elevation="1">
-      ... content ...
-    </div>
-
-@group Paper Elements
-@demo demo/index.html
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

package.json

@@ -16,28 +16,20 @@ {
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.2.2",
-    "bower": "^1.8.0",
     "webmat": "^0.2.0",
-    "@polymer/iron-component-page": "^3.0.0-pre.21",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.21",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.20",
     "@webcomponents/webcomponentsjs": "^2.0.0",
-    "wct-browser-legacy": "^1.0.1"
+    "wct-browser-legacy": "^1.0.1",
+    "@polymer/gen-typescript-declarations": "^1.5.0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
-    "format": "webmat && npm run update-types"
+    "format": "webmat",
+    "generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
+    "prepack": "npm run generate-types"
   },
-  "version": "3.0.0-pre.21",
-  "resolutions": {
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0",
-    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
-  },
+  "version": "3.0.0-pre.22",
   "author": "The Polymer Authors",
   "dependencies": {
-    "@polymer/iron-flex-layout": "^3.0.0-pre.21",
-    "@polymer/font-roboto": "^3.0.0-pre.21",
+    "@polymer/iron-flex-layout": "^3.0.0-pre.20",
+    "@polymer/font-roboto": "^3.0.0-pre.20",
     "@polymer/polymer": "^3.0.0"
   }
 }

paper-styles-classes.js

@@ -1,12 +0,10 @@
-import './classes/typography.js';
-import './classes/shadow.js';
-
 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
@@ -20,9 +18,6 @@ /*
 For a set of styles that can be applied to an element,
-check paper-styles.html.
+check paper-styles.js.
 */
-/*
-  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 './classes/typography.js';
+import './classes/shadow.js';

paper-styles.js

@@ -1,37 +0,43 @@
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import './color.js';
-import './default-theme.js';
-import './shadow.js';
-import './typography.js';
-
 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
 /**
-The `<paper-styles>` component provides simple ways to use Material Design CSS styles
-in your application. The following imports are available:
+The `<paper-styles>` component provides simple ways to use Material Design CSS
+styles in your application. The following imports are available:
 
-1. [color.html](https://github.com/PolymerElements/paper-styles/blob/master/color.html):
-a complete list of the colors defined in the Material Design [palette](https://www.google.com/design/spec/style/color.html)
+1.
+[color.js](https://github.com/PolymerElements/paper-styles/blob/master/color.html):
+a complete list of the colors defined in the Material Design
+[palette](https://www.google.com/design/spec/style/color.html)
 
-2. [default-theme.html](https://github.com/PolymerElements/paper-styles/blob/master/default-theme.html): text,
-background and accent colors that match the default Material Design theme
+2.
+[default-theme.js](https://github.com/PolymerElements/paper-styles/blob/master/default-theme.html):
+text, background and accent colors that match the default Material Design theme
 
-3. [shadow.html](https://github.com/PolymerElements/paper-styles/blob/master/shadow.html): Material Design
-[elevation](https://www.google.com/design/spec/what-is-material/elevation-shadows.html) and shadow styles
+3.
+[shadow.js](https://material.io/design/environment/light-shadows.html#shadows):
+Material Design
+[elevation](https://material.io/design/environment/light-shadows.html#shadows)
+and shadow styles
 
-4. [typography.html](https://github.com/PolymerElements/paper-styles/blob/master/typography.html):
-Material Design [font](http://www.google.com/design/spec/style/typography.html#typography-styles) styles and sizes
+4.
+[typography.js](https://github.com/PolymerElements/paper-styles/blob/master/typography.html):
+Material Design
+[font](http://www.google.com/design/spec/style/typography.html#typography-styles)
+styles and sizes
 
-5. [demo-pages.html](https://github.com/PolymerElements/paper-styles/blob/master/demo-pages.html): generic styles
-used in the PolymerElements demo pages
+5.
+[demo-pages.js](https://github.com/PolymerElements/paper-styles/blob/master/demo-pages.html):
+generic styles used in the PolymerElements demo pages
 
-We recommend importing each of these individual files, and using the style mixins
-available in each ones, rather than the aggregated `paper-styles.html` as a whole.
+We recommend importing each of these individual files, and using the style
+mixins available in each ones, rather than the aggregated `paper-styles.html` as
+a whole.
 
@@ -42,7 +48,7 @@ @group Paper Elements
 */
-/*
-  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 '@polymer/iron-flex-layout/iron-flex-layout.js';
+import './color.js';
+import './default-theme.js';
+import './shadow.js';
+import './typography.js';

README.md

@@ -1,50 +0,102 @@
-
-<!---
-
-This README is automatically generated from the comments in these files:
-paper-styles.html
-
-Edit those files, and our readme bot will duplicate them over here!
-Edit this file, and the bot will squash your changes :)
-
-The bot does some handling of markdown. Please file a bug if it does the wrong
-thing! https://github.com/PolymerLabs/tedium/issues
-
--->
-
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-styles.svg)](https://www.npmjs.com/package/@polymer/paper-styles)
 [![Build status](https://travis-ci.org/PolymerElements/paper-styles.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-styles)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-styles)
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/paper-styles)_
+## &lt;paper-styles&gt;
+1. [default-theme.js](https://github.com/PolymerElements/paper-styles/blob/master/default-theme.html): text,
+background and accent colors that match the default Material Design theme
 
+1. [shadow.js](https://github.com/PolymerElements/paper-styles/blob/master/shadow.html): Material Design
+[elevation](https://material.io/design/environment/light-shadows.html#shadows) and shadow styles
 
-## &lt;paper-styles&gt;
+1. [typography.js](https://github.com/PolymerElements/paper-styles/blob/master/typography.html):
+Material Design [font](http://www.google.com/design/spec/style/typography.html#typography-styles) styles and sizes
 
-The `<paper-styles>` component provides simple ways to use Material Design CSS styles
-in your application. The following imports are available:
+1. [demo-pages.js](https://github.com/PolymerElements/paper-styles/blob/master/demo-pages.html): generic styles
+used in the PolymerElements demo pages
 
-1. [color.html](https://github.com/PolymerElements/paper-styles/blob/master/color.html):
+1. [color.js](https://github.com/PolymerElements/paper-styles/blob/master/color.html):
 a complete list of the colors defined in the Material Design [palette](https://www.google.com/design/spec/style/color.html)
 
+We recommend importing each of these individual files, and using the style mixins
+available in each ones, rather than the aggregated `paper-styles.html` as a whole.
 
-1. [default-theme.html](https://github.com/PolymerElements/paper-styles/blob/master/default-theme.html): text,
-background and accent colors that match the default Material Design theme
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-styles),
+  [Demo](https://www.webcomponents.org/element/@polymer/paper-styles/demo/demo/index.html).
 
+## Usage
 
-1. [shadow.html](https://github.com/PolymerElements/paper-styles/blob/master/shadow.html): Material Design
-[elevation](https://www.google.com/design/spec/what-is-material/elevation-shadows.html) and shadow styles
+### Installation
+```
+npm install --save @polymer/paper-styles
+```
 
+### In an html file
+```html
+<html>
+  <head>
+    <script type="module">
+      import '@polymer/paper-styles/typography.js';
+      import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
-1. [typography.html](https://github.com/PolymerElements/paper-styles/blob/master/typography.html):
-Material Design [font](http://www.google.com/design/spec/style/typography.html#typography-styles) styles and sizes
+      const template = html`
+      <custom-style>
+        <style is="custom-style" include="paper-material-styles">
+          .paper-font-headline {
+            @apply --paper-font-headline;
+          }
+        </style>
+      </custom-style>`;
+      document.body.appendChild(template.content);
+    </script>
+  </head>
+  <body>
+    <div class="paper-font-headline">Headline</div>
+    <div class="paper-material" elevation="3">This is a lifted paper</div>
+  </body>
+</html>
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-styles/typography.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
+class SampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <style is="custom-style" include="paper-material-styles">
+        .paper-font-headline {
+          @apply --paper-font-headline;
+        }
+      </style>
+      <div class="paper-font-headline">Headline</div>
+      <div class="paper-material" elevation="3">This is a lifted paper</div>
+    `;
+  }
+}
+customElements.define('sample-element', SampleElement);
+```
 
-1. [demo-pages.html](https://github.com/PolymerElements/paper-styles/blob/master/demo-pages.html): generic styles
-used in the PolymerElements demo pages
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
 
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-styles
+cd paper-styles
+npm install
+npm install -g polymer-cli
+```
 
-We recommend importing each of these individual files, and using the style mixins
-available in each ones, rather than the aggregated `paper-styles.html` as a whole.
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
 
-## Changes in 2.0
-- removed deprecated `/deep/` styles. Files removed: `classes/shadow-layout.html`, `demo.css`.
-
+### Running the tests
+```sh
+polymer test --npm
+```

shadow.js

@@ -0,6 +1,17 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+
 import '@polymer/polymer/polymer-legacy.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
 
-$_documentContainer.innerHTML = `<custom-style>
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+const template = html`
+<custom-style>
   <style is="custom-style">
@@ -69,19 +80,3 @@ html {
 </custom-style>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

typography.js

@@ -0,7 +1,25 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+/*
+Typographic styles are provided matching the Material Design standard styles:
+http://www.google.com/design/spec/style/typography.html#typography-standard-styles
+
+Note that these are English/Latin centric styles. You may need to further adjust
+line heights and weights for CJK typesetting. See the notes in the Material
+Design typography section.
+*/
+
 import '@polymer/polymer/polymer-legacy.js';
 import '@polymer/font-roboto/roboto.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
 
-$_documentContainer.innerHTML = `<custom-style>
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+const template = html`<custom-style>
   <style is="custom-style">
@@ -163,27 +181,3 @@ html {
 </custom-style>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-Typographic styles are provided matching the Material Design standard styles:
-http://www.google.com/design/spec/style/typography.html#typography-standard-styles
-
-Note that these are English/Latin centric styles. You may need to further adjust
-line heights and weights for CJK typesetting. See the notes in the Material
-Design typography section.
-*/
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Dev dependency count

5

decreased by-28.57%

Number of package files

29

increased by20.83%

Lines of code

1413

increased by9.37%

Number of lines in readme file

103

increased by101.96%

Worsened metrics

Total package byte prevSize

63494

decreased by-0.55%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/font-roboto@^3.0.0-pre.20

• Updated@polymer/iron-flex-layout@^3.0.0-pre.20