Global Form Styling System Documentation

Overview

The global form styling system allows users to set consistent styling across all form inputs at the form level, while still maintaining the ability to override styles on individual inputs.

Architecture

1. Style Hierarchy

Form Global Styles (lowest priority)
  ↓
Individual Input Styles (highest priority)

Individual input styles will always override global form styles when specified.

2. CSS Class Structure

All form inputs share the common class form-input which makes global styling straightforward:

<div class="form-input ft1">  <!-- Text input -->
<div class="form-input fa1">  <!-- Textarea input -->
<div class="form-input fp1">  <!-- Phone input -->
<div class="form-input fd1">  <!-- Date input -->

3. Global Style Categories

Layout Card

• Background Color: Applied to .form-input
• Border: Style, width, color applied to .form-input-field
• Border Radius: Applied to .form-input-field
• Box Shadow: Applied to .form-input-field
• Font Family: Applied to .form-input-field
• Text Color: Applied to .form-input-field
• Font Size: Applied to .form-input-field
• Text Alignment: Applied to .form-input-field

State-based Cards

• Hover States: :hover pseudo-classes
• Focus States: :focus pseudo-classes
• Disabled States: :disabled pseudo-classes

Implementation Plan

Step 1: Add Global Style Properties to Form Defaults

Add new properties to formDefaults in defaults.ts:

globalInputStyling: {
  layout: {
    backgroundColor: '',
    borderStyle: borderStyleDefaults(),
    borderRadius: '4px',
    boxShadow: '',
    fontFamily: 'Arial',
    textColor: '#000000',
    fontSize: '16px',
    textAlign: 'left'
  },
  states: {
    hover: {
      backgroundColor: '',
      borderColor: '',
      textColor: ''
    },
    focus: {
      backgroundColor: '',
      borderColor: '',
      textColor: '',
      boxShadow: ''
    },
    disabled: {
      backgroundColor: '#f5f5f5',
      borderColor: '#cccccc',
      textColor: '#999999'
    }
  }
}

Step 2: Update FormConfiguration.vue UI

Add new configuration cards:

• Global Layout Card: Basic styling options
• Hover States Card: Hover-specific styling
• Focus States Card: Focus-specific styling
• Disabled States Card: Disabled-specific styling

Step 3: Update CreativeFormBlock.vue

Generate dynamic CSS styles based on global form styling properties and inject them into the component.

Step 4: CSS Generation Logic

Create computed property that generates CSS rules:

.form-input {
  background-color: [globalInputStyling.layout.backgroundColor];
}

.form-input-field {
  border: [globalInputStyling.layout.borderStyle];
  border-radius: [globalInputStyling.layout.borderRadius];
  font-family: [globalInputStyling.layout.fontFamily];
  color: [globalInputStyling.layout.textColor];
  font-size: [globalInputStyling.layout.fontSize];
  text-align: [globalInputStyling.layout.textAlign];
}

.form-input-field:hover {
  background-color: [globalInputStyling.states.hover.backgroundColor];
  border-color: [globalInputStyling.states.hover.borderColor];
  color: [globalInputStyling.states.hover.textColor];
}

.form-input-field:focus {
  background-color: [globalInputStyling.states.focus.backgroundColor];
  border-color: [globalInputStyling.states.focus.borderColor];
  color: [globalInputStyling.states.focus.textColor];
  box-shadow: [globalInputStyling.states.focus.boxShadow];
}

.form-input-field:disabled {
  background-color: [globalInputStyling.states.disabled.backgroundColor];
  border-color: [globalInputStyling.states.disabled.borderColor];
  color: [globalInputStyling.states.disabled.textColor];
}

Benefits

1. Consistency: All inputs get consistent styling automatically
2. Efficiency: Style once, apply to all inputs
3. Flexibility: Individual inputs can still override global styles
4. Maintainability: Centralized styling management
5. User Experience: Simplified configuration workflow

Future Enhancements

• Style Presets: Pre-defined style themes
• Advanced States: Invalid, valid, loading states
• Animation Support: Transition effects between states
• Responsive Styling: Different styles for different screen sizes