Configuration

Buoy uses a buoy.config.mjs file in your project root. Most settings are auto-detected, but you can customize everything.

Quick Start

npx @buoy-design/cli init

This generates a config based on your detected frameworks.

Config File

// buoy.config.mjs
export default {
  // Source scanning
  sources: {
    react: { enabled: true },
    vue: { enabled: false },
    svelte: { enabled: false },
    angular: { enabled: false },
    tailwind: { enabled: true },
  },

  // File patterns
  include: ['src/**/*.{tsx,jsx,vue,svelte,css,scss}'],
  exclude: ['node_modules', 'dist', 'build', '**/*.test.*'],

  // Design tokens reference
  tokens: {
    file: 'design-tokens.json',  // Local file
    // OR
    figma: {
      fileId: 'your-figma-file-id',
      accessToken: process.env.FIGMA_TOKEN,
    },
  },

  // Health thresholds
  thresholds: {
    minScore: 70,           // Minimum passing score
    maxHardcoded: 10,       // Max allowed hardcoded values
  },

  // Output settings
  output: {
    format: 'table',        // 'table' | 'json' | 'markdown'
  },
}

Source Options

React

sources: {
  react: {
    enabled: true,
    include: ['src/**/*.tsx', 'src/**/*.jsx'],
    extractInlineStyles: true,
    extractStyledComponents: true,
  },
}

Tailwind

sources: {
  tailwind: {
    enabled: true,
    config: 'tailwind.config.js',     // Path to config
    detectArbitrary: true,            // Flag arbitrary values like [#fff]
  },
}

Vue / Svelte / Angular

sources: {
  vue: {
    enabled: true,
    include: ['src/**/*.vue'],
    extractScopedStyles: true,
  },
  svelte: {
    enabled: true,
    include: ['src/**/*.svelte'],
  },
  angular: {
    enabled: true,
    include: ['src/**/*.component.ts'],
  },
}

Token Configuration

Local Token File

tokens: {
  file: 'design-tokens.json',
}

Supports JSON (W3C format), CSS, and SCSS files.

Figma Integration

tokens: {
  figma: {
    fileId: 'abc123xyz',
    accessToken: process.env.FIGMA_TOKEN,
    // Optional: specific pages/frames
    pages: ['Design Tokens'],
  },
}

See Figma Integration for setup.

Threshold Configuration

thresholds: {
  minScore: 70,            // CI fails below this score
  maxHardcoded: 10,        // Max hardcoded values allowed
  maxCloseMatches: 0,      // Zero tolerance for typos
}

Environment Variables

Variable Description
FIGMA_TOKEN Figma API access token
GITHUB_TOKEN GitHub token for PR comments
BUOY_STRICT Enable strict mode (1 = enabled)

Ignoring Files

Add patterns to exclude:

exclude: [
  'node_modules',
  'dist',
  'build',
  '**/*.test.*',
  '**/*.stories.*',
  'src/legacy/**',      // Ignore legacy code
]

Inline Ignores

Ignore specific lines in your code:

// buoy-ignore-next-line
const specialColor = '#custom123';

/* buoy-ignore */
const legacyStyles = {
  padding: '13px',
  color: '#abc123',
};

Related