name: "Design System Rebrand Workflow"
description: "Complete design system rebrand from Figma full page design to Laravel design system"
version: "1.0.0"

metadata:
  category: "rebrand"
  complexity: "high"
  estimated_time: "10-15 minutes"
  prerequisites:
    - "Figma design URL (full page or style guide frame with node-id)"
    - "Figma MCP server access"
    - "Write access to sites/default/css/ directory"

variables:
  figma_url: "{figma_url}"

steps:
  # Step 1: Validate Figma URL
  - id: "validate-figma-url"
    name: "Validate Figma URL"
    type: "validation"
    required: true
    validation:
      checks:
        - pattern: "figma\\.com/design/[^/]+"
          value: "{figma_url}"
          error_message: "Must provide a valid Figma design URL"
      on_failure:
        action: "stop"
        message: "❌ Invalid Figma URL. Please provide a valid Figma design URL (can include node-id for style guide frames)."

  # Step 2: Extract Design Tokens from Figma
  - id: "extract-design-tokens"
    name: "Extract Design Tokens from Figma (COMPREHENSIVE)"
    type: "workflow"
    depends_on: ["validate-figma-url"]
    workflow:
      track_with_todo: true
      # CRITICAL: Extract ALL design tokens, not just primary values
      actions:
        - "Use Figma MCP get_code on typography section to extract ALL font families (2-3 expected)"
        - "Identify Display font (e.g., IvyMode, Playfair), Primary/Body font (e.g., Jost, Inter), Secondary/Accent font (e.g., Manrope)"
        - "Use Figma MCP get_code on colors section to extract COMPLETE palette (minimum 8-12 colors)"
        - "Extract primary colors, support/background colors, accent colors, text colors, alert colors"
        - "Use Figma MCP get_code on input/form components to extract component-specific styling"
        - "Document input background color, border radius, height, padding, label font size"
        - "Extract spacing scale and general border radius values"
        - "VALIDATION: Confirm 2-3 distinct font families found"
        - "VALIDATION: Confirm 8+ distinct colors extracted"
        - "VALIDATION: Form styling completely documented"

  # Step 3: Update variables.less
  - id: "update-variables-less"
    name: "Update Design System Variables"
    type: "conversion"
    depends_on: ["extract-design-tokens"]
    conversion:
      input_pattern: "sites/default/css/variables.less"
      output_patterns: ["sites/default/css/variables.less"]
      conversion_type: "design_tokens_to_variables"
      operations:
        - "Update color variables from Figma palette"
        - "Update spacing scale values"
        - "Update border radius values"
        - "Add design system status comment: // DESIGN SYSTEM STATUS: figma-rebranded"
        - "Ensure NO font variables are added (they belong in font.less)"

  # Step 4: Update font.less
  - id: "update-font-less"
    name: "Update Font System (ALL FONTS)"
    type: "conversion"
    depends_on: ["extract-design-tokens"]
    conversion:
      input_pattern: "sites/default/css/base/font.less"
      output_patterns: ["sites/default/css/base/font.less"]
      conversion_type: "fonts_to_less"
      operations:
        - "CRITICAL: Define ALL fonts from style guide (typically 2-3 fonts)"
        - "Add @display_font for large headings (e.g., IvyMode, Playfair)"
        - "Replace @primary_font with Figma primary UI font (e.g., Jost, Inter)"
        - "Replace @body_font with Figma body font (typically same as primary)"
        - "Replace @secondary_font with Figma secondary/accent font (e.g., Manrope)"
        - "Remove ALL old font references (Barlow, Montserrat, etc.)"
        - "Add design system status comment"
        - "VALIDATION: Confirm all 3 font variables defined with fallbacks"

  # Step 5: Update typography.less
  - id: "update-typography-less"
    name: "Update Typography System"
    type: "conversion"
    depends_on: ["update-font-less"]
    conversion:
      input_pattern: "sites/default/css/base/typography.less"
      output_patterns: ["sites/default/css/base/typography.less"]
      conversion_type: "typography_system_update"
      operations:
        - "Ensure headings use var(--secondary_font) instead of @secondary_font"
        - "Update font sizes to match Figma typography scale"
        - "Update line heights and letter spacing"
        - "Add design system status comment"

  # Step 6: Update buttons.less
  - id: "update-buttons-less"
    name: "Update Button System"
    type: "conversion"
    depends_on: ["update-variables-less"]
    conversion:
      input_pattern: "sites/default/css/base/buttons.less"
      output_patterns: ["sites/default/css/base/buttons.less"]
      conversion_type: "button_system_update"
      operations:
        - "Update button colors from new color palette"
        - "Update button border radius from new values"
        - "Ensure uses var(--primary_font) for button text"
        - "Add design system status comment"

  # Step 7: Update _form_variables.less
  - id: "update-form-variables-less"
    name: "Update Form Variables (NEW - CRITICAL)"
    type: "conversion"
    depends_on: ["extract-design-tokens", "update-variables-less"]
    conversion:
      input_pattern: "sites/default/css/base/_form_variables.less"
      output_patterns: ["sites/default/css/base/_form_variables.less"]
      conversion_type: "form_variables_update"
      operations:
        - "CRITICAL: This file controls ALL form styling"
        - "Update @form_background_color (often light support color like #E7E7F3)"
        - "Update @form_border_radius (often 10-16px from Figma inputs)"
        - "Update @field_min_height (often 60-70px from Figma inputs)"
        - "Update @form_padding_top_bottom and @form_padding_sides (often 20px/26px)"
        - "Update @form_font_size and @label_font_size (often 18px from Figma)"
        - "Update @form_text_color and @form_icons_color to primary color"
        - "Update @form_border_width (often 0px for borderless inputs)"
        - "Update @form_highlight_color for focus states"
        - "Add design system status comment"
        - "VALIDATION: Form variables reflect Figma component styling"

  # Step 8: Update form.less
  - id: "update-form-less"
    name: "Update Form System"
    type: "conversion"
    depends_on: ["update-form-variables-less", "update-font-less"]
    conversion:
      input_pattern: "sites/default/css/base/form.less"
      output_patterns: ["sites/default/css/base/form.less"]
      conversion_type: "form_system_update"
      operations:
        - "Update input background: background: var(--form_background_color);"
        - "Update padding to use var(--form_padding_sides) not just top/bottom"
        - "Ensure uses var(--body_font) for form text"
        - "Add design system status comment"

  # Step 9: Clean Up Duplicate Systems
  - id: "cleanup-duplicates"
    name: "Remove Duplicate Font Variables"
    type: "validation"
    depends_on: ["update-variables-less", "update-font-less"]
    validation:
      checks:
        - file: "sites/default/css/variables.less"
          not_contains: ["@primary_font", "@body_font", "@secondary_font", "@display_font"]
          error_message: "Font variables found in variables.less - they should only be in font.less"
        - file: "sites/default/css/base/font.less"
          contains: ["@primary_font", "@body_font", "@secondary_font"]
          error_message: "Missing required font variables in font.less"
      on_failure:
        action: "continue"
        message: "⚠️ Duplicate font system detected. Cleaning up..."
        auto_fix: true

  # Step 10: Validate Design System Integration
  - id: "validate-design-system"
    name: "Validate Complete Design System"
    type: "validation"
    depends_on: ["cleanup-duplicates"]
    validation:
      checks:
        - file: "sites/default/css/variables.less"
          contains: "// DESIGN SYSTEM STATUS: figma-rebranded"
          error_message: "Design system status not updated in variables.less"
        - file: "sites/default/css/base/font.less"
          contains: "// DESIGN SYSTEM STATUS: figma-rebranded"
          error_message: "Design system status not updated in font.less"
        - file: "sites/default/css/base/typography.less"
          contains: "// DESIGN SYSTEM STATUS: figma-rebranded"
          error_message: "Design system status not updated in typography.less"
        - file: "sites/default/css/base/buttons.less"
          contains: "// DESIGN SYSTEM STATUS: figma-rebranded"
          error_message: "Design system status not updated in buttons.less"
        - file: "sites/default/css/base/_form_variables.less"
          contains: "// DESIGN SYSTEM STATUS: figma-rebranded"
          error_message: "Design system status not updated in _form_variables.less"
        - file: "sites/default/css/base/form.less"
          contains: "// DESIGN SYSTEM STATUS: figma-rebranded"
          error_message: "Design system status not updated in form.less"
        - file: "sites/default/css/base/font.less"
          contains: ["@primary_font:", "@body_font:", "@secondary_font:"]
          error_message: "Font variables not properly defined in font.less"
        - file: "sites/default/css/variables.less"
          min_color_count: 8
          error_message: "Incomplete color palette - need minimum 8 colors"
      on_failure:
        action: "stop"
        message: "❌ Design system rebrand incomplete. Check error messages above."

  # Step 11: Build Test
  - id: "build-test"
    name: "Test Design System Build"
    type: "command"
    depends_on: ["validate-design-system"]
    command:
      commands:
        - "npm run build"
      working_directory: "."
      timeout: 120

  # Step 12: Generate Documentation
  - id: "generate-documentation"
    name: "Generate Rebrand Documentation"
    type: "workflow"
    depends_on: ["build-test"]
    workflow:
      actions:
        - "Document color palette changes"
        - "Document typography system updates"
        - "Document spacing and sizing changes"
        - "Create before/after comparison"
        - "Update design system registry"

