-
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.5.0 (2021-01-21)
6.4.1 (2021-01-07)
Note: Version bump only for package @twilio-paste/design-tokens
6.4.0 (2020-12-17)
- 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
6.3.0 (2020-09-08)
- 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
6.2.0 (2020-08-24)
- design-token: adjust the line-height scale (6531091)
6.1.1 (2020-08-12)
Note: Version bump only for package @twilio-paste/design-tokens
6.1.0 (2020-08-12)
- design-tokens: add missing udl boxShadow tokens (2b6f6a1)
6.0.1 (2020-08-04)
- design-tokens: tidy offset aliases for ease of use (0b8a00c)
6.0.0 (2020-08-04)
- 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.
5.5.0 (2020-07-22)
- design-tokens: add negative space tokens (3bc718f)
5.4.0 (2020-07-14)
- 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
5.3.0 (2020-06-25)
- 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
5.2.0 (2020-05-20)
- design-tokens: create color-text-weaker token (3c63e32)
5.1.0 (2020-05-07)
5.0.0 (2020-05-07)
- 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
4.5.0 (2020-04-25)
- design-tokens: add background and square sizes tokens (7c8f8e6)
4.4.1 (2020-04-22)
4.4.0 (2020-04-07)
- design-tokens: add overlay background token, switch to rgb colors (d9f783b)
4.3.0 (2020-03-11)
- design-tokens: add boxShadow tokens for input borders (20022ec)
4.2.0 (2020-03-02)
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)
4.1.0 (2020-01-17)
- design-token: add new status tokens (462f471)
4.0.0 (2019-12-20)
- 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
3.0.0 (2019-11-11)
- 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
2.5.0 (2019-10-29)
2.4.0 (2019-09-16)
- 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)