@unmade/svg-helpers 0.1.0 → 0.1.2

package/dist/colours/format.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=o=>{let e=Array.from(o),t=!1;return e[0]==="#"&&(e.shift(),t=!0),e.length===3&&(e=e.map(r=>`${r}${r}`)),`${t?"#":""}${e.join("").toLowerCase()}`};exports.expandHex=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./named-colours.cjs"),m=r=>{let t=Array.from(r),s=!1;return t[0]==="#"&&(t.shift(),s=!0),t.length===3&&(t=t.map(e=>`${e}${e}`)),`${s?"#":""}${t.join("").toLowerCase()}`},h=r=>Math.max(0,Math.min(255,Math.round(r))).toString(16).padStart(2,"0"),l=(...r)=>{const[t,s,e]=Array.isArray(r[0])?r[0]:r;return`#${h(t)}${h(s)}${h(e)}`},f=(r,t,s)=>{if(t===0){const d=Math.round(s*255);return[d,d,d]}const e=(r%360+360)%360,o=(1-Math.abs(2*s-1))*t,u=o*(1-Math.abs(e/60%2-1)),c=s-o/2;let n=0,a=0,i=0;return e<60?(n=o,a=u,i=0):e<120?(n=u,a=o,i=0):e<180?(n=0,a=o,i=u):e<240?(n=0,a=u,i=o):e<300?(n=u,a=0,i=o):(n=o,a=0,i=u),[Math.round((n+c)*255),Math.round((a+c)*255),Math.round((i+c)*255)]},b=r=>/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.test(r),x=r=>{const t=r.trim().toLowerCase();if(t.startsWith("#")||/^[0-9a-f]{3}([0-9a-f]{3})?$/.test(t))return b(t)?m(t):void 0;if(t.startsWith("rgb")){const e=t.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+\s*)?\)/);return e?l(Number.parseInt(e[1],10),Number.parseInt(e[2],10),Number.parseInt(e[3],10)):void 0}if(t.startsWith("hsl")){const e=t.match(/hsla?\(\s*(\d+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*[\d.]+\s*)?\)/);if(!e)return;const o=Number.parseInt(e[1],10),u=Number.parseFloat(e[2])/100,c=Number.parseFloat(e[3])/100,[n,a,i]=f(o,u,c);return l(n,a,i)}const s=p.CSS_NAMED_COLOURS[t];if(s)return s};exports.expandHex=m;exports.hslToRgb=f;exports.isHex=b;exports.normaliseColour=x;exports.rgbToHex=l;

package/dist/colours/format.mjs

@@ -1,7 +1,51 @@
-const a = (o) => {
-  let e = Array.from(o), t = !1;
-  return e[0] === "#" && (e.shift(), t = !0), e.length === 3 && (e = e.map((r) => `${r}${r}`)), `${t ? "#" : ""}${e.join("").toLowerCase()}`;
+import { CSS_NAMED_COLOURS as f } from "./named-colours.mjs";
+const l = (s) => {
+  let t = Array.from(s), e = !1;
+  return t[0] === "#" && (t.shift(), e = !0), t.length === 3 && (t = t.map((r) => `${r}${r}`)), `${e ? "#" : ""}${t.join("").toLowerCase()}`;
+}, m = (s) => Math.max(0, Math.min(255, Math.round(s))).toString(16).padStart(2, "0"), d = (...s) => {
+  const [t, e, r] = Array.isArray(s[0]) ? s[0] : s;
+  return `#${m(t)}${m(e)}${m(r)}`;
+}, b = (s, t, e) => {
+  if (t === 0) {
+    const h = Math.round(e * 255);
+    return [h, h, h];
+  }
+  const r = (s % 360 + 360) % 360, n = (1 - Math.abs(2 * e - 1)) * t, c = n * (1 - Math.abs(r / 60 % 2 - 1)), u = e - n / 2;
+  let o = 0, a = 0, i = 0;
+  return r < 60 ? (o = n, a = c, i = 0) : r < 120 ? (o = c, a = n, i = 0) : r < 180 ? (o = 0, a = n, i = c) : r < 240 ? (o = 0, a = c, i = n) : r < 300 ? (o = c, a = 0, i = n) : (o = n, a = 0, i = c), [
+    Math.round((o + u) * 255),
+    Math.round((a + u) * 255),
+    Math.round((i + u) * 255)
+  ];
+}, p = (s) => /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.test(s), M = (s) => {
+  const t = s.trim().toLowerCase();
+  if (t.startsWith("#") || /^[0-9a-f]{3}([0-9a-f]{3})?$/.test(t))
+    return p(t) ? l(t) : void 0;
+  if (t.startsWith("rgb")) {
+    const r = t.match(
+      /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+\s*)?\)/
+    );
+    return r ? d(
+      Number.parseInt(r[1], 10),
+      Number.parseInt(r[2], 10),
+      Number.parseInt(r[3], 10)
+    ) : void 0;
+  }
+  if (t.startsWith("hsl")) {
+    const r = t.match(
+      /hsla?\(\s*(\d+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*[\d.]+\s*)?\)/
+    );
+    if (!r) return;
+    const n = Number.parseInt(r[1], 10), c = Number.parseFloat(r[2]) / 100, u = Number.parseFloat(r[3]) / 100, [o, a, i] = b(n, c, u);
+    return d(o, a, i);
+  }
+  const e = f[t];
+  if (e) return e;
 };
 export {
-  a as expandHex
+  l as expandHex,
+  b as hslToRgb,
+  p as isHex,
+  M as normaliseColour,
+  d as rgbToHex
 };

