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

Update All Projects Consuming Design Tokens

Objective

Update all projects across the monorepo that use design tokens to import from @bluefly/technical-guide instead of hardcoded values.

Projects to Audit and Update

common_npm Packages

  • agent-brain - Check for design values
  • agent-chat - Update UI components
  • agent-docker - Check dashboards
  • agent-mesh - Update visualization UI
  • agent-ops - Update dashboard components
  • agent-protocol - Check for any UI elements
  • agent-studio - Update studio interface
  • agent-tracer - Update tracer UI
  • agentic-flows - Update flow visualization
  • compliance-engine - Update compliance dashboard
  • doc-engine - Update documentation UI
  • foundation-bridge - Check for design values
  • rfp-automation - Update RFP interfaces
  • workflow-engine - Update workflow UI

Model Projects

  • agent-studio_model - Check UI components
  • civicpolicy_model - Check dashboard
  • gov-rfp_model - Update RFP interface
  • llm-platform_model - Check Drupal theme integration

Each Project Updates

```typescript // 1. Add dependency // package.json { "dependencies": { "@bluefly/technical-guide": "^1.0.0" } }

// 2. Replace hardcoded values // Before const primaryColor = '#0066CC'; const fontSize = '16px';

// After import { colors, typography } from '@bluefly/technical-guide/tokens'; const primaryColor = colors.primary[600]; const fontSize = typography.sizes.md;

// 3. Update config files // tailwind.config.js, theme files, etc. import { colors, spacing } from '@bluefly/technical-guide/tokens'; export default { theme: { colors, spacing } }; ```

Search and Replace Patterns

  • Find all hardcoded hex colors
  • Find all hardcoded font sizes
  • Find all hardcoded spacing values
  • Find all hardcoded animation durations
  • Replace with technical-guide imports

Validation

  • Add CI check for hardcoded design values
  • Ensure all projects build successfully
  • Visual regression tests pass
  • No breaking changes in UI

Automation

```bash

Scan for hardcoded values

buildkit audit design-tokens --workspace .

Auto-fix where possible

buildkit audit design-tokens --fix --workspace . ```

Testing Strategy

  • Build all projects
  • Run visual regression tests
  • Check for breaking changes
  • Verify token values match

Migration Checklist per Project

  • Install @bluefly/technical-guide dependency
  • Identify hardcoded design values
  • Replace with token imports
  • Update configuration files
  • Run tests
  • Visual verification
  • Update documentation

Common Files to Check

  • `tailwind.config.js` / `tailwind.config.ts`
  • `theme.ts` / `theme.js`
  • Component style files
  • CSS/SCSS variable files
  • Design system configuration

Related

  • Epic: #1
  • Depends on: #7 (design tokens), #8 (npm package)
  • Blocks: #13 (CI/CD updates)

Success Criteria

  • ✅ All projects use @bluefly/technical-guide for design tokens
  • ✅ No hardcoded color values
  • ✅ No hardcoded typography values
  • ✅ No hardcoded spacing values
  • ✅ All projects build successfully
  • ✅ Visual regression tests pass
  • ✅ CI enforces token usage