bezier-tokens

Bezier Tokens

Bezier Tokens is a design tokens library that implements Bezier design system.

Installation

npm i -D @channel.io/bezier-tokens

Usage

CSS

Provide all design tokens as CSS variables. If you want to apply dark theme tokens, add the data-bezier-theme="dark" attribute to the parent element. The default is light theme tokens, which can also be applied by adding the data-bezier-theme="light" attribute to the parent element.

import '@channel.io/bezier-tokens/css/styles.css'

<div data-bezier-theme="light">
  <div class="foo" />
  <div data-bezier-theme="dark">
    <div class="foo" />
  </div>
</div>

.foo {
  background-color: var(--bg-black-dark);
}

SCSS

While CSS variables are recommended, you can also use SCSS variables directly if you need to.

@use "sass:map";
@use "pkg:@channel.io/bezier-tokens" as *;

div {
  border-radius: map.get($tokens, "global", "radius", "4"); // ...px
  background-color: map.get($tokens, "light-theme", "bg", "black", "dark"); // #...
}

JavaScript

You can access and use values by token group.

import { tokens } from '@channel.io/bezier-tokens'

console.log(tokens.global.color['blue-300']) // "#..."
console.log(tokens.lightTheme.color['bg-black-dark']) // "#..."

Contributing

See contribution guide.

Maintainers

This package is mainly contributed by Channel Corp. Although feel free to contribution, or raise concerns!