@twilio-paste/design-tokens - npm Package Compare versions

Comparing version 6.2.1 to 6.2.2

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [6.2.2](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@6.2.1...@twilio-paste/design-tokens@6.2.2) (2020-08-31)
+
+**Note:** Version bump only for package @twilio-paste/design-tokens
+
+
+
+
+
 ## [6.2.1](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@6.2.0...@twilio-paste/design-tokens@6.2.1) (2020-08-31)
@@ -8,0 +16,0 @@

dist/themes/console/tokens.common.d.ts

@@ -105,3 +105,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextLinkDestructiveDark = "rgb(178, 6, 0)";
-export declare const colorTextLinkDestructiveDarker = "rgb(146, 18, 0)";
+export declare const colorTextLinkDestructiveDarker = "rgb(96, 1, 1)";
 export declare const colorTextLinkDestructiveLight = "rgb(236, 182, 182)";
@@ -149,2 +149,3 @@ export declare const colorTextLinkLight = "rgb(179, 211, 233)";
 export declare const shadowBorderDestructiveLight = "0 0 0 1px #ecb6b6";
+export declare const shadowBorderDestructiveLighter = "0 0 0 1px #f5dddd";
 export declare const shadowBorderError = "0 0 0 1px #e22525";
@@ -348,2 +349,3 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #921200";
   shadowBorderDestructiveLight: "0 0 0 1px #ecb6b6";
+  shadowBorderDestructiveLighter: "0 0 0 1px #f5dddd";
   shadowBorderError: "0 0 0 1px #e22525";
@@ -536,3 +538,3 @@ shadowBorderErrorDark: "0 0 0 1px #921200";
   colorTextLinkDestructiveDark: "rgb(178, 6, 0)";
-  colorTextLinkDestructiveDarker: "rgb(146, 18, 0)";
+  colorTextLinkDestructiveDarker: "rgb(96, 1, 1)";
   colorTextLinkDestructiveLight: "rgb(236, 182, 182)";
@@ -539,0 +541,0 @@ colorTextLinkLight: "rgb(179, 211, 233)";

dist/themes/console/tokens.common.js

@@ -105,3 +105,3 @@ const borderRadius0 = "0";
 const colorTextLinkDestructiveDark = "rgb(178, 6, 0)";
-const colorTextLinkDestructiveDarker = "rgb(146, 18, 0)";
+const colorTextLinkDestructiveDarker = "rgb(96, 1, 1)";
 const colorTextLinkDestructiveLight = "rgb(236, 182, 182)";
@@ -149,2 +149,3 @@ const colorTextLinkLight = "rgb(179, 211, 233)";
 const shadowBorderDestructiveLight = "0 0 0 1px #ecb6b6";
+const shadowBorderDestructiveLighter = "0 0 0 1px #f5dddd";
 const shadowBorderError = "0 0 0 1px #e22525";
@@ -415,2 +416,3 @@ const shadowBorderErrorDark = "0 0 0 1px #921200";
 shadowBorderDestructiveLight,
+shadowBorderDestructiveLighter,
 shadowBorderError,
@@ -614,2 +616,3 @@ shadowBorderErrorDark,
 shadowBorderDestructiveLight,
+shadowBorderDestructiveLighter,
 shadowBorderError,
@@ -616,0 +619,0 @@ shadowBorderErrorDark,

dist/themes/console/tokens.es6.d.ts

@@ -105,3 +105,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextLinkDestructiveDark = "rgb(178, 6, 0)";
-export declare const colorTextLinkDestructiveDarker = "rgb(146, 18, 0)";
+export declare const colorTextLinkDestructiveDarker = "rgb(96, 1, 1)";
 export declare const colorTextLinkDestructiveLight = "rgb(236, 182, 182)";
@@ -149,2 +149,3 @@ export declare const colorTextLinkLight = "rgb(179, 211, 233)";
 export declare const shadowBorderDestructiveLight = "0 0 0 1px #ecb6b6";
+export declare const shadowBorderDestructiveLighter = "0 0 0 1px #f5dddd";
 export declare const shadowBorderError = "0 0 0 1px #e22525";
@@ -348,2 +349,3 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #921200";
   shadowBorderDestructiveLight: "0 0 0 1px #ecb6b6";
+  shadowBorderDestructiveLighter: "0 0 0 1px #f5dddd";
   shadowBorderError: "0 0 0 1px #e22525";
@@ -536,3 +538,3 @@ shadowBorderErrorDark: "0 0 0 1px #921200";
   colorTextLinkDestructiveDark: "rgb(178, 6, 0)";
-  colorTextLinkDestructiveDarker: "rgb(146, 18, 0)";
+  colorTextLinkDestructiveDarker: "rgb(96, 1, 1)";
   colorTextLinkDestructiveLight: "rgb(236, 182, 182)";
@@ -539,0 +541,0 @@ colorTextLinkLight: "rgb(179, 211, 233)";

dist/themes/console/tokens.es6.js

@@ -105,3 +105,3 @@ export const borderRadius0 = "0";
 export const colorTextLinkDestructiveDark = "rgb(178, 6, 0)";
-export const colorTextLinkDestructiveDarker = "rgb(146, 18, 0)";
+export const colorTextLinkDestructiveDarker = "rgb(96, 1, 1)";
 export const colorTextLinkDestructiveLight = "rgb(236, 182, 182)";
@@ -149,2 +149,3 @@ export const colorTextLinkLight = "rgb(179, 211, 233)";
 export const shadowBorderDestructiveLight = "0 0 0 1px #ecb6b6";
+export const shadowBorderDestructiveLighter = "0 0 0 1px #f5dddd";
 export const shadowBorderError = "0 0 0 1px #e22525";
@@ -348,2 +349,3 @@ export const shadowBorderErrorDark = "0 0 0 1px #921200";
 shadowBorderDestructiveLight,
+shadowBorderDestructiveLighter,
 shadowBorderError,
@@ -350,0 +352,0 @@ shadowBorderErrorDark,

dist/themes/console/tokens.gatsby.json

@@ -16,3 +16,3 @@ {
     "categoryName": "box-shadows",
-    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 8px 16px 0 rgba(40, 42, 43, 0.2)","comment":"Default shadow.","originalValue":"{!shadow-elevation-20}","name":"shadow"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #888c8e","comment":"Shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-60}","name":"shadow-border"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e22525","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-destructive"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #600101","comment":"Dark shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}","name":"shadow-border-destructive-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ecb6b6","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-40}","name":"shadow-border-destructive-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e22525","comment":"Shadow border for error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #921200","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}","name":"shadow-border-error-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ecb6b6","comment":"Shadow border for inverse error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-40}","name":"shadow-border-error-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.5)","comment":"Shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-50}","name":"shadow-border-inverse"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.2)","comment":"Darker shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-20}","name":"shadow-border-inverse-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.9)","comment":"Light shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-90}","name":"shadow-border-inverse-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ffffff","comment":"Lightest shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}","name":"shadow-border-inverse-lightest"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e4e7e9","comment":"Light shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-40}","name":"shadow-border-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #f8f8f9","comment":"Lighter shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #027ac5","comment":"Default shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}","name":"shadow-border-primary"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #003e82","comment":"Dark shadow border for inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}","name":"shadow-border-primary-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #032c5e","comment":"Darker shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-90}","name":"shadow-border-primary-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #b3d3e9","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-40}","name":"shadow-border-primary-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #dceaf4","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}","name":"shadow-border-primary-lighter"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(40, 42, 43, 0.3)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(2, 122, 197, 0.8)","comment":"Shadow for focus ring on interactive elements.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-80}","name":"shadow-focus"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(255, 255, 255, 0.4)","comment":"Shadow for focus ring on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","category":"box-shadow","value":"0 12px 24px 4px rgba(40, 42, 43, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(40, 42, 43, 0.3)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}]
+    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 8px 16px 0 rgba(40, 42, 43, 0.2)","comment":"Default shadow.","originalValue":"{!shadow-elevation-20}","name":"shadow"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #888c8e","comment":"Shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-60}","name":"shadow-border"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e22525","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-destructive"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #600101","comment":"Dark shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}","name":"shadow-border-destructive-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ecb6b6","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-40}","name":"shadow-border-destructive-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #f5dddd","comment":"Lighter shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}","name":"shadow-border-destructive-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e22525","comment":"Shadow border for error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #921200","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}","name":"shadow-border-error-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ecb6b6","comment":"Shadow border for inverse error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-40}","name":"shadow-border-error-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.5)","comment":"Shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-50}","name":"shadow-border-inverse"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.2)","comment":"Darker shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-20}","name":"shadow-border-inverse-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.9)","comment":"Light shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-90}","name":"shadow-border-inverse-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ffffff","comment":"Lightest shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}","name":"shadow-border-inverse-lightest"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e4e7e9","comment":"Light shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-40}","name":"shadow-border-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #f8f8f9","comment":"Lighter shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #027ac5","comment":"Default shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}","name":"shadow-border-primary"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #003e82","comment":"Dark shadow border for inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}","name":"shadow-border-primary-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #032c5e","comment":"Darker shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-90}","name":"shadow-border-primary-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #b3d3e9","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-40}","name":"shadow-border-primary-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #dceaf4","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}","name":"shadow-border-primary-lighter"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(40, 42, 43, 0.3)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(2, 122, 197, 0.8)","comment":"Shadow for focus ring on interactive elements.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-80}","name":"shadow-focus"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(255, 255, 255, 0.4)","comment":"Shadow for focus ring on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","category":"box-shadow","value":"0 12px 24px 4px rgba(40, 42, 43, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(40, 42, 43, 0.3)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}]
   },
