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:
-
colors.js: a complete list of the colors defined in the Anypoint palette
-
typography.js: Anypoint font styles and sizes
-
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-stylesIn 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 installRunning the demo locally
npm startRunning the tests
npm test