This repository is the home of the design tokens that power Sprout Social's design system, Seeds. Each package in this repository contains a set of values related to core design needs like color, space, typography, etc. This codebase takes those values and transforms them into tokens that are consumable across several platforms (CSS variables, JaveScript constants, Sketch palettes, etc.).
You can view the documentation for our design tokens on Seeds.
We use Lerna to manage inter-package dependencies in this monorepo.
To build Seeds packages, simply install dependencies by running yarn
and build packets with yarn build
.
yarn build
- Build packagesWe use standard-version to automatically update the changelog and decide new version numbers. As such, we need commit messages to follow a consistent format (drawn from conventional commits).
Example commit messages (simply match this pattern and your commit message will be accepted):
git commit -m "feat: add seeds-example packet"
git commit -m "fix(seeds-color): fix table layout for green colors" -m "fixes RD-999"
git commit -m "feat(seeds-border): add new 8px border radius token"
git commit -m "docs: update asset file paths"
git commit -m "feat(dependencies): upgrade classnames to 2.2.5"
git commit -m "chore(dependencies): upgrade babel dependencies to latest version"
(chore because they are devDependencies)git commit -m "feat(build): add linting to commit messages"
Commit message format:
type(scope?): subject
body?
footer?
type
is one of the following:
src
or test
filesscope
is optional but, with few exceptions, should be used for all feat
and fix
commits. Common scopes include:
dependencies
should be feat
, and devDependencies
should be chore
feat
or fix
Feel free to suggest additional scope options.
subject
requirements:
body
is optional and allows for more details to be added
footer
contains meta-information about pull requests, e.g. "fixes DS-999", referring to a Jira ticket.
develop
branchmain
branch and merge it. Jenkins will notify a successful build notifying that the seeds-packets were published to NPM, once that is complete create a final pull request from main
to develop
Test any local packet in another project by utilizing yarn link. Below is an example workflow to link seeds-packets
to seeds
.
Navigate to your local copy of any Seeds packet in a terminal window
$ cd ~/YourCodeFolder/seeds-packets/seeds-{packet name}
$ yarn link # only needs to be run once
$ yarn build
Navigate to the folder where you wish to use the packets in your terminal (such as seeds
) and complete the link
$ cd ~/YourCodeFolder/seeds
$ yarn link "@sproutsocial/seeds-{packet name}"
$ yarn start
You can now use any packet from your local instance of Seeds in your project.
When you are done, be sure to unlink Seeds so you are using the published version of the packets
$ yarn unlink "@sproutsocial/seeds-{packet name}"