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

Comparing version 6.0.1 to 6.1.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [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)
+
+
+### Features
+
+* **design-tokens:** add missing udl boxShadow tokens ([2b6f6a1](https://github.com/twilio-labs/paste/commit/2b6f6a1fa8e19b08a24832f0d501a8cc377dffbd))
+
+
+
+
+
 ## [6.0.1](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@6.0.0...@twilio-paste/design-tokens@6.0.1) (2020-08-04)
@@ -8,0 +19,0 @@

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

@@ -145,2 +145,5 @@ export declare const borderRadius0 = "0";
 export declare const shadowBorder = "0 0 0 1px #888c8e";
+export declare const shadowBorderDestructive = "0 0 0 1px #e22525";
+export declare const shadowBorderDestructiveDarker = "0 0 0 1px #600101";
+export declare const shadowBorderDestructiveLight = "0 0 0 1px #ecb6b6";
 export declare const shadowBorderError = "0 0 0 1px #e22525";
@@ -154,4 +157,7 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #921200";
 export declare const shadowBorderLighter = "0 0 0 1px #f8f8f9";
+export declare const shadowBorderPrimary = "0 0 0 1px #027ac5";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #003e82";
 export declare const shadowBorderPrimaryDarker = "0 0 0 1px #032c5e";
+export declare const shadowBorderPrimaryLight = "0 0 0 1px #b3d3e9";
+export declare const shadowBorderPrimaryLighter = "0 0 0 1px #dceaf4";
 export declare const shadowCard = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -338,2 +344,5 @@ export declare const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";
   shadowBorder: "0 0 0 1px #888c8e";
+  shadowBorderDestructive: "0 0 0 1px #e22525";
+  shadowBorderDestructiveDarker: "0 0 0 1px #600101";
+  shadowBorderDestructiveLight: "0 0 0 1px #ecb6b6";
   shadowBorderError: "0 0 0 1px #e22525";
@@ -347,4 +356,7 @@ shadowBorderErrorDark: "0 0 0 1px #921200";
   shadowBorderLighter: "0 0 0 1px #f8f8f9";
+  shadowBorderPrimary: "0 0 0 1px #027ac5";
   shadowBorderPrimaryDark: "0 0 0 1px #003e82";
   shadowBorderPrimaryDarker: "0 0 0 1px #032c5e";
+  shadowBorderPrimaryLight: "0 0 0 1px #b3d3e9";
+  shadowBorderPrimaryLighter: "0 0 0 1px #dceaf4";
   shadowCard: "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -351,0 +363,0 @@ shadowFocus: "0 0 0 4px rgba(2, 122, 197, 0.8)";

dist/themes/console/tokens.common.js

@@ -145,2 +145,5 @@ const borderRadius0 = "0";
 const shadowBorder = "0 0 0 1px #888c8e";
+const shadowBorderDestructive = "0 0 0 1px #e22525";
+const shadowBorderDestructiveDarker = "0 0 0 1px #600101";
+const shadowBorderDestructiveLight = "0 0 0 1px #ecb6b6";
 const shadowBorderError = "0 0 0 1px #e22525";
@@ -154,4 +157,7 @@ const shadowBorderErrorDark = "0 0 0 1px #921200";
 const shadowBorderLighter = "0 0 0 1px #f8f8f9";
+const shadowBorderPrimary = "0 0 0 1px #027ac5";
 const shadowBorderPrimaryDark = "0 0 0 1px #003e82";
 const shadowBorderPrimaryDarker = "0 0 0 1px #032c5e";
+const shadowBorderPrimaryLight = "0 0 0 1px #b3d3e9";
+const shadowBorderPrimaryLighter = "0 0 0 1px #dceaf4";
 const shadowCard = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -405,2 +411,5 @@ const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";
 shadowBorder,
+shadowBorderDestructive,
+shadowBorderDestructiveDarker,
+shadowBorderDestructiveLight,
 shadowBorderError,
@@ -414,4 +423,7 @@ shadowBorderErrorDark,
 shadowBorderLighter,
+shadowBorderPrimary,
 shadowBorderPrimaryDark,
 shadowBorderPrimaryDarker,
+shadowBorderPrimaryLight,
+shadowBorderPrimaryLighter,
 shadowCard,
@@ -598,2 +610,5 @@ shadowFocus,
 shadowBorder,
+shadowBorderDestructive,
+shadowBorderDestructiveDarker,
+shadowBorderDestructiveLight,
 shadowBorderError,
@@ -607,4 +622,7 @@ shadowBorderErrorDark,
 shadowBorderLighter,
+shadowBorderPrimary,
 shadowBorderPrimaryDark,
 shadowBorderPrimaryDarker,
+shadowBorderPrimaryLight,
+shadowBorderPrimaryLighter,
 shadowCard,
@@ -611,0 +629,0 @@ shadowFocus,

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

@@ -145,2 +145,5 @@ export declare const borderRadius0 = "0";
 export declare const shadowBorder = "0 0 0 1px #888c8e";
+export declare const shadowBorderDestructive = "0 0 0 1px #e22525";
+export declare const shadowBorderDestructiveDarker = "0 0 0 1px #600101";
+export declare const shadowBorderDestructiveLight = "0 0 0 1px #ecb6b6";
 export declare const shadowBorderError = "0 0 0 1px #e22525";
@@ -154,4 +157,7 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #921200";
 export declare const shadowBorderLighter = "0 0 0 1px #f8f8f9";
+export declare const shadowBorderPrimary = "0 0 0 1px #027ac5";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #003e82";
 export declare const shadowBorderPrimaryDarker = "0 0 0 1px #032c5e";
+export declare const shadowBorderPrimaryLight = "0 0 0 1px #b3d3e9";
+export declare const shadowBorderPrimaryLighter = "0 0 0 1px #dceaf4";
 export declare const shadowCard = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -338,2 +344,5 @@ export declare const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";
   shadowBorder: "0 0 0 1px #888c8e";
+  shadowBorderDestructive: "0 0 0 1px #e22525";
+  shadowBorderDestructiveDarker: "0 0 0 1px #600101";
+  shadowBorderDestructiveLight: "0 0 0 1px #ecb6b6";
   shadowBorderError: "0 0 0 1px #e22525";
@@ -347,4 +356,7 @@ shadowBorderErrorDark: "0 0 0 1px #921200";
   shadowBorderLighter: "0 0 0 1px #f8f8f9";
+  shadowBorderPrimary: "0 0 0 1px #027ac5";
   shadowBorderPrimaryDark: "0 0 0 1px #003e82";
   shadowBorderPrimaryDarker: "0 0 0 1px #032c5e";
+  shadowBorderPrimaryLight: "0 0 0 1px #b3d3e9";
+  shadowBorderPrimaryLighter: "0 0 0 1px #dceaf4";
   shadowCard: "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -351,0 +363,0 @@ shadowFocus: "0 0 0 4px rgba(2, 122, 197, 0.8)";

dist/themes/console/tokens.es6.js

@@ -145,2 +145,5 @@ export const borderRadius0 = "0";
 export const shadowBorder = "0 0 0 1px #888c8e";
+export const shadowBorderDestructive = "0 0 0 1px #e22525";
+export const shadowBorderDestructiveDarker = "0 0 0 1px #600101";
+export const shadowBorderDestructiveLight = "0 0 0 1px #ecb6b6";
 export const shadowBorderError = "0 0 0 1px #e22525";
@@ -154,4 +157,7 @@ export const shadowBorderErrorDark = "0 0 0 1px #921200";
 export const shadowBorderLighter = "0 0 0 1px #f8f8f9";
+export const shadowBorderPrimary = "0 0 0 1px #027ac5";
 export const shadowBorderPrimaryDark = "0 0 0 1px #003e82";
 export const shadowBorderPrimaryDarker = "0 0 0 1px #032c5e";
+export const shadowBorderPrimaryLight = "0 0 0 1px #b3d3e9";
+export const shadowBorderPrimaryLighter = "0 0 0 1px #dceaf4";
 export const shadowCard = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -338,2 +344,5 @@ export const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";
 shadowBorder,
+shadowBorderDestructive,
+shadowBorderDestructiveDarker,
+shadowBorderDestructiveLight,
 shadowBorderError,
@@ -347,4 +356,7 @@ shadowBorderErrorDark,
 shadowBorderLighter,
+shadowBorderPrimary,
 shadowBorderPrimaryDark,
 shadowBorderPrimaryDarker,
+shadowBorderPrimaryLight,
+shadowBorderPrimaryLighter,
 shadowCard,
@@ -351,0 +363,0 @@ shadowFocus,

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":"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 #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 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 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

@@ -545,2 +545,9 @@ {
       "category": "box-shadow",
+      "value": "0 0 0 1px #600101",
+      "comment": "Dark shadow border for destructive interactions",
+      "name": "shadowBorderDestructiveDarker"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #032c5e",
@@ -560,2 +567,9 @@ "comment": "Darker shadow border for inputs active.",
       "category": "box-shadow",
+      "value": "0 0 0 1px #dceaf4",
+      "comment": "Lighter shadow border for primary interactions.",
+      "name": "shadowBorderPrimaryLighter"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px rgba(255, 255, 255, 0.9)",
@@ -589,2 +603,16 @@ "comment": "Light shadow border on interactive elements on inverse backgrounds.",
       "category": "box-shadow",
+      "value": "0 0 0 1px #027ac5",
+      "comment": "Default shadow border for primary interactions.",
+      "name": "shadowBorderPrimary"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #e22525",
+      "comment": "Light shadow border for destructive interactions.",
+      "name": "shadowBorderDestructive"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #921200",
@@ -632,2 +660,16 @@ "comment": "Shadow border for error inputs hover.",
       "category": "box-shadow",
+      "value": "0 0 0 1px #b3d3e9",
+      "comment": "Lighter shadow border for primary interactions.",
+      "name": "shadowBorderPrimaryLight"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #ecb6b6",
+      "comment": "Light shadow border for destructive interactions.",
+      "name": "shadowBorderDestructiveLight"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #888c8e",
@@ -634,0 +676,0 @@ "comment": "Shadow border for inputs.",

dist/themes/console/tokens.json

@@ -79,4 +79,6 @@ {
   "shadow-border-inverse-lightest": "0 0 0 1px #ffffff",
+  "shadow-border-destructive-darker": "0 0 0 1px #600101",
   "shadow-border-primary-darker": "0 0 0 1px #032c5e",
   "shadow-border-light": "0 0 0 1px #e4e7e9",
+  "shadow-border-primary-lighter": "0 0 0 1px #dceaf4",
   "shadow-border-inverse-light": "0 0 0 1px rgba(255, 255, 255, 0.9)",
@@ -86,2 +88,4 @@ "shadow-low": "0 2px 4px 0 rgba(40, 42, 43, 0.3)",
   "shadow-focus-inverse": "0 0 0 4px rgba(255, 255, 255, 0.4)",
+  "shadow-border-primary": "0 0 0 1px #027ac5",
+  "shadow-border-destructive": "0 0 0 1px #e22525",
   "shadow-border-error-dark": "0 0 0 1px #921200",
@@ -93,2 +97,4 @@ "shadow-high": "0 12px 24px 4px rgba(40, 42, 43, 0.2)",
   "shadow-border-primary-dark": "0 0 0 1px #003e82",
+  "shadow-border-primary-light": "0 0 0 1px #b3d3e9",
+  "shadow-border-destructive-light": "0 0 0 1px #ecb6b6",
   "shadow-border": "0 0 0 1px #888c8e",
@@ -95,0 +101,0 @@ "shadow-border-inverse": "0 0 0 1px rgba(255, 255, 255, 0.5)",

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

@@ -147,2 +147,5 @@ export declare const borderRadius0 = "0";
 export declare const shadowBorder = "0 0 0 1px #8894aa";
+export declare const shadowBorderDestructive = "0 0 0 1px #d61f1f";
+export declare const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";
+export declare const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
 export declare const shadowBorderError = "0 0 0 1px #ac1e16";
@@ -156,4 +159,7 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #940800";
 export declare const shadowBorderLighter = "0 0 0 1px #e1e3ea";
+export declare const shadowBorderPrimary = "0 0 0 1px #0263e0";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
 export declare const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
+export declare const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
+export declare const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
 export declare const shadowCard = "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
@@ -340,2 +346,5 @@ export declare const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
   shadowBorder: "0 0 0 1px #8894aa";
+  shadowBorderDestructive: "0 0 0 1px #d61f1f";
+  shadowBorderDestructiveDarker: "0 0 0 1px #4a0b0b";
+  shadowBorderDestructiveLight: "0 0 0 1px #f6b1b1";
   shadowBorderError: "0 0 0 1px #ac1e16";
@@ -349,4 +358,7 @@ shadowBorderErrorDark: "0 0 0 1px #940800";
   shadowBorderLighter: "0 0 0 1px #e1e3ea";
+  shadowBorderPrimary: "0 0 0 1px #0263e0";
   shadowBorderPrimaryDark: "0 0 0 1px #002ca6";
   shadowBorderPrimaryDarker: "0 0 0 1px #001f75";
+  shadowBorderPrimaryLight: "0 0 0 1px #99cdff";
+  shadowBorderPrimaryLighter: "0 0 0 1px #cce4ff";
   shadowCard: "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
@@ -353,0 +365,0 @@ shadowFocus: "0 0 0 4px rgba(51, 104, 250, 0.8)";

dist/themes/sendgrid/tokens.common.js

@@ -147,2 +147,5 @@ const borderRadius0 = "0";
 const shadowBorder = "0 0 0 1px #8894aa";
+const shadowBorderDestructive = "0 0 0 1px #d61f1f";
+const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";
+const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
 const shadowBorderError = "0 0 0 1px #ac1e16";
@@ -156,4 +159,7 @@ const shadowBorderErrorDark = "0 0 0 1px #940800";
 const shadowBorderLighter = "0 0 0 1px #e1e3ea";
+const shadowBorderPrimary = "0 0 0 1px #0263e0";
 const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
 const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
+const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
+const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
 const shadowCard = "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
@@ -409,2 +415,5 @@ const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
 shadowBorder,
+shadowBorderDestructive,
+shadowBorderDestructiveDarker,
+shadowBorderDestructiveLight,
 shadowBorderError,
@@ -418,4 +427,7 @@ shadowBorderErrorDark,
 shadowBorderLighter,
+shadowBorderPrimary,
 shadowBorderPrimaryDark,
 shadowBorderPrimaryDarker,
+shadowBorderPrimaryLight,
+shadowBorderPrimaryLighter,
 shadowCard,
@@ -602,2 +614,5 @@ shadowFocus,
 shadowBorder,
+shadowBorderDestructive,
+shadowBorderDestructiveDarker,
+shadowBorderDestructiveLight,
 shadowBorderError,
@@ -611,4 +626,7 @@ shadowBorderErrorDark,
 shadowBorderLighter,
+shadowBorderPrimary,
 shadowBorderPrimaryDark,
 shadowBorderPrimaryDarker,
+shadowBorderPrimaryLight,
+shadowBorderPrimaryLighter,
 shadowCard,
@@ -615,0 +633,0 @@ shadowFocus,

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

@@ -147,2 +147,5 @@ export declare const borderRadius0 = "0";
 export declare const shadowBorder = "0 0 0 1px #8894aa";
+export declare const shadowBorderDestructive = "0 0 0 1px #d61f1f";
+export declare const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";
+export declare const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
 export declare const shadowBorderError = "0 0 0 1px #ac1e16";
@@ -156,4 +159,7 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #940800";
 export declare const shadowBorderLighter = "0 0 0 1px #e1e3ea";
+export declare const shadowBorderPrimary = "0 0 0 1px #0263e0";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
 export declare const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
+export declare const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
+export declare const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
 export declare const shadowCard = "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
@@ -340,2 +346,5 @@ export declare const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
   shadowBorder: "0 0 0 1px #8894aa";
+  shadowBorderDestructive: "0 0 0 1px #d61f1f";
+  shadowBorderDestructiveDarker: "0 0 0 1px #4a0b0b";
+  shadowBorderDestructiveLight: "0 0 0 1px #f6b1b1";
   shadowBorderError: "0 0 0 1px #ac1e16";
@@ -349,4 +358,7 @@ shadowBorderErrorDark: "0 0 0 1px #940800";
   shadowBorderLighter: "0 0 0 1px #e1e3ea";
+  shadowBorderPrimary: "0 0 0 1px #0263e0";
   shadowBorderPrimaryDark: "0 0 0 1px #002ca6";
   shadowBorderPrimaryDarker: "0 0 0 1px #001f75";
+  shadowBorderPrimaryLight: "0 0 0 1px #99cdff";
+  shadowBorderPrimaryLighter: "0 0 0 1px #cce4ff";
   shadowCard: "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
@@ -353,0 +365,0 @@ shadowFocus: "0 0 0 4px rgba(51, 104, 250, 0.8)";

dist/themes/sendgrid/tokens.es6.js

@@ -147,2 +147,5 @@ export const borderRadius0 = "0";
 export const shadowBorder = "0 0 0 1px #8894aa";
+export const shadowBorderDestructive = "0 0 0 1px #d61f1f";
+export const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";
+export const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
 export const shadowBorderError = "0 0 0 1px #ac1e16";
@@ -156,4 +159,7 @@ export const shadowBorderErrorDark = "0 0 0 1px #940800";
 export const shadowBorderLighter = "0 0 0 1px #e1e3ea";
+export const shadowBorderPrimary = "0 0 0 1px #0263e0";
 export const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
 export const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
+export const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
+export const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
 export const shadowCard = "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
@@ -340,2 +346,5 @@ export const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
 shadowBorder,
+shadowBorderDestructive,
+shadowBorderDestructiveDarker,
+shadowBorderDestructiveLight,
 shadowBorderError,
@@ -349,4 +358,7 @@ shadowBorderErrorDark,
 shadowBorderLighter,
+shadowBorderPrimary,
 shadowBorderPrimaryDark,
 shadowBorderPrimaryDarker,
+shadowBorderPrimaryLight,
+shadowBorderPrimaryLighter,
 shadowCard,
@@ -353,0 +365,0 @@ shadowFocus,

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 #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 #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 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 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

@@ -545,2 +545,9 @@ {
       "category": "box-shadow",
+      "value": "0 0 0 1px #4a0b0b",
+      "comment": "Dark shadow border for destructive interactions",
+      "name": "shadowBorderDestructiveDarker"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #001f75",
@@ -560,2 +567,9 @@ "comment": "Shadow border for inputs active.",
       "category": "box-shadow",
+      "value": "0 0 0 1px #cce4ff",
+      "comment": "Lighter shadow border for primary interactions.",
+      "name": "shadowBorderPrimaryLighter"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px rgba(255, 255, 255, 0.9)",
@@ -589,2 +603,16 @@ "comment": "Light shadow border on interactive elements on inverse backgrounds.",
       "category": "box-shadow",
+      "value": "0 0 0 1px #0263e0",
+      "comment": "Default shadow border for primary interactions.",
+      "name": "shadowBorderPrimary"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #d61f1f",
+      "comment": "Light shadow border for destructive interactions.",
+      "name": "shadowBorderDestructive"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #940800",
@@ -632,2 +660,16 @@ "comment": "Shadow border for error inputs hover.",
       "category": "box-shadow",
+      "value": "0 0 0 1px #99cdff",
+      "comment": "Lighter shadow border for primary interactions.",
+      "name": "shadowBorderPrimaryLight"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #f6b1b1",
+      "comment": "Light shadow border for destructive interactions.",
+      "name": "shadowBorderDestructiveLight"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #8894aa",
@@ -634,0 +676,0 @@ "comment": "Shadow border for inputs.",

dist/themes/sendgrid/tokens.json

@@ -79,4 +79,6 @@ {
   "shadow-border-inverse-lightest": "0 0 0 1px #ffffff",
+  "shadow-border-destructive-darker": "0 0 0 1px #4a0b0b",
   "shadow-border-primary-darker": "0 0 0 1px #001f75",
   "shadow-border-light": "0 0 0 1px #ccd2dc",
+  "shadow-border-primary-lighter": "0 0 0 1px #cce4ff",
   "shadow-border-inverse-light": "0 0 0 1px rgba(255, 255, 255, 0.9)",
@@ -86,2 +88,4 @@ "shadow-low": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
   "shadow-focus-inverse": "0 0 0 4px rgba(255, 255, 255, 0.4)",
+  "shadow-border-primary": "0 0 0 1px #0263e0",
+  "shadow-border-destructive": "0 0 0 1px #d61f1f",
   "shadow-border-error-dark": "0 0 0 1px #940800",
@@ -93,2 +97,4 @@ "shadow-high": "0 16px 24px 0 rgba(18, 28, 45, 0.2)",
   "shadow-border-primary-dark": "0 0 0 1px #002ca6",
+  "shadow-border-primary-light": "0 0 0 1px #99cdff",
+  "shadow-border-destructive-light": "0 0 0 1px #f6b1b1",
   "shadow-border": "0 0 0 1px #8894aa",
@@ -95,0 +101,0 @@ "shadow-border-inverse": "0 0 0 1px rgba(255, 255, 255, 0.5)",

dist/tokens.common.d.ts

@@ -22,3 +22,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundDestructiveDarker = "rgb(74, 11, 11)";
-export declare const colorBackgroundDestructiveLight = "rgb(245, 138, 138)";
+export declare const colorBackgroundDestructiveLight = "rgb(246, 177, 177)";
 export declare const colorBackgroundDestructiveLighter = "rgb(252, 207, 207)";
@@ -37,3 +37,3 @@ export declare const colorBackgroundDestructiveLightest = "rgb(254, 236, 236)";
 export declare const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
-export declare const colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
+export declare const colorBackgroundPrimaryLight = "rgb(153, 205, 255)";
 export declare const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
@@ -108,4 +108,4 @@ export declare const colorBackgroundPrimaryLightest = "rgb(235, 244, 255)";
 export declare const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
-export declare const colorTextLinkDestructiveLight = "rgb(245, 138, 138)";
-export declare const colorTextLinkLight = "rgb(102, 179, 255)";
+export declare const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
+export declare const colorTextLinkLight = "rgb(153, 205, 255)";
 export declare const colorTextNew = "rgb(109, 46, 209)";
@@ -148,2 +148,5 @@ export declare const colorTextSuccess = "rgb(20, 176, 83)";
 export declare const shadowBorder = "0 0 0 1px #8891aa";
+export declare const shadowBorderDestructive = "0 0 0 1px #d61f1f";
+export declare const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";
+export declare const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
 export declare const shadowBorderError = "0 0 0 1px #d61f1f";
@@ -157,4 +160,7 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #750c0c";
 export declare const shadowBorderLighter = "0 0 0 1px #e1e3ea";
+export declare const shadowBorderPrimary = "0 0 0 1px #0263e0";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #001489";
 export declare const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
+export declare const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
+export declare const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
 export declare const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
@@ -274,3 +280,3 @@ export declare const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
   colorBackgroundDestructiveDarker: "rgb(74, 11, 11)";
-  colorBackgroundDestructiveLight: "rgb(245, 138, 138)";
+  colorBackgroundDestructiveLight: "rgb(246, 177, 177)";
   colorBackgroundDestructiveLighter: "rgb(252, 207, 207)";
@@ -289,3 +295,3 @@ colorBackgroundDestructiveLightest: "rgb(254, 236, 236)";
   colorBackgroundPrimaryDarkest: "rgb(6, 3, 58)";
-  colorBackgroundPrimaryLight: "rgb(102, 179, 255)";
+  colorBackgroundPrimaryLight: "rgb(153, 205, 255)";
   colorBackgroundPrimaryLighter: "rgb(204, 228, 255)";
@@ -343,2 +349,5 @@ colorBackgroundPrimaryLightest: "rgb(235, 244, 255)";
   shadowBorder: "0 0 0 1px #8891aa";
+  shadowBorderDestructive: "0 0 0 1px #d61f1f";
+  shadowBorderDestructiveDarker: "0 0 0 1px #4a0b0b";
+  shadowBorderDestructiveLight: "0 0 0 1px #f6b1b1";
   shadowBorderError: "0 0 0 1px #d61f1f";
@@ -352,4 +361,7 @@ shadowBorderErrorDark: "0 0 0 1px #750c0c";
   shadowBorderLighter: "0 0 0 1px #e1e3ea";
+  shadowBorderPrimary: "0 0 0 1px #0263e0";
   shadowBorderPrimaryDark: "0 0 0 1px #001489";
   shadowBorderPrimaryDarker: "0 0 0 1px #030b5d";
+  shadowBorderPrimaryLight: "0 0 0 1px #99cdff";
+  shadowBorderPrimaryLighter: "0 0 0 1px #cce4ff";
   shadowCard: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
@@ -529,4 +541,4 @@ shadowFocus: "0 0 0 4px rgba(2, 99, 224, 0.7)";
   colorTextLinkDestructiveDarker: "rgb(117, 12, 12)";
-  colorTextLinkDestructiveLight: "rgb(245, 138, 138)";
-  colorTextLinkLight: "rgb(102, 179, 255)";
+  colorTextLinkDestructiveLight: "rgb(246, 177, 177)";
+  colorTextLinkLight: "rgb(153, 205, 255)";
   colorTextNew: "rgb(109, 46, 209)";
@@ -533,0 +545,0 @@ colorTextSuccess: "rgb(20, 176, 83)";

dist/tokens.common.js

@@ -22,3 +22,3 @@ const borderRadius0 = "0";
 const colorBackgroundDestructiveDarker = "rgb(74, 11, 11)";
-const colorBackgroundDestructiveLight = "rgb(245, 138, 138)";
+const colorBackgroundDestructiveLight = "rgb(246, 177, 177)";
 const colorBackgroundDestructiveLighter = "rgb(252, 207, 207)";
@@ -37,3 +37,3 @@ const colorBackgroundDestructiveLightest = "rgb(254, 236, 236)";
 const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
-const colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
+const colorBackgroundPrimaryLight = "rgb(153, 205, 255)";
 const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
@@ -108,4 +108,4 @@ const colorBackgroundPrimaryLightest = "rgb(235, 244, 255)";
 const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
-const colorTextLinkDestructiveLight = "rgb(245, 138, 138)";
-const colorTextLinkLight = "rgb(102, 179, 255)";
+const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
+const colorTextLinkLight = "rgb(153, 205, 255)";
 const colorTextNew = "rgb(109, 46, 209)";
@@ -148,2 +148,5 @@ const colorTextSuccess = "rgb(20, 176, 83)";
 const shadowBorder = "0 0 0 1px #8891aa";
+const shadowBorderDestructive = "0 0 0 1px #d61f1f";
+const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";
+const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
 const shadowBorderError = "0 0 0 1px #d61f1f";
@@ -157,4 +160,7 @@ const shadowBorderErrorDark = "0 0 0 1px #750c0c";
 const shadowBorderLighter = "0 0 0 1px #e1e3ea";
+const shadowBorderPrimary = "0 0 0 1px #0263e0";
 const shadowBorderPrimaryDark = "0 0 0 1px #001489";
 const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
+const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
+const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
 const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
@@ -408,2 +414,5 @@ const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
 shadowBorder,
+shadowBorderDestructive,
+shadowBorderDestructiveDarker,
+shadowBorderDestructiveLight,
 shadowBorderError,
@@ -417,4 +426,7 @@ shadowBorderErrorDark,
 shadowBorderLighter,
+shadowBorderPrimary,
 shadowBorderPrimaryDark,
 shadowBorderPrimaryDarker,
+shadowBorderPrimaryLight,
+shadowBorderPrimaryLighter,
 shadowCard,
@@ -601,2 +613,5 @@ shadowFocus,
 shadowBorder,
+shadowBorderDestructive,
+shadowBorderDestructiveDarker,
+shadowBorderDestructiveLight,
 shadowBorderError,
@@ -610,4 +625,7 @@ shadowBorderErrorDark,
 shadowBorderLighter,
+shadowBorderPrimary,
 shadowBorderPrimaryDark,
 shadowBorderPrimaryDarker,
+shadowBorderPrimaryLight,
+shadowBorderPrimaryLighter,
 shadowCard,
@@ -614,0 +632,0 @@ shadowFocus,

dist/tokens.es6.d.ts

@@ -22,3 +22,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundDestructiveDarker = "rgb(74, 11, 11)";
-export declare const colorBackgroundDestructiveLight = "rgb(245, 138, 138)";
+export declare const colorBackgroundDestructiveLight = "rgb(246, 177, 177)";
 export declare const colorBackgroundDestructiveLighter = "rgb(252, 207, 207)";
@@ -37,3 +37,3 @@ export declare const colorBackgroundDestructiveLightest = "rgb(254, 236, 236)";
 export declare const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
-export declare const colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
+export declare const colorBackgroundPrimaryLight = "rgb(153, 205, 255)";
 export declare const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
@@ -108,4 +108,4 @@ export declare const colorBackgroundPrimaryLightest = "rgb(235, 244, 255)";
 export declare const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
-export declare const colorTextLinkDestructiveLight = "rgb(245, 138, 138)";
-export declare const colorTextLinkLight = "rgb(102, 179, 255)";
+export declare const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
+export declare const colorTextLinkLight = "rgb(153, 205, 255)";
 export declare const colorTextNew = "rgb(109, 46, 209)";
@@ -148,2 +148,5 @@ export declare const colorTextSuccess = "rgb(20, 176, 83)";
 export declare const shadowBorder = "0 0 0 1px #8891aa";
+export declare const shadowBorderDestructive = "0 0 0 1px #d61f1f";
+export declare const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";
+export declare const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
 export declare const shadowBorderError = "0 0 0 1px #d61f1f";
@@ -157,4 +160,7 @@ export declare const shadowBorderErrorDark = "0 0 0 1px #750c0c";
 export declare const shadowBorderLighter = "0 0 0 1px #e1e3ea";
+export declare const shadowBorderPrimary = "0 0 0 1px #0263e0";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #001489";
 export declare const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
+export declare const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
+export declare const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
 export declare const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
@@ -274,3 +280,3 @@ export declare const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
   colorBackgroundDestructiveDarker: "rgb(74, 11, 11)";
-  colorBackgroundDestructiveLight: "rgb(245, 138, 138)";
+  colorBackgroundDestructiveLight: "rgb(246, 177, 177)";
   colorBackgroundDestructiveLighter: "rgb(252, 207, 207)";
@@ -289,3 +295,3 @@ colorBackgroundDestructiveLightest: "rgb(254, 236, 236)";
   colorBackgroundPrimaryDarkest: "rgb(6, 3, 58)";
-  colorBackgroundPrimaryLight: "rgb(102, 179, 255)";
+  colorBackgroundPrimaryLight: "rgb(153, 205, 255)";
   colorBackgroundPrimaryLighter: "rgb(204, 228, 255)";
@@ -343,2 +349,5 @@ colorBackgroundPrimaryLightest: "rgb(235, 244, 255)";
   shadowBorder: "0 0 0 1px #8891aa";
+  shadowBorderDestructive: "0 0 0 1px #d61f1f";
+  shadowBorderDestructiveDarker: "0 0 0 1px #4a0b0b";
+  shadowBorderDestructiveLight: "0 0 0 1px #f6b1b1";
   shadowBorderError: "0 0 0 1px #d61f1f";
@@ -352,4 +361,7 @@ shadowBorderErrorDark: "0 0 0 1px #750c0c";
   shadowBorderLighter: "0 0 0 1px #e1e3ea";
+  shadowBorderPrimary: "0 0 0 1px #0263e0";
   shadowBorderPrimaryDark: "0 0 0 1px #001489";
   shadowBorderPrimaryDarker: "0 0 0 1px #030b5d";
+  shadowBorderPrimaryLight: "0 0 0 1px #99cdff";
+  shadowBorderPrimaryLighter: "0 0 0 1px #cce4ff";
   shadowCard: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
@@ -529,4 +541,4 @@ shadowFocus: "0 0 0 4px rgba(2, 99, 224, 0.7)";
   colorTextLinkDestructiveDarker: "rgb(117, 12, 12)";
-  colorTextLinkDestructiveLight: "rgb(245, 138, 138)";
-  colorTextLinkLight: "rgb(102, 179, 255)";
+  colorTextLinkDestructiveLight: "rgb(246, 177, 177)";
+  colorTextLinkLight: "rgb(153, 205, 255)";
   colorTextNew: "rgb(109, 46, 209)";
@@ -533,0 +545,0 @@ colorTextSuccess: "rgb(20, 176, 83)";

dist/tokens.es6.js

@@ -22,3 +22,3 @@ export const borderRadius0 = "0";
 export const colorBackgroundDestructiveDarker = "rgb(74, 11, 11)";
-export const colorBackgroundDestructiveLight = "rgb(245, 138, 138)";
+export const colorBackgroundDestructiveLight = "rgb(246, 177, 177)";
 export const colorBackgroundDestructiveLighter = "rgb(252, 207, 207)";
@@ -37,3 +37,3 @@ export const colorBackgroundDestructiveLightest = "rgb(254, 236, 236)";
 export const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
-export const colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
+export const colorBackgroundPrimaryLight = "rgb(153, 205, 255)";
 export const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
@@ -108,4 +108,4 @@ export const colorBackgroundPrimaryLightest = "rgb(235, 244, 255)";
 export const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
-export const colorTextLinkDestructiveLight = "rgb(245, 138, 138)";
-export const colorTextLinkLight = "rgb(102, 179, 255)";
+export const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
+export const colorTextLinkLight = "rgb(153, 205, 255)";
 export const colorTextNew = "rgb(109, 46, 209)";
@@ -148,2 +148,5 @@ export const colorTextSuccess = "rgb(20, 176, 83)";
 export const shadowBorder = "0 0 0 1px #8891aa";
+export const shadowBorderDestructive = "0 0 0 1px #d61f1f";
+export const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";
+export const shadowBorderDestructiveLight = "0 0 0 1px #f6b1b1";
 export const shadowBorderError = "0 0 0 1px #d61f1f";
@@ -157,4 +160,7 @@ export const shadowBorderErrorDark = "0 0 0 1px #750c0c";
 export const shadowBorderLighter = "0 0 0 1px #e1e3ea";
+export const shadowBorderPrimary = "0 0 0 1px #0263e0";
 export const shadowBorderPrimaryDark = "0 0 0 1px #001489";
 export const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
+export const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
+export const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
 export const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
@@ -341,2 +347,5 @@ export const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
 shadowBorder,
+shadowBorderDestructive,
+shadowBorderDestructiveDarker,
+shadowBorderDestructiveLight,
 shadowBorderError,
@@ -350,4 +359,7 @@ shadowBorderErrorDark,
 shadowBorderLighter,
+shadowBorderPrimary,
 shadowBorderPrimaryDark,
 shadowBorderPrimaryDarker,
+shadowBorderPrimaryLight,
+shadowBorderPrimaryLighter,
 shadowCard,
@@ -354,0 +366,0 @@ shadowFocus,

dist/tokens.gatsby.json

 {
     "tokens": [{
     "categoryName": "background-colors",
-    "tokens": [{"type":"color","category":"background-color","value":"rgb(244, 244, 246)","comment":"Default background color for any container","originalValue":"{!palette-gray-10}","name":"color-background"},{"type":"color","category":"background-color","value":"rgb(255, 255, 255)","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"rgb(18, 28, 45)","comment":"Inverse background color of the main page body, the darkest gray in the system","originalValue":"{!palette-gray-100}","name":"color-background-body-inverse"},{"type":"color","category":"background-color","value":"rgb(0, 20, 137)","comment":"Primary brand background, accessible with inverse text","originalValue":"{!palette-blue-80}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"rgb(242, 47, 70)","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"rgb(225, 227, 234)","comment":"Dark default background color","originalValue":"{!palette-gray-20}","name":"color-background-dark"},{"type":"color","category":"background-color","value":"rgb(136, 145, 170)","comment":"Darker default background color","originalValue":"{!palette-gray-50}","name":"color-background-darker"},{"type":"color","category":"background-color","value":"rgb(75, 86, 113)","comment":"Darkest default background color","originalValue":"{!palette-gray-70}","name":"color-background-darkest"},{"type":"color","category":"background-color","value":"rgb(214, 31, 31)","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"rgb(117, 12, 12)","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"rgb(74, 11, 11)","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"rgb(245, 138, 138)","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"rgb(252, 207, 207)","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-20}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"rgb(254, 236, 236)","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"rgb(214, 31, 31)","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"rgb(117, 12, 12)","comment":"Dark error background color","originalValue":"{!palette-red-80}","name":"color-background-error-dark"},{"type":"color","category":"background-color","value":"rgb(254, 236, 236)","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"rgba(255, 255, 255, 0.1)","comment":"Inverse background color for any container. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-10}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"rgba(255, 255, 255, 0.2)","comment":"Light inverse background color for any container. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-20}","name":"color-background-inverse-light"},{"type":"color","category":"background-color","value":"rgb(235, 244, 255)","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"rgba(6, 3, 58, 0.4)","comment":"Default background for overlays","originalValue":"{!palette-blue-100-transparent-40}","name":"color-background-overlay"},{"type":"color","category":"background-color","value":"rgb(2, 99, 224)","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"rgb(0, 20, 137)","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"rgb(3, 11, 93)","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"rgb(6, 3, 58)","comment":"Darkest background for primary actions or highlights","originalValue":"{!palette-blue-100}","name":"color-background-primary-darkest"},{"type":"color","category":"background-color","value":"rgb(102, 179, 255)","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"rgb(204, 228, 255)","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-20}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"rgb(235, 244, 255)","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"rgb(235, 86, 86)","comment":"Required background color","originalValue":"{!palette-red-50}","name":"color-background-required"},{"type":"color","category":"background-color","value":"rgb(244, 244, 246)","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"rgb(255, 241, 179)","comment":"Subaccount background color","originalValue":"{!palette-yellow-20}","name":"color-background-subaccount"},{"type":"color","category":"background-color","value":"rgb(20, 176, 83)","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"rgb(237, 253, 243)","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"rgb(209, 250, 224)","comment":"Trial account background color","originalValue":"{!palette-green-20}","name":"color-background-trial"},{"type":"color","category":"background-color","value":"rgb(200, 175, 240)","comment":"User avatar background color","originalValue":"{!palette-purple-30}","name":"color-background-user"},{"type":"color","category":"background-color","value":"rgb(244, 124, 34)","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"rgb(254, 245, 238)","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
+    "tokens": [{"type":"color","category":"background-color","value":"rgb(244, 244, 246)","comment":"Default background color for any container","originalValue":"{!palette-gray-10}","name":"color-background"},{"type":"color","category":"background-color","value":"rgb(255, 255, 255)","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"rgb(18, 28, 45)","comment":"Inverse background color of the main page body, the darkest gray in the system","originalValue":"{!palette-gray-100}","name":"color-background-body-inverse"},{"type":"color","category":"background-color","value":"rgb(0, 20, 137)","comment":"Primary brand background, accessible with inverse text","originalValue":"{!palette-blue-80}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"rgb(242, 47, 70)","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"rgb(225, 227, 234)","comment":"Dark default background color","originalValue":"{!palette-gray-20}","name":"color-background-dark"},{"type":"color","category":"background-color","value":"rgb(136, 145, 170)","comment":"Darker default background color","originalValue":"{!palette-gray-50}","name":"color-background-darker"},{"type":"color","category":"background-color","value":"rgb(75, 86, 113)","comment":"Darkest default background color","originalValue":"{!palette-gray-70}","name":"color-background-darkest"},{"type":"color","category":"background-color","value":"rgb(214, 31, 31)","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"rgb(117, 12, 12)","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"rgb(74, 11, 11)","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"rgb(246, 177, 177)","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"rgb(252, 207, 207)","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-20}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"rgb(254, 236, 236)","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"rgb(214, 31, 31)","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"rgb(117, 12, 12)","comment":"Dark error background color","originalValue":"{!palette-red-80}","name":"color-background-error-dark"},{"type":"color","category":"background-color","value":"rgb(254, 236, 236)","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"rgba(255, 255, 255, 0.1)","comment":"Inverse background color for any container. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-10}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"rgba(255, 255, 255, 0.2)","comment":"Light inverse background color for any container. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-20}","name":"color-background-inverse-light"},{"type":"color","category":"background-color","value":"rgb(235, 244, 255)","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"rgba(6, 3, 58, 0.4)","comment":"Default background for overlays","originalValue":"{!palette-blue-100-transparent-40}","name":"color-background-overlay"},{"type":"color","category":"background-color","value":"rgb(2, 99, 224)","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"rgb(0, 20, 137)","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"rgb(3, 11, 93)","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"rgb(6, 3, 58)","comment":"Darkest background for primary actions or highlights","originalValue":"{!palette-blue-100}","name":"color-background-primary-darkest"},{"type":"color","category":"background-color","value":"rgb(153, 205, 255)","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"rgb(204, 228, 255)","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-20}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"rgb(235, 244, 255)","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"rgb(235, 86, 86)","comment":"Required background color","originalValue":"{!palette-red-50}","name":"color-background-required"},{"type":"color","category":"background-color","value":"rgb(244, 244, 246)","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"rgb(255, 241, 179)","comment":"Subaccount background color","originalValue":"{!palette-yellow-20}","name":"color-background-subaccount"},{"type":"color","category":"background-color","value":"rgb(20, 176, 83)","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"rgb(237, 253, 243)","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"rgb(209, 250, 224)","comment":"Trial account background color","originalValue":"{!palette-green-20}","name":"color-background-trial"},{"type":"color","category":"background-color","value":"rgb(200, 175, 240)","comment":"User avatar background color","originalValue":"{!palette-purple-30}","name":"color-background-user"},{"type":"color","category":"background-color","value":"rgb(244, 124, 34)","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"rgb(254, 245, 238)","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
   },
@@ -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":"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 #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 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 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(245, 138, 138)","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(102, 179, 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(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(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"}]
   },
@@ -56,0 +56,0 @@ {

dist/tokens.ios.json

@@ -181,3 +181,3 @@ {
       "category": "background-color",
-      "value": "rgb(245, 138, 138)",
+      "value": "rgb(246, 177, 177)",
       "comment": "Light background for destructive actions or highlights",
@@ -196,3 +196,3 @@ "name": "colorBackgroundDestructiveLight"
       "category": "background-color",
-      "value": "rgb(102, 179, 255)",
+      "value": "rgb(153, 205, 255)",
       "comment": "Light background for primary actions or highlights",
@@ -547,2 +547,9 @@ "name": "colorBackgroundPrimaryLight"
       "category": "box-shadow",
+      "value": "0 0 0 1px #4a0b0b",
+      "comment": "Dark shadow border for destructive interactions",
+      "name": "shadowBorderDestructiveDarker"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #030b5d",
@@ -562,2 +569,9 @@ "comment": "Darker shadow border for inputs active.",
       "category": "box-shadow",
+      "value": "0 0 0 1px #cce4ff",
+      "comment": "Lighter shadow border for primary interactions.",
+      "name": "shadowBorderPrimaryLighter"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px rgba(255, 255, 255, 0.9)",
@@ -591,2 +605,16 @@ "comment": "Light shadow border on interactive elements on inverse backgrounds.",
       "category": "box-shadow",
+      "value": "0 0 0 1px #0263e0",
+      "comment": "Default shadow border for primary interactions.",
+      "name": "shadowBorderPrimary"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #d61f1f",
+      "comment": "Light shadow border for destructive interactions.",
+      "name": "shadowBorderDestructive"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #750c0c",
@@ -634,2 +662,16 @@ "comment": "Shadow border for error inputs hover.",
       "category": "box-shadow",
+      "value": "0 0 0 1px #99cdff",
+      "comment": "Lighter shadow border for primary interactions.",
+      "name": "shadowBorderPrimaryLight"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #f6b1b1",
+      "comment": "Light shadow border for destructive interactions.",
+      "name": "shadowBorderDestructiveLight"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #8891aa",
@@ -1572,3 +1614,3 @@ "comment": "Shadow border for inputs.",
       "category": "text-color",
-      "value": "rgb(245, 138, 138)",
+      "value": "rgb(246, 177, 177)",
       "comment": "Light shade of destructive link text to be used in interactions",
@@ -1650,3 +1692,3 @@ "name": "colorTextLinkDestructiveLight"
       "category": "text-color",
-      "value": "rgb(102, 179, 255)",
+      "value": "rgb(153, 205, 255)",
       "comment": "Light shade of link text to be used in interactions",
@@ -1653,0 +1695,0 @@ "name": "colorTextLinkLight"

dist/tokens.json

@@ -27,5 +27,5 @@ {
   "color-background-destructive-dark": "rgb(117, 12, 12)",
-  "color-background-destructive-light": "rgb(245, 138, 138)",
+  "color-background-destructive-light": "rgb(246, 177, 177)",
   "color-background-primary-dark": "rgb(0, 20, 137)",
-  "color-background-primary-light": "rgb(102, 179, 255)",
+  "color-background-primary-light": "rgb(153, 205, 255)",
   "color-background-warning-lightest": "rgb(254, 245, 238)",
@@ -80,4 +80,6 @@ "color-background-body": "rgb(255, 255, 255)",
   "shadow-border-inverse-lightest": "0 0 0 1px #ffffff",
+  "shadow-border-destructive-darker": "0 0 0 1px #4a0b0b",
   "shadow-border-primary-darker": "0 0 0 1px #030b5d",
   "shadow-border-light": "0 0 0 1px #cacdd8",
+  "shadow-border-primary-lighter": "0 0 0 1px #cce4ff",
   "shadow-border-inverse-light": "0 0 0 1px rgba(255, 255, 255, 0.9)",
@@ -87,2 +89,4 @@ "shadow-low": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
   "shadow-focus-inverse": "0 0 0 4px rgba(255, 255, 255, 0.4)",
+  "shadow-border-primary": "0 0 0 1px #0263e0",
+  "shadow-border-destructive": "0 0 0 1px #d61f1f",
   "shadow-border-error-dark": "0 0 0 1px #750c0c",
@@ -94,2 +98,4 @@ "shadow-high": "0 16px 24px 0 rgba(18, 28, 45, 0.2)",
   "shadow-border-primary-dark": "0 0 0 1px #001489",
+  "shadow-border-primary-light": "0 0 0 1px #99cdff",
+  "shadow-border-destructive-light": "0 0 0 1px #f6b1b1",
   "shadow-border": "0 0 0 1px #8891aa",
@@ -235,3 +241,3 @@ "shadow-border-inverse": "0 0 0 1px rgba(255, 255, 255, 0.5)",
   "color-text-weak": "rgb(96, 107, 133)",
-  "color-text-link-destructive-light": "rgb(245, 138, 138)",
+  "color-text-link-destructive-light": "rgb(246, 177, 177)",
   "color-text-icon": "rgb(96, 107, 133)",
@@ -247,3 +253,3 @@ "color-text-link": "rgb(2, 99, 224)",
   "color-text-inverse-weaker": "rgb(96, 107, 133)",
-  "color-text-link-light": "rgb(102, 179, 255)",
+  "color-text-link-light": "rgb(153, 205, 255)",
   "color-text-inverse": "rgb(255, 255, 255)",
@@ -250,0 +256,0 @@ "color-text-error-light": "rgb(245, 138, 138)",

package.json

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

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

1166211

increased by2.92%

Lines of code

24125

increased by2.13%

No dependency changes