mirror of
https://github.com/discourse/discourse.git
synced 2026-08-07 13:19:19 +08:00
986f91418eForms that need color input have been using custom implementations with ColorInput and ColorPicker components. This introduces a native FormKit control that provides a consistent, accessible color picker experience with three input methods: hex text input, native browser color picker, and optional color swatches. The control supports: - Standard hex color input with # prefix - Native color picker for visual selection - Predefined color swatches via @colors - Marking already-used colors via @usedColors - Named CSS colors (e.g., "red", "purple") via @allowNamedColors When @allowNamedColors is enabled, the # prefix is hidden and the input accepts any valid CSS color name. The native picker correctly displays named colors by resolving them to hex using a canvas context. This also centralizes color utility functions that were duplicated across several files: - normalizeHex: expands 3-digit hex to 6-digit (e.g., "F00" → "FF0000") - isValidHex: validates hex color format - resolveColor: converts any CSS color to hex (for named color support) The category color editor and welcome banner form have been migrated to use the new control, significantly reducing their complexity. Here are a few screenshots of the component as it's showcased in the /styleguide <img width="766" height="381" alt="2026-01-21 @ 13 12 44" src="https://github.com/user-attachments/assets/76e60bb0-dfbd-4d37-8e9e-e52446ab1142" /> <img width="765" height="556" alt="2026-01-21 @ 13 12 52" src="https://github.com/user-attachments/assets/69af5712-d340-434b-942c-7947b2be6936" /> <img width="761" height="377" alt="2026-01-21 @ 13 13 06" src="https://github.com/user-attachments/assets/6551646c-2026-43ed-9a93-b8628c9f9ab3" /> |
||
|---|---|---|
| .. | ||
| app/controllers/styleguide | ||
| assets | ||
| config | ||
| db/migrate | ||
| lib/styleguide | ||
| public/images | ||
| spec | ||
| package.json | ||
| plugin.rb | ||
| README.md | ||
| screenshot.png | ||
| tsconfig.json | ||
styleguide
Adds a URL of /styleguide to discourse that renders widgets in various
configurations to aid in styling.
