@bytechain.cn/colamd-themes 0.3.2 → 0.5.1

package/src/color-utils.ts

@@ -1,120 +1,137 @@
-/** Color manipulation utilities. */
-
-export function hexToRgb(hex: string): [number, number, number] {
-  hex = hex.replace("#", "");
-  if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("");
-  return [
-    parseInt(hex.substring(0, 2), 16),
-    parseInt(hex.substring(2, 4), 16),
-    parseInt(hex.substring(4, 6), 16),
-  ];
-}
-
-export function rgbToHex(r: number, g: number, b: number): string {
-  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v)));
-  return `#${clamp(r).toString(16).padStart(2, "0")}${clamp(g).toString(16).padStart(2, "0")}${clamp(b).toString(16).padStart(2, "0")}`;
-}
-
-export function lighten(hex: string, factor: number = 0.3): string {
-  const [r, g, b] = hexToRgb(hex);
-  return rgbToHex(
-    r + (255 - r) * factor,
-    g + (255 - g) * factor,
-    b + (255 - b) * factor
-  );
-}
-
-export function darken(hex: string, factor: number = 0.15): string {
-  const [r, g, b] = hexToRgb(hex);
-  return rgbToHex(r * (1 - factor), g * (1 - factor), b * (1 - factor));
-}
-
-export function toRgba(hex: string, alpha: number = 0.18): string {
-  const [r, g, b] = hexToRgb(hex);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
-export function rgbToHsl(
-  r: number, g: number, b: number
-): [number, number, number] {
-  r /= 255; g /= 255; b /= 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  let h = 0, s: number;
-  const l = (max + min) / 2;
-
-  if (max === min) {
-    h = s = 0;
-  } else {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch (max) {
-      case r:
-        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-        break;
-      case g:
-        h = ((b - r) / d + 2) / 6;
-        break;
-      case b:
-        h = ((r - g) / d + 4) / 6;
-        break;
-    }
-  }
-  return [h, s, l];
-}
-
-export function deriveSyntaxColors(
-  baseHex: string
-): Record<string, string> {
-  const [r, g, b] = hexToRgb(baseHex);
-  const [, , l] = rgbToHsl(r, g, b);
-  const isDark = l < 0.5;
-
-  if (isDark) {
-    return {
-      comment: lighten(baseHex, 0.4),
-      punctuation: lighten(baseHex, 0.2),
-      keyword: "#569cd6",
-      booleanBuiltinTag: "#569cd6",
-      string: "#ce9178",
-      number: "#b5cea8",
-      functionClass: "#dcdcaa",
-      operator: lighten(baseHex, 0.2),
-      variable: lighten(baseHex, 0.2),
-      regex: "#d16969",
-    };
-  } else {
-    return {
-      comment: darken(baseHex, 0.4),
-      punctuation: baseHex,
-      keyword: "#0000ff",
-      booleanBuiltinTag: "#0000ff",
-      string: "#a31515",
-      number: "#098658",
-      functionClass: "#795e26",
-      operator: baseHex,
-      variable: baseHex,
-      regex: "#811f3f",
-    };
-  }
-}
-
-export function normalizeThemeStyle(style: import("./models.js").ThemeStyle): void {
-  const p = style.palette;
-  const t = style.typography;
-  const s = style.syntax;
-
-  if (!p.headingColor) p.headingColor = p.textColor;
-  if (!p.codeColor) p.codeColor = p.textColor;
-  if (!p.blockquoteBorder) p.blockquoteBorder = p.accentColor;
-  if (!p.selectionBg) p.selectionBg = toRgba(p.accentColor);
-  if (!t.headingFontFamily) t.headingFontFamily = t.bodyFontFamily;
-
-  if (!s.comment) {
-    const derived = deriveSyntaxColors(p.codeBlockText);
-    for (const [key, value] of Object.entries(derived)) {
-      const k = key as keyof typeof s;
-      if (!s[k]) (s as unknown as Record<string, string>)[key] = value;
-    }
-  }
-}
+/** Color manipulation utilities. */
+
+export function hexToRgb(hex: string): [number, number, number] {
+  const trimmed = hex.replace(/^#/, "").trim();
+  if (!/^[0-9a-fA-F]{6}$/.test(trimmed) && !/^[0-9a-fA-F]{3}$/.test(trimmed)) {
+    throw new Error(`Invalid hex color: "${hex}"`);
+  }
+  hex = trimmed;
+  if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  if ([r, g, b].some((v) => Number.isNaN(v))) {
+    throw new Error(`Invalid hex color: "${hex}"`);
+  }
+  return [r, g, b];
+}
+
+export function rgbToHex(r: number, g: number, b: number): string {
+  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v)));
+  return `#${clamp(r).toString(16).padStart(2, "0")}${clamp(g).toString(16).padStart(2, "0")}${clamp(b).toString(16).padStart(2, "0")}`;
+}
+
+export function lighten(hex: string, factor: number = 0.3): string {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(
+    r + (255 - r) * factor,
+    g + (255 - g) * factor,
+    b + (255 - b) * factor
+  );
+}
+
+export function darken(hex: string, factor: number = 0.15): string {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(r * (1 - factor), g * (1 - factor), b * (1 - factor));
+}
+
+export function toRgba(hex: string, alpha: number = 0.18): string {
+  const [r, g, b] = hexToRgb(hex);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+export function rgbToHsl(
+  r: number, g: number, b: number
+): [number, number, number] {
+  r /= 255; g /= 255; b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s: number;
+  const l = (max + min) / 2;
+
+  if (max === min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h, s, l];
+}
+
+export function deriveSyntaxColors(
+  baseHex: string
+): Record<string, string> {
+  const [r, g, b] = hexToRgb(baseHex);
+  const [, , l] = rgbToHsl(r, g, b);
+  const isDark = l < 0.5;
+
+  if (isDark) {
+    return {
+      comment: lighten(baseHex, 0.4),
+      punctuation: lighten(baseHex, 0.2),
+      keyword: "#569cd6",
+      booleanBuiltinTag: "#569cd6",
+      string: "#ce9178",
+      number: "#b5cea8",
+      functionClass: "#dcdcaa",
+      operator: lighten(baseHex, 0.2),
+      variable: lighten(baseHex, 0.2),
+      regex: "#d16969",
+    };
+  } else {
+    return {
+      comment: darken(baseHex, 0.4),
+      punctuation: baseHex,
+      keyword: "#0000ff",
+      booleanBuiltinTag: "#0000ff",
+      string: "#a31515",
+      number: "#098658",
+      functionClass: "#795e26",
+      operator: baseHex,
+      variable: baseHex,
+      regex: "#811f3f",
+    };
+  }
+}
+
+export function sanitizeCssString(value: string): string {
+  // Remove HTML-injection vectors while preserving CSS syntax (quotes, spaces, commas)
+  return value.replace(/[<>]/g, "");
+}
+
+export function normalizeThemeStyle(style: import("./models.js").ThemeStyle): void {
+  const p = style.palette;
+  const t = style.typography;
+  const s = style.syntax;
+
+  if (!p.headingColor) p.headingColor = p.textColor;
+  if (!p.codeColor) p.codeColor = p.textColor;
+  if (!p.blockquoteBorder) p.blockquoteBorder = p.accentColor;
+  if (!p.selectionBg) p.selectionBg = toRgba(p.accentColor);
+  if (!t.headingFontFamily) t.headingFontFamily = t.bodyFontFamily;
+
+  // Sanitize font stacks to prevent CSS injection via crafted input
+  if (t.bodyFontFamily)    t.bodyFontFamily    = sanitizeCssString(t.bodyFontFamily);
+  if (t.headingFontFamily) t.headingFontFamily = sanitizeCssString(t.headingFontFamily);
+  if (t.codeFontFamily)    t.codeFontFamily    = sanitizeCssString(t.codeFontFamily);
+  if (style.seedTypography.fontMermaid) style.seedTypography.fontMermaid = sanitizeCssString(style.seedTypography.fontMermaid);
+
+  if (!s.comment) {
+    const derived = deriveSyntaxColors(p.codeBlockText);
+    for (const [key, value] of Object.entries(derived)) {
+      const k = key as keyof typeof s;
+      if (!s[k]) (s as unknown as Record<string, string>)[key] = value;
+    }
+  }
+}

package/src/contrast.ts

@@ -1,66 +1,66 @@
-/** WCAG 2.1 relative luminance and contrast ratio calculations. */
-
-import { hexToRgb } from "./color-utils.js";
-
-/** Linearize an sRGB channel value (0-255) → (0-1). */
-function linearize(channel: number): number {
-  const c = channel / 255;
-  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-}
-
-/** WCAG 2.1 relative luminance of a hex color. */
-export function relativeLuminance(hex: string): number {
-  const [r, g, b] = hexToRgb(hex);
-  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
-}
-
-/** WCAG 2.1 contrast ratio between two hex colors. Range: 1-21. */
-export function contrastRatio(hex1: string, hex2: string): number {
-  const L1 = relativeLuminance(hex1);
-  const L2 = relativeLuminance(hex2);
-  const lighter = Math.max(L1, L2);
-  const darker = Math.min(L1, L2);
-  return (lighter + 0.05) / (darker + 0.05);
-}
-
-/** Get HSL lightness (0-1) from a hex color. */
-export function hslLightness(hex: string): number {
-  const [r, g, b] = hexToRgb(hex);
-  const max = Math.max(r, g, b) / 255;
-  const min = Math.min(r, g, b) / 255;
-  return (max + min) / 2;
-}
-
-/** Get HSL saturation (0-1) from a hex color. */
-export function hslSaturation(hex: string): number {
-  const [r, g, b] = hexToRgb(hex);
-  const max = Math.max(r, g, b) / 255;
-  const min = Math.min(r, g, b) / 255;
-  const l = (max + min) / 2;
-  if (max === min) return 0;
-  return l > 0.5 ? (max - min) / (2 - max - min) : (max - min) / (max + min);
-}
-
-/** Get HSL hue (0-360) from a hex color. */
-export function hslHue(hex: string): number {
-  const [r, g, b] = hexToRgb(hex);
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  if (max === min) return 0;
-  const d = max - min;
-  let h = 0;
-  if (max === r) h = ((g - b) / d) % 6;
-  else if (max === g) h = (b - r) / d + 2;
-  else h = (r - g) / d + 4;
-  return Math.round(h * 60);
-}
-
-/** Check if two colors are on the same hue axis (within tolerance degrees). */
-export function sameHueAxis(h1: string, h2: string, tolerance: number = 5): boolean {
-  return Math.abs(hslHue(h1) - hslHue(h2)) <= tolerance;
-}
-
-/** Determine if a palette is light mode (bg luminance > 0.5). */
-export function isLightMode(bgHex: string): boolean {
-  return hslLightness(bgHex) > 0.5;
-}
+/** WCAG 2.1 relative luminance and contrast ratio calculations. */
+
+import { hexToRgb } from "./color-utils.js";
+
+/** Linearize an sRGB channel value (0-255) → (0-1). */
+function linearize(channel: number): number {
+  const c = channel / 255;
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+/** WCAG 2.1 relative luminance of a hex color. */
+export function relativeLuminance(hex: string): number {
+  const [r, g, b] = hexToRgb(hex);
+  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
+}
+
+/** WCAG 2.1 contrast ratio between two hex colors. Range: 1-21. */
+export function contrastRatio(hex1: string, hex2: string): number {
+  const L1 = relativeLuminance(hex1);
+  const L2 = relativeLuminance(hex2);
+  const lighter = Math.max(L1, L2);
+  const darker = Math.min(L1, L2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+/** Get HSL lightness (0-1) from a hex color. */
+export function hslLightness(hex: string): number {
+  const [r, g, b] = hexToRgb(hex);
+  const max = Math.max(r, g, b) / 255;
+  const min = Math.min(r, g, b) / 255;
+  return (max + min) / 2;
+}
+
+/** Get HSL saturation (0-1) from a hex color. */
+export function hslSaturation(hex: string): number {
+  const [r, g, b] = hexToRgb(hex);
+  const max = Math.max(r, g, b) / 255;
+  const min = Math.min(r, g, b) / 255;
+  const l = (max + min) / 2;
+  if (max === min) return 0;
+  return l > 0.5 ? (max - min) / (2 - max - min) : (max - min) / (max + min);
+}
+
+/** Get HSL hue (0-360) from a hex color. */
+export function hslHue(hex: string): number {
+  const [r, g, b] = hexToRgb(hex);
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  if (max === min) return 0;
+  const d = max - min;
+  let h = 0;
+  if (max === r) h = ((g - b) / d) % 6;
+  else if (max === g) h = (b - r) / d + 2;
+  else h = (r - g) / d + 4;
+  return Math.round(h * 60);
+}
+
+/** Check if two colors are on the same hue axis (within tolerance degrees). */
+export function sameHueAxis(h1: string, h2: string, tolerance: number = 5): boolean {
+  return Math.abs(hslHue(h1) - hslHue(h2)) <= tolerance;
+}
+
+/** Determine if a palette is light mode (bg luminance > 0.5). */
+export function isLightMode(bgHex: string): boolean {
+  return hslLightness(bgHex) > 0.5;
+}