# @bliss-design-system/tokens

> This repository exists as a single source of truth for Bliss design tokens.

Latest version **1.6.2** (published 2021-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bliss-design-system/tokens
pnpm add @bliss-design-system/tokens
yarn add @bliss-design-system/tokens
bun add @bliss-design-system/tokens
```

## 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.6.2 |
| Published | 2021-06-10 |
| First published | 2021-02-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gvonkoss, coolcut, bryter-bliss |

## Links

- npm: https://www.npmjs.com/package/@bliss-design-system/tokens
- Repository: https://gitlab.com/bliss-design-system/tokens
- Homepage: https://gitlab.com/bliss-design-system/tokens#readme
- Issues: https://gitlab.com/bliss-design-system/tokens/issues
- npm.io page: https://npm.io/package/@bliss-design-system/tokens

## Recent versions

- 1.6.2 (latest) — 2021-06-10
- 1.6.1 — 2021-05-04
- 1.6.0 — 2021-05-04
- 1.5.2 — 2021-05-03
- 1.5.1 — 2021-05-03
- 1.5.0 — 2021-05-03
- 1.4.0 — 2021-03-23
- 1.3.0 — 2021-03-09
- 1.2.0 — 2021-03-09
- 1.1.1 — 2021-02-04
- 1.1.0 — 2021-02-04
- 1.0.1 — 2021-02-03
- 1.0.0 — 2021-02-03

## README

# Bliss Tokens Toolkit

This repository exists as a single source of truth for Bliss design tokens.

Design tokens define the visual foundations of the Bliss Design System - including 🎨 colors, ⌨️ typography, ↔️ spacing, and more. These are values that are determined by the designs of the BRYTER brand and product.

- [Installation](#-installation)
- [Usage](#-usage)
- [Structure](#-structure)
- [Contributing](#-contributing)
    - [Reporting a bug](#reporting-a-bug)
    - [Committing](#committing)
    - [Opening a merge request](#opening-a-merge-request)
- [Troubleshooting](#-troubleshooting)

## 📦 Installation

To use the design tokens, install the package in the root of your client-facing application:

```bash
yarn add @bliss-design-system/tokens
```

## 🏎 Usage 

After [installation](#-installation), load the design tokens directly into your Sass stylesheet with the [@use](https://sass-lang.com/documentation/at-rules/use) command:
```css
@use '@bliss-design-system/tokens';
```  

From there, you can access the values using the `tokens` prefix:
```css
@mixin example() {
  width: tokens.$space-6;
  font-size: tokens.$font-size-8;
  font-weight: tokens.$font-weight-bold;
}
```

## 📁 Structure

You'll find the JSON files describing the design tokens in the `src` folder, sorted by category. Within each category, there will be an `options.json` and/or `patterns.json` file. 

**Options** supply the foundations for the visual elements. These contain defined yet obscure values and transform them into variables that have meaning.

An example of color options:

```json
"gray": {
  "0": { "value": "#F4F4F6" },
  "100": { "value": "#E2E5E9" },
  "200": { "value": "#CCD0D7" }
}
```

**Patterns** take the available options and turn them into decisions. These tokens make an explicit decision about which of the option tokens to use for specific implementations.

Here's what it'd look like if we provided tokens for text colors based on interactive state:

```json
"color-action-text-primary-default" : gray.0,
"color-action-text-primary-hover" : gray.500
```

## 🫕 Contributing

If you'd like to contribute, please [open an issue](https://gitlab.com/bliss-design-system/tokens/-/issues) with your suggested change. This issue will automatically be added to the [Bliss Proposal Board](https://gitlab.com/groups/bliss-design-system/-/boards). Once that is accepted, either the Bliss team will work on it or you can make changes locally.

If you would like to contribute, run the following:

```bash
# Clone and move into this repository
git clone https://gitlab.com/bliss-design-system/tokens.git
cd tokens

# Install the dependencies
yarn
```

### Reporting a bug

Notice something off? Please [open an issue](https://gitlab.com/bliss-design-system/tokens/-/issues) using our `Bug Report` template and fill in as many details as possible.

### Committing

We follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/), meaning that you'll be prompted to fill out a descriptive message when you commit. We also use these commits to manage our releases, so we appreciate details.

As a guideline for this toolkit, we recommend the following:
- If you are **updating the values of a token**, this qualifies as a patch version (`fix`)
- If you are **adding new tokens**, this qualifies as a minor version (`feat`)

⚠️ If you are **removing** or **renaming** tokens, please speak with the Bliss team, as this will qualify as a major version and involves a breaking change.

### Opening a merge request

When you're ready to open a merge request, please use a descriptive title and fill out the provided template.

The team will be notified, but it helps to post your merge request in [#bliss_support](https://bryterworkspace.slack.com/archives/CLBTUEQ5P).

## 🙃 Troubleshooting

We'll fill this section out as we go and as issues are raised. But if you haven't found what you're looking for, get in touch via [bliss@bryter.io](mailto:bliss@bryter.io) or via the [#bliss_support](https://bryterworkspace.slack.com/archives/CLBTUEQ5P) Slack channel ✨.

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