package/dist/colours/named-colours.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};exports.CSS_NAMED_COLOURS=e;

package/dist/colours/named-colours.mjs

@@ -0,0 +1,153 @@
+const e = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#00ffff",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  black: "#000000",
+  blanchedalmond: "#ffebcd",
+  blue: "#0000ff",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgreen: "#006400",
+  darkgrey: "#a9a9a9",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkslategrey: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  fuchsia: "#ff00ff",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  gold: "#ffd700",
+  goldenrod: "#daa520",
+  gray: "#808080",
+  green: "#008000",
+  greenyellow: "#adff2f",
+  grey: "#808080",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavender: "#e6e6fa",
+  lavenderblush: "#fff0f5",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2",
+  lightgray: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightgrey: "#d3d3d3",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#778899",
+  lightslategrey: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#00ff00",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  maroon: "#800000",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  navy: "#000080",
+  oldlace: "#fdf5e6",
+  olive: "#808000",
+  olivedrab: "#6b8e23",
+  orange: "#ffa500",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  purple: "#800080",
+  rebeccapurple: "#663399",
+  red: "#ff0000",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  silver: "#c0c0c0",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  slategrey: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  teal: "#008080",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  white: "#ffffff",
+  whitesmoke: "#f5f5f5",
+  yellow: "#ffff00",
+  yellowgreen: "#9acd32"
+};
+export {
+  e as CSS_NAMED_COLOURS
+};

package/dist/colours.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./colours/format.cjs"),e={svg:"svg",circle:"circle",desc:"desc",ellipse:"ellipse",rect:"rect",line:"line",path:"path",polygon:"polygon",polyline:"polyline",stop:"stop"},o={fill:"fill",stroke:"stroke"},E={tiling:[e.circle,e.ellipse,e.rect,e.line,e.path,e.polygon,e.polyline,e.stop,`[${o.fill}]`,`[${o.stroke}]`],nonTiling:[e.circle,e.desc,e.ellipse,e.rect,e.line,e.path,e.polygon,e.polyline,e.stop,`[${o.fill}]`,`[${o.stroke}]`]},a=l=>Array.from(l.querySelectorAll(E.tiling.map(t=>`*:not(clipPath) > ${t}`).join(", "))),u=l=>{const t=l.getAttribute(o.stroke);return t==="none"||!t?!1:t},d=l=>{const g=a(l).reduce((r,n)=>{const i=n.getAttribute("stop-color"),c=n.getAttribute(o.fill)||"#000",p=u(n);return!i&&c.startsWith("#")&&r.add(s.expandHex(c)),i&&r.add(s.expandHex(i)),p&&r.add(s.expandHex(p)),r},new Set);return Array.from(g)};exports.COLOURABLE_ELEMENT_SELECTORS=E;exports.ELEMENTS=e;exports.getColourableElements=a;exports.getUniqueColoursFromSVG=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("@unmade/platform"),l=require("./colours/format.cjs"),d=require("./colours/named-colours.cjs"),e={svg:"svg",circle:"circle",desc:"desc",ellipse:"ellipse",rect:"rect",line:"line",path:"path",polygon:"polygon",polyline:"polyline",stop:"stop"},n={fill:"fill",stroke:"stroke"},p={tiling:[e.circle,e.ellipse,e.rect,e.line,e.path,e.polygon,e.polyline,e.stop,`[${n.fill}]`,`[${n.stroke}]`],nonTiling:[e.circle,e.desc,e.ellipse,e.rect,e.line,e.path,e.polygon,e.polyline,e.stop,`[${n.fill}]`,`[${n.stroke}]`]},S=o=>Array.from(o.querySelectorAll(p.tiling.map(r=>`*:not(clipPath) > ${r}`).join(", "))),C=o=>{const r=o.getAttribute(n.stroke);return r==="none"||!r?!1:r},a=o=>{if(!(o==="none"||o==="transparent"||o.startsWith("url(")))return l.normaliseColour(o)},m=o=>{const s=S(o).reduce((i,c)=>{const g=c.getAttribute("stop-color"),E=c.getAttribute(n.fill)||"#000",u=C(c);if(!g){const t=a(E);t&&i.add(t)}if(g){const t=a(g);t&&i.add(t)}if(u){const t=a(u);t&&i.add(t)}return i},new Set);return Array.from(s)},T=o=>{const s=new f.DOMParser().parseFromString(o,"image/svg+xml").querySelector("svg");return s?m(s):[]};exports.expandHex=l.expandHex;exports.hslToRgb=l.hslToRgb;exports.isHex=l.isHex;exports.normaliseColour=l.normaliseColour;exports.rgbToHex=l.rgbToHex;exports.CSS_NAMED_COLOURS=d.CSS_NAMED_COLOURS;exports.COLOURABLE_ELEMENT_SELECTORS=p;exports.ELEMENTS=e;exports.getColourableElements=S;exports.getColoursFromSvgString=T;exports.getUniqueColoursFromSVG=m;

