Reformat typography tokens #13
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| const StyleDictionary = require("style-dictionary").extend("config.json"); | ||
|
|
||
| StyleDictionary.registerFilter({ | ||
| name: "filter-typography", | ||
| matcher: ({ attributes }) => { | ||
| return attributes.type === "typography"; | ||
| }, | ||
| }); | ||
|
|
||
| StyleDictionary.extend({ | ||
|
There was a problem hiding this comment. Extending the |
||
| platforms: { | ||
| Owlery: { | ||
| transformGroup: "scss", | ||
| buildPath: "build/scss/", | ||
| files: [ | ||
| { | ||
| destination: "colors.scss", | ||
| format: "scss/variables", | ||
| filter: { | ||
| type: "color", | ||
| }, | ||
| }, | ||
| { | ||
| destination: "typography.scss", | ||
| format: "scss/variables", | ||
| filter: "filter-typography", | ||
| }, | ||
| ], | ||
| }, | ||
|
|
||
| Aviary: { | ||
| transformGroup: "js", | ||
| buildPath: "build/ts/", | ||
| files: [ | ||
| { | ||
| format: "javascript/es6", | ||
| destination: "colors.ts", | ||
| filter: { | ||
| type: "color", | ||
| }, | ||
| }, | ||
| { | ||
| format: "javascript/es6", | ||
| destination: "typography.ts", | ||
| filter: "filter-typography", | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }).buildAllPlatforms(); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,68 @@ | ||
|
|
||
| // Do not edit directly | ||
| // Generated on Thu, 16 Jun 2022 19:25:52 GMT | ||
|
|
||
| $global-typography-h1-font-family: Mulish; | ||
| $global-typography-h1-font-weight: 700; | ||
| $global-typography-h1-line-height: 40; | ||
| $global-typography-h1-font-size: 40; | ||
| $global-typography-h1-letter-spacing: 0; | ||
| $global-typography-h1-paragraph-spacing: 0; | ||
| $global-typography-h1-text-decoration: none; | ||
| $global-typography-h1-text-case: none; | ||
| $global-typography-h2-font-family: Mulish; | ||
| $global-typography-h2-font-weight: 700; | ||
| $global-typography-h2-line-height: 40; | ||
| $global-typography-h2-font-size: 32; | ||
| $global-typography-h2-letter-spacing: 0; | ||
| $global-typography-h2-paragraph-spacing: 0; | ||
| $global-typography-h2-text-decoration: none; | ||
| $global-typography-h2-text-case: none; | ||
| $global-typography-h3-font-family: Mulish; | ||
| $global-typography-h3-font-weight: 700; | ||
| $global-typography-h3-line-height: 32; | ||
| $global-typography-h3-font-size: 24; | ||
| $global-typography-h3-letter-spacing: 0; | ||
| $global-typography-h3-paragraph-spacing: 0; | ||
| $global-typography-h3-text-decoration: none; | ||
| $global-typography-h3-text-case: none; | ||
| $global-typography-h4-font-family: Mulish; | ||
| $global-typography-h4-font-weight: 700; | ||
| $global-typography-h4-line-height: 24; | ||
| $global-typography-h4-font-size: 20; | ||
| $global-typography-h4-letter-spacing: 0; | ||
| $global-typography-h4-paragraph-spacing: 0; | ||
| $global-typography-h4-text-decoration: none; | ||
| $global-typography-h4-text-case: none; | ||
| $global-typography-h5-font-family: Mulish; | ||
| $global-typography-h5-font-weight: 700; | ||
| $global-typography-h5-line-height: 24; | ||
| $global-typography-h5-font-size: 16; | ||
| $global-typography-h5-letter-spacing: 0; | ||
| $global-typography-h5-paragraph-spacing: 0; | ||
| $global-typography-h5-text-decoration: none; | ||
| $global-typography-h5-text-case: none; | ||
| $global-typography-body-font-family: Mulish; | ||
| $global-typography-body-font-weight: 500; | ||
| $global-typography-body-line-height: 24; | ||
| $global-typography-body-font-size: 16; | ||
|
There was a problem hiding this comment. For these ones it's stripping out the pixel units, is this known, and being addressed later? Or just something we can tweak with the config There was a problem hiding this comment. Yeah! We haven't included it as part of the values from the get-go. We can add it to the values directly, or we can leverage this custom transformer to add the units as a suffix. My plan was to add the custom transformer to keep the values as a numerical value only |
||
| $global-typography-body-letter-spacing: 0; | ||
| $global-typography-body-paragraph-spacing: 0; | ||
| $global-typography-body-text-decoration: none; | ||
| $global-typography-body-text-case: none; | ||
| $global-typography-footnote-font-family: Mulish; | ||
| $global-typography-footnote-font-weight: 500; | ||
| $global-typography-footnote-line-height: 16; | ||
| $global-typography-footnote-font-size: 12; | ||
| $global-typography-footnote-letter-spacing: 0; | ||
| $global-typography-footnote-paragraph-spacing: 0; | ||
| $global-typography-footnote-text-decoration: none; | ||
| $global-typography-footnote-text-case: none; | ||
| $global-typography-caption-font-family: Mulish; | ||
| $global-typography-caption-font-weight: 500; | ||
| $global-typography-caption-line-height: 16; | ||
| $global-typography-caption-font-size: 14; | ||
| $global-typography-caption-letter-spacing: 0; | ||
| $global-typography-caption-paragraph-spacing: 0; | ||
| $global-typography-caption-text-decoration: none; | ||
| $global-typography-caption-text-case: none; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,69 @@ | ||
| /** | ||
| * Do not edit directly | ||
| * Generated on Thu, 16 Jun 2022 19:25:52 GMT | ||
| */ | ||
|
|
||
| export const GlobalTypographyH1FontFamily = "Mulish"; | ||
|
There was a problem hiding this comment. This new format is not an object like previously generated, but matches the |
||
| export const GlobalTypographyH1FontWeight = "700"; | ||
| export const GlobalTypographyH1LineHeight = "40"; | ||
| export const GlobalTypographyH1FontSize = "40"; | ||
| export const GlobalTypographyH1LetterSpacing = "0"; | ||
| export const GlobalTypographyH1ParagraphSpacing = "0"; | ||
| export const GlobalTypographyH1TextDecoration = "none"; | ||
| export const GlobalTypographyH1TextCase = "none"; | ||
| export const GlobalTypographyH2FontFamily = "Mulish"; | ||
| export const GlobalTypographyH2FontWeight = "700"; | ||
| export const GlobalTypographyH2LineHeight = "40"; | ||
| export const GlobalTypographyH2FontSize = "32"; | ||
| export const GlobalTypographyH2LetterSpacing = "0"; | ||
| export const GlobalTypographyH2ParagraphSpacing = "0"; | ||
| export const GlobalTypographyH2TextDecoration = "none"; | ||
| export const GlobalTypographyH2TextCase = "none"; | ||
| export const GlobalTypographyH3FontFamily = "Mulish"; | ||
| export const GlobalTypographyH3FontWeight = "700"; | ||
| export const GlobalTypographyH3LineHeight = "32"; | ||
| export const GlobalTypographyH3FontSize = "24"; | ||
| export const GlobalTypographyH3LetterSpacing = "0"; | ||
| export const GlobalTypographyH3ParagraphSpacing = "0"; | ||
| export const GlobalTypographyH3TextDecoration = "none"; | ||
| export const GlobalTypographyH3TextCase = "none"; | ||
| export const GlobalTypographyH4FontFamily = "Mulish"; | ||
| export const GlobalTypographyH4FontWeight = "700"; | ||
| export const GlobalTypographyH4LineHeight = "24"; | ||
| export const GlobalTypographyH4FontSize = "20"; | ||
| export const GlobalTypographyH4LetterSpacing = "0"; | ||
| export const GlobalTypographyH4ParagraphSpacing = "0"; | ||
| export const GlobalTypographyH4TextDecoration = "none"; | ||
| export const GlobalTypographyH4TextCase = "none"; | ||
| export const GlobalTypographyH5FontFamily = "Mulish"; | ||
| export const GlobalTypographyH5FontWeight = "700"; | ||
| export const GlobalTypographyH5LineHeight = "24"; | ||
| export const GlobalTypographyH5FontSize = "16"; | ||
| export const GlobalTypographyH5LetterSpacing = "0"; | ||
| export const GlobalTypographyH5ParagraphSpacing = "0"; | ||
| export const GlobalTypographyH5TextDecoration = "none"; | ||
| export const GlobalTypographyH5TextCase = "none"; | ||
| export const GlobalTypographyBodyFontFamily = "Mulish"; | ||
| export const GlobalTypographyBodyFontWeight = "500"; | ||
| export const GlobalTypographyBodyLineHeight = "24"; | ||
| export const GlobalTypographyBodyFontSize = "16"; | ||
| export const GlobalTypographyBodyLetterSpacing = "0"; | ||
| export const GlobalTypographyBodyParagraphSpacing = "0"; | ||
| export const GlobalTypographyBodyTextDecoration = "none"; | ||
| export const GlobalTypographyBodyTextCase = "none"; | ||
| export const GlobalTypographyFootnoteFontFamily = "Mulish"; | ||
| export const GlobalTypographyFootnoteFontWeight = "500"; | ||
| export const GlobalTypographyFootnoteLineHeight = "16"; | ||
| export const GlobalTypographyFootnoteFontSize = "12"; | ||
| export const GlobalTypographyFootnoteLetterSpacing = "0"; | ||
| export const GlobalTypographyFootnoteParagraphSpacing = "0"; | ||
| export const GlobalTypographyFootnoteTextDecoration = "none"; | ||
| export const GlobalTypographyFootnoteTextCase = "none"; | ||
| export const GlobalTypographyCaptionFontFamily = "Mulish"; | ||
| export const GlobalTypographyCaptionFontWeight = "500"; | ||
| export const GlobalTypographyCaptionLineHeight = "16"; | ||
| export const GlobalTypographyCaptionFontSize = "14"; | ||
| export const GlobalTypographyCaptionLetterSpacing = "0"; | ||
| export const GlobalTypographyCaptionParagraphSpacing = "0"; | ||
| export const GlobalTypographyCaptionTextDecoration = "none"; | ||
| export const GlobalTypographyCaptionTextCase = "none"; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,3 @@ | ||
| { | ||
| "source": ["data/tokens.json"] | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The new typography tokens format somehow doesn't get parsed when using the lodash filter method so I've used the
registerFilterAPI here to filter for typography types.There's another way which is to check for the category instead, but that also didn't work for me when I tried it in
build.js. Am I missing something @CCAyl?https://amzn.github.io/style-dictionary/#/formats?id=filtering-tokens
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah odd that it wasn't working for you, we can just keep this for now and play with it again after if we want!