feat(sketch): add sketch package

[joshblack]

Closes #2438

Add @carbon/sketch package responsible for creating the Carbon Elements sketch plugin. This plugin provides the following commands as defined by its manifest.json:

• Colors
  • Sync shared styles
  • Generate a colors page with swatch artboards
• Themes
  • Sync shared styles
  • Generate a themes page with token artboards
• Icons
  • Generate an icons page with symbols
• Type
  • Sync shared styles
  • Generate a type page

Notes to reviewers:

• The full end-to-end demo of this plugin is available here: feat(sketch): add sketch package #2720 (comment)
• The package README.md has some details around building and running sketch plugins, alongside project structure
• The package itself is private and will not be published as a part of our regular release process
• The package can run on machines that don't have Sketch installed
• We need to verify what machines the plugin can be run on, the plugin itself is available here: feat(sketch): add sketch package #2720 (comment)

Changelog

New

• @carbon/sketch package

Changed

• @carbon/icons
  • 16/checkmark--filled update to correct id to inner-path
  • 32/checkmark--filled update fill-opacity to opacity

Removed

[joshblack]

Color command preview:

https://ibm.box.com/s/agplb4glg7dgfxje27qxymsoushz6nr8

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit cc4a9f0

https://deploy-preview-2720--the-carbon-components.netlify.com

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit 27db18e

https://deploy-preview-2720--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit cc4a9f0

https://deploy-preview-2720--carbon-components-react.netlify.com

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit 61ed5e4

https://deploy-preview-2720--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-components-react failed.

Built with commit 61ed5e4

https://app.netlify.com/sites/carbon-components-react/deploys/5ced7e61c3f1b465f64ed389

[joshblack]

cc @lovemecomputer if you have a chance to review! Going through and adding docs on how the plugin flow works but wanted to point this your way in case you had time before then 😄

[joshblack]

Plugin download: https://ibm.box.com/s/ag1noz1ueh25rc0f1rlbc2f6klyo10tv

[aagonzales]

woo-hoo! Everything worked for me! I didn't check the accuracy of all the values, but I'm assuming they're right since its being generated from code. I can go through and check that though if you want me too.

[joshblack]

@aagonzales I know one thing I noticed that was off were the type font weights 😞 for some reason Sketch is thinking we are specifying extra light for plex instead of light (at least on my machine).

We might want to just document what are the differences for things like that which will need to be fixed before syncing to a library. I think for colors/themes we should be fine, and icons I think we just will have to wait for someone to tell us when something is busted lol. There are so many and Sketch lags so much 😭

[aagonzales]

@joshblack oh wait the icons all have borders on them

[joshblack]

Oh whoa, weird 🤔 Locally it shows me this:

Have any idea what the difference might be?

[joshblack]

Couple of TODOs:

• Figure out how to reset border if user has border option on by default for new layers
• Figure out how to sync color shared style with text styles

[joshblack]

@aagonzales here's a link with the latest updates for border issues, let me know if it works!

https://ibm.box.com/s/8htauxuu7mjuyj11j86y7gnde9wibdva

[aagonzales]

@joshblack yup! They're back to normal now. No strokes/borders

[lovemecomputer]

josh gave a walkthrough of the code & plugin, and it seems to be on a pretty good track! it will be good to continue the conversation of ensuring this codebase works for our designers, and the package seems like it has solved the hardest must-have features and is in a good state to merge and keep pushing on it!

[alisonjoseph]

🙌 Nice work on this Josh!

[lovemecomputer]

yayyyy