# @dasa-health/alma-tokens

> ⚛️ Alma Design System - Tokens

Latest version **1.0.0** (published 2023-05-04) · 0 weekly downloads

## Install

```sh
npm install @dasa-health/alma-tokens
pnpm add @dasa-health/alma-tokens
yarn add @dasa-health/alma-tokens
bun add @dasa-health/alma-tokens
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-05-04 |
| First published | 2021-03-31 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | felipe.silva.devtech, nav.mobile, lucasrusso95, allan.pinheiro, marcoaure |

## Links

- npm: https://www.npmjs.com/package/@dasa-health/alma-tokens
- npm.io page: https://npm.io/package/@dasa-health/alma-tokens

## Recent versions

- 1.0.0 (latest) — 2023-05-04
- 0.11.0-beta.1 (canary) — 2023-04-10
- 0.7.1-next.18 (next) — 2022-02-22
- 0.12.0 — 2023-01-10
- 0.11.1 — 2022-12-01
- 0.11.0-beta.0 — 2022-11-23
- 0.10.1-beta.1 — 2022-10-28
- 0.10.1 — 2022-10-27
- 0.10.0 — 2022-09-05
- 0.9.0 — 2022-06-07
- 0.5.1-beta.49 — 2022-02-21
- 0.7.1-next.17 — 2022-02-18
- 0.8.0 — 2022-02-18
- 0.5.1-beta.43 — 2022-02-07
- 0.7.2 — 2022-02-07
- … 49 more at https://npm.io/package/@dasa-health/alma-tokens/versions

## README

# Alma Design System Tokens

Welcome to Alma Design System Tokens, the official token library made with Style Dictionary from Dasa.

## Installation

To add Alma Tokens to your project, open your terminal and run the following command:

```
yarn add @dasa-health/alma-tokens

```

## Usage

### Importing Tokens in JavaScript/TypeScript

You can import the specific tokens you need in your JavaScript or TypeScript file like this:

```
import { almTokens, navTokens, dasTokens } from '@dasa-health/alma-tokens';

```

### Using Tokens in Styled Components / Emotion

You can reference the tokens you need in your CSS like this:

```
import styled from 'styled-components';

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: ${({ almTokens }) => almTokens.border.radius.medium};
  color: ${({ almTokens }) => almTokens.color.interaction.accent['02']};
  border: 2px solid ${({ almTokens }) => almTokens.color.interaction.subtle['01']};
`;

```

### Using Tokens in Plain CSS

You can import the required token files like this:

```
import { navCSS, dasCSS } from "@dasa-health/alma-tokens";

```

### Using Tokens in JSON

You can import the required token files like this:

```
import { navJSON, dasJSON } from "@dasa-health/alma-tokens";

```

## Learn More

For more information on the tokens available in Alma Design System Tokens, please refer to our [documentation](https://zeroheight.com/7a44c04f2/p/168447-alma-design-system).

---
_Source: https://npm.io/package/@dasa-health/alma-tokens · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._