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

maintenance: generate CSS Variables from Figma Variables #40

Merged
merged 2 commits into from
Oct 15, 2024

Conversation

MH4GF
Copy link
Member

@MH4GF MH4GF commented Oct 11, 2024

Description

Scratch implemented CSS Variables generation script.

I really wanted to check the behavior by having no differences in the generated files, but this was not possible because the order of the variables would have changed.
I am looking at the Preview environment and making sure there are no changes.

Notice

The next PR will enable GitHub Actions to do this.

@MH4GF MH4GF temporarily deployed to preview - service-site October 11, 2024 11:23 — with GitHub Actions Inactive
@MH4GF MH4GF temporarily deployed to preview - service-site-storybook October 11, 2024 11:23 — with GitHub Actions Inactive
@MH4GF MH4GF changed the title wip maintenance: generate CSS Variables from Figma Variables Oct 11, 2024
@MH4GF MH4GF force-pushed the figma-to-css-variables branch from eb1dfd5 to f0daaee Compare October 15, 2024 06:54
@MH4GF MH4GF temporarily deployed to preview - service-site October 15, 2024 06:54 — with GitHub Actions Inactive
@MH4GF MH4GF temporarily deployed to preview - service-site-storybook October 15, 2024 06:54 — with GitHub Actions Inactive
@MH4GF MH4GF force-pushed the figma-to-css-variables branch from f0daaee to 4a996b5 Compare October 15, 2024 07:06
@MH4GF MH4GF temporarily deployed to preview - service-site October 15, 2024 07:06 — with GitHub Actions Inactive
@MH4GF MH4GF temporarily deployed to preview - service-site-storybook October 15, 2024 07:06 — with GitHub Actions Inactive
@import './variables.tokens-dark.css';
@import './variables.tokens-typography.css';
@import './Dark/variables.css';
@import './Mode 1/variables.css';
Copy link
Member Author

@MH4GF MH4GF Oct 15, 2024

Choose a reason for hiding this comment

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

💭 Collection name? Mode name? I'd like to change it at just the right time.

Copy link
Member Author

Choose a reason for hiding this comment

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

Please keep the review of the script section small, as it should work for now!

@MH4GF MH4GF marked this pull request as ready for review October 15, 2024 07:12
@MH4GF MH4GF requested a review from a team as a code owner October 15, 2024 07:12
@MH4GF MH4GF requested review from hoshinotsuyoshi, FunamaYukina, junkisai and sasamuku and removed request for a team October 15, 2024 07:12
To run the script, use the following command:

```sh
FIGMA_FILE_KEY=FnK... FIGMA_ACCESS_TOKEN=figd_xxx pnpm --filter @packages/figma-to-css-variables gen --output '../../apps/service-site/src/styles' --filter-modes 'Dark,Mode 1'
Copy link
Member Author

Choose a reason for hiding this comment

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

You can also run this to run it in your hand 🙆🏻‍♂️

Copy link
Member

@junkisai junkisai left a comment

Choose a reason for hiding this comment

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

LGTM 🎉

@MH4GF MH4GF added this pull request to the merge queue Oct 15, 2024
Merged via the queue into main with commit 7047c3f Oct 15, 2024
8 checks passed
@MH4GF MH4GF deleted the figma-to-css-variables branch October 15, 2024 09:47
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