Skip to content

pepopowitz/palette

 
 

Repository files navigation

@artsy/palette CircleCI npm version Netlify Status

Artsy's Design System

Meta

What is Palette?

Palette is a collection of primitive, product-agnostic elements that help encapsulate Artsy's look and feel at base level. This project is intended to be used across our digital product portfolio.

Does my component belong in Palette?

If the component applies to Artsy as a brand and can/will be used across multiple digital products, then Palette is a great place for it. If it's highly product specific then it's best to leave the component where it's used. We can always move things later!

If the above guidance still doesn't give you a good sense of what to do, please join the bi-weekly design systems sync.

How to contribute

If you'd like to add a new component to Palette please create an issue using the component spec template. That'll give both design and engineering a chance to peek at the proposal and provide feedback before moving forward.

Local development

In the project root run the following:

$ yarn start
$ open http://localhost:8000/

Linking and Unlinking with Reaction

To link your local palette with your local reaction, run:

$ yarn workspace @artsy/palette link && yarn workspace @artsy/palette watch
(wait until you see a message that X files have been successfully compiled before moving on)

$ cd ../reaction && yarn link @artsy/palette && yarn start

To _unlink_ your local palette from your local reaction, run (in **Reaction**):

$ yarn unlink @artsy/palette
$ yarn add @artsy/palette
$ yarn start

Deployment process

Commits and Deployments

Palette uses auto-release to automatically release on every PR. Every PR should have a label that matches one of the following

  • Version: Trivial
  • Version: Patch
  • Version: Minor
  • Version: Major

Major, minor, and patch will cause a new release to be generated. Use major for breaking changes, minor for new non-breaking features, and patch for bug fixes. Trivial will not cause a release and should be used when updating documentation or non-project code.

If you don't want to release on a particular PR but the changes aren't trivial then use the Skip Release tag along side the appropriate version tag.

Zeplin Plugin

Artsy uses Zeplin and we have developed a plugin that you can install to get Palette component JSX copied directly from Zeplin mocks.

Repos consuming Palette

About Artsy

This project is the work of designers and engineers at Artsy, the world's leading and largest online art marketplace and platform for discovering art. One of our core Engineering Principles is being Open Source by Default which means we strive to share as many details of our work as possible.

You can learn more about this work from our blog and by following @ArtsyOpenSource or explore our public data by checking out our API. If you're interested in a career at Artsy, read through our job postings!

Packages

No packages published

Languages

  • TypeScript 96.5%
  • JavaScript 2.9%
  • Other 0.6%