0.4.13 • Published 8 months ago

@cockroachlabs/design-tokens v0.4.13

Weekly downloads
1,172
License
MIT
Repository
github
Last release
8 months 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

2 years ago

0.4.12

2 years ago

0.4.11

2 years ago

0.4.10

3 years ago

0.4.9

3 years ago

0.4.7

3 years ago

0.4.6

3 years ago

0.4.5

3 years ago

0.4.4

4 years ago

0.4.2

4 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.3.0

4 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.0

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago