Design Tokens

• 0ed9f3482 #4226 Thanks @PixeledCode! - [Design Tokens] Add new box shadow and background color tokens for elevation

• dbd869a0c #4261 Thanks @krisantrobus! - [Design tokens] added new background token, colorBackgroundWeakest and updated dark mode user shadow token in dark themes

• 2fba6b9cd #4207 Thanks @nkrantz! - [Design Tokens] Update aliases and add new tokens for elevation foundations

• add4a2d0c #4220 Thanks @serifluous! - [Design tokens] Added shadow border tokens and font-size-40 token back to evergreen theme

• 5df8f1a13 #4175 Thanks @krisantrobus! - [Tokens,Theme] fixed an issue when converting percentages to pixel values as alternatives text descriptions

• a4404eab3 #4136 Thanks @krisantrobus! - [Design Tokens] added new design tokens shadowBorderBottomWeak and shadowBorderBottomInverseWeaker to support new feature, KeybaordKey.

• aa192283b #4139 Thanks @nkrantz! - [Design Tokens] add new spacing tokens up to space-310

• 0d10a085b #4067 Thanks @krisantrobus! - [Design Token] added new box shadows to support scrollable styling on inverse colored components

• c23bb4c2a #4122 Thanks @PixeledCode! - [Tokens]: Add new tokens related to box shadow of Tabs component

• 31defbae0 #4060 Thanks @krisantrobus! - [Design Tokens] added a new design token for color-border-new-weak and made changes to color-text-icon-warning in the Twilio theme to support design updates to Alert and Callout components

• e95c7121a #4043 Thanks @PixeledCode! - [Design Tokens] Update box shadow tokens. Remove hardcoded values.

• d3d74e540 #4009 Thanks @krisantrobus! - [Design Tokens] added a new text color for notification icons "colorTextIconNotification"

• fe8825efc #3989 Thanks @PixeledCode! - - [Design Tokens] Add new base sizing tokens and update description of existing sizing tokens

• b04532dad #3987 Thanks @PixeledCode! - [Design tokens]: Add new notification tokens:
  • color-background-notification
  • shadow-border-notification
  • shadow-border-bottom-notification-stronger

• dc599cecb #3798 Thanks @nkrantz! - [Design tokens] add 6 new shadow border tokens for brand badges:

  • shadow-border-brand-10
  • shadow-border-brand-20
  • shadow-border-brand-30
  • shadow-border-bottom-brand-10-strong
  • shadow-border-bottom-brand-20-strong
  • shadow-border-bottom-brand-30-strong

• 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.

• eb055b2b4 #3424 Thanks @loreina! - - [design-tokens] Add colorTextDestructive tokens

• 733709127 #3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles from node to browser 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 the shadowFocusInverseInset token in the twilio and twilio-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] update shadow-border-user token to fix grouped avatars bug in default theme

• 6060c8dfd #3205 Thanks @TheSisb! - [Design tokens] add size-topbar token

• c2de547e4 #3141 Thanks @SiTaggart! - [Design-tokens] add the color-border-weakest token

• 0c3861824 #3154 Thanks @TheSisb! - [Design tokens] add size-sidebar-compact 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 the Twilio and Twilio-Dark themes

  • color-background-body-inverse from gray-110 to gray-100
  • shadow-border-inverse-weakest from gray-90 to gray-100
  • color-border-inverse-weakest from gray-90 to gray-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 themes twilio and twilio-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

• 135df9631 #2908 Thanks @shleewhite! - [Design Tokens] add a new colorBackgroundWeak token

• 804fb9316 #2895 Thanks @Niznikr! - [Design Tokens] Update tokens.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.

• 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
  • Global: background-color
    • Updated color-background-inverse to gray-90
    • Updated color-background-inverse-strong to gray-80
  • 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
    • Added color-border-error-stronger token pointing to red-90
  • 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
  • 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
    • 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
    • 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
    • Success
      • Updated color-background-success to green-60
    • Warning
      • Updated color-background-warning to orange-60
    • 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
  • 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
    • 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
    • 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
    • Success
      • Updated color-border-success to green-60
      • Updated color-border-success-weak to green-70
    • Warning
      • Updated color-border-warning to orange-60
      • Updated color-border-warning-weak to orange-70
    • 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
    • Neutral
      • Updated color-border-neutral to blue-60
      • Updated color-border-neutral-weak to blue-70
  • Dark theme: box shadow
    • Elevation
      • Update shadow-elevation-10 to black-transparent-40
      • Update shadow-elevation-20 to black-transparent-50
      • Update shadow-elevation-30 to black-transparent-50
    • Focus
      • Updated shadow-focus to gray-60
      • Updated shadow-focus-inverse to gray-50
      • Updated shadow-focus-inset to gray-60
    • Primary
      • Updated shadow-border-primary to blue-60
    • 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
    • Error
      • Updated shadow-border-error to red-60
      • Updated shadow-border-error-strong to red-30
    • 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
  • 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
    • Success
      • Updated color-text-success to green-30
    • Neutral
      • Updated color-text-neutral to blue-20
    • New
      • Updated color-text-new to purple-20
    • Icon
      • Updated color-text-icon to gray-50

• 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! - Add color-border-inverse-strong and shadow-border-inverse-stronger, adjust shadow-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 called GenericTokensShape and exported from @twilio-paste/design-tokens

• e43dec0e #1594 Thanks @TheSisb! - Minifies output to commonJS and ES6 token files

• 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 or Text component, these will still work for now but we will be removing them in the 2021.11.16 release of Paste. In most cases replacing dark for strong and light for weak 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 for font-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

• ESBuild for builds (#1084) (0536460)

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. Use color-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)

• website: friendly token values (#427) (43104e6)

• 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)

• tokens: Add shadow-border-input-* aliases, tokens to themes (#400) (a553100)

• design-tokens: add overlay background token, switch to rgb colors (d9f783b)

• design-tokens: add boxShadow tokens for input borders (20022ec)

• design-tokens: consistent iconsize to line-height tokens (#339) (00cb441)

4.1.4 (2020-02-28)

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

4.1.3 (2020-02-26)

• package dependencies and deprecation warnings (#334) (0e88338)

4.1.2 (2020-02-13)

• design-tokens: change sg gray-70 and color-border-inpt (#311) (642cfcc)

4.1.1 (2020-02-03)

• tokens: update tokens for sg disabled buttons (#286) (27074eb)

• 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)

• SG: change color-text-weak to `gray-80 for a11y (#225) (12e1261)

3.0.4 (2019-12-05)

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

3.0.3 (2019-11-20)

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

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

• token formatter tests (#102) (1599e1e)

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

• 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)

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

• 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)

• 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)