Style Dictionary v4 + W3C DTCG로 웹·iOS·Android 디자인 토큰 파이프라인 한 번에 구축하기

{
  "color": {
    "brand": {
      "primary": {
        "$value": "#0055FF",
        "$type": "color",
        "$description": "브랜드 주 색상"
      }
    }
  },
  "size": {
    "spacing": {
      "sm": { "$value": "8px", "$type": "dimension" },
      "md": { "$value": "16px", "$type": "dimension" }
    }
  }
}

design-tokens/
├── tokens/
│   ├── color.tokens.json
│   ├── spacing.tokens.json
│   └── typography.tokens.json
├── config.mjs
├── package.json
└── dist/
    ├── web/variables.css
    ├── ios/StyleDictionary.swift
    └── android/res/values/colors.xml

{
  "color": {
    "brand": {
      "primary":   { "$value": "#0055FF", "$type": "color" },
      "secondary": { "$value": "#FF6B00", "$type": "color" }
    },
    "neutral": {
      "100": { "$value": "#F5F5F5", "$type": "color" },
      "900": { "$value": "#1A1A1A", "$type": "color" }
    }
  }
}

export default {
  source: ['tokens/**/*.tokens.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'dist/web/',
      files: [{
        destination: 'variables.css',
        format: 'css/variables'
      }]
    },
    ios: {
      transformGroup: 'ios-swift',
      buildPath: 'dist/ios/',
      files: [{
        destination: 'StyleDictionary.swift',
        format: 'ios-swift/class.swift'
      }]
    },
    android: {
      transformGroup: 'android',
      buildPath: 'dist/android/res/values/',
      files: [
        { destination: 'colors.xml', format: 'android/colors' },
        { destination: 'dimens.xml', format: 'android/dimens' }
      ]
    }
  }
};

{
  "scripts": {
    "build": "style-dictionary build --config config.mjs"
  },
  "devDependencies": {
    "style-dictionary": "^4.0.0"
  }
}

/* dist/web/variables.css */
:root {
  --color-brand-primary: #0055FF;
  --color-brand-secondary: #FF6B00;
}

// dist/ios/StyleDictionary.swift
// iOS 팀에서 출력 타입 검토를 권장합니다. SwiftUI 기반 프로젝트라면 Color 타입으로의 출력도 고려해보시면 좋습니다.
public class StyleDictionary {
  public static let colorBrandPrimary = UIColor(
    red: 0.00, green: 0.33, blue: 1.00, alpha: 1
  )
  public static let colorBrandSecondary = UIColor(
    red: 1.00, green: 0.42, blue: 0.00, alpha: 1
  )
}

<!-- dist/android/res/values/colors.xml -->
<!-- Android 팀에서 ARGB 포맷 및 리소스 네이밍 검토를 권장합니다 -->
<resources>
  <color name="color_brand_primary">#FF0055FF</color>
  <color name="color_brand_secondary">#FFFF6B00</color>
</resources>

{
  "palette": {
    "blue": {
      "500": { "$value": "#0055FF", "$type": "color" },
      "600": { "$value": "#0044CC", "$type": "color" }
    },
    "gray": {
      "50":  { "$value": "#FAFAFA", "$type": "color" },
      "950": { "$value": "#0A0A0A", "$type": "color" }
    }
  }
}

{
  "color": {
    "background": {
      "default":  { "$value": "{palette.gray.50}",  "$type": "color" },
      "surface":  { "$value": "#FFFFFF",             "$type": "color" }
    },
    "action": {
      "primary":  { "$value": "{palette.blue.500}",  "$type": "color" }
    }
  }
}

{
  "color": {
    "background": {
      "default":  { "$value": "{palette.gray.950}", "$type": "color" },
      "surface":  { "$value": "#1C1C1C",            "$type": "color" }
    },
    "action": {
      "primary":  { "$value": "{palette.blue.600}", "$type": "color" }
    }
  }
}

import StyleDictionary from 'style-dictionary';
 
const baseConfig = {
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'dist/web/'
    }
  }
};
 
const lightSD = new StyleDictionary({
  ...baseConfig,
  source: [
    'tokens/primitive.tokens.json',
    'tokens/semantic-light.tokens.json'
  ],
  platforms: {
    css: {
      ...baseConfig.platforms.css,
      files: [{
        destination: 'theme-light.css',
        format: 'css/variables',
        options: { selector: ':root, [data-theme="light"]' }
      }]
    }
  }
});
 
const darkSD = new StyleDictionary({
  ...baseConfig,
  source: [
    'tokens/primitive.tokens.json',
    'tokens/semantic-dark.tokens.json'
  ],
  platforms: {
    css: {
      ...baseConfig.platforms.css,
      files: [{
        destination: 'theme-dark.css',
        format: 'css/variables',
        options: { selector: '[data-theme="dark"]' }
      }]
    }
  }
});
 
await lightSD.buildAllPlatforms();
await darkSD.buildAllPlatforms();

/* dist/web/theme-light.css */
:root, [data-theme="light"] {
  --color-background-default: #FAFAFA;
  --color-background-surface: #FFFFFF;
  --color-action-primary: #0055FF;
}

/* dist/web/theme-dark.css */
[data-theme="dark"] {
  --color-background-default: #0A0A0A;
  --color-background-surface: #1C1C1C;
  --color-action-primary: #0044CC;
}

# .github/workflows/tokens.yml
name: Build & Publish Design Tokens
 
on:
  push:
    paths:
      - 'tokens/**/*.tokens.json'
    branches:
      - main
 
jobs:
  build-and-publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: pnpm/action-setup@v3
        with:
          version: 9
 
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          registry-url: 'https://registry.npmjs.org'
 
      - run: pnpm install
 
      - name: Build tokens
        run: pnpm build
 
      - name: Bump version (patch)
        run: npm version patch --no-git-tag-version
 
      - name: Publish to npm
        run: pnpm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}