# @anypoint-web-components/anypoint-styles

> Anypoint styles definition for web components.

Latest version **1.0.4** (published 2023-03-27) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @anypoint-web-components/anypoint-styles
pnpm add @anypoint-web-components/anypoint-styles
yarn add @anypoint-web-components/anypoint-styles
bun add @anypoint-web-components/anypoint-styles
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-03-27 |
| First published | 2019-06-22 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 25 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Pawel Uchida-Psztyc |
| Maintainers | jarrodek, twoplustwoone, lbauret, carowright |
| Keywords | anypoint, styles |

## Links

- npm: https://www.npmjs.com/package/@anypoint-web-components/anypoint-styles
- Repository: https://github.com/anypoint-web-components/anypoint-styles
- Homepage: https://github.com/anypoint-web-components/anypoint-styles#readme
- Issues: https://github.com/anypoint-components/anypoint-styles/issues
- npm.io page: https://npm.io/package/@anypoint-web-components/anypoint-styles

## Dependencies (2)

- [lit-html](https://npm.io/package/lit-html.md) ^1.4.1
- [lit-element](https://npm.io/package/lit-element.md) ^2.5.1

## Recent versions

- 1.0.4 (latest) — 2023-03-27
- 1.0.3 — 2021-10-15
- 1.0.2 — 2021-08-24
- 1.0.1 — 2019-10-16
- 1.0.0 — 2019-09-19
- 1.0.0-preview.2 — 2019-09-02
- 1.0.0-preview.1 — 2019-06-22

## README

# 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](https://github.com/anypoint-web-components/anypoint-styles/blob/master/colors.js):
a complete list of the colors defined in the Anypoint [palette](http://ux.mulesoft.com/#/colors)

2.  [typography.js](https://github.com/anypoint-web-components/anypoint-styles/blob/master/typography.js):
Anypoint [font](http://ux.mulesoft.com/#/typography) styles and sizes

3.  [anypoint-theme.js](https://github.com/anypoint-web-components/anypoint-styles/blob/master/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
```sh
npm install --save @anypoint-web-components/anypoint-styles
```

### In an html file

```html
<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

```js
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

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

### Running the demo locally

```sh
npm start
```

### Running the tests
```sh
npm test
```

---
_Source: https://npm.io/package/@anypoint-web-components/anypoint-styles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._