first commit

script.js

@@ -0,0 +1,111 @@
+import * as culori from './culori.js';
+
+window.culori = culori;
+
+const convertToOklch = culori.converter('oklch');
+
+function parse_oklch(def) {
+  return convertToOklch(culori.parse(def));
+}
+
+const color_defs_input = document.getElementById('color_defs');
+const named_colors_input = document.getElementById('named_colors');
+const display = document.getElementById('display');
+
+function el(name, attr, content) {
+  const element = document.createElementNS('http://www.w3.org/2000/svg', name);
+  if(attr) {
+    for(let [k,v] of Object.entries(attr)) {
+      element.setAttribute(k, v);
+    }
+  }
+  if(content) {
+    element.innerHTML = content;
+  }
+  return element;
+}
+
+function update() {
+  const defs = Array.from(new Set(color_defs_input.value.split(/\n/g).map(line=>line.trim().replace(';','')).filter(l=>l))).toSorted();
+  const colors = defs.map(def => { return {def, color: parse_oklch(def)} });
+
+  const named_colors = named_colors_input.value.trim().split(/\n/g).map(line=>line.trim().match(/.*(--.*?):\s*(.*);/)).filter(m=>m).map(([_,name,def]) => {return {name,def,color: parse_oklch(def)}});
+
+  display.innerHTML = '';
+
+  const [width, height] = [500, 500];
+
+  function project_color(color) {
+    const {c,h,l} = color;
+    const r = (1 - Math.sqrt(1-l)) * width*0.4 + width*0.1;
+    const an = Math.PI / 180 * (h || 0);
+    return {x: Math.cos(an) * r + width/2, y: Math.sin(an) * r + height/2};
+  }
+
+  const margin = 0.1;
+  colors.forEach(({def,color},i) => {
+    const jitter = 1;
+    const {c,h,l} = color;
+    const {x,y} = project_color(color);
+    const size = 10;
+    const g = el('g', {transform: `translate(${x} ${y})`});
+    const radius = size * c/0.2;
+    const mark = el('rect', {x:-size, y:-size, width:2*size, height: 2*size, rx: radius, ry: radius, fill: def, class: 'mark'});
+    g.append(mark);
+    const name = el('text', {x: x + size*1.2,y: y, class: 'label'}, def);
+    display.append(g);
+
+    mark.addEventListener('pointerover', () => display.append(name));
+    mark.addEventListener('pointerleave', () => display.removeChild(name));
+  })
+
+  named_colors.forEach(({def,name,color},i) => {
+    if(color === undefined) {
+      return;
+    }
+    const {c,h,l} = color;
+    const {x,y} = project_color(color);
+    const size = 10;
+    const g = el('g', {transform: `translate(${x} ${y})`});
+    const radius = size * c/0.2;
+    const mark = el('polygon', {points: `-6,0 6,-6 6,6`, fill: def, class: 'mark named'});
+    g.append(mark);
+    const tooltip = el('text', {x: x + size*1.2,y: y, class: 'label'}, `${name}: ${def}`);
+    display.append(g);
+
+    mark.addEventListener('pointerover', () => display.append(tooltip));
+    mark.addEventListener('pointerleave', () => display.removeChild(tooltip));
+  })
+}
+
+color_defs_input.addEventListener('input', update);
+update();
+
+
+
+
+function analyse_stylesheet(css) {
+    const colors = [];
+
+    const lines = css.split('\n');
+
+    let block = null;
+    let selector = null;
+
+    lines.forEach((line,i) => {
+        const bm = line.match(/^(\S.*?)\s*\{?$/);
+        if(bm) {
+            block = i;
+            selector = bm[1].trim();
+        } else {
+            const m = line.match(/\s*([^:]+):.*?(#[a-f0-9]{3,6}|(?:rgb|oklch|hsl)\([^\)]*?\))/i);
+            if(m) {
+                const [_, rule, color] = m;
+                console.log(selector, rule, color);
+                colors.push({line:i, selector, rule, color})
+            }
+        }
+    });    
+    colors.sort((a,b) => a.color < b.color ? -1 : a.color > b.color ? 1 : 0);
+    console.table(colors);
+}