0.4.13 • Published 12 hours ago

@cockroachlabs/design-tokens v0.4.13

Weekly downloads
1,172
License
MIT
Repository
github
Last release
12 hours ago

design-tokens

Uses style-dictionary to transform tokens defined in json into different formats.

Install dependencies

yarn

Generate tokens from json

npm run build

Exported Tokens

Sass

_tokens.scss contains exported token values as Sass variables.

@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.

@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.

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.

0.4.13

8 months ago

0.4.12

11 months ago

0.4.11

1 year ago

0.4.10

2 years ago

0.4.9

2 years ago

0.4.7

2 years ago

0.4.6

2 years ago

0.4.5

2 years ago

0.4.4

2 years ago

0.4.2

2 years ago

0.4.1

3 years ago

0.4.0

3 years ago

0.3.0

3 years ago

0.2.2

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.0

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago