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

Comparing version 6.3.5 to 6.3.6

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [6.3.6](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@6.3.5...@twilio-paste/design-tokens@6.3.6) (2020-11-06)
+
+**Note:** Version bump only for package @twilio-paste/design-tokens
+
+
+
+
+
 ## [6.3.5](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@6.3.4...@twilio-paste/design-tokens@6.3.5) (2020-10-23)
@@ -8,0 +16,0 @@

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

@@ -16,2 +16,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 export declare const colorBackgroundDark = "rgb(228, 231, 233)";
@@ -32,2 +33,3 @@ export declare const colorBackgroundDarker = "rgb(200, 204, 207)";
 export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundNew = "rgb(231, 220, 250)";
 export declare const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
@@ -278,2 +280,3 @@ export declare const colorBackgroundPrimary = "rgb(2, 122, 197)";
   colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundBrandHighlightLightest: "rgba(242, 47, 70, 0.1)";
   colorBackgroundDark: "rgb(228, 231, 233)";
@@ -294,2 +297,3 @@ colorBackgroundDarker: "rgb(200, 204, 207)";
   colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
+  colorBackgroundNew: "rgb(231, 220, 250)";
   colorBackgroundOverlay: "rgba(40, 42, 43, 0.5)";
@@ -296,0 +300,0 @@ colorBackgroundPrimary: "rgb(2, 122, 197)";

dist/themes/console/tokens.common.js

@@ -16,2 +16,3 @@ const borderRadius0 = "0";
 const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 const colorBackgroundDark = "rgb(228, 231, 233)";
@@ -32,2 +33,3 @@ const colorBackgroundDarker = "rgb(200, 204, 207)";
 const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+const colorBackgroundNew = "rgb(231, 220, 250)";
 const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
@@ -289,2 +291,3 @@ const colorBackgroundPrimary = "rgb(2, 122, 197)";
 colorBackgroundBrandHighlight,
+colorBackgroundBrandHighlightLightest,
 colorBackgroundDark,
@@ -305,2 +308,3 @@ colorBackgroundDarker,
 colorBackgroundNeutralLightest,
+colorBackgroundNew,
 colorBackgroundOverlay,
@@ -551,2 +555,3 @@ colorBackgroundPrimary,
 colorBackgroundBrandHighlight,
+colorBackgroundBrandHighlightLightest,
 colorBackgroundDark,
@@ -567,2 +572,3 @@ colorBackgroundDarker,
 colorBackgroundNeutralLightest,
+colorBackgroundNew,
 colorBackgroundOverlay,
@@ -569,0 +575,0 @@ colorBackgroundPrimary,

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

@@ -16,2 +16,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 export declare const colorBackgroundDark = "rgb(228, 231, 233)";
@@ -32,2 +33,3 @@ export declare const colorBackgroundDarker = "rgb(200, 204, 207)";
 export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundNew = "rgb(231, 220, 250)";
 export declare const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
@@ -278,2 +280,3 @@ export declare const colorBackgroundPrimary = "rgb(2, 122, 197)";
   colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundBrandHighlightLightest: "rgba(242, 47, 70, 0.1)";
   colorBackgroundDark: "rgb(228, 231, 233)";
@@ -294,2 +297,3 @@ colorBackgroundDarker: "rgb(200, 204, 207)";
   colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
+  colorBackgroundNew: "rgb(231, 220, 250)";
   colorBackgroundOverlay: "rgba(40, 42, 43, 0.5)";
@@ -296,0 +300,0 @@ colorBackgroundPrimary: "rgb(2, 122, 197)";

dist/themes/console/tokens.es6.js

@@ -16,2 +16,3 @@ export const borderRadius0 = "0";
 export const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 export const colorBackgroundDark = "rgb(228, 231, 233)";
@@ -32,2 +33,3 @@ export const colorBackgroundDarker = "rgb(200, 204, 207)";
 export const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export const colorBackgroundNew = "rgb(231, 220, 250)";
 export const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
@@ -278,2 +280,3 @@ export const colorBackgroundPrimary = "rgb(2, 122, 197)";
 colorBackgroundBrandHighlight,
+colorBackgroundBrandHighlightLightest,
 colorBackgroundDark,
@@ -294,2 +297,3 @@ colorBackgroundDarker,
 colorBackgroundNeutralLightest,
+colorBackgroundNew,
 colorBackgroundOverlay,
@@ -296,0 +300,0 @@ colorBackgroundPrimary,

dist/themes/console/tokens.gatsby.json

 {
     "tokens": [{
     "categoryName": "background-colors",
-    "tokens": [{"type":"color","category":"background-color","value":"rgb(248, 248, 249)","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","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(40, 42, 43)","comment":"Inverse background color of the main page body","originalValue":"{!palette-gray-100}","name":"color-background-body-inverse"},{"type":"color","category":"background-color","value":"rgb(35, 54, 89)","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","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(228, 231, 233)","comment":"Dark default background color","originalValue":"{!palette-gray-40}","name":"color-background-dark"},{"type":"color","category":"background-color","value":"rgb(200, 204, 207)","comment":"Darker default background color","originalValue":"{!palette-gray-50}","name":"color-background-darker"},{"type":"color","category":"background-color","value":"rgb(112, 117, 120)","comment":"Darkest default background color","originalValue":"{!palette-gray-70}","name":"color-background-darkest"},{"type":"color","category":"background-color","value":"rgb(226, 37, 37)","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"rgb(146, 18, 0)","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"rgb(96, 1, 1)","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"rgb(236, 182, 182)","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"rgb(245, 221, 221)","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"rgb(226, 37, 37)","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"rgb(146, 18, 0)","comment":"Dark error background color","originalValue":"{!palette-red-80}","name":"color-background-error-dark"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","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(245, 248, 255)","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"rgba(40, 42, 43, 0.5)","comment":"Default background for overlays","originalValue":"{!palette-gray-100-transparent-50}","name":"color-background-overlay"},{"type":"color","category":"background-color","value":"rgb(2, 122, 197)","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"rgb(0, 62, 130)","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, 44, 94)","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"rgb(0, 9, 43)","comment":"Darkest background for primary actions or highlights","originalValue":"{!palette-blue-100}","name":"color-background-primary-darkest"},{"type":"color","category":"background-color","value":"rgb(179, 211, 233)","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"rgb(220, 234, 244)","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"rgb(245, 248, 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(222, 88, 88)","comment":"Required background color","originalValue":"{!palette-red-50}","name":"color-background-required"},{"type":"color","category":"background-color","value":"rgb(248, 248, 249)","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-20}","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(0, 153, 74)","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"rgb(224, 255, 239)","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"rgb(199, 255, 226)","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(228, 98, 22)","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"rgb(255, 236, 216)","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
+    "tokens": [{"type":"color","category":"background-color","value":"rgb(248, 248, 249)","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","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(40, 42, 43)","comment":"Inverse background color of the main page body","originalValue":"{!palette-gray-100}","name":"color-background-body-inverse"},{"type":"color","category":"background-color","value":"rgb(35, 54, 89)","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","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":"rgba(242, 47, 70, 0.1)","comment":"Lightest highlight brand background, accessible with black text","originalValue":"{!amaranth-transparent-10}","name":"color-background-brand-highlight-lightest"},{"type":"color","category":"background-color","value":"rgb(228, 231, 233)","comment":"Dark default background color","originalValue":"{!palette-gray-40}","name":"color-background-dark"},{"type":"color","category":"background-color","value":"rgb(200, 204, 207)","comment":"Darker default background color","originalValue":"{!palette-gray-50}","name":"color-background-darker"},{"type":"color","category":"background-color","value":"rgb(112, 117, 120)","comment":"Darkest default background color","originalValue":"{!palette-gray-70}","name":"color-background-darkest"},{"type":"color","category":"background-color","value":"rgb(226, 37, 37)","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"rgb(146, 18, 0)","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"rgb(96, 1, 1)","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"rgb(236, 182, 182)","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"rgb(245, 221, 221)","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"rgb(226, 37, 37)","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"rgb(146, 18, 0)","comment":"Dark error background color","originalValue":"{!palette-red-80}","name":"color-background-error-dark"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","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(245, 248, 255)","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"rgb(231, 220, 250)","comment":"Background color for indicating a new status.","originalValue":"{!palette-purple-20}","name":"color-background-new"},{"type":"color","category":"background-color","value":"rgba(40, 42, 43, 0.5)","comment":"Default background for overlays","originalValue":"{!palette-gray-100-transparent-50}","name":"color-background-overlay"},{"type":"color","category":"background-color","value":"rgb(2, 122, 197)","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"rgb(0, 62, 130)","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, 44, 94)","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"rgb(0, 9, 43)","comment":"Darkest background for primary actions or highlights","originalValue":"{!palette-blue-100}","name":"color-background-primary-darkest"},{"type":"color","category":"background-color","value":"rgb(179, 211, 233)","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"rgb(220, 234, 244)","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"rgb(245, 248, 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(222, 88, 88)","comment":"Required background color","originalValue":"{!palette-red-50}","name":"color-background-required"},{"type":"color","category":"background-color","value":"rgb(248, 248, 249)","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-20}","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(0, 153, 74)","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"rgb(224, 255, 239)","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"rgb(199, 255, 226)","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(228, 98, 22)","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"rgb(255, 236, 216)","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
   },
@@ -6,0 +6,0 @@ {

dist/themes/console/tokens.ios.json

@@ -55,2 +55,9 @@ {
       "category": "background-color",
+      "value": "rgba(242, 47, 70, 0.1)",
+      "comment": "Lightest highlight brand background, accessible with black text",
+      "name": "colorBackgroundBrandHighlightLightest"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgba(255, 255, 255, 0.2)",
@@ -77,2 +84,9 @@ "comment": "Light inverse background color for any container. Must be used on color-background-body-inverse.",
       "category": "background-color",
+      "value": "rgb(231, 220, 250)",
+      "comment": "Background color for indicating a new status.",
+      "name": "colorBackgroundNew"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(245, 248, 255)",
@@ -79,0 +93,0 @@ "comment": "Lightest neutral background color",

dist/themes/console/tokens.json

@@ -9,5 +9,7 @@ {
   "color-background-destructive-lighter": "rgb(245, 221, 221)",
+  "color-background-brand-highlight-lightest": "rgba(242, 47, 70, 0.1)",
   "color-background-inverse-light": "rgba(255, 255, 255, 0.2)",
   "color-background-warning": "rgb(228, 98, 22)",
   "color-background-error-lightest": "rgb(255, 233, 231)",
+  "color-background-new": "rgb(231, 220, 250)",
   "color-background-neutral-lightest": "rgb(245, 248, 255)",
@@ -14,0 +16,0 @@ "color-background-dark": "rgb(228, 231, 233)",

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

@@ -16,2 +16,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 export declare const colorBackgroundDark = "rgb(204, 210, 220)";
@@ -32,2 +33,3 @@ export declare const colorBackgroundDarker = "rgb(204, 210, 220)";
 export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundNew = "rgb(231, 220, 250)";
 export declare const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
@@ -280,2 +282,3 @@ export declare const colorBackgroundPrimary = "rgb(51, 104, 250)";
   colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundBrandHighlightLightest: "rgba(242, 47, 70, 0.1)";
   colorBackgroundDark: "rgb(204, 210, 220)";
@@ -296,2 +299,3 @@ colorBackgroundDarker: "rgb(204, 210, 220)";
   colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
+  colorBackgroundNew: "rgb(231, 220, 250)";
   colorBackgroundOverlay: "rgba(8, 21, 44, 0.5)";
@@ -298,0 +302,0 @@ colorBackgroundPrimary: "rgb(51, 104, 250)";

dist/themes/sendgrid/tokens.common.js

@@ -16,2 +16,3 @@ const borderRadius0 = "0";
 const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 const colorBackgroundDark = "rgb(204, 210, 220)";
@@ -32,2 +33,3 @@ const colorBackgroundDarker = "rgb(204, 210, 220)";
 const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+const colorBackgroundNew = "rgb(231, 220, 250)";
 const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
@@ -291,2 +293,3 @@ const colorBackgroundPrimary = "rgb(51, 104, 250)";
 colorBackgroundBrandHighlight,
+colorBackgroundBrandHighlightLightest,
 colorBackgroundDark,
@@ -307,2 +310,3 @@ colorBackgroundDarker,
 colorBackgroundNeutralLightest,
+colorBackgroundNew,
 colorBackgroundOverlay,
@@ -555,2 +559,3 @@ colorBackgroundPrimary,
 colorBackgroundBrandHighlight,
+colorBackgroundBrandHighlightLightest,
 colorBackgroundDark,
@@ -571,2 +576,3 @@ colorBackgroundDarker,
 colorBackgroundNeutralLightest,
+colorBackgroundNew,
 colorBackgroundOverlay,
@@ -573,0 +579,0 @@ colorBackgroundPrimary,

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

@@ -16,2 +16,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 export declare const colorBackgroundDark = "rgb(204, 210, 220)";
@@ -32,2 +33,3 @@ export declare const colorBackgroundDarker = "rgb(204, 210, 220)";
 export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundNew = "rgb(231, 220, 250)";
 export declare const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
@@ -280,2 +282,3 @@ export declare const colorBackgroundPrimary = "rgb(51, 104, 250)";
   colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundBrandHighlightLightest: "rgba(242, 47, 70, 0.1)";
   colorBackgroundDark: "rgb(204, 210, 220)";
@@ -296,2 +299,3 @@ colorBackgroundDarker: "rgb(204, 210, 220)";
   colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
+  colorBackgroundNew: "rgb(231, 220, 250)";
   colorBackgroundOverlay: "rgba(8, 21, 44, 0.5)";
@@ -298,0 +302,0 @@ colorBackgroundPrimary: "rgb(51, 104, 250)";

dist/themes/sendgrid/tokens.es6.js

@@ -16,2 +16,3 @@ export const borderRadius0 = "0";
 export const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 export const colorBackgroundDark = "rgb(204, 210, 220)";
@@ -32,2 +33,3 @@ export const colorBackgroundDarker = "rgb(204, 210, 220)";
 export const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export const colorBackgroundNew = "rgb(231, 220, 250)";
 export const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
@@ -280,2 +282,3 @@ export const colorBackgroundPrimary = "rgb(51, 104, 250)";
 colorBackgroundBrandHighlight,
+colorBackgroundBrandHighlightLightest,
 colorBackgroundDark,
@@ -296,2 +299,3 @@ colorBackgroundDarker,
 colorBackgroundNeutralLightest,
+colorBackgroundNew,
 colorBackgroundOverlay,
@@ -298,0 +302,0 @@ colorBackgroundPrimary,

dist/themes/sendgrid/tokens.gatsby.json

 {
     "tokens": [{
     "categoryName": "background-colors",
-    "tokens": [{"type":"color","category":"background-color","value":"rgb(243, 244, 246)","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","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(204, 210, 220)","comment":"Dark default background color","originalValue":"{!palette-gray-40}","name":"color-background-dark"},{"type":"color","category":"background-color","value":"rgb(204, 210, 220)","comment":"Darker default background color","originalValue":"{!palette-gray-40}","name":"color-background-darker"},{"type":"color","category":"background-color","value":"rgb(136, 148, 170)","comment":"Darkest default background color","originalValue":"{!palette-gray-70}","name":"color-background-darkest"},{"type":"color","category":"background-color","value":"rgb(206, 36, 26)","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-50}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"rgb(112, 6, 0)","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"rgb(71, 5, 0)","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"rgb(255, 140, 133)","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"rgb(255, 185, 179)","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-20}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"rgb(172, 30, 22)","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"rgb(148, 8, 0)","comment":"Dark error background color","originalValue":"{!palette-red-70}","name":"color-background-error-dark"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"rgb(8, 21, 44)","comment":"Inverse background color for any container, the darkest gray in the system","originalValue":"{!palette-gray-100}","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(245, 248, 255)","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"rgba(8, 21, 44, 0.5)","comment":"Default background for overlays","originalValue":"{!palette-gray-100-transparent-50}","name":"color-background-overlay"},{"type":"color","category":"background-color","value":"rgb(51, 104, 250)","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-50}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"rgb(0, 44, 166)","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-70}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"rgb(0, 31, 117)","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-80}","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(186, 204, 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(219, 230, 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(245, 248, 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(232, 83, 74)","comment":"Required background color","originalValue":"{!palette-red-40}","name":"color-background-required"},{"type":"color","category":"background-color","value":"rgb(249, 250, 251)","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(0, 153, 74)","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"rgb(224, 255, 239)","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(228, 98, 22)","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"rgb(255, 236, 216)","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
+    "tokens": [{"type":"color","category":"background-color","value":"rgb(243, 244, 246)","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","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":"rgba(242, 47, 70, 0.1)","comment":"Lightest highlight brand background, accessible with black text","originalValue":"{!amaranth-transparent-10}","name":"color-background-brand-highlight-lightest"},{"type":"color","category":"background-color","value":"rgb(204, 210, 220)","comment":"Dark default background color","originalValue":"{!palette-gray-40}","name":"color-background-dark"},{"type":"color","category":"background-color","value":"rgb(204, 210, 220)","comment":"Darker default background color","originalValue":"{!palette-gray-40}","name":"color-background-darker"},{"type":"color","category":"background-color","value":"rgb(136, 148, 170)","comment":"Darkest default background color","originalValue":"{!palette-gray-70}","name":"color-background-darkest"},{"type":"color","category":"background-color","value":"rgb(206, 36, 26)","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-50}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"rgb(112, 6, 0)","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"rgb(71, 5, 0)","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"rgb(255, 140, 133)","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"rgb(255, 185, 179)","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-20}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"rgb(172, 30, 22)","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"rgb(148, 8, 0)","comment":"Dark error background color","originalValue":"{!palette-red-70}","name":"color-background-error-dark"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"rgb(8, 21, 44)","comment":"Inverse background color for any container, the darkest gray in the system","originalValue":"{!palette-gray-100}","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(245, 248, 255)","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"rgb(231, 220, 250)","comment":"Background color for indicating a new status.","originalValue":"{!palette-purple-20}","name":"color-background-new"},{"type":"color","category":"background-color","value":"rgba(8, 21, 44, 0.5)","comment":"Default background for overlays","originalValue":"{!palette-gray-100-transparent-50}","name":"color-background-overlay"},{"type":"color","category":"background-color","value":"rgb(51, 104, 250)","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-50}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"rgb(0, 44, 166)","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-70}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"rgb(0, 31, 117)","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-80}","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(186, 204, 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(219, 230, 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(245, 248, 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(232, 83, 74)","comment":"Required background color","originalValue":"{!palette-red-40}","name":"color-background-required"},{"type":"color","category":"background-color","value":"rgb(249, 250, 251)","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(0, 153, 74)","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"rgb(224, 255, 239)","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(228, 98, 22)","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"rgb(255, 236, 216)","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
   },
@@ -6,0 +6,0 @@ {

dist/themes/sendgrid/tokens.ios.json

@@ -55,2 +55,9 @@ {
       "category": "background-color",
+      "value": "rgba(242, 47, 70, 0.1)",
+      "comment": "Lightest highlight brand background, accessible with black text",
+      "name": "colorBackgroundBrandHighlightLightest"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgba(255, 255, 255, 0.2)",
@@ -77,2 +84,9 @@ "comment": "Light inverse background color for any container. Must be used on color-background-body-inverse.",
       "category": "background-color",
+      "value": "rgb(231, 220, 250)",
+      "comment": "Background color for indicating a new status.",
+      "name": "colorBackgroundNew"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(245, 248, 255)",
@@ -79,0 +93,0 @@ "comment": "Lightest neutral background color",

dist/themes/sendgrid/tokens.json

@@ -9,5 +9,7 @@ {
   "color-background-destructive-lighter": "rgb(255, 185, 179)",
+  "color-background-brand-highlight-lightest": "rgba(242, 47, 70, 0.1)",
   "color-background-inverse-light": "rgba(255, 255, 255, 0.2)",
   "color-background-warning": "rgb(228, 98, 22)",
   "color-background-error-lightest": "rgb(255, 233, 231)",
+  "color-background-new": "rgb(231, 220, 250)",
   "color-background-neutral-lightest": "rgb(245, 248, 255)",
@@ -14,0 +16,0 @@ "color-background-dark": "rgb(204, 210, 220)",

dist/tokens.common.d.ts

@@ -16,2 +16,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 export declare const colorBackgroundDark = "rgb(225, 227, 234)";
@@ -32,2 +33,3 @@ export declare const colorBackgroundDarker = "rgb(136, 145, 170)";
 export declare const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
+export declare const colorBackgroundNew = "rgb(231, 220, 250)";
 export declare const colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
@@ -278,2 +280,3 @@ export declare const colorBackgroundPrimary = "rgb(2, 99, 224)";
   colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundBrandHighlightLightest: "rgba(242, 47, 70, 0.1)";
   colorBackgroundDark: "rgb(225, 227, 234)";
@@ -294,2 +297,3 @@ colorBackgroundDarker: "rgb(136, 145, 170)";
   colorBackgroundNeutralLightest: "rgb(235, 244, 255)";
+  colorBackgroundNew: "rgb(231, 220, 250)";
   colorBackgroundOverlay: "rgba(6, 3, 58, 0.4)";
@@ -296,0 +300,0 @@ colorBackgroundPrimary: "rgb(2, 99, 224)";

dist/tokens.common.js

@@ -16,2 +16,3 @@ const borderRadius0 = "0";
 const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 const colorBackgroundDark = "rgb(225, 227, 234)";
@@ -32,2 +33,3 @@ const colorBackgroundDarker = "rgb(136, 145, 170)";
 const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
+const colorBackgroundNew = "rgb(231, 220, 250)";
 const colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
@@ -289,2 +291,3 @@ const colorBackgroundPrimary = "rgb(2, 99, 224)";
 colorBackgroundBrandHighlight,
+colorBackgroundBrandHighlightLightest,
 colorBackgroundDark,
@@ -305,2 +308,3 @@ colorBackgroundDarker,
 colorBackgroundNeutralLightest,
+colorBackgroundNew,
 colorBackgroundOverlay,
@@ -551,2 +555,3 @@ colorBackgroundPrimary,
 colorBackgroundBrandHighlight,
+colorBackgroundBrandHighlightLightest,
 colorBackgroundDark,
@@ -567,2 +572,3 @@ colorBackgroundDarker,
 colorBackgroundNeutralLightest,
+colorBackgroundNew,
 colorBackgroundOverlay,
@@ -569,0 +575,0 @@ colorBackgroundPrimary,

dist/tokens.es6.d.ts

@@ -16,2 +16,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 export declare const colorBackgroundDark = "rgb(225, 227, 234)";
@@ -32,2 +33,3 @@ export declare const colorBackgroundDarker = "rgb(136, 145, 170)";
 export declare const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
+export declare const colorBackgroundNew = "rgb(231, 220, 250)";
 export declare const colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
@@ -278,2 +280,3 @@ export declare const colorBackgroundPrimary = "rgb(2, 99, 224)";
   colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundBrandHighlightLightest: "rgba(242, 47, 70, 0.1)";
   colorBackgroundDark: "rgb(225, 227, 234)";
@@ -294,2 +297,3 @@ colorBackgroundDarker: "rgb(136, 145, 170)";
   colorBackgroundNeutralLightest: "rgb(235, 244, 255)";
+  colorBackgroundNew: "rgb(231, 220, 250)";
   colorBackgroundOverlay: "rgba(6, 3, 58, 0.4)";
@@ -296,0 +300,0 @@ colorBackgroundPrimary: "rgb(2, 99, 224)";

dist/tokens.es6.js

@@ -16,2 +16,3 @@ export const borderRadius0 = "0";
 export const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
 export const colorBackgroundDark = "rgb(225, 227, 234)";
@@ -32,2 +33,3 @@ export const colorBackgroundDarker = "rgb(136, 145, 170)";
 export const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
+export const colorBackgroundNew = "rgb(231, 220, 250)";
 export const colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
@@ -278,2 +280,3 @@ export const colorBackgroundPrimary = "rgb(2, 99, 224)";
 colorBackgroundBrandHighlight,
+colorBackgroundBrandHighlightLightest,
 colorBackgroundDark,
@@ -294,2 +297,3 @@ colorBackgroundDarker,
 colorBackgroundNeutralLightest,
+colorBackgroundNew,
 colorBackgroundOverlay,
@@ -296,0 +300,0 @@ colorBackgroundPrimary,

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(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"}]
+    "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":"rgba(242, 47, 70, 0.1)","comment":"Lightest highlight brand background, accessible with black text","originalValue":"{!amaranth-transparent-10}","name":"color-background-brand-highlight-lightest"},{"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":"rgb(231, 220, 250)","comment":"Background color for indicating a new status.","originalValue":"{!palette-purple-20}","name":"color-background-new"},{"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"}]
   },
@@ -6,0 +6,0 @@ {

dist/tokens.ios.json

@@ -55,2 +55,9 @@ {
       "category": "background-color",
+      "value": "rgba(242, 47, 70, 0.1)",
+      "comment": "Lightest highlight brand background, accessible with black text",
+      "name": "colorBackgroundBrandHighlightLightest"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgba(255, 255, 255, 0.2)",
@@ -77,2 +84,9 @@ "comment": "Light inverse background color for any container. Must be used on color-background-body-inverse.",
       "category": "background-color",
+      "value": "rgb(231, 220, 250)",
+      "comment": "Background color for indicating a new status.",
+      "name": "colorBackgroundNew"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(235, 244, 255)",
@@ -79,0 +93,0 @@ "comment": "Lightest neutral background color",

dist/tokens.json

@@ -9,5 +9,7 @@ {
   "color-background-destructive-lighter": "rgb(252, 207, 207)",
+  "color-background-brand-highlight-lightest": "rgba(242, 47, 70, 0.1)",
   "color-background-inverse-light": "rgba(255, 255, 255, 0.2)",
   "color-background-warning": "rgb(244, 124, 34)",
   "color-background-error-lightest": "rgb(254, 236, 236)",
+  "color-background-new": "rgb(231, 220, 250)",
   "color-background-neutral-lightest": "rgb(235, 244, 255)",
@@ -14,0 +16,0 @@ "color-background-dark": "rgb(225, 227, 234)",

package.json

 {
   "name": "@twilio-paste/design-tokens",
-  "version": "6.3.5",
+  "version": "6.3.6",
   "description": "Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.",
@@ -22,3 +22,3 @@ "main": "dist/tokens.common.js",
   },
-  "gitHead": "2d291eb88bbd86707bd89875261ed20907fa1829"
+  "gitHead": "b8aa1828ea9ee9fadfa518b238796c7a2f39c12b"
 }

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

1213572

increased by1.05%

Lines of code

24895

increased by0.71%

No dependency changes