# @cockroachlabs/design-tokens

> Design tokens for Cockroach Labs.

Latest version **1.15.0** (published 2024-12-25) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.15.0 |
| Published | 2024-12-25 |
| First published | 2020-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 68.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Maintainers | celiala, kenliu-crl, laurenbarker, davidh-crl, rafiss, koorosh, rickycrl, james-crl, rail_crl, xinhaoz, dev-inf-npmjs, lassenordahl |
| Keywords | tokens |

## Links

- npm: https://www.npmjs.com/package/@cockroachlabs/design-tokens
- Repository: https://github.com/cockroachdb/ui
- Homepage: https://github.com/cockroachdb/ui#readme
- Issues: https://github.com/cockroachdb/ui/issues
- npm.io page: https://npm.io/package/@cockroachlabs/design-tokens

## Recent versions

- 1.15.0 (latest) — 2024-12-25
- 0.4.14-canary.508.12922023130.0 (canary) — 2025-01-23
- 0.4.14-canary.508.12828045487.0 — 2025-01-17
- 0.4.14-canary.508.12781134088.0 — 2025-01-15
- 0.4.14-canary.508.12740885382.0 — 2025-01-13
- 0.4.14-canary.508.12733085708.0 — 2025-01-12
- 0.4.14-canary.508.12722305549.0 — 2025-01-11
- 0.4.14-canary.508.12680122512.0 — 2025-01-08
- 0.4.14-canary.508.12606727295.0 — 2025-01-04
- 0.4.14-canary.508.12602472673.0 — 2025-01-03
- 0.4.14-canary.508.12566234024.0 — 2025-01-01
- 0.4.14-canary.508.12477389833.0 — 2024-12-24
- 0.4.14-canary.508.12361846425.0 — 2024-12-16
- 0.4.14-canary.508.12326250944.0 — 2024-12-14
- 0.4.14-canary.508.12302889892.0 — 2024-12-12
- … 678 more at https://npm.io/package/@cockroachlabs/design-tokens/versions

## README

# design-tokens

Uses [style-dictionary](https://github.com/amzn/style-dictionary) to transform tokens defined in json into different formats.

## Install dependencies

```
pnpm install
```

## Generate tokens from json

```
pnpm run build
```

## Exported Tokens

### Sass

`_tokens.scss` contains exported token values as Sass variables.

```sass
@import "~@cockroachlabs/design-tokens/dist/web/tokens"

.example {
    background-color: $color-background-button-primary-success-base;
    color: $color-font-button-primary-success-base;
    border-width: 1px;
    border-style: solid;
    border-color: $color-border-button-primary-success-base;
}
```

### Stylus

`tokens.styl` contains exported token values as Stylus variables.

```stylus
@require "~@cockroachlabs/design-tokens/dist/web/tokens"

.example
  color $color-intent-success-4
  background-color $color-intent-success-1
  border-radius 3px
```

### JavaScript

`tokens.js` contains exported token values as JavaScript constants.

```jsx
import {
  ColorFont1,
  ColorBaseBlue,
  ColorBasePurple,
} from "@cockroachlabs/design-tokens";

// ...

<SomeComponent
  fontColor={ColorFont1}
  interactionColor={ColorBaseBlue}
  progressColor={ColorBasePurple}
/>;
```

a `tokens.d.ts` file is also generated to act as types for tokens for TypeScript support.

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