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

Comparing version 6.1.0 to 6.1.1

CHANGELOG.md

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

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

@@ -150,2 +150,3 @@ export declare const borderRadius0 = "0";
 export declare const shadowBorderErrorDark = "0 0 0 1px #921200";
+export declare const shadowBorderErrorLight = "0 0 0 1px #ecb6b6";
 export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -348,2 +349,3 @@ export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
   shadowBorderErrorDark: "0 0 0 1px #921200";
+  shadowBorderErrorLight: "0 0 0 1px #ecb6b6";
   shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -350,0 +352,0 @@ shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";

dist/themes/console/tokens.common.js

@@ -150,2 +150,3 @@ const borderRadius0 = "0";
 const shadowBorderErrorDark = "0 0 0 1px #921200";
+const shadowBorderErrorLight = "0 0 0 1px #ecb6b6";
 const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -415,2 +416,3 @@ const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
 shadowBorderErrorDark,
+shadowBorderErrorLight,
 shadowBorderInverse,
@@ -613,2 +615,3 @@ shadowBorderInverseDarker,
 shadowBorderErrorDark,
+shadowBorderErrorLight,
 shadowBorderInverse,
@@ -615,0 +618,0 @@ shadowBorderInverseDarker,

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

@@ -150,2 +150,3 @@ export declare const borderRadius0 = "0";
 export declare const shadowBorderErrorDark = "0 0 0 1px #921200";
+export declare const shadowBorderErrorLight = "0 0 0 1px #ecb6b6";
 export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -348,2 +349,3 @@ export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
   shadowBorderErrorDark: "0 0 0 1px #921200";
+  shadowBorderErrorLight: "0 0 0 1px #ecb6b6";
   shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -350,0 +352,0 @@ shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";

dist/themes/console/tokens.es6.js

@@ -150,2 +150,3 @@ export const borderRadius0 = "0";
 export const shadowBorderErrorDark = "0 0 0 1px #921200";
+export const shadowBorderErrorLight = "0 0 0 1px #ecb6b6";
 export const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -348,2 +349,3 @@ export const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
 shadowBorderErrorDark,
+shadowBorderErrorLight,
 shadowBorderInverse,
@@ -350,0 +352,0 @@ shadowBorderInverseDarker,

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 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 #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"}]
   },
