Getting Started

Welcome to TokiForge! This guide will help you get up and running in minutes.

What is TokiForge?

TokiForge is a modern design token and theming engine that lets you:

• Define tokens once - Use them across any framework or platform
• Switch themes instantly - Runtime theme switching without rebuilds
• Export to any format - CSS, SCSS, JS, TS, or JSON
• Stay type-safe - Full TypeScript support out of the box

Installation

Version: TokiForge v2.0.1

What's new in v2.0.1: Theme providers (React, Vue, Next, Remix) support storageKey, persist, and onThemeChange. Tailwind plugin adds baseSelector, strict, includeUtilities, excludePaths, tokens, debug, and extended themeMappings (boxShadow, lineHeight, animation). SSR options include cookieName and cookieMaxAge. See the project CHANGELOG for full details.

Core Package

npm install @tokiforge/core@^2.0.1

Framework Adapters

Choose your framework:

# React
npm install @tokiforge/react@^2.0.1

# Vue
npm install @tokiforge/vue@^2.0.1

# Angular
npm install @tokiforge/angular@^2.0.1

# Svelte
npm install @tokiforge/svelte@^2.0.1

CLI Tool

npm install -g tokiforge-cli@^2.0.1
# or
npx tokiforge-cli@^2.0.1 init

Quick Example

1. Define Your Tokens

Create a tokens.json file:

{
  "color": {
    "primary": { "value": "#7C3AED", "type": "color" },
    "accent": { "value": "#06B6D4", "type": "color" },
    "text": {
      "primary": { "value": "#1F2937", "type": "color" },
      "secondary": { "value": "#6B7280", "type": "color" }
    }
  },
  "radius": {
    "sm": { "value": "4px", "type": "dimension" },
    "lg": { "value": "12px", "type": "dimension" }
  }
}

2. Use in Your App

React:

import { ThemeProvider, useTheme } from "@tokiforge/react";

const themeConfig = {
  themes: [
    { name: "light", tokens: tokens },
    { name: "dark", tokens: darkTokens },
  ],
  defaultTheme: "light",
};

function App() {
  return (
    <ThemeProvider config={themeConfig}>
      <Button />
    </ThemeProvider>
  );
}

function Button() {
  const { tokens, setTheme } = useTheme();
  return (
    <button
      style={{
        backgroundColor: tokens.color.primary,
        borderRadius: tokens.radius.lg,
      }}
      onClick={() => setTheme("dark")}
    >
      Switch Theme
    </button>
  );
}

Vue:

<script setup>
import { provideTheme, useTheme } from "@tokiforge/vue";

provideTheme(themeConfig, {
  mode: "static", // Zero JS overhead
  persist: true,
});
const { tokens, setTheme } = useTheme();
</script>

<template>
  <button
    :style="{
      backgroundColor: tokens.color.primary,
      borderRadius: tokens.radius.lg,
    }"
    @click="setTheme('dark')"
  >
    Switch Theme
  </button>
</template>

Angular:

import { Component, OnInit, inject } from "@angular/core";
import { ThemeService } from "@tokiforge/angular";

@Component({
  selector: "app-root",
  template: `
    <button
      [style.backgroundColor]="themeService.tokens().color?.primary?.value"
      (click)="themeService.setTheme('dark')"
    >
      Switch Theme
    </button>
  `,
})
export class AppComponent implements OnInit {
  themeService = inject(ThemeService);

  ngOnInit() {
    this.themeService.init(themeConfig, {
      mode: "static", // Zero JS overhead
      persist: true,
    });
  }
}

Svelte:

<script>
import { createThemeStore } from '@tokiforge/svelte';

const themeStore = createThemeStore(themeConfig);
</script>

<button
  style="background-color: var(--hf-color-primary); border-radius: var(--hf-radius-lg);"
  on:click={() => themeStore.setTheme('dark')}
>
  Switch Theme
</button>

Next Steps

• Read the Installation Guide for detailed setup
• Check out Framework Guides for framework-specific instructions
• Explore Examples to see TokiForge in action
• Learn about Core Concepts to understand how it works