# 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:

```bash
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](#CSS)                 | ✅     |
| [SCSS](#SCSS)               | ✅     |
| [JS](#JS)                   | ✅     |
| [TS](#TS)                   | ✅     |
| [JSON](#JSON)               | ✅     |
| _Android_                   | ❌     |
| _IOS_                       | ❌     |
| _Flutter_                   | ❌     |
| _React Native_              | 💡     |
| [TailwindCSS](#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](#js) and [TS](#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

```css
@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.

```scss
@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.

```js
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.

```ts
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.

```js
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_:

```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;
}
```