@@ -53,3 +53,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-80}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(236, 182, 182)","comment":"Light error text for inputs and error misc","originalValue":"{!palette-red-40}","name":"color-text-error-light"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Default icon color for inverse backgrounds.","originalValue":"{!palette-gray-50}","name":"color-text-icon-inverse"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(136, 140, 142)","comment":"Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weaker"},{"type":"color","category":"text-color","value":"rgb(0, 94, 166)","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 62, 130)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 44, 94)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(178, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(236, 182, 182)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(179, 211, 233)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(109, 46, 209)","comment":"Color for text indicating a new status.","originalValue":"{!palette-purple-60}","name":"color-text-new"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
+    "tokens": [{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-80}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(236, 182, 182)","comment":"Light error text for inputs and error misc","originalValue":"{!palette-red-40}","name":"color-text-error-light"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Default icon color for inverse backgrounds.","originalValue":"{!palette-gray-50}","name":"color-text-icon-inverse"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(136, 140, 142)","comment":"Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weaker"},{"type":"color","category":"text-color","value":"rgb(0, 94, 166)","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 62, 130)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 44, 94)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(178, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(96, 1, 1)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-90}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(236, 182, 182)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(179, 211, 233)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(109, 46, 209)","comment":"Color for text indicating a new status.","originalValue":"{!palette-purple-60}","name":"color-text-new"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
   },
