SOFT-3870: resolve swatch display through @kadence/helpers KadenceColorOutput

The pop color controls painted their swatch tiles and the selected-value preview
straight from the raw swatch value, so only a literal hex (or the hardcoded
palette1..9 slugs) rendered. Delegate the final display resolution to
`KadenceColorOutput`, which routes through the `kadence.helpers.colorValue`
filter: a token reference resolves to its `var(--kb-token--<id>)`, a palette slug
to its `var(--global-*)`, and a literal (hex/rgba/var) is returned unchanged
(idempotent). This lets a consumer store a token-referencing value on a swatch
and have it render correctly in the control, without this package knowing about
any token vocabulary.

Author: d4mation

src/inline-pop-color/index.js

@@ -7,7 +7,7 @@
  * Import Icons
  */
 import ColorPicker from '../color-picker';
-import { hexToRGBA } from '@kadence/helpers';
+import { hexToRGBA, KadenceColorOutput } from '@kadence/helpers';
 import { map } from 'lodash';
 import { useSetting } from '@wordpress/block-editor';
 import { useState, useMemo } from '@wordpress/element';
@@ -183,6 +183,9 @@ export default function InlinePopColorControl({
 				break;
 		}
 	}
+	// Delegate final resolution to @kadence/helpers: a swatch value that is a token reference or a
+	// palette slug becomes a renderable CSS color, a literal (hex/rgba/var) is returned unchanged.
+	previewColorString = KadenceColorOutput(previewColorString);
 	const onChangeState = (tempColor, tempPalette) => {
 		let newColor;
 		let opacity = 100 === opacityUnit ? 100 : 1;
@@ -348,7 +351,7 @@ export default function InlinePopColorControl({
 					{colors && (
 						<div className="kadence-pop-color-palette-swatches">
 							{map(colors, ({ color, slug, name }) => {
-								const style = { color };
+								const style = { color: KadenceColorOutput(color) };
 								const palette = slug.replace('theme-', '');
 								const isActive =
 									palette === value || (!slug.startsWith('theme-palette') && value === color);

src/single-pop-color-control/index.js

@@ -8,7 +8,7 @@
  */
 import ColorPicker from '../color-picker';
 import ColorIcons from '../color-icons';
-import { hexToRGBA } from '@kadence/helpers';
+import { hexToRGBA, KadenceColorOutput } from '@kadence/helpers';
 
 import { get, map } from 'lodash';
 import { useSetting } from '@wordpress/block-editor';
@@ -190,6 +190,9 @@ export default function SinglePopColorControl({
 				break;
 		}
 	}
+	// Delegate final resolution to @kadence/helpers: a swatch value that is a token reference or a
+	// palette slug becomes a renderable CSS color, a literal (hex/rgba/var) is returned unchanged.
+	previewColorString = KadenceColorOutput(previewColorString);
 	const onChangeState = (tempColor, tempPalette) => {
 		let newColor;
 		let opacity = 100 === opacityUnit ? 100 : 1;
@@ -285,7 +288,7 @@ export default function SinglePopColorControl({
 					{colors && (
 						<div className="kadence-pop-color-palette-swatches">
 							{map(colors, ({ color, slug, name }) => {
-								const style = { color };
+								const style = { color: KadenceColorOutput(color) };
 								const palette = slug.replace('theme-', '');
 								const isActive =
 									palette === value || (!slug.startsWith('theme-palette') && value === color);