refinements proposal for #342

packages/core/src/cards/repo.js

@@ -1,6 +1,6 @@
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { getCardColors, isValidHexColor } from "../common/color.js";
+import { getCardColors, isPrefixedHexColor } from "../common/color.js";
 import { kFormatter, wrapTextMultiline } from "../common/fmt.js";
 import { encodeHTML } from "../common/html.js";
 import { icons } from "../common/icons.js";
@@ -33,7 +33,7 @@ const DESCRIPTION_MAX_LINES = 3;
  * @returns {string} Wrapped repo description SVG object.
  */
 const getBadgeSVG = (label, textColor, xOffset = 0) => {
-  if (!isValidHexColor(textColor, true)) {
+  if (!isPrefixedHexColor(textColor)) {
     throw new Error(`Invalid text color: "${textColor}"`);
   }
   if (!Number.isFinite(xOffset)) {

packages/core/src/cards/top-languages.js

@@ -3,7 +3,7 @@ import { I18n } from "../common/I18n.js";
 import {
   fallbackColor,
   getCardColors,
-  isValidHexColor,
+  isPrefixedHexColor,
 } from "../common/color.js";
 import { formatBytes } from "../common/fmt.js";
 import { encodeHTML } from "../common/html.js";
@@ -290,7 +290,7 @@ const createCompactLangNode = ({
   const staggerDelay = (index + 3) * 150;
   const color = lang.color || "#858585";
 
-  if (!isValidHexColor(color, true)) {
+  if (!isPrefixedHexColor(color)) {
     throw new Error(`Invalid language color: "${color}"`);
   }
 
@@ -448,8 +448,9 @@ const renderCompactLayout = (
   let progressOffset = 0;
   const compactProgressBar = langs
     .map((lang) => {
-      if (!isValidHexColor(lang.color, true)) {
-        throw new Error(`Invalid language color: "${lang.color}"`);
+      const langColor = lang.color || DEFAULT_LANG_COLOR;
+      if (!isPrefixedHexColor(langColor)) {
+        throw new Error(`Invalid language color: "${langColor}"`);
       }
 
       const percentage = parseFloat(
@@ -466,7 +467,7 @@ const renderCompactLayout = (
           y="0"
           width="${progress}"
           height="8"
-          fill="${lang.color || "#858585"}"
+          fill="${langColor}"
         />
       `;
       progressOffset += percentage;
@@ -527,8 +528,9 @@ const renderDonutVerticalLayout = (
 
   // Generate each donut vertical chart part
   for (const lang of langs) {
-    if (!isValidHexColor(lang.color, true)) {
-      throw new Error(`Invalid language color: "${lang.color}"`);
+    const langColor = lang.color || DEFAULT_LANG_COLOR;
+    if (!isPrefixedHexColor(langColor)) {
+      throw new Error(`Invalid language color: "${langColor}"`);
     }
 
     const percentage = (lang.size / totalLanguageSize) * 100;
@@ -542,7 +544,7 @@ const renderDonutVerticalLayout = (
           cy="100"
           r="${radius}"
           fill="transparent"
-          stroke="${lang.color}"
+          stroke="${langColor}"
           stroke-width="25"
           stroke-dasharray="${totalCircleLength}"
           stroke-dashoffset="${indent}"
@@ -606,8 +608,9 @@ const renderPieLayout = (langs, totalLanguageSize, statsFormat, hideValues) => {
 
   // Generate each pie chart part
   for (const lang of langs) {
-    if (!isValidHexColor(lang.color, true)) {
-      throw new Error(`Invalid language color: "${lang.color}"`);
+    const langColor = lang.color || DEFAULT_LANG_COLOR;
+    if (!isPrefixedHexColor(langColor)) {
+      throw new Error(`Invalid language color: "${langColor}"`);
     }
 
     if (langs.length === 1) {
@@ -617,7 +620,7 @@ const renderPieLayout = (langs, totalLanguageSize, statsFormat, hideValues) => {
           cy="${centerY}"
           r="${radius}"
           stroke="none"
-          fill="${lang.color}"
+          fill="${langColor}"
           data-testid="lang-pie"
           size="100"
         />
@@ -650,7 +653,7 @@ const renderPieLayout = (langs, totalLanguageSize, statsFormat, hideValues) => {
           data-testid="lang-pie"
           size="${percentage}"
           d="M ${centerX} ${centerY} L ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endPoint.x} ${endPoint.y} Z"
-          fill="${lang.color}"
+          fill="${langColor}"
         />
       </g>
     `);
@@ -747,10 +750,11 @@ const renderDonutLayout = (
   const strokeWidth = 12;
 
   const colors = langs.map((lang) => {
-    if (!isValidHexColor(lang.color, true)) {
-      throw new Error(`Invalid language color: "${lang.color}"`);
+    const langColor = lang.color || DEFAULT_LANG_COLOR;
+    if (!isPrefixedHexColor(langColor)) {
+      throw new Error(`Invalid language color: "${langColor}"`);
     }
-    return lang.color;
+    return langColor;
   });
   const langsPercents = langs.map((lang) =>
     parseFloat(((lang.size / totalLanguageSize) * 100).toFixed(2)),
@@ -813,7 +817,7 @@ const renderDonutLayout = (
  * @returns {string} No languages data SVG node string.
  */
 const noLanguagesDataNode = ({ color, text, layout }) => {
-  if (!isValidHexColor(color, true)) {
+  if (!isPrefixedHexColor(color)) {
     throw new Error(`Invalid text color: "${color}"`);
   }
 

packages/core/src/cards/wakatime.js

@@ -1,6 +1,6 @@
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { getCardColors, isValidHexColor } from "../common/color.js";
+import { getCardColors, isPrefixedHexColor } from "../common/color.js";
 import { encodeHTML } from "../common/html.js";
 import languageColors from "../common/languageColors.json" with { type: "json" };
 import { clampValue, lowercaseTrim } from "../common/ops.js";
@@ -25,7 +25,7 @@ const TOTAL_TEXT_WIDTH = 275;
  * @returns {string} No coding activity SVG node string.
  */
 const noCodingActivityNode = ({ color, text }) => {
-  if (!isValidHexColor(color, true)) {
+  if (!isPrefixedHexColor(color)) {
     throw new Error(`Invalid text color: "${color}"`);
   }
 
@@ -203,7 +203,7 @@ const getStyles = function ({
   titleColor,
   textColor,
 }) {
-  if (!isValidHexColor(textColor, true)) {
+  if (!isPrefixedHexColor(textColor)) {
     throw new Error(`Invalid text color: "${textColor}"`);
   }
 

packages/core/src/common/Card.ts

@@ -1,4 +1,4 @@
-import { isValidGradient, isValidHexColor } from "./color.js";
+import { isPrefixedHexColor, isValidGradient } from "./color.js";
 import { encodeHTML } from "./html.js";
 import { flexLayout } from "./render.js";
 
@@ -248,21 +248,21 @@ class Card {
     }
     if (
       this.colors.titleColor !== undefined &&
-      !isValidHexColor(this.colors.titleColor, true)
+      !isPrefixedHexColor(this.colors.titleColor)
     ) {
       throw new Error(`Invalid title color: "${this.colors.titleColor}"`);
     }
     if (
       this.colors.borderColor !== undefined &&
-      !isValidHexColor(this.colors.borderColor, true)
+      !isPrefixedHexColor(this.colors.borderColor)
     ) {
       throw new Error(`Invalid border color: "${this.colors.borderColor}"`);
     }
     if (
       this.colors.bgColor !== undefined &&
       !(typeof this.colors.bgColor === "object"
         ? isValidGradient(this.colors.bgColor)
-        : isValidHexColor(this.colors.bgColor, true))
+        : isPrefixedHexColor(this.colors.bgColor))
     ) {
       throw new Error(
         `Invalid background color: ${String(this.colors.bgColor)}`,

packages/core/src/common/color.ts

@@ -1,38 +1,53 @@
 import { themes } from "../themes/index.js";
 
+/** Matches a 3-, 4-, 6-, or 8-digit hex color with no leading `#`. */
+const HEX_COLOR =
+  /^([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{3})$/;
+
+/**
+ * Checks if a value is a bare hex color, i.e. hex digits with no `#` prefix
+ * (`"f00"`, `"ffffff"`). This is the form user-supplied color params and
+ * gradient stops arrive in.
+ *
+ * @param value Value to check.
+ * @returns True if the value is a bare hex color.
+ */
+const isBareHexColor = (value: unknown): boolean => {
+  return typeof value === "string" && HEX_COLOR.test(value);
+};
+
 /**
- * Checks if a string is a valid hex color.
+ * Checks if a value is a `#`-prefixed hex color (`"#f00"`, `"#ffffff"`). This
+ * is the form colors take once resolved by {@link getCardColors}, i.e. right
+ * before they are written into the SVG.
  *
- * @param hexColor String to check.
- * @param numberSignPrefix Whether the hex color must have a '#' prefix.
- * @returns True if the given string is a valid hex color.
+ * @param value Value to check.
+ * @returns True if the value is a `#`-prefixed hex color.
  */
-const isValidHexColor = (
-  hexColor: string,
-  numberSignPrefix = false,
-): boolean => {
-  return new RegExp(
-    `^${numberSignPrefix ? "#" : ""}([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4})$`,
-  ).test(hexColor);
+const isPrefixedHexColor = (value: unknown): boolean => {
+  return (
+    typeof value === "string" &&
+    value.startsWith("#") &&
+    HEX_COLOR.test(value.slice(1))
+  );
 };
 
 /**
- * Check if the given string is a valid gradient.
+ * Checks if the given parts form a valid gradient: a finite numeric angle
+ * followed by at least two bare-hex color stops, e.g. `["90", "f00", "0f0"]`.
+ * The angle is written into the SVG `gradientTransform="rotate(...)"`.
  *
- * @param colors Array of colors.
- * @returns True if the given string is a valid gradient.
+ * @param parts Gradient parts: `[angle, ...stops]`.
+ * @returns True if the parts form a valid gradient.
  */
-const isValidGradient = (colors: Array<string>): boolean => {
+const isValidGradient = (parts: Array<string>): boolean => {
+  const [angle, ...stops] = parts;
   return (
-    colors.length > 2 &&
-    colors
-      .slice(1)
-      .every(
-        (color) =>
-          isValidHexColor(color) &&
-          !isNaN(Number(colors[0])) &&
-          colors[0]?.trim() !== "",
-      )
+    stops.length >= 2 &&
+    angle !== undefined &&
+    angle.trim() !== "" &&
+    Number.isFinite(Number(angle)) &&
+    stops.every(isBareHexColor)
   );
 };
 
@@ -46,8 +61,7 @@ const isValidColorInput = (color: string | null | undefined): boolean => {
   if (color === null || color === undefined) {
     return true;
   }
-  const colors = color.split(",");
-  return isValidGradient(colors) || isValidHexColor(color);
+  return isValidGradient(color.split(",")) || isBareHexColor(color);
 };
 
 /**
@@ -83,7 +97,7 @@ const fallbackColor = (
     return colors;
   }
 
-  if (color !== undefined && isValidHexColor(color)) {
+  if (color !== undefined && isBareHexColor(color)) {
     return `#${color}`;
   }
 
@@ -193,5 +207,6 @@ export {
   getCardColors,
   findInvalidColor,
   isValidGradient,
-  isValidHexColor,
+  isBareHexColor,
+  isPrefixedHexColor,
 };

packages/core/src/common/render.ts

@@ -1,4 +1,4 @@
-import { getCardColors, isValidHexColor } from "./color.js";
+import { getCardColors, isPrefixedHexColor } from "./color.js";
 import { SECONDARY_ERROR_MESSAGES, TRY_AGAIN_LATER } from "./error.js";
 import { encodeHTML } from "./html.js";
 import { clampValue } from "./ops.js";
@@ -52,7 +52,7 @@ const flexLayout = ({
  * @returns Language display SVG object.
  */
 const createLanguageNode = (langName: string, langColor: string): string => {
-  if (!isValidHexColor(langColor, true)) {
+  if (!isPrefixedHexColor(langColor)) {
     throw new Error(`Invalid language color: "${langColor}"`);
   }
 
@@ -94,10 +94,10 @@ const createProgressNode = ({
   progressBarBackgroundColor: string;
   delay: number;
 }): string => {
-  if (!isValidHexColor(color, true)) {
+  if (!isPrefixedHexColor(color)) {
     throw new Error(`Invalid progress color: "${color}"`);
   }
-  if (!isValidHexColor(progressBarBackgroundColor, true)) {
+  if (!isPrefixedHexColor(progressBarBackgroundColor)) {
     throw new Error(
       `Invalid progress bar background color: "${progressBarBackgroundColor}"`,
     );
@@ -204,7 +204,7 @@ const wrappedTextNode = ({
  * @returns CSS rules block (without the surrounding selector).
  */
 const wrappedTextStyles = (color: string): string => {
-  if (!isValidHexColor(color, true)) {
+  if (!isPrefixedHexColor(color)) {
     throw new Error(`Invalid text color: "${color}"`);
   }
 

packages/core/tests/color.test.ts

@@ -3,8 +3,9 @@ import { describe, expect, it } from "vitest";
 import {
   findInvalidColor,
   getCardColors,
+  isBareHexColor,
+  isPrefixedHexColor,
   isValidGradient,
-  isValidHexColor,
 } from "../src/common/color.js";
 
 describe("getCardColors", () => {
@@ -95,23 +96,35 @@ describe("getCardColors", () => {
   });
 });
 
-describe("isValidHexColor", () => {
+describe("isPrefixedHexColor", () => {
   it("should validate hex colors with # prefix", () => {
-    expect(isValidHexColor("#f00", true)).toBe(true);
-    expect(isValidHexColor("#ffffff", true)).toBe(true);
-    expect(isValidHexColor("#12345678", true)).toBe(true);
-    expect(isValidHexColor("f00", true)).toBe(false);
-    expect(isValidHexColor("#red", true)).toBe(false);
-    expect(isValidHexColor("red", true)).toBe(false);
+    expect(isPrefixedHexColor("#f00")).toBe(true);
+    expect(isPrefixedHexColor("#ffffff")).toBe(true);
+    expect(isPrefixedHexColor("#12345678")).toBe(true);
+    expect(isPrefixedHexColor("f00")).toBe(false);
+    expect(isPrefixedHexColor("#red")).toBe(false);
+    expect(isPrefixedHexColor("red")).toBe(false);
   });
 
+  it("should reject non-string values", () => {
+    expect(isPrefixedHexColor(null)).toBe(false);
+    expect(isPrefixedHexColor(undefined)).toBe(false);
+  });
+});
+
+describe("isBareHexColor", () => {
   it("should validate hex colors without # prefix", () => {
-    expect(isValidHexColor("f00")).toBe(true);
-    expect(isValidHexColor("ffffff")).toBe(true);
-    expect(isValidHexColor("12345678")).toBe(true);
-    expect(isValidHexColor("#f00")).toBe(false);
-    expect(isValidHexColor("#red")).toBe(false);
-    expect(isValidHexColor("red")).toBe(false);
+    expect(isBareHexColor("f00")).toBe(true);
+    expect(isBareHexColor("ffffff")).toBe(true);
+    expect(isBareHexColor("12345678")).toBe(true);
+    expect(isBareHexColor("#f00")).toBe(false);
+    expect(isBareHexColor("#red")).toBe(false);
+    expect(isBareHexColor("red")).toBe(false);
+  });
+
+  it("should reject non-string values", () => {
+    expect(isBareHexColor(null)).toBe(false);
+    expect(isBareHexColor(undefined)).toBe(false);
   });
 });
 
@@ -129,6 +142,9 @@ describe("isValidGradient", () => {
     expect(isValidGradient(["90"])).toBe(false);
     expect(isValidGradient(["", "f00", "0f0"])).toBe(false); // empty angle
     expect(isValidGradient(["90", "f00", "red"])).toBe(false); // invalid color
+    expect(isValidGradient(["Infinity", "f00", "0f0"])).toBe(false); // non-finite angle
+    expect(isValidGradient(["-Infinity", "f00", "0f0"])).toBe(false); // non-finite angle
+    expect(isValidGradient(["abc", "f00", "0f0"])).toBe(false); // non-numeric angle
   });
 });