npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@coinbase/cds-illustrations

v4.29.0

Published

CDS illustrations

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

coinbase-ownercoinbase-ownercoinbase-npmcoinbase-npm

Keywords

Readme

@coinbase/cds-illustrations

CDS illustrations used in @coinbase/cds-web and @coinbase/cds-mobile.

Installation

yarn add @coinbase/cds-illustrations

Contributing

Figma Links

Summary

The CDS Illustrations Figma components are composed of vectors which leverage the CDS Figma Illustration light color styles to power their color fills. This allows design to create a single light mode version, and engineering handles creating the dark mode version through the CDS Figma plugin or through code generation.

In order for engineering to generate a dark mode version of an illustration asset, we need to pull information about the light and dark mode color styles from Figma (yarn nx run figma-styles:sync). The CDS Illustration color styles should not change often and can be run on an as-needed basis.

Releasing Illustrations

  1. (optional) Sync the latest illustration Figma color styles if they were changed. You do not need to do a version bump for any changes.
yarn nx run figma-styles:sync-illustration-dark-styles
yarn nx run figma-styles:sync-illustration-light-styles
  1. Sync the latest Figma illustration components.
yarn nx run illustrations:release
  • IMPORTANT: If any illustrations are renamed or deleted, this update will be a breaking change for consumers. Please ensure that you publish a migration guide and a migrator script along with this release to aid consumers with migration.

  1. Commit the changes with a message in the following format: feat: Publish illustrations mm/dd/yyyy

  2. Open a PR with the changes

  3. Bump the package version and update the changelog

yarn changelog illustrations
  • When prompted, do the following:
    • Type of change?: "Update" or "Breaking"
    • Changelog message?: Copy/paste your PR title (just the part after feat:)
    • PR number?: Copy/paste your PR number
    • Skip the rest (press enter to use defaults)

  1. Run yarn release to generate website changelogs.

  2. Commit and push the changes to your existing PR

  3. When the Percy diffs are ready, share them with the Illustrations DRI for approval. Merge your PR once the DRI has signed off.

If not, manually trigger the builds if necessary and/or deploy the targets as needed when the build is complete. NOTE: If you're releasing both icons and illustrations at the same time, you only need to deploy to production::cds-docs once, so just pick whichever commit is the most recent and deploy from there.

  1. After the deploy has succeeded, verify that the new package was published at the production Coinbase NPM registry. It usually takes about 10 min or so for the package to be uploaded. Look for the version number at the bottom of the artifact list in the package directory.

Gotchas

  • It is important to note that if an illustration asset is referencing a color style which was not present the last time the color syncs were run, then the yarn nx run figma-styles:sync-* commands will need to be run again before running yarn nx run illustrations:release.

  • The illustrations:release command calls illustrations:sync which requires a lightModeManifestFile and darkModeManifestFile as inputs in project.json when generating the svg assets on the fly. If those files are stale, the executor will fallback to the hex value of the color style used (which will always be a light mode fill since that is the only asset design provides), thus making the light and dark mode images the same.

  • The release script assumes that each light mode color style synced with figma-styles:sync-illustration-light-styles is assigned a unique hex value in Figma. If there are duplicate hex values (check the light mode manifest), dark mode variants generated during the illustrations:release task may not have the correct colors.

  • If seeing this error: "Cannot read properties of undefined ('styles')", you need to update your FIGMA token to the new value.

  • You may see the task complete without any changes and the message: "There are no changes since the last update on XX/XX/XXXX". Verify this is expected with design.