unocss-preset-token

Preset to convert data from Design Token Plugin to Figma in theme to UnoCSS

🚀 Usage

• PNPM

pnpm i -D @afordin/unocss-preset-token

• NPM

npm i -D @afordin/unocss-preset-token

• Yarn

yarn add -D @afordin/unocss-preset-token

---

// unocss.config.js
import { defineConfig } from 'unocss';
import presetToken from '@afordin/unocss-preset-token';

export default defineConfig({
  presets: [
    presetToken({
      divider: '-',
      tokens: {},
    }),
  ],
});

Options

export interface PresetTokenOptions {
  /**
   * Separation character for classes
   */
  divider?: '-' | '_' | '.';

  /**
   * Design Tokens Information
   */
  tokens: Record<string, any>;
}

divider

The character to separate naming class, default is -

// Tokens information
{
  "color": {
    "primary": {
      "description": "Primary color",
      "type": "color",
      "value": "#ff7a5cff",
      "blendMode": "normal"
    }
  }
}

The class naming in theme with divider default, color-primary

<div class="bg-color-primary" />

tokens

The token structure is based on the Figma Design Token plugin.

Theme tokens are based on the types of tokens handled by the plugin

// Tokens information
{
  "color": {
    "primary": {
      "description": "Primary color",
      "type": "color",
      "value": "#ff7a5cff",
      "blendMode": "normal"
    }
  },
  "secondary": {
    "description": "Secondary color",
    "type": "color",
    "value": "#ffc9d9ff",
    "blendMode": "normal"
  }
}

The classes naming in theme with divider default, color-primary and secondary

<div class="bg-color-primary" />
<div class="bg-secondary" />

🤹‍♂️ Playground

You can validate your token information in the playground

License

MIT License © 2023 jp