@projectwallace/css-design-tokens 0.9.0 → 0.10.0

package/dist/css-design-tokens.js

@@ -1,18 +1,18 @@
-import { cssKeywords as T, colorKeywords as W, namedColors as K, systemColors as M, colorFunctions as Z, analyze as U } from "@projectwallace/css-analyzer";
+import { cssKeywords as B, colorKeywords as G, namedColors as K, systemColors as M, colorFunctions as U, analyze as Z } from "@projectwallace/css-analyzer";
 import { convert as V } from "css-time-sort";
 import { convert as J } from "color-sorter";
 import { parse as $ } from "css-tree";
 import { ColorSpace as o, sRGB as Q, XYZ_D65 as ee, XYZ_D50 as te, XYZ_ABS_D65 as re, Lab_D65 as ne, Lab as ie, LCH as le, sRGB_Linear as se, HSL as oe, HWB as ue, HSV as ae, P3_Linear as fe, P3 as ce, A98RGB_Linear as pe, A98RGB as me, ProPhoto_Linear as ge, ProPhoto as he, REC_2020_Linear as de, REC_2020 as _e, OKLab as ve, OKLCH as $e, OKLrab as be, parse as xe } from "colorjs.io/fn";
-const A = 0, j = 1, z = 2, y = 3, I = 4, R = 5, H = 6, X = 7, D = 8, P = 9, Y = 10, v = 11, ye = /* @__PURE__ */ new Map([
+const A = 0, j = 1, z = 2, y = 3, I = 4, R = 5, D = 6, H = 7, X = 8, P = 9, Y = 10, v = 11, ye = /* @__PURE__ */ new Map([
   [A, "white"],
   [j, "black"],
   [z, "grey"],
   [y, "red"],
   [I, "orange"],
   [R, "yellow"],
-  [H, "green"],
-  [X, "cyan"],
-  [D, "blue"],
+  [D, "green"],
+  [H, "cyan"],
+  [X, "blue"],
   [P, "magenta"],
   [Y, "pink"],
   [v, "unknown"]
@@ -23,7 +23,7 @@ function we(n) {
     let e = v;
     if (!i.includes("var(") && !i.includes("calc(")) {
       let s = J(i), { hue: l, saturation: r, lightness: f } = s;
-      r < 10 && f === 100 ? e = A : r < 10 && f === 0 ? e = j : r < 5 ? e = z : l < 22 ? e = y : l < 50 ? e = I : l < 72 ? e = R : l < 144 ? e = H : l < 180 ? e = X : l < 250 ? e = D : l < 300 ? e = P : l < 350 ? e = Y : e = y;
+      r < 10 && f === 100 ? e = A : r < 10 && f === 0 ? e = j : r < 5 ? e = z : l < 22 ? e = y : l < 50 ? e = I : l < 72 ? e = R : l < 144 ? e = D : l < 180 ? e = H : l < 250 ? e = X : l < 300 ? e = P : l < 350 ? e = Y : e = y;
     }
     t.has(e) ? t.get(e).push(i) : t.set(e, [i]);
   }
@@ -62,24 +62,20 @@ function g(n) {
       components: [0, 0, 0],
       alpha: 0
     };
-  if (T.has(t) || W.has(t) || t.includes("var("))
+  if (B.has(t) || G.has(t) || t.includes("var("))
     return null;
   try {
     let i = xe(n), [e, s, l] = i.coords;
     return {
       colorSpace: i.spaceId,
-      components: [
-        e ?? "none",
-        s ?? "none",
-        l ?? "none"
-      ],
-      alpha: i.alpha ?? 0
+      components: [e ?? "none", s ?? "none", l ?? "none"],
+      alpha: i.alpha ?? 1
     };
   } catch {
     return null;
   }
 }
-function O() {
+function N() {
   return {
     color: void 0,
     offsetX: void 0,
@@ -97,7 +93,7 @@ function Se(n) {
   function i(l) {
     return l.loc ? n.slice(l.loc.start.offset, l.loc.end.offset) : "";
   }
-  let e = O(), s = [e];
+  let e = N(), s = [e];
   return t.children.size < 2 ? null : (t.children.forEach((l) => {
     if (l.type === "Identifier") {
       if (l.name.toLowerCase() === "inset")
@@ -118,7 +114,7 @@ function Se(n) {
       };
       e.offsetX ? e.offsetY ? e.blur ? e.spread || (e.spread = r) : e.blur = r : e.offsetY = r : e.offsetX = r;
     } else if (l.type === "Function") {
-      if (Z.has(l.name)) {
+      if (U.has(l.name)) {
         let r = g(i(l));
         if (r === null)
           return;
@@ -134,14 +130,14 @@ function Se(n) {
       if (r === null)
         return;
       e.color = r;
-    } else l.type === "Operator" && l.value === "," && (L(e), e = O(), s.push(e));
-  }), L(e), s);
+    } else l.type === "Operator" && l.value === "," && (O(e), e = N(), s.push(e));
+  }), O(e), s);
 }
 const _ = {
   value: 0,
   unit: "px"
 };
-function L(n) {
+function O(n) {
   return n.offsetX || (n.offsetX = _), n.offsetY || (n.offsetY = _), n.blur || (n.blur = _), n.spread || (n.spread = _), n.color || (n.color = g("#000")), n;
 }
 const E = /* @__PURE__ */ new Map([
@@ -151,7 +147,7 @@ const E = /* @__PURE__ */ new Map([
   ["ease-out", [0, 0, 0.58, 1]],
   ["ease-in-out", [0.42, 0, 0.58, 1]]
 ]);
-function Ne(n) {
+function Le(n) {
   if (n = n.trim().toLowerCase(), E.has(n))
     return E.get(n);
   if (n.includes("var("))
@@ -166,7 +162,7 @@ function Ne(n) {
 function C(n) {
   return n.replaceAll(/^['"]|['"]$/g, "");
 }
-function Oe(n) {
+function Ne(n) {
   if (n.toLowerCase().includes("var("))
     return;
   let t = $(n, {
@@ -198,17 +194,21 @@ function a(n) {
     t = (t << 5) - t + i.charCodeAt(0), t |= 0;
   return (t >>> 0).toString(16);
 }
-function Le(n) {
+const Oe = /* @__PURE__ */ new Set(["px", "rem"]);
+function Ee(n) {
   let t = $(n, { context: "value" });
   if (t.children === null || t.children.size !== 1) return null;
   let i = t.children.first;
   switch (i.type) {
     case "Dimension": {
       let e = Number(i.value);
-      return e === 0 ? 0 : {
+      if (e === 0)
+        return 0;
+      let s = i.unit.toLowerCase();
+      return Oe.has(s) ? {
         value: e,
-        unit: i.unit
-      };
+        unit: s
+      } : null;
     }
     case "Number":
       return Number(i.value);
@@ -230,7 +230,7 @@ let q = /* @__PURE__ */ new Map([
   ["xx-large", 2],
   ["xxx-large", 3]
 ]);
-function Ee(n) {
+function Ce(n) {
   let t = $(n, { context: "value" });
   if (t.children === null || t.children.size !== 1) return null;
   let i = t.children.first;
@@ -269,9 +269,9 @@ function Ee(n) {
   }
   return null;
 }
-function Re(n) {
-  let t = U(n);
-  return Ce(t);
+function De(n) {
+  let t = Z(n);
+  return qe(t);
 }
 function p(n) {
   return "uniqueWithLocations" in n ? n.uniqueWithLocations : n.unique;
@@ -279,7 +279,7 @@ function p(n) {
 function m(n) {
   return Array.isArray(n) ? n.length : n;
 }
-function Ce(n) {
+function qe(n) {
   return {
     color: (() => {
       let t = /* @__PURE__ */ Object.create(null), i = p(n.values.colors), e = we(i);
@@ -287,7 +287,7 @@ function Ce(n) {
         for (let r of l) {
           let f = g(r), w = m(i[r]);
           if (f !== null) {
-            let { colorSpace: k, components: F, alpha: B } = f, h = `${ye.get(s)}-${a([k, ...F, B].join(""))}`, G = n.values.colors.itemsPerContext, S = Object.entries(G).reduce((d, [N, b]) => r in b.unique || b.uniqueWithLocations && r in b.uniqueWithLocations ? d.add(N) : d, /* @__PURE__ */ new Set());
+            let { colorSpace: k, components: F, alpha: T } = f, h = `${ye.get(s)}-${a([k, ...F, T].join(""))}`, W = n.values.colors.itemsPerContext, S = Object.entries(W).reduce((d, [L, b]) => r in b.unique || b.uniqueWithLocations && r in b.uniqueWithLocations ? d.add(L) : d, /* @__PURE__ */ new Set());
             if (t[h]) {
               let d = t[h].$extensions[x];
               t[h].$extensions[x] = Array.from(new Set(d).union(S)), t[h].$extensions[u] += w;
@@ -308,7 +308,7 @@ function Ce(n) {
     font_size: (() => {
       let t = /* @__PURE__ */ Object.create(null), i = p(n.values.fontSizes);
       for (let e in i) {
-        let s = Ee(e), l = {
+        let s = Ce(e), l = {
           [c]: e,
           [u]: m(i[e])
         };
@@ -332,7 +332,7 @@ function Ce(n) {
     font_family: (() => {
       let t = /* @__PURE__ */ Object.create(null), i = p(n.values.fontFamilies);
       for (let e in i) {
-        let s = Oe(e), l = `fontFamily-${a(e)}`, r = {
+        let s = Ne(e), l = `fontFamily-${a(e)}`, r = {
           [c]: e,
           [u]: m(i[e])
         };
@@ -350,7 +350,7 @@ function Ce(n) {
     line_height: (() => {
       let t = /* @__PURE__ */ Object.create(null), i = p(n.values.lineHeights);
       for (let e in i) {
-        let s = Le(e), l = {
+        let s = Ee(e), l = {
           [c]: e,
           [u]: m(i[e])
         };
@@ -459,7 +459,7 @@ function Ce(n) {
     easing: (() => {
       let t = /* @__PURE__ */ Object.create(null), i = p(n.values.animations.timingFunctions);
       for (let e in i) {
-        let s = `easing-${a(e)}`, l = Ne(e), r = {
+        let s = `easing-${a(e)}`, l = Le(e), r = {
           [c]: e,
           [u]: m(i[e])
         };
@@ -480,6 +480,7 @@ export {
   c as EXTENSION_AUTHORED_AS,
   x as EXTENSION_CSS_PROPERTIES,
   u as EXTENSION_USAGE_COUNT,
-  Ce as analysis_to_tokens,
-  Re as css_to_tokens
+  qe as analysis_to_tokens,
+  g as color_to_token,
+  De as css_to_tokens
 };

package/dist/destructure-line-height.d.ts

@@ -1,7 +1,4 @@
-type Length = {
-    value: number;
-    unit: string;
-};
+import { Length } from './types';
 /**
  * @description Destructure a line-height from a string
  * The line-height property is specified as any one of the following:
@@ -11,4 +8,3 @@ type Length = {
  * - the keyword `normal`.
  */
 export declare function destructure_line_height(value: string): Length | number | null;
-export {};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { CubicBezierToken, DimensionToken, DurationToken, FontFamilyToken, NumberToken, UnparsedToken, ColorToken, CssAnalysis, ShadowToken } from './types.js';
+export { color_to_token } from './colors.js';
 export { EXTENSION_AUTHORED_AS, EXTENSION_USAGE_COUNT, EXTENSION_CSS_PROPERTIES, type Easing, type CubicBezierToken, type DimensionValue, type DimensionToken, type DurationToken, type DurationValue, type FontFamilyToken, type NumberToken, type UnparsedToken, type CssAnalysis, type ShadowToken, type ColorSpace, type ColorToken, type ColorValue, type ColorComponent, } from './types.js';
 export type { CssLength, ShadowValue } from './destructure-box-shadow.js';
 export declare function css_to_tokens(css: string): Tokens;

package/dist/types.d.ts

@@ -11,6 +11,11 @@ export type BaseToken = {
         [EXTENSION_USAGE_COUNT]: number;
     };
 };
+export type Unit = 'rem' | 'px';
+export type Length = {
+    value: number;
+    unit: Unit;
+};
 export type DurationValue = {
     value: number;
     unit: 'ms';
@@ -23,7 +28,7 @@ export type UnparsedToken = BaseToken & {
     $value: string;
     $type?: never;
 };
-export type ColorSpace = string | 'srgb' | 'display-p3' | 'hsl' | 'hwb' | 'lab' | 'lch' | 'oklab' | 'oklch' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec2020' | 'xyz-d65' | 'xyz-d50';
+export type ColorSpace = 'srgb' | 'display-p3' | 'hsl' | 'hwb' | 'lab' | 'lch' | 'oklab' | 'oklch' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec2020' | 'xyz-d65' | 'xyz-d50';
 export type ColorComponent = number | 'none';
 export type ColorValue = {
     colorSpace: ColorSpace;
@@ -40,7 +45,7 @@ export type ColorToken = BaseToken & {
 };
 export type DimensionValue = {
     value: number;
-    unit: string;
+    unit: Unit;
 };
 export type DimensionToken = BaseToken & {
     $type: 'dimension';

package/package.json

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