@@ -56,0 +56,0 @@ {

dist/themes/console/tokens.ios.json

@@ -566,2 +566,9 @@ {
       "category": "box-shadow",
+      "value": "0 0 0 1px #f5dddd",
+      "comment": "Lighter shadow border for destructive interactions.",
+      "name": "shadowBorderDestructiveLighter"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #dceaf4",
@@ -1595,3 +1602,3 @@ "comment": "Lighter shadow border for primary interactions.",
       "category": "text-color",
-      "value": "rgb(146, 18, 0)",
+      "value": "rgb(96, 1, 1)",
       "comment": "Darker shade of destructive link text to be used in interactions",
@@ -1598,0 +1605,0 @@ "name": "colorTextLinkDestructiveDarker"

dist/themes/console/tokens.json

@@ -82,2 +82,3 @@ {
   "shadow-border-light": "0 0 0 1px #e4e7e9",
+  "shadow-border-destructive-lighter": "0 0 0 1px #f5dddd",
   "shadow-border-primary-lighter": "0 0 0 1px #dceaf4",
@@ -236,3 +237,3 @@ "shadow-border-inverse-light": "0 0 0 1px rgba(255, 255, 255, 0.9)",
   "color-text-inverse-weak": "rgb(200, 204, 207)",
-  "color-text-link-destructive-darker": "rgb(146, 18, 0)",
+  "color-text-link-destructive-darker": "rgb(96, 1, 1)",
   "color-text-success": "rgb(0, 153, 74)",
@@ -239,0 +240,0 @@ "color-text-weak": "rgb(112, 117, 120)",

dist/themes/sendgrid/tokens.common.d.ts

@@ -150,2 +150,3 @@ export declare const borderRadius0 = "0";
 export declare const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
+export declare const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
 export declare const shadowBorderError = "0 0 0 1px #ac1e16";
@@ -349,2 +350,3 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #940800";
   shadowBorderDestructiveLight: "0 0 0 1px #f6b1b1";
+  shadowBorderDestructiveLighter: "0 0 0 1px #fccfcf";
   shadowBorderError: "0 0 0 1px #ac1e16";
@@ -351,0 +353,0 @@ shadowBorderErrorDark: "0 0 0 1px #940800";

dist/themes/sendgrid/tokens.common.js

@@ -150,2 +150,3 @@ const borderRadius0 = "0";
 const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
+const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
 const shadowBorderError = "0 0 0 1px #ac1e16";
@@ -418,2 +419,3 @@ const shadowBorderErrorDark = "0 0 0 1px #940800";
 shadowBorderDestructiveLight,
+shadowBorderDestructiveLighter,
 shadowBorderError,
@@ -617,2 +619,3 @@ shadowBorderErrorDark,
 shadowBorderDestructiveLight,
+shadowBorderDestructiveLighter,
 shadowBorderError,
@@ -619,0 +622,0 @@ shadowBorderErrorDark,

dist/themes/sendgrid/tokens.es6.d.ts

@@ -150,2 +150,3 @@ export declare const borderRadius0 = "0";
 export declare const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
+export declare const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
 export declare const shadowBorderError = "0 0 0 1px #ac1e16";
@@ -349,2 +350,3 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #940800";
   shadowBorderDestructiveLight: "0 0 0 1px #f6b1b1";
+  shadowBorderDestructiveLighter: "0 0 0 1px #fccfcf";
   shadowBorderError: "0 0 0 1px #ac1e16";
@@ -351,0 +353,0 @@ shadowBorderErrorDark: "0 0 0 1px #940800";

dist/themes/sendgrid/tokens.es6.js

@@ -150,2 +150,3 @@ export const borderRadius0 = "0";
 export const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
+export const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
 export const shadowBorderError = "0 0 0 1px #ac1e16";
@@ -349,2 +350,3 @@ export const shadowBorderErrorDark = "0 0 0 1px #940800";
 shadowBorderDestructiveLight,
+shadowBorderDestructiveLighter,
 shadowBorderError,
@@ -351,0 +353,0 @@ shadowBorderErrorDark,

dist/themes/sendgrid/tokens.gatsby.json

@@ -16,3 +16,3 @@ {
     "categoryName": "box-shadows",
-    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 4px 16px 0 rgba(18, 28, 45, 0.2)","comment":"Default shadow.","originalValue":"{!shadow-elevation-20}","name":"shadow"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #8894aa","comment":"Shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-70}","name":"shadow-border"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-destructive"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #4a0b0b","comment":"Dark shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}","name":"shadow-border-destructive-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #f6b1b1","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}","name":"shadow-border-destructive-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ac1e16","comment":"Shadow border for error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #940800","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-70}","name":"shadow-border-error-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #eb5656","comment":"Shadow border for inverse error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}","name":"shadow-border-error-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.5)","comment":"Shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-50}","name":"shadow-border-inverse"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.2)","comment":"Darker shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-20}","name":"shadow-border-inverse-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.9)","comment":"Light shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-90}","name":"shadow-border-inverse-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ffffff","comment":"Lightest shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}","name":"shadow-border-inverse-lightest"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ccd2dc","comment":"Shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-40}","name":"shadow-border-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e1e3ea","comment":"Lighter shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #0263e0","comment":"Default shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}","name":"shadow-border-primary"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #002ca6","comment":"Shadow border for inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-70}","name":"shadow-border-primary-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #001f75","comment":"Shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}","name":"shadow-border-primary-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #99cdff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}","name":"shadow-border-primary-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #cce4ff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}","name":"shadow-border-primary-lighter"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(8, 21, 44, 0.3)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(51, 104, 250, 0.8)","comment":"Shadow for focus ring on interactive elements","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-50-transparent-80}","name":"shadow-focus"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(255, 255, 255, 0.4)","comment":"Shadow for focus ring on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","category":"box-shadow","value":"0 16px 24px 0 rgba(18, 28, 45, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","category":"box-shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}]
+    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 4px 16px 0 rgba(18, 28, 45, 0.2)","comment":"Default shadow.","originalValue":"{!shadow-elevation-20}","name":"shadow"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #8894aa","comment":"Shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-70}","name":"shadow-border"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-destructive"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #4a0b0b","comment":"Dark shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}","name":"shadow-border-destructive-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #f6b1b1","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}","name":"shadow-border-destructive-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #fccfcf","comment":"Lighter shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}","name":"shadow-border-destructive-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ac1e16","comment":"Shadow border for error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #940800","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-70}","name":"shadow-border-error-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #eb5656","comment":"Shadow border for inverse error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}","name":"shadow-border-error-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.5)","comment":"Shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-50}","name":"shadow-border-inverse"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.2)","comment":"Darker shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-20}","name":"shadow-border-inverse-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.9)","comment":"Light shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-90}","name":"shadow-border-inverse-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ffffff","comment":"Lightest shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}","name":"shadow-border-inverse-lightest"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ccd2dc","comment":"Shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-40}","name":"shadow-border-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e1e3ea","comment":"Lighter shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #0263e0","comment":"Default shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}","name":"shadow-border-primary"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #002ca6","comment":"Shadow border for inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-70}","name":"shadow-border-primary-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #001f75","comment":"Shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}","name":"shadow-border-primary-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #99cdff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}","name":"shadow-border-primary-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #cce4ff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}","name":"shadow-border-primary-lighter"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(8, 21, 44, 0.3)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(51, 104, 250, 0.8)","comment":"Shadow for focus ring on interactive elements","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-50-transparent-80}","name":"shadow-focus"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(255, 255, 255, 0.4)","comment":"Shadow for focus ring on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","category":"box-shadow","value":"0 16px 24px 0 rgba(18, 28, 45, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","category":"box-shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}]
   },
