df-forms-preview-pack/CSS_VARIABLES.md

A comprehensive React form preview component library with form controls, validation, conditional logic, and responsive design

# CSS Variables Required for df-form-preview Package

This document lists all CSS variables that must be defined in your application for the df-form-preview package to work correctly.

## Color Variables

### Form Builder Colors
- `--df-color-fb-border`: Border color for form builder elements
- `--df-color-fb-border-hover`: Hover state border color
- `--df-color-fb-container`: Background color for containers
- `--df-color-fb-icon-bg`: Background color for icons
- `--df-color-fb-input-bg`: Background color for input fields

### Primary Colors
- `--df-color-primary`: Primary brand color
- `--df-color-primary-hover`: Primary color hover state
- `--rgba-color-primary`: Primary color in RGBA format (for box-shadow)

### Text Colors
- `--df-color-text-dark`: Dark text color
- `--df-color-text-light`: Light text color
- `--df-color-text-medium`: Medium text color

### Error Colors
- `--df-color-error-primary`: Primary error color

### Background Colors
- `--df-color-white`: White color
- `--df-color-app-background`: Application background color

## Default Values (Example)

You can define these in your root CSS/SCSS file:

```css
:root {
  /* Form Builder Colors */
  --df-color-fb-border: #e5e7eb;
  --df-color-fb-border-hover: #d1d5db;
  --df-color-fb-container: #ffffff;
  --df-color-fb-icon-bg: #f3f4f6;
  --df-color-fb-input-bg: #ffffff;
  
  /* Primary Colors */
  --df-color-primary: #303992;
  --df-color-primary-hover: #252a73;
  --rgba-color-primary: 48, 57, 146;
  
  /* Text Colors */
  --df-color-text-dark: #1f2937;
  --df-color-text-light: #6b7280;
  --df-color-text-medium: #4b5563;
  
  /* Error Colors */
  --df-color-error-primary: #ef4444;
  
  /* Background Colors */
  --df-color-white: #ffffff;
  --df-color-app-background: #f9fafb;
}

/* Dark Mode Support */
.dark,
[data-theme='dark'] {
  --df-color-fb-border: #374151;
  --df-color-fb-border-hover: #4b5563;
  --df-color-fb-container: #1f2937;
  --df-color-fb-icon-bg: #374151;
  --df-color-fb-input-bg: #1f2937;
  --df-color-text-dark: #f9fafb;
  --df-color-text-light: #9ca3af;
  --df-color-text-medium: #d1d5db;
  --df-color-app-background: #111827;
}
```

## Usage

Import this CSS file in your application before using the df-form-preview package, or define these variables in your existing theme file.