package/dist/colours.mjs

@@ -1,4 +1,7 @@
-import { expandHex as s } from "./colours/format.mjs";
+import { DOMParser as f } from "@unmade/platform";
+import { normaliseColour as m } from "./colours/format.mjs";
+import { expandHex as x, hslToRgb as h, isHex as O, rgbToHex as b } from "./colours/format.mjs";
+import { CSS_NAMED_COLOURS as R } from "./colours/named-colours.mjs";
 const e = {
   svg: "svg",
   circle: "circle",
@@ -10,10 +13,10 @@ const e = {
   polygon: "polygon",
   polyline: "polyline",
   stop: "stop"
-}, l = {
+}, n = {
   fill: "fill",
   stroke: "stroke"
-}, g = {
+}, u = {
   tiling: [
     e.circle,
     e.ellipse,
@@ -23,8 +26,8 @@ const e = {
     e.polygon,
     e.polyline,
     e.stop,
-    `[${l.fill}]`,
-    `[${l.stroke}]`
+    `[${n.fill}]`,
+    `[${n.stroke}]`
   ],
   nonTiling: [
     e.circle,
@@ -36,31 +39,54 @@ const e = {
     e.polygon,
     e.polyline,
     e.stop,
-    `[${l.fill}]`,
-    `[${l.stroke}]`
+    `[${n.fill}]`,
+    `[${n.stroke}]`
   ]
-}, f = (o) => Array.from(
-  o.querySelectorAll(
-    g.tiling.map((t) => `*:not(clipPath) > ${t}`).join(", ")
+}, d = (t) => Array.from(
+  t.querySelectorAll(
+    u.tiling.map((r) => `*:not(clipPath) > ${r}`).join(", ")
   )
-), u = (o) => {
-  const t = o.getAttribute(l.stroke);
-  return t === "none" || !t ? !1 : t;
-}, d = (o) => {
-  const a = f(o).reduce(
-    (r, n) => {
-      const i = n.getAttribute("stop-color"), c = n.getAttribute(l.fill) || "#000", p = u(n);
-      return !i && c.startsWith("#") && r.add(s(c)), i && r.add(s(i)), p && r.add(s(p)), r;
+), S = (t) => {
+  const r = t.getAttribute(n.stroke);
+  return r === "none" || !r ? !1 : r;
+}, p = (t) => {
+  if (!(t === "none" || t === "transparent" || t.startsWith("url(")))
+    return m(t);
+}, E = (t) => {
+  const l = d(t).reduce(
+    (s, i) => {
+      const c = i.getAttribute("stop-color"), a = i.getAttribute(n.fill) || "#000", g = S(i);
+      if (!c) {
+        const o = p(a);
+        o && s.add(o);
+      }
+      if (c) {
+        const o = p(c);
+        o && s.add(o);
+      }
+      if (g) {
+        const o = p(g);
+        o && s.add(o);
+      }
+      return s;
     },
     /* @__PURE__ */ new Set()
   );
-  return Array.from(
-    a
-  );
+  return Array.from(l);
+}, C = (t) => {
+  const l = new f().parseFromString(t, "image/svg+xml").querySelector("svg");
+  return l ? E(l) : [];
 };
 export {
-  g as COLOURABLE_ELEMENT_SELECTORS,
+  u as COLOURABLE_ELEMENT_SELECTORS,
+  R as CSS_NAMED_COLOURS,
   e as ELEMENTS,
-  f as getColourableElements,
-  d as getUniqueColoursFromSVG
+  x as expandHex,
+  d as getColourableElements,
+  C as getColoursFromSvgString,
+  E as getUniqueColoursFromSVG,
+  h as hslToRgb,
+  O as isHex,
+  m as normaliseColour,
+  b as rgbToHex
 };

package/dist/index.d.ts

@@ -3,6 +3,14 @@ export declare const COLOURABLE_ELEMENT_SELECTORS: {
     nonTiling: string[];
 };
 
+/**
+ * CSS named colours mapped to their lowercase hex equivalents.
+ *
+ * Lookup keys are lowercase to allow case-insensitive matching.
+ * @see https://www.w3.org/TR/css-color-4/#named-colors
+ */
+export declare const CSS_NAMED_COLOURS: Readonly<Record<string, string>>;
+
 export declare const ELEMENTS: {
     svg: string;
     circle: string;
@@ -16,6 +24,14 @@ export declare const ELEMENTS: {
     stop: string;
 };
 
+/**
+ * Convert a short hex to full length.
+ *
+ * @param short - the initial hex value
+ * @returns the expanded hex value
+ */
+export declare const expandHex: (short: string) => string;
+
 /**
  * Fetch all colourable elements from an SVG
  *
@@ -24,12 +40,60 @@ export declare const ELEMENTS: {
  */
 export declare const getColourableElements: (svg: SVGElement) => SVGElement[];
 
+/**
+ * Extract unique normalised colours from a raw SVG string.
+ *
+ * Parses the string via DOMParser, then delegates to `getUniqueColoursFromSVG`.
+ * This is a convenience function for working with SVG glyph data from fonts.
+ *
+ * @param svgString - Raw SVG markup
+ * @returns Array of unique `#rrggbb` hex colour strings
+ */
+export declare const getColoursFromSvgString: (svgString: string) => string[];
+
 /**
  * Get a list of the unique colours used in an SVG document.
  *
+ * Extracts fill, stroke, and stop-color attributes from all colourable
+ * elements. Normalises all colour formats (hex, rgb, hsl, named) to
+ * canonical `#rrggbb` lowercase hex. Elements inside `<clipPath>` are excluded.
+ *
  * @param {SVGElement} svg - the document
- * @returns {Array} the colours (with shortened hex codes expanded to full)
+ * @returns {string[]} unique colour hex strings
+ */
+export declare const getUniqueColoursFromSVG: (svg: SVGElement) => string[];
+
+/**
+ * Convert HSL values to RGB.
+ *
+ * @param h - Hue in degrees (0–360)
+ * @param s - Saturation as a fraction (0–1)
+ * @param l - Lightness as a fraction (0–1)
+ * @returns [r, g, b] with each channel in 0–255
+ */
+export declare const hslToRgb: (h: number, s: number, l: number) => [number, number, number];
+
+/**
+ * Validate whether a string is a hex colour (3 or 6 digit, with optional #).
+ */
+export declare const isHex: (str: string) => boolean;
+
+/**
+ * Normalise any CSS colour value to a canonical `#rrggbb` lowercase hex string.
+ *
+ * Supported formats:
+ * - Hex: `#RGB`, `#RRGGBB` (with or without `#`)
+ * - RGB/RGBA: `rgb(r, g, b)`, `rgba(r, g, b, a)`
+ * - HSL/HSLA: `hsl(h, s%, l%)`, `hsla(h, s%, l%, a)`
+ * - CSS named colours: `red`, `blue`, `coral`, etc.
+ *
+ * @returns Normalised `#rrggbb` string, or `undefined` if the value is not a recognised colour
+ */
+export declare const normaliseColour: (value: string) => string | undefined;
+
+/**
+ * Convert RGB channel values (0–255) to a `#rrggbb` hex string.
  */
-export declare const getUniqueColoursFromSVG: (svg: SVGElement) => unknown[];
+export declare const rgbToHex: (...args: [r: number, g: number, b: number] | [[number, number, number]]) => string;
 
 export { }

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@unmade/svg-helpers",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Set of helper functions for working with SVG content",
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/colours.cjs",
+  "module": "./dist/colours.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
+      "import": "./dist/colours.mjs",
+      "require": "./dist/colours.cjs",
       "types": "./dist/index.d.ts"
     }
   },
@@ -22,11 +22,14 @@
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   },
+  "dependencies": {
+    "@unmade/platform": "^0.1.2"
+  },
   "devDependencies": {
-    "typescript": "^5.3.0",
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.7.0",
-    "vitest": "^1.2.0"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
   },
   "keywords": [
     "svg"