Design Tokens
Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.
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.
Paste Design Tokens are supported in the following formats within this package:
- JSON
- Less
- SCSS
- CSS custom properties
- Android XML
- iOS JSON
- JavaScript
- Typescript definitions
- Sketch Palette
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.
See our list of Tokens and their corresponding values in the Token List page.
Within themes, we presently have support for:
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?
Changelog
e954efd02
#3773 Thanks @nkrantz! - [Design tokens] add new border radius tokens (40-90) for new homepage and ai kit'
67c25a7c9
#3788 Thanks @SiTaggart! - [design-tokens]: added three new branding accent background colors and a new text color token to be used on top of those. Updated 3 branding background colors in the Twilio and twilio-dark themes
f5a0ae961
#3662 Thanks @nkrantz! - [Design Tokens] Update value of line-height-90 from 2.75rem to 2.5rem
855830c89
#3735 Thanks @serifluous! - Remove evergreen font size definitions that inherit from global and update font-size-40 value
ecbba0427
#3634 Thanks @nkrantz! - [Design tokens] add new box shadow token "shadow-border-right-inverse-strong" for vertical Tabs, update values of "shadow-border-top-primary-strongest" tokens in dark themes.
28db966db
#3579 Thanks @nkrantz! - [Design tokens] Add three new box shadow tokens, shadow-border-top-primary, shadow-border-top-inverse-strongest, and shadow-border-top-primary-strongest for use in the tabs package. Add new background color, color-background-inverse-strongest.
b8d79200b
#3442 Thanks @TheSisb! - Removed all run-time prop-type checkingfrom Paste components. Paste now ships with only TypeScript types.ACTION NEEDED: None. This should be 100% backwards compatible.
733709127
#3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles fromnode
tobrowser
to minimize the risk of clashing with RequireJS. This is marked as a major out of an abundance of caution. You shouldn't need to do anything but we wanted you to be aware of the change on the off chance it has unintended consequences
176b7a5b6
#3342 Thanks @serifluous! - Add new brand colors as aliases, sun and accents
9e5b3b7f0
#3224 Thanks @TheSisb! - [Design tokens] update theshadowFocusInverseInset
token in thetwilio
andtwilio-dark
themes
dd884662b
#3279 Thanks @serifluous! - [Design tokens] Make focus shadows in evergreen theme consistent by matching them to twilio theme
9e6399dda
#3208 Thanks @nkrantz! - [Design tokens] add new box shadow tokens (shadow-border-subaccount, shadow-border-bottom-subaccount, shadow-border-inverse-new, shadow-border-bottom-inverse-new) and text tokens (color-text-subaccount, color-text-inverse-new) and update existing background color token (color-background-subaccount) for use in the subaccount badge and the sidebar beta badge
48e5f1e5c
#3225 Thanks @nkrantz! - [Design tokens] Add shadow-focus-inverse-inset token, adjust inverse text tokens for navigation ui kit
d0ea87541
#3218 Thanks @nkrantz! - [Design tokens] adjust avatar border tokens for default and dark themes
d0ea87541
#3218 Thanks @nkrantz! - [Design tokens] updateshadow-border-user
token to fix grouped avatars bug in default theme
c2de547e4
#3141 Thanks @SiTaggart! - [Design-tokens] add thecolor-border-weakest
token
1a09aa61d
#3146 Thanks @serifluous! - [Design tokens] Fixed visual bugs in Evergreen theme tokens: $color-text-icon-brand-highlight, $color-background-overlay, $color-background-primary-strongest, $color-text-user
c2de547e4
#3141 Thanks @SiTaggart! - [Design Tokens] adjusting inverse colors for theTwilio
andTwilio-Dark
themescolor-background-body-inverse
fromgray-110
togray-100
shadow-border-inverse-weakest
fromgray-90
togray-100
color-border-inverse-weakest
fromgray-90
togray-100
c42ad640b
#3130 Thanks @SiTaggart! - Enable the ability to theme the color-scheme css property which can be used to control native HTML elements and the way they render in light or dark mode
bce889344
#3090 Thanks @SiTaggart! - [Design Tokens, Theme] add ability to override the base font size that Paste uses from the HTML element tag via the new token$font-size-base
. Also removes setting font size from the body element for when Paste is embedded into another application with its own styles
6b159b597
#3069 Thanks @nkrantz! - [Design tokens] update default theme token to fix Avatar styles, no changes to new Twilio theme
71f5b1898
#3033 Thanks @gloriliale! - [design tokens] update shadow focuc shadow border design tokens for the twilio themes
a081285f2
#3034 Thanks @SiTaggart! - [Design Tokens]: correct color contrast token pair naming for decorative background 10
fa0596ead
#3055 Thanks @nkrantz! - [Design Tokens] Fix modal background overlay color for evergreen theme
0acdf3486
#3049 Thanks @SiTaggart! - [Design Tokens] remove deprecated light/dark color tokens from the system
dbd9bf992
#3028 Thanks @gloriliale! - [design tokens] update evergreen theme font-sizes
ef094db4a
#3021 Thanks @shleewhite! - [Design Tokens] update the value of colorTextUser for default and dark themes
c056da73e
#2927 Thanks @jb-twilio! - [Theme, Design Tokens] Add evergreen design tokens and theme
b7e429ef5
#2948 Thanks @Niznikr! - [Design Tokens] Add tokens for new themestwilio
andtwilio-dark
:- Aliases: color-palette
- Add
palette-red-65
- Add
palette-red-05
- Add
palette-orange-05
- Add
palette-yellow-05
- Add
palette-green-05
- Add
palette-blue-05
- Add
palette-blue-55
- Add
palette-purple-05
- Add
- Aliases: color-palette
135df9631
#2908 Thanks @shleewhite! - [Design Tokens] add a new colorBackgroundWeak token
804fb9316
#2895 Thanks @Niznikr! - [Design Tokens] Updatetokens.generic.js
export from commonjs to ESM
026bf7f52
#2799 Thanks @SiTaggart! - [design-tokens, theme] updated mono spaced font in default and dark themes to use the new Twilio Sans Mono font
6af951ded
#2806 Thanks @nkrantz! - [Design Tokens]: add 7 new tokens for the Display Heading package: fontSizeDisplay10, fontSizeDisplay20, fontSizeDisplay30, fontWeightExtrabold, lineHeightDisplay10, lineHeightDisplay20, and lineHeightDisplay30.
a4c9e70b0
#2763 Thanks @shleewhite! - Update ESLint rules, which changed some formatting.
d49514a27
#2746 Thanks @jb-twilio! - [Design Tokens] Add token for box-shadow that includes focus and regular border
bd0a3feaa
#2625 Thanks @nkrantz! - [Design tokens] add new icon size and line height tokens (05), adust dark theme background tokens
364083627
#2577 Thanks @zahnster! - [Design tokens] Created a new category of design token, Data Visualization, and subsequently relocated all of the Data Visualization tokens from the generic Color category. If you are using categorized Data Visualization design tokens, you will need to update their reference.
364083627
#2577 Thanks @zahnster! - [Design tokens] Updates ordering on design tokens to be alphanumeric.
364083627
#2577 Thanks @zahnster! - [Design tokens] Update the generic export to exclude deprecated tokens, provide pre-computed alt values, and to omit the originalValue key.
95b65bdfd
#2526 Thanks @TheSisb! - [Design Tokens] add color-background-error-strongest and color-text-error-stronger tokens
1c7765ac0
#2467 Thanks @andipants12! - [Design tokens] Add a new generic export featuring additional metadata. This can be used in documentation or software tooling.- CommonJS export
tokens.generic.js
- complimentary declaration file included
tokens.generic.d.ts
- Maps token buckets/categories (e.g. "background-colors") to a list of token objects.
- CommonJS export
ae9dd50f
#2466 Thanks @TheSisb! - [All packages] Update our ESBuild version and remove minification of identifiers in our production builds.
9983b52e9
#2419 Thanks @gloriliale! - [Combobox, Data grid, Color contrast utils, Customization, Design tokens, Icons, Style props, Token contrast checker, Types, Utils, Website] Consolidate and update lodash dependencies and the way lodash is imported in our files, per lodash's guidance. Details: https://lodash.com/per-method-packages
3482db481
#2355 Thanks @TheSisb! - [Design-Tokens] remove the 'Courier New' font from the code font family, falling back to 'Courier' instead.
8e5dfe1e
#2298 Thanks @shleewhite! - [Tokens] add i18n font family tokens
27528be7
#2286 Thanks @gloriliale! - [Design Tokens] added new background color, box shadow, text color, border color, border radius tokens to support badge styling
73c596919
#2269 Thanks @SiTaggart! - Fixed a regression with the compilation script that caused incompatible ESM module importing of JSON files.
0cd424df4
#2184 Thanks @loreina! - [design-tokens] Update alias and add new tokens to be accessible in Dark theme- Aliases
- Added a new alias
palette-gray-110
- Added a new alias
- Global: background-color
- Updated
color-background-inverse
to gray-90 - Updated
color-background-inverse-strong
to gray-80
- Updated
- Global: border color
- Added
color-border-inverse-weakest
token pointing to gray-90 - Updated
color-border-inverse-weaker
to gray-80 - Updated
color-border-inverse
to gray-50 - Updated
color-border-inverse-strong
to gray-20 - Updated
color-border-inverse-stronger
to gray-10 - Neutral
- Updated
color-border-neutral-weak
to blue-40
- Updated
- Added
color-border-error-stronger
token pointing to red-90
- Added
- Global: box shadow
- Added
shadow-border-error-stronger
pointing to red-90 - Added
shadow-border-inverse-weakest
pointing to gray-90 - Updated
shadow-border-inverse-weaker
to gray-80 - Updated
shadow-border-inverse
to gray-50- Updated
shadow-border-inverse-strong
to gray-20 - Updated
shadow-border-inverse-stronger
to gray-10
- Updated
- Added
- Dark theme: background color
- Updated
color-background
to gray-100 - Updated
color-background-strong
to gray-90 - Updated
color-background-stronger
to gray-80 - Updated
color-background-inverse
to gray-90 - Updated
color-background-inverse-strong
to gray-80 - Updated
color-background-body
to new alias gray-110 - Updated
color-background-overlay
to palette-gray-100-transparent-90 - Updated
color-background-row-striped
to gray-100 - Updated
color-background-subaccount
to gray-90 - Updated
color-background-trial
to green-100 - Brand
- Updated
color-background-brand
to gray-100 - Updated
color-background-brand-strong
to gray-90
- Updated
- Primary
- Updated
color-background-primary-strongest
to blue-10 - Updated
color-background-primary-stronger
to blue-20 - Updated
color-background-primary-strong
to blue-30 - Updated
color-background-primary
to blue-60 - Updated
color-background-primary-weak
to gray-80 - Updated
color-background-primary-weaker
to gray-90 - Updated
color-background-primary-weakest
to gray-100
- Updated
- Destructive
- Updated
color-background-destructive-strongest
to red-10 - Updated
color-background-destructive-stronger
to red-20 - Updated
color-background-destructive-strong
to red-30 - Updated
color-background-destructive
to red-60 - Updated
color-background-destructive-weak
to gray-80 - Updated
color-background-destructive-weaker
to gray-90 - Updated
color-background-destructive-weakest
to gray-100
- Updated
- Success
- Updated
color-background-success
to green-60
- Updated
- Warning
- Updated
color-background-warning
to orange-60
- Updated
- Error
- Added
color-background-error-stronger
pointing to red-20 - Updated
color-background-error-strong
to red-40 - Updated
color-background-error
to red-60
- Added
- Updated
- Dark theme: border color
- Updated
color-border-weak
to gray-80 - Updated
color-border-weaker
to gray-90 - Inverse
- Removed
color-border-inverse-weaker
- Removed
color-border-inverse
- Removed
color-border-inverse-strong
- Removed
color-border-inverse-stronger
- Removed
color-border-inverse-strongest
- Removed
- Primary
- Updated
color-border-primary-strongest
to blue-10 - Updated
color-border-primary-stronger
to blue-20 - Updated
color-border-primary-strong
to blue-30 - Updated
color-border-primary
to blue-60 - Updated
color-border-primary-weak
to gray-80 - Updated
color-border-primary-weaker
to gray-90 - Updated
color-border-primary-weakest
to gray-100
- Updated
- Destructive
- Updated
color-border-destructive-strongest
to red-10 - Updated
color-border-destructive-stronger
to red-20 - Updated
color-border-destructive-strong
to red-30 - Updated
color-border-destructive
to red-60 - Updated
color-border-destructive-weak
to gray-80 - Updated
color-border-destructive-weaker
to gray-90 - Updated
color-border-destructive-weakest
to gray-100
- Updated
- Success
- Updated
color-border-success
to green-60 - Updated
color-border-success-weak
to green-70
- Updated
- Warning
- Updated
color-border-warning
to orange-60 - Updated
color-border-warning-weak
to orange-70
- Updated
- Error
- Added
color-border-error-stronger
pointing to red-20 - Updated
color-border-error-strong
to red-30 - Updated
color-border-error
to red-60 - Updated
color-border-error-weak
to red-70
- Added
- Neutral
- Updated
color-border-neutral
to blue-60 - Updated
color-border-neutral-weak
to blue-70
- Updated
- Updated
- Dark theme: box shadow
- Elevation
- Update
shadow-elevation-10
toblack-transparent-40
- Update
shadow-elevation-20
toblack-transparent-50
- Update
shadow-elevation-30
toblack-transparent-50
- Update
- Focus
- Updated
shadow-focus
to gray-60 - Updated
shadow-focus-inverse
to gray-50 - Updated
shadow-focus-inset
to gray-60
- Updated
- Primary
- Updated
shadow-border-primary
to blue-60
- Updated
- Destructive
- Updated
shadow-border-destructive
to red-60 - Updated
shadow-border-destructive-strong
to red-30 - Updated
shadow-border-destructive-stronger
to red-20 - Updated
shadow-border-destructive-strongest
to red-10
- Updated
- Error
- Updated
shadow-border-error
to red-60 - Updated
shadow-border-error-strong
to red-30
- Updated
- Inverse
- Removed
shadow-border-inverse-weaker
- Removed
shadow-border-inverse
- Removed
shadow-border-inverse-strong
- Removed
shadow-border-inverse-stronger
- Removed
shadow-border-inverse-strongest
- Removed
- Elevation
- Dark theme: text color
- Updated
color-text-weak
to gray-50 - Updated
color-text-weaker
to gray-80 - Updated
color-text-weakest
to new alias gray-110 - Updated
color-text-inverse-weaker
to gray-70 - Link
- Updated
color-text-link-weak
to gray-80 - Updated
color-text-link-stronger
to gray-0 - Updated color-text-link-destructive-weak to gray-80
- Updated
color-text-link-destructive-stronger
to gray-0
- Updated
- Success
- Updated
color-text-success
to green-30
- Updated
- Neutral
- Updated
color-text-neutral
to blue-20
- Updated
- New
- Updated
color-text-new
to purple-20
- Updated
- Icon
- Updated
color-text-icon
to gray-50
- Updated
- Updated
- Aliases
c867e3f48
#2237 Thanks @SiTaggart! - Updated a build dependency (esbuild) which changes the output of our builds slightly, without materially changing anything about the code.
0a52eeee
#2168 Thanks @shleewhite! - [Design Tokens] Deprecated the console theme. The package no longer exports console tokens, the default tokens should be used instead.
04de0d1d
#2093 Thanks @TheSisb! - [Design Tokens] Add data-visualization tokens for 10 categorical (sequential) colors. These can be used to accessibly theme chart content, like bars in bar charts or lines in line charts.
97da2b6b7
#2028 Thanks @gloriliale! - [design-tokens] Changed the alias that Dark mode's color-text-icon points to from gray-10 to gray-60
5c99798b
#1996 Thanks @gloriliale! - Updated and added link colors to the default theme and dark theme.
bdff8b23
#1928 Thanks @loreina! - [Tokens] Added shadow-focus-inset token to dark theme, and adjusted shadow-focus-inset token value for default theme.
d13c1095
#1911 Thanks @andipants12! - [paste-design-tokens] Added the following tokens for usage with the Connectivity variant and status pattern:- color-text-icon-available:
- color-text-icon-busy
- color-text-icon-unavailable
- color-text-icon-offline
bec21fa0
#1893 Thanks @TheSisb! - Added 'shadow-focus-inset', a box-shadow token representing an inset focus outline.
866cf8f1
#1835 Thanks @nkrantz! - [Design tokens] Text, background, and icon color tokens are updated to meet accessibility guidelines.
30160725
#1774 Thanks @nkrantz! - Added an alias for orange-65 and added the following text color tokens for icons:- color-text-icon-error -> red-60 (default) / red-40 (dark)
- color-text-icon-success -> green-70 (default) / green-50 (dark)
- color-text-icon-warning -> orange-65 (default) / orange-40 (dark)
- color-text-icon-neutral -> blue-80 (default) / blue-40 (dark)
- color-text-icon-brand-highlight -> amaranth
- color-text-icon-brand-inverse -> gray-0
a2860c3b
#1708 Thanks @nkrantz! - Addcolor-border-inverse-strong
andshadow-border-inverse-stronger
, adjustshadow-border-inverse-strong
to align color-border tokens and shadow-border tokens.
10f4a285
#1310 Thanks @SiTaggart! - [design tokens] export design token types from the design-tokens page [theme]GenericTokenShape
is now calledGenericTokensShape
and exported from@twilio-paste/design-tokens
c42f86ca
#1434 Thanks @SiTaggart! - [design-tokens]: Added two extra brand based background tokens. Update the new design tokens for better dark mode contrast.Renamed black aliases in the dark theme as they are not palette colors.
Updated meta data for weak and strong design tokens to reflect their new naming convention
f551079a
#1505 Thanks @richbachman! - Fixed shadow-border, shadow-border-weak, shadow-border-weaker, shadow-border-strong values to match respective color-border-* values in all themes.Shadow-border-stronger token has been removed in all themes.
Default theme
Token Original color value New color value shadow-border-weak NA palette-gray-30 shadow-border-weaker NA palette-gray-20 shadow-border-strong palette-gray-30 palette-gray-60 Console theme
Token Original color value New color value shadow-border-weak NA palette-gray-50 shadow-border-weaker NA palette-gray-40 shadow-border-strong palette-gray-40 palette-gray-60 Dark theme
Token Original color value New color value shadow-border palette-gray-50 palette-gray-60 shadow-border-weak NA palette-gray-70 shadow-border-weaker NA palette-gray-80 shadow-border-strong palette-gray-90 palette-gray-50
62f7fd3e
#1451 Thanks @SiTaggart! - [design-tokens] Adding for availability tokens to display entity status such as available, offline and busy
25a1f632
#1404 Thanks @SiTaggart! - Add a dark theme to Paste
25a1f632
#1404 Thanks @SiTaggart! - Design tokens that are named using the light / dark nomenclature are being deprecated in favour of a new set of tokens based on a weak / strong nomenclature to accommodate light and dark modes.If you are using these tokens with our
Box
orText
component, these will still work for now but we will be removing them in the 2021.11.16 release of Paste. In most cases replacingdark
forstrong
andlight
forweak
is all that is required to transition.Design tokens that are being deprecated include:
old new color-background-dark color-background-strong color-background-darker color-background-stronger color-background-darkest color-background-strongest color-background-inverse-light color-background-inverse-weak color-background-neutral-lightest color-background-neutral-weakest color-background-success-lightest color-background-success-weakest color-background-warning-lightest color-background-warning-weakest color-background-error-dark color-background-error-strong color-background-error-lightest color-background-error-weakest color-background-primary-darkest color-background-primary-strongest color-background-primary-darker color-background-primary-stronger color-background-primary-dark color-background-primary-strong color-background-primary-light color-background-primary-weak color-background-primary-lighter color-background-primary-weaker color-background-primary-lightest color-background-primary-weakest color-background-destructive-darkest color-background-destructive-strongest color-background-destructive-darker color-background-destructive-stronger color-background-destructive-dark color-background-destructive-strong color-background-destructive-light color-background-destructive-weak color-background-destructive-lighter color-background-destructive-weaker color-background-destructive-lightest color-background-destructive-weakest old new color-border-dark color-border-strong color-border-light color-border-weak color-border-lighter color-border-weaker color-border-inverse-darker color-border-inverse-weaker color-border-inverse-lighter color-border-inverse-stronger color-border-inverse-lightest color-border-inverse-strongest color-border-primary-darkest color-border-primary-strongest color-border-primary-darker color-border-primary-stronger color-border-primary-dark color-border-primary-strong color-border-primary-light color-border-primary-weak color-border-primary-lighter color-border-primary-weaker color-border-neutral-light color-border-neutral-weak color-border-success-light color-border-success-weak color-border-success-lightest color-border-success-weakest color-border-warning-light color-border-warning-weak color-border-warning-lightest color-border-warning-weakest color-border-error-dark color-border-error-strong color-border-error-light color-border-error-weak color-border-error-lightest color-border-error-weakest color-border-destructive-darkest color-border-destructive-strongest color-border-destructive-darker color-border-destructive-stronger color-border-destructive-dark color-border-destructive-strong color-border-destructive-light color-border-destructive-weak color-border-destructive-lighter color-border-destructive-weaker old new shadow-border-lighter shadow-border-weaker shadow-border-light shadow-border-weak shadow-border-primary-lighter shadow-border-primary-weaker shadow-border-primary-light shadow-border-primary-weak shadow-border-primary-dark shadow-border-primary-strong shadow-border-primary-darker shadow-border-primary-stronger shadow-border-destructive-lighter shadow-border-destructive-weaker shadow-border-destructive-light shadow-border-destructive-weak shadow-border-destructive-darker shadow-border-destructive-stronger shadow-border-error-light shadow-border-error-weak shadow-border-error-dark shadow-border-error-strong shadow-border-inverse-darker shadow-border-inverse-weaker shadow-border-inverse-light shadow-border-inverse-strong shadow-border-inverse-lightest shadow-border-inverse-strongest old new color-text-link-light color-text-link-weak color-text-link-dark color-text-link-strong color-text-link-darker color-text-link-stronger color-text-link-destructive-light color-text-link-destructive-weak color-text-link-destructive-dark color-text-link-destructive-strong color-text-link-destructive-darker color-text-link-destructive-stronger color-text-error-light color-text-error-weak color-text-error-dark color-text-error-strong color-text-warning-dark color-text-warning-strong
4c9ed5ca
#1236 Thanks @richbachman! - The SendGrid theme now inherits everything from the Default theme, except for font family. The SendGrid theme uses Colfax forfont-family-text
.
944c3407
#1221 Thanks @SiTaggart! - Pointed font-weight-light to the font-weight-normal alias in the default theme as we do not want people using 300 weight text in our default UIs
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
6.5.1 (2021-01-25)
Note: Version bump only for package @twilio-paste/design-tokens
6.4.1 (2021-01-07)
Note: Version bump only for package @twilio-paste/design-tokens
- design-tokens: switch default theme font family to inter var (796a3bb)
6.3.7 (2020-12-09)
Note: Version bump only for package @twilio-paste/design-tokens
6.3.6 (2020-11-06)
Note: Version bump only for package @twilio-paste/design-tokens
6.3.5 (2020-10-23)
Note: Version bump only for package @twilio-paste/design-tokens
6.3.4 (2020-10-07)
Note: Version bump only for package @twilio-paste/design-tokens
6.3.3 (2020-09-22)
Note: Version bump only for package @twilio-paste/design-tokens
6.3.2 (2020-09-15)
Note: Version bump only for package @twilio-paste/design-tokens
6.3.1 (2020-09-15)
Note: Version bump only for package @twilio-paste/design-tokens
- design-tokens: add line-height-0 (693165f)
6.2.2 (2020-08-31)
Note: Version bump only for package @twilio-paste/design-tokens
6.2.1 (2020-08-31)
Note: Version bump only for package @twilio-paste/design-tokens
- design-token: adjust the line-height scale (6531091)
6.1.1 (2020-08-12)
Note: Version bump only for package @twilio-paste/design-tokens
- design-tokens: add missing udl boxShadow tokens (2b6f6a1)
6.0.1 (2020-08-04)
- design-tokens: tidy offset aliases for ease of use (0b8a00c)
- design-tokens: updates to default and console aliases and tokens (a3d02e2)
- design-tokens:
color-background-inverse
has been changed to a transparent color. Usecolor-background-body-inverse
instead.color-text-label
has been removed.color-text-placeholder
has been removed.
- design-tokens: add negative space tokens (3bc718f)
- design-tokens: add color-border-light and color-border-lighter (83d0b04)
5.3.2 (2020-07-14)
Note: Version bump only for package @twilio-paste/design-tokens
5.3.1 (2020-07-01)
Note: Version bump only for package @twilio-paste/design-tokens
- design-tokens: adding 2 new border-width tokens (69ae496)
5.2.2 (2020-06-12)
Note: Version bump only for package @twilio-paste/design-tokens
5.2.1 (2020-06-01)
Note: Version bump only for package @twilio-paste/design-tokens
- design-tokens: create color-text-weaker token (3c63e32)
- design-tokens: updates to border and shadow-border tokens (c7f687d)
- design-tokens: Removed and renamed some border and shadow border tokens
- removed color-border-input -> use color-border
- removed color-border-input-hover
- removed color-border-input-focus
- renamed shadow-border-input -> shadow-border
- renamed shadow-border-input-hover -> shadow-border-primary-dark
- renamed shadow-border-input-disabled -> shadow-border-light
- renamed shadow-border-input-error -> shadow-border-error
- renamed shadow-border-input-error-hover -> shadow-border-error-dark
4.5.1 (2020-05-01)
Note: Version bump only for package @twilio-paste/design-tokens
- design-tokens: add background and square sizes tokens (7c8f8e6)
4.4.1 (2020-04-22)
- design-tokens: add overlay background token, switch to rgb colors (d9f783b)
- design-tokens: add boxShadow tokens for input borders (20022ec)
4.1.4 (2020-02-28)
Note: Version bump only for package @twilio-paste/design-tokens
4.1.3 (2020-02-26)
4.1.2 (2020-02-13)
4.1.1 (2020-02-03)
- design-token: add new status tokens (462f471)
- design-tokens: create paste and console themes (d550e4e)
- design-tokens: Move the default theme values to be the console theme Make the default theme the Paste theme based on new unified design language
3.0.5 (2019-12-19)
3.0.4 (2019-12-05)
3.0.3 (2019-11-20)
3.0.2 (2019-11-18)
- 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
- icons: delete old icons, add new streamline icons (#129) (571791d)
- typography: heading component (#149) (4e033e6)
- icons: removed all the inherited icons since we're moving to a new system
- 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)
- design-tokens: resolve path correctly (6f89111)
- tokens: added missing SG token values (#22) (23d7385)
- change @paste scope to @twilio-paste (#2) (1d8d2ff)
- run eslint across the right files and fix any issues that arise. (#21) (2fcc872)
- swap light/dark border token colors (0a99d3c)
- Type-checking fixes (#12) (be02450)