Paste

Design System

Design Tokens Package

Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.

Version
3.0.4
Sources
Install
yarn add @twilio-paste/design-tokens

The Paste design tokens are available as a NPM package which acts as the central source of truth for Paste. By using this package correctly, you can rely on a well-maintained, up-to-date definition of Twilio's Design Language. A simple way to grab or view the latest files in this package is to visit UNPKG - @twilio-paste/design-tokens.

Supported Formats#

While the Paste Tokens Package supports the following formats, our roadmap currently prioritizes React Components and Sketch Libraries as primary deliverables of the Design System. Reach out to us at #help-design-system if you'd like to use Paste for another format: we'll help you out as much as we can!

Paste Design Tokens are supported in the following formats within this package:

Themes#

Paste supports multiple themes. This is done by exporting the same token formats for each theme. Each file in the root of the design tokens package is exported for each theme with the corresponding values updated for each token. This allows different parts of Twilio to have their own visual styles whilst still maintaining a consistent Twilio feel, coherent component behavior, and preventing Design System bloat. Here's an example of Themes:

Default themeSendGrid theme
$color-brand-highlight: #F22F46$color-brand-highlight: #3368FA
$font-size-70: 1.5rem$font-size-70: 1.75rem

See our list of Tokens and their corresponding values in the Token List page.

Within themes, we presently have support for:

Give us Feedback on this Page#

As you use Paste, you'll likely encounter things that don't seem right. Please reach out with your feedback! Here's some prompts to consider:

  • Is this page easy for me to consume?
  • Is the information supporting it sufficient / well-described?
  • What information is missing?
  • How approachable is the documentation? Can a new engineer / PM / designer at Twilio get started with it easily?

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

3.0.4 (2019-12-05)

Bug Fixes#

  • console: change "color-text-inverse-weak" for a11y (#218) (c29de58)

3.0.3 (2019-11-20)

Bug Fixes#

  • remap console semibold to medium font weight (#195) (c01f6b3)

3.0.2 (2019-11-18)

Bug Fixes#

  • design-tokens: change color-text-link token values (#172) (f0a215c)
  • design-tokens: update lightest console color palette (#174) (98b625c)
  • correct button heights add new default icon size (#186) (2e54478)
  • design-tokens: update some blues, reds, and focus shadow (#185) (98d70cc)

3.0.1 (2019-11-12)

Note: Version bump only for package @twilio-paste/design-tokens

3.0.0 (2019-11-11)

Features#

  • icons: delete old icons, add new streamline icons (#129) (571791d)
  • typography: heading component (#149) (4e033e6)

BREAKING CHANGES#

  • icons: removed all the inherited icons since we're moving to a new system

  • chore(icons): update icon list for storybook

  • fix(spinner): use new icon

  • fix(storybook): use new icon for story

  • fix(story): button icons should be 24px

  • fix: adjust icon size tokens

  • feat: add iconSizes as separate key in theme-tokens

  • feat(icons): icons package to use tokens and update icons

  • fix(spinner): update to use tokens and new icons

  • fix(button): use correct spinner size

  • fix(icons): major icons package fixes

  • huge overhaul to build process
  • now uses rollup
  • builds into cjs and esm directories
  • made the package publishable to npm
  • moved svg folder out of src, now src only holds react stuff
  • updated scripts to use new paths and cleaned up the code
  • programmatically generates rollup config from the icon-list command
  • chore: add new icons dist folders to gitignore

  • fix: spinner and button icon usage

  • feat(icons): add rollup icon list cache file

  • fix(core-bundle): sort packages for consistent builds

  • chore: use esm instead of es in rollup for correctness

  • chore: yarn.lock

  • fix(spinner): lint error

  • chore(icons): move rollup icon list

  • chore(spinner): use types package in story

  • fix(spinner): swap out destructured props for explicit props

2.5.0 (2019-10-29)

Bug Fixes#

Features#

  • design token and theme package documentation (#103) (3060113)

2.4.0 (2019-09-16)

Bug Fixes#

  • design-tokens: fix SendGrid token values (#71) (396fccf)
  • design-tokens: typo on word borderr (#56) (6b5edd1)
  • tokens: correct the box shadow tokens category and type (#95) (fe0f946)

Features#

  • tokens: Add box-shadow and line-height tokens (#35) (706643b)

2.3.0 (2019-08-15)

Bug Fixes#

Features#

  • change the z-index scale to 10s (#34) (ed05089)
  • ComponentHeader component, component overview fixes, more (#20) (875e124)
  • website: Add text color token accessibility rating to the token page (#28) (74f12d1)
  • website: Add the tokens page (#19) (878d3c5)
  • website: Callout component (#25) (e4a3d00)