Welcome to the Bluefly.io code repository. By logging in, you agree to comply with our terms of service and code of conduct.

Skip to content

Extract Design Tokens to JSON/YAML Data Files

Objective

Convert design token markdown documentation into machine-readable JSON/YAML data files that can be consumed programmatically.

Tasks

Color Tokens

  • Extract color palette from `branding/foundations/color.md`
  • Create `src/tokens/colors.json`
  • Include: primary, secondary, semantic (success, warning, error, info), neutral scales
  • Add hex values, RGB, HSL variants
  • Include WCAG contrast ratios

Typography Tokens

  • Extract from `branding/foundations/typography.md`
  • Create `src/tokens/typography.json`
  • Include: font families, sizes, weights, line heights, letter spacing
  • Add responsive scale (xs to 5xl)
  • Platform-specific variants (web, iOS, Android)

Spacing Tokens

  • Extract from `branding/foundations/layout.md`
  • Create `src/tokens/spacing.json`
  • Include: base unit, scale (xs to 5xl)
  • Grid system specifications
  • Breakpoints for responsive design

Motion/Animation Tokens

  • Extract from `branding/foundations/motion.md`
  • Create `src/tokens/motion.json`
  • Include: duration (fast, normal, slow), easing functions
  • Transition presets

Icon Tokens

  • Extract from `branding/foundations/icons.md`
  • Create `src/tokens/icons.json`
  • Include: icon names, categories, sizes
  • SVG paths or references

Token File Structure

```json { "": "./token.schema.json", "version": "1.0.0", "colors": { "primary": { "50": "#e3f2fd", "100": "#bbdefb", "500": "#2196f3", "900": "#0d47a1" }, "semantic": { "success": "#4caf50", "warning": "#ff9800", "error": "#f44336" } } } ```

Create Schema Validation

  • Create `src/tokens/token.schema.json` for validation
  • Validate all token files against schema
  • Add validation to CI pipeline

Keep in Repository

  • Token data files (JSON/YAML)
  • Schema definitions
  • Short README with usage examples
  • Brand validator script

Move to Wiki

  • Narrative documentation (how to use, why these values)
  • Design philosophy
  • Implementation guides

Export Formats

  • JSON (for JavaScript/TypeScript)
  • YAML (for configuration)
  • CSS custom properties
  • SCSS variables
  • iOS Swift (optional)
  • Android XML (optional)

Related

  • Epic: #1
  • Previous: #6 (migrate docs to wiki)
  • Next: #8 (create npm package)
  • Blocks: #8 (package needs tokens)

Rationale

  • Machine-readable tokens can be consumed by applications
  • Version-controlled in code
  • Single source of truth for design values
  • Can generate multiple output formats
  • Wiki provides human-friendly documentation