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

External icon libraries & token generation #18

Merged
merged 9 commits into from
Jul 31, 2023

Conversation

CrookedGrin
Copy link

This update does two things:

  1. Wraps up the external icon library registration into a single exported method that can be called as-is.This will allow the Rails app, the docs site, and CodePen to all just call registerExternalLibraries() instead of duplicating the registration logic for each library like they do currently.

  2. Creates a single source-of-truth for color and font tokens in JSON and then generates all the CSS tokens via automation. In addition to cleaning things up, this will allow us to import that same JSON into shared-ui and use it to generate the tailwind config, and thus avoid having our color tokens defined in multiple places. The tokens are exported and available via CDN or through the package itself via Yarn/NPM.

@vercel
Copy link

vercel bot commented Jul 28, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
shoelace ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 31, 2023 6:32pm

Copy link
Collaborator

@kdonovan kdonovan left a comment

Choose a reason for hiding this comment

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

Thanks, Daross -- awesome work automating the generation/letting us centralize configs! 🚗

docs/assets/plugins/code-block/code-block.js Outdated Show resolved Hide resolved
scripts/make-styles.js Outdated Show resolved Hide resolved
import fs from 'fs';
import path from 'path';
import prettier from 'prettier';
import tokens from './../src/styles/tokens.json' assert { type: 'json' };
Copy link
Collaborator

Choose a reason for hiding this comment

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

TIL import + assert`

Copy link
Author

Choose a reason for hiding this comment

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

Yeah, that's a new / experimental Node thing. You get a warning in the console, but it works.

@@ -580,12 +582,12 @@ sl-dialog.small::part(body) {
--header-spacing: 32px 0 16px 24px;
}

sl-dialog.has-icon > div {
sl-dialog.has-icon>div {
Copy link
Collaborator

Choose a reason for hiding this comment

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

The syntax highlighting implies the lack of spaces around > is fine, just calling it out to be sure :)

Copy link
Author

Choose a reason for hiding this comment

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

I had initially added these files to .prettierignore, but trying out putting them back in

Copy link
Author

Choose a reason for hiding this comment

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

I ended up being able to just ignore one of the CSS files (the generated one), which for whatever reason fails the prettier check on CI, but not locally.

@CrookedGrin CrookedGrin merged commit 3842403 into next Jul 31, 2023
2 checks passed
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