Rename typography sizes to generic xsmall-3xlarge names #40

fix(pencil): Decouple size token names from headings
Fullscript · Jul 11, 2022 · b484de7 · b484de7
2 parents 6637a15 + cebec33
commit b484de7
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 70 deletions.
diff --git a/build.js b/build.js
@@ -14,8 +14,7 @@ StyleDictionary.registerTransform({
   transformer: function(token) {
     const slicePrefix = token.path.slice(1);
     const filterDesktop = slicePrefix.filter(prefix => prefix !== "desktop");
-
-    return ChangeCase.camelCase(filterDesktop.join(" "));
+    return ChangeCase.camelCase(filterDesktop.join(" ")).replace("_","");
   }
 });
 

diff --git a/build/scss/colors.scss b/build/scss/colors.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 07 Jul 2022 13:19:06 GMT
+// Generated on Thu, 07 Jul 2022 19:30:52 GMT
 
 $green100: #FAFFFC;
 $green200: #EBF2EF;

diff --git a/build/scss/typography.scss b/build/scss/typography.scss
@@ -1,21 +1,21 @@
 
 // Do not edit directly
-// Generated on Thu, 07 Jul 2022 13:19:06 GMT
+// Generated on Thu, 07 Jul 2022 19:30:52 GMT
 
 $letterSpacingBase: 0;
 $paragraphSpacingBase: 0;
 $textDecorationBase: none;
 $textCaseBase: none;
-$sizeH1: 40px;
-$sizeH2: 32px;
-$sizeH3: 24px;
-$sizeH4: 20px;
-$sizeBody: 16px;
-$sizeFootnote: 14px;
-$sizeCaption: 12px;
-$sizeMobileH1: 32px;
-$sizeMobileH2: 28px;
-$sizeMobileH3: 22px;
+$size3xlarge: 40px;
+$size2xlarge: 32px;
+$sizeXlarge: 24px;
+$sizeLarge: 20px;
+$sizeNormal: 16px;
+$sizeSmall: 14px;
+$sizeXsmall: 12px;
+$sizeMobile3xlarge: 32px;
+$sizeMobile2xlarge: 28px;
+$sizeMobileXlarge: 22px;
 $lineHeightXlarge: 40px;
 $lineHeightLarge: 32px;
 $lineHeightNormal: 24px;

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, 07 Jul 2022 13:19:06 GMT
+ * Generated on Thu, 07 Jul 2022 19:30:52 GMT
  */
 
 export const green100 : string;

