Deckbuilder MCP Server

# Migration Guide: Deckbuilder v1.4.0 This guide helps you migrate from Deckbuilder v1.3.x to v1.4.0, which includes breaking changes to the table color system. ## Breaking Changes Overview ### 🔴 **BREAKING**: Hex Colors Removed **What Changed**: Hex color codes are no longer supported in table styling **Impact**: High - affects all custom table colors **Action Required**: Replace all hex colors with HTML color names ## Required Changes ### 1. Replace Hex Colors with HTML Names **❌ Old (v1.3.x):** ```yaml custom_colors: header_bg: "#003366" # ← No longer works header_text: "#FFFFFF" # ← No longer works primary_row: "#F5F5F5" # ← No longer works alt_row: "#E8E8E8" # ← No longer works border_color: "#888888" # ← No longer works ``` **✅ New (v1.4.0):** ```yaml custom_colors: header_bg: "navy" # ← HTML color name header_text: "white" # ← HTML color name primary_row: "lightgray" # ← HTML color name alt_row: "gainsboro" # ← HTML color name border_color: "gray" # ← HTML color name ``` ### 2. Common Hex to HTML Conversions | Old Hex Code | New HTML Name | Description | |--------------|---------------|-------------| | `#000000` | `black` | Pure black | | `#FFFFFF` | `white` | Pure white | | `#FF0000` | `red` | Pure red | | `#00FF00` | `lime` | Pure green (bright) | | `#008000` | `green` | Standard green | | `#0000FF` | `blue` | Pure blue | | `#000080` | `navy` | Dark blue | | `#808080` | `gray` | Medium gray | | `#C0C0C0` | `silver` | Light gray | | `#D3D3D3` | `lightgray` | Very light gray | | `#F5F5F5` | `whitesmoke` | Off-white | | `#FFFF00` | `yellow` | Pure yellow | | `#FFA500` | `orange` | Orange | | `#800080` | `purple` | Purple | | `#FFC0CB` | `pink` | Pink | | `#A52A2A` | `brown` | Brown | ### 3. Transparency Changes **❌ Old (v1.3.x):** ```yaml custom_colors: header_bg: "rgba(0,0,0,0)" # ← No longer works ``` **✅ New (v1.4.0):** ```yaml custom_colors: header_bg: "transparent" # ← Use HTML transparent ``` ## Migration Steps ### Step 1: Identify Affected Files Search your project for hex color usage: ```bash # Find files with hex colors in table configurations grep -r "#[0-9A-Fa-f]" your-markdown-files/ grep -r "custom_colors" your-markdown-files/ ``` ### Step 2: Convert Colors For each hex color found: 1. **Find the closest HTML color name** using the conversion table above 2. **Use the HTML Colors Reference** (copied to your templates folder during `deckbuilder init`) 3. **Test the result** to ensure it looks correct ### Step 3: Update Documentation Update any documentation that references hex colors: - Internal style guides - Team documentation - Example files - Template configurations ## New Features Available ### 1. HTML Color Names (140+ colors) All standard HTML color names are now supported: ```yaml custom_colors: header_bg: "darkslateblue" header_text: "cornsilk" primary_row: "lavender" alt_row: "transparent" border_color: "mediumpurple" ``` **Full color reference**: Open `HTML_Colors_Reference.html` in your templates folder ### 2. Per-Cell Color Detection **New Feature**: Cells containing color names automatically get colored: ```yaml cell_color_mode: auto # Enable per-cell colors table_data: | | Task | Status | Priority | | Setup Database | GREEN | HIGH | # ← GREEN cell gets green background | Write Tests | YELLOW | MEDIUM | # ← YELLOW cell gets yellow background | Deploy Code | RED | HIGH | # ← RED cell gets red background ``` Perfect for status dashboards and visual indicators! ### 3. Smart Height Calculation **New Feature**: Tables automatically calculate appropriate height based on content: **Before (manual adjustment needed):** ```yaml row_height: 0.8 # Had to manually adjust table_data: | | Project | Very long description that needs more space | ``` **After (automatic):** ```yaml # Just works - no height adjustment needed! table_data: | | Project | Very long description that gets appropriate space automatically | | Short | Brief text gets compact space | ``` ## Compatibility Notes ### What Still Works - ✅ All existing table styling options (header_style, row_style, border_style) - ✅ Font size controls (header_font_size, data_font_size) - ✅ Dimension controls (table_width, column_widths) - ✅ Manual overrides (table_height, row_height) when needed ### What's Changed - 🔄 Color specification method (hex → HTML names) - 🔄 Default height calculation (fixed → smart) ### What's New - ✨ 140+ HTML color names - ✨ Transparent color support - ✨ Per-cell color detection - ✨ Smart height calculation - ✨ Interactive color reference guide ## Example Migration ### Before (v1.3.x) ```yaml --- layout: Table Only title: "Sales Report" style: dark_blue_white_text row_style: alternating_light_gray border_style: thin_gray row_height: 0.9 custom_colors: header_bg: "#1F4E79" header_text: "#FFFFFF" primary_row: "#F8F8F8" alt_row: "#E8E8E8" border_color: "#CCCCCC" table_data: | | Region | Q1 | Q2 | Q3 | | North | $125K | $132K | $145K | | South | $98K | $105K | $118K | --- ``` ### After (v1.4.0) ```yaml --- layout: Table Only title: "Sales Report" style: dark_blue_white_text row_style: alternating_light_gray border_style: thin_gray # row_height removed - smart calculation handles this custom_colors: header_bg: "darkblue" header_text: "white" primary_row: "whitesmoke" alt_row: "gainsboro" border_color: "lightgray" table_data: | | Region | Q1 | Q2 | Q3 | | North | $125K | $132K | $145K | | South | $98K | $105K | $118K | --- ``` ## Testing Your Migration ### 1. Visual Verification Generate presentations with your updated configurations and verify: - Colors look correct and match your intended design - Tables have appropriate heights without manual row_height - Text is readable with good contrast ### 2. Edge Cases to Test - Very long content in cells (should auto-expand) - Very short content (should be compact) - Mixed content lengths in same table - Transparent backgrounds work as expected ### 3. Status Tables with Per-Cell Colors If using status indicators, test the new per-cell color feature: ```yaml cell_color_mode: auto table_data: | | Task | Status | | Database Setup | GREEN | # Should show green | API Testing | YELLOW | # Should show yellow | Deployment | RED | # Should show red ``` ## Getting Help ### Resources - **HTML Colors Reference**: `HTML_Colors_Reference.html` in your templates folder - **Status Tables Guide**: [docs/howtos/status-tables.md](../howtos/status-tables.md) - **Table Styling Guide**: [docs/howtos/table-styling.md](../howtos/table-styling.md) ### Support If you encounter issues during migration: 1. Check the [troubleshooting section](../howtos/table-styling.md#troubleshooting) in the table styling guide 2. Verify color names using the HTML Colors Reference 3. Test with simple configurations first, then add complexity ## Benefits of Migration After migrating to v1.4.0, you'll enjoy: - **🎨 Intuitive Colors**: `red` instead of `#FF0000` - **🧠 Automatic Sizing**: No more manual height calculations - **🎯 Visual Status**: Color-coded status tables - **📚 Better Documentation**: Interactive color guides - **🔧 Fewer Configuration Options**: Smart defaults reduce complexity The migration effort is minimal compared to the improved user experience and new capabilities!