@@ -19,0 +19,0 @@ {

dist/themes/console/tokens.ios.json

@@ -685,2 +685,9 @@ {
       "category": "box-shadow",
+      "value": "0 0 0 1px #ecb6b6",
+      "comment": "Shadow border for inverse error inputs.",
+      "name": "shadowBorderErrorLight"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 2px 4px 0 rgba(40, 42, 43, 0.3)",
@@ -687,0 +694,0 @@ "comment": "Shadow for cards.",

dist/themes/console/tokens.json

@@ -99,2 +99,3 @@ {
   "shadow-border-inverse": "0 0 0 1px rgba(255, 255, 255, 0.5)",
+  "shadow-border-error-light": "0 0 0 1px #ecb6b6",
   "shadow-card": "0 2px 4px 0 rgba(40, 42, 43, 0.3)",
@@ -101,0 +102,0 @@ "font-family-text": "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif",

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

@@ -94,3 +94,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextErrorDark = "rgb(148, 8, 0)";
-export declare const colorTextErrorLight = "rgb(245, 138, 138)";
+export declare const colorTextErrorLight = "rgb(235, 86, 86)";
 export declare const colorTextIcon = "rgb(136, 148, 170)";
@@ -153,2 +153,3 @@ export declare const colorTextIconInverse = "rgb(136, 145, 170)";
 export declare const shadowBorderErrorDark = "0 0 0 1px #940800";
+export declare const shadowBorderErrorLight = "0 0 0 1px #eb5656";
 export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -351,2 +352,3 @@ export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
   shadowBorderErrorDark: "0 0 0 1px #940800";
+  shadowBorderErrorLight: "0 0 0 1px #eb5656";
   shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -525,3 +527,3 @@ shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";
   colorTextErrorDark: "rgb(148, 8, 0)";
-  colorTextErrorLight: "rgb(245, 138, 138)";
+  colorTextErrorLight: "rgb(235, 86, 86)";
   colorTextIcon: "rgb(136, 148, 170)";
@@ -528,0 +530,0 @@ colorTextIconInverse: "rgb(136, 145, 170)";

dist/themes/sendgrid/tokens.common.js

@@ -94,3 +94,3 @@ const borderRadius0 = "0";
 const colorTextErrorDark = "rgb(148, 8, 0)";
-const colorTextErrorLight = "rgb(245, 138, 138)";
+const colorTextErrorLight = "rgb(235, 86, 86)";
 const colorTextIcon = "rgb(136, 148, 170)";
@@ -153,2 +153,3 @@ const colorTextIconInverse = "rgb(136, 145, 170)";
 const shadowBorderErrorDark = "0 0 0 1px #940800";
+const shadowBorderErrorLight = "0 0 0 1px #eb5656";
 const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -420,2 +421,3 @@ const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
 shadowBorderErrorDark,
+shadowBorderErrorLight,
 shadowBorderInverse,
@@ -618,2 +620,3 @@ shadowBorderInverseDarker,
 shadowBorderErrorDark,
+shadowBorderErrorLight,
 shadowBorderInverse,
@@ -620,0 +623,0 @@ shadowBorderInverseDarker,

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

@@ -94,3 +94,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextErrorDark = "rgb(148, 8, 0)";
-export declare const colorTextErrorLight = "rgb(245, 138, 138)";
+export declare const colorTextErrorLight = "rgb(235, 86, 86)";
 export declare const colorTextIcon = "rgb(136, 148, 170)";
@@ -153,2 +153,3 @@ export declare const colorTextIconInverse = "rgb(136, 145, 170)";
 export declare const shadowBorderErrorDark = "0 0 0 1px #940800";
+export declare const shadowBorderErrorLight = "0 0 0 1px #eb5656";
 export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -351,2 +352,3 @@ export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
   shadowBorderErrorDark: "0 0 0 1px #940800";
+  shadowBorderErrorLight: "0 0 0 1px #eb5656";
   shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -525,3 +527,3 @@ shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";
   colorTextErrorDark: "rgb(148, 8, 0)";
-  colorTextErrorLight: "rgb(245, 138, 138)";
+  colorTextErrorLight: "rgb(235, 86, 86)";
   colorTextIcon: "rgb(136, 148, 170)";
@@ -528,0 +530,0 @@ colorTextIconInverse: "rgb(136, 145, 170)";

dist/themes/sendgrid/tokens.es6.js

@@ -94,3 +94,3 @@ export const borderRadius0 = "0";
 export const colorTextErrorDark = "rgb(148, 8, 0)";
-export const colorTextErrorLight = "rgb(245, 138, 138)";
+export const colorTextErrorLight = "rgb(235, 86, 86)";
 export const colorTextIcon = "rgb(136, 148, 170)";
@@ -153,2 +153,3 @@ export const colorTextIconInverse = "rgb(136, 145, 170)";
 export const shadowBorderErrorDark = "0 0 0 1px #940800";
+export const shadowBorderErrorLight = "0 0 0 1px #eb5656";
 export const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -351,2 +352,3 @@ export const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
 shadowBorderErrorDark,
+shadowBorderErrorLight,
 shadowBorderInverse,
@@ -353,0 +355,0 @@ shadowBorderInverseDarker,

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 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 #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"}]
   },
@@ -53,3 +53,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","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(172, 30, 22)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(148, 8, 0)","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(245, 138, 138)","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(136, 148, 170)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","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-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(156, 167, 186)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-60}","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(8, 21, 44)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 58, 219)","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 44, 166)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-70}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(0, 31, 117)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(206, 36, 26)","comment":"Destructive link text","originalValue":"{!palette-red-50}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(112, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(71, 5, 0)","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(232, 83, 74)","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(133, 165, 255)","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(136, 148, 170)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"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(71, 86, 114)","comment":"Weak body text for visual hierarchy. Must pass AA color contrast with color-background.","originalValue":"{!palette-gray-80}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(182, 191, 206)","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(8, 21, 44)","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(172, 30, 22)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(148, 8, 0)","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(136, 148, 170)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","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-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(156, 167, 186)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-60}","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(8, 21, 44)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 58, 219)","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 44, 166)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-70}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(0, 31, 117)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(206, 36, 26)","comment":"Destructive link text","originalValue":"{!palette-red-50}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(112, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(71, 5, 0)","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(232, 83, 74)","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(133, 165, 255)","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(136, 148, 170)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"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(71, 86, 114)","comment":"Weak body text for visual hierarchy. Must pass AA color contrast with color-background.","originalValue":"{!palette-gray-80}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(182, 191, 206)","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/sendgrid/tokens.ios.json

@@ -685,2 +685,9 @@ {
       "category": "box-shadow",
+      "value": "0 0 0 1px #eb5656",
+      "comment": "Shadow border for inverse error inputs.",
+      "name": "shadowBorderErrorLight"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 2px 4px 0 rgba(8, 21, 44, 0.3)",
@@ -1700,3 +1707,3 @@ "comment": "Shadow for cards.",
       "category": "text-color",
-      "value": "rgb(245, 138, 138)",
+      "value": "rgb(235, 86, 86)",
       "comment": "Light error text for inputs and error misc",
@@ -1703,0 +1710,0 @@ "name": "colorTextErrorLight"

dist/themes/sendgrid/tokens.json

@@ -99,2 +99,3 @@ {
   "shadow-border-inverse": "0 0 0 1px rgba(255, 255, 255, 0.5)",
+  "shadow-border-error-light": "0 0 0 1px #eb5656",
   "shadow-card": "0 2px 4px 0 rgba(8, 21, 44, 0.3)",
@@ -251,3 +252,3 @@ "font-family-text": "'Colfax', Helvetica, Arial, sans-serif",
   "color-text-inverse": "rgb(255, 255, 255)",
-  "color-text-error-light": "rgb(245, 138, 138)",
+  "color-text-error-light": "rgb(235, 86, 86)",
   "color-text-weaker": "rgb(182, 191, 206)",
@@ -254,0 +255,0 @@ "color-text-warning-dark": "rgb(168, 62, 0)",

dist/tokens.common.d.ts

@@ -94,7 +94,7 @@ export declare const borderRadius0 = "0";
 export declare const colorTextErrorDark = "rgb(173, 17, 17)";
-export declare const colorTextErrorLight = "rgb(245, 138, 138)";
+export declare const colorTextErrorLight = "rgb(235, 86, 86)";
 export declare const colorTextIcon = "rgb(96, 107, 133)";
 export declare const colorTextIconInverse = "rgb(136, 145, 170)";
 export declare const colorTextInverse = "rgb(255, 255, 255)";
-export declare const colorTextInverseWeak = "rgb(136, 145, 170)";
+export declare const colorTextInverseWeak = "rgb(174, 178, 193)";
 export declare const colorTextInverseWeaker = "rgb(96, 107, 133)";
@@ -151,2 +151,3 @@ export declare const colorTextLink = "rgb(2, 99, 224)";
 export declare const shadowBorderErrorDark = "0 0 0 1px #750c0c";
+export declare const shadowBorderErrorLight = "0 0 0 1px #eb5656";
 export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -349,2 +350,3 @@ export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
   shadowBorderErrorDark: "0 0 0 1px #750c0c";
+  shadowBorderErrorLight: "0 0 0 1px #eb5656";
   shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -523,7 +525,7 @@ shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";
   colorTextErrorDark: "rgb(173, 17, 17)";
-  colorTextErrorLight: "rgb(245, 138, 138)";
+  colorTextErrorLight: "rgb(235, 86, 86)";
   colorTextIcon: "rgb(96, 107, 133)";
   colorTextIconInverse: "rgb(136, 145, 170)";
   colorTextInverse: "rgb(255, 255, 255)";
-  colorTextInverseWeak: "rgb(136, 145, 170)";
+  colorTextInverseWeak: "rgb(174, 178, 193)";
   colorTextInverseWeaker: "rgb(96, 107, 133)";
@@ -530,0 +532,0 @@ colorTextLink: "rgb(2, 99, 224)";

dist/tokens.common.js

@@ -94,7 +94,7 @@ const borderRadius0 = "0";
 const colorTextErrorDark = "rgb(173, 17, 17)";
-const colorTextErrorLight = "rgb(245, 138, 138)";
+const colorTextErrorLight = "rgb(235, 86, 86)";
 const colorTextIcon = "rgb(96, 107, 133)";
 const colorTextIconInverse = "rgb(136, 145, 170)";
 const colorTextInverse = "rgb(255, 255, 255)";
-const colorTextInverseWeak = "rgb(136, 145, 170)";
+const colorTextInverseWeak = "rgb(174, 178, 193)";
 const colorTextInverseWeaker = "rgb(96, 107, 133)";
@@ -151,2 +151,3 @@ const colorTextLink = "rgb(2, 99, 224)";
 const shadowBorderErrorDark = "0 0 0 1px #750c0c";
+const shadowBorderErrorLight = "0 0 0 1px #eb5656";
 const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -416,2 +417,3 @@ const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
 shadowBorderErrorDark,
+shadowBorderErrorLight,
 shadowBorderInverse,
@@ -614,2 +616,3 @@ shadowBorderInverseDarker,
 shadowBorderErrorDark,
+shadowBorderErrorLight,
 shadowBorderInverse,
@@ -616,0 +619,0 @@ shadowBorderInverseDarker,

dist/tokens.es6.d.ts

@@ -94,7 +94,7 @@ export declare const borderRadius0 = "0";
 export declare const colorTextErrorDark = "rgb(173, 17, 17)";
-export declare const colorTextErrorLight = "rgb(245, 138, 138)";
+export declare const colorTextErrorLight = "rgb(235, 86, 86)";
 export declare const colorTextIcon = "rgb(96, 107, 133)";
 export declare const colorTextIconInverse = "rgb(136, 145, 170)";
 export declare const colorTextInverse = "rgb(255, 255, 255)";
-export declare const colorTextInverseWeak = "rgb(136, 145, 170)";
+export declare const colorTextInverseWeak = "rgb(174, 178, 193)";
 export declare const colorTextInverseWeaker = "rgb(96, 107, 133)";
@@ -151,2 +151,3 @@ export declare const colorTextLink = "rgb(2, 99, 224)";
 export declare const shadowBorderErrorDark = "0 0 0 1px #750c0c";
+export declare const shadowBorderErrorLight = "0 0 0 1px #eb5656";
 export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -349,2 +350,3 @@ export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
   shadowBorderErrorDark: "0 0 0 1px #750c0c";
+  shadowBorderErrorLight: "0 0 0 1px #eb5656";
   shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -523,7 +525,7 @@ shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";
   colorTextErrorDark: "rgb(173, 17, 17)";
-  colorTextErrorLight: "rgb(245, 138, 138)";
+  colorTextErrorLight: "rgb(235, 86, 86)";
   colorTextIcon: "rgb(96, 107, 133)";
   colorTextIconInverse: "rgb(136, 145, 170)";
   colorTextInverse: "rgb(255, 255, 255)";
-  colorTextInverseWeak: "rgb(136, 145, 170)";
+  colorTextInverseWeak: "rgb(174, 178, 193)";
   colorTextInverseWeaker: "rgb(96, 107, 133)";
@@ -530,0 +532,0 @@ colorTextLink: "rgb(2, 99, 224)";

dist/tokens.es6.js

@@ -94,7 +94,7 @@ export const borderRadius0 = "0";
 export const colorTextErrorDark = "rgb(173, 17, 17)";
-export const colorTextErrorLight = "rgb(245, 138, 138)";
+export const colorTextErrorLight = "rgb(235, 86, 86)";
 export const colorTextIcon = "rgb(96, 107, 133)";
 export const colorTextIconInverse = "rgb(136, 145, 170)";
 export const colorTextInverse = "rgb(255, 255, 255)";
-export const colorTextInverseWeak = "rgb(136, 145, 170)";
+export const colorTextInverseWeak = "rgb(174, 178, 193)";
 export const colorTextInverseWeaker = "rgb(96, 107, 133)";
@@ -151,2 +151,3 @@ export const colorTextLink = "rgb(2, 99, 224)";
 export const shadowBorderErrorDark = "0 0 0 1px #750c0c";
+export const shadowBorderErrorLight = "0 0 0 1px #eb5656";
 export const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
@@ -349,2 +350,3 @@ export const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
 shadowBorderErrorDark,
+shadowBorderErrorLight,
 shadowBorderInverse,
@@ -351,0 +353,0 @@ shadowBorderInverseDarker,

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 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 #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(245, 138, 138)","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(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(136, 145, 170)","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(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(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"}]
   },
@@ -56,0 +56,0 @@ {

dist/tokens.ios.json

@@ -685,2 +685,9 @@ {
       "category": "box-shadow",
+      "value": "0 0 0 1px #eb5656",
+      "comment": "Shadow border for inverse error inputs.",
+      "name": "shadowBorderErrorLight"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
@@ -1581,3 +1588,3 @@ "comment": "Shadow for cards.",
       "category": "text-color",
-      "value": "rgb(136, 145, 170)",
+      "value": "rgb(174, 178, 193)",
       "comment": "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
@@ -1701,3 +1708,3 @@ "name": "colorTextInverseWeak"
       "category": "text-color",
-      "value": "rgb(245, 138, 138)",
+      "value": "rgb(235, 86, 86)",
       "comment": "Light error text for inputs and error misc",
@@ -1704,0 +1711,0 @@ "name": "colorTextErrorLight"

dist/tokens.json

@@ -99,2 +99,3 @@ {
   "shadow-border-inverse": "0 0 0 1px rgba(255, 255, 255, 0.5)",
+  "shadow-border-error-light": "0 0 0 1px #eb5656",
   "shadow-card": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
@@ -234,3 +235,3 @@ "font-family-text": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
   "color-text-new": "rgb(109, 46, 209)",
-  "color-text-inverse-weak": "rgb(136, 145, 170)",
+  "color-text-inverse-weak": "rgb(174, 178, 193)",
   "color-text-link-destructive-darker": "rgb(117, 12, 12)",
@@ -252,3 +253,3 @@ "color-text-success": "rgb(20, 176, 83)",
   "color-text-inverse": "rgb(255, 255, 255)",
-  "color-text-error-light": "rgb(245, 138, 138)",
+  "color-text-error-light": "rgb(235, 86, 86)",
   "color-text-weaker": "rgb(174, 178, 193)",
@@ -255,0 +256,0 @@ "color-text-warning-dark": "rgb(195, 83, 35)",

package.json

 {
   "name": "@twilio-paste/design-tokens",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "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": "41c900553e7d0fa6f213ac2e04f83a7d6f347394"
+  "gitHead": "feaaeacb797c52d9647d31b7a25048d798d68e1f"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1171504

increased by0.45%

Lines of code

24209

increased by0.35%

No dependency changes