DOC-2498: Added support for using raw CSS in the list of possible colours, using the color_map_raw property. (#3501)

* DOC-2498: Added support for using raw CSS in the list of possible colours, using the color_map_raw property.

* DOC-2598: Add note to thank @andrewnicols for contributing to this feature.

Author: kemister85

modules/ROOT/pages/7.5-release-notes.adoc

@@ -190,6 +190,19 @@ In previous versions of {productname}, an issue was identified where screen read
 
 {productname} {release-version} also includes the following addition<s>:
 
+=== Added support for using raw CSS in the list of possible colours, using the `color_map_raw` property.
+// #TINY-11385
+
+In previous versions of {productname}, the `color_map` property allowed users to define a list of colors for the color picker dropdown. However, this property only supported predefined color names or hex values, limiting the customization options for users who wanted to include custom colors using raw CSS.
+
+{productname} {release-version} addresses this limitation by introducing the `color_map_raw` property. This new property allows users to define a list of colors using raw CSS values, providing greater flexibility and customization options for the color picker dropdown.
+
+As a result, users can now include custom colors, or other CSS properties in the color map.
+
+For more information on customizing the color picker, see xref:user-formatting-options.adoc#color_map_raw[`+color_map_raw+` option].
+
+NOTE: {companyname} Technologies would like to thank link:https://github.com/andrewnicols[Andrew Nicols] for contributing to this feature.
+
 === Added new default `li` element styles to the content CSS to prevent child list elements from inheriting certain parent list item styles.
 // #TINY-11217
 

modules/ROOT/partials/configuration/text_color.adoc

@@ -145,6 +145,32 @@ tinymce.init({
 });
 ----
 
+[[color_map_raw]]
+=== `+color_map_raw+`
+
+The `color_map_raw` option specifies a map of text colors that appear in the color picker grid. This configuration provides detailed control over the colors available for the `forecolor` and `backcolor` toolbar options. The following example shows how to set the color map using CSS variables, color functions, and hex codes.
+
+*Type:* `+Array+`
+
+==== Example: using `+color_map_raw+`
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea', // Adjust this value according to your HTML
+  toolbar: 'forecolor backcolor',
+  color_map_raw: [
+    'var(--black)', 'Black', // CSS variable-based colors
+    'var(--red)', 'Red',
+    'hsb(0, 100%, 100%)', 'White hsb', // Color functions like hsb() and hsl()
+    'hsl(0, 100%, 50%)', 'Red hsl',
+    '#ff00ff', 'Pink', // Hex code-based colors
+    '#00ffff', 'Cyan',
+    'var(--purple)', 'Purple', // User-friendly labels for easy identification such as 'Purple'.
+    '#00FF7F', 'Spring Green'
+  ],
+});
+----
 
 [[color_map_background]]
 === `color_map_background`