@stats-organization/github-readme-stats-core 2.1.4 → 2.1.5

package/src/cards/stats.js

@@ -3,6 +3,7 @@ import { I18n } from "../common/I18n.js";
 import { getCardColors } from "../common/color.js";
 import { CustomError } from "../common/error.js";
 import { kFormatter } from "../common/fmt.js";
+import { encodeHTML } from "../common/html.js";
 import { icons, rankIcon } from "../common/icons.js";
 import { buildSearchFilter, clampValue } from "../common/ops.js";
 import { flexLayout, measureText } from "../common/render.js";
@@ -52,8 +53,10 @@ const LONG_LOCALES = [
 /**
  * Create a stats card text item.
  *
+ * The caller must ensure that the passed `icon` and `link` are properly sanitized!
+ *
  * @param {object} params Object that contains the createTextNode parameters.
- * @param {string} params.icon The icon to display.
+ * @param {string} params.icon The sanitized icon to display.
  * @param {string} params.label The label to display.
  * @param {number} params.value The value to display.
  * @param {string} params.id The id of the stat.
@@ -64,7 +67,7 @@ const LONG_LOCALES = [
  * @param {boolean} params.bold Whether to bold the label.
  * @param {string} params.numberFormat The format of numbers on card.
  * @param {number=} params.numberPrecision The precision of numbers on card.
- * @param {string} params.link Url to link to.
+ * @param {string} params.link Sanitized url to link to.
  * @param {number} params.labelXOffset horizontal offset for label.
  * @returns {string} The stats card text item SVG object.
  */
@@ -83,6 +86,16 @@ const createTextNode = ({
   link,
   labelXOffset = 25,
 }) => {
+  if (!Number.isFinite(labelXOffset)) {
+    throw new Error(`Invalid labelXOffset: "${labelXOffset}"`);
+  }
+  if (!Number.isFinite(shiftValuePos)) {
+    throw new Error(`Invalid shiftValuePos: "${shiftValuePos}"`);
+  }
+  if (!Number.isFinite(index)) {
+    throw new Error(`Invalid index: "${index}"`);
+  }
+
   const precision =
     typeof numberPrecision === "number" && !isNaN(numberPrecision)
       ? clampValue(numberPrecision, 0, 2)
@@ -109,7 +122,7 @@ const createTextNode = ({
       ${iconSvg}
       <text class="stat ${
         bold ? " bold" : "not_bold"
-      }" ${labelOffset} y="12.5">${label}:</text>
+      }" ${labelOffset} y="12.5">${encodeHTML(label)}:</text>
       <text
         class="stat ${bold ? " bold" : "not_bold"}"
         x="${(showIcons ? 140 : 120) + (bold ? 5 : 0) + shiftValuePos}"
@@ -422,13 +435,14 @@ const renderStatsCard = (
   }
 
   let repoFilter = encodeURIComponent(buildSearchFilter(repo, owner));
+  const encodedUsername = encodeURIComponent(username);
   if (show.includes("prs_authored")) {
     STATS.prs_authored = {
       icon: icons.prs,
       label: i18n.t("statcard.prs-authored"),
       value: totalPRsAuthored,
       id: "prs_authored",
-      link: `https://github.com/search?q=${repoFilter}author%3A${username}&amp;type=pullrequests`,
+      link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&amp;type=pullrequests`,
     };
   }
   if (show.includes("prs_commented")) {
@@ -437,7 +451,7 @@ const renderStatsCard = (
       label: i18n.t("statcard.prs-commented"),
       value: totalPRsCommented,
       id: "prs_commented",
-      link: `https://github.com/search?q=${repoFilter}commenter%3A${username}+-author%3A${username}&amp;type=pullrequests`,
+      link: `https://github.com/search?q=${repoFilter}commenter%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=pullrequests`,
     };
   }
   if (show.includes("prs_reviewed")) {
@@ -446,7 +460,7 @@ const renderStatsCard = (
       label: i18n.t("statcard.prs-reviewed"),
       value: totalPRsReviewed,
       id: "prs_reviewed",
-      link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${username}+-author%3A${username}&amp;type=pullrequests`,
+      link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=pullrequests`,
     };
   }
   if (show.includes("issues_authored")) {
@@ -455,7 +469,7 @@ const renderStatsCard = (
       label: i18n.t("statcard.issues-authored"),
       value: totalIssuesAuthored,
       id: "issues_authored",
-      link: `https://github.com/search?q=${repoFilter}author%3A${username}&amp;type=issues`,
+      link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&amp;type=issues`,
     };
   }
   if (show.includes("issues_commented")) {
@@ -464,7 +478,7 @@ const renderStatsCard = (
       label: i18n.t("statcard.issues-commented"),
       value: totalIssuesCommented,
       id: "issues_commented",
-      link: `https://github.com/search?q=${repoFilter}commenter%3A${username}+-author%3A${username}&amp;type=issues`,
+      link: `https://github.com/search?q=${repoFilter}commenter%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=issues`,
     };
   }
 

package/src/cards/top-languages.js

@@ -1,7 +1,12 @@
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { fallbackColor, getCardColors } from "../common/color.js";
+import {
+  fallbackColor,
+  getCardColors,
+  isPrefixedHexColor,
+} from "../common/color.js";
 import { formatBytes } from "../common/fmt.js";
+import { encodeHTML } from "../common/html.js";
 import { chunkArray, clampValue, lowercaseTrim } from "../common/ops.js";
 import {
   createProgressNode,
@@ -244,8 +249,8 @@ const createProgressTextNode = ({
 
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms">
-      <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
-      ${hideValues ? "" : `<text x="${progressTextX}" y="34" class="lang-name">${displayValue}</text>`}
+      <text data-testid="lang-name" x="2" y="15" class="lang-name">${encodeHTML(name)}</text>
+      ${hideValues ? "" : `<text x="${progressTextX}" y="34" class="lang-name">${encodeHTML(displayValue)}</text>`}
       ${createProgressNode({
         x: 0,
         y: 25,
@@ -285,11 +290,15 @@ const createCompactLangNode = ({
   const staggerDelay = (index + 3) * 150;
   const color = lang.color || "#858585";
 
+  if (!isPrefixedHexColor(color)) {
+    throw new Error(`Invalid language color: "${color}"`);
+  }
+
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms">
       <circle cx="5" cy="6" r="5" fill="${color}" />
       <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${lang.name} ${hideProgress || hideValues ? "" : displayValue}
+        ${encodeHTML(lang.name)} ${hideProgress || hideValues ? "" : encodeHTML(displayValue)}
       </text>
     </g>
   `;
@@ -439,6 +448,11 @@ const renderCompactLayout = (
   let progressOffset = 0;
   const compactProgressBar = langs
     .map((lang) => {
+      const langColor = lang.color || DEFAULT_LANG_COLOR;
+      if (!isPrefixedHexColor(langColor)) {
+        throw new Error(`Invalid language color: "${langColor}"`);
+      }
+
       const percentage = parseFloat(
         ((lang.size / totalLanguageSize) * offsetWidth).toFixed(2),
       );
@@ -453,7 +467,7 @@ const renderCompactLayout = (
           y="0"
           width="${progress}"
           height="8"
-          fill="${lang.color || "#858585"}"
+          fill="${langColor}"
         />
       `;
       progressOffset += percentage;
@@ -514,18 +528,23 @@ const renderDonutVerticalLayout = (
 
   // Generate each donut vertical chart part
   for (const lang of langs) {
+    const langColor = lang.color || DEFAULT_LANG_COLOR;
+    if (!isPrefixedHexColor(langColor)) {
+      throw new Error(`Invalid language color: "${langColor}"`);
+    }
+
     const percentage = (lang.size / totalLanguageSize) * 100;
     const circleLength = totalCircleLength * (percentage / 100);
     const delay = startDelayCoefficient * 100;
 
     circles.push(`
       <g class="stagger" style="animation-delay: ${delay}ms">
-        <circle 
+        <circle
           cx="150"
           cy="100"
           r="${radius}"
           fill="transparent"
-          stroke="${lang.color}"
+          stroke="${langColor}"
           stroke-width="25"
           stroke-dasharray="${totalCircleLength}"
           stroke-dashoffset="${indent}"
@@ -589,6 +608,11 @@ const renderPieLayout = (langs, totalLanguageSize, statsFormat, hideValues) => {
 
   // Generate each pie chart part
   for (const lang of langs) {
+    const langColor = lang.color || DEFAULT_LANG_COLOR;
+    if (!isPrefixedHexColor(langColor)) {
+      throw new Error(`Invalid language color: "${langColor}"`);
+    }
+
     if (langs.length === 1) {
       paths.push(`
         <circle
@@ -596,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"
         />
@@ -629,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>
     `);
@@ -716,12 +740,22 @@ const renderDonutLayout = (
   statsFormat,
   hideValues,
 ) => {
+  if (!Number.isFinite(width)) {
+    throw new Error(`Invalid width: "${width}"`);
+  }
+
   const centerX = width / 3;
   const centerY = width / 3;
   const radius = centerX - 60;
   const strokeWidth = 12;
 
-  const colors = langs.map((lang) => lang.color);
+  const colors = langs.map((lang) => {
+    const langColor = lang.color || DEFAULT_LANG_COLOR;
+    if (!isPrefixedHexColor(langColor)) {
+      throw new Error(`Invalid language color: "${langColor}"`);
+    }
+    return langColor;
+  });
   const langsPercents = langs.map((lang) =>
     parseFloat(((lang.size / totalLanguageSize) * 100).toFixed(2)),
   );
@@ -783,10 +817,14 @@ const renderDonutLayout = (
  * @returns {string} No languages data SVG node string.
  */
 const noLanguagesDataNode = ({ color, text, layout }) => {
+  if (!isPrefixedHexColor(color)) {
+    throw new Error(`Invalid text color: "${color}"`);
+  }
+
   return `
     <text x="${
       layout === "pie" || layout === "donut-vertical" ? CARD_PADDING : 0
-    }" y="11" class="stat bold" fill="${color}">${text}</text>
+    }" y="11" class="stat bold" fill="${color}">${encodeHTML(text)}</text>
   `;
 };
 

package/src/cards/wakatime.js

@@ -1,6 +1,7 @@
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { getCardColors } 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";
 import { createProgressNode, flexLayout } from "../common/render.js";
@@ -24,8 +25,12 @@ const TOTAL_TEXT_WIDTH = 275;
  * @returns {string} No coding activity SVG node string.
  */
 const noCodingActivityNode = ({ color, text }) => {
+  if (!isPrefixedHexColor(color)) {
+    throw new Error(`Invalid text color: "${color}"`);
+  }
+
   return `
-    <text x="25" y="11" class="stat bold" fill="${color}">${text}</text>
+    <text x="25" y="11" class="stat bold" fill="${color}">${encodeHTML(text)}</text>
   `;
 };
 
@@ -58,6 +63,13 @@ const formatLanguageValue = ({ display_format, lang }) => {
  * @returns {string} The compact layout language SVG node.
  */
 const createCompactLangNode = ({ lang, x, y, display_format }) => {
+  if (!Number.isFinite(x)) {
+    throw new Error(`Invalid x: "${x}"`);
+  }
+  if (!Number.isFinite(y)) {
+    throw new Error(`Invalid y: "${y}"`);
+  }
+
   // @ts-ignore
   const color = languageColors[lang.name] || "#858585";
   const value = formatLanguageValue({ display_format, lang });
@@ -66,7 +78,7 @@ const createCompactLangNode = ({ lang, x, y, display_format }) => {
     <g transform="translate(${x}, ${y})">
       <circle cx="5" cy="6" r="5" fill="${color}" />
       <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${lang.name} - ${value}
+        ${encodeHTML(lang.name)} - ${encodeHTML(value)}
       </text>
     </g>
   `;
@@ -125,6 +137,13 @@ const createTextNode = ({
   progressBarBackgroundColor,
   progressBarWidth,
 }) => {
+  if (!Number.isFinite(index)) {
+    throw new Error(`Invalid index: "${index}"`);
+  }
+  if (!Number.isFinite(progressBarWidth)) {
+    throw new Error(`Invalid progressBarWidth: "${progressBarWidth}"`);
+  }
+
   const staggerDelay = (index + 3) * 150;
   const cardProgress = hideProgress
     ? null
@@ -142,12 +161,12 @@ const createTextNode = ({
 
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
-      <text class="stat bold" y="12.5" data-testid="${id}">${label}:</text>
+      <text class="stat bold" y="12.5" data-testid="${encodeHTML(id)}">${encodeHTML(label)}:</text>
       <text
         class="stat"
         x="${hideProgress ? HIDDEN_PROGRESSBAR_PADDING : PROGRESSBAR_PADDING + progressBarWidth}"
         y="12.5"
-      >${value}</text>
+      >${encodeHTML(value)}</text>
       ${cardProgress}
     </g>
   `;
@@ -179,11 +198,15 @@ const recalculatePercentages = (languages) => {
  * @param {string} colors.textColor The text color.
  * @returns {string} Card CSS styles.
  */
-const getStyles = ({
+const getStyles = function ({
   // eslint-disable-next-line no-unused-vars
   titleColor,
   textColor,
-}) => {
+}) {
+  if (!isPrefixedHexColor(textColor)) {
+    throw new Error(`Invalid text color: "${textColor}"`);
+  }
+
   return `
     .stat {
       font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
@@ -377,7 +400,9 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
               progressBarColor: titleColor,
               // @ts-ignore
               progressBarBackgroundColor:
-                textColor === titleColor ? bgColor : textColor,
+                textColor === titleColor
+                  ? "#fff0" // transparent
+                  : textColor,
               hideProgress: hide_progress,
               progressBarWidth: normalizedWidth - TOTAL_TEXT_WIDTH,
             });

package/src/common/Card.ts

@@ -1,3 +1,4 @@
+import { isPrefixedHexColor, isValidGradient } from "./color.js";
 import { encodeHTML } from "./html.js";
 import { flexLayout } from "./render.js";
 
@@ -33,6 +34,8 @@ class Card {
   /**
    * Creates a new card instance.
    *
+   * The caller must ensure that the passed `titlePrefixIcon` is properly sanitized!
+   *
    * @param props Card arguments.
    * @param props.width Card width.
    * @param props.height Card height.
@@ -40,7 +43,7 @@ class Card {
    * @param props.colors Card colors arguments.
    * @param props.customTitle Card custom title.
    * @param props.defaultTitle Card default title.
-   * @param props.titlePrefixIcon Card title prefix icon.
+   * @param props.titlePrefixIcon Sanitized card title prefix icon.
    */
   constructor({
     width = 100,
@@ -65,13 +68,11 @@ class Card {
     this.hideBorder = false;
     this.hideTitle = false;
 
-    this.border_radius = border_radius;
+    this.border_radius = parseFloat(String(border_radius));
 
     // returns theme based colors with proper overrides and defaults
     this.colors = colors;
-    this.title = encodeHTML(
-      customTitle === undefined ? defaultTitle : customTitle,
-    );
+    this.title = customTitle === undefined ? defaultTitle : customTitle;
 
     this.css = "";
 
@@ -104,7 +105,9 @@ class Card {
   }
 
   /**
-   * @param value The CSS to add to the card.
+   * The caller must ensure that the passed `css` string is properly sanitized!
+   *
+   * @param value The sanitized CSS to add to the card.
    */
   setCSS(value: string): void {
     this.css = value;
@@ -121,10 +124,13 @@ class Card {
    * @param value Whether to hide the title or not.
    */
   setHideTitle(value: boolean): void {
-    this.hideTitle = value;
-    if (value) {
+    if (value && !this.hideTitle) {
       this.height -= 30;
     }
+    if (!value && this.hideTitle) {
+      this.height += 30;
+    }
+    this.hideTitle = value;
   }
 
   /**
@@ -144,7 +150,7 @@ class Card {
         y="0"
         class="header"
         data-testid="header"
-      >${this.title}</text>
+      >${encodeHTML(this.title)}</text>
     `;
 
     const prefixIcon = `
@@ -180,10 +186,12 @@ class Card {
     if (typeof this.colors.bgColor !== "object") {
       return "";
     }
+    if (!isValidGradient(this.colors.bgColor)) {
+      throw new Error(`Invalid gradient: ${this.colors.bgColor.join(",")}`);
+    }
 
     const gradients = this.colors.bgColor.slice(1);
-    return typeof this.colors.bgColor === "object"
-      ? `
+    return `
         <defs>
           <linearGradient
             id="gradient"
@@ -198,8 +206,7 @@ class Card {
               .join(",")}
           </linearGradient>
         </defs>
-        `
-      : "";
+        `;
   }
 
   /**
@@ -230,10 +237,38 @@ class Card {
   };
 
   /**
-   * @param body The inner body of the card.
+   * The caller must ensure that the passed `body` string is properly sanitized!
+   *
+   * @param body The sanitized inner body of the card.
    * @returns The rendered card.
    */
   render(body: string): string {
+    if (!Number.isFinite(this.border_radius)) {
+      throw new Error(`Invalid border radius: "${this.border_radius}"`);
+    }
+    if (
+      this.colors.titleColor !== undefined &&
+      !isPrefixedHexColor(this.colors.titleColor)
+    ) {
+      throw new Error(`Invalid title color: "${this.colors.titleColor}"`);
+    }
+    if (
+      this.colors.borderColor !== undefined &&
+      !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)
+        : isPrefixedHexColor(this.colors.bgColor))
+    ) {
+      throw new Error(
+        `Invalid background color: ${String(this.colors.bgColor)}`,
+      );
+    }
+
     return `
       <svg
         width="${this.width}"
@@ -244,8 +279,8 @@ class Card {
         role="img"
         aria-labelledby="descId"
       >
-        <title id="titleId">${this.a11yTitle}</title>
-        <desc id="descId">${this.a11yDesc}</desc>
+        <title id="titleId">${encodeHTML(this.a11yTitle)}</title>
+        <desc id="descId">${encodeHTML(this.a11yDesc)}</desc>
         <style>
           .header {
             font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;

package/src/common/color.ts

@@ -1,30 +1,86 @@
 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 string is a valid hex color.
+ * 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 hexColor String to check.
- * @returns True if the given string is a valid hex color.
+ * @param value Value to check.
+ * @returns True if the value is a bare hex color.
  */
-const isValidHexColor = (hexColor: string): boolean => {
-  return new RegExp(
-    /^([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4})$/,
-  ).test(hexColor);
+const isBareHexColor = (value: unknown): boolean => {
+  return typeof value === "string" && HEX_COLOR.test(value);
 };
 
 /**
- * Check if the given string is a valid gradient.
+ * 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 colors Array of colors.
- * @returns True if the given string is a valid gradient.
+ * @param value Value to check.
+ * @returns True if the value is a `#`-prefixed hex color.
  */
-const isValidGradient = (colors: Array<string>): boolean => {
+const isPrefixedHexColor = (value: unknown): boolean => {
   return (
-    colors.length > 2 &&
-    colors.slice(1).every((color) => isValidHexColor(color))
+    typeof value === "string" &&
+    value.startsWith("#") &&
+    HEX_COLOR.test(value.slice(1))
   );
 };
 
+/**
+ * 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 parts Gradient parts: `[angle, ...stops]`.
+ * @returns True if the parts form a valid gradient.
+ */
+const isValidGradient = (parts: Array<string>): boolean => {
+  const [angle, ...stops] = parts;
+  return (
+    stops.length >= 2 &&
+    angle !== undefined &&
+    angle.trim() !== "" &&
+    Number.isFinite(Number(angle)) &&
+    stops.every(isBareHexColor)
+  );
+};
+
+/**
+ * Checks if a string is a valid input for a color or gradient.
+ *
+ * @param color String to check, may be null or undefined.
+ * @returns True if the given string is a valid input.
+ */
+const isValidColorInput = (color: string | null | undefined): boolean => {
+  if (color === null || color === undefined) {
+    return true;
+  }
+  return isValidGradient(color.split(",")) || isBareHexColor(color);
+};
+
+/**
+ * Iterates over a collection of colors inputs and verifies that each is a valid color or gradient.
+ *
+ * @param colors Object whose values are checked as valid color inputs.
+ * @return The first key where the associated input value is not valid. null if all inputs are valid.
+ */
+const findInvalidColor = (
+  colors: Record<string, string | null | undefined>,
+): string | null => {
+  for (const [key, value] of Object.entries(colors)) {
+    if (!isValidColorInput(value)) {
+      return key;
+    }
+  }
+  return null;
+};
+
 /**
  * Retrieves a gradient if color has more than one valid hex codes else a single color.
  *
@@ -41,7 +97,7 @@ const fallbackColor = (
     return colors;
   }
 
-  if (color !== undefined && isValidHexColor(color)) {
+  if (color !== undefined && isBareHexColor(color)) {
     return `#${color}`;
   }
 
@@ -82,13 +138,13 @@ const getCardColors = ({
   ring_color,
   theme,
 }: {
-  title_color?: string;
-  text_color?: string;
-  icon_color?: string;
-  bg_color?: string;
-  border_color?: string;
-  ring_color?: string;
-  theme?: string;
+  title_color?: string | undefined;
+  text_color?: string | undefined;
+  icon_color?: string | undefined;
+  bg_color?: string | undefined;
+  border_color?: string | undefined;
+  ring_color?: string | undefined;
+  theme?: string | undefined;
 }): CardColors => {
   const defaultTheme = themes.default;
   const isThemeProvided = theme !== undefined && theme in themes;
@@ -146,4 +202,11 @@ const getCardColors = ({
   return { titleColor, iconColor, textColor, bgColor, borderColor, ringColor };
 };
 
-export { fallbackColor, getCardColors };
+export {
+  fallbackColor,
+  getCardColors,
+  findInvalidColor,
+  isValidGradient,
+  isBareHexColor,
+  isPrefixedHexColor,
+};

package/src/common/html.ts

@@ -6,7 +6,7 @@
 const encodeHTML = (str: string): string => {
   return (
     str
-      .replace(/[\u00A0-\u9999<>&](?!#)/gim, (i: string) => {
+      .replace(/[\u00A0-\u9999<>&"'](?!#)/gim, (i: string) => {
         return `&#${i.charCodeAt(0)};`;
       })
       // eslint-disable-next-line no-control-regex