Improvement - Config - Add support for shorthand hex colors

Author: graphieros

TestingArena/ArenaVueUiXy.vue

@@ -376,8 +376,8 @@ const model = ref([
     { key: 'useCanvas', def: false, type: 'checkbox' }, // DEPRECATED (removed)
     { key: 'useCssAnimation', def: true, type: 'checkbox', label: 'useCssAnimation', category: 'general' },
     { key: 'chart.fontFamily', def: 'inherit', type: 'text', label: 'fontFamily', category: 'general' },
-    { key: 'chart.backgroundColor', def: 'transparent', type: 'color', label: 'backgroundColor', category: 'general' },
-    { key: 'chart.color', def: '#FFFFFF', type: 'color', label: 'textColor', category: 'general' },
+    { key: 'chart.backgroundColor', def: '#FFF', type: 'color', label: 'backgroundColor', category: 'general' },
+    { key: 'chart.color', def: '#111', type: 'color', label: 'textColor', category: 'general' },
     { key: 'chart.height', def: 600, type: 'range', min: 300, max: 1000, label: 'height', category: 'general' },
     { key: 'chart.width', def: 1000, type: 'range', min: 300, max: 2000, label: 'width', category: 'general' },
     { key: 'chart.zoom.show', def: true, type: 'checkbox', label: 'zoom', category: 'general' },

src/lib.js

@@ -393,19 +393,25 @@ export const opacity = ["00", "03", "05", "08", "0A", "0D", "0F", "12", "14", "1
 
 export function convertColorToHex(color) {
     const hexRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i;
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
     const rgbRegex = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/i;
     const hslRegex = /^hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%(?:,\s*([\d.]+))?\)$/i;
 
-    if ([undefined, null, NaN].includes(color)) {
+    if (color === undefined || color === null || (typeof color === 'number' && isNaN(color))) {
         return null;
     }
 
     color = convertNameColorToHex(color);
 
+
     if (color === 'transparent') {
         return "#FFFFFF00";
     }
 
+    color = color.replace(shorthandRegex, (_, r, g, b, a) => {
+        return `#${r}${r}${g}${g}${b}${b}${a ? a + a : ''}`;
+    });
+
     let match;
     let alpha = 1;
 
@@ -420,8 +426,8 @@ export function convertColorToHex(color) {
     } else if ((match = color.match(hslRegex))) {
         const [, h, s, l, a] = match;
         alpha = a ? parseFloat(a) : 1;
-        const rgb = hslToRgba(Number(h), Number(s), Number(l));
-        return `#${decimalToHex(rgb[0])}${decimalToHex(rgb[1])}${decimalToHex(rgb[2])}${decimalToHex(Math.round(alpha * 255))}`;
+        const [rr, gg, bb] = hslToRgba(Number(h), Number(s), Number(l));
+        return `#${decimalToHex(rr)}${decimalToHex(gg)}${decimalToHex(bb)}${decimalToHex(Math.round(alpha * 255))}`;
     }
 
     return null;

tests/lib.test.js

@@ -399,6 +399,23 @@ describe("convertColorToHex", () => {
         const result = convertColorToHex("hsla(0, 100%, 50%, 0.5)");
         expect(result).toBe("#ff000080");
     });
+
+    test("returns HEX color format from shorthand hex codes (#RGB, #RGBA)", () => {
+        expect(convertColorToHex("#ABC")).toBe("#AABBCCff");
+        expect(convertColorToHex("ABC")).toBe("#AABBCCff");
+        expect(convertColorToHex("#abc")).toBe("#aabbccff");
+        expect(convertColorToHex("abc")).toBe("#aabbccff");
+        expect(convertColorToHex("#ABC8")).toBe("#AABBCC88");
+        expect(convertColorToHex("ABC8")).toBe("#AABBCC88");
+        expect(convertColorToHex("#abc8")).toBe("#aabbcc88");
+        expect(convertColorToHex("abc8")).toBe("#aabbcc88");
+    });
+
+    test("returns null for invalid or empty input", () => {
+        expect(convertColorToHex(null)).toBeNull();
+        expect(convertColorToHex(undefined)).toBeNull();
+        expect(convertColorToHex("not-a-color")).toBeNull();
+    });
 });
 
 describe("shiftHue", () => {