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

Valet Theme Updater — Token Transformer #83

Merged
merged 4 commits into from
Jul 25, 2022

Conversation

djalmaaraujo
Copy link
Contributor

@djalmaaraujo djalmaaraujo commented Jul 21, 2022

Description

Introducing a way to have the VIP Design System (Figma files) integrated with all our React components 🥳 . The long explanation is described in the README.md file changes in this Pull Request.

The long history short is: We now can read all theming information we need from a tokens JSON file and parse it so the React theme can be read and used in the components system.

New npm script command added:

npm run theme-update

Checklist

  • This PR has good automated test coverage
  • The storybook for the component has been updated

Steps to Test

  1. Pull down PR.
  2. npm run theme-update.
  3. Check the src/generated/valet-theme.json file
  4. Run npm run dev
  5. See the new colors are applied to all components

@djalmaaraujo djalmaaraujo requested review from chriszarate and a team July 21, 2022 16:38
@netlify
Copy link

netlify bot commented Jul 21, 2022

Deploy Preview for vip-design-system-components ready!

Name Link
🔨 Latest commit 3226331
🔍 Latest deploy log https://app.netlify.com/sites/vip-design-system-components/deploys/62d984f7ca1b5600084ba6ec
😎 Deploy Preview https://deploy-preview-83--vip-design-system-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@djalmaaraujo djalmaaraujo marked this pull request as ready for review July 21, 2022 16:41
@djalmaaraujo djalmaaraujo requested a review from a team July 21, 2022 16:44
@@ -56,7 +56,7 @@ const outline = {
outlineStyle: 'solid',
outlineColor: '#ffffff',
outlineWidth: '1px',
boxShadow: `0 0 0 1px #fff, 0 0 0 3px ${ getColor( 'focus' ) }`,
boxShadow: `0 0 0 1px ${ getColor( 'focus', 'inset' ) }, 0 0 0 3px ${ getColor( 'focus' ) }`,
Copy link
Contributor

Choose a reason for hiding this comment

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

😍

Copy link
Contributor

@brunobasto brunobasto left a comment

Choose a reason for hiding this comment

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

This is awesome 💯

@luiztiago
Copy link
Contributor

LGTM :shipit:

Copy link

@ingeniumed ingeniumed left a comment

Choose a reason for hiding this comment

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

Amazing!

Copy link

@alecgeatches alecgeatches left a comment

Choose a reason for hiding this comment

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

Awesome! It's cool that you can reuse color references in the design system and can drop in the tokens as-is.

Are you planning to integrate other tokens like typography in here from the design system as well?

@djalmaaraujo
Copy link
Contributor Author

Awesome! It's cool that you can reuse color references in the design system and can drop in the tokens as-is.

Are you planning to integrate other tokens like typography in here from the design system as well?

Yes, that's the idea for future improvements @alecgeatches 🥳

@djalmaaraujo djalmaaraujo merged commit 06f41b3 into trunk Jul 25, 2022
@djalmaaraujo djalmaaraujo deleted the add/theme-updater-for-valet branch July 25, 2022 16:41
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.

5 participants