Issue #3396018 by andy-blum, Eli-T, Wim Leers, borisson_, mherchel: Allow three character hex color definitions in Olivero settings

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

@@ -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

@@ -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 = hexdec($hex_val[0] . $hex_val[1]);
-  $g0 = hexdec($hex_val[2] . $hex_val[3]);
-  $b0 = hexdec($hex_val[4] . $hex_val[5]);
+
+  $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

@@ -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.'));
   }
 }