@root-axis/design-tokens v1.0.2

Root Axis Design Tokens 🌳📐

A lightweight design tokens library providing scalable, platform-agnostic design values for web related projects.

Install

Install the package with npm:

npm install @root-axis/design-tokens

Available Formats

The library provides design tokens in the following formats for seamless integration across various platforms:\ These formats allow you to integrate tokens into your projects depending on the platform or styling language you're using.

⚠️ This library is designed for web projects only, so there is no direct mobile support. \ For React Native, though, you can still use the JS and TS formats.

Usage

This library is designed to work seamlessly with your preferred styling technology. \ Below, you'll find specific instructions on how to style a <button> using different approaches. \ However, you can use this library to style any element you want.

CSS

You can directly use variables in your stylesheets:

💡 CSS is the default import, so there's no need to specify a path like the other following examples

@import "@root-axis/design-tokens";

button {
  color: var(--color-neutral-100);
  background: var(--color-neutral-900);
  padding-inline: var(--size-5);
  padding-block: var(--size-3);
  border-radius: var(--size-2);
  border: none;
}

SCSS

SCSS map formats for working with SCSS in your stylesheets.

@use "@root-axis/design-tokens/scss/tokens.scss" as tokens;

button {
  color: tokens.$color-neutral-100;
  background: tokens.$color-neutral-900;
  padding-inline: tokens.$size-5;
  padding-block: tokens.$size-3;
  border-radius: tokens.$size-2;
  border: none;
}

JS

Import and use tokens as JavaScript objects for dynamic styling.

import {
  ColorNeutral100,
  ColorNeutral900,
  Size5,
  Size3,
  Size2,
} from "@root-axis/design-tokens/js/tokens.js";

// Get the button element from the DOM
const button = document.querySelector("button");

// Apply styles dynamically to the button element
// Assuming there is already a button in the DOM ⚠️
button.style.color = ColorNeutral100;
button.style.backgroundColor = ColorNeutral900;
button.style.paddingInline = Size5;
button.style.paddingBlock = Size3;
button.style.borderRadius = Size2;
button.style.border = "none";

TS

TypeScript type declarations for strongly typed design tokens.

import {
  ColorNeutral100,
  ColorNeutral900,
  Size5,
  Size3,
  Size2,
} from "@root-axis/design-tokens/ts/tokens";

// Get the button element from the DOM
const button = document.querySelector("button") as HTMLButtonElement;

// Apply styles dynamically to the button element
// Assuming there is already a button in the DOM ⚠️
button.style.color = ColorNeutral100;
button.style.backgroundColor = ColorNeutral900;
button.style.paddingInline = Size5;
button.style.paddingBlock = Size3;
button.style.borderRadius = Size2;
button.style.border = "none";

JSON

A flat structure for easy use in configurations and APIs.

import tokens from "@root-axis/design-tokens/json/tokens.json";

console.log(tokens.ColorNeutral100); // Output: #f5f5f5

TailwindCSS

You can use this alongside TailwindCSS by importing it before the Tailwind directives. \ Ensure that the imports come first, followed by the @tailwind directives. \ This setup allows seamless integration with Tailwind's utility classes.

globals.css:

@import "@root-axis/design-tokens";
@tailwind base;
@tailwind components;
@tailwind utilities;

button {
  color: var(--color-neutral-100);
  background: var(--color-neutral-900);
  padding-inline: var(--size-5);
  padding-block: var(--size-3);
  border-radius: var(--size-2);
  border: none;
}