@sps-woodland/tokens 8.2.2 → 8.3.0

package/config/config.js

@@ -9,14 +9,18 @@ import "./formats/utilityClasses.js";
 import "./formats/vanillaExtractSprinkleValues.js";
 import "./transforms/attrFont.js";
 import "./transforms/attrGridColumns.js";
+import "./transforms/valueOKLCH.js";
+import "./transforms/valueShadow.js";
 config({ path: "../../../.env" });
 function configureTransforms(sdConfig) {
     for (const platform of Object.values(sdConfig.platforms)) {
         platform.transforms = [
-            ...platform.transforms.filter((transform) => transform !== "size/rem"),
+            ...platform.transforms.filter((transform) => !["color/hex", "size/rem"].includes(transform)),
             "size/pxToRem",
             "attribute/grid-columns",
             "attribute/font",
+            "value/shadow",
+            "value/color/oklch",
         ];
     }
     return sdConfig;

package/config/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../config-src/config.ts"],"names":[],"mappings":"AAAA,qBAAqB;AACrB,oDAAoD;AACpD,uCAAuC;AACvC,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,6BAA6B,CAAC;AACrC,OAAO,2CAA2C,CAAC;AAEnD,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AAEzC,MAAM,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;AAElC,SAAS,mBAAmB,CAAC,QAAgB;IAC3C,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;QACxD,QAAQ,CAAC,UAAU,GAAG;YACpB,GAAG,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,UAAU,CAAC;YACtE,cAAc;YACd,wBAAwB;YACxB,gBAAgB;SACjB,CAAC;KACH;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,eAAe,CAAC,MAAM,CACpB,mBAAmB,CAAC;IAClB,MAAM,EAAE,CAAC,wBAAwB,CAAC;IAClC,SAAS,EAAE;QACT,WAAW,EAAE;YACX,SAAS,EAAE,MAAM;YACjB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,WAAW;oBACnB,WAAW,EAAE,UAAU;iBACxB;aACF;YACD,UAAU,EAAE,eAAe,CAAC,cAAc,CAAC,GAAG;SAC/C;QACD,GAAG,EAAE;YACH,SAAS,EAAE,UAAU;YACrB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,eAAe;oBACvB,WAAW,EAAE,YAAY;iBAC1B;gBACD;oBACE,MAAM,EAAE,qBAAqB;oBAC7B,WAAW,EAAE,WAAW;iBACzB;aACF;YACD,UAAU,EAAE,eAAe,CAAC,cAAc,CAAC,GAAG;SAC/C;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,WAAW;YACtB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,gBAAgB;oBACxB,WAAW,EAAE,aAAa;iBAC3B;gBACD;oBACE,MAAM,EAAE,sBAAsB;oBAC9B,WAAW,EAAE,YAAY;iBAC1B;aACF;YACD,UAAU,EAAE,eAAe,CAAC,cAAc,CAAC,IAAI;SAChD;QACD,EAAE,EAAE;YACF,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,4BAA4B;oBACpC,WAAW,EAAE,mBAAmB;iBACjC;gBACD;oBACE,MAAM,EAAE,0BAA0B;oBAClC,WAAW,EAAE,eAAe;iBAC7B;gBACD;oBACE,MAAM,EAAE,iCAAiC;oBACzC,WAAW,EAAE,uCAAuC;iBACrD;aACF;YACD,UAAU,EAAE,eAAe,CAAC,cAAc,CAAC,EAAE;SAC9C;KACF;CACF,CAAC,CACH,CAAC,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../config-src/config.ts"],"names":[],"mappings":"AAAA,qBAAqB;AACrB,oDAAoD;AACpD,uCAAuC;AACvC,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,6BAA6B,CAAC;AACrC,OAAO,2CAA2C,CAAC;AAEnD,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,6BAA6B,CAAC;AAErC,MAAM,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;AAElC,SAAS,mBAAmB,CAAC,QAAgB;IAC3C,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;QACxD,QAAQ,CAAC,UAAU,GAAG;YACpB,GAAG,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;YAC5F,cAAc;YACd,wBAAwB;YACxB,gBAAgB;YAChB,cAAc;YACd,mBAAmB;SACpB,CAAC;KACH;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,eAAe,CAAC,MAAM,CACpB,mBAAmB,CAAC;IAClB,MAAM,EAAE,CAAC,wBAAwB,CAAC;IAClC,SAAS,EAAE;QACT,WAAW,EAAE;YACX,SAAS,EAAE,MAAM;YACjB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,WAAW;oBACnB,WAAW,EAAE,UAAU;iBACxB;aACF;YACD,UAAU,EAAE,eAAe,CAAC,cAAc,CAAC,GAAG;SAC/C;QACD,GAAG,EAAE;YACH,SAAS,EAAE,UAAU;YACrB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,eAAe;oBACvB,WAAW,EAAE,YAAY;iBAC1B;gBACD;oBACE,MAAM,EAAE,qBAAqB;oBAC7B,WAAW,EAAE,WAAW;iBACzB;aACF;YACD,UAAU,EAAE,eAAe,CAAC,cAAc,CAAC,GAAG;SAC/C;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,WAAW;YACtB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,gBAAgB;oBACxB,WAAW,EAAE,aAAa;iBAC3B;gBACD;oBACE,MAAM,EAAE,sBAAsB;oBAC9B,WAAW,EAAE,YAAY;iBAC1B;aACF;YACD,UAAU,EAAE,eAAe,CAAC,cAAc,CAAC,IAAI;SAChD;QACD,EAAE,EAAE;YACF,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,4BAA4B;oBACpC,WAAW,EAAE,mBAAmB;iBACjC;gBACD;oBACE,MAAM,EAAE,0BAA0B;oBAClC,WAAW,EAAE,eAAe;iBAC7B;gBACD;oBACE,MAAM,EAAE,iCAAiC;oBACzC,WAAW,EAAE,uCAAuC;iBACrD;aACF;YACD,UAAU,EAAE,eAAe,CAAC,cAAc,CAAC,EAAE;SAC9C;KACF;CACF,CAAC,CACH,CAAC,iBAAiB,EAAE,CAAC"}

package/config/transforms/valueOKLCH.js

@@ -0,0 +1,22 @@
+import StyleDictionary from "style-dictionary";
+// only puts LCH values together into a string, does not convert from other color formats
+StyleDictionary.registerTransform({
+    name: "value/color/oklch",
+    type: "value",
+    transitive: true,
+    matcher: (token) => token.attributes.category === "color",
+    transformer(token) {
+        if (!token.value
+            || typeof token.value === "string"
+            || !token.value.hasOwnProperty("l")
+            || !token.value.hasOwnProperty("c")
+            || !token.value.hasOwnProperty("h")) {
+            return token.value;
+        }
+        const { l, c, h, a, } = token.value;
+        return a
+            ? `oklch(${l}% ${c} ${h} / ${a})`
+            : `oklch(${l}% ${c} ${h})`;
+    },
+});
+//# sourceMappingURL=valueOKLCH.js.map

package/config/transforms/valueOKLCH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"valueOKLCH.js","sourceRoot":"","sources":["../../config-src/transforms/valueOKLCH.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAE/C,yFAAyF;AACzF,eAAe,CAAC,iBAAiB,CAAC;IAChC,IAAI,EAAE,mBAAmB;IACzB,IAAI,EAAE,OAAO;IACb,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,OAAO;IACzD,WAAW,CAAC,KAAK;QACf,IACE,CAAC,KAAK,CAAC,KAAK;eACT,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ;eAC/B,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;eAChC,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;eAChC,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,EACnC;YACA,OAAO,KAAK,CAAC,KAAK,CAAC;SACpB;QAED,MAAM,EACJ,CAAC,EACD,CAAC,EACD,CAAC,EACD,CAAC,GACF,GAAG,KAAK,CAAC,KAAK,CAAC;QAEhB,OAAO,CAAC;YACN,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;YACjC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B,CAAC;CACF,CAAC,CAAC"}

package/config/transforms/valueShadow.js

@@ -0,0 +1,11 @@
+import StyleDictionary from "style-dictionary";
+StyleDictionary.registerTransform({
+    name: "value/shadow",
+    type: "value",
+    transitive: true,
+    matcher: (token) => token.attributes.category === "shadow",
+    transformer({ value: { offsetX, offsetY, blur, spread, color, inset, }, }) {
+        return `${offsetX || 0} ${offsetY || 0} ${blur || 0} ${spread || 0} ${color}${inset ? " inset" : ""}`;
+    },
+});
+//# sourceMappingURL=valueShadow.js.map

package/config/transforms/valueShadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"valueShadow.js","sourceRoot":"","sources":["../../config-src/transforms/valueShadow.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAE/C,eAAe,CAAC,iBAAiB,CAAC;IAChC,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,OAAO;IACb,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,QAAQ;IAC1D,WAAW,CAAC,EACV,KAAK,EAAE,EACL,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAK,GACN,GACF;QACC,OAAO,GAAG,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IACxG,CAAC;CACF,CAAC,CAAC"}

package/config-src/config.ts

@@ -12,16 +12,20 @@ import "./formats/vanillaExtractSprinkleValues.js";
 
 import "./transforms/attrFont.js";
 import "./transforms/attrGridColumns.js";
+import "./transforms/valueOKLCH.js";
+import "./transforms/valueShadow.js";
 
 config({ path: "../../../.env" });
 
 function configureTransforms(sdConfig: Config): Config {
   for (const platform of Object.values(sdConfig.platforms)) {
     platform.transforms = [
-      ...platform.transforms.filter((transform) => transform !== "size/rem"),
+      ...platform.transforms.filter((transform) => !["color/hex", "size/rem"].includes(transform)),
       "size/pxToRem",
       "attribute/grid-columns",
       "attribute/font",
+      "value/shadow",
+      "value/color/oklch",
     ];
   }
   return sdConfig;

package/config-src/transforms/valueOKLCH.ts

@@ -0,0 +1,31 @@
+import StyleDictionary from "style-dictionary";
+
+// only puts LCH values together into a string, does not convert from other color formats
+StyleDictionary.registerTransform({
+  name: "value/color/oklch",
+  type: "value",
+  transitive: true,
+  matcher: (token) => token.attributes.category === "color",
+  transformer(token) {
+    if (
+      !token.value
+      || typeof token.value === "string"
+      || !token.value.hasOwnProperty("l")
+      || !token.value.hasOwnProperty("c")
+      || !token.value.hasOwnProperty("h")
+    ) {
+      return token.value;
+    }
+
+    const {
+      l,
+      c,
+      h,
+      a,
+    } = token.value;
+
+    return a
+      ? `oklch(${l}% ${c} ${h} / ${a})`
+      : `oklch(${l}% ${c} ${h})`;
+  },
+});

package/config-src/transforms/valueShadow.ts

@@ -0,0 +1,20 @@
+import StyleDictionary from "style-dictionary";
+
+StyleDictionary.registerTransform({
+  name: "value/shadow",
+  type: "value",
+  transitive: true,
+  matcher: (token) => token.attributes.category === "shadow",
+  transformer({
+    value: {
+      offsetX,
+      offsetY,
+      blur,
+      spread,
+      color,
+      inset,
+    },
+  }) {
+    return `${offsetX || 0} ${offsetY || 0} ${blur || 0} ${spread || 0} ${color}${inset ? " inset" : ""}`;
+  },
+});