New build to JS for values (#38)

fix(pencil): Rejigged build to generate JS files and associated Typescript type files to replace old .ts files, to fix ESM compatibility issues with Jest

Co-authored-by: Ian Clarke <[email protected]>
Co-authored-by: iryanclarke <[email protected]>

build.js

@@ -59,13 +59,25 @@ StyleDictionary.extend({
       buildPath: "build/ts/",
       files: [
         {
-          format: "javascript/es6",
-          destination: "typography.ts",
+          format: "javascript/module-flat",
+          destination: "typography.js",
           filter: "filter-typography",
         },
         {
-          format: "javascript/es6",
-          destination: "colors.ts",
+          format: "typescript/es6-declarations",
+          destination: "typography.d.ts",
+          filter: "filter-typography",
+        },
+        {
+          format: "javascript/module-flat",
+          destination: "colors.js",
+          filter: {
+            type: "color",
+          },
+        },
+        {
+          format: "typescript/es6-declarations",
+          destination: "colors.d.ts",
           filter: {
             type: "color",
           },

build/scss/colors.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 05 Jul 2022 18:28:25 GMT
+// Generated on Wed, 06 Jul 2022 15:42:49 GMT
 
 $green100: #FAFFFC;
 $green200: #EBF2EF;

build/scss/typography.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 05 Jul 2022 18:28:25 GMT
+// Generated on Wed, 06 Jul 2022 15:42:49 GMT
 
 $letterSpacingBase: 0;
 $paragraphSpacingBase: 0;

build/ts/colors.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 06 Jul 2022 15:42:49 GMT
+ */
+
+export const green100 : string;
+export const green200 : string;
+export const green300 : string;
+export const green400 : string;
+export const green500 : string;
+export const green600 : string;
+export const green700 : string;
+export const green800 : string;
+export const blue100 : string;
+export const blue200 : string;
+export const blue300 : string;
+export const blue400 : string;
+export const blue500 : string;
+export const blue600 : string;
+export const blue700 : string;
+export const blue800 : string;
+export const red100 : string;
+export const red200 : string;
+export const red300 : string;
+export const red400 : string;
+export const red500 : string;
+export const red600 : string;
+export const red700 : string;
+export const red800 : string;
+export const purple100 : string;
+export const purple200 : string;
+export const purple300 : string;
+export const purple400 : string;
+export const purple500 : string;
+export const purple600 : string;
+export const purple700 : string;
+export const purple800 : string;
+export const orange100 : string;
+export const orange200 : string;
+export const orange300 : string;
+export const orange400 : string;
+export const orange500 : string;
+export const orange600 : string;
+export const orange700 : string;
+export const orange800 : string;
+export const grey100 : string;
+export const grey200 : string;
+export const grey300 : string;
+export const grey400 : string;
+export const grey500 : string;
+export const grey600 : string;
+export const grey700 : string;
+export const grey800 : string;

build/ts/colors.js

@@ -0,0 +1,55 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 06 Jul 2022 15:42:49 GMT
+ */
+
+module.exports = {
+  "green100": "#FAFFFC",
+  "green200": "#EBF2EF",
+  "green300": "#D1E0D9",
+  "green400": "#B6CFC2",
+  "green500": "#86B09B",
+  "green600": "#307553",
+  "green700": "#275E43",
+  "green800": "#244C38",
+  "blue100": "#F5FAFF",
+  "blue200": "#E6F1FC",
+  "blue300": "#C0D8F0",
+  "blue400": "#88B1D9",
+  "blue500": "#5D96CF",
+  "blue600": "#3971A8",
+  "blue700": "#21588F",
+  "blue800": "#194673",
+  "red100": "#FFF7F9",
+  "red200": "#FEEEF2",
+  "red300": "#F0C4CD",
+  "red400": "#E296A6",
+  "red500": "#C6516A",
+  "red600": "#AF2645",
+  "red700": "#980B29",
+  "red800": "#800D25",
+  "purple100": "#FCFAFF",
+  "purple200": "#F2ECFE",
+  "purple300": "#D7CEE9",
+  "purple400": "#B9ABD5",
+  "purple500": "#8471AB",
+  "purple600": "#533E7D",
+  "purple700": "#3B2566",
+  "purple800": "#2A174F",
+  "orange100": "#FFFAF5",
+  "orange200": "#FFF3E8",
+  "orange300": "#F3D8C0",
+  "orange400": "#E7B88F",
+  "orange500": "#CF8545",
+  "orange600": "#B4631D",
+  "orange700": "#8E4D14",
+  "orange800": "#784213",
+  "grey100": "#FCFEFF",
+  "grey200": "#F5F7FA",
+  "grey300": "#E6EDF5",
+  "grey400": "#C8D3E0",
+  "grey500": "#596D84",
+  "grey600": "#475A70",
+  "grey700": "#36485C",
+  "grey800": "#2E3A47"
+};

build/ts/typography.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 06 Jul 2022 15:42:49 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 lineHeightXlarge : string;
+export const lineHeightLarge : string;
+export const lineHeightNormal : string;
+export const lineHeightSmall : string;
+export const fontFamilySansSerif : string;
+export const weightHeading : number;
+export const weightBase : number;
+export const weightLight : number;
+export const weightStrong : number;
+export const weightBold : number;
+export const h1FontFamily : string;
+export const h1FontWeight : number;
+export const h1LineHeight : string;
+export const h1FontSize : string;
+export const h1LetterSpacing : number;
+export const h1ParagraphSpacing : number;
+export const h1TextDecoration : string;
+export const h1TextCase : string;
+export const h2FontFamily : string;
+export const h2FontWeight : number;
+export const h2LineHeight : string;
+export const h2FontSize : string;
+export const h2LetterSpacing : number;
+export const h2ParagraphSpacing : number;
+export const h2TextDecoration : string;
+export const h2TextCase : string;
+export const h3FontFamily : string;
+export const h3FontWeight : number;
+export const h3LineHeight : string;
+export const h3FontSize : string;
+export const h3LetterSpacing : number;
+export const h3ParagraphSpacing : number;
+export const h3TextDecoration : string;
+export const h3TextCase : string;
+export const h4FontFamily : string;
+export const h4FontWeight : number;
+export const h4LineHeight : string;
+export const h4FontSize : string;
+export const h4LetterSpacing : number;
+export const h4ParagraphSpacing : number;
+export const h4TextDecoration : string;
+export const h4TextCase : string;
+export const h5FontFamily : string;
+export const h5FontWeight : number;
+export const h5LineHeight : string;
+export const h5FontSize : string;
+export const h5LetterSpacing : number;
+export const h5ParagraphSpacing : number;
+export const h5TextDecoration : string;
+export const h5TextCase : string;
+export const bodyFontFamily : string;
+export const bodyFontWeight : number;
+export const bodyLineHeight : string;
+export const bodyFontSize : string;
+export const bodyLetterSpacing : number;
+export const bodyParagraphSpacing : number;
+export const bodyTextDecoration : string;
+export const bodyTextCase : string;
+export const footnoteFontFamily : string;
+export const footnoteFontWeight : number;
+export const footnoteLineHeight : string;
+export const footnoteFontSize : string;
+export const footnoteLetterSpacing : number;
+export const footnoteParagraphSpacing : number;
+export const footnoteTextDecoration : string;
+export const footnoteTextCase : string;
+export const captionFontFamily : string;
+export const captionFontWeight : number;
+export const captionLineHeight : string;
+export const captionFontSize : string;
+export const captionLetterSpacing : number;
+export const captionParagraphSpacing : number;
+export const captionTextDecoration : string;
+export const captionTextCase : string;
+export const mobileH1FontFamily : string;
+export const mobileH1FontWeight : number;
+export const mobileH1LineHeight : string;
+export const mobileH1FontSize : string;
+export const mobileH1LetterSpacing : number;
+export const mobileH1ParagraphSpacing : number;
+export const mobileH1TextDecoration : string;
+export const mobileH1TextCase : string;
+export const mobileH2FontFamily : string;
+export const mobileH2FontWeight : number;
+export const mobileH2LineHeight : string;
+export const mobileH2FontSize : string;
+export const mobileH2LetterSpacing : number;
+export const mobileH2ParagraphSpacing : number;
+export const mobileH2TextDecoration : string;
+export const mobileH2TextCase : string;
+export const mobileH3FontFamily : string;
+export const mobileH3FontWeight : number;
+export const mobileH3LineHeight : string;
+export const mobileH3FontSize : string;
+export const mobileH3LetterSpacing : number;
+export const mobileH3ParagraphSpacing : number;
+export const mobileH3TextDecoration : string;
+export const mobileH3TextCase : string;