@@ -19,0 +19,0 @@ {

dist/themes/sendgrid/tokens.ios.json

@@ -566,2 +566,9 @@ {
       "category": "box-shadow",
+      "value": "0 0 0 1px #fccfcf",
+      "comment": "Lighter shadow border for destructive interactions.",
+      "name": "shadowBorderDestructiveLighter"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #cce4ff",
@@ -568,0 +575,0 @@ "comment": "Lighter shadow border for primary interactions.",

dist/themes/sendgrid/tokens.json

@@ -82,2 +82,3 @@ {
   "shadow-border-light": "0 0 0 1px #ccd2dc",
+  "shadow-border-destructive-lighter": "0 0 0 1px #fccfcf",
   "shadow-border-primary-lighter": "0 0 0 1px #cce4ff",
@@ -84,0 +85,0 @@ "shadow-border-inverse-light": "0 0 0 1px rgba(255, 255, 255, 0.9)",

dist/tokens.common.d.ts

@@ -105,3 +105,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextLinkDestructiveDark = "rgb(173, 17, 17)";
-export declare const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
+export declare const colorTextLinkDestructiveDarker = "rgb(74, 11, 11)";
 export declare const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
@@ -149,2 +149,3 @@ export declare const colorTextLinkLight = "rgb(153, 205, 255)";
 export declare const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
+export declare const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
 export declare const shadowBorderError = "0 0 0 1px #d61f1f";
@@ -348,2 +349,3 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #750c0c";
   shadowBorderDestructiveLight: "0 0 0 1px #f6b1b1";
+  shadowBorderDestructiveLighter: "0 0 0 1px #fccfcf";
   shadowBorderError: "0 0 0 1px #d61f1f";
@@ -536,3 +538,3 @@ shadowBorderErrorDark: "0 0 0 1px #750c0c";
   colorTextLinkDestructiveDark: "rgb(173, 17, 17)";
-  colorTextLinkDestructiveDarker: "rgb(117, 12, 12)";
+  colorTextLinkDestructiveDarker: "rgb(74, 11, 11)";
   colorTextLinkDestructiveLight: "rgb(246, 177, 177)";
@@ -539,0 +541,0 @@ colorTextLinkLight: "rgb(153, 205, 255)";

dist/tokens.common.js

@@ -105,3 +105,3 @@ const borderRadius0 = "0";
 const colorTextLinkDestructiveDark = "rgb(173, 17, 17)";
-const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
+const colorTextLinkDestructiveDarker = "rgb(74, 11, 11)";
 const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
@@ -149,2 +149,3 @@ const colorTextLinkLight = "rgb(153, 205, 255)";
 const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
+const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
 const shadowBorderError = "0 0 0 1px #d61f1f";
@@ -415,2 +416,3 @@ const shadowBorderErrorDark = "0 0 0 1px #750c0c";
 shadowBorderDestructiveLight,
+shadowBorderDestructiveLighter,
 shadowBorderError,
@@ -614,2 +616,3 @@ shadowBorderErrorDark,
 shadowBorderDestructiveLight,
+shadowBorderDestructiveLighter,
 shadowBorderError,
@@ -616,0 +619,0 @@ shadowBorderErrorDark,

dist/tokens.es6.d.ts

@@ -105,3 +105,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextLinkDestructiveDark = "rgb(173, 17, 17)";
-export declare const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
+export declare const colorTextLinkDestructiveDarker = "rgb(74, 11, 11)";
 export declare const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
@@ -149,2 +149,3 @@ export declare const colorTextLinkLight = "rgb(153, 205, 255)";
 export declare const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
+export declare const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
 export declare const shadowBorderError = "0 0 0 1px #d61f1f";
@@ -348,2 +349,3 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #750c0c";
   shadowBorderDestructiveLight: "0 0 0 1px #f6b1b1";
+  shadowBorderDestructiveLighter: "0 0 0 1px #fccfcf";
   shadowBorderError: "0 0 0 1px #d61f1f";
@@ -536,3 +538,3 @@ shadowBorderErrorDark: "0 0 0 1px #750c0c";
   colorTextLinkDestructiveDark: "rgb(173, 17, 17)";
-  colorTextLinkDestructiveDarker: "rgb(117, 12, 12)";
+  colorTextLinkDestructiveDarker: "rgb(74, 11, 11)";
   colorTextLinkDestructiveLight: "rgb(246, 177, 177)";
@@ -539,0 +541,0 @@ colorTextLinkLight: "rgb(153, 205, 255)";

dist/tokens.es6.js

@@ -105,3 +105,3 @@ export const borderRadius0 = "0";
 export const colorTextLinkDestructiveDark = "rgb(173, 17, 17)";
-export const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
+export const colorTextLinkDestructiveDarker = "rgb(74, 11, 11)";
 export const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
@@ -149,2 +149,3 @@ export const colorTextLinkLight = "rgb(153, 205, 255)";
 export const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
+export const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
 export const shadowBorderError = "0 0 0 1px #d61f1f";
@@ -348,2 +349,3 @@ export const shadowBorderErrorDark = "0 0 0 1px #750c0c";
 shadowBorderDestructiveLight,
+shadowBorderDestructiveLighter,
 shadowBorderError,
@@ -350,0 +352,0 @@ shadowBorderErrorDark,

dist/tokens.gatsby.json

@@ -16,3 +16,3 @@ {
     "categoryName": "box-shadows",
-    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 4px 16px 0 rgba(18, 28, 45, 0.2)","comment":"Default shadow.","originalValue":"{!shadow-elevation-20}","name":"shadow"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #8891aa","comment":"Shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}","name":"shadow-border"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-destructive"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #4a0b0b","comment":"Dark shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}","name":"shadow-border-destructive-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #f6b1b1","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}","name":"shadow-border-destructive-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Shadow border for error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #750c0c","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}","name":"shadow-border-error-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #eb5656","comment":"Shadow border for inverse error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}","name":"shadow-border-error-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.5)","comment":"Shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-50}","name":"shadow-border-inverse"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.2)","comment":"Darker shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-20}","name":"shadow-border-inverse-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.9)","comment":"Light shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-90}","name":"shadow-border-inverse-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ffffff","comment":"Lightest shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}","name":"shadow-border-inverse-lightest"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #cacdd8","comment":"Light shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}","name":"shadow-border-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e1e3ea","comment":"Lighter shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #0263e0","comment":"Default shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}","name":"shadow-border-primary"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #001489","comment":"Dark shadow border for inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}","name":"shadow-border-primary-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #030b5d","comment":"Darker shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-90}","name":"shadow-border-primary-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #99cdff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}","name":"shadow-border-primary-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #cce4ff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}","name":"shadow-border-primary-lighter"},{"type":"shadow","category":"box-shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(2, 99, 224, 0.7)","comment":"Shadow for focus ring on interactive elements.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}","name":"shadow-focus"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(255, 255, 255, 0.4)","comment":"Shadow for focus ring on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","category":"box-shadow","value":"0 16px 24px 0 rgba(18, 28, 45, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","category":"box-shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}]
+    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 4px 16px 0 rgba(18, 28, 45, 0.2)","comment":"Default shadow.","originalValue":"{!shadow-elevation-20}","name":"shadow"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #8891aa","comment":"Shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}","name":"shadow-border"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-destructive"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #4a0b0b","comment":"Dark shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}","name":"shadow-border-destructive-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #f6b1b1","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}","name":"shadow-border-destructive-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #fccfcf","comment":"Lighter shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}","name":"shadow-border-destructive-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Shadow border for error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #750c0c","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}","name":"shadow-border-error-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #eb5656","comment":"Shadow border for inverse error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}","name":"shadow-border-error-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.5)","comment":"Shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-50}","name":"shadow-border-inverse"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.2)","comment":"Darker shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-20}","name":"shadow-border-inverse-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.9)","comment":"Light shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-90}","name":"shadow-border-inverse-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ffffff","comment":"Lightest shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}","name":"shadow-border-inverse-lightest"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #cacdd8","comment":"Light shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}","name":"shadow-border-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e1e3ea","comment":"Lighter shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #0263e0","comment":"Default shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}","name":"shadow-border-primary"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #001489","comment":"Dark shadow border for inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}","name":"shadow-border-primary-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #030b5d","comment":"Darker shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-90}","name":"shadow-border-primary-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #99cdff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}","name":"shadow-border-primary-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #cce4ff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}","name":"shadow-border-primary-lighter"},{"type":"shadow","category":"box-shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(2, 99, 224, 0.7)","comment":"Shadow for focus ring on interactive elements.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}","name":"shadow-focus"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(255, 255, 255, 0.4)","comment":"Shadow for focus ring on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","category":"box-shadow","value":"0 16px 24px 0 rgba(18, 28, 45, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","category":"box-shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}]
   },
