# Field Color Drupal Module

## Overview

**Field Color** is a Drupal module that provides a flexible color field type for content entities. It allows editors to select and store colors using an intuitive color picker widget, supporting a wide range of color formats and internationalization. The module integrates seamlessly with Drupal's field API, offering custom formatters, validation, and theming options.

---

## Features

- **Color Field Type:** Add color fields to any entity (nodes, taxonomy, users, etc.) using the custom field type.
- **Color Picker Widget:** User-friendly color picker powered by the Spectrum JS library, supporting HEX, RGB, HSL, and more.
- **Custom Field Formatters:** Display color values in various formats and styles on the frontend.
- **Validation:** Ensure valid color input with backend validation logic.
- **Internationalization:** Spectrum color picker supports multiple languages via included i18n files.
- **Custom Styling:** Easily style the color picker and field output with included CSS.
- **Icon Support:** Visual cues for color editing in the UI.
- **Twig Templates:** Custom templates for rendering color input and display.

---

## Folder Structure

```
field_color/
├── field_color.info.yml
├── field_color.libraries.yml
├── field_color.module
├── LICENSE.txt
├── README.md
├── css/
│   ├── spectrum.css
│   └── style.css
├── icons/
│   └── icon-edit.svg
├── js/
│   ├── main.js
│   ├── spectrum.js
│   └── i18n/
│       └── [multiple language files for Spectrum]
├── src/
│   ├── Component/
│   │   └── FieldColorValidation.php
│   ├── Element/
│   │   └── ColorInput.php
│   └── Plugin/
│       └── Field/
│           ├── FieldFormatter/
│           │   └── FieldColorFormatterType.php
│           ├── FieldType/
│           │   └── FieldColor.php
│           └── FieldWidget/
│               └── FieldColorWidgetType.php
├── templates/
│   └── input-color.html.twig
```

---

## Main Functionalities

### 1. Color Field Type

- **FieldColor.php:**  
  Defines the custom field type for storing color values. Supports various color formats and integrates with Drupal's field API.

### 2. Color Picker Widget

- **FieldColorWidgetType.php:**  
  Implements the color picker widget using Spectrum JS.  
- **spectrum.js & spectrum.css:**  
  Provides the interactive color picker UI.
- **main.js:**  
  Handles widget initialization and interaction.
- **i18n/**  
  Offers translations for the color picker in many languages.

### 3. Field Formatter

- **FieldColorFormatterType.php:**  
  Custom formatter for displaying color values on the frontend. Can show color swatches, HEX/RGB values, or styled elements.

### 4. Validation

- **FieldColorValidation.php:**  
  Ensures that submitted color values are valid and conform to expected formats.

### 5. Custom Element

- **ColorInput.php:**  
  Defines the custom form element for color input, integrating with the widget and validation.

### 6. Theming & Templates

- **input-color.html.twig:**  
  Twig template for rendering the color input field.
- **style.css:**  
  Custom styles for the color field and picker.
- **icon-edit.svg:**  
  Icon for color editing actions.

---

## Usage

### Adding a Color Field

1. Go to the "Manage fields" section of your content type or entity.
2. Add a new field of type "Color".
3. Configure the widget and formatter as desired.

### Using the Color Picker

- Editors will see a color picker widget when editing content.
- Select a color using the picker; the value will be stored in the chosen format.

### Displaying Colors

- Configure the field formatter to display color swatches, HEX/RGB values, or custom styles.
- Use the provided Twig template for custom theming.

### Internationalization

- The color picker will automatically use the appropriate language file from `js/i18n/` based on site/user settings.

### Validation

- Invalid color values will be rejected, ensuring data integrity.

---

## Requirements

- Drupal 9 or 10
- PHP 7.4+
- JavaScript enabled in the browser for the color picker widget

---

## Extending

- Add new color formats or validation rules in `FieldColorValidation.php`.
- Create custom field formatters or widgets in the `Plugin/Field/` directory.
- Customize the color picker UI by editing `spectrum.js`, `main.js`, or CSS files.
- Add new icons or templates for enhanced UX.

---

## License

See `LICENSE.txt`.

---

## Support

For issues or feature requests, open an issue in your repository or contact the maintainer.
