Figma sync: design update (node 6:513)

[Wigwamwam]

Design Update

Triggered by: @george Wiggin

View in Figma

What changed

Perfect! The build is successful. Now let me create a summary of the changes I made:

Summary

I've successfully implemented the Figma design for node 6:513 (organism/dashboard-bar-chart). The design was already implemented in the existing GraphHeader and GraphVisualisation components, so I only needed to create a minimal wrapper component to complete the implementation.

Changes Made:

1. Created DashboardBarChart.tsx - A new wrapper component that combines GraphHeader and GraphVisualisation into a complete card component with:

   • White background using --mcp-color-surface-primary-light
   • 16px border radius using --sds-size-radius-400
   • Drop shadow using --sds-effects-shadows-drop-shadow-600
   • 560px fixed width
   • Proper layout structure

2. Created dashboard-bar-chart.css - Styling file using only design tokens from theme.css (no hardcoded values)

3. Updated src/ui/compositions/index.ts - Added export for the new DashboardBarChart component

4. Updated src/figma/compositions/DashboardBarChart.figma.tsx - Added Code Connect mapping for node 6:513 linking the Figma design to the new React component

Build Verification:

✅ Build completed successfully with no errors

The implementation follows all the rules:

• Made the smallest possible changes
• Used design tokens from theme.css (no hardcoded values)
• Only created what was necessary for the design change
• Verified the build passes