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.

| Format | Output | | --------------------------- | ------ | | CSS | ✅ | | SCSS | ✅ | | JS | ✅ | | TS | ✅ | | JSON | ✅ | | Android | ❌ | | IOS | ❌ | | Flutter | ❌ | | React Native | 💡 | | TailwindCSS | 🫂 |

⚠️ 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;
}