@@ -53,3 +53,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"rgb(18, 28, 45)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(214, 31, 31)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(173, 17, 17)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(235, 86, 86)","comment":"Light error text for inputs and error misc","originalValue":"{!palette-red-50}","name":"color-text-error-light"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Default icon color.","originalValue":"{!palette-gray-60}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(136, 145, 170)","comment":"Default icon color for inverse backgrounds.","originalValue":"{!palette-gray-50}","name":"color-text-icon-inverse"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(174, 178, 193)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-40}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weaker"},{"type":"color","category":"text-color","value":"rgb(2, 99, 224)","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 20, 137)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 11, 93)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(214, 31, 31)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(173, 17, 17)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(117, 12, 12)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(246, 177, 177)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-30}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(153, 205, 255)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-30}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(109, 46, 209)","comment":"Color for text indicating a new status.","originalValue":"{!palette-purple-60}","name":"color-text-new"},{"type":"color","category":"text-color","value":"rgb(20, 176, 83)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(244, 124, 34)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(195, 83, 35)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-60}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(174, 178, 193)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-40}","name":"color-text-weaker"}]
+    "tokens": [{"type":"color","category":"text-color","value":"rgb(18, 28, 45)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(214, 31, 31)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(173, 17, 17)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(235, 86, 86)","comment":"Light error text for inputs and error misc","originalValue":"{!palette-red-50}","name":"color-text-error-light"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Default icon color.","originalValue":"{!palette-gray-60}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(136, 145, 170)","comment":"Default icon color for inverse backgrounds.","originalValue":"{!palette-gray-50}","name":"color-text-icon-inverse"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(174, 178, 193)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-40}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weaker"},{"type":"color","category":"text-color","value":"rgb(2, 99, 224)","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 20, 137)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 11, 93)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(214, 31, 31)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(173, 17, 17)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(74, 11, 11)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-90}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(246, 177, 177)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-30}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(153, 205, 255)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-30}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(109, 46, 209)","comment":"Color for text indicating a new status.","originalValue":"{!palette-purple-60}","name":"color-text-new"},{"type":"color","category":"text-color","value":"rgb(20, 176, 83)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(244, 124, 34)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(195, 83, 35)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-60}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(174, 178, 193)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-40}","name":"color-text-weaker"}]
   },
