@getpingback/design-tokens
CSS variables and JS constants generated from Token Studio via Style Dictionary.
yarn add @getpingback/design-tokensnpm install @getpingback/design-tokensUse the generated CSS variables (Light on :root, Dark under the .dark selector) or import JS constants when you need values at runtime.
@import url('@getpingback/design-tokens/css/light.css');
@import url('@getpingback/design-tokens/css/dark.css');Toggle Dark Mode by applying the class on a root container:
<html class="dark">
...
</html>Consume variables in your components:
background: var(--background-default);
color: var(--text-default-primary);import { BACKGROUND_DEFAULT } from '@getpingback/design-tokens/js/light';
// or
import { BACKGROUND_DEFAULT as DARK_BACKGROUND_DEFAULT } from '@getpingback/design-tokens/js/dark';Before starting development, run the following command:
sh npmrcconfig.sh
It will generate a .npmrc file with env tokens.
Build the tokens (CSS and JS) with:
yarn buildLicensed under the MIT License, Copyright © 2025-present Pingback LLC.
See LICENSE for more information.