diff --git a/build/ts/colors.js b/build/ts/colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 07 Jul 2022 13:19:06 GMT
+ * Generated on Thu, 07 Jul 2022 19:30:52 GMT
  */
 
 module.exports = {

diff --git a/build/ts/typography.d.ts b/build/ts/typography.d.ts
@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Thu, 07 Jul 2022 13:19:06 GMT
+ * Generated on Thu, 07 Jul 2022 19:30:52 GMT
  */
 
 export const letterSpacingBase : number;
 export const paragraphSpacingBase : number;
 export const textDecorationBase : string;
 export const textCaseBase : string;
-export const sizeH1 : string;
-export const sizeH2 : string;
-export const sizeH3 : string;
-export const sizeH4 : string;
-export const sizeBody : string;
-export const sizeFootnote : string;
-export const sizeCaption : string;
-export const sizeMobileH1 : string;
-export const sizeMobileH2 : string;
-export const sizeMobileH3 : string;
+export const size3xlarge : string;
+export const size2xlarge : string;
+export const sizeXlarge : string;
+export const sizeLarge : string;
+export const sizeNormal : string;
+export const sizeSmall : string;
+export const sizeXsmall : string;
+export const sizeMobile3xlarge : string;
+export const sizeMobile2xlarge : string;
+export const sizeMobileXlarge : string;
 export const lineHeightXlarge : string;
 export const lineHeightLarge : string;
 export const lineHeightNormal : string;

diff --git a/build/ts/typography.js b/build/ts/typography.js
@@ -1,23 +1,23 @@
 /**
  * Do not edit directly
- * Generated on Thu, 07 Jul 2022 13:19:06 GMT
+ * Generated on Thu, 07 Jul 2022 19:30:52 GMT
  */
 
 module.exports = {
   "letterSpacingBase": 0,
   "paragraphSpacingBase": 0,
   "textDecorationBase": "none",
   "textCaseBase": "none",
-  "sizeH1": "40px",
-  "sizeH2": "32px",
-  "sizeH3": "24px",
-  "sizeH4": "20px",
-  "sizeBody": "16px",
-  "sizeFootnote": "14px",
-  "sizeCaption": "12px",
-  "sizeMobileH1": "32px",
-  "sizeMobileH2": "28px",
-  "sizeMobileH3": "22px",
+  "size3xlarge": "40px",
+  "size2xlarge": "32px",
+  "sizeXlarge": "24px",
+  "sizeLarge": "20px",
+  "sizeNormal": "16px",
+  "sizeSmall": "14px",
+  "sizeXsmall": "12px",
+  "sizeMobile3xlarge": "32px",
+  "sizeMobile2xlarge": "28px",
+  "sizeMobileXlarge": "22px",
   "lineHeightXlarge": "40px",
   "lineHeightLarge": "32px",
   "lineHeightNormal": "24px",

diff --git a/data/tokens.json b/data/tokens.json
@@ -233,45 +233,45 @@
       },
       "size": {
         "desktop": {
-          "h1": {
+          "3xlarge": {
             "value": "40px",
             "type": "fontSizes"
           },
-          "h2": {
+          "2xlarge": {
             "value": "32px",
             "type": "fontSizes"
           },
-          "h3": {
+          "xlarge": {
             "value": "24px",
             "type": "fontSizes"
           },
-          "h4": {
+          "large": {
             "value": "20px",
             "type": "fontSizes"
           },
-          "body": {
+          "normal": {
             "value": "16px",
             "type": "fontSizes"
           },
-          "footnote": {
+          "small": {
             "value": "14px",
             "type": "fontSizes"
           },
-          "caption": {
+          "xsmall": {
             "value": "12px",
             "type": "fontSizes"
           }
         },
         "mobile": {
-          "h1": {
+          "3xlarge": {
             "value": "32px",
             "type": "fontSizes"
           },
-          "h2": {
+          "2xlarge": {
             "value": "28px",
             "type": "fontSizes"
           },
-          "h3": {
+          "xlarge": {
             "value": "22px",
             "type": "fontSizes"
           }
@@ -329,7 +329,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.semiBold}",
             "lineHeight": "{typography.lineHeight.xlarge}",
-            "fontSize": "{typography.size.desktop.h1}",
+            "fontSize": "{typography.size.desktop.3xlarge}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -342,7 +342,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.semiBold}",
             "lineHeight": "{typography.lineHeight.xlarge}",
-            "fontSize": "{typography.size.desktop.h2}",
+            "fontSize": "{typography.size.desktop.2xlarge}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -355,7 +355,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.semiBold}",
             "lineHeight": "{typography.lineHeight.large}",
-            "fontSize": "{typography.size.desktop.h3}",
+            "fontSize": "{typography.size.desktop.xlarge}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -368,7 +368,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.semiBold}",
             "lineHeight": "{typography.lineHeight.normal}",
-            "fontSize": "{typography.size.desktop.h4}",
+            "fontSize": "{typography.size.desktop.large}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -381,7 +381,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.semiBold}",
             "lineHeight": "{typography.lineHeight.normal}",
-            "fontSize": "{typography.size.desktop.body}",
+            "fontSize": "{typography.size.desktop.normal}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -394,7 +394,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.base}",
             "lineHeight": "{typography.lineHeight.normal}",
-            "fontSize": "{typography.size.desktop.body}",
+            "fontSize": "{typography.size.desktop.normal}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -407,7 +407,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.base}",
             "lineHeight": "{typography.lineHeight.small}",
-            "fontSize": "{typography.size.desktop.footnote}",
+            "fontSize": "{typography.size.desktop.small}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -421,7 +421,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.base}",
             "lineHeight": "{typography.lineHeight.small}",
-            "fontSize": "{typography.size.desktop.caption}",
+            "fontSize": "{typography.size.desktop.xsmall}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -435,7 +435,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.semiBold}",
             "lineHeight": "{typography.lineHeight.xlarge}",
-            "fontSize": "{typography.size.mobile.h1}",
+            "fontSize": "{typography.size.mobile.3xlarge}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -448,7 +448,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.semiBold}",
             "lineHeight": "{typography.lineHeight.large}",
-            "fontSize": "{typography.size.mobile.h2}",
+            "fontSize": "{typography.size.mobile.2xlarge}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -461,7 +461,7 @@
             "fontFamily": "{typography.fontFamily.sansSerif}",
             "fontWeight": "{typography.weight.semiBold}",
             "lineHeight": "{typography.lineHeight.large}",
-            "fontSize": "{typography.size.mobile.h3}",
+            "fontSize": "{typography.size.mobile.xlarge}",
             "letterSpacing": "{typography.letterSpacing.base}",
             "paragraphSpacing": "{typography.paragraphSpacing.base}",
             "textDecoration": "{typography.textDecoration.base}",
@@ -474,4 +474,4 @@
   },
   "Light": {},
   "$themes": []
-}
+}
diff --git a/data/transformed-tokens.json b/data/transformed-tokens.json
@@ -232,45 +232,45 @@
     },
     "size": {
       "desktop": {
-        "h1": {
+        "3xlarge": {
           "value": "40px",
           "type": "fontSizes"
         },
-        "h2": {
+        "2xlarge": {
           "value": "32px",
           "type": "fontSizes"
         },
-        "h3": {
+        "xlarge": {
           "value": "24px",
           "type": "fontSizes"
         },
-        "h4": {
+        "large": {
           "value": "20px",
           "type": "fontSizes"
         },
-        "body": {
+        "normal": {
           "value": "16px",
           "type": "fontSizes"
         },
-        "footnote": {
+        "small": {
           "value": "14px",
           "type": "fontSizes"
         },
-        "caption": {
+        "xsmall": {
           "value": "12px",
           "type": "fontSizes"
         }
       },
       "mobile": {
-        "h1": {
+        "3xlarge": {
           "value": "32px",
           "type": "fontSizes"
         },
-        "h2": {
+        "2xlarge": {
           "value": "28px",
           "type": "fontSizes"
         },
-        "h3": {
+        "xlarge": {
           "value": "22px",
           "type": "fontSizes"
         }