@@ -56,0 +56,0 @@ {

dist/tokens.ios.json

@@ -566,2 +566,9 @@ {
       "category": "box-shadow",
+      "value": "0 0 0 1px #fccfcf",
+      "comment": "Lighter shadow border for destructive interactions.",
+      "name": "shadowBorderDestructiveLighter"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #cce4ff",
@@ -1595,3 +1602,3 @@ "comment": "Lighter shadow border for primary interactions.",
       "category": "text-color",
-      "value": "rgb(117, 12, 12)",
+      "value": "rgb(74, 11, 11)",
       "comment": "Darker shade of destructive link text to be used in interactions",
@@ -1598,0 +1605,0 @@ "name": "colorTextLinkDestructiveDarker"

dist/tokens.json

@@ -82,2 +82,3 @@ {
   "shadow-border-light": "0 0 0 1px #cacdd8",
+  "shadow-border-destructive-lighter": "0 0 0 1px #fccfcf",
   "shadow-border-primary-lighter": "0 0 0 1px #cce4ff",
@@ -236,3 +237,3 @@ "shadow-border-inverse-light": "0 0 0 1px rgba(255, 255, 255, 0.9)",
   "color-text-inverse-weak": "rgb(174, 178, 193)",
-  "color-text-link-destructive-darker": "rgb(117, 12, 12)",
+  "color-text-link-destructive-darker": "rgb(74, 11, 11)",
   "color-text-success": "rgb(20, 176, 83)",
@@ -239,0 +240,0 @@ "color-text-weak": "rgb(96, 107, 133)",

package.json

 {
   "name": "@twilio-paste/design-tokens",
-  "version": "6.2.1",
+  "version": "6.2.2",
   "description": "Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.",
@@ -24,3 +24,3 @@ "main": "dist/tokens.common.js",
   },
-  "gitHead": "42c85440ee93e03d376aff6262daa43ae537b0b4"
+  "gitHead": "fec8793dd2a7b63a2c88e5334e11a65d560b1b6d"
 }

No alert changes

Improved metrics

Total package byte prevSize

1177815

increased by0.51%

Lines of code

24293

increased by0.35%

No dependency changes