Skip to content

Conversation

@ryan-ludwig
Copy link
Contributor

@ryan-ludwig ryan-ludwig commented Nov 24, 2021

Adds Style Dictionary as a tool automate this process.

This will be helpful for writing SASS in the old stack pages but utilizing up to date values from Kiva Classic.

$fonts-sans: PostGrotesk;
$font-sizes-base-sm: 16;
$font-sizes-base-md: 16;
$font-sizes-base-lg: 17;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of these unitless values are kindof a pain to deal with in SASS and CSS. I wonder if we should add 'px' to them in the tokens file directly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's put px in tokens file.

@@ -0,0 +1,175 @@
/**
* Do not edit directly
Copy link
Contributor Author

@ryan-ludwig ryan-ludwig Nov 24, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we include these dist files in our repo, or only include them as part of the npm package as discussed here
https://stackoverflow.com/questions/31642477/how-to-publish-an-npm-package-with-distribution-files

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should add a github action to rebuild these anytime tokens file is changed.

@ryan-ludwig ryan-ludwig changed the title Generate SCSS vars based on tokens files using Style Dictionary tool Generate SCSS and CSS vars from tokens file Nov 24, 2021
@ryan-ludwig
Copy link
Contributor Author

VUE-910

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants