Contact us Create app

Directory

← Back

paper-styles

Shared styles for Material Design elements

Author

Rating

Links

Popularity

<100

Published on NPM Build status Published on webcomponents.org

<paper-styles>

  1. default-theme.js: text, background and accent colors that match the default Material Design theme

  2. shadow.js: Material Design elevation and shadow styles

  3. typography.js: Material Design font styles and sizes

  4. demo-pages.js: generic styles used in the PolymerElements demo pages

  5. color.js: a complete list of the colors defined in the Material Design palette

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.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/paper-styles

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/paper-styles/typography.js';
      import {html} from '@polymer/polymer/lib/utils/html-tag.js';

      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

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);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/paper-styles
cd paper-styles
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

Compatibility

(Loading compatibility data...)

Last updated: 2017-05-15

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/iron-flex-layout#^3.0.0-pre.26
  • @polymer/font-roboto#^3.0.1
  • @polymer/polymer#^3.0.0
Released
2018-09-14
Maturity
IMPORTED
License
BSD 3-clause "New" or "Revised" License

Compatibility

Framework
Polymer 1.0+
Polymer 3.0+
Polymer 2.0+ in 2.1.0
Browser
Browser Independent

paper-styles - Vaadin Add-on Directory

Shared styles for Material Design elements paper-styles - Vaadin Add-on Directory
[![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) ## <paper-styles> 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 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 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.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. See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-styles), [Demo](https://www.webcomponents.org/element/@polymer/paper-styles/demo/demo/index.html). ## Usage ### Installation ``` npm install --save @polymer/paper-styles ``` ### In an html file ```html
Headline
This is a lifted paper
``` ### 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`
Headline
This is a lifted paper
`; } } customElements.define('sample-element', SampleElement); ``` ## 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 ``` ### Running the demo locally ```sh polymer serve --npm open http://127.0.0.1:/demo/ ``` ### Running the tests ```sh polymer test --npm ```
GitHub Homepage
Issue tracker
License
View on NPM
View on GitHub
Online Demo
Documentation

paper-styles version 0.8.0
### Dependencies * font-roboto#Polymer/font-roboto

paper-styles version 0.8.1
### Dependencies * font-roboto#Polymer/font-roboto

paper-styles version 0.8.2
### Dependencies * polymer#Polymer/polymer#0.8-preview

paper-styles version 0.8.3
### Dependencies * polymer#Polymer/polymer##v0.8.0-rc.4

paper-styles version 0.8.4
### Dependencies * polymer#Polymer/polymer#v0.8.0-rc.4

paper-styles version 0.8.5
### Dependencies * polymer#Polymer/polymer#v0.8.0-rc.6

paper-styles version 0.8.6
### Dependencies * polymer#Polymer/polymer#v0.8.0-rc.7

paper-styles version 0.8.7
### Dependencies * polymer#Polymer/polymer#v0.8.0-rc.7

paper-styles version 0.8.8
### Dependencies * polymer#Polymer/polymer#v0.8.0-rc.7 * iron-flex-layout#PolymerElements/iron-flex-layout#^0.8.0

paper-styles version 0.8.9
### Dependencies * polymer#Polymer/polymer#v0.8.0-rc.7 * iron-flex-layout#PolymerElements/iron-flex-layout#^0.8.0

paper-styles version 0.9.0
### Dependencies * polymer#Polymer/polymer#v0.9.0-rc.1 * iron-flex-layout#polymerelements/iron-flex-layout#^0.9.0

paper-styles version 0.9.1
### Dependencies * polymer#Polymer/polymer#v0.9.0-rc.1 * iron-flex-layout#polymerelements/iron-flex-layout#^0.9.0

paper-styles version 0.9.2
### Dependencies * polymer#Polymer/polymer#v0.9.0-rc.1 * iron-flex-layout#polymerelements/iron-flex-layout#^0.9.0

paper-styles version 0.9.3
### Dependencies * iron-flex-layout#polymerelements/iron-flex-layout#^0.9.0 * polymer#Polymer/polymer#^0.9.0

paper-styles version 0.9.4
### Dependencies * iron-flex-layout#polymerelements/iron-flex-layout#^0.9.0 * polymer#Polymer/polymer#^0.9.0

paper-styles version 0.9.5
### Dependencies * iron-flex-layout#polymerelements/iron-flex-layout#^0.9.0 * polymer#Polymer/polymer#^0.9.0

paper-styles version 1.0.0
### Dependencies * iron-flex-layout#polymerelements/iron-flex-layout#^1.0.0 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.1
### Dependencies * iron-flex-layout#polymerelements/iron-flex-layout#^1.0.0 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.2
### Dependencies * iron-flex-layout#polymerelements/iron-flex-layout#^1.0.0 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.3
### Dependencies * iron-flex-layout#polymerelements/iron-flex-layout#^1.0.0 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.4
### Dependencies * iron-flex-layout#polymerelements/iron-flex-layout#^1.0.0 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.5
### Dependencies * iron-flex-layout#polymerelements/iron-flex-layout#^1.0.0 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.6
### Dependencies * iron-flex-layout#polymerelements/iron-flex-layout#^1.0.0 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.7
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.0 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.8
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.0 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.10
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.9
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.11
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.12
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.0.13
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.1.0
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.1.1
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.1.2
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.1.3
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 0.0.1
### Dependencies * @polymer/iron-flex-layout#^0.0.1 * @polymer/font-roboto#^0.0.1 * @polymer/polymer#^1.2.5-npm-test.2

paper-styles version 0.0.3
### Dependencies * @polymer/iron-flex-layout#^0.0.3 * @polymer/font-roboto#^0.0.3 * @polymer/polymer#^1.2.5-npm-test.2

paper-styles version 1.1.4
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.1.5
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.2.0
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.2.1
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 1.3.1
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.0 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#^1.0.0

paper-styles version 2.0.0
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#1.9 - 2

paper-styles version 3.0.0-pre.1
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.1 * @polymer/font-roboto#^3.0.0-pre.1 * @polymer/polymer#^3.0.0-pre.1

paper-styles version 3.0.0-pre.2
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.1 * @polymer/font-roboto#^3.0.0-pre.1 * @polymer/polymer#^3.0.0-pre.1

paper-styles version 3.0.0-pre.3
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.3 * @polymer/font-roboto#^3.0.0-pre.3 * @polymer/polymer#^3.0.0-pre.3

paper-styles version 3.0.0-pre.4
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.4 * @polymer/font-roboto#^3.0.0-pre.4 * @polymer/polymer#^3.0.0-pre.4

paper-styles version 3.0.0-pre.6
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.6 * @polymer/font-roboto#^3.0.0-pre.6 * @polymer/polymer#^3.0.0-pre.6

paper-styles version 3.0.0-pre.7
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.7 * @polymer/font-roboto#^3.0.0-pre.7 * @polymer/polymer#^3.0.0-pre.7

paper-styles version 2.1.0
### Dependencies * iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2 * font-roboto#PolymerElements/font-roboto#^1.0.1 * polymer#Polymer/polymer#1.9 - 2

paper-styles version 3.0.0-pre.8
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.7 * @polymer/font-roboto#^3.0.0-pre.7 * @polymer/polymer#^3.0.0-pre.7

paper-styles version 3.0.0-pre.10
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.10 * @polymer/font-roboto#^3.0.0-pre.10 * @polymer/polymer#^3.0.0-pre.10

paper-styles version 3.0.0-pre.11
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.10 * @polymer/font-roboto#^3.0.0-pre.10 * @polymer/polymer#^3.0.0-pre.10

paper-styles version 3.0.0-pre.12
### Dependencies * @polymer/iron-flex-layout#3.0.0-pre.12 * @polymer/font-roboto#3.0.0-pre.12 * @polymer/polymer#3.0.0-pre.12

paper-styles version 3.0.0-pre.13
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.13 * @polymer/font-roboto#^3.0.0-pre.13 * @polymer/polymer#^3.0.0-pre.13

paper-styles version 3.0.0-pre.14
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.14 * @polymer/font-roboto#^3.0.0-pre.14 * @polymer/polymer#^3.0.0-pre.13

paper-styles version 3.0.0-pre.15
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.15 * @polymer/font-roboto#^3.0.0-pre.15 * @polymer/polymer#^3.0.0-pre.13

paper-styles version 3.0.0-pre.16
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.16 * @polymer/font-roboto#^3.0.0-pre.16 * @polymer/polymer#^3.0.0-pre.13

paper-styles version 3.0.0-pre.17
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.17 * @polymer/font-roboto#^3.0.0-pre.17 * @polymer/polymer#^3.0.0-pre.13

paper-styles version 3.0.0-pre.18
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.18 * @polymer/font-roboto#^3.0.0-pre.18 * @polymer/polymer#^3.0.0

paper-styles version 3.0.0-pre.19
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.19 * @polymer/font-roboto#^3.0.0-pre.19 * @polymer/polymer#^3.0.0

paper-styles version 3.0.0-pre.20
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.20 * @polymer/font-roboto#^3.0.0-pre.20 * @polymer/polymer#^3.0.0

paper-styles version 3.0.0-pre.21
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.21 * @polymer/font-roboto#^3.0.0-pre.21 * @polymer/polymer#^3.0.0

paper-styles version 3.0.0-pre.22
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.20 * @polymer/font-roboto#^3.0.0-pre.20 * @polymer/polymer#^3.0.0

paper-styles version 3.0.0-pre.23
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.22 * @polymer/font-roboto#^3.0.0-pre.22 * @polymer/polymer#^3.0.0

paper-styles version 3.0.0-pre.24
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.22 * @polymer/font-roboto#^3.0.0-pre.22 * @polymer/polymer#^3.0.0

paper-styles version 3.0.0-pre.25
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.24 * @polymer/font-roboto#^3.0.0-pre.24 * @polymer/polymer#^3.0.0

paper-styles version 3.0.0-pre.26
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.25 * @polymer/font-roboto#^3.0.1 * @polymer/polymer#^3.0.0

paper-styles version 3.0.0
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.26 * @polymer/font-roboto#^3.0.1 * @polymer/polymer#^3.0.0

paper-styles version 3.0.1
### Dependencies * @polymer/iron-flex-layout#^3.0.0-pre.26 * @polymer/font-roboto#^3.0.1 * @polymer/polymer#^3.0.0

Online