From 37f2611413443b8c2ffd7d8a66456a54d32cf1b9 Mon Sep 17 00:00:00 2001 From: Ian Clarke Date: Wed, 6 Jul 2022 12:55:40 -0400 Subject: [PATCH] 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 Co-authored-by: iryanclarke --- build.js | 20 +++++-- build/scss/colors.scss | 2 +- build/scss/typography.scss | 2 +- build/ts/colors.d.ts | 53 +++++++++++++++++ build/ts/colors.js | 55 +++++++++++++++++ build/ts/colors.ts | 53 ----------------- build/ts/typography.d.ts | 117 ++++++++++++++++++++++++++++++++++++ build/ts/typography.js | 119 +++++++++++++++++++++++++++++++++++++ build/ts/typography.ts | 117 ------------------------------------ 9 files changed, 362 insertions(+), 176 deletions(-) create mode 100644 build/ts/colors.d.ts create mode 100644 build/ts/colors.js delete mode 100644 build/ts/colors.ts create mode 100644 build/ts/typography.d.ts create mode 100644 build/ts/typography.js delete mode 100644 build/ts/typography.ts diff --git a/build.js b/build.js index 15bbfb9f..9a2e93c7 100644 --- a/build.js +++ b/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", }, diff --git a/build/scss/colors.scss b/build/scss/colors.scss index 74fabbcb..1969968f 100644 --- a/build/scss/colors.scss +++ b/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; diff --git a/build/scss/typography.scss b/build/scss/typography.scss index 5e985626..339ade80 100644 --- a/build/scss/typography.scss +++ b/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; diff --git a/build/ts/colors.d.ts b/build/ts/colors.d.ts new file mode 100644 index 00000000..a4ed3127 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/build/ts/colors.js b/build/ts/colors.js new file mode 100644 index 00000000..3f6b8773 --- /dev/null +++ b/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" +}; \ No newline at end of file diff --git a/build/ts/colors.ts b/build/ts/colors.ts deleted file mode 100644 index a9c557c1..00000000 --- a/build/ts/colors.ts +++ /dev/null @@ -1,53 +0,0 @@ -/** - * Do not edit directly - * Generated on Tue, 05 Jul 2022 18:28:25 GMT - */ - -export const green100 = "#FAFFFC"; -export const green200 = "#EBF2EF"; -export const green300 = "#D1E0D9"; -export const green400 = "#B6CFC2"; -export const green500 = "#86B09B"; -export const green600 = "#307553"; -export const green700 = "#275E43"; -export const green800 = "#244C38"; -export const blue100 = "#F5FAFF"; -export const blue200 = "#E6F1FC"; -export const blue300 = "#C0D8F0"; -export const blue400 = "#88B1D9"; -export const blue500 = "#5D96CF"; -export const blue600 = "#3971A8"; -export const blue700 = "#21588F"; -export const blue800 = "#194673"; -export const red100 = "#FFF7F9"; -export const red200 = "#FEEEF2"; -export const red300 = "#F0C4CD"; -export const red400 = "#E296A6"; -export const red500 = "#C6516A"; -export const red600 = "#AF2645"; -export const red700 = "#980B29"; -export const red800 = "#800D25"; -export const purple100 = "#FCFAFF"; -export const purple200 = "#F2ECFE"; -export const purple300 = "#D7CEE9"; -export const purple400 = "#B9ABD5"; -export const purple500 = "#8471AB"; -export const purple600 = "#533E7D"; -export const purple700 = "#3B2566"; -export const purple800 = "#2A174F"; -export const orange100 = "#FFFAF5"; -export const orange200 = "#FFF3E8"; -export const orange300 = "#F3D8C0"; -export const orange400 = "#E7B88F"; -export const orange500 = "#CF8545"; -export const orange600 = "#B4631D"; -export const orange700 = "#8E4D14"; -export const orange800 = "#784213"; -export const grey100 = "#FCFEFF"; -export const grey200 = "#F5F7FA"; -export const grey300 = "#E6EDF5"; -export const grey400 = "#C8D3E0"; -export const grey500 = "#596D84"; -export const grey600 = "#475A70"; -export const grey700 = "#36485C"; -export const grey800 = "#2E3A47"; \ No newline at end of file diff --git a/build/ts/typography.d.ts b/build/ts/typography.d.ts new file mode 100644 index 00000000..fff9c8b4 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/build/ts/typography.js b/build/ts/typography.js new file mode 100644 index 00000000..9e59a09a --- /dev/null +++ b/build/ts/typography.js @@ -0,0 +1,119 @@ +/** + * Do not edit directly + * Generated on Wed, 06 Jul 2022 15:42:49 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", + "lineHeightXlarge": "40px", + "lineHeightLarge": "32px", + "lineHeightNormal": "24px", + "lineHeightSmall": "16px", + "fontFamilySansSerif": "Mulish", + "weightHeading": 700, + "weightBase": 500, + "weightLight": 400, + "weightStrong": 600, + "weightBold": 900, + "h1FontFamily": "Mulish", + "h1FontWeight": 700, + "h1LineHeight": "40px", + "h1FontSize": "40px", + "h1LetterSpacing": 0, + "h1ParagraphSpacing": 0, + "h1TextDecoration": "none", + "h1TextCase": "none", + "h2FontFamily": "Mulish", + "h2FontWeight": 700, + "h2LineHeight": "40px", + "h2FontSize": "32px", + "h2LetterSpacing": 0, + "h2ParagraphSpacing": 0, + "h2TextDecoration": "none", + "h2TextCase": "none", + "h3FontFamily": "Mulish", + "h3FontWeight": 700, + "h3LineHeight": "32px", + "h3FontSize": "24px", + "h3LetterSpacing": 0, + "h3ParagraphSpacing": 0, + "h3TextDecoration": "none", + "h3TextCase": "none", + "h4FontFamily": "Mulish", + "h4FontWeight": 700, + "h4LineHeight": "24px", + "h4FontSize": "20px", + "h4LetterSpacing": 0, + "h4ParagraphSpacing": 0, + "h4TextDecoration": "none", + "h4TextCase": "none", + "h5FontFamily": "Mulish", + "h5FontWeight": 700, + "h5LineHeight": "24px", + "h5FontSize": "16px", + "h5LetterSpacing": 0, + "h5ParagraphSpacing": 0, + "h5TextDecoration": "none", + "h5TextCase": "none", + "bodyFontFamily": "Mulish", + "bodyFontWeight": 500, + "bodyLineHeight": "24px", + "bodyFontSize": "16px", + "bodyLetterSpacing": 0, + "bodyParagraphSpacing": 0, + "bodyTextDecoration": "none", + "bodyTextCase": "none", + "footnoteFontFamily": "Mulish", + "footnoteFontWeight": 500, + "footnoteLineHeight": "16px", + "footnoteFontSize": "14px", + "footnoteLetterSpacing": 0, + "footnoteParagraphSpacing": 0, + "footnoteTextDecoration": "none", + "footnoteTextCase": "none", + "captionFontFamily": "Mulish", + "captionFontWeight": 500, + "captionLineHeight": "16px", + "captionFontSize": "12px", + "captionLetterSpacing": 0, + "captionParagraphSpacing": 0, + "captionTextDecoration": "none", + "captionTextCase": "none", + "mobileH1FontFamily": "Mulish", + "mobileH1FontWeight": 700, + "mobileH1LineHeight": "40px", + "mobileH1FontSize": "32px", + "mobileH1LetterSpacing": 0, + "mobileH1ParagraphSpacing": 0, + "mobileH1TextDecoration": "none", + "mobileH1TextCase": "none", + "mobileH2FontFamily": "Mulish", + "mobileH2FontWeight": 700, + "mobileH2LineHeight": "32px", + "mobileH2FontSize": "28px", + "mobileH2LetterSpacing": 0, + "mobileH2ParagraphSpacing": 0, + "mobileH2TextDecoration": "none", + "mobileH2TextCase": "none", + "mobileH3FontFamily": "Mulish", + "mobileH3FontWeight": 700, + "mobileH3LineHeight": "32px", + "mobileH3FontSize": "22px", + "mobileH3LetterSpacing": 0, + "mobileH3ParagraphSpacing": 0, + "mobileH3TextDecoration": "none", + "mobileH3TextCase": "none" +}; \ No newline at end of file diff --git a/build/ts/typography.ts b/build/ts/typography.ts deleted file mode 100644 index ae3416ee..00000000 --- a/build/ts/typography.ts +++ /dev/null @@ -1,117 +0,0 @@ -/** - * Do not edit directly - * Generated on Tue, 05 Jul 2022 18:28:25 GMT - */ - -export const letterSpacingBase = 0; -export const paragraphSpacingBase = 0; -export const textDecorationBase = "none"; -export const textCaseBase = "none"; -export const sizeH1 = "40px"; -export const sizeH2 = "32px"; -export const sizeH3 = "24px"; -export const sizeH4 = "20px"; -export const sizeBody = "16px"; -export const sizeFootnote = "14px"; -export const sizeCaption = "12px"; -export const sizeMobileH1 = "32px"; -export const sizeMobileH2 = "28px"; -export const sizeMobileH3 = "22px"; -export const lineHeightXlarge = "40px"; -export const lineHeightLarge = "32px"; -export const lineHeightNormal = "24px"; -export const lineHeightSmall = "16px"; -export const fontFamilySansSerif = "Mulish"; -export const weightHeading = 700; -export const weightBase = 500; -export const weightLight = 400; -export const weightStrong = 600; -export const weightBold = 900; -export const h1FontFamily = "Mulish"; -export const h1FontWeight = 700; -export const h1LineHeight = "40px"; -export const h1FontSize = "40px"; -export const h1LetterSpacing = 0; -export const h1ParagraphSpacing = 0; -export const h1TextDecoration = "none"; -export const h1TextCase = "none"; -export const h2FontFamily = "Mulish"; -export const h2FontWeight = 700; -export const h2LineHeight = "40px"; -export const h2FontSize = "32px"; -export const h2LetterSpacing = 0; -export const h2ParagraphSpacing = 0; -export const h2TextDecoration = "none"; -export const h2TextCase = "none"; -export const h3FontFamily = "Mulish"; -export const h3FontWeight = 700; -export const h3LineHeight = "32px"; -export const h3FontSize = "24px"; -export const h3LetterSpacing = 0; -export const h3ParagraphSpacing = 0; -export const h3TextDecoration = "none"; -export const h3TextCase = "none"; -export const h4FontFamily = "Mulish"; -export const h4FontWeight = 700; -export const h4LineHeight = "24px"; -export const h4FontSize = "20px"; -export const h4LetterSpacing = 0; -export const h4ParagraphSpacing = 0; -export const h4TextDecoration = "none"; -export const h4TextCase = "none"; -export const h5FontFamily = "Mulish"; -export const h5FontWeight = 700; -export const h5LineHeight = "24px"; -export const h5FontSize = "16px"; -export const h5LetterSpacing = 0; -export const h5ParagraphSpacing = 0; -export const h5TextDecoration = "none"; -export const h5TextCase = "none"; -export const bodyFontFamily = "Mulish"; -export const bodyFontWeight = 500; -export const bodyLineHeight = "24px"; -export const bodyFontSize = "16px"; -export const bodyLetterSpacing = 0; -export const bodyParagraphSpacing = 0; -export const bodyTextDecoration = "none"; -export const bodyTextCase = "none"; -export const footnoteFontFamily = "Mulish"; -export const footnoteFontWeight = 500; -export const footnoteLineHeight = "16px"; -export const footnoteFontSize = "14px"; -export const footnoteLetterSpacing = 0; -export const footnoteParagraphSpacing = 0; -export const footnoteTextDecoration = "none"; -export const footnoteTextCase = "none"; -export const captionFontFamily = "Mulish"; -export const captionFontWeight = 500; -export const captionLineHeight = "16px"; -export const captionFontSize = "12px"; -export const captionLetterSpacing = 0; -export const captionParagraphSpacing = 0; -export const captionTextDecoration = "none"; -export const captionTextCase = "none"; -export const mobileH1FontFamily = "Mulish"; -export const mobileH1FontWeight = 700; -export const mobileH1LineHeight = "40px"; -export const mobileH1FontSize = "32px"; -export const mobileH1LetterSpacing = 0; -export const mobileH1ParagraphSpacing = 0; -export const mobileH1TextDecoration = "none"; -export const mobileH1TextCase = "none"; -export const mobileH2FontFamily = "Mulish"; -export const mobileH2FontWeight = 700; -export const mobileH2LineHeight = "32px"; -export const mobileH2FontSize = "28px"; -export const mobileH2LetterSpacing = 0; -export const mobileH2ParagraphSpacing = 0; -export const mobileH2TextDecoration = "none"; -export const mobileH2TextCase = "none"; -export const mobileH3FontFamily = "Mulish"; -export const mobileH3FontWeight = 700; -export const mobileH3LineHeight = "32px"; -export const mobileH3FontSize = "22px"; -export const mobileH3LetterSpacing = 0; -export const mobileH3ParagraphSpacing = 0; -export const mobileH3TextDecoration = "none"; -export const mobileH3TextCase = "none"; \ No newline at end of file