Merge pull request #51 from Fullscript/transform-shade-tokens

Add custom transform for shades tokens to strip shades prefix
Fullscript · Aug 5, 2022 · 9103684 · 9103684
2 parents 09255a6 + 7c3afab
commit 9103684
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 40 deletions.
diff --git a/build.js b/build.js
@@ -1,55 +1,75 @@
 const StyleDictionary = require("style-dictionary").extend("config.json");
-const ChangeCase = require('change-case')
+const ChangeCase = require("change-case");
 
 function isStringPxValue(token) {
-  if (typeof token.value === 'string'){
-    return (token.value).endsWith('px');
+  if (typeof token.value === "string") {
+    return token.value.endsWith("px");
   }
 }
 
 StyleDictionary.registerFilter({
   name: "filter-typography",
-  matcher: function(token){
+  matcher: function (token) {
     return token.attributes.category === "typography";
   },
 });
 
 StyleDictionary.registerTransform({
-  name: 'name/typography',
-  type: 'name',
-  transformer: function(token) {
+  name: "name/remove-desktop-prefix",
+  type: "name",
+  transformer: function (token) {
     const slicePrefix = token.path.slice(1);
-    const filterDesktop = slicePrefix.filter(prefix => prefix !== "desktop");
-    return ChangeCase.camelCase(filterDesktop.join(" ")).replace("_","");
-  }
+    const filterDesktop = slicePrefix.filter((prefix) => prefix !== "desktop");
+    return ChangeCase.camelCase(filterDesktop.join(" ")).replace("_", "");
+  },
 });
 
 StyleDictionary.registerTransform({
-  name: 'name/slice-one',
+  name: "name/remove-color-prefix",
   matcher: (token) => token.type === "color",
-  type: 'name',
-  transformer: function(token) {
+  type: "name",
+  transformer: function (token) {
     return ChangeCase.camelCase(token.path.slice(1).join(""));
-  }
+  },
+});
+
+StyleDictionary.registerTransform({
+  name: "name/remove-shades-prefix",
+  type: "name",
+  matcher: (token) => token.type === "color" && token.path.includes("shades"),
+  transformer: function (token) {
+    return ChangeCase.camelCase(token.path.slice(2).join(""));
+  },
 });
 
 StyleDictionary.registerTransform({
-  name: 'value/rm-px',
-  type: 'value',
+  name: "value/rm-px",
+  type: "value",
   matcher: isStringPxValue,
   transformer: function (token) {
     return parseFloat(token.value);
   },
 });
 
 StyleDictionary.registerTransformGroup({
-  name: 'custom/aviary',
-  transforms: [ 'name/typography', 'name/slice-one', 'attribute/cti']
+  name: "custom/aviary",
+  transforms: [
+    "attribute/cti",
+    "name/remove-color-prefix",
+    "name/remove-desktop-prefix",
+    "name/remove-shades-prefix",
+  ],
 });
 
 StyleDictionary.registerTransformGroup({
-  name: 'custom/native',
-  transforms: [ 'name/typography', 'name/slice-one', 'attribute/cti', 'value/rm-px']
+  name: "custom/native",
+  transforms: [
+    "attribute/cti",
+    "name/remove-color-prefix",
+    "name/remove-desktop-prefix",
+    "name/remove-shades-prefix",
+    "value/rm-px",
+  ],
 });
 
 StyleDictionary.extend({

diff --git a/build/native/colors.d.ts b/build/native/colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Aug 2022 14:54:26 GMT
+ * Generated on Thu, 04 Aug 2022 21:59:25 GMT
  */
 
 export const green100 : string;
@@ -51,5 +51,5 @@ export const grey500 : string;
 export const grey600 : string;
 export const grey700 : string;
 export const grey800 : string;
-export const shadeswhite : string;
-export const shadesblack : string;
+export const white : string;
+export const black : string;
diff --git a/build/native/colors.js b/build/native/colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Aug 2022 14:54:26 GMT
+ * Generated on Thu, 04 Aug 2022 21:59:25 GMT
  */
 
 module.exports = {
@@ -52,6 +52,6 @@ module.exports = {
   "grey600": "#475A70",
   "grey700": "#36485C",
   "grey800": "#2E3A47",
-  "shadeswhite": "#FFFFFF",
-  "shadesblack": "#000000"
+  "white": "#FFFFFF",
+  "black": "#000000"
 };
diff --git a/build/native/typography.d.ts b/build/native/typography.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Aug 2022 14:54:26 GMT
+ * Generated on Thu, 04 Aug 2022 21:59:25 GMT
  */
 
 export const letterSpacingBase : number;

diff --git a/build/native/typography.js b/build/native/typography.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Aug 2022 14:54:26 GMT
+ * Generated on Thu, 04 Aug 2022 21:59:25 GMT
  */
 
 module.exports = {

diff --git a/build/scss/colors.scss b/build/scss/colors.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 04 Aug 2022 14:54:26 GMT
+// Generated on Thu, 04 Aug 2022 21:59:25 GMT
 
 $green100: #FAFFFC;
 $green200: #EBF2EF;
@@ -50,5 +50,5 @@ $grey500: #596D84;
 $grey600: #475A70;
 $grey700: #36485C;
 $grey800: #2E3A47;
-$shadeswhite: #FFFFFF;
-$shadesblack: #000000;
+$white: #FFFFFF;
+$black: #000000;
diff --git a/build/scss/typography.scss b/build/scss/typography.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 04 Aug 2022 14:54:26 GMT
+// Generated on Thu, 04 Aug 2022 21:59:25 GMT
 
 $letterSpacingBase: 0;
 $paragraphSpacingBase: 0;

diff --git a/build/ts/colors.d.ts b/build/ts/colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Aug 2022 14:54:26 GMT
+ * Generated on Thu, 04 Aug 2022 21:59:25 GMT
  */
 
 export const green100 : string;
@@ -51,5 +51,5 @@ export const grey500 : string;
 export const grey600 : string;
 export const grey700 : string;
 export const grey800 : string;
-export const shadeswhite : string;
-export const shadesblack : string;
+export const white : string;
+export const black : string;
diff --git a/build/ts/colors.js b/build/ts/colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Aug 2022 14:54:26 GMT
+ * Generated on Thu, 04 Aug 2022 21:59:25 GMT
  */
 
 module.exports = {
@@ -52,6 +52,6 @@ module.exports = {
   "grey600": "#475A70",
   "grey700": "#36485C",
   "grey800": "#2E3A47",
-  "shadeswhite": "#FFFFFF",
-  "shadesblack": "#000000"
+  "white": "#FFFFFF",
+  "black": "#000000"
 };
diff --git a/build/ts/typography.d.ts b/build/ts/typography.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Aug 2022 14:54:26 GMT
+ * Generated on Thu, 04 Aug 2022 21:59:25 GMT
  */
 
 export const letterSpacingBase : number;

diff --git a/build/ts/typography.js b/build/ts/typography.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Aug 2022 14:54:26 GMT
+ * Generated on Thu, 04 Aug 2022 21:59:25 GMT
  */
 
 module.exports = {