Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generate SCSS and CSS vars from tokens file #138

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from

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.

1 participant