@projectwallace/css-design-tokens 0.6.0 → 0.7.0

package/dist/colors.d.ts

@@ -1,2 +1,2 @@
-import { ColorToken, UnparsedToken } from './types.js';
-export declare function color_to_token(color: string): ColorToken | UnparsedToken | null;
+import { ColorValue } from './types.js';
+export declare function color_to_token(color: string): ColorValue | null;

package/dist/css-design-tokens.js

@@ -1,46 +1,39 @@
-import { cssKeywords as A, colorKeywords as D, namedColors as I, systemColors as R, colorFunctions as X, analyze as F } from "@projectwallace/css-analyzer";
-import { convert as H } from "css-time-sort";
-import { convert as Y } from "color-sorter";
-import { parse as g } from "css-tree";
-import { ColorSpace as o, sRGB as B, XYZ_D65 as P, XYZ_D50 as k, XYZ_ABS_D65 as G, Lab_D65 as K, Lab as M, LCH as W, sRGB_Linear as Z, HSL as T, HWB as U, HSV as V, P3_Linear as J, P3 as Q, A98RGB_Linear as ee, A98RGB as te, ProPhoto_Linear as re, ProPhoto as ne, REC_2020_Linear as le, REC_2020 as ie, OKLab as se, OKLCH as oe, OKLrab as ue, parse as ae } from "colorjs.io/fn";
-const x = 0, w = 1, L = 2, d = 3, O = 4, S = 5, N = 6, q = 7, z = 8, C = 9, E = 10, h = 11, ce = /* @__PURE__ */ new Map([
-  [x, "white"],
-  [w, "black"],
-  [L, "grey"],
-  [d, "red"],
-  [O, "orange"],
-  [S, "yellow"],
-  [N, "green"],
-  [q, "cyan"],
-  [z, "blue"],
-  [C, "magenta"],
-  [E, "pink"],
-  [h, "unknown"]
+import { cssKeywords as Y, colorKeywords as F, namedColors as B, systemColors as G, colorFunctions as T, analyze as W } from "@projectwallace/css-analyzer";
+import { convert as k } from "css-time-sort";
+import { convert as K } from "color-sorter";
+import { parse as d } from "css-tree";
+import { ColorSpace as o, sRGB as M, XYZ_D65 as Z, XYZ_D50 as U, XYZ_ABS_D65 as V, Lab_D65 as J, Lab as Q, LCH as ee, sRGB_Linear as te, HSL as re, HWB as ne, HSV as le, P3_Linear as ie, P3 as se, A98RGB_Linear as oe, A98RGB as ue, ProPhoto_Linear as ae, ProPhoto as ce, REC_2020_Linear as fe, REC_2020 as pe, OKLab as me, OKLCH as he, OKLrab as ge, parse as _e } from "colorjs.io/fn";
+const N = 0, L = 1, E = 2, b = 3, q = 4, C = 5, j = 6, z = 7, A = 8, I = 9, R = 10, _ = 11, de = /* @__PURE__ */ new Map([
+  [N, "white"],
+  [L, "black"],
+  [E, "grey"],
+  [b, "red"],
+  [q, "orange"],
+  [C, "yellow"],
+  [j, "green"],
+  [z, "cyan"],
+  [A, "blue"],
+  [I, "magenta"],
+  [R, "pink"],
+  [_, "unknown"]
 ]);
-function fe(r) {
+function ve(n) {
   let t = /* @__PURE__ */ new Map();
-  for (let l in r) {
-    let e = h;
-    if (!l.includes("var(") && !l.includes("calc(")) {
-      let s = Y(l), { hue: n, saturation: i, lightness: p } = s;
-      i < 10 && p === 100 ? e = x : i < 10 && p === 0 ? e = w : i < 5 ? e = L : n < 22 ? e = d : n < 50 ? e = O : n < 72 ? e = S : n < 144 ? e = N : n < 180 ? e = q : n < 250 ? e = z : n < 300 ? e = C : n < 350 ? e = E : e = d;
+  for (let r in n) {
+    let e = _;
+    if (!r.includes("var(") && !r.includes("calc(")) {
+      let s = K(r), { hue: l, saturation: i, lightness: m } = s;
+      i < 10 && m === 100 ? e = N : i < 10 && m === 0 ? e = L : i < 5 ? e = E : l < 22 ? e = b : l < 50 ? e = q : l < 72 ? e = C : l < 144 ? e = j : l < 180 ? e = z : l < 250 ? e = A : l < 300 ? e = I : l < 350 ? e = R : e = b;
     }
-    t.has(e) ? t.get(e).push(l) : t.set(e, [l]);
+    t.has(e) ? t.get(e).push(r) : t.set(e, [r]);
   }
   return Array.from(t).sort(
-    (l, e) => l[0] === h || e[0] === h ? -1 : e[1].length - l[1].length
+    (r, e) => r[0] === _ || e[0] === _ ? -1 : e[1].length - r[1].length
   );
 }
-const u = "com.projectwallace.css-authored-as";
-o.register(B);
-o.register(P);
-o.register(k);
-o.register(G);
-o.register(K);
+const u = "com.projectwallace.css-authored-as", a = "com.projectwallace.usage-count", be = "com.projectwallace.css-properties";
 o.register(M);
-o.register(W);
 o.register(Z);
-o.register(T);
 o.register(U);
 o.register(V);
 o.register(J);
@@ -54,49 +47,39 @@ o.register(ie);
 o.register(se);
 o.register(oe);
 o.register(ue);
-function f(r) {
-  let t = r.toLowerCase();
+o.register(ae);
+o.register(ce);
+o.register(fe);
+o.register(pe);
+o.register(me);
+o.register(he);
+o.register(ge);
+function h(n) {
+  let t = n.toLowerCase();
   if (t === "transparent")
     return {
-      $type: "color",
-      $value: {
-        colorSpace: "srgb",
-        components: [0, 0, 0],
-        alpha: 0
-      },
-      $extensions: {
-        [u]: r
-      }
+      colorSpace: "srgb",
+      components: [0, 0, 0],
+      alpha: 0
     };
-  if (A.has(t) || D.has(t) || t.includes("var("))
+  if (Y.has(t) || F.has(t) || t.includes("var("))
     return null;
   try {
-    let l = ae(r), [e, s, n] = l.coords;
+    let r = _e(n), [e, s, l] = r.coords;
     return {
-      $type: "color",
-      $value: {
-        colorSpace: l.spaceId,
-        components: [
-          e ?? "none",
-          s ?? "none",
-          n ?? "none"
-        ],
-        alpha: l.alpha ?? 0
-      },
-      $extensions: {
-        [u]: r
-      }
+      colorSpace: r.spaceId,
+      components: [
+        e ?? "none",
+        s ?? "none",
+        l ?? "none"
+      ],
+      alpha: r.alpha ?? 0
     };
   } catch {
-    return {
-      $value: r,
-      $extensions: {
-        [u]: r
-      }
-    };
+    return null;
   }
 }
-function v() {
+function x() {
   return {
     color: void 0,
     offsetX: void 0,
@@ -106,131 +89,134 @@ function v() {
     inset: !1
   };
 }
-function pe(r) {
-  let t = g(r, {
+function $e(n) {
+  let t = d(n, {
     context: "value",
     positions: !0
   });
-  function l(n) {
-    return n.loc ? r.slice(n.loc.start.offset, n.loc.end.offset) : "";
+  function r(l) {
+    return l.loc ? n.slice(l.loc.start.offset, l.loc.end.offset) : "";
   }
-  let e = v(), s = [e];
-  return t.children.size < 2 ? null : (t.children.forEach((n) => {
-    if (n.type === "Identifier") {
-      if (n.name.toLowerCase() === "inset")
+  let e = x(), s = [e];
+  return t.children.size < 2 ? null : (t.children.forEach((l) => {
+    if (l.type === "Identifier") {
+      if (l.name.toLowerCase() === "inset")
         e.inset = !0;
-      else if (I.has(n.name) || R.has(n.name)) {
-        let i = f(n.name);
-        if (i === null || i.$type !== "color")
+      else if (B.has(l.name) || G.has(l.name)) {
+        let i = h(l.name);
+        if (i === null)
           return;
-        e.color = i.$value;
+        e.color = i;
       }
-    } else if (n.type === "Dimension" || n.type === "Number" && n.value === "0") {
-      let i = n.type === "Dimension" ? {
-        value: Number(n.value),
-        unit: n.unit
+    } else if (l.type === "Dimension" || l.type === "Number" && l.value === "0") {
+      let i = l.type === "Dimension" ? {
+        value: Number(l.value),
+        unit: l.unit
       } : {
         value: 0,
         unit: "px"
       };
       e.offsetX ? e.offsetY ? e.blur ? e.spread || (e.spread = i) : e.blur = i : e.offsetY = i : e.offsetX = i;
-    } else if (n.type === "Function") {
-      if (X.has(n.name)) {
-        let i = f(l(n));
-        if (i === null || i.$type !== "color")
+    } else if (l.type === "Function") {
+      if (T.has(l.name)) {
+        let i = h(r(l));
+        if (i === null)
           return;
-        e.color = i.$value;
-      } else if (n.name.toLowerCase() === "var" && !e.color) {
-        let i = f(l(n));
-        if (i === null || i.$type !== "color")
+        e.color = i;
+      } else if (l.name.toLowerCase() === "var" && !e.color) {
+        let i = h(r(l));
+        if (i === null)
           return;
-        e.color = i.$value;
+        e.color = i;
       }
-    } else if (n.type === "Hash") {
-      let i = f(l(n));
-      if (i === null || i.$type !== "color")
+    } else if (l.type === "Hash") {
+      let i = h(r(l));
+      if (i === null)
         return;
-      e.color = i.$value;
-    } else n.type === "Operator" && n.value === "," && (_(e), e = v(), s.push(e));
-  }), _(e), s);
+      e.color = i;
+    } else l.type === "Operator" && l.value === "," && (y(e), e = x(), s.push(e));
+  }), y(e), s);
 }
-const m = {
+const g = {
   value: 0,
   unit: "px"
 };
-function _(r) {
-  return r.offsetX || (r.offsetX = m), r.offsetY || (r.offsetY = m), r.blur || (r.blur = m), r.spread || (r.spread = m), r.color || (r.color = f("#000")?.$value), r;
+function y(n) {
+  return n.offsetX || (n.offsetX = g), n.offsetY || (n.offsetY = g), n.blur || (n.blur = g), n.spread || (n.spread = g), n.color || (n.color = h("#000")), n;
 }
-const $ = /* @__PURE__ */ new Map([
+const w = /* @__PURE__ */ new Map([
   ["linear", [0, 0, 1, 1]],
   ["ease", [0.25, 0.1, 0.25, 1]],
   ["ease-in", [0.42, 0, 1, 1]],
   ["ease-out", [0, 0, 0.58, 1]],
   ["ease-in-out", [0.42, 0, 0.58, 1]]
 ]);
-function me(r) {
-  if (r = r.trim().toLowerCase(), $.has(r))
-    return $.get(r);
-  if (!r.includes("var(") && r.startsWith("cubic-bezier(")) {
-    let t = r.replace("cubic-bezier(", "").replace(")", "").split(",").map((l) => Number(l.trim()));
-    if (t.length === 4 && t.every((l) => Number.isFinite(l)))
+function xe(n) {
+  if (n = n.trim().toLowerCase(), w.has(n))
+    return w.get(n);
+  if (n.includes("var("))
+    return null;
+  if (n.startsWith("cubic-bezier(")) {
+    let t = n.replace("cubic-bezier(", "").replace(")", "").split(",").map((r) => Number(r.trim()));
+    if (t.length === 4 && t.every((r) => Number.isFinite(r)))
       return t;
   }
+  return null;
 }
-function b(r) {
-  return r.replaceAll(/^['"]|['"]$/g, "");
+function S(n) {
+  return n.replaceAll(/^['"]|['"]$/g, "");
 }
-function he(r) {
-  let t = g(r, {
+function ye(n) {
+  let t = d(n, {
     context: "value",
     positions: !0
   });
-  function l(i) {
-    return i.loc ? r.slice(i.loc.start.offset, i.loc.end.offset) : "";
+  function r(i) {
+    return i.loc ? n.slice(i.loc.start.offset, i.loc.end.offset) : "";
   }
   let e = [];
   if (!t.children || t.children.size === 0)
     return e;
-  let s = "", n;
+  let s = "", l;
   for (let i of t.children) {
     if (i.type === "Operator" && i.value === ",") {
-      e.push(b(s)), s = "", n = i.type;
+      e.push(S(s)), s = "", l = i.type;
       continue;
     }
-    n === "Identifier" && i.type === "Identifier" && (s += " "), s += l(i), n = i.type;
+    l === "Identifier" && i.type === "Identifier" && (s += " "), s += r(i), l = i.type;
   }
-  return e.push(b(s)), e;
+  return e.push(S(s)), e;
 }
-function a(r) {
-  if (r === void 0 || typeof r == "number" && isNaN(r))
+function c(n) {
+  if (n === void 0 || typeof n == "number" && isNaN(n))
     return "0";
-  typeof r != "string" && (r = r.toString());
+  typeof n != "string" && (n = n.toString());
   let t = 0;
-  for (let l of r)
-    t = (t << 5) - t + l.charCodeAt(0), t |= 0;
+  for (let r of n)
+    t = (t << 5) - t + r.charCodeAt(0), t |= 0;
   return (t >>> 0).toString(16);
 }
-function ge(r) {
-  let t = g(r, { context: "value" });
+function we(n) {
+  let t = d(n, { context: "value" });
   if (t.children === null || t.children.size !== 1) return null;
-  let l = t.children.first;
-  switch (l.type) {
+  let r = t.children.first;
+  switch (r.type) {
     case "Dimension":
       return {
-        value: Number(l.value),
-        unit: l.unit
+        value: Number(r.value),
+        unit: r.unit
       };
     case "Number":
-      return Number(l.value);
+      return Number(r.value);
     case "Percentage":
-      return Number(l.value) / 100;
+      return Number(r.value) / 100;
     case "Identifier":
-      if (l.name === "normal")
+      if (r.name === "normal")
         return 1.2;
   }
   return null;
 }
-let y = /* @__PURE__ */ new Map([
+let O = /* @__PURE__ */ new Map([
   ["xx-small", 0.6],
   ["x-small", 0.75],
   ["small", 0.89],
@@ -240,188 +226,199 @@ let y = /* @__PURE__ */ new Map([
   ["xx-large", 2],
   ["xxx-large", 3]
 ]);
-function de(r) {
-  let t = g(r, { context: "value" });
+function Se(n) {
+  let t = d(n, { context: "value" });
   if (t.children === null || t.children.size !== 1) return null;
-  let l = t.children.first;
-  switch (l.type) {
+  let r = t.children.first;
+  switch (r.type) {
     case "Dimension": {
-      if (l.unit === "px" || l.unit === "rem")
+      if (r.unit === "px" || r.unit === "rem")
         return {
-          value: Number(l.value),
-          unit: l.unit
+          value: Number(r.value),
+          unit: r.unit
         };
       break;
     }
     case "Identifier": {
-      let e = l.name.toLowerCase();
-      if (y.has(e))
+      let e = r.name.toLowerCase();
+      if (O.has(e))
         return {
-          value: y.get(e),
+          value: O.get(e),
           unit: "rem"
         };
     }
   }
   return null;
 }
-function we(r) {
-  let t = F(r);
-  return ve(t);
+function je(n) {
+  let t = W(n);
+  return Oe(t);
 }
-function c(r) {
-  return "uniqueWithLocations" in r ? r.uniqueWithLocations : r.unique;
+function f(n) {
+  return "uniqueWithLocations" in n ? n.uniqueWithLocations : n.unique;
 }
-function ve(r) {
+function p(n) {
+  return Array.isArray(n) ? n.length : n;
+}
+function Oe(n) {
   return {
     color: (() => {
-      let t = /* @__PURE__ */ Object.create(null), l = c(r.values.colors), e = fe(l);
-      for (let [s, n] of e)
-        for (let i of n) {
-          let p = f(i);
-          if (p !== null) {
-            let j = `${ce.get(s)}-${a(i)}`;
-            t[j] = p;
+      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.colors), e = ve(r);
+      for (let [s, l] of e)
+        for (let i of l) {
+          let m = h(i);
+          if (m !== null) {
+            let X = `${de.get(s)}-${c(i)}`, D = n.values.colors.itemsPerContext, P = Object.entries(D).reduce(($, [H, v]) => ((i in v.unique || v.uniqueWithLocations && i in v.uniqueWithLocations) && $.push(H), $), []);
+            t[X] = {
+              $type: "color",
+              $value: m,
+              $extensions: {
+                [u]: i,
+                [a]: p(r[i]),
+                [be]: P
+              }
+            };
           }
         }
       return t;
     })(),
     font_size: (() => {
-      let t = /* @__PURE__ */ Object.create(null), l = c(r.values.fontSizes);
-      for (let e in l) {
-        let s = `fontSize-${a(e)}`, n = de(e);
-        n === null ? t[s] = {
+      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.fontSizes);
+      for (let e in r) {
+        let s = `fontSize-${c(e)}`, l = Se(e), i = {
+          [u]: e,
+          [a]: p(r[e])
+        };
+        l === null ? t[s] = {
           $value: e,
-          $extensions: {
-            [u]: e
-          }
+          $extensions: i
         } : t[s] = {
           $type: "dimension",
-          $value: n,
-          $extensions: {
-            [u]: e
-          }
+          $value: l,
+          $extensions: i
         };
       }
       return t;
     })(),
     font_family: (() => {
-      let t = /* @__PURE__ */ Object.create(null), l = c(r.values.fontFamilies);
-      for (let e in l) {
-        let s = he(e), n = `fontFamily-${a(e)}`;
-        t[n] = {
+      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.fontFamilies);
+      for (let e in r) {
+        let s = ye(e), l = `fontFamily-${c(e)}`;
+        t[l] = {
           $type: "fontFamily",
           $value: s,
           $extensions: {
-            [u]: e
+            [u]: e,
+            [a]: p(r[e])
           }
         };
       }
       return t;
     })(),
     line_height: (() => {
-      let t = /* @__PURE__ */ Object.create(null), l = c(r.values.lineHeights);
-      for (let e in l) {
-        let s = `lineHeight-${a(e)}`, n = ge(e);
-        n === null ? t[s] = {
+      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.lineHeights);
+      for (let e in r) {
+        let s = `lineHeight-${c(e)}`, l = we(e), i = {
+          [u]: e,
+          [a]: p(r[e])
+        };
+        l === null ? t[s] = {
           $value: e,
-          $extensions: {
-            [u]: e
-          }
-        } : typeof n == "number" ? t[s] = {
+          $extensions: i
+        } : typeof l == "number" ? t[s] = {
           $type: "number",
-          $value: n,
-          $extensions: {
-            [u]: e
-          }
-        } : typeof n == "object" && (n.unit === "px" || n.unit === "rem" ? t[s] = {
+          $value: l,
+          $extensions: i
+        } : typeof l == "object" && (l.unit === "px" || l.unit === "rem" ? t[s] = {
           $type: "dimension",
-          $value: n,
-          $extensions: {
-            [u]: e
-          }
+          $value: l,
+          $extensions: i
         } : t[s] = {
           $value: e,
-          $extensions: {
-            [u]: e
-          }
+          $extensions: i
         });
       }
       return t;
     })(),
     gradient: (() => {
-      let t = /* @__PURE__ */ Object.create(null), l = c(r.values.gradients);
-      for (let e in l)
-        t[`gradient-${a(e)}`] = {
-          $value: e
+      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.gradients);
+      for (let e in r)
+        t[`gradient-${c(e)}`] = {
+          $value: e,
+          $extensions: {
+            [u]: e,
+            [a]: p(r[e])
+          }
         };
       return t;
     })(),
     box_shadow: (() => {
-      let t = /* @__PURE__ */ Object.create(null), l = c(r.values.boxShadows);
-      for (let e in l) {
-        let s = `boxShadow-${a(e)}`, n = pe(e);
-        n === null ? t[s] = {
+      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.boxShadows);
+      for (let e in r) {
+        let s = `boxShadow-${c(e)}`, l = $e(e), i = {
+          [u]: e,
+          [a]: p(r[e])
+        };
+        l === null ? t[s] = {
           $value: e,
-          $extensions: {
-            [u]: e
-          }
+          $extensions: i
         } : t[s] = {
           $type: "shadow",
-          $value: n.length === 1 ? n[0] : n,
-          $extensions: {
-            [u]: e
-          }
+          $value: l.length === 1 ? l[0] : l,
+          $extensions: i
         };
       }
       return t;
     })(),
     radius: (() => {
-      let t = /* @__PURE__ */ Object.create(null), l = c(r.values.borderRadiuses);
-      for (let e in l) {
-        let s = `radius-${a(e)}`;
+      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.borderRadiuses);
+      for (let e in r) {
+        let s = `radius-${c(e)}`;
         t[s] = {
-          $value: e
+          $value: e,
+          $extensions: {
+            [u]: e,
+            [a]: p(r[e])
+          }
         };
       }
       return t;
     })(),
     duration: (() => {
-      let t = /* @__PURE__ */ Object.create(null), l = c(r.values.animations.durations);
-      for (let e in l) {
-        let s = H(e), n = s < Number.MAX_SAFE_INTEGER - 1, i = a(s.toString());
-        n ? t[`duration-${i}`] = {
+      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.animations.durations);
+      for (let e in r) {
+        let s = k(e), l = s < Number.MAX_SAFE_INTEGER - 1, i = c(s.toString()), m = {
+          [u]: e,
+          [a]: p(r[e])
+        };
+        l ? t[`duration-${i}`] = {
           $type: "duration",
           $value: {
             value: s,
             unit: "ms"
           },
-          $extensions: {
-            [u]: e
-          }
+          $extensions: m
         } : t[`duration-${i}`] = {
           $value: e,
-          $extensions: {
-            [u]: e
-          }
+          $extensions: m
         };
       }
       return t;
     })(),
     easing: (() => {
-      let t = /* @__PURE__ */ Object.create(null), l = c(r.values.animations.timingFunctions);
-      for (let e in l) {
-        let s = `easing-${a(e)}`, n = me(e);
-        n ? t[s] = {
-          $value: n,
+      let t = /* @__PURE__ */ Object.create(null), r = f(n.values.animations.timingFunctions);
+      for (let e in r) {
+        let s = `easing-${c(e)}`, l = xe(e), i = {
+          [u]: e,
+          [a]: p(r[e])
+        };
+        l !== null ? t[s] = {
+          $value: l,
           $type: "cubicBezier",
-          $extensions: {
-            [u]: e
-          }
+          $extensions: i
         } : t[s] = {
           $value: e,
-          $extensions: {
-            [u]: e
-          }
+          $extensions: i
         };
       }
       return t;
@@ -429,6 +426,6 @@ function ve(r) {
   };
 }
 export {
-  ve as analysis_to_tokens,
-  we as css_to_tokens
+  Oe as analysis_to_tokens,
+  je as css_to_tokens
 };

package/dist/destructure-easing.d.ts

@@ -1,2 +1,2 @@
 import { Easing } from './types.js';
-export declare function destructure_easing(easing: string): Easing | undefined;
+export declare function destructure_easing(easing: string): Easing | null;

package/dist/types.d.ts

@@ -2,18 +2,22 @@ import { analyze } from '@projectwallace/css-analyzer';
 import { DestructuredShadow } from './destructure-box-shadow';
 export type CssAnalysis = ReturnType<typeof analyze>;
 export declare const EXTENSION_AUTHORED_AS = "com.projectwallace.css-authored-as";
+export declare const EXTENSION_USAGE_COUNT = "com.projectwallace.usage-count";
+export declare const EXTENSION_CSS_PROPERTIES = "com.projectwallace.css-properties";
 export type Easing = [number, number, number, number];
 export type BaseToken = {
-    $extensions?: {
+    $extensions: {
         [EXTENSION_AUTHORED_AS]: string;
+        [EXTENSION_USAGE_COUNT]: number;
     };
 };
+type DurationValue = {
+    value: number;
+    unit: 'ms';
+};
 export type DurationToken = BaseToken & {
     $type: 'duration';
-    $value: {
-        value: number;
-        unit: 'ms';
-    };
+    $value: DurationValue;
 };
 export type UnparsedToken = BaseToken & {
     $value: string;
@@ -31,7 +35,7 @@ export type ColorToken = BaseToken & {
     $type: 'color';
     $value: ColorValue;
     $extensions: {
-        [EXTENSION_AUTHORED_AS]: string;
+        [EXTENSION_CSS_PROPERTIES]: Array<string>;
     };
 };
 export type DimensionValue = {
@@ -52,7 +56,7 @@ export type CubicBezierToken = BaseToken & {
 };
 export type FontFamilyToken = BaseToken & {
     $type: 'fontFamily';
-    $value: string[] | string;
+    $value: string[];
 };
 export type ShadowToken = BaseToken & {
     $type: 'shadow';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@projectwallace/css-design-tokens",
   "description": "Generate spec-compliant Design Tokens from CSS.",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "EUPL-1.2",
   "author": "Bart Veneman <bart@projectwallace.com>",
   "repository": {

package/readme.md

@@ -2,6 +2,23 @@
 
 Create Design Tokens by going through CSS to find colors, font-sizes, gradients etcetera and turn them into a [Design Tokens spec](https://tr.designtokens.org/)-compliant token format.
 
+## Table of contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Token types](#token-types)
+  - [Color](#color)
+  - [Font-size](#font-size)
+  - [Font-family](#font-family)
+  - [Line-height](#line-height)
+  - [Gradient](#gradient)
+  - [Box-shadow](#box-shadow)
+  - [Radius](#radius)
+  - [Duration](#duration)
+  - [Easing](#easing)
+- [Extensions](#extensions)
+- [Acknowledgements](#acknowledgements)
+
 ## Installation
 
 ```sh
@@ -59,9 +76,397 @@ let { color } = css_to_tokens(
 // }
 ```
 
-### Getting authored values
+## Token types
+
+### Color
+
+['Color' Design Token format](https://www.designtokens.org/tr/third-editors-draft/color/#format)
+
+Only fully compliant colors are listed. Colors that can't be parsed by [colorjs.io](https://colorjs.io/) are ignored, like `rgb(var(--red) var(--green) var(--blue))` or CSS system colors like `ButtonText`.
+
+- The optional `alpha` property is _always_ present.
+- The optional `hex` fallback property is _never_ present.
+- In addition to other tokens all colors have a `com.projectwallace.css-properties` extension that contains all the CSS properties that a specific color was used for.
+
+```js
+let { color } = css_to_tokens(`.my-design-system { color: green; }`)
+
+let color = {
+  'green-5e0cf03': {
+    $type: 'color',
+    $value: {
+      colorSpace: 'srgb',
+      components: [0, 0.5019607843137255, 0],
+      alpha: 1,
+    },
+    $extensions: {
+      'com.projectwallace.css-authored-as': 'green',
+      'com.projectwallace.usage-count': 2,
+      'com.projectwallace.css-properties': ['color', 'border-color'],
+    }
+  }
+}
+```
+
+### Font-size
+
+['Dimension' Design Token format](https://www.designtokens.org/tr/third-editors-draft/format/#dimension)
+
+Font-sizes are listed as `$type: 'dimension'` types if the font-size is declared with either `px` or `rem` or as plain type-less tokens otherwise.
+
+```js
+let { font_size } = css_to_tokens(`.my-design-system {
+  .my-design-system {
+    font-size: 16px;
+    font-size: 1rem;
+    font-size: 20vmin;
+  }
+}`)
+
+let font_size = {
+  'fontSize-171eed': {
+    $type: 'dimension',
+    $value: {
+      value: 16,
+      unit: 'px'
+    },
+    $extensions: {
+      'com.projectwallace.css-authored-as': '16px',
+      'com.projectwallace.usage-count': 1,
+    }
+  },
+  'fontSize-582e015a': {
+    $value: '20vmin',
+    $extensions: {
+      'com.projectwallace.css-authored-as': '20vmin',
+      'com.projectwallace.usage-count': 1,
+    }
+  },
+}
+```
+
+### Font-family
+
+['fontFamily' Design Token format](https://www.designtokens.org/tr/third-editors-draft/format/#font-family)
+
+Font-families are _always_ listed as `$type: 'fontFamily'`.
+
+```js
+let { font_family } = css_to_tokens(`.my-design-system {
+  .my-design-system {
+    font-family: 'Inter';
+    font-family: Arial Black, sans-serif;
+  }
+}`)
+
+let font_family = {
+  'fontFamily-3375cf09': {
+    $type: 'fontFamily',
+    $value: ['\'Inter\''],
+    $extensions: {
+      'com.projectwallace.css-authored-as': '\'Inter\'',
+      'com.projectwallace.usage-count': 1,
+    }
+  },
+  'fontFamily-582e015a': {
+    $value: ['Arial Black', 'sans-serif'],
+    $extensions: {
+      'com.projectwallace.css-authored-as': 'Arial Black, sans-serif',
+      'com.projectwallace.usage-count': 1,
+    }
+  },
+}
+```
+
+### Line-height
+
+Line heights can either be `dimension` or `number` types, or a plain type-less token. This depends on how well the value can be mapped to a valid token.
+
+```ts
+let { line_height } = css_to_tokens(`
+  .my-design-system {
+    line-height: 1.5rem; /* rem -> type=dimension */
+    line-height: 1.5; /* no unit -> type=number */
+    line-height: 20vmin; /* can not be mapped to valid token type */
+  }
+`)
+
+let line_height = {
+  'lineHeight-563f7fe2': {
+    $type: 'dimension',
+    $value: {
+      value: 1.5,
+      unit: 'rem'
+    },
+    $extensions: {
+      'com.projectwallace.css-authored-as': '1.5rem',
+      'com.projectwallace.usage-count': 1,
+    }
+  },
+  'lineHeight-bdb8': {
+    $type: 'number',
+    $value: 1.5,
+    $extensions: {
+      'com.projectwallace.css-authored-as': '1.5',
+      'com.projectwallace.usage-count': 1,
+    }
+  },
+  'lineHeight-582e015a': {
+    $value: '20vmin',
+    $extensions: {
+      'com.projectwallace.css-authored-as': '20vmin',
+      'com.projectwallace.usage-count': 1,
+    }
+  }
+}
+```
+
+### Gradient
+
+Gradients are passed as-is, no mapping is done. This is because the spec is currently too limited in expressing a CSS gradient.
+
+```ts
+let { gradient } = css_to_tokens(`
+  .my-design-system {
+    background: linear-gradient(to right, red, blue);
+  }
+`)
+
+let gradient = {
+  'gradient-2aec04e5': {
+    $value: 'linear-gradient(to right, red, blue)',
+    $extensions: {
+      'com.projectwallace.css-authored-as': 'linear-gradient(to right, red, blue)',
+      'com.projectwallace.usage-count': 1,
+    }
+  }
+}
+```
+
+### Box-shadow
+
+['Shadow' Design Token type](https://www.designtokens.org/tr/third-editors-draft/format/#shadow)
+
+- Multiple shadows can be mapped, so beware that `$value` van either be a single object or an array.
+- Only if a box-shadow has a valid `color` type it will be mapped as a `box-shadow` type
+
+```ts
+let { box_shadow } = css_to_tokens(`
+  .my-design-system {
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5), 0 0 10px 0 rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 0 0 var(--red);
+  }
+`)
+
+let box_shadow = {
+  'boxShadow-6f90da6b': {
+    $type: 'shadow',
+    $value: {
+      offsetX: {
+        value: 0,
+        unit: 'px'
+      },
+      offsetY: {
+        value: 0,
+        unit: 'px'
+      },
+      blur: {
+        value: 10,
+        unit: 'px'
+      },
+      spread: {
+        value: 0,
+        unit: 'px'
+      },
+      inset: false,
+      color: {
+        colorSpace: 'srgb',
+        components: [0, 0, 0],
+        alpha: 0.5,
+      },
+    },
+    $extensions: {
+      'com.projectwallace.css-authored-as': '0 0 10px 0 rgba(0, 0, 0, 0.5)',
+      'com.projectwwallace.usage-count': 1,
+    }
+  },
+  'boxShadow-be2751ac': {
+    $type: 'shadow',
+    $value: [
+      {
+        offsetX: {
+          value: 0,
+          unit: 'px'
+        },
+        offsetY: {
+          value: 0,
+          unit: 'px'
+        },
+        blur: {
+          value: 10,
+          unit: 'px'
+        },
+        spread: {
+          value: 0,
+          unit: 'px'
+        },
+        inset: false,
+        color: {
+          colorSpace: 'srgb',
+          components: [0, 0, 0],
+          alpha: 0.5,
+        },
+      },
+      {
+        offsetX: {
+          value: 0,
+          unit: 'px'
+        },
+        offsetY: {
+          value: 0,
+          unit: 'px'
+        },
+        blur: {
+          value: 10,
+          unit: 'px'
+        },
+        spread: {
+          value: 0,
+          unit: 'px'
+        },
+        inset: false,
+        color: {
+          colorSpace: 'srgb',
+          components: [0, 0, 0],
+          alpha: 0.5,
+        },
+      }
+    ],
+    $extensions: {
+      'com.projectwwallace.css-authored-as': '0 0 10px 0 rgba(0, 0, 0, 0.5), 0 0 10px 0 rgba(0, 0, 0, 0.5)',
+      'com.projectwwallace.usage-count': 1,
+    }
+  },
+  'boxShadow-j4h5gas5h': {
+    $value: '0 0 0 0 var(--red)',
+    $extensions: {
+      'com.projectwwallace.css-authored-as': '0 0 0 0 var(--red)',
+      'com.projectwwallace.usage-count': 1,
+    }
+  }
+}
+```
+
+### Radius
+
+Radii are passed as-is, no mapping is done.
+
+```ts
+let { radius } = css_to_tokens(`
+  .my-design-system {
+    border-radius: 10px;
+  }
+`)
+
+let radius = {
+  'radius-170867': {
+    $value: '10px',
+    $extensions: {
+      'com.projectwwallace.css-authored-as': '10px',
+      'com.projectwwallace.usage-count': 1,
+    }
+  }
+}
+```
+
+### Duration
+
+['Duration' Design Token type](https://www.designtokens.org/tr/third-editors-draft/format/#duration)
 
-The tokens output parses most CSS into Design Tokens but in most cases it also provides a way to get the authored CSS via the `$extensions` property. The custom identifier for this project is `com.projectwallace` and the authored values can be found with `com.projectwallace.css-authored-as` on the `$extensions` object.
+Durations can either be animation- or transition-durations or -delays. Even though `s` is a valid unit we _always_ map to `ms`.
+
+```ts
+let { duration } = css_to_tokens(`
+  .my-design-system {
+    animation-duration: 1s;
+  }
+`)
+
+let duration = {
+  'duration-17005f': {
+    $type: 'duration',
+    $value: {
+      value: 1000,
+      unit: 'ms'
+    },
+    $extensions: {
+      'com.projectwwallace.css-authored-as': '1s',
+      'com.projectwwallace.usage-count': 1,
+    }
+  }
+}
+```
+
+### Easing
+
+['Cubic Bézier' Design Token type](https://www.designtokens.org/tr/third-editors-draft/format/#cubic-bezier)
+
+Easings are mapped to cubic béziers when possible or represented as plain type-less tokens otherwise. [CSS Easing keywords](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) are also converted to cubic béziers.
+
+```ts
+let actual = css_to_tokens(`
+  .my-design-system {
+    animation-timing-function: ease-in-out;
+    animation-timing-function: cubic-bezier(0, 0, 0.5, .8);
+    animation-timing-function: var(--test);
+  }
+`)
+
+let easing = {
+  'easing-ea6c7565': {
+    $type: 'cubicBezier',
+    $value: [
+      0.42,
+      0,
+      0.58,
+      1
+    ],
+    $extensions: {
+      'com.projectwwallace.css-authored-as': 'ease-in-out',
+      'com.projectwwallace.usage-count': 1,
+    }
+  },
+  'easing-90111eba': {
+    $type: 'cubicBezier',
+    $value: [
+      0,
+      0,
+      0.5,
+      0.8
+    ],
+    $extensions: {
+      'com.projectwwallace.css-authored-as': 'cubic-bezier(0, 0, 0.5, .8)',
+      'com.projectwwallace.usage-count': 1,
+    }
+  },
+  'easing-12bb7f36': {
+    $value: 'var(--test)',
+    $extensions: {
+      'com.projectwwallace.css-authored-as': 'var(--test)',
+      'com.projectwwallace.usage-count': 1,
+    }
+  }
+}
+```
+
+## Extensions
+
+This library adds a couple of potentially extensions to the design token values via the `com.projectwallace` namespace on the `$extensions` property of all generated design tokens.
+
+### Authored CSS values
+
+This package parses CSS into Design Tokens but also provides a way to get the authored CSS via the `$extensions['com.projectwallace.css-authored-as']` property on any of the tokens:
 
 ```ts
 let { color } = css_to_tokens(`.my-design-system { color: green; }`)
@@ -80,6 +485,50 @@ let authored_green = color['green-5e0cf03']['$extensions']['com.projectwallace.c
 // 'green'
 ```
 
+### Usage count
+
+If you need to know how often a particalur design token was found in the CSS you can use the `$extensions['com.projectwallace.usage-count']` property on any of the tokens:
+
+```ts
+let { color } = css_to_tokens(`.my-design-system { color: green; }`)
+
+// {
+//   'green-5e0cf03': {
+//     ...
+//     $extensions: {
+//       'com.projectwallace.usage-count': 1
+//     }
+//   },
+// }
+
+let green_count = color['green-5e0cf03']['$extensions']['com.projectwallace.usage-count']
+
+// 1
+```
+
+### CSS property usage
+
+__For color tokens only__
+
+You can read the `$extensions['com.projectwallace.css-properties']` property to see for which CSS properties a color was used:
+
+```ts
+let { color } = css_to_tokens(`.my-design-system { color: green; }`)
+
+// {
+//   'green-5e0cf03': {
+//     ...
+//     $extensions: {
+//       'com.projectwallace.css-properties': ['color']
+//     }
+//   },
+// }
+
+let properties = color['green-5e0cf03']['$extensions']['com.projectwallace.css-properties']
+
+// ['color']
+```
+
 ## Acknowledgements
 
 - [CSSTree](https://github.com/csstree/csstree) does all the heavy lifting of parsing CSS
@@ -88,7 +537,7 @@ let authored_green = color['green-5e0cf03']['$extensions']['com.projectwallace.c
 ## Related projects
 
 - [Design Tokens analyzer](https://www.projectwallace.com/design-tokens) - Online CSS to Design Tokens convernter, uses this package
-- [CSS Analyzer](https://github.com/projectwallace/css-analyzer) - The best CSS analyzer that powers all analysis on [projectwallace.com](https://www.projectwallace.com?utm_source=github&utm_medium=wallace_format_css_related_projects)
+- [CSS Analyzer](https://github.com/projectwallace/css-analyzer) - The best CSS analyzer that powers all analysis on [projectwallace.com](https://www.projectwallace.com?utm_source=github&utm_medium=wallace_css_design_tokens_related_projects)
 - [Color Sorter](https://github.com/projectwallace/color-sorter) - Sort CSS colors
   by hue, saturation, lightness and opacity
 - [CSS Time Sort](https://github.com/projectwallace/css-time-sort) - Sort an array of `<time>` values