fix(color-generator): consistently format value as hex color (#3282)

Author: sean-perkins

src/components/page/theming/ColorGenerator/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 
 import styles from './styles.module.scss';
 
@@ -49,6 +49,7 @@ const ColorGenerator = (props) => {
 
           return (
             <li
+              key={name}
               className={clsx(styles.item, { [styles.isOpen]: isOpen })}
               onClick={() => setActiveColor(activeColor === name ? null : name)}
             >
@@ -97,15 +98,15 @@ const ColorGenerator = (props) => {
           :root {'{'}
           {'\n'}
           {Object.entries(colors).map(([name, color], i) => (
-            <>
+            <Fragment key={i}>
               {'\t'}--ion-color-{name}: {color.value};{'\n'}
               {'\t'}--ion-color-{name}-rgb: {color.valueRgb};{'\n'}
               {'\t'}--ion-color-{name}-contrast: {color.contrast};{'\n'}
               {'\t'}--ion-color-{name}-contrast-rgb: {color.contrastRgb};{'\n'}
               {'\t'}--ion-color-{name}-shade: {color.shade};{'\n'}
               {'\t'}--ion-color-{name}-tint: {color.tint};{'\n'}
               {'\n'}
-            </>
+            </Fragment>
           ))}
           {'}'}
           {'\n'}

src/components/page/theming/_utils/index.tsx

@@ -13,9 +13,10 @@ export const generateColor = (value: string): ColorVariable => {
   const contrast = color.contrast();
   const tint = color.tint();
   const shade = color.shade();
+  const formattedValue = value.startsWith('#') ? value : `#${value}`;
 
   return {
-    value,
+    value: formattedValue,
     valueRgb: rgbToString(color.rgb),
     contrast: contrast.hex,
     contrastRgb: rgbToString(contrast.rgb),