workflow_completion:
  success_message: |
    🎉 **Design System Rebrand Complete!**

    ✅ **Updated Files (6 total):**
    - `sites/default/css/variables.less` - Complete color palette (8+ colors), spacing, borders
    - `sites/default/css/base/font.less` - All font families (2-3 fonts)
    - `sites/default/css/base/typography.less` - Heading styles
    - `sites/default/css/base/buttons.less` - Button system
    - `sites/default/css/base/_form_variables.less` - Form styling variables (NEW)
    - `sites/default/css/base/form.less` - Form implementation

    ✅ **Design System Status:** `figma-rebranded`

    🚀 **Ready for Component Extraction!**
    You can now use `/mtc-extract <figma-component-url>` to build components.

  failure_message: |
    ❌ **Design System Rebrand Failed**

    Please check the error messages above and address any issues.

    **Common Issues:**
    - ❌ Incomplete font extraction (need 2-3 font families)
    - ❌ Incomplete color palette (need minimum 8 colors)
    - ❌ Missing form variables updates
    - ❌ Invalid Figma URL format
    - ❌ Missing design tokens in Figma style guide
    - ❌ File permission issues
    - ❌ Figma MCP server not connected

    You can restart with `/mtc-rebrand <figma-url>` after fixing the problems.

validation_rules:
  - no_duplicate_fonts: true
  - all_files_updated: true
  - build_success: true
  - status_comments_added: true
  - complete_font_extraction: true  # Must extract 2-3 fonts
  - complete_color_extraction: true  # Must extract 8+ colors
  - form_variables_updated: true  # Must update _form_variables.less