Tokens to Code

{
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#0066FF",
      "$description": "Primary brand color"
    },
    "danger": {
      "$type": "color",
      "$value": "#FF3B30"
    }
  },
  "spacing": {
    "sm": { "$type": "spacing", "$value": "8px" },
    "md": { "$type": "spacing", "$value": "16px" },
    "lg": { "$type": "spacing", "$value": "24px" }
  },
  "typography": {
    "heading": {
      "xl": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{fontFamily.sans}",
          "fontWeight": "{fontWeight.bold}",
          "fontSize": "{fontSize.3xl}",
          "lineHeight": "{lineHeight.relaxed}"
        },
        "$description": "Extra large heading"
      }
    }
  }
}

:root {
  /* Primary brand color */
  --color-primary: #0066FF;
  --color-danger: #FF3B30;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  /* Extra large heading */
  --typography-heading-xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-relaxed) var(--font-family-sans);
}

:root {
  /* Primary brand color */
  --ds-color-primary: #0066FF;
  --ds-color-danger: #FF3B30;
  --ds-spacing-sm: 8px;
  --ds-spacing-md: 16px;
  --ds-spacing-lg: 24px;
  /* Extra large heading */
  --ds-typography-heading-xl: 700 30px/24px Inter;
}

import SwiftUI

// MARK: - Colors

extension Color {
    /// Primary brand color
    static let colorPrimary = Color(red: 0, green: 0.4, blue: 1, opacity: 1)
    static let colorDanger = Color(red: 1, green: 0.2314, blue: 0.1882, opacity: 1)
}

// MARK: - Spacing

enum Spacing {
    static let sm: CGFloat = 8
    static let md: CGFloat = 16
    static let lg: CGFloat = 24
}

// MARK: - Typography

extension Font {
    /// Extra large heading
    /// @ref {fontFamily.sans}, {fontWeight.bold}, {fontSize.3xl}, {lineHeight.relaxed}
    static let typographyHeadingXl: Font = .system(size: 30, weight: .bold)
}

package design.tokens

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight

/** Primary brand color */
object DSColors {
    val ColorPrimary = Color(0xFF0066FF)
    val ColorDanger = Color(0xFFFF3B30)
}

object DSSpacing {
    val Sm = 8.dp
    val Md = 16.dp
    val Lg = 24.dp
}

object DSTypography {
    /** Extra large heading */
    val HeadingXl = TextStyle(
        fontSize = 30.sp,
        fontWeight = FontWeight(700),
        fontFamily = sans
    )
}

--color-text-primary: var(--color-brand-primary);
--typography-heading-xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-relaxed) var(--font-family-sans);

--color-text-primary: #0066FF;
--typography-heading-xl: 700 30px/24px Inter;

static let primary = Color(red: 0, green: 0.4, blue: 1, opacity: 1)

/// @ref {color.brand.primary}
static let primary = colorBrandPrimary    // ← direct reference to constant

/* box-shadow */
--effects-card: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.5);
/* filter */
--effects-card-blur: blur(2px);
/* backdrop-filter */
--effects-card-backdrop-blur: blur(20px);

.card {
  box-shadow: var(--effects-card);
  filter: var(--effects-card-blur);
  backdrop-filter: var(--effects-card-backdrop-blur);
}

--effects-card: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.5);

/* Primary brand color */
--color-primary: #0066FF;

/// Primary brand color
static let colorPrimary = Color(red: 0, green: 0.4, blue: 1, opacity: 1)

/** Primary brand color */
val ColorPrimary = Color(0xFF0066FF)

{
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#0066FF",
      "$extensions": {
        "figma.codeSyntax": {
          "Web": "var(--color-primary)",
          "iOS": "Color.primary",
          "Android": "@color/primary"
        }
      }
    }
  }
}

{
  "spacing": {
    "base": { "$type": "spacing", "$value": "4px" },
    "sm": { "$type": "spacing", "$value": "{spacing.base} * 2" },
    "md": { "$type": "spacing", "$value": "{spacing.base} * 4" },
    "lg": { "$type": "spacing", "$value": "{spacing.base} * 6" }
  }
}

:root {
  --spacing-base: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
}

npx tsx src/cli.ts --composition=path/to/button.json --output=./components

<template>
  <button
    :class="[$style['btn'], variantClass, sizeClass,
             { [$style['btn--disabled']]: disabled }]"
    :disabled="disabled || undefined"
  >
    <WIcon v-if="isIconLeft" :class="$style['btn-icon-left']" :name="iconLeft" />
    <span :class="$style['btn-label']">{{ label }}</span>
  </button>
</template>

<script setup lang="ts">
import { computed, useCssModule } from 'vue'

type Props = {
  variant?: 'accent' | 'secondary' | 'tertiary'
  size?: 'sm' | 'md' | 'lg'
  label?: string
  isIconLeft?: boolean
  iconLeft?: string
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'accent',
  size: 'sm',
  label: 'Button',
  isIconLeft: false,
  iconLeft: '',
  disabled: false,
})

const $style = useCssModule()

const variantClass = computed(() => {
  const map: Record<NonNullable<Props['variant']>, string> = {
    'accent': $style['btn--accent'],
    'secondary': $style['btn--secondary'],
    'tertiary': $style['btn--tertiary'],
  }
  return map[props.variant ?? 'accent']
})
</script>

<style module>
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: var(--accent-medium);
}

.btn--accent { background-color: var(--info-medium); }
.btn:hover { opacity: 0.88; }
.btn--disabled, .btn:disabled { opacity: 0.4; pointer-events: none; }
</style>

cd Transformer
npm install

# Run with config
npx tsx src/cli.ts --config=sxl-transform.config.json

# Generate default config
npx tsx src/cli.ts --init

# Vue 3 from Composition
npx tsx src/cli.ts --composition=path/to/component.json --output=./output

{
  "source": {
    "tokenDir": "./tokens",
    "configFile": "config.json",
    "include": ["core/*.json", "themes/*.json"],
    "exclude": ["config.json", "**/diff-id*.json"]
  },
  "platforms": {
    "css": {
      "outputDir": "./dist/css",
      "prefix": "ds",
      "resolveAliases": false,
      "splitEffects": true,
      "showDescriptions": true,
      "fileMapping": [
        {
          "sources": ["core/*.json"],
          "output": "primitives.css",
          "filter": {
            "types": ["color", "dimension"],
            "paths": ["color."],
            "excludePaths": ["color.internal."]
          }
        },
        {
          "sources": ["themes/light.json"],
          "output": "themes/light.css"
        }
      ]
    },
    "swiftui": {
      "outputDir": "./dist/ios",
      "prefix": "DS",
      "resolveAliases": true,
      "showDescriptions": true,
      "fileMapping": [
        {
          "sources": ["core/*.json"],
          "output": "DSTokens.swift"
        }
      ]
    },
    "kotlin": {
      "outputDir": "./dist/android",
      "prefix": "DS",
      "resolveAliases": true,
      "showDescriptions": true,
      "fileMapping": [
        {
          "sources": ["core/*.json"],
          "output": "DSTokens.kt"
        }
      ]
    }
  },
  "settings": {
    "remBase": 16,
    "verbose": false
  }
}

{
  "sources": ["core/palette.json", "themes/light.json"],
  "output": "core.css",
  "filter": {
    "types": ["color", "dimension"],
    "paths": ["color.primary"],
    "excludePaths": ["color.internal"]
  }
}