Issue #3396018 by andy-blum, Eli-T, Wim Leers, borisson_, mherchel: Allow... (441307e9) · Commits · project / drupal

core/themes/olivero/js/color-picker.js

+35 −4

Original line number	Diff line number	Diff line
		@@ -27,6 +27,31 @@
		Drupal.announce(announcement);
		}

		/**
		* Formats hexcode to full 6-character string for HTMLColorInput.
		*
		* @param {string} hex The hex code input.
		* @returns {string} The same hex code, formatted.
		*/
		function formatHex(hex) {
		// Temporarily remove hash
		if (hex.startsWith('#')) {
		hex = hex.substring(1);
		}

		// Convert three-value to six-value syntax.
		if (hex.length === 3) {
		hex = hex
		.split('')
		.flatMap((character) => [character, character])
		.join('');
		}

		hex = `#${hex}`;

		return hex;
		}

		/**
		* `input` event callback to keep text & color inputs in sync.
		*
		@@ -34,10 +59,16 @@
		* @param {HTMLElement} inputToSync input element to synchronize
		*/
		function synchronizeInputs(changedInput, inputToSync) {
		inputToSync.value = changedInput.value;
		inputToSync.value = formatHex(changedInput.value);

		changedInput.setAttribute('data-olivero-custom-color', changedInput.value);
		inputToSync.setAttribute('data-olivero-custom-color', changedInput.value);
		changedInput.setAttribute(
		'data-olivero-custom-color',
		formatHex(changedInput.value),
		);
		inputToSync.setAttribute(
		'data-olivero-custom-color',
		formatHex(changedInput.value),
		);

		const colorSchemeSelect = document.querySelector(
		'[data-drupal-selector="edit-color-scheme"]',
		@@ -130,7 +161,7 @@
		'form-element--type-color',
		'form-element--api-color',
		);
		colorInput.value = textInput.value;
		colorInput.value = formatHex(textInput.value);
		colorInput.setAttribute('name', `${textInput.name}_visual`);
		colorInput.setAttribute(
		'data-olivero-custom-color',

core/themes/olivero/olivero.theme

+14 −3

Original line number	Diff line number	Diff line
		@@ -646,9 +646,20 @@ function olivero_form_views_exposed_form_alter(&$form) {
		function _olivero_hex_to_hsl(string $hex_string) {
		// Convert hexcode pairs to rgb values (0-255).
		$hex_val = trim($hex_string, '#');

		$r0 = $g0 = $b0 = '00';

		if (strlen($hex_val) === 6) {
		$r0 = hexdec($hex_val[0] . $hex_val[1]);
		$g0 = hexdec($hex_val[2] . $hex_val[3]);
		$b0 = hexdec($hex_val[4] . $hex_val[5]);
		}

		if (strlen($hex_val) === 3) {
		$r0 = hexdec($hex_val[0] . $hex_val[0]);
		$g0 = hexdec($hex_val[1] . $hex_val[1]);
		$b0 = hexdec($hex_val[2] . $hex_val[2]);
		}

		// Convert rgb's 0-255 to decimal values.
		$r = fdiv($r0, 255);

core/themes/olivero/theme-settings.php

+5 −3

Original line number	Diff line number	Diff line
		@@ -6,6 +6,7 @@
		*/

		use Drupal\Core\Form\FormStateInterface;
		use Drupal\Component\Utility\Color;

		/**
		* Implements hook_form_FORM_ID_alter() for system_theme_settings.
		@@ -107,10 +108,11 @@ function olivero_form_system_theme_settings_alter(&$form, FormStateInterface $fo
		'#maxlength' => 7,
		'#size' => 10,
		'#title' => t($title),
		'#description' => t('Enter color in full hexadecimal format (#abc123).') . '<br/>' . t('Derivatives will be formed from this color.'),
		'#description' => t('Enter color in hexadecimal format (#abc123).') . '<br/>' . t('Derivatives will be formed from this color.'),
		'#default_value' => theme_get_setting($key),
		'#attributes' => [
		'pattern' => '^#[a-fA-F0-9]{6}',
		// Regex copied from Color::validateHex()
		'pattern' => '^[#]?([0-9a-fA-F]{3}){1,2}$',
		],
		'#wrapper_attributes' => [
		'data-drupal-selector' => 'olivero-color-picker',
		@@ -123,7 +125,7 @@ function olivero_form_system_theme_settings_alter(&$form, FormStateInterface $fo
		* Validation handler for the Olivero system_theme_settings form.
		*/
		function olivero_theme_settings_validate($form, FormStateInterface $form_state) {
		if (!preg_match('/^#[a-fA-F0-9]{6}$/', $form_state->getValue('base_primary_color'))) {
		if (!Color::validateHex($form_state->getValue('base_primary_color'))) {
		$form_state->setErrorByName('base_primary_color', t('Colors must be 7-character string specifying a color hexadecimal format.'));
		}
		}