Deprecated

This component has been moved to anypoint-web-components/awc.

====

The <anypoint-styles> component provides simple ways to use Anypoint CSS styles in an application. The following imports are available:

1. colors.js: a complete list of the colors defined in the Anypoint palette

2. typography.js: Anypoint font styles and sizes

3. anypoint-theme.js: Default theme for anypoint applications.

We recommend importing each of these individual files, and using the style variables available in each ones, rather than the aggregated anypoint-styles.js as a whole.

Note, typography does not include font definition (the din-pro.js) file. It assumes the for is already loaded into the web application. If not, additionally import the din-pro.js file.

Usage

Installation

npm install --save @anypoint-web-components/anypoint-styles

In an html file

<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-styles/default-theme.js';
    </script>
    <style>
    h1 {
      font-size: var(--font-header1-font-size);
      font-weight: var(--font-header1-font-weight);
      letter-spacing: var(--font-header1-letter-spacing);
      margin-bottom: var(--font-header1-margin-bottom);
    }
    </style>
  </head>
  <body>
    <h1>Content title</h1>
  </body>
</html>

In a LitElement

import { LitElement, html, css } from 'lit-element';
import '@anypoint-web-components/anypoint-styles/default-theme.js';

class SampleElement extends LitElement {
  static get styles() {
    return css`
    h1 {
      font-size: var(--font-header1-font-size);
      font-weight: var(--font-header1-font-weight);
      letter-spacing: var(--font-header1-letter-spacing);
      margin-bottom: var(--font-header1-margin-bottom);
    }`;
  }

  render() {
    return html`<h1>Content title</h1>`;
  }
}
customElements.define('sample-element', SampleElement);

Development

git clone https://github.com/anypoint-web-components/anypoint-styles
cd anypoint-styles
npm install

Running the demo locally

npm start

Running the tests

npm test