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

Comparing version 5.5.0 to 6.0.0

CHANGELOG.md

@@ -6,2 +6,20 @@ # Change Log
 
+# [6.0.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@5.5.0...@twilio-paste/design-tokens@6.0.0) (2020-08-04)
+
+
+### Bug Fixes
+
+* **design-tokens:** updates to default and console aliases and tokens ([a3d02e2](https://github.com/twilio-labs/paste/commit/a3d02e2acfa4ea9e8a9ffd1f83d21f7c22cd4b92))
+
+
+### BREAKING CHANGES
+
+* **design-tokens:** `color-background-inverse` has been changed to a transparent color. Use `color-background-body-inverse` instead.
+`color-text-label` has been removed.
+`color-text-placeholder` has been removed.
+
+
+
+
+
 # [5.5.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@5.4.0...@twilio-paste/design-tokens@5.5.0) (2020-07-22)
@@ -8,0 +26,0 @@

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

@@ -13,2 +13,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBody = "rgb(255, 255, 255)";
+export declare const colorBackgroundBodyInverse = "rgb(40, 42, 43)";
 export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
@@ -28,3 +29,4 @@ export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
 export declare const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
-export declare const colorBackgroundInverse = "rgb(40, 42, 43)";
+export declare const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
+export declare const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
@@ -35,2 +37,3 @@ export declare const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
 export declare const colorBackgroundPrimaryDarker = "rgb(3, 44, 94)";
+export declare const colorBackgroundPrimaryDarkest = "rgb(0, 9, 43)";
 export declare const colorBackgroundPrimaryLight = "rgb(179, 211, 233)";
@@ -41,4 +44,7 @@ export declare const colorBackgroundPrimaryLighter = "rgb(220, 234, 244)";
 export declare const colorBackgroundRowStriped = "rgb(248, 248, 249)";
+export declare const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 export declare const colorBackgroundSuccess = "rgb(0, 153, 74)";
 export declare const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBackgroundTrial = "rgb(199, 255, 226)";
+export declare const colorBackgroundUser = "rgb(200, 175, 240)";
 export declare const colorBackgroundWarning = "rgb(228, 98, 22)";
@@ -57,3 +63,6 @@ export declare const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
 export declare const colorBorderErrorLightest = "rgb(255, 233, 231)";
-export declare const colorBorderInverse = "rgb(255, 255, 255)";
+export declare const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+export declare const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+export declare const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+export declare const colorBorderInverseLightest = "rgb(255, 255, 255)";
 export declare const colorBorderLight = "rgb(200, 204, 207)";
@@ -90,6 +99,8 @@ export declare const colorBorderLighter = "rgb(228, 231, 233)";
 export declare const colorTextErrorDark = "rgb(146, 18, 0)";
+export declare const colorTextErrorLight = "rgb(236, 182, 182)";
 export declare const colorTextIcon = "rgb(112, 117, 120)";
+export declare const colorTextIconInverse = "rgb(200, 204, 207)";
 export declare const colorTextInverse = "rgb(255, 255, 255)";
 export declare const colorTextInverseWeak = "rgb(200, 204, 207)";
-export declare const colorTextLabel = "rgb(40, 42, 43)";
+export declare const colorTextInverseWeaker = "rgb(136, 140, 142)";
 export declare const colorTextLink = "rgb(0, 94, 166)";
@@ -103,3 +114,3 @@ export declare const colorTextLinkDark = "rgb(0, 62, 130)";
 export declare const colorTextLinkLight = "rgb(179, 211, 233)";
-export declare const colorTextPlaceholder = "rgb(112, 117, 120)";
+export declare const colorTextNew = "rgb(109, 46, 209)";
 export declare const colorTextSuccess = "rgb(0, 153, 74)";
@@ -139,6 +150,12 @@ export declare const colorTextWarning = "rgb(228, 98, 22)";
 export declare const lineHeight90 = "2.5rem";
+export declare const shadow = "0 8px 16px 0 rgba(40, 42, 43, 0.2)";
 export declare const shadowBorder = "0 0 0 1px #888c8e";
 export declare const shadowBorderError = "0 0 0 1px #e22525";
 export declare const shadowBorderErrorDark = "0 0 0 1px #921200";
+export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+export declare const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+export declare const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
 export declare const shadowBorderLight = "0 0 0 1px #e4e7e9";
+export declare const shadowBorderLighter = "0 0 0 1px #f8f8f9";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #003e82";
@@ -148,2 +165,5 @@ export declare const shadowBorderPrimaryDarker = "0 0 0 1px #032c5e";
 export declare const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";
+export declare const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+export declare const shadowHigh = "0 12px 24px 4px rgba(40, 42, 43, 0.2)";
+export declare const shadowLow = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
 export declare const size0 = "0";
@@ -249,2 +269,3 @@ export declare const size10 = "5.5rem";
   colorBackgroundBody: "rgb(255, 255, 255)";
+  colorBackgroundBodyInverse: "rgb(40, 42, 43)";
   colorBackgroundBrand: "rgb(35, 54, 89)";
@@ -264,3 +285,4 @@ colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
   colorBackgroundErrorLightest: "rgb(255, 233, 231)";
-  colorBackgroundInverse: "rgb(40, 42, 43)";
+  colorBackgroundInverse: "rgba(255, 255, 255, 0.1)";
+  colorBackgroundInverseLight: "rgba(255, 255, 255, 0.2)";
   colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
@@ -271,2 +293,3 @@ colorBackgroundOverlay: "rgba(40, 42, 43, 0.5)";
   colorBackgroundPrimaryDarker: "rgb(3, 44, 94)";
+  colorBackgroundPrimaryDarkest: "rgb(0, 9, 43)";
   colorBackgroundPrimaryLight: "rgb(179, 211, 233)";
@@ -277,4 +300,7 @@ colorBackgroundPrimaryLighter: "rgb(220, 234, 244)";
   colorBackgroundRowStriped: "rgb(248, 248, 249)";
+  colorBackgroundSubaccount: "rgb(255, 241, 179)";
   colorBackgroundSuccess: "rgb(0, 153, 74)";
   colorBackgroundSuccessLightest: "rgb(224, 255, 239)";
+  colorBackgroundTrial: "rgb(199, 255, 226)";
+  colorBackgroundUser: "rgb(200, 175, 240)";
   colorBackgroundWarning: "rgb(228, 98, 22)";
@@ -295,3 +321,6 @@ colorBackgroundWarningLightest: "rgb(255, 236, 216)";
   colorBorderErrorLightest: "rgb(255, 233, 231)";
-  colorBorderInverse: "rgb(255, 255, 255)";
+  colorBorderInverse: "rgba(255, 255, 255, 0.5)";
+  colorBorderInverseDarker: "rgba(255, 255, 255, 0.2)";
+  colorBorderInverseLighter: "rgba(255, 255, 255, 0.9)";
+  colorBorderInverseLightest: "rgb(255, 255, 255)";
   colorBorderLight: "rgb(200, 204, 207)";
@@ -319,6 +348,12 @@ colorBorderLighter: "rgb(228, 231, 233)";
 export declare const boxShadows: {
+  shadow: "0 8px 16px 0 rgba(40, 42, 43, 0.2)";
   shadowBorder: "0 0 0 1px #888c8e";
   shadowBorderError: "0 0 0 1px #e22525";
   shadowBorderErrorDark: "0 0 0 1px #921200";
+  shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
+  shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";
+  shadowBorderInverseLight: "0 0 0 1px rgba(255, 255, 255, 0.9)";
+  shadowBorderInverseLightest: "0 0 0 1px #ffffff";
   shadowBorderLight: "0 0 0 1px #e4e7e9";
+  shadowBorderLighter: "0 0 0 1px #f8f8f9";
   shadowBorderPrimaryDark: "0 0 0 1px #003e82";
@@ -328,2 +363,5 @@ shadowBorderPrimaryDarker: "0 0 0 1px #032c5e";
   shadowFocus: "0 0 0 4px rgba(2, 122, 197, 0.8)";
+  shadowFocusInverse: "0 0 0 4px rgba(255, 255, 255, 0.4)";
+  shadowHigh: "0 12px 24px 4px rgba(40, 42, 43, 0.2)";
+  shadowLow: "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
 };
@@ -486,6 +524,8 @@ export declare const colors: {
   colorTextErrorDark: "rgb(146, 18, 0)";
+  colorTextErrorLight: "rgb(236, 182, 182)";
   colorTextIcon: "rgb(112, 117, 120)";
+  colorTextIconInverse: "rgb(200, 204, 207)";
   colorTextInverse: "rgb(255, 255, 255)";
   colorTextInverseWeak: "rgb(200, 204, 207)";
-  colorTextLabel: "rgb(40, 42, 43)";
+  colorTextInverseWeaker: "rgb(136, 140, 142)";
   colorTextLink: "rgb(0, 94, 166)";
@@ -499,3 +539,3 @@ colorTextLinkDark: "rgb(0, 62, 130)";
   colorTextLinkLight: "rgb(179, 211, 233)";
-  colorTextPlaceholder: "rgb(112, 117, 120)";
+  colorTextNew: "rgb(109, 46, 209)";
   colorTextSuccess: "rgb(0, 153, 74)";
@@ -502,0 +542,0 @@ colorTextWarning: "rgb(228, 98, 22)";

dist/themes/console/tokens.common.js

@@ -13,2 +13,3 @@ const borderRadius0 = "0";
 const colorBackgroundBody = "rgb(255, 255, 255)";
+const colorBackgroundBodyInverse = "rgb(40, 42, 43)";
 const colorBackgroundBrand = "rgb(35, 54, 89)";
@@ -28,3 +29,4 @@ const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
 const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
-const colorBackgroundInverse = "rgb(40, 42, 43)";
+const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
+const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
@@ -35,2 +37,3 @@ const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
 const colorBackgroundPrimaryDarker = "rgb(3, 44, 94)";
+const colorBackgroundPrimaryDarkest = "rgb(0, 9, 43)";
 const colorBackgroundPrimaryLight = "rgb(179, 211, 233)";
@@ -41,4 +44,7 @@ const colorBackgroundPrimaryLighter = "rgb(220, 234, 244)";
 const colorBackgroundRowStriped = "rgb(248, 248, 249)";
+const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 const colorBackgroundSuccess = "rgb(0, 153, 74)";
 const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+const colorBackgroundTrial = "rgb(199, 255, 226)";
+const colorBackgroundUser = "rgb(200, 175, 240)";
 const colorBackgroundWarning = "rgb(228, 98, 22)";
@@ -57,3 +63,6 @@ const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
 const colorBorderErrorLightest = "rgb(255, 233, 231)";
-const colorBorderInverse = "rgb(255, 255, 255)";
+const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+const colorBorderInverseLightest = "rgb(255, 255, 255)";
 const colorBorderLight = "rgb(200, 204, 207)";
@@ -90,6 +99,8 @@ const colorBorderLighter = "rgb(228, 231, 233)";
 const colorTextErrorDark = "rgb(146, 18, 0)";
+const colorTextErrorLight = "rgb(236, 182, 182)";
 const colorTextIcon = "rgb(112, 117, 120)";
+const colorTextIconInverse = "rgb(200, 204, 207)";
 const colorTextInverse = "rgb(255, 255, 255)";
 const colorTextInverseWeak = "rgb(200, 204, 207)";
-const colorTextLabel = "rgb(40, 42, 43)";
+const colorTextInverseWeaker = "rgb(136, 140, 142)";
 const colorTextLink = "rgb(0, 94, 166)";
@@ -103,3 +114,3 @@ const colorTextLinkDark = "rgb(0, 62, 130)";
 const colorTextLinkLight = "rgb(179, 211, 233)";
-const colorTextPlaceholder = "rgb(112, 117, 120)";
+const colorTextNew = "rgb(109, 46, 209)";
 const colorTextSuccess = "rgb(0, 153, 74)";
@@ -139,6 +150,12 @@ const colorTextWarning = "rgb(228, 98, 22)";
 const lineHeight90 = "2.5rem";
+const shadow = "0 8px 16px 0 rgba(40, 42, 43, 0.2)";
 const shadowBorder = "0 0 0 1px #888c8e";
 const shadowBorderError = "0 0 0 1px #e22525";
 const shadowBorderErrorDark = "0 0 0 1px #921200";
+const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
 const shadowBorderLight = "0 0 0 1px #e4e7e9";
+const shadowBorderLighter = "0 0 0 1px #f8f8f9";
 const shadowBorderPrimaryDark = "0 0 0 1px #003e82";
@@ -148,2 +165,5 @@ const shadowBorderPrimaryDarker = "0 0 0 1px #032c5e";
 const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";
+const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+const shadowHigh = "0 12px 24px 4px rgba(40, 42, 43, 0.2)";
+const shadowLow = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
 const size0 = "0";
@@ -260,2 +280,3 @@ const size10 = "5.5rem";
 colorBackgroundBody,
+colorBackgroundBodyInverse,
 colorBackgroundBrand,
@@ -276,2 +297,3 @@ colorBackgroundBrandHighlight,
 colorBackgroundInverse,
+colorBackgroundInverseLight,
 colorBackgroundNeutralLightest,
@@ -282,2 +304,3 @@ colorBackgroundOverlay,
 colorBackgroundPrimaryDarker,
+colorBackgroundPrimaryDarkest,
 colorBackgroundPrimaryLight,
@@ -288,4 +311,7 @@ colorBackgroundPrimaryLighter,
 colorBackgroundRowStriped,
+colorBackgroundSubaccount,
 colorBackgroundSuccess,
 colorBackgroundSuccessLightest,
+colorBackgroundTrial,
+colorBackgroundUser,
 colorBackgroundWarning,
@@ -305,2 +331,5 @@ colorBackgroundWarningLightest,
 colorBorderInverse,
+colorBorderInverseDarker,
+colorBorderInverseLighter,
+colorBorderInverseLightest,
 colorBorderLight,
@@ -337,6 +366,8 @@ colorBorderLighter,
 colorTextErrorDark,
+colorTextErrorLight,
 colorTextIcon,
+colorTextIconInverse,
 colorTextInverse,
 colorTextInverseWeak,
-colorTextLabel,
+colorTextInverseWeaker,
 colorTextLink,
@@ -350,3 +381,3 @@ colorTextLinkDark,
 colorTextLinkLight,
-colorTextPlaceholder,
+colorTextNew,
 colorTextSuccess,
@@ -386,6 +417,12 @@ colorTextWarning,
 lineHeight90,
+shadow,
 shadowBorder,
 shadowBorderError,
 shadowBorderErrorDark,
+shadowBorderInverse,
+shadowBorderInverseDarker,
+shadowBorderInverseLight,
+shadowBorderInverseLightest,
 shadowBorderLight,
+shadowBorderLighter,
 shadowBorderPrimaryDark,
@@ -395,2 +432,5 @@ shadowBorderPrimaryDarker,
 shadowFocus,
+shadowFocusInverse,
+shadowHigh,
+shadowLow,
 size0,
@@ -496,2 +536,3 @@ size10,
 colorBackgroundBody,
+colorBackgroundBodyInverse,
 colorBackgroundBrand,
@@ -512,2 +553,3 @@ colorBackgroundBrandHighlight,
 colorBackgroundInverse,
+colorBackgroundInverseLight,
 colorBackgroundNeutralLightest,
@@ -518,2 +560,3 @@ colorBackgroundOverlay,
 colorBackgroundPrimaryDarker,
+colorBackgroundPrimaryDarkest,
 colorBackgroundPrimaryLight,
@@ -524,4 +567,7 @@ colorBackgroundPrimaryLighter,
 colorBackgroundRowStriped,
+colorBackgroundSubaccount,
 colorBackgroundSuccess,
 colorBackgroundSuccessLightest,
+colorBackgroundTrial,
+colorBackgroundUser,
 colorBackgroundWarning,
@@ -543,2 +589,5 @@ colorBackgroundWarningLightest,
 colorBorderInverse,
+colorBorderInverseDarker,
+colorBorderInverseLighter,
+colorBorderInverseLightest,
 colorBorderLight,
@@ -566,6 +615,12 @@ colorBorderLighter,
 boxShadows: {
+shadow,
 shadowBorder,
 shadowBorderError,
 shadowBorderErrorDark,
+shadowBorderInverse,
+shadowBorderInverseDarker,
+shadowBorderInverseLight,
+shadowBorderInverseLightest,
 shadowBorderLight,
+shadowBorderLighter,
 shadowBorderPrimaryDark,
@@ -575,2 +630,5 @@ shadowBorderPrimaryDarker,
 shadowFocus,
+shadowFocusInverse,
+shadowHigh,
+shadowLow,
 },
@@ -733,6 +791,8 @@ colors: {
 colorTextErrorDark,
+colorTextErrorLight,
 colorTextIcon,
+colorTextIconInverse,
 colorTextInverse,
 colorTextInverseWeak,
-colorTextLabel,
+colorTextInverseWeaker,
 colorTextLink,
@@ -746,3 +806,3 @@ colorTextLinkDark,
 colorTextLinkLight,
-colorTextPlaceholder,
+colorTextNew,
 colorTextSuccess,
@@ -749,0 +809,0 @@ colorTextWarning,

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

@@ -13,2 +13,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBody = "rgb(255, 255, 255)";
+export declare const colorBackgroundBodyInverse = "rgb(40, 42, 43)";
 export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
@@ -28,3 +29,4 @@ export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
 export declare const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
-export declare const colorBackgroundInverse = "rgb(40, 42, 43)";
+export declare const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
+export declare const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
@@ -35,2 +37,3 @@ export declare const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
 export declare const colorBackgroundPrimaryDarker = "rgb(3, 44, 94)";
+export declare const colorBackgroundPrimaryDarkest = "rgb(0, 9, 43)";
 export declare const colorBackgroundPrimaryLight = "rgb(179, 211, 233)";
@@ -41,4 +44,7 @@ export declare const colorBackgroundPrimaryLighter = "rgb(220, 234, 244)";
 export declare const colorBackgroundRowStriped = "rgb(248, 248, 249)";
+export declare const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 export declare const colorBackgroundSuccess = "rgb(0, 153, 74)";
 export declare const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBackgroundTrial = "rgb(199, 255, 226)";
+export declare const colorBackgroundUser = "rgb(200, 175, 240)";
 export declare const colorBackgroundWarning = "rgb(228, 98, 22)";
@@ -57,3 +63,6 @@ export declare const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
 export declare const colorBorderErrorLightest = "rgb(255, 233, 231)";
-export declare const colorBorderInverse = "rgb(255, 255, 255)";
+export declare const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+export declare const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+export declare const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+export declare const colorBorderInverseLightest = "rgb(255, 255, 255)";
 export declare const colorBorderLight = "rgb(200, 204, 207)";
@@ -90,6 +99,8 @@ export declare const colorBorderLighter = "rgb(228, 231, 233)";
 export declare const colorTextErrorDark = "rgb(146, 18, 0)";
+export declare const colorTextErrorLight = "rgb(236, 182, 182)";
 export declare const colorTextIcon = "rgb(112, 117, 120)";
+export declare const colorTextIconInverse = "rgb(200, 204, 207)";
 export declare const colorTextInverse = "rgb(255, 255, 255)";
 export declare const colorTextInverseWeak = "rgb(200, 204, 207)";
-export declare const colorTextLabel = "rgb(40, 42, 43)";
+export declare const colorTextInverseWeaker = "rgb(136, 140, 142)";
 export declare const colorTextLink = "rgb(0, 94, 166)";
@@ -103,3 +114,3 @@ export declare const colorTextLinkDark = "rgb(0, 62, 130)";
 export declare const colorTextLinkLight = "rgb(179, 211, 233)";
-export declare const colorTextPlaceholder = "rgb(112, 117, 120)";
+export declare const colorTextNew = "rgb(109, 46, 209)";
 export declare const colorTextSuccess = "rgb(0, 153, 74)";
@@ -139,6 +150,12 @@ export declare const colorTextWarning = "rgb(228, 98, 22)";
 export declare const lineHeight90 = "2.5rem";
+export declare const shadow = "0 8px 16px 0 rgba(40, 42, 43, 0.2)";
 export declare const shadowBorder = "0 0 0 1px #888c8e";
 export declare const shadowBorderError = "0 0 0 1px #e22525";
 export declare const shadowBorderErrorDark = "0 0 0 1px #921200";
+export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+export declare const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+export declare const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
 export declare const shadowBorderLight = "0 0 0 1px #e4e7e9";
+export declare const shadowBorderLighter = "0 0 0 1px #f8f8f9";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #003e82";
@@ -148,2 +165,5 @@ export declare const shadowBorderPrimaryDarker = "0 0 0 1px #032c5e";
 export declare const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";
+export declare const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+export declare const shadowHigh = "0 12px 24px 4px rgba(40, 42, 43, 0.2)";
+export declare const shadowLow = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
 export declare const size0 = "0";
@@ -249,2 +269,3 @@ export declare const size10 = "5.5rem";
   colorBackgroundBody: "rgb(255, 255, 255)";
+  colorBackgroundBodyInverse: "rgb(40, 42, 43)";
   colorBackgroundBrand: "rgb(35, 54, 89)";
@@ -264,3 +285,4 @@ colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
   colorBackgroundErrorLightest: "rgb(255, 233, 231)";
-  colorBackgroundInverse: "rgb(40, 42, 43)";
+  colorBackgroundInverse: "rgba(255, 255, 255, 0.1)";
+  colorBackgroundInverseLight: "rgba(255, 255, 255, 0.2)";
   colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
@@ -271,2 +293,3 @@ colorBackgroundOverlay: "rgba(40, 42, 43, 0.5)";
   colorBackgroundPrimaryDarker: "rgb(3, 44, 94)";
+  colorBackgroundPrimaryDarkest: "rgb(0, 9, 43)";
   colorBackgroundPrimaryLight: "rgb(179, 211, 233)";
@@ -277,4 +300,7 @@ colorBackgroundPrimaryLighter: "rgb(220, 234, 244)";
   colorBackgroundRowStriped: "rgb(248, 248, 249)";
+  colorBackgroundSubaccount: "rgb(255, 241, 179)";
   colorBackgroundSuccess: "rgb(0, 153, 74)";
   colorBackgroundSuccessLightest: "rgb(224, 255, 239)";
+  colorBackgroundTrial: "rgb(199, 255, 226)";
+  colorBackgroundUser: "rgb(200, 175, 240)";
   colorBackgroundWarning: "rgb(228, 98, 22)";
@@ -295,3 +321,6 @@ colorBackgroundWarningLightest: "rgb(255, 236, 216)";
   colorBorderErrorLightest: "rgb(255, 233, 231)";
-  colorBorderInverse: "rgb(255, 255, 255)";
+  colorBorderInverse: "rgba(255, 255, 255, 0.5)";
+  colorBorderInverseDarker: "rgba(255, 255, 255, 0.2)";
+  colorBorderInverseLighter: "rgba(255, 255, 255, 0.9)";
+  colorBorderInverseLightest: "rgb(255, 255, 255)";
   colorBorderLight: "rgb(200, 204, 207)";
@@ -319,6 +348,12 @@ colorBorderLighter: "rgb(228, 231, 233)";
 export declare const boxShadows: {
+  shadow: "0 8px 16px 0 rgba(40, 42, 43, 0.2)";
   shadowBorder: "0 0 0 1px #888c8e";
   shadowBorderError: "0 0 0 1px #e22525";
   shadowBorderErrorDark: "0 0 0 1px #921200";
+  shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
+  shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";
+  shadowBorderInverseLight: "0 0 0 1px rgba(255, 255, 255, 0.9)";
+  shadowBorderInverseLightest: "0 0 0 1px #ffffff";
   shadowBorderLight: "0 0 0 1px #e4e7e9";
+  shadowBorderLighter: "0 0 0 1px #f8f8f9";
   shadowBorderPrimaryDark: "0 0 0 1px #003e82";
@@ -328,2 +363,5 @@ shadowBorderPrimaryDarker: "0 0 0 1px #032c5e";
   shadowFocus: "0 0 0 4px rgba(2, 122, 197, 0.8)";
+  shadowFocusInverse: "0 0 0 4px rgba(255, 255, 255, 0.4)";
+  shadowHigh: "0 12px 24px 4px rgba(40, 42, 43, 0.2)";
+  shadowLow: "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
 };
@@ -486,6 +524,8 @@ export declare const colors: {
   colorTextErrorDark: "rgb(146, 18, 0)";
+  colorTextErrorLight: "rgb(236, 182, 182)";
   colorTextIcon: "rgb(112, 117, 120)";
+  colorTextIconInverse: "rgb(200, 204, 207)";
   colorTextInverse: "rgb(255, 255, 255)";
   colorTextInverseWeak: "rgb(200, 204, 207)";
-  colorTextLabel: "rgb(40, 42, 43)";
+  colorTextInverseWeaker: "rgb(136, 140, 142)";
   colorTextLink: "rgb(0, 94, 166)";
@@ -499,3 +539,3 @@ colorTextLinkDark: "rgb(0, 62, 130)";
   colorTextLinkLight: "rgb(179, 211, 233)";
-  colorTextPlaceholder: "rgb(112, 117, 120)";
+  colorTextNew: "rgb(109, 46, 209)";
   colorTextSuccess: "rgb(0, 153, 74)";
@@ -502,0 +542,0 @@ colorTextWarning: "rgb(228, 98, 22)";

dist/themes/console/tokens.es6.js

@@ -13,2 +13,3 @@ export const borderRadius0 = "0";
 export const colorBackgroundBody = "rgb(255, 255, 255)";
+export const colorBackgroundBodyInverse = "rgb(40, 42, 43)";
 export const colorBackgroundBrand = "rgb(35, 54, 89)";
@@ -28,3 +29,4 @@ export const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
 export const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
-export const colorBackgroundInverse = "rgb(40, 42, 43)";
+export const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
+export const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 export const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
@@ -35,2 +37,3 @@ export const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
 export const colorBackgroundPrimaryDarker = "rgb(3, 44, 94)";
+export const colorBackgroundPrimaryDarkest = "rgb(0, 9, 43)";
 export const colorBackgroundPrimaryLight = "rgb(179, 211, 233)";
@@ -41,4 +44,7 @@ export const colorBackgroundPrimaryLighter = "rgb(220, 234, 244)";
 export const colorBackgroundRowStriped = "rgb(248, 248, 249)";
+export const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 export const colorBackgroundSuccess = "rgb(0, 153, 74)";
 export const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export const colorBackgroundTrial = "rgb(199, 255, 226)";
+export const colorBackgroundUser = "rgb(200, 175, 240)";
 export const colorBackgroundWarning = "rgb(228, 98, 22)";
@@ -57,3 +63,6 @@ export const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
 export const colorBorderErrorLightest = "rgb(255, 233, 231)";
-export const colorBorderInverse = "rgb(255, 255, 255)";
+export const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+export const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+export const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+export const colorBorderInverseLightest = "rgb(255, 255, 255)";
 export const colorBorderLight = "rgb(200, 204, 207)";
@@ -90,6 +99,8 @@ export const colorBorderLighter = "rgb(228, 231, 233)";
 export const colorTextErrorDark = "rgb(146, 18, 0)";
+export const colorTextErrorLight = "rgb(236, 182, 182)";
 export const colorTextIcon = "rgb(112, 117, 120)";
+export const colorTextIconInverse = "rgb(200, 204, 207)";
 export const colorTextInverse = "rgb(255, 255, 255)";
 export const colorTextInverseWeak = "rgb(200, 204, 207)";
-export const colorTextLabel = "rgb(40, 42, 43)";
+export const colorTextInverseWeaker = "rgb(136, 140, 142)";
 export const colorTextLink = "rgb(0, 94, 166)";
@@ -103,3 +114,3 @@ export const colorTextLinkDark = "rgb(0, 62, 130)";
 export const colorTextLinkLight = "rgb(179, 211, 233)";
-export const colorTextPlaceholder = "rgb(112, 117, 120)";
+export const colorTextNew = "rgb(109, 46, 209)";
 export const colorTextSuccess = "rgb(0, 153, 74)";
@@ -139,6 +150,12 @@ export const colorTextWarning = "rgb(228, 98, 22)";
 export const lineHeight90 = "2.5rem";
+export const shadow = "0 8px 16px 0 rgba(40, 42, 43, 0.2)";
 export const shadowBorder = "0 0 0 1px #888c8e";
 export const shadowBorderError = "0 0 0 1px #e22525";
 export const shadowBorderErrorDark = "0 0 0 1px #921200";
+export const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+export const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+export const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+export const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
 export const shadowBorderLight = "0 0 0 1px #e4e7e9";
+export const shadowBorderLighter = "0 0 0 1px #f8f8f9";
 export const shadowBorderPrimaryDark = "0 0 0 1px #003e82";
@@ -148,2 +165,5 @@ export const shadowBorderPrimaryDarker = "0 0 0 1px #032c5e";
 export const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";
+export const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+export const shadowHigh = "0 12px 24px 4px rgba(40, 42, 43, 0.2)";
+export const shadowLow = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
 export const size0 = "0";
@@ -249,2 +269,3 @@ export const size10 = "5.5rem";
 colorBackgroundBody,
+colorBackgroundBodyInverse,
 colorBackgroundBrand,
@@ -265,2 +286,3 @@ colorBackgroundBrandHighlight,
 colorBackgroundInverse,
+colorBackgroundInverseLight,
 colorBackgroundNeutralLightest,
@@ -271,2 +293,3 @@ colorBackgroundOverlay,
 colorBackgroundPrimaryDarker,
+colorBackgroundPrimaryDarkest,
 colorBackgroundPrimaryLight,
@@ -277,4 +300,7 @@ colorBackgroundPrimaryLighter,
 colorBackgroundRowStriped,
+colorBackgroundSubaccount,
 colorBackgroundSuccess,
 colorBackgroundSuccessLightest,
+colorBackgroundTrial,
+colorBackgroundUser,
 colorBackgroundWarning,
@@ -296,2 +322,5 @@ colorBackgroundWarningLightest,
 colorBorderInverse,
+colorBorderInverseDarker,
+colorBorderInverseLighter,
+colorBorderInverseLightest,
 colorBorderLight,
@@ -319,6 +348,12 @@ colorBorderLighter,
 export const boxShadows = {
+shadow,
 shadowBorder,
 shadowBorderError,
 shadowBorderErrorDark,
+shadowBorderInverse,
+shadowBorderInverseDarker,
+shadowBorderInverseLight,
+shadowBorderInverseLightest,
 shadowBorderLight,
+shadowBorderLighter,
 shadowBorderPrimaryDark,
@@ -328,2 +363,5 @@ shadowBorderPrimaryDarker,
 shadowFocus,
+shadowFocusInverse,
+shadowHigh,
+shadowLow,
 };
@@ -486,6 +524,8 @@ export const colors = {
 colorTextErrorDark,
+colorTextErrorLight,
 colorTextIcon,
+colorTextIconInverse,
 colorTextInverse,
 colorTextInverseWeak,
-colorTextLabel,
+colorTextInverseWeaker,
 colorTextLink,
@@ -499,3 +539,3 @@ colorTextLinkDark,
 colorTextLinkLight,
-colorTextPlaceholder,
+colorTextNew,
 colorTextSuccess,
@@ -502,0 +542,0 @@ colorTextWarning,

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(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":"rgb(40, 42, 43)","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":"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(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(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(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":"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"}]
   },
 {
     "categoryName": "border-colors",
-    "tokens": [{"type":"color","category":"border-color","value":"rgb(136, 140, 142)","comment":"Default border color","originalValue":"{!palette-gray-60}","name":"color-border"},{"type":"color","category":"border-color","value":"rgb(136, 140, 142)","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"rgb(226, 37, 37)","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"rgb(146, 18, 0)","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"rgb(96, 1, 1)","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"rgb(236, 182, 182)","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"rgb(245, 221, 221)","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"rgb(226, 37, 37)","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"rgb(146, 18, 0)","comment":"Dark error border color","originalValue":"{!palette-red-80}","name":"color-border-error-dark"},{"type":"color","category":"border-color","value":"rgb(222, 88, 88)","comment":"Light error border color","originalValue":"{!palette-red-50}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"rgb(255, 233, 231)","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"rgb(255, 255, 255)","comment":"Border on inverse backgrounds","originalValue":"{!palette-gray-0}","name":"color-border-inverse"},{"type":"color","category":"border-color","value":"rgb(200, 204, 207)","comment":"Light border color","originalValue":"{!palette-gray-50}","name":"color-border-light"},{"type":"color","category":"border-color","value":"rgb(228, 231, 233)","comment":"Lighter border color","originalValue":"{!palette-gray-40}","name":"color-border-lighter"},{"type":"color","category":"border-color","value":"rgb(200, 204, 207)","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"rgb(2, 122, 197)","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"rgb(0, 62, 130)","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"rgb(3, 44, 94)","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"rgb(179, 211, 233)","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"rgb(220, 234, 244)","comment":"Lighter primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"rgb(0, 153, 74)","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"rgb(224, 255, 239)","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"rgb(228, 98, 22)","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"rgb(242, 133, 16)","comment":"Light warning border color","originalValue":"{!palette-orange-50}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"rgb(255, 236, 216)","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
+    "tokens": [{"type":"color","category":"border-color","value":"rgb(136, 140, 142)","comment":"Default border color","originalValue":"{!palette-gray-60}","name":"color-border"},{"type":"color","category":"border-color","value":"rgb(136, 140, 142)","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"rgb(226, 37, 37)","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"rgb(146, 18, 0)","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"rgb(96, 1, 1)","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"rgb(236, 182, 182)","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"rgb(245, 221, 221)","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"rgb(226, 37, 37)","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"rgb(146, 18, 0)","comment":"Dark error border color","originalValue":"{!palette-red-80}","name":"color-border-error-dark"},{"type":"color","category":"border-color","value":"rgb(222, 88, 88)","comment":"Light error border color","originalValue":"{!palette-red-50}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"rgb(255, 233, 231)","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.5)","comment":"Border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-50}","name":"color-border-inverse"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.2)","comment":"Darker border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-20}","name":"color-border-inverse-darker"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.9)","comment":"Lighter border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-90}","name":"color-border-inverse-lighter"},{"type":"color","category":"border-color","value":"rgb(255, 255, 255)","comment":"Lightest border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-border-inverse-lightest"},{"type":"color","category":"border-color","value":"rgb(200, 204, 207)","comment":"Light border color","originalValue":"{!palette-gray-50}","name":"color-border-light"},{"type":"color","category":"border-color","value":"rgb(228, 231, 233)","comment":"Lighter border color","originalValue":"{!palette-gray-40}","name":"color-border-lighter"},{"type":"color","category":"border-color","value":"rgb(200, 204, 207)","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"rgb(2, 122, 197)","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"rgb(0, 62, 130)","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"rgb(3, 44, 94)","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"rgb(179, 211, 233)","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"rgb(220, 234, 244)","comment":"Lighter primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"rgb(0, 153, 74)","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"rgb(224, 255, 239)","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"rgb(228, 98, 22)","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"rgb(242, 133, 16)","comment":"Light warning border color","originalValue":"{!palette-orange-50}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"rgb(255, 236, 216)","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
   },
@@ -16,3 +16,3 @@ {
     "categoryName": "box-shadows",
-    "tokens": [{"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 #e4e7e9","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 #003e82","comment":"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":"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}px {!palette-blue-60-transparent-80}","name":"shadow-focus"}]
+    "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}px {!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}px {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","category":"box-shadow","value":"0 12px 24px 4px rgba(40, 42, 43, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(40, 42, 43, 0.3)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}]
   },
@@ -53,3 +53,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-80}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 94, 166)","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 62, 130)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 44, 94)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(178, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(236, 182, 182)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(179, 211, 233)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
+    "tokens": [{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-80}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(236, 182, 182)","comment":"Light error text for inputs and error misc","originalValue":"{!palette-red-40}","name":"color-text-error-light"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Default icon color for inverse backgrounds.","originalValue":"{!palette-gray-50}","name":"color-text-icon-inverse"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(136, 140, 142)","comment":"Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weaker"},{"type":"color","category":"text-color","value":"rgb(0, 94, 166)","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 62, 130)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 44, 94)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(178, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(236, 182, 182)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(179, 211, 233)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(109, 46, 209)","comment":"Color for text indicating a new status.","originalValue":"{!palette-purple-60}","name":"color-text-new"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(112, 117, 120)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
   },
@@ -56,0 +56,0 @@ {

dist/themes/console/tokens.ios.json

@@ -6,2 +6,23 @@ {
       "category": "background-color",
+      "value": "rgb(200, 175, 240)",
+      "comment": "User avatar background color",
+      "name": "colorBackgroundUser"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
+      "value": "rgb(199, 255, 226)",
+      "comment": "Trial account background color",
+      "name": "colorBackgroundTrial"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
+      "value": "rgb(255, 241, 179)",
+      "comment": "Subaccount background color",
+      "name": "colorBackgroundSubaccount"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(3, 44, 94)",
@@ -35,2 +56,9 @@ "comment": "Darker background for primary actions or highlights",
       "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.",
+      "name": "colorBackgroundInverseLight"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(228, 98, 22)",
@@ -120,2 +148,9 @@ "comment": "Warning background color",
       "category": "background-color",
+      "value": "rgb(0, 9, 43)",
+      "comment": "Darkest background for primary actions or highlights",
+      "name": "colorBackgroundPrimaryDarkest"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(35, 54, 89)",
@@ -206,3 +241,10 @@ "comment": "Primary brand background, accessible with inverse text",
       "value": "rgb(40, 42, 43)",
-      "comment": "Inverse background color for any container, the darkest gray in the system",
+      "comment": "Inverse background color of the main page body",
+      "name": "colorBackgroundBodyInverse"
+    },
+    {
+      "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.",
       "name": "colorBackgroundInverse"
@@ -241,2 +283,9 @@ },
       "category": "border-color",
+      "value": "rgb(255, 255, 255)",
+      "comment": "Lightest border on inverse backgrounds. Must be used on color-background-body-inverse.",
+      "name": "colorBorderInverseLightest"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(3, 44, 94)",
@@ -312,2 +361,9 @@ "comment": "Darker primary border color",
       "category": "border-color",
+      "value": "rgba(255, 255, 255, 0.9)",
+      "comment": "Lighter border on inverse backgrounds. Must be used on color-background-body-inverse.",
+      "name": "colorBorderInverseLighter"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(224, 255, 239)",
@@ -355,2 +411,9 @@ "comment": "Lightest success border color",
       "category": "border-color",
+      "value": "rgba(255, 255, 255, 0.2)",
+      "comment": "Darker border on inverse backgrounds. Must be used on color-background-body-inverse.",
+      "name": "colorBorderInverseDarker"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(255, 236, 216)",
@@ -384,4 +447,4 @@ "comment": "Lightest warning border color",
       "category": "border-color",
-      "value": "rgb(255, 255, 255)",
-      "comment": "Border on inverse backgrounds",
+      "value": "rgba(255, 255, 255, 0.5)",
+      "comment": "Border on inverse backgrounds. Must be used on color-background-body-inverse.",
       "name": "colorBorderInverse"
@@ -476,5 +539,40 @@ },
       "category": "box-shadow",
+      "value": "0 8px 16px 0 rgba(40, 42, 43, 0.2)",
+      "comment": "Default shadow.",
+      "name": "shadow"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #ffffff",
+      "comment": "Lightest shadow border on interactive elements on inverse backgrounds.",
+      "name": "shadowBorderInverseLightest"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #032c5e",
+      "comment": "Darker shadow border for inputs active.",
+      "name": "shadowBorderPrimaryDarker"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #e4e7e9",
+      "comment": "Light shadow border for disabled inputs.",
+      "name": "shadowBorderLight"
+    },
+    {
+      "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.",
+      "name": "shadowBorderInverseLight"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 2px 4px 0 rgba(40, 42, 43, 0.3)",
-      "comment": "Shadow for cards.",
-      "name": "shadowCard"
+      "comment": "Low elevation default shadow.",
+      "name": "shadowLow"
     },
@@ -485,3 +583,3 @@ {
       "value": "0 0 0 4px rgba(2, 122, 197, 0.8)",
-      "comment": "Shadow for focus ring on interactive elements",
+      "comment": "Shadow for focus ring on interactive elements.",
       "name": "shadowFocus"
@@ -492,5 +590,5 @@ },
       "category": "box-shadow",
-      "value": "0 0 0 1px #e4e7e9",
-      "comment": "Shadow border for disabled inputs.",
-      "name": "shadowBorderLight"
+      "value": "0 0 0 4px rgba(255, 255, 255, 0.4)",
+      "comment": "Shadow for focus ring on interactive elements on inverse backgrounds.",
+      "name": "shadowFocusInverse"
     },
@@ -500,5 +598,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #888c8e",
-      "comment": "Shadow border for inputs.",
-      "name": "shadowBorder"
+      "value": "0 0 0 1px #921200",
+      "comment": "Shadow border for error inputs hover.",
+      "name": "shadowBorderErrorDark"
     },
@@ -508,5 +606,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #003e82",
-      "comment": "Shadow border for inputs hover.",
-      "name": "shadowBorderPrimaryDark"
+      "value": "0 12px 24px 4px rgba(40, 42, 43, 0.2)",
+      "comment": "High elevation default shadow.",
+      "name": "shadowHigh"
     },
@@ -516,5 +614,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #032c5e",
-      "comment": "Shadow border for inputs active.",
-      "name": "shadowBorderPrimaryDarker"
+      "value": "0 0 0 1px #f8f8f9",
+      "comment": "Lighter shadow border for disabled inputs.",
+      "name": "shadowBorderLighter"
     },
@@ -531,7 +629,35 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #921200",
-      "comment": "Shadow border for error inputs hover.",
-      "name": "shadowBorderErrorDark"
+      "value": "0 0 0 1px rgba(255, 255, 255, 0.2)",
+      "comment": "Darker shadow border on interactive elements on inverse backgrounds.",
+      "name": "shadowBorderInverseDarker"
     },
     {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #003e82",
+      "comment": "Dark shadow border for inputs hover.",
+      "name": "shadowBorderPrimaryDark"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #888c8e",
+      "comment": "Shadow border for inputs.",
+      "name": "shadowBorder"
+    },
+    {
+      "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.",
+      "name": "shadowBorderInverse"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 2px 4px 0 rgba(40, 42, 43, 0.3)",
+      "comment": "Shadow for cards.",
+      "name": "shadowCard"
+    },
+    {
       "category": "font",
@@ -1420,4 +1546,11 @@ "type": "font",
       "category": "text-color",
+      "value": "rgb(109, 46, 209)",
+      "comment": "Color for text indicating a new status.",
+      "name": "colorTextNew"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(200, 204, 207)",
-      "comment": "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.",
+      "comment": "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
       "name": "colorTextInverseWeak"
@@ -1484,2 +1617,9 @@ },
       "category": "text-color",
+      "value": "rgb(200, 204, 207)",
+      "comment": "Default icon color for inverse backgrounds.",
+      "name": "colorTextIconInverse"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(0, 62, 130)",
@@ -1513,2 +1653,9 @@ "comment": "Dark shade of link text to be used in interactions",
       "category": "text-color",
+      "value": "rgb(136, 140, 142)",
+      "comment": "Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
+      "name": "colorTextInverseWeaker"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(179, 211, 233)",
@@ -1522,3 +1669,3 @@ "comment": "Light shade of link text to be used in interactions",
       "value": "rgb(255, 255, 255)",
-      "comment": "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.",
+      "comment": "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
       "name": "colorTextInverse"
@@ -1529,5 +1676,5 @@ },
       "category": "text-color",
-      "value": "rgb(200, 204, 207)",
-      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
-      "name": "colorTextWeaker"
+      "value": "rgb(236, 182, 182)",
+      "comment": "Light error text for inputs and error misc",
+      "name": "colorTextErrorLight"
     },
@@ -1537,5 +1684,5 @@ {
       "category": "text-color",
-      "value": "rgb(112, 117, 120)",
-      "comment": "Input placeholder text.",
-      "name": "colorTextPlaceholder"
+      "value": "rgb(200, 204, 207)",
+      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
+      "name": "colorTextWeaker"
     },
@@ -1557,9 +1704,2 @@ {
     {
-      "type": "color",
-      "category": "text-color",
-      "value": "rgb(40, 42, 43)",
-      "comment": "Text color for field labels.",
-      "name": "colorTextLabel"
-    },
-    {
       "type": "z-index",
@@ -1566,0 +1706,0 @@ "category": "z-index",

dist/themes/console/tokens.json

 {
+  "color-background-user": "rgb(200, 175, 240)",
+  "color-background-trial": "rgb(199, 255, 226)",
+  "color-background-subaccount": "rgb(255, 241, 179)",
   "color-background-primary-darker": "rgb(3, 44, 94)",
@@ -6,2 +9,3 @@ "color-background-primary-lighter": "rgb(220, 234, 244)",
   "color-background-destructive-lighter": "rgb(245, 221, 221)",
+  "color-background-inverse-light": "rgba(255, 255, 255, 0.2)",
   "color-background-warning": "rgb(228, 98, 22)",
@@ -19,2 +23,3 @@ "color-background-error-lightest": "rgb(255, 233, 231)",
   "color-background-primary-lightest": "rgb(245, 248, 255)",
+  "color-background-primary-darkest": "rgb(0, 9, 43)",
   "color-background-brand": "rgb(35, 54, 89)",
@@ -32,3 +37,4 @@ "color-background-error": "rgb(226, 37, 37)",
   "color-background-brand-highlight": "rgb(242, 47, 70)",
-  "color-background-inverse": "rgb(40, 42, 43)",
+  "color-background-body-inverse": "rgb(40, 42, 43)",
+  "color-background-inverse": "rgba(255, 255, 255, 0.1)",
   "color-background-overlay": "rgba(40, 42, 43, 0.5)",
@@ -38,2 +44,3 @@ "color-background-darkest": "rgb(112, 117, 120)",
   "color-border-primary-lighter": "rgb(220, 234, 244)",
+  "color-border-inverse-lightest": "rgb(255, 255, 255)",
   "color-border-primary-darker": "rgb(3, 44, 94)",
@@ -49,2 +56,3 @@ "color-border-warning": "rgb(228, 98, 22)",
   "color-border-warning-light": "rgb(242, 133, 16)",
+  "color-border-inverse-lighter": "rgba(255, 255, 255, 0.9)",
   "color-border-success-lightest": "rgb(224, 255, 239)",
@@ -56,2 +64,3 @@ "color-border-error": "rgb(226, 37, 37)",
   "color-border": "rgb(136, 140, 142)",
+  "color-border-inverse-darker": "rgba(255, 255, 255, 0.2)",
   "color-border-warning-lightest": "rgb(255, 236, 216)",
@@ -61,3 +70,3 @@ "color-border-primary-dark": "rgb(0, 62, 130)",
   "color-border-neutral-light": "rgb(200, 204, 207)",
-  "color-border-inverse": "rgb(255, 255, 255)",
+  "color-border-inverse": "rgba(255, 255, 255, 0.5)",
   "color-border-error-light": "rgb(222, 88, 88)",
@@ -75,10 +84,19 @@ "color-border-light": "rgb(200, 204, 207)",
   "border-width-40": "8px",
-  "shadow-card": "0 2px 4px 0 rgba(40, 42, 43, 0.3)",
+  "shadow": "0 8px 16px 0 rgba(40, 42, 43, 0.2)",
+  "shadow-border-inverse-lightest": "0 0 0 1px #ffffff",
+  "shadow-border-primary-darker": "0 0 0 1px #032c5e",
+  "shadow-border-light": "0 0 0 1px #e4e7e9",
+  "shadow-border-inverse-light": "0 0 0 1px rgba(255, 255, 255, 0.9)",
+  "shadow-low": "0 2px 4px 0 rgba(40, 42, 43, 0.3)",
   "shadow-focus": "0 0 0 4px rgba(2, 122, 197, 0.8)",
-  "shadow-border-light": "0 0 0 1px #e4e7e9",
+  "shadow-focus-inverse": "0 0 0 4px rgba(255, 255, 255, 0.4)",
+  "shadow-border-error-dark": "0 0 0 1px #921200",
+  "shadow-high": "0 12px 24px 4px rgba(40, 42, 43, 0.2)",
+  "shadow-border-lighter": "0 0 0 1px #f8f8f9",
+  "shadow-border-error": "0 0 0 1px #e22525",
+  "shadow-border-inverse-darker": "0 0 0 1px rgba(255, 255, 255, 0.2)",
+  "shadow-border-primary-dark": "0 0 0 1px #003e82",
   "shadow-border": "0 0 0 1px #888c8e",
-  "shadow-border-primary-dark": "0 0 0 1px #003e82",
-  "shadow-border-primary-darker": "0 0 0 1px #032c5e",
-  "shadow-border-error": "0 0 0 1px #e22525",
-  "shadow-border-error-dark": "0 0 0 1px #921200",
+  "shadow-border-inverse": "0 0 0 1px rgba(255, 255, 255, 0.5)",
+  "shadow-card": "0 2px 4px 0 rgba(40, 42, 43, 0.3)",
   "font-family-text": "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif",
@@ -216,2 +234,3 @@ "font-family-code": "'Fira Mono', 'Courier New', Courier, monospace",
   "color-text-warning": "rgb(228, 98, 22)",
+  "color-text-new": "rgb(109, 46, 209)",
   "color-text-inverse-weak": "rgb(200, 204, 207)",
@@ -226,2 +245,3 @@ "color-text-link-destructive-darker": "rgb(146, 18, 0)",
   "color-text-error": "rgb(226, 37, 37)",
+  "color-text-icon-inverse": "rgb(200, 204, 207)",
   "color-text-link-dark": "rgb(0, 62, 130)",
@@ -231,9 +251,9 @@ "color-text-brand-inverse": "rgb(255, 255, 255)",
   "color-text-brand-highlight": "rgb(242, 47, 70)",
+  "color-text-inverse-weaker": "rgb(136, 140, 142)",
   "color-text-link-light": "rgb(179, 211, 233)",
   "color-text-inverse": "rgb(255, 255, 255)",
+  "color-text-error-light": "rgb(236, 182, 182)",
   "color-text-weaker": "rgb(200, 204, 207)",
-  "color-text-placeholder": "rgb(112, 117, 120)",
   "color-text-warning-dark": "rgb(168, 62, 0)",
   "color-text-link-destructive-dark": "rgb(178, 6, 0)",
-  "color-text-label": "rgb(40, 42, 43)",
   "z-index-0": "0",
@@ -240,0 +260,0 @@ "z-index-90": "90",

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

@@ -13,3 +13,4 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBody = "rgb(255, 255, 255)";
-export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
+export declare const colorBackgroundBodyInverse = "rgb(18, 28, 45)";
+export declare const colorBackgroundBrand = "rgb(0, 20, 137)";
 export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
@@ -29,2 +30,3 @@ export declare const colorBackgroundDark = "rgb(204, 210, 220)";
 export declare const colorBackgroundInverse = "rgb(8, 21, 44)";
+export declare const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
@@ -35,2 +37,3 @@ export declare const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
 export declare const colorBackgroundPrimaryDarker = "rgb(0, 31, 117)";
+export declare const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
 export declare const colorBackgroundPrimaryLight = "rgb(186, 204, 255)";
@@ -41,4 +44,7 @@ export declare const colorBackgroundPrimaryLighter = "rgb(219, 230, 255)";
 export declare const colorBackgroundRowStriped = "rgb(249, 250, 251)";
+export declare const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 export declare const colorBackgroundSuccess = "rgb(0, 153, 74)";
 export declare const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBackgroundTrial = "rgb(209, 250, 224)";
+export declare const colorBackgroundUser = "rgb(200, 175, 240)";
 export declare const colorBackgroundWarning = "rgb(228, 98, 22)";
@@ -57,3 +63,6 @@ export declare const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
 export declare const colorBorderErrorLightest = "rgb(255, 233, 231)";
-export declare const colorBorderInverse = "rgb(255, 255, 255)";
+export declare const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+export declare const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+export declare const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+export declare const colorBorderInverseLightest = "rgb(255, 255, 255)";
 export declare const colorBorderLight = "rgb(182, 191, 206)";
@@ -90,5 +99,8 @@ export declare const colorBorderLighter = "rgb(204, 210, 220)";
 export declare const colorTextErrorDark = "rgb(148, 8, 0)";
+export declare const colorTextErrorLight = "rgb(245, 138, 138)";
 export declare const colorTextIcon = "rgb(136, 148, 170)";
+export declare const colorTextIconInverse = "rgb(136, 145, 170)";
 export declare const colorTextInverse = "rgb(255, 255, 255)";
 export declare const colorTextInverseWeak = "rgb(156, 167, 186)";
+export declare const colorTextInverseWeaker = "rgb(96, 107, 133)";
 export declare const colorTextLabel = "rgb(8, 21, 44)";
@@ -103,2 +115,3 @@ export declare const colorTextLink = "rgb(0, 58, 219)";
 export declare const colorTextLinkLight = "rgb(133, 165, 255)";
+export declare const colorTextNew = "rgb(109, 46, 209)";
 export declare const colorTextPlaceholder = "rgb(136, 148, 170)";
@@ -139,6 +152,12 @@ export declare const colorTextSuccess = "rgb(0, 153, 74)";
 export declare const lineHeight90 = "2.5rem";
+export declare const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
 export declare const shadowBorder = "0 0 0 1px #8894aa";
 export declare const shadowBorderError = "0 0 0 1px #ac1e16";
 export declare const shadowBorderErrorDark = "0 0 0 1px #940800";
+export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+export declare const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+export declare const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
 export declare const shadowBorderLight = "0 0 0 1px #ccd2dc";
+export declare const shadowBorderLighter = "0 0 0 1px #e1e3ea";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
@@ -148,2 +167,5 @@ export declare const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
 export declare const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
+export declare const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+export declare const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+export declare const shadowLow = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 export declare const size0 = "0";
@@ -249,3 +271,4 @@ export declare const size10 = "5.5rem";
   colorBackgroundBody: "rgb(255, 255, 255)";
-  colorBackgroundBrand: "rgb(35, 54, 89)";
+  colorBackgroundBodyInverse: "rgb(18, 28, 45)";
+  colorBackgroundBrand: "rgb(0, 20, 137)";
   colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
@@ -265,2 +288,3 @@ colorBackgroundDark: "rgb(204, 210, 220)";
   colorBackgroundInverse: "rgb(8, 21, 44)";
+  colorBackgroundInverseLight: "rgba(255, 255, 255, 0.2)";
   colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
@@ -271,2 +295,3 @@ colorBackgroundOverlay: "rgba(8, 21, 44, 0.5)";
   colorBackgroundPrimaryDarker: "rgb(0, 31, 117)";
+  colorBackgroundPrimaryDarkest: "rgb(6, 3, 58)";
   colorBackgroundPrimaryLight: "rgb(186, 204, 255)";
@@ -277,4 +302,7 @@ colorBackgroundPrimaryLighter: "rgb(219, 230, 255)";
   colorBackgroundRowStriped: "rgb(249, 250, 251)";
+  colorBackgroundSubaccount: "rgb(255, 241, 179)";
   colorBackgroundSuccess: "rgb(0, 153, 74)";
   colorBackgroundSuccessLightest: "rgb(224, 255, 239)";
+  colorBackgroundTrial: "rgb(209, 250, 224)";
+  colorBackgroundUser: "rgb(200, 175, 240)";
   colorBackgroundWarning: "rgb(228, 98, 22)";
@@ -295,3 +323,6 @@ colorBackgroundWarningLightest: "rgb(255, 236, 216)";
   colorBorderErrorLightest: "rgb(255, 233, 231)";
-  colorBorderInverse: "rgb(255, 255, 255)";
+  colorBorderInverse: "rgba(255, 255, 255, 0.5)";
+  colorBorderInverseDarker: "rgba(255, 255, 255, 0.2)";
+  colorBorderInverseLighter: "rgba(255, 255, 255, 0.9)";
+  colorBorderInverseLightest: "rgb(255, 255, 255)";
   colorBorderLight: "rgb(182, 191, 206)";
@@ -319,6 +350,12 @@ colorBorderLighter: "rgb(204, 210, 220)";
 export declare const boxShadows: {
+  shadow: "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
   shadowBorder: "0 0 0 1px #8894aa";
   shadowBorderError: "0 0 0 1px #ac1e16";
   shadowBorderErrorDark: "0 0 0 1px #940800";
+  shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
+  shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";
+  shadowBorderInverseLight: "0 0 0 1px rgba(255, 255, 255, 0.9)";
+  shadowBorderInverseLightest: "0 0 0 1px #ffffff";
   shadowBorderLight: "0 0 0 1px #ccd2dc";
+  shadowBorderLighter: "0 0 0 1px #e1e3ea";
   shadowBorderPrimaryDark: "0 0 0 1px #002ca6";
@@ -328,2 +365,5 @@ shadowBorderPrimaryDarker: "0 0 0 1px #001f75";
   shadowFocus: "0 0 0 4px rgba(51, 104, 250, 0.8)";
+  shadowFocusInverse: "0 0 0 4px rgba(255, 255, 255, 0.4)";
+  shadowHigh: "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+  shadowLow: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 };
@@ -486,5 +526,8 @@ export declare const colors: {
   colorTextErrorDark: "rgb(148, 8, 0)";
+  colorTextErrorLight: "rgb(245, 138, 138)";
   colorTextIcon: "rgb(136, 148, 170)";
+  colorTextIconInverse: "rgb(136, 145, 170)";
   colorTextInverse: "rgb(255, 255, 255)";
   colorTextInverseWeak: "rgb(156, 167, 186)";
+  colorTextInverseWeaker: "rgb(96, 107, 133)";
   colorTextLabel: "rgb(8, 21, 44)";
@@ -499,2 +542,3 @@ colorTextLink: "rgb(0, 58, 219)";
   colorTextLinkLight: "rgb(133, 165, 255)";
+  colorTextNew: "rgb(109, 46, 209)";
   colorTextPlaceholder: "rgb(136, 148, 170)";
@@ -501,0 +545,0 @@ colorTextSuccess: "rgb(0, 153, 74)";

dist/themes/sendgrid/tokens.common.js

@@ -13,3 +13,4 @@ const borderRadius0 = "0";
 const colorBackgroundBody = "rgb(255, 255, 255)";
-const colorBackgroundBrand = "rgb(35, 54, 89)";
+const colorBackgroundBodyInverse = "rgb(18, 28, 45)";
+const colorBackgroundBrand = "rgb(0, 20, 137)";
 const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
@@ -29,2 +30,3 @@ const colorBackgroundDark = "rgb(204, 210, 220)";
 const colorBackgroundInverse = "rgb(8, 21, 44)";
+const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
@@ -35,2 +37,3 @@ const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
 const colorBackgroundPrimaryDarker = "rgb(0, 31, 117)";
+const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
 const colorBackgroundPrimaryLight = "rgb(186, 204, 255)";
@@ -41,4 +44,7 @@ const colorBackgroundPrimaryLighter = "rgb(219, 230, 255)";
 const colorBackgroundRowStriped = "rgb(249, 250, 251)";
+const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 const colorBackgroundSuccess = "rgb(0, 153, 74)";
 const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+const colorBackgroundTrial = "rgb(209, 250, 224)";
+const colorBackgroundUser = "rgb(200, 175, 240)";
 const colorBackgroundWarning = "rgb(228, 98, 22)";
@@ -57,3 +63,6 @@ const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
 const colorBorderErrorLightest = "rgb(255, 233, 231)";
-const colorBorderInverse = "rgb(255, 255, 255)";
+const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+const colorBorderInverseLightest = "rgb(255, 255, 255)";
 const colorBorderLight = "rgb(182, 191, 206)";
@@ -90,5 +99,8 @@ const colorBorderLighter = "rgb(204, 210, 220)";
 const colorTextErrorDark = "rgb(148, 8, 0)";
+const colorTextErrorLight = "rgb(245, 138, 138)";
 const colorTextIcon = "rgb(136, 148, 170)";
+const colorTextIconInverse = "rgb(136, 145, 170)";
 const colorTextInverse = "rgb(255, 255, 255)";
 const colorTextInverseWeak = "rgb(156, 167, 186)";
+const colorTextInverseWeaker = "rgb(96, 107, 133)";
 const colorTextLabel = "rgb(8, 21, 44)";
@@ -103,2 +115,3 @@ const colorTextLink = "rgb(0, 58, 219)";
 const colorTextLinkLight = "rgb(133, 165, 255)";
+const colorTextNew = "rgb(109, 46, 209)";
 const colorTextPlaceholder = "rgb(136, 148, 170)";
@@ -139,6 +152,12 @@ const colorTextSuccess = "rgb(0, 153, 74)";
 const lineHeight90 = "2.5rem";
+const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
 const shadowBorder = "0 0 0 1px #8894aa";
 const shadowBorderError = "0 0 0 1px #ac1e16";
 const shadowBorderErrorDark = "0 0 0 1px #940800";
+const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
 const shadowBorderLight = "0 0 0 1px #ccd2dc";
+const shadowBorderLighter = "0 0 0 1px #e1e3ea";
 const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
@@ -148,2 +167,5 @@ const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
 const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
+const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+const shadowLow = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 const size0 = "0";
@@ -260,2 +282,3 @@ const size10 = "5.5rem";
 colorBackgroundBody,
+colorBackgroundBodyInverse,
 colorBackgroundBrand,
@@ -276,2 +299,3 @@ colorBackgroundBrandHighlight,
 colorBackgroundInverse,
+colorBackgroundInverseLight,
 colorBackgroundNeutralLightest,
@@ -282,2 +306,3 @@ colorBackgroundOverlay,
 colorBackgroundPrimaryDarker,
+colorBackgroundPrimaryDarkest,
 colorBackgroundPrimaryLight,
@@ -288,4 +313,7 @@ colorBackgroundPrimaryLighter,
 colorBackgroundRowStriped,
+colorBackgroundSubaccount,
 colorBackgroundSuccess,
 colorBackgroundSuccessLightest,
+colorBackgroundTrial,
+colorBackgroundUser,
 colorBackgroundWarning,
@@ -305,2 +333,5 @@ colorBackgroundWarningLightest,
 colorBorderInverse,
+colorBorderInverseDarker,
+colorBorderInverseLighter,
+colorBorderInverseLightest,
 colorBorderLight,
@@ -337,5 +368,8 @@ colorBorderLighter,
 colorTextErrorDark,
+colorTextErrorLight,
 colorTextIcon,
+colorTextIconInverse,
 colorTextInverse,
 colorTextInverseWeak,
+colorTextInverseWeaker,
 colorTextLabel,
@@ -350,2 +384,3 @@ colorTextLink,
 colorTextLinkLight,
+colorTextNew,
 colorTextPlaceholder,
@@ -386,6 +421,12 @@ colorTextSuccess,
 lineHeight90,
+shadow,
 shadowBorder,
 shadowBorderError,
 shadowBorderErrorDark,
+shadowBorderInverse,
+shadowBorderInverseDarker,
+shadowBorderInverseLight,
+shadowBorderInverseLightest,
 shadowBorderLight,
+shadowBorderLighter,
 shadowBorderPrimaryDark,
@@ -395,2 +436,5 @@ shadowBorderPrimaryDarker,
 shadowFocus,
+shadowFocusInverse,
+shadowHigh,
+shadowLow,
 size0,
@@ -496,2 +540,3 @@ size10,
 colorBackgroundBody,
+colorBackgroundBodyInverse,
 colorBackgroundBrand,
@@ -512,2 +557,3 @@ colorBackgroundBrandHighlight,
 colorBackgroundInverse,
+colorBackgroundInverseLight,
 colorBackgroundNeutralLightest,
@@ -518,2 +564,3 @@ colorBackgroundOverlay,
 colorBackgroundPrimaryDarker,
+colorBackgroundPrimaryDarkest,
 colorBackgroundPrimaryLight,
@@ -524,4 +571,7 @@ colorBackgroundPrimaryLighter,
 colorBackgroundRowStriped,
+colorBackgroundSubaccount,
 colorBackgroundSuccess,
 colorBackgroundSuccessLightest,
+colorBackgroundTrial,
+colorBackgroundUser,
 colorBackgroundWarning,
@@ -543,2 +593,5 @@ colorBackgroundWarningLightest,
 colorBorderInverse,
+colorBorderInverseDarker,
+colorBorderInverseLighter,
+colorBorderInverseLightest,
 colorBorderLight,
@@ -566,6 +619,12 @@ colorBorderLighter,
 boxShadows: {
+shadow,
 shadowBorder,
 shadowBorderError,
 shadowBorderErrorDark,
+shadowBorderInverse,
+shadowBorderInverseDarker,
+shadowBorderInverseLight,
+shadowBorderInverseLightest,
 shadowBorderLight,
+shadowBorderLighter,
 shadowBorderPrimaryDark,
@@ -575,2 +634,5 @@ shadowBorderPrimaryDarker,
 shadowFocus,
+shadowFocusInverse,
+shadowHigh,
+shadowLow,
 },
@@ -733,5 +795,8 @@ colors: {
 colorTextErrorDark,
+colorTextErrorLight,
 colorTextIcon,
+colorTextIconInverse,
 colorTextInverse,
 colorTextInverseWeak,
+colorTextInverseWeaker,
 colorTextLabel,
@@ -746,2 +811,3 @@ colorTextLink,
 colorTextLinkLight,
+colorTextNew,
 colorTextPlaceholder,
@@ -748,0 +814,0 @@ colorTextSuccess,

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

@@ -13,3 +13,4 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBody = "rgb(255, 255, 255)";
-export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
+export declare const colorBackgroundBodyInverse = "rgb(18, 28, 45)";
+export declare const colorBackgroundBrand = "rgb(0, 20, 137)";
 export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
@@ -29,2 +30,3 @@ export declare const colorBackgroundDark = "rgb(204, 210, 220)";
 export declare const colorBackgroundInverse = "rgb(8, 21, 44)";
+export declare const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
@@ -35,2 +37,3 @@ export declare const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
 export declare const colorBackgroundPrimaryDarker = "rgb(0, 31, 117)";
+export declare const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
 export declare const colorBackgroundPrimaryLight = "rgb(186, 204, 255)";
@@ -41,4 +44,7 @@ export declare const colorBackgroundPrimaryLighter = "rgb(219, 230, 255)";
 export declare const colorBackgroundRowStriped = "rgb(249, 250, 251)";
+export declare const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 export declare const colorBackgroundSuccess = "rgb(0, 153, 74)";
 export declare const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBackgroundTrial = "rgb(209, 250, 224)";
+export declare const colorBackgroundUser = "rgb(200, 175, 240)";
 export declare const colorBackgroundWarning = "rgb(228, 98, 22)";
@@ -57,3 +63,6 @@ export declare const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
 export declare const colorBorderErrorLightest = "rgb(255, 233, 231)";
-export declare const colorBorderInverse = "rgb(255, 255, 255)";
+export declare const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+export declare const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+export declare const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+export declare const colorBorderInverseLightest = "rgb(255, 255, 255)";
 export declare const colorBorderLight = "rgb(182, 191, 206)";
@@ -90,5 +99,8 @@ export declare const colorBorderLighter = "rgb(204, 210, 220)";
 export declare const colorTextErrorDark = "rgb(148, 8, 0)";
+export declare const colorTextErrorLight = "rgb(245, 138, 138)";
 export declare const colorTextIcon = "rgb(136, 148, 170)";
+export declare const colorTextIconInverse = "rgb(136, 145, 170)";
 export declare const colorTextInverse = "rgb(255, 255, 255)";
 export declare const colorTextInverseWeak = "rgb(156, 167, 186)";
+export declare const colorTextInverseWeaker = "rgb(96, 107, 133)";
 export declare const colorTextLabel = "rgb(8, 21, 44)";
@@ -103,2 +115,3 @@ export declare const colorTextLink = "rgb(0, 58, 219)";
 export declare const colorTextLinkLight = "rgb(133, 165, 255)";
+export declare const colorTextNew = "rgb(109, 46, 209)";
 export declare const colorTextPlaceholder = "rgb(136, 148, 170)";
@@ -139,6 +152,12 @@ export declare const colorTextSuccess = "rgb(0, 153, 74)";
 export declare const lineHeight90 = "2.5rem";
+export declare const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
 export declare const shadowBorder = "0 0 0 1px #8894aa";
 export declare const shadowBorderError = "0 0 0 1px #ac1e16";
 export declare const shadowBorderErrorDark = "0 0 0 1px #940800";
+export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+export declare const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+export declare const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
 export declare const shadowBorderLight = "0 0 0 1px #ccd2dc";
+export declare const shadowBorderLighter = "0 0 0 1px #e1e3ea";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
@@ -148,2 +167,5 @@ export declare const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
 export declare const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
+export declare const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+export declare const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+export declare const shadowLow = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 export declare const size0 = "0";
@@ -249,3 +271,4 @@ export declare const size10 = "5.5rem";
   colorBackgroundBody: "rgb(255, 255, 255)";
-  colorBackgroundBrand: "rgb(35, 54, 89)";
+  colorBackgroundBodyInverse: "rgb(18, 28, 45)";
+  colorBackgroundBrand: "rgb(0, 20, 137)";
   colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
@@ -265,2 +288,3 @@ colorBackgroundDark: "rgb(204, 210, 220)";
   colorBackgroundInverse: "rgb(8, 21, 44)";
+  colorBackgroundInverseLight: "rgba(255, 255, 255, 0.2)";
   colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
@@ -271,2 +295,3 @@ colorBackgroundOverlay: "rgba(8, 21, 44, 0.5)";
   colorBackgroundPrimaryDarker: "rgb(0, 31, 117)";
+  colorBackgroundPrimaryDarkest: "rgb(6, 3, 58)";
   colorBackgroundPrimaryLight: "rgb(186, 204, 255)";
@@ -277,4 +302,7 @@ colorBackgroundPrimaryLighter: "rgb(219, 230, 255)";
   colorBackgroundRowStriped: "rgb(249, 250, 251)";
+  colorBackgroundSubaccount: "rgb(255, 241, 179)";
   colorBackgroundSuccess: "rgb(0, 153, 74)";
   colorBackgroundSuccessLightest: "rgb(224, 255, 239)";
+  colorBackgroundTrial: "rgb(209, 250, 224)";
+  colorBackgroundUser: "rgb(200, 175, 240)";
   colorBackgroundWarning: "rgb(228, 98, 22)";
@@ -295,3 +323,6 @@ colorBackgroundWarningLightest: "rgb(255, 236, 216)";
   colorBorderErrorLightest: "rgb(255, 233, 231)";
-  colorBorderInverse: "rgb(255, 255, 255)";
+  colorBorderInverse: "rgba(255, 255, 255, 0.5)";
+  colorBorderInverseDarker: "rgba(255, 255, 255, 0.2)";
+  colorBorderInverseLighter: "rgba(255, 255, 255, 0.9)";
+  colorBorderInverseLightest: "rgb(255, 255, 255)";
   colorBorderLight: "rgb(182, 191, 206)";
@@ -319,6 +350,12 @@ colorBorderLighter: "rgb(204, 210, 220)";
 export declare const boxShadows: {
+  shadow: "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
   shadowBorder: "0 0 0 1px #8894aa";
   shadowBorderError: "0 0 0 1px #ac1e16";
   shadowBorderErrorDark: "0 0 0 1px #940800";
+  shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
+  shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";
+  shadowBorderInverseLight: "0 0 0 1px rgba(255, 255, 255, 0.9)";
+  shadowBorderInverseLightest: "0 0 0 1px #ffffff";
   shadowBorderLight: "0 0 0 1px #ccd2dc";
+  shadowBorderLighter: "0 0 0 1px #e1e3ea";
   shadowBorderPrimaryDark: "0 0 0 1px #002ca6";
@@ -328,2 +365,5 @@ shadowBorderPrimaryDarker: "0 0 0 1px #001f75";
   shadowFocus: "0 0 0 4px rgba(51, 104, 250, 0.8)";
+  shadowFocusInverse: "0 0 0 4px rgba(255, 255, 255, 0.4)";
+  shadowHigh: "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+  shadowLow: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 };
@@ -486,5 +526,8 @@ export declare const colors: {
   colorTextErrorDark: "rgb(148, 8, 0)";
+  colorTextErrorLight: "rgb(245, 138, 138)";
   colorTextIcon: "rgb(136, 148, 170)";
+  colorTextIconInverse: "rgb(136, 145, 170)";
   colorTextInverse: "rgb(255, 255, 255)";
   colorTextInverseWeak: "rgb(156, 167, 186)";
+  colorTextInverseWeaker: "rgb(96, 107, 133)";
   colorTextLabel: "rgb(8, 21, 44)";
@@ -499,2 +542,3 @@ colorTextLink: "rgb(0, 58, 219)";
   colorTextLinkLight: "rgb(133, 165, 255)";
+  colorTextNew: "rgb(109, 46, 209)";
   colorTextPlaceholder: "rgb(136, 148, 170)";
@@ -501,0 +545,0 @@ colorTextSuccess: "rgb(0, 153, 74)";

dist/themes/sendgrid/tokens.es6.js

@@ -13,3 +13,4 @@ export const borderRadius0 = "0";
 export const colorBackgroundBody = "rgb(255, 255, 255)";
-export const colorBackgroundBrand = "rgb(35, 54, 89)";
+export const colorBackgroundBodyInverse = "rgb(18, 28, 45)";
+export const colorBackgroundBrand = "rgb(0, 20, 137)";
 export const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
@@ -29,2 +30,3 @@ export const colorBackgroundDark = "rgb(204, 210, 220)";
 export const colorBackgroundInverse = "rgb(8, 21, 44)";
+export const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 export const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
@@ -35,2 +37,3 @@ export const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
 export const colorBackgroundPrimaryDarker = "rgb(0, 31, 117)";
+export const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
 export const colorBackgroundPrimaryLight = "rgb(186, 204, 255)";
@@ -41,4 +44,7 @@ export const colorBackgroundPrimaryLighter = "rgb(219, 230, 255)";
 export const colorBackgroundRowStriped = "rgb(249, 250, 251)";
+export const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 export const colorBackgroundSuccess = "rgb(0, 153, 74)";
 export const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export const colorBackgroundTrial = "rgb(209, 250, 224)";
+export const colorBackgroundUser = "rgb(200, 175, 240)";
 export const colorBackgroundWarning = "rgb(228, 98, 22)";
@@ -57,3 +63,6 @@ export const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
 export const colorBorderErrorLightest = "rgb(255, 233, 231)";
-export const colorBorderInverse = "rgb(255, 255, 255)";
+export const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+export const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+export const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+export const colorBorderInverseLightest = "rgb(255, 255, 255)";
 export const colorBorderLight = "rgb(182, 191, 206)";
@@ -90,5 +99,8 @@ export const colorBorderLighter = "rgb(204, 210, 220)";
 export const colorTextErrorDark = "rgb(148, 8, 0)";
+export const colorTextErrorLight = "rgb(245, 138, 138)";
 export const colorTextIcon = "rgb(136, 148, 170)";
+export const colorTextIconInverse = "rgb(136, 145, 170)";
 export const colorTextInverse = "rgb(255, 255, 255)";
 export const colorTextInverseWeak = "rgb(156, 167, 186)";
+export const colorTextInverseWeaker = "rgb(96, 107, 133)";
 export const colorTextLabel = "rgb(8, 21, 44)";
@@ -103,2 +115,3 @@ export const colorTextLink = "rgb(0, 58, 219)";
 export const colorTextLinkLight = "rgb(133, 165, 255)";
+export const colorTextNew = "rgb(109, 46, 209)";
 export const colorTextPlaceholder = "rgb(136, 148, 170)";
@@ -139,6 +152,12 @@ export const colorTextSuccess = "rgb(0, 153, 74)";
 export const lineHeight90 = "2.5rem";
+export const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
 export const shadowBorder = "0 0 0 1px #8894aa";
 export const shadowBorderError = "0 0 0 1px #ac1e16";
 export const shadowBorderErrorDark = "0 0 0 1px #940800";
+export const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+export const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+export const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+export const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
 export const shadowBorderLight = "0 0 0 1px #ccd2dc";
+export const shadowBorderLighter = "0 0 0 1px #e1e3ea";
 export const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
@@ -148,2 +167,5 @@ export const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
 export const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
+export const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+export const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+export const shadowLow = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 export const size0 = "0";
@@ -249,2 +271,3 @@ export const size10 = "5.5rem";
 colorBackgroundBody,
+colorBackgroundBodyInverse,
 colorBackgroundBrand,
@@ -265,2 +288,3 @@ colorBackgroundBrandHighlight,
 colorBackgroundInverse,
+colorBackgroundInverseLight,
 colorBackgroundNeutralLightest,
@@ -271,2 +295,3 @@ colorBackgroundOverlay,
 colorBackgroundPrimaryDarker,
+colorBackgroundPrimaryDarkest,
 colorBackgroundPrimaryLight,
@@ -277,4 +302,7 @@ colorBackgroundPrimaryLighter,
 colorBackgroundRowStriped,
+colorBackgroundSubaccount,
 colorBackgroundSuccess,
 colorBackgroundSuccessLightest,
+colorBackgroundTrial,
+colorBackgroundUser,
 colorBackgroundWarning,
@@ -296,2 +324,5 @@ colorBackgroundWarningLightest,
 colorBorderInverse,
+colorBorderInverseDarker,
+colorBorderInverseLighter,
+colorBorderInverseLightest,
 colorBorderLight,
@@ -319,6 +350,12 @@ colorBorderLighter,
 export const boxShadows = {
+shadow,
 shadowBorder,
 shadowBorderError,
 shadowBorderErrorDark,
+shadowBorderInverse,
+shadowBorderInverseDarker,
+shadowBorderInverseLight,
+shadowBorderInverseLightest,
 shadowBorderLight,
+shadowBorderLighter,
 shadowBorderPrimaryDark,
@@ -328,2 +365,5 @@ shadowBorderPrimaryDarker,
 shadowFocus,
+shadowFocusInverse,
+shadowHigh,
+shadowLow,
 };
@@ -486,5 +526,8 @@ export const colors = {
 colorTextErrorDark,
+colorTextErrorLight,
 colorTextIcon,
+colorTextIconInverse,
 colorTextInverse,
 colorTextInverseWeak,
+colorTextInverseWeaker,
 colorTextLabel,
@@ -499,2 +542,3 @@ colorTextLink,
 colorTextLinkLight,
+colorTextNew,
 colorTextPlaceholder,
@@ -501,0 +545,0 @@ colorTextSuccess,

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(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(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":"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(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(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(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":"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"}]
   },
 {
     "categoryName": "border-colors",
-    "tokens": [{"type":"color","category":"border-color","value":"rgb(136, 148, 170)","comment":"Default border color","originalValue":"{!palette-gray-70}","name":"color-border"},{"type":"color","category":"border-color","value":"rgb(156, 167, 186)","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"rgb(206, 36, 26)","comment":"Destructive border color","originalValue":"{!palette-red-50}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"rgb(112, 6, 0)","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"rgb(71, 5, 0)","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"rgb(255, 140, 133)","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"rgb(255, 185, 179)","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"rgb(172, 30, 22)","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"rgb(148, 8, 0)","comment":"Dark error border color","originalValue":"{!palette-red-70}","name":"color-border-error-dark"},{"type":"color","category":"border-color","value":"rgb(232, 83, 74)","comment":"Light error border color","originalValue":"{!palette-red-40}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"rgb(255, 233, 231)","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"rgb(255, 255, 255)","comment":"Border on inverse backgrounds","originalValue":"{!palette-gray-0}","name":"color-border-inverse"},{"type":"color","category":"border-color","value":"rgb(182, 191, 206)","comment":"Light border color","originalValue":"{!palette-gray-50}","name":"color-border-light"},{"type":"color","category":"border-color","value":"rgb(204, 210, 220)","comment":"Lighter border color","originalValue":"{!palette-gray-40}","name":"color-border-lighter"},{"type":"color","category":"border-color","value":"rgb(182, 191, 206)","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"rgb(51, 104, 250)","comment":"Primary border color","originalValue":"{!palette-blue-50}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"rgb(0, 44, 166)","comment":"Dark primary border color","originalValue":"{!palette-blue-70}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"rgb(0, 31, 117)","comment":"Darker primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"rgb(186, 204, 255)","comment":"Light primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"rgb(219, 230, 255)","comment":"Lighter primary border color","originalValue":"{!palette-blue-20}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"rgb(0, 153, 74)","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"rgb(224, 255, 239)","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"rgb(228, 98, 22)","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"rgb(250, 156, 102)","comment":"Light warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"rgb(255, 236, 216)","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
+    "tokens": [{"type":"color","category":"border-color","value":"rgb(136, 148, 170)","comment":"Default border color","originalValue":"{!palette-gray-70}","name":"color-border"},{"type":"color","category":"border-color","value":"rgb(156, 167, 186)","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"rgb(206, 36, 26)","comment":"Destructive border color","originalValue":"{!palette-red-50}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"rgb(112, 6, 0)","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"rgb(71, 5, 0)","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"rgb(255, 140, 133)","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"rgb(255, 185, 179)","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"rgb(172, 30, 22)","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"rgb(148, 8, 0)","comment":"Dark error border color","originalValue":"{!palette-red-70}","name":"color-border-error-dark"},{"type":"color","category":"border-color","value":"rgb(232, 83, 74)","comment":"Light error border color","originalValue":"{!palette-red-40}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"rgb(255, 233, 231)","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.5)","comment":"Border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-50}","name":"color-border-inverse"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.2)","comment":"Darker border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-20}","name":"color-border-inverse-darker"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.9)","comment":"Lighter border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-90}","name":"color-border-inverse-lighter"},{"type":"color","category":"border-color","value":"rgb(255, 255, 255)","comment":"Lightest border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-border-inverse-lightest"},{"type":"color","category":"border-color","value":"rgb(182, 191, 206)","comment":"Light border color","originalValue":"{!palette-gray-50}","name":"color-border-light"},{"type":"color","category":"border-color","value":"rgb(204, 210, 220)","comment":"Lighter border color","originalValue":"{!palette-gray-40}","name":"color-border-lighter"},{"type":"color","category":"border-color","value":"rgb(182, 191, 206)","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"rgb(51, 104, 250)","comment":"Primary border color","originalValue":"{!palette-blue-50}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"rgb(0, 44, 166)","comment":"Dark primary border color","originalValue":"{!palette-blue-70}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"rgb(0, 31, 117)","comment":"Darker primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"rgb(186, 204, 255)","comment":"Light primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"rgb(219, 230, 255)","comment":"Lighter primary border color","originalValue":"{!palette-blue-20}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"rgb(0, 153, 74)","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"rgb(224, 255, 239)","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"rgb(228, 98, 22)","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"rgb(250, 156, 102)","comment":"Light warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"rgb(255, 236, 216)","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
   },
@@ -16,3 +16,3 @@ {
     "categoryName": "box-shadows",
-    "tokens": [{"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 #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 #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}px {!palette-blue-50-transparent-80}","name":"shadow-focus"}]
+    "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}px {!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}px {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","category":"box-shadow","value":"0 16px 24px 0 rgba(18, 28, 45, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","category":"box-shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}]
   },
@@ -53,3 +53,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(172, 30, 22)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(148, 8, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(136, 148, 170)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(156, 167, 186)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 58, 219)","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 44, 166)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-70}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(0, 31, 117)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(206, 36, 26)","comment":"Destructive link text","originalValue":"{!palette-red-50}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(112, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(71, 5, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-90}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(232, 83, 74)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(133, 165, 255)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(136, 148, 170)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(71, 86, 114)","comment":"Weak body text for visual hierarchy. Must pass AA color contrast with color-background.","originalValue":"{!palette-gray-80}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(182, 191, 206)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
+    "tokens": [{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(172, 30, 22)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(148, 8, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(245, 138, 138)","comment":"Light error text for inputs and error misc","originalValue":"{!palette-red-40}","name":"color-text-error-light"},{"type":"color","category":"text-color","value":"rgb(136, 148, 170)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(136, 145, 170)","comment":"Default icon color for inverse backgrounds.","originalValue":"{!palette-gray-50}","name":"color-text-icon-inverse"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(156, 167, 186)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weaker"},{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 58, 219)","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 44, 166)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-70}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(0, 31, 117)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(206, 36, 26)","comment":"Destructive link text","originalValue":"{!palette-red-50}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(112, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(71, 5, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-90}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(232, 83, 74)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(133, 165, 255)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(109, 46, 209)","comment":"Color for text indicating a new status.","originalValue":"{!palette-purple-60}","name":"color-text-new"},{"type":"color","category":"text-color","value":"rgb(136, 148, 170)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(71, 86, 114)","comment":"Weak body text for visual hierarchy. Must pass AA color contrast with color-background.","originalValue":"{!palette-gray-80}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(182, 191, 206)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
   },
@@ -56,0 +56,0 @@ {

dist/themes/sendgrid/tokens.ios.json

@@ -6,2 +6,23 @@ {
       "category": "background-color",
+      "value": "rgb(200, 175, 240)",
+      "comment": "User avatar background color",
+      "name": "colorBackgroundUser"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
+      "value": "rgb(209, 250, 224)",
+      "comment": "Trial account background color",
+      "name": "colorBackgroundTrial"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
+      "value": "rgb(255, 241, 179)",
+      "comment": "Subaccount background color",
+      "name": "colorBackgroundSubaccount"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(0, 31, 117)",
@@ -35,2 +56,9 @@ "comment": "Darker background for primary actions or highlights",
       "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.",
+      "name": "colorBackgroundInverseLight"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(228, 98, 22)",
@@ -120,3 +148,10 @@ "comment": "Warning background color",
       "category": "background-color",
-      "value": "rgb(35, 54, 89)",
+      "value": "rgb(6, 3, 58)",
+      "comment": "Darkest background for primary actions or highlights",
+      "name": "colorBackgroundPrimaryDarkest"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
+      "value": "rgb(0, 20, 137)",
       "comment": "Primary brand background, accessible with inverse text",
@@ -205,2 +240,9 @@ "name": "colorBackgroundBrand"
       "category": "background-color",
+      "value": "rgb(18, 28, 45)",
+      "comment": "Inverse background color of the main page body, the darkest gray in the system",
+      "name": "colorBackgroundBodyInverse"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(8, 21, 44)",
@@ -241,2 +283,9 @@ "comment": "Inverse background color for any container, the darkest gray in the system",
       "category": "border-color",
+      "value": "rgb(255, 255, 255)",
+      "comment": "Lightest border on inverse backgrounds. Must be used on color-background-body-inverse.",
+      "name": "colorBorderInverseLightest"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(0, 31, 117)",
@@ -312,2 +361,9 @@ "comment": "Darker primary border color",
       "category": "border-color",
+      "value": "rgba(255, 255, 255, 0.9)",
+      "comment": "Lighter border on inverse backgrounds. Must be used on color-background-body-inverse.",
+      "name": "colorBorderInverseLighter"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(224, 255, 239)",
@@ -355,2 +411,9 @@ "comment": "Lightest success border color",
       "category": "border-color",
+      "value": "rgba(255, 255, 255, 0.2)",
+      "comment": "Darker border on inverse backgrounds. Must be used on color-background-body-inverse.",
+      "name": "colorBorderInverseDarker"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(255, 236, 216)",
@@ -384,4 +447,4 @@ "comment": "Lightest warning border color",
       "category": "border-color",
-      "value": "rgb(255, 255, 255)",
-      "comment": "Border on inverse backgrounds",
+      "value": "rgba(255, 255, 255, 0.5)",
+      "comment": "Border on inverse backgrounds. Must be used on color-background-body-inverse.",
       "name": "colorBorderInverse"
@@ -476,5 +539,5 @@ },
       "category": "box-shadow",
-      "value": "0 2px 4px 0 rgba(8, 21, 44, 0.3)",
-      "comment": "Shadow for cards.",
-      "name": "shadowCard"
+      "value": "0 4px 16px 0 rgba(18, 28, 45, 0.2)",
+      "comment": "Default shadow.",
+      "name": "shadow"
     },
@@ -484,5 +547,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 4px rgba(51, 104, 250, 0.8)",
-      "comment": "Shadow for focus ring on interactive elements",
-      "name": "shadowFocus"
+      "value": "0 0 0 1px #ffffff",
+      "comment": "Lightest shadow border on interactive elements on inverse backgrounds.",
+      "name": "shadowBorderInverseLightest"
     },
@@ -492,2 +555,9 @@ {
       "category": "box-shadow",
+      "value": "0 0 0 1px #001f75",
+      "comment": "Shadow border for inputs active.",
+      "name": "shadowBorderPrimaryDarker"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
       "value": "0 0 0 1px #ccd2dc",
@@ -500,5 +570,5 @@ "comment": "Shadow border for disabled inputs.",
       "category": "box-shadow",
-      "value": "0 0 0 1px #8894aa",
-      "comment": "Shadow border for inputs.",
-      "name": "shadowBorder"
+      "value": "0 0 0 1px rgba(255, 255, 255, 0.9)",
+      "comment": "Light shadow border on interactive elements on inverse backgrounds.",
+      "name": "shadowBorderInverseLight"
     },
@@ -508,5 +578,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #002ca6",
-      "comment": "Shadow border for inputs hover.",
-      "name": "shadowBorderPrimaryDark"
+      "value": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
+      "comment": "Low elevation default shadow.",
+      "name": "shadowLow"
     },
@@ -516,5 +586,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #001f75",
-      "comment": "Shadow border for inputs active.",
-      "name": "shadowBorderPrimaryDarker"
+      "value": "0 0 0 4px rgba(51, 104, 250, 0.8)",
+      "comment": "Shadow for focus ring on interactive elements",
+      "name": "shadowFocus"
     },
@@ -524,5 +594,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #ac1e16",
-      "comment": "Shadow border for error inputs.",
-      "name": "shadowBorderError"
+      "value": "0 0 0 4px rgba(255, 255, 255, 0.4)",
+      "comment": "Shadow for focus ring on interactive elements on inverse backgrounds.",
+      "name": "shadowFocusInverse"
     },
@@ -537,2 +607,58 @@ {
     {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 16px 24px 0 rgba(18, 28, 45, 0.2)",
+      "comment": "High elevation default shadow.",
+      "name": "shadowHigh"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #e1e3ea",
+      "comment": "Lighter shadow border for disabled inputs.",
+      "name": "shadowBorderLighter"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #ac1e16",
+      "comment": "Shadow border for error inputs.",
+      "name": "shadowBorderError"
+    },
+    {
+      "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.",
+      "name": "shadowBorderInverseDarker"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #002ca6",
+      "comment": "Shadow border for inputs hover.",
+      "name": "shadowBorderPrimaryDark"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #8894aa",
+      "comment": "Shadow border for inputs.",
+      "name": "shadowBorder"
+    },
+    {
+      "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.",
+      "name": "shadowBorderInverse"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 2px 4px 0 rgba(8, 21, 44, 0.3)",
+      "comment": "Shadow for cards.",
+      "name": "shadowCard"
+    },
+    {
       "category": "font",
@@ -1421,2 +1547,9 @@ "type": "font",
       "category": "text-color",
+      "value": "rgb(109, 46, 209)",
+      "comment": "Color for text indicating a new status.",
+      "name": "colorTextNew"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(156, 167, 186)",
@@ -1485,2 +1618,9 @@ "comment": "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.",
       "category": "text-color",
+      "value": "rgb(136, 145, 170)",
+      "comment": "Default icon color for inverse backgrounds.",
+      "name": "colorTextIconInverse"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(0, 44, 166)",
@@ -1514,2 +1654,9 @@ "comment": "Dark shade of link text to be used in interactions",
       "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.",
+      "name": "colorTextInverseWeaker"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(133, 165, 255)",
@@ -1529,5 +1676,5 @@ "comment": "Light shade of link text to be used in interactions",
       "category": "text-color",
-      "value": "rgb(182, 191, 206)",
-      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
-      "name": "colorTextWeaker"
+      "value": "rgb(245, 138, 138)",
+      "comment": "Light error text for inputs and error misc",
+      "name": "colorTextErrorLight"
     },
@@ -1537,5 +1684,5 @@ {
       "category": "text-color",
-      "value": "rgb(136, 148, 170)",
-      "comment": "Input placeholder text.",
-      "name": "colorTextPlaceholder"
+      "value": "rgb(182, 191, 206)",
+      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
+      "name": "colorTextWeaker"
     },
@@ -1559,2 +1706,9 @@ {
       "category": "text-color",
+      "value": "rgb(136, 148, 170)",
+      "comment": "Input placeholder text.",
+      "name": "colorTextPlaceholder"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(8, 21, 44)",
@@ -1561,0 +1715,0 @@ "comment": "Text color for field labels.",

dist/themes/sendgrid/tokens.json

 {
+  "color-background-user": "rgb(200, 175, 240)",
+  "color-background-trial": "rgb(209, 250, 224)",
+  "color-background-subaccount": "rgb(255, 241, 179)",
   "color-background-primary-darker": "rgb(0, 31, 117)",
@@ -6,2 +9,3 @@ "color-background-primary-lighter": "rgb(219, 230, 255)",
   "color-background-destructive-lighter": "rgb(255, 185, 179)",
+  "color-background-inverse-light": "rgba(255, 255, 255, 0.2)",
   "color-background-warning": "rgb(228, 98, 22)",
@@ -19,3 +23,4 @@ "color-background-error-lightest": "rgb(255, 233, 231)",
   "color-background-primary-lightest": "rgb(245, 248, 255)",
-  "color-background-brand": "rgb(35, 54, 89)",
+  "color-background-primary-darkest": "rgb(6, 3, 58)",
+  "color-background-brand": "rgb(0, 20, 137)",
   "color-background-error": "rgb(172, 30, 22)",
@@ -32,2 +37,3 @@ "color-background-required": "rgb(232, 83, 74)",
   "color-background-brand-highlight": "rgb(242, 47, 70)",
+  "color-background-body-inverse": "rgb(18, 28, 45)",
   "color-background-inverse": "rgb(8, 21, 44)",
@@ -38,2 +44,3 @@ "color-background-overlay": "rgba(8, 21, 44, 0.5)",
   "color-border-primary-lighter": "rgb(219, 230, 255)",
+  "color-border-inverse-lightest": "rgb(255, 255, 255)",
   "color-border-primary-darker": "rgb(0, 31, 117)",
@@ -49,2 +56,3 @@ "color-border-warning": "rgb(228, 98, 22)",
   "color-border-warning-light": "rgb(250, 156, 102)",
+  "color-border-inverse-lighter": "rgba(255, 255, 255, 0.9)",
   "color-border-success-lightest": "rgb(224, 255, 239)",
@@ -56,2 +64,3 @@ "color-border-error": "rgb(172, 30, 22)",
   "color-border": "rgb(136, 148, 170)",
+  "color-border-inverse-darker": "rgba(255, 255, 255, 0.2)",
   "color-border-warning-lightest": "rgb(255, 236, 216)",
@@ -61,3 +70,3 @@ "color-border-primary-dark": "rgb(0, 44, 166)",
   "color-border-neutral-light": "rgb(182, 191, 206)",
-  "color-border-inverse": "rgb(255, 255, 255)",
+  "color-border-inverse": "rgba(255, 255, 255, 0.5)",
   "color-border-error-light": "rgb(232, 83, 74)",
@@ -75,10 +84,19 @@ "color-border-light": "rgb(182, 191, 206)",
   "border-width-40": "8px",
-  "shadow-card": "0 2px 4px 0 rgba(8, 21, 44, 0.3)",
+  "shadow": "0 4px 16px 0 rgba(18, 28, 45, 0.2)",
+  "shadow-border-inverse-lightest": "0 0 0 1px #ffffff",
+  "shadow-border-primary-darker": "0 0 0 1px #001f75",
+  "shadow-border-light": "0 0 0 1px #ccd2dc",
+  "shadow-border-inverse-light": "0 0 0 1px rgba(255, 255, 255, 0.9)",
+  "shadow-low": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
   "shadow-focus": "0 0 0 4px rgba(51, 104, 250, 0.8)",
-  "shadow-border-light": "0 0 0 1px #ccd2dc",
+  "shadow-focus-inverse": "0 0 0 4px rgba(255, 255, 255, 0.4)",
+  "shadow-border-error-dark": "0 0 0 1px #940800",
+  "shadow-high": "0 16px 24px 0 rgba(18, 28, 45, 0.2)",
+  "shadow-border-lighter": "0 0 0 1px #e1e3ea",
+  "shadow-border-error": "0 0 0 1px #ac1e16",
+  "shadow-border-inverse-darker": "0 0 0 1px rgba(255, 255, 255, 0.2)",
+  "shadow-border-primary-dark": "0 0 0 1px #002ca6",
   "shadow-border": "0 0 0 1px #8894aa",
-  "shadow-border-primary-dark": "0 0 0 1px #002ca6",
-  "shadow-border-primary-darker": "0 0 0 1px #001f75",
-  "shadow-border-error": "0 0 0 1px #ac1e16",
-  "shadow-border-error-dark": "0 0 0 1px #940800",
+  "shadow-border-inverse": "0 0 0 1px rgba(255, 255, 255, 0.5)",
+  "shadow-card": "0 2px 4px 0 rgba(8, 21, 44, 0.3)",
   "font-family-text": "'Colfax', Helvetica, Arial, sans-serif",
@@ -216,2 +234,3 @@ "font-family-code": "'Fira Mono', 'Courier New', Courier, monospace",
   "color-text-warning": "rgb(228, 98, 22)",
+  "color-text-new": "rgb(109, 46, 209)",
   "color-text-inverse-weak": "rgb(156, 167, 186)",
@@ -226,2 +245,3 @@ "color-text-link-destructive-darker": "rgb(71, 5, 0)",
   "color-text-error": "rgb(172, 30, 22)",
+  "color-text-icon-inverse": "rgb(136, 145, 170)",
   "color-text-link-dark": "rgb(0, 44, 166)",
@@ -231,8 +251,10 @@ "color-text-brand-inverse": "rgb(255, 255, 255)",
   "color-text-brand-highlight": "rgb(242, 47, 70)",
+  "color-text-inverse-weaker": "rgb(96, 107, 133)",
   "color-text-link-light": "rgb(133, 165, 255)",
   "color-text-inverse": "rgb(255, 255, 255)",
+  "color-text-error-light": "rgb(245, 138, 138)",
   "color-text-weaker": "rgb(182, 191, 206)",
-  "color-text-placeholder": "rgb(136, 148, 170)",
   "color-text-warning-dark": "rgb(168, 62, 0)",
   "color-text-link-destructive-dark": "rgb(112, 6, 0)",
+  "color-text-placeholder": "rgb(136, 148, 170)",
   "color-text-label": "rgb(8, 21, 44)",
@@ -239,0 +261,0 @@ "z-index-0": "0",

dist/tokens.common.d.ts

@@ -13,5 +13,6 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBody = "rgb(255, 255, 255)";
-export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
+export declare const colorBackgroundBodyInverse = "rgb(18, 28, 45)";
+export declare const colorBackgroundBrand = "rgb(0, 20, 137)";
 export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
-export declare const colorBackgroundDark = "rgb(174, 178, 193)";
+export declare const colorBackgroundDark = "rgb(225, 227, 234)";
 export declare const colorBackgroundDarker = "rgb(136, 145, 170)";
@@ -28,8 +29,10 @@ export declare const colorBackgroundDarkest = "rgb(75, 86, 113)";
 export declare const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
-export declare const colorBackgroundInverse = "rgb(18, 28, 45)";
+export declare const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
+export declare const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 export declare const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
-export declare const colorBackgroundOverlay = "rgba(18, 28, 45, 0.5)";
+export declare const colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
 export declare const colorBackgroundPrimary = "rgb(2, 99, 224)";
 export declare const colorBackgroundPrimaryDark = "rgb(0, 20, 137)";
 export declare const colorBackgroundPrimaryDarker = "rgb(3, 11, 93)";
+export declare const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
 export declare const colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
@@ -40,7 +43,10 @@ export declare const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
 export declare const colorBackgroundRowStriped = "rgb(244, 244, 246)";
+export declare const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 export declare const colorBackgroundSuccess = "rgb(20, 176, 83)";
 export declare const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
+export declare const colorBackgroundTrial = "rgb(209, 250, 224)";
+export declare const colorBackgroundUser = "rgb(200, 175, 240)";
 export declare const colorBackgroundWarning = "rgb(244, 124, 34)";
 export declare const colorBackgroundWarningLightest = "rgb(254, 245, 238)";
-export declare const colorBorder = "rgb(174, 178, 193)";
+export declare const colorBorder = "rgb(136, 145, 170)";
 export declare const colorBorderDark = "rgb(96, 107, 133)";
@@ -56,5 +62,8 @@ export declare const colorBorderDestructive = "rgb(214, 31, 31)";
 export declare const colorBorderErrorLightest = "rgb(254, 236, 236)";
-export declare const colorBorderInverse = "rgb(255, 255, 255)";
-export declare const colorBorderLight = "rgb(136, 145, 170)";
-export declare const colorBorderLighter = "rgb(174, 178, 193)";
+export declare const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+export declare const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+export declare const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+export declare const colorBorderInverseLightest = "rgb(255, 255, 255)";
+export declare const colorBorderLight = "rgb(202, 205, 216)";
+export declare const colorBorderLighter = "rgb(225, 227, 234)";
 export declare const colorBorderNeutralLight = "rgb(136, 145, 170)";
@@ -71,3 +80,3 @@ export declare const colorBorderPrimary = "rgb(2, 99, 224)";
 export declare const colorBorderWarningLightest = "rgb(254, 245, 238)";
-export declare const colorBrand = "rgb(35, 54, 89)";
+export declare const colorBrand = "rgb(0, 20, 137)";
 export declare const colorBrandHighlight = "rgb(242, 47, 70)";
@@ -90,7 +99,9 @@ export declare const colorGray0 = "rgb(255, 255, 255)";
 export declare const colorTextErrorDark = "rgb(173, 17, 17)";
-export declare const colorTextIcon = "rgb(75, 86, 113)";
+export declare const colorTextErrorLight = "rgb(245, 138, 138)";
+export declare const colorTextIcon = "rgb(96, 107, 133)";
+export declare const colorTextIconInverse = "rgb(136, 145, 170)";
 export declare const colorTextInverse = "rgb(255, 255, 255)";
 export declare const colorTextInverseWeak = "rgb(136, 145, 170)";
-export declare const colorTextLabel = "rgb(18, 28, 45)";
-export declare const colorTextLink = "rgb(4, 60, 181)";
+export declare const colorTextInverseWeaker = "rgb(96, 107, 133)";
+export declare const colorTextLink = "rgb(2, 99, 224)";
 export declare const colorTextLinkDark = "rgb(0, 20, 137)";
@@ -103,8 +114,8 @@ export declare const colorTextLinkDarker = "rgb(3, 11, 93)";
 export declare const colorTextLinkLight = "rgb(102, 179, 255)";
-export declare const colorTextPlaceholder = "rgb(75, 86, 113)";
+export declare const colorTextNew = "rgb(109, 46, 209)";
 export declare const colorTextSuccess = "rgb(20, 176, 83)";
 export declare const colorTextWarning = "rgb(244, 124, 34)";
 export declare const colorTextWarningDark = "rgb(195, 83, 35)";
-export declare const colorTextWeak = "rgb(75, 86, 113)";
-export declare const colorTextWeaker = "rgb(136, 145, 170)";
+export declare const colorTextWeak = "rgb(96, 107, 133)";
+export declare const colorTextWeaker = "rgb(174, 178, 193)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -139,10 +150,19 @@ export declare const fontFamilyText = "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
 export declare const lineHeight90 = "2.5rem";
-export declare const shadowBorder = "0 0 0 1px #606b85";
+export declare const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
+export declare const shadowBorder = "0 0 0 1px #8891aa";
 export declare const shadowBorderError = "0 0 0 1px #d61f1f";
 export declare const shadowBorderErrorDark = "0 0 0 1px #750c0c";
-export declare const shadowBorderLight = "0 0 0 1px #e1e3ea";
+export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+export declare const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+export declare const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
+export declare const shadowBorderLight = "0 0 0 1px #cacdd8";
+export declare const shadowBorderLighter = "0 0 0 1px #e1e3ea";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #001489";
 export declare const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
-export declare const shadowCard = "0 2px 4px 0 rgba(18, 28, 45, 0.3)";
-export declare const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.8)";
+export declare const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
+export declare const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
+export declare const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+export declare const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+export declare const shadowLow = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 export declare const size0 = "0";
@@ -248,5 +268,6 @@ export declare const size10 = "5.5rem";
   colorBackgroundBody: "rgb(255, 255, 255)";
-  colorBackgroundBrand: "rgb(35, 54, 89)";
+  colorBackgroundBodyInverse: "rgb(18, 28, 45)";
+  colorBackgroundBrand: "rgb(0, 20, 137)";
   colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
-  colorBackgroundDark: "rgb(174, 178, 193)";
+  colorBackgroundDark: "rgb(225, 227, 234)";
   colorBackgroundDarker: "rgb(136, 145, 170)";
@@ -263,8 +284,10 @@ colorBackgroundDarkest: "rgb(75, 86, 113)";
   colorBackgroundErrorLightest: "rgb(254, 236, 236)";
-  colorBackgroundInverse: "rgb(18, 28, 45)";
+  colorBackgroundInverse: "rgba(255, 255, 255, 0.1)";
+  colorBackgroundInverseLight: "rgba(255, 255, 255, 0.2)";
   colorBackgroundNeutralLightest: "rgb(235, 244, 255)";
-  colorBackgroundOverlay: "rgba(18, 28, 45, 0.5)";
+  colorBackgroundOverlay: "rgba(6, 3, 58, 0.4)";
   colorBackgroundPrimary: "rgb(2, 99, 224)";
   colorBackgroundPrimaryDark: "rgb(0, 20, 137)";
   colorBackgroundPrimaryDarker: "rgb(3, 11, 93)";
+  colorBackgroundPrimaryDarkest: "rgb(6, 3, 58)";
   colorBackgroundPrimaryLight: "rgb(102, 179, 255)";
@@ -275,4 +298,7 @@ colorBackgroundPrimaryLighter: "rgb(204, 228, 255)";
   colorBackgroundRowStriped: "rgb(244, 244, 246)";
+  colorBackgroundSubaccount: "rgb(255, 241, 179)";
   colorBackgroundSuccess: "rgb(20, 176, 83)";
   colorBackgroundSuccessLightest: "rgb(237, 253, 243)";
+  colorBackgroundTrial: "rgb(209, 250, 224)";
+  colorBackgroundUser: "rgb(200, 175, 240)";
   colorBackgroundWarning: "rgb(244, 124, 34)";
@@ -282,3 +308,3 @@ colorBackgroundWarningLightest: "rgb(254, 245, 238)";
 export declare const borderColors: {
-  colorBorder: "rgb(174, 178, 193)";
+  colorBorder: "rgb(136, 145, 170)";
   colorBorderDark: "rgb(96, 107, 133)";
@@ -294,5 +320,8 @@ colorBorderDestructive: "rgb(214, 31, 31)";
   colorBorderErrorLightest: "rgb(254, 236, 236)";
-  colorBorderInverse: "rgb(255, 255, 255)";
-  colorBorderLight: "rgb(136, 145, 170)";
-  colorBorderLighter: "rgb(174, 178, 193)";
+  colorBorderInverse: "rgba(255, 255, 255, 0.5)";
+  colorBorderInverseDarker: "rgba(255, 255, 255, 0.2)";
+  colorBorderInverseLighter: "rgba(255, 255, 255, 0.9)";
+  colorBorderInverseLightest: "rgb(255, 255, 255)";
+  colorBorderLight: "rgb(202, 205, 216)";
+  colorBorderLighter: "rgb(225, 227, 234)";
   colorBorderNeutralLight: "rgb(136, 145, 170)";
@@ -318,13 +347,22 @@ colorBorderPrimary: "rgb(2, 99, 224)";
 export declare const boxShadows: {
-  shadowBorder: "0 0 0 1px #606b85";
+  shadow: "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
+  shadowBorder: "0 0 0 1px #8891aa";
   shadowBorderError: "0 0 0 1px #d61f1f";
   shadowBorderErrorDark: "0 0 0 1px #750c0c";
-  shadowBorderLight: "0 0 0 1px #e1e3ea";
+  shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
+  shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";
+  shadowBorderInverseLight: "0 0 0 1px rgba(255, 255, 255, 0.9)";
+  shadowBorderInverseLightest: "0 0 0 1px #ffffff";
+  shadowBorderLight: "0 0 0 1px #cacdd8";
+  shadowBorderLighter: "0 0 0 1px #e1e3ea";
   shadowBorderPrimaryDark: "0 0 0 1px #001489";
   shadowBorderPrimaryDarker: "0 0 0 1px #030b5d";
-  shadowCard: "0 2px 4px 0 rgba(18, 28, 45, 0.3)";
-  shadowFocus: "0 0 0 4px rgba(2, 99, 224, 0.8)";
+  shadowCard: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
+  shadowFocus: "0 0 0 4px rgba(2, 99, 224, 0.7)";
+  shadowFocusInverse: "0 0 0 4px rgba(255, 255, 255, 0.4)";
+  shadowHigh: "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+  shadowLow: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 };
 export declare const colors: {
-  colorBrand: "rgb(35, 54, 89)";
+  colorBrand: "rgb(0, 20, 137)";
   colorBrandHighlight: "rgb(242, 47, 70)";
@@ -484,7 +522,9 @@ colorGray0: "rgb(255, 255, 255)";
   colorTextErrorDark: "rgb(173, 17, 17)";
-  colorTextIcon: "rgb(75, 86, 113)";
+  colorTextErrorLight: "rgb(245, 138, 138)";
+  colorTextIcon: "rgb(96, 107, 133)";
+  colorTextIconInverse: "rgb(136, 145, 170)";
   colorTextInverse: "rgb(255, 255, 255)";
   colorTextInverseWeak: "rgb(136, 145, 170)";
-  colorTextLabel: "rgb(18, 28, 45)";
-  colorTextLink: "rgb(4, 60, 181)";
+  colorTextInverseWeaker: "rgb(96, 107, 133)";
+  colorTextLink: "rgb(2, 99, 224)";
   colorTextLinkDark: "rgb(0, 20, 137)";
@@ -497,8 +537,8 @@ colorTextLinkDarker: "rgb(3, 11, 93)";
   colorTextLinkLight: "rgb(102, 179, 255)";
-  colorTextPlaceholder: "rgb(75, 86, 113)";
+  colorTextNew: "rgb(109, 46, 209)";
   colorTextSuccess: "rgb(20, 176, 83)";
   colorTextWarning: "rgb(244, 124, 34)";
   colorTextWarningDark: "rgb(195, 83, 35)";
-  colorTextWeak: "rgb(75, 86, 113)";
-  colorTextWeaker: "rgb(136, 145, 170)";
+  colorTextWeak: "rgb(96, 107, 133)";
+  colorTextWeaker: "rgb(174, 178, 193)";
 };
@@ -505,0 +545,0 @@ export declare const zIndices: {

dist/tokens.common.js

@@ -13,5 +13,6 @@ const borderRadius0 = "0";
 const colorBackgroundBody = "rgb(255, 255, 255)";
-const colorBackgroundBrand = "rgb(35, 54, 89)";
+const colorBackgroundBodyInverse = "rgb(18, 28, 45)";
+const colorBackgroundBrand = "rgb(0, 20, 137)";
 const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
-const colorBackgroundDark = "rgb(174, 178, 193)";
+const colorBackgroundDark = "rgb(225, 227, 234)";
 const colorBackgroundDarker = "rgb(136, 145, 170)";
@@ -28,8 +29,10 @@ const colorBackgroundDarkest = "rgb(75, 86, 113)";
 const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
-const colorBackgroundInverse = "rgb(18, 28, 45)";
+const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
+const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
-const colorBackgroundOverlay = "rgba(18, 28, 45, 0.5)";
+const colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
 const colorBackgroundPrimary = "rgb(2, 99, 224)";
 const colorBackgroundPrimaryDark = "rgb(0, 20, 137)";
 const colorBackgroundPrimaryDarker = "rgb(3, 11, 93)";
+const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
 const colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
@@ -40,7 +43,10 @@ const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
 const colorBackgroundRowStriped = "rgb(244, 244, 246)";
+const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 const colorBackgroundSuccess = "rgb(20, 176, 83)";
 const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
+const colorBackgroundTrial = "rgb(209, 250, 224)";
+const colorBackgroundUser = "rgb(200, 175, 240)";
 const colorBackgroundWarning = "rgb(244, 124, 34)";
 const colorBackgroundWarningLightest = "rgb(254, 245, 238)";
-const colorBorder = "rgb(174, 178, 193)";
+const colorBorder = "rgb(136, 145, 170)";
 const colorBorderDark = "rgb(96, 107, 133)";
@@ -56,5 +62,8 @@ const colorBorderDestructive = "rgb(214, 31, 31)";
 const colorBorderErrorLightest = "rgb(254, 236, 236)";
-const colorBorderInverse = "rgb(255, 255, 255)";
-const colorBorderLight = "rgb(136, 145, 170)";
-const colorBorderLighter = "rgb(174, 178, 193)";
+const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+const colorBorderInverseLightest = "rgb(255, 255, 255)";
+const colorBorderLight = "rgb(202, 205, 216)";
+const colorBorderLighter = "rgb(225, 227, 234)";
 const colorBorderNeutralLight = "rgb(136, 145, 170)";
@@ -71,3 +80,3 @@ const colorBorderPrimary = "rgb(2, 99, 224)";
 const colorBorderWarningLightest = "rgb(254, 245, 238)";
-const colorBrand = "rgb(35, 54, 89)";
+const colorBrand = "rgb(0, 20, 137)";
 const colorBrandHighlight = "rgb(242, 47, 70)";
@@ -90,7 +99,9 @@ const colorGray0 = "rgb(255, 255, 255)";
 const colorTextErrorDark = "rgb(173, 17, 17)";
-const colorTextIcon = "rgb(75, 86, 113)";
+const colorTextErrorLight = "rgb(245, 138, 138)";
+const colorTextIcon = "rgb(96, 107, 133)";
+const colorTextIconInverse = "rgb(136, 145, 170)";
 const colorTextInverse = "rgb(255, 255, 255)";
 const colorTextInverseWeak = "rgb(136, 145, 170)";
-const colorTextLabel = "rgb(18, 28, 45)";
-const colorTextLink = "rgb(4, 60, 181)";
+const colorTextInverseWeaker = "rgb(96, 107, 133)";
+const colorTextLink = "rgb(2, 99, 224)";
 const colorTextLinkDark = "rgb(0, 20, 137)";
@@ -103,8 +114,8 @@ const colorTextLinkDarker = "rgb(3, 11, 93)";
 const colorTextLinkLight = "rgb(102, 179, 255)";
-const colorTextPlaceholder = "rgb(75, 86, 113)";
+const colorTextNew = "rgb(109, 46, 209)";
 const colorTextSuccess = "rgb(20, 176, 83)";
 const colorTextWarning = "rgb(244, 124, 34)";
 const colorTextWarningDark = "rgb(195, 83, 35)";
-const colorTextWeak = "rgb(75, 86, 113)";
-const colorTextWeaker = "rgb(136, 145, 170)";
+const colorTextWeak = "rgb(96, 107, 133)";
+const colorTextWeaker = "rgb(174, 178, 193)";
 const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -139,10 +150,19 @@ const fontFamilyText = "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
 const lineHeight90 = "2.5rem";
-const shadowBorder = "0 0 0 1px #606b85";
+const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
+const shadowBorder = "0 0 0 1px #8891aa";
 const shadowBorderError = "0 0 0 1px #d61f1f";
 const shadowBorderErrorDark = "0 0 0 1px #750c0c";
-const shadowBorderLight = "0 0 0 1px #e1e3ea";
+const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
+const shadowBorderLight = "0 0 0 1px #cacdd8";
+const shadowBorderLighter = "0 0 0 1px #e1e3ea";
 const shadowBorderPrimaryDark = "0 0 0 1px #001489";
 const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
-const shadowCard = "0 2px 4px 0 rgba(18, 28, 45, 0.3)";
-const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.8)";
+const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
+const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
+const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+const shadowLow = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 const size0 = "0";
@@ -259,2 +279,3 @@ const size10 = "5.5rem";
 colorBackgroundBody,
+colorBackgroundBodyInverse,
 colorBackgroundBrand,
@@ -275,2 +296,3 @@ colorBackgroundBrandHighlight,
 colorBackgroundInverse,
+colorBackgroundInverseLight,
 colorBackgroundNeutralLightest,
@@ -281,2 +303,3 @@ colorBackgroundOverlay,
 colorBackgroundPrimaryDarker,
+colorBackgroundPrimaryDarkest,
 colorBackgroundPrimaryLight,
@@ -287,4 +310,7 @@ colorBackgroundPrimaryLighter,
 colorBackgroundRowStriped,
+colorBackgroundSubaccount,
 colorBackgroundSuccess,
 colorBackgroundSuccessLightest,
+colorBackgroundTrial,
+colorBackgroundUser,
 colorBackgroundWarning,
@@ -304,2 +330,5 @@ colorBackgroundWarningLightest,
 colorBorderInverse,
+colorBorderInverseDarker,
+colorBorderInverseLighter,
+colorBorderInverseLightest,
 colorBorderLight,
@@ -336,6 +365,8 @@ colorBorderLighter,
 colorTextErrorDark,
+colorTextErrorLight,
 colorTextIcon,
+colorTextIconInverse,
 colorTextInverse,
 colorTextInverseWeak,
-colorTextLabel,
+colorTextInverseWeaker,
 colorTextLink,
@@ -349,3 +380,3 @@ colorTextLinkDark,
 colorTextLinkLight,
-colorTextPlaceholder,
+colorTextNew,
 colorTextSuccess,
@@ -385,6 +416,12 @@ colorTextWarning,
 lineHeight90,
+shadow,
 shadowBorder,
 shadowBorderError,
 shadowBorderErrorDark,
+shadowBorderInverse,
+shadowBorderInverseDarker,
+shadowBorderInverseLight,
+shadowBorderInverseLightest,
 shadowBorderLight,
+shadowBorderLighter,
 shadowBorderPrimaryDark,
@@ -394,2 +431,5 @@ shadowBorderPrimaryDarker,
 shadowFocus,
+shadowFocusInverse,
+shadowHigh,
+shadowLow,
 size0,
@@ -495,2 +535,3 @@ size10,
 colorBackgroundBody,
+colorBackgroundBodyInverse,
 colorBackgroundBrand,
@@ -511,2 +552,3 @@ colorBackgroundBrandHighlight,
 colorBackgroundInverse,
+colorBackgroundInverseLight,
 colorBackgroundNeutralLightest,
@@ -517,2 +559,3 @@ colorBackgroundOverlay,
 colorBackgroundPrimaryDarker,
+colorBackgroundPrimaryDarkest,
 colorBackgroundPrimaryLight,
@@ -523,4 +566,7 @@ colorBackgroundPrimaryLighter,
 colorBackgroundRowStriped,
+colorBackgroundSubaccount,
 colorBackgroundSuccess,
 colorBackgroundSuccessLightest,
+colorBackgroundTrial,
+colorBackgroundUser,
 colorBackgroundWarning,
@@ -542,2 +588,5 @@ colorBackgroundWarningLightest,
 colorBorderInverse,
+colorBorderInverseDarker,
+colorBorderInverseLighter,
+colorBorderInverseLightest,
 colorBorderLight,
@@ -565,6 +614,12 @@ colorBorderLighter,
 boxShadows: {
+shadow,
 shadowBorder,
 shadowBorderError,
 shadowBorderErrorDark,
+shadowBorderInverse,
+shadowBorderInverseDarker,
+shadowBorderInverseLight,
+shadowBorderInverseLightest,
 shadowBorderLight,
+shadowBorderLighter,
 shadowBorderPrimaryDark,
@@ -574,2 +629,5 @@ shadowBorderPrimaryDarker,
 shadowFocus,
+shadowFocusInverse,
+shadowHigh,
+shadowLow,
 },
@@ -732,6 +790,8 @@ colors: {
 colorTextErrorDark,
+colorTextErrorLight,
 colorTextIcon,
+colorTextIconInverse,
 colorTextInverse,
 colorTextInverseWeak,
-colorTextLabel,
+colorTextInverseWeaker,
 colorTextLink,
@@ -745,3 +805,3 @@ colorTextLinkDark,
 colorTextLinkLight,
-colorTextPlaceholder,
+colorTextNew,
 colorTextSuccess,
@@ -748,0 +808,0 @@ colorTextWarning,

dist/tokens.es6.d.ts

@@ -13,5 +13,6 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundBody = "rgb(255, 255, 255)";
-export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
+export declare const colorBackgroundBodyInverse = "rgb(18, 28, 45)";
+export declare const colorBackgroundBrand = "rgb(0, 20, 137)";
 export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
-export declare const colorBackgroundDark = "rgb(174, 178, 193)";
+export declare const colorBackgroundDark = "rgb(225, 227, 234)";
 export declare const colorBackgroundDarker = "rgb(136, 145, 170)";
@@ -28,8 +29,10 @@ export declare const colorBackgroundDarkest = "rgb(75, 86, 113)";
 export declare const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
-export declare const colorBackgroundInverse = "rgb(18, 28, 45)";
+export declare const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
+export declare const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 export declare const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
-export declare const colorBackgroundOverlay = "rgba(18, 28, 45, 0.5)";
+export declare const colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
 export declare const colorBackgroundPrimary = "rgb(2, 99, 224)";
 export declare const colorBackgroundPrimaryDark = "rgb(0, 20, 137)";
 export declare const colorBackgroundPrimaryDarker = "rgb(3, 11, 93)";
+export declare const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
 export declare const colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
@@ -40,7 +43,10 @@ export declare const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
 export declare const colorBackgroundRowStriped = "rgb(244, 244, 246)";
+export declare const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 export declare const colorBackgroundSuccess = "rgb(20, 176, 83)";
 export declare const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
+export declare const colorBackgroundTrial = "rgb(209, 250, 224)";
+export declare const colorBackgroundUser = "rgb(200, 175, 240)";
 export declare const colorBackgroundWarning = "rgb(244, 124, 34)";
 export declare const colorBackgroundWarningLightest = "rgb(254, 245, 238)";
-export declare const colorBorder = "rgb(174, 178, 193)";
+export declare const colorBorder = "rgb(136, 145, 170)";
 export declare const colorBorderDark = "rgb(96, 107, 133)";
@@ -56,5 +62,8 @@ export declare const colorBorderDestructive = "rgb(214, 31, 31)";
 export declare const colorBorderErrorLightest = "rgb(254, 236, 236)";
-export declare const colorBorderInverse = "rgb(255, 255, 255)";
-export declare const colorBorderLight = "rgb(136, 145, 170)";
-export declare const colorBorderLighter = "rgb(174, 178, 193)";
+export declare const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+export declare const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+export declare const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+export declare const colorBorderInverseLightest = "rgb(255, 255, 255)";
+export declare const colorBorderLight = "rgb(202, 205, 216)";
+export declare const colorBorderLighter = "rgb(225, 227, 234)";
 export declare const colorBorderNeutralLight = "rgb(136, 145, 170)";
@@ -71,3 +80,3 @@ export declare const colorBorderPrimary = "rgb(2, 99, 224)";
 export declare const colorBorderWarningLightest = "rgb(254, 245, 238)";
-export declare const colorBrand = "rgb(35, 54, 89)";
+export declare const colorBrand = "rgb(0, 20, 137)";
 export declare const colorBrandHighlight = "rgb(242, 47, 70)";
@@ -90,7 +99,9 @@ export declare const colorGray0 = "rgb(255, 255, 255)";
 export declare const colorTextErrorDark = "rgb(173, 17, 17)";
-export declare const colorTextIcon = "rgb(75, 86, 113)";
+export declare const colorTextErrorLight = "rgb(245, 138, 138)";
+export declare const colorTextIcon = "rgb(96, 107, 133)";
+export declare const colorTextIconInverse = "rgb(136, 145, 170)";
 export declare const colorTextInverse = "rgb(255, 255, 255)";
 export declare const colorTextInverseWeak = "rgb(136, 145, 170)";
-export declare const colorTextLabel = "rgb(18, 28, 45)";
-export declare const colorTextLink = "rgb(4, 60, 181)";
+export declare const colorTextInverseWeaker = "rgb(96, 107, 133)";
+export declare const colorTextLink = "rgb(2, 99, 224)";
 export declare const colorTextLinkDark = "rgb(0, 20, 137)";
@@ -103,8 +114,8 @@ export declare const colorTextLinkDarker = "rgb(3, 11, 93)";
 export declare const colorTextLinkLight = "rgb(102, 179, 255)";
-export declare const colorTextPlaceholder = "rgb(75, 86, 113)";
+export declare const colorTextNew = "rgb(109, 46, 209)";
 export declare const colorTextSuccess = "rgb(20, 176, 83)";
 export declare const colorTextWarning = "rgb(244, 124, 34)";
 export declare const colorTextWarningDark = "rgb(195, 83, 35)";
-export declare const colorTextWeak = "rgb(75, 86, 113)";
-export declare const colorTextWeaker = "rgb(136, 145, 170)";
+export declare const colorTextWeak = "rgb(96, 107, 133)";
+export declare const colorTextWeaker = "rgb(174, 178, 193)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -139,10 +150,19 @@ export declare const fontFamilyText = "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
 export declare const lineHeight90 = "2.5rem";
-export declare const shadowBorder = "0 0 0 1px #606b85";
+export declare const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
+export declare const shadowBorder = "0 0 0 1px #8891aa";
 export declare const shadowBorderError = "0 0 0 1px #d61f1f";
 export declare const shadowBorderErrorDark = "0 0 0 1px #750c0c";
-export declare const shadowBorderLight = "0 0 0 1px #e1e3ea";
+export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+export declare const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+export declare const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+export declare const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
+export declare const shadowBorderLight = "0 0 0 1px #cacdd8";
+export declare const shadowBorderLighter = "0 0 0 1px #e1e3ea";
 export declare const shadowBorderPrimaryDark = "0 0 0 1px #001489";
 export declare const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
-export declare const shadowCard = "0 2px 4px 0 rgba(18, 28, 45, 0.3)";
-export declare const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.8)";
+export declare const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
+export declare const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
+export declare const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+export declare const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+export declare const shadowLow = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 export declare const size0 = "0";
@@ -248,5 +268,6 @@ export declare const size10 = "5.5rem";
   colorBackgroundBody: "rgb(255, 255, 255)";
-  colorBackgroundBrand: "rgb(35, 54, 89)";
+  colorBackgroundBodyInverse: "rgb(18, 28, 45)";
+  colorBackgroundBrand: "rgb(0, 20, 137)";
   colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
-  colorBackgroundDark: "rgb(174, 178, 193)";
+  colorBackgroundDark: "rgb(225, 227, 234)";
   colorBackgroundDarker: "rgb(136, 145, 170)";
@@ -263,8 +284,10 @@ colorBackgroundDarkest: "rgb(75, 86, 113)";
   colorBackgroundErrorLightest: "rgb(254, 236, 236)";
-  colorBackgroundInverse: "rgb(18, 28, 45)";
+  colorBackgroundInverse: "rgba(255, 255, 255, 0.1)";
+  colorBackgroundInverseLight: "rgba(255, 255, 255, 0.2)";
   colorBackgroundNeutralLightest: "rgb(235, 244, 255)";
-  colorBackgroundOverlay: "rgba(18, 28, 45, 0.5)";
+  colorBackgroundOverlay: "rgba(6, 3, 58, 0.4)";
   colorBackgroundPrimary: "rgb(2, 99, 224)";
   colorBackgroundPrimaryDark: "rgb(0, 20, 137)";
   colorBackgroundPrimaryDarker: "rgb(3, 11, 93)";
+  colorBackgroundPrimaryDarkest: "rgb(6, 3, 58)";
   colorBackgroundPrimaryLight: "rgb(102, 179, 255)";
@@ -275,4 +298,7 @@ colorBackgroundPrimaryLighter: "rgb(204, 228, 255)";
   colorBackgroundRowStriped: "rgb(244, 244, 246)";
+  colorBackgroundSubaccount: "rgb(255, 241, 179)";
   colorBackgroundSuccess: "rgb(20, 176, 83)";
   colorBackgroundSuccessLightest: "rgb(237, 253, 243)";
+  colorBackgroundTrial: "rgb(209, 250, 224)";
+  colorBackgroundUser: "rgb(200, 175, 240)";
   colorBackgroundWarning: "rgb(244, 124, 34)";
@@ -282,3 +308,3 @@ colorBackgroundWarningLightest: "rgb(254, 245, 238)";
 export declare const borderColors: {
-  colorBorder: "rgb(174, 178, 193)";
+  colorBorder: "rgb(136, 145, 170)";
   colorBorderDark: "rgb(96, 107, 133)";
@@ -294,5 +320,8 @@ colorBorderDestructive: "rgb(214, 31, 31)";
   colorBorderErrorLightest: "rgb(254, 236, 236)";
-  colorBorderInverse: "rgb(255, 255, 255)";
-  colorBorderLight: "rgb(136, 145, 170)";
-  colorBorderLighter: "rgb(174, 178, 193)";
+  colorBorderInverse: "rgba(255, 255, 255, 0.5)";
+  colorBorderInverseDarker: "rgba(255, 255, 255, 0.2)";
+  colorBorderInverseLighter: "rgba(255, 255, 255, 0.9)";
+  colorBorderInverseLightest: "rgb(255, 255, 255)";
+  colorBorderLight: "rgb(202, 205, 216)";
+  colorBorderLighter: "rgb(225, 227, 234)";
   colorBorderNeutralLight: "rgb(136, 145, 170)";
@@ -318,13 +347,22 @@ colorBorderPrimary: "rgb(2, 99, 224)";
 export declare const boxShadows: {
-  shadowBorder: "0 0 0 1px #606b85";
+  shadow: "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
+  shadowBorder: "0 0 0 1px #8891aa";
   shadowBorderError: "0 0 0 1px #d61f1f";
   shadowBorderErrorDark: "0 0 0 1px #750c0c";
-  shadowBorderLight: "0 0 0 1px #e1e3ea";
+  shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";
+  shadowBorderInverseDarker: "0 0 0 1px rgba(255, 255, 255, 0.2)";
+  shadowBorderInverseLight: "0 0 0 1px rgba(255, 255, 255, 0.9)";
+  shadowBorderInverseLightest: "0 0 0 1px #ffffff";
+  shadowBorderLight: "0 0 0 1px #cacdd8";
+  shadowBorderLighter: "0 0 0 1px #e1e3ea";
   shadowBorderPrimaryDark: "0 0 0 1px #001489";
   shadowBorderPrimaryDarker: "0 0 0 1px #030b5d";
-  shadowCard: "0 2px 4px 0 rgba(18, 28, 45, 0.3)";
-  shadowFocus: "0 0 0 4px rgba(2, 99, 224, 0.8)";
+  shadowCard: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
+  shadowFocus: "0 0 0 4px rgba(2, 99, 224, 0.7)";
+  shadowFocusInverse: "0 0 0 4px rgba(255, 255, 255, 0.4)";
+  shadowHigh: "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+  shadowLow: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 };
 export declare const colors: {
-  colorBrand: "rgb(35, 54, 89)";
+  colorBrand: "rgb(0, 20, 137)";
   colorBrandHighlight: "rgb(242, 47, 70)";
@@ -484,7 +522,9 @@ colorGray0: "rgb(255, 255, 255)";
   colorTextErrorDark: "rgb(173, 17, 17)";
-  colorTextIcon: "rgb(75, 86, 113)";
+  colorTextErrorLight: "rgb(245, 138, 138)";
+  colorTextIcon: "rgb(96, 107, 133)";
+  colorTextIconInverse: "rgb(136, 145, 170)";
   colorTextInverse: "rgb(255, 255, 255)";
   colorTextInverseWeak: "rgb(136, 145, 170)";
-  colorTextLabel: "rgb(18, 28, 45)";
-  colorTextLink: "rgb(4, 60, 181)";
+  colorTextInverseWeaker: "rgb(96, 107, 133)";
+  colorTextLink: "rgb(2, 99, 224)";
   colorTextLinkDark: "rgb(0, 20, 137)";
@@ -497,8 +537,8 @@ colorTextLinkDarker: "rgb(3, 11, 93)";
   colorTextLinkLight: "rgb(102, 179, 255)";
-  colorTextPlaceholder: "rgb(75, 86, 113)";
+  colorTextNew: "rgb(109, 46, 209)";
   colorTextSuccess: "rgb(20, 176, 83)";
   colorTextWarning: "rgb(244, 124, 34)";
   colorTextWarningDark: "rgb(195, 83, 35)";
-  colorTextWeak: "rgb(75, 86, 113)";
-  colorTextWeaker: "rgb(136, 145, 170)";
+  colorTextWeak: "rgb(96, 107, 133)";
+  colorTextWeaker: "rgb(174, 178, 193)";
 };
@@ -505,0 +545,0 @@ export declare const zIndices: {

dist/tokens.es6.js

@@ -13,5 +13,6 @@ export const borderRadius0 = "0";
 export const colorBackgroundBody = "rgb(255, 255, 255)";
-export const colorBackgroundBrand = "rgb(35, 54, 89)";
+export const colorBackgroundBodyInverse = "rgb(18, 28, 45)";
+export const colorBackgroundBrand = "rgb(0, 20, 137)";
 export const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
-export const colorBackgroundDark = "rgb(174, 178, 193)";
+export const colorBackgroundDark = "rgb(225, 227, 234)";
 export const colorBackgroundDarker = "rgb(136, 145, 170)";
@@ -28,8 +29,10 @@ export const colorBackgroundDarkest = "rgb(75, 86, 113)";
 export const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
-export const colorBackgroundInverse = "rgb(18, 28, 45)";
+export const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
+export const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
 export const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
-export const colorBackgroundOverlay = "rgba(18, 28, 45, 0.5)";
+export const colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
 export const colorBackgroundPrimary = "rgb(2, 99, 224)";
 export const colorBackgroundPrimaryDark = "rgb(0, 20, 137)";
 export const colorBackgroundPrimaryDarker = "rgb(3, 11, 93)";
+export const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
 export const colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
@@ -40,7 +43,10 @@ export const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
 export const colorBackgroundRowStriped = "rgb(244, 244, 246)";
+export const colorBackgroundSubaccount = "rgb(255, 241, 179)";
 export const colorBackgroundSuccess = "rgb(20, 176, 83)";
 export const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
+export const colorBackgroundTrial = "rgb(209, 250, 224)";
+export const colorBackgroundUser = "rgb(200, 175, 240)";
 export const colorBackgroundWarning = "rgb(244, 124, 34)";
 export const colorBackgroundWarningLightest = "rgb(254, 245, 238)";
-export const colorBorder = "rgb(174, 178, 193)";
+export const colorBorder = "rgb(136, 145, 170)";
 export const colorBorderDark = "rgb(96, 107, 133)";
@@ -56,5 +62,8 @@ export const colorBorderDestructive = "rgb(214, 31, 31)";
 export const colorBorderErrorLightest = "rgb(254, 236, 236)";
-export const colorBorderInverse = "rgb(255, 255, 255)";
-export const colorBorderLight = "rgb(136, 145, 170)";
-export const colorBorderLighter = "rgb(174, 178, 193)";
+export const colorBorderInverse = "rgba(255, 255, 255, 0.5)";
+export const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";
+export const colorBorderInverseLighter = "rgba(255, 255, 255, 0.9)";
+export const colorBorderInverseLightest = "rgb(255, 255, 255)";
+export const colorBorderLight = "rgb(202, 205, 216)";
+export const colorBorderLighter = "rgb(225, 227, 234)";
 export const colorBorderNeutralLight = "rgb(136, 145, 170)";
@@ -71,3 +80,3 @@ export const colorBorderPrimary = "rgb(2, 99, 224)";
 export const colorBorderWarningLightest = "rgb(254, 245, 238)";
-export const colorBrand = "rgb(35, 54, 89)";
+export const colorBrand = "rgb(0, 20, 137)";
 export const colorBrandHighlight = "rgb(242, 47, 70)";
@@ -90,7 +99,9 @@ export const colorGray0 = "rgb(255, 255, 255)";
 export const colorTextErrorDark = "rgb(173, 17, 17)";
-export const colorTextIcon = "rgb(75, 86, 113)";
+export const colorTextErrorLight = "rgb(245, 138, 138)";
+export const colorTextIcon = "rgb(96, 107, 133)";
+export const colorTextIconInverse = "rgb(136, 145, 170)";
 export const colorTextInverse = "rgb(255, 255, 255)";
 export const colorTextInverseWeak = "rgb(136, 145, 170)";
-export const colorTextLabel = "rgb(18, 28, 45)";
-export const colorTextLink = "rgb(4, 60, 181)";
+export const colorTextInverseWeaker = "rgb(96, 107, 133)";
+export const colorTextLink = "rgb(2, 99, 224)";
 export const colorTextLinkDark = "rgb(0, 20, 137)";
@@ -103,8 +114,8 @@ export const colorTextLinkDarker = "rgb(3, 11, 93)";
 export const colorTextLinkLight = "rgb(102, 179, 255)";
-export const colorTextPlaceholder = "rgb(75, 86, 113)";
+export const colorTextNew = "rgb(109, 46, 209)";
 export const colorTextSuccess = "rgb(20, 176, 83)";
 export const colorTextWarning = "rgb(244, 124, 34)";
 export const colorTextWarningDark = "rgb(195, 83, 35)";
-export const colorTextWeak = "rgb(75, 86, 113)";
-export const colorTextWeaker = "rgb(136, 145, 170)";
+export const colorTextWeak = "rgb(96, 107, 133)";
+export const colorTextWeaker = "rgb(174, 178, 193)";
 export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -139,10 +150,19 @@ export const fontFamilyText = "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
 export const lineHeight90 = "2.5rem";
-export const shadowBorder = "0 0 0 1px #606b85";
+export const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
+export const shadowBorder = "0 0 0 1px #8891aa";
 export const shadowBorderError = "0 0 0 1px #d61f1f";
 export const shadowBorderErrorDark = "0 0 0 1px #750c0c";
-export const shadowBorderLight = "0 0 0 1px #e1e3ea";
+export const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";
+export const shadowBorderInverseDarker = "0 0 0 1px rgba(255, 255, 255, 0.2)";
+export const shadowBorderInverseLight = "0 0 0 1px rgba(255, 255, 255, 0.9)";
+export const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
+export const shadowBorderLight = "0 0 0 1px #cacdd8";
+export const shadowBorderLighter = "0 0 0 1px #e1e3ea";
 export const shadowBorderPrimaryDark = "0 0 0 1px #001489";
 export const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
-export const shadowCard = "0 2px 4px 0 rgba(18, 28, 45, 0.3)";
-export const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.8)";
+export const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
+export const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
+export const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";
+export const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
+export const shadowLow = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
 export const size0 = "0";
@@ -248,2 +268,3 @@ export const size10 = "5.5rem";
 colorBackgroundBody,
+colorBackgroundBodyInverse,
 colorBackgroundBrand,
@@ -264,2 +285,3 @@ colorBackgroundBrandHighlight,
 colorBackgroundInverse,
+colorBackgroundInverseLight,
 colorBackgroundNeutralLightest,
@@ -270,2 +292,3 @@ colorBackgroundOverlay,
 colorBackgroundPrimaryDarker,
+colorBackgroundPrimaryDarkest,
 colorBackgroundPrimaryLight,
@@ -276,4 +299,7 @@ colorBackgroundPrimaryLighter,
 colorBackgroundRowStriped,
+colorBackgroundSubaccount,
 colorBackgroundSuccess,
 colorBackgroundSuccessLightest,
+colorBackgroundTrial,
+colorBackgroundUser,
 colorBackgroundWarning,
@@ -295,2 +321,5 @@ colorBackgroundWarningLightest,
 colorBorderInverse,
+colorBorderInverseDarker,
+colorBorderInverseLighter,
+colorBorderInverseLightest,
 colorBorderLight,
@@ -318,6 +347,12 @@ colorBorderLighter,
 export const boxShadows = {
+shadow,
 shadowBorder,
 shadowBorderError,
 shadowBorderErrorDark,
+shadowBorderInverse,
+shadowBorderInverseDarker,
+shadowBorderInverseLight,
+shadowBorderInverseLightest,
 shadowBorderLight,
+shadowBorderLighter,
 shadowBorderPrimaryDark,
@@ -327,2 +362,5 @@ shadowBorderPrimaryDarker,
 shadowFocus,
+shadowFocusInverse,
+shadowHigh,
+shadowLow,
 };
@@ -485,6 +523,8 @@ export const colors = {
 colorTextErrorDark,
+colorTextErrorLight,
 colorTextIcon,
+colorTextIconInverse,
 colorTextInverse,
 colorTextInverseWeak,
-colorTextLabel,
+colorTextInverseWeaker,
 colorTextLink,
@@ -498,3 +538,3 @@ colorTextLinkDark,
 colorTextLinkLight,
-colorTextPlaceholder,
+colorTextNew,
 colorTextSuccess,
@@ -501,0 +541,0 @@ colorTextWarning,

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(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(174, 178, 193)","comment":"Dark default background color","originalValue":"{!palette-gray-40}","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":"rgb(18, 28, 45)","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":"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(18, 28, 45, 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, 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(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(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(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(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"}]
   },
 {
     "categoryName": "border-colors",
-    "tokens": [{"type":"color","category":"border-color","value":"rgb(174, 178, 193)","comment":"Default border color","originalValue":"{!palette-gray-40}","name":"color-border"},{"type":"color","category":"border-color","value":"rgb(96, 107, 133)","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"rgb(214, 31, 31)","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"rgb(117, 12, 12)","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"rgb(74, 11, 11)","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"rgb(245, 138, 138)","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"rgb(252, 207, 207)","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"rgb(214, 31, 31)","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"rgb(117, 12, 12)","comment":"Dark error border color","originalValue":"{!palette-red-80}","name":"color-border-error-dark"},{"type":"color","category":"border-color","value":"rgb(245, 138, 138)","comment":"Light error border color","originalValue":"{!palette-red-40}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"rgb(254, 236, 236)","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"rgb(255, 255, 255)","comment":"Border on inverse backgrounds","originalValue":"{!palette-gray-0}","name":"color-border-inverse"},{"type":"color","category":"border-color","value":"rgb(136, 145, 170)","comment":"Light border color","originalValue":"{!palette-gray-50}","name":"color-border-light"},{"type":"color","category":"border-color","value":"rgb(174, 178, 193)","comment":"Lighter border color","originalValue":"{!palette-gray-40}","name":"color-border-lighter"},{"type":"color","category":"border-color","value":"rgb(136, 145, 170)","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"rgb(2, 99, 224)","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"rgb(0, 20, 137)","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"rgb(3, 11, 93)","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"rgb(102, 179, 255)","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"rgb(204, 228, 255)","comment":"Lighter primary border color","originalValue":"{!palette-blue-20}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"rgb(20, 176, 83)","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"rgb(237, 253, 243)","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"rgb(244, 124, 34)","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"rgb(255, 179, 122)","comment":"Light warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"rgb(254, 245, 238)","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
+    "tokens": [{"type":"color","category":"border-color","value":"rgb(136, 145, 170)","comment":"Default border color","originalValue":"{!palette-gray-50}","name":"color-border"},{"type":"color","category":"border-color","value":"rgb(96, 107, 133)","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"rgb(214, 31, 31)","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"rgb(117, 12, 12)","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"rgb(74, 11, 11)","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"rgb(245, 138, 138)","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"rgb(252, 207, 207)","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"rgb(214, 31, 31)","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"rgb(117, 12, 12)","comment":"Dark error border color","originalValue":"{!palette-red-80}","name":"color-border-error-dark"},{"type":"color","category":"border-color","value":"rgb(245, 138, 138)","comment":"Light error border color","originalValue":"{!palette-red-40}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"rgb(254, 236, 236)","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.5)","comment":"Border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-50}","name":"color-border-inverse"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.2)","comment":"Darker border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-20}","name":"color-border-inverse-darker"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.9)","comment":"Lighter border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-90}","name":"color-border-inverse-lighter"},{"type":"color","category":"border-color","value":"rgb(255, 255, 255)","comment":"Lightest border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-border-inverse-lightest"},{"type":"color","category":"border-color","value":"rgb(202, 205, 216)","comment":"Light border color","originalValue":"{!palette-gray-30}","name":"color-border-light"},{"type":"color","category":"border-color","value":"rgb(225, 227, 234)","comment":"Lighter border color","originalValue":"{!palette-gray-20}","name":"color-border-lighter"},{"type":"color","category":"border-color","value":"rgb(136, 145, 170)","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"rgb(2, 99, 224)","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"rgb(0, 20, 137)","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"rgb(3, 11, 93)","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"rgb(102, 179, 255)","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"rgb(204, 228, 255)","comment":"Lighter primary border color","originalValue":"{!palette-blue-20}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"rgb(20, 176, 83)","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"rgb(237, 253, 243)","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"rgb(244, 124, 34)","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"rgb(255, 179, 122)","comment":"Light warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"rgb(254, 245, 238)","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
   },
@@ -16,7 +16,7 @@ {
     "categoryName": "box-shadows",
-    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #606b85","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 #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 #e1e3ea","comment":"Shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #001489","comment":"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":"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(18, 28, 45, 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, 99, 224, 0.8)","comment":"Shadow for focus ring on interactive elements","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20}px {!palette-blue-60-transparent-80}","name":"shadow-focus"}]
+    "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}px {!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}px {!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"}]
   },
 {
     "categoryName": "colors",
-    "tokens": [{"type":"color","category":"color","value":"rgb(35, 54, 89)","comment":"Default branding color","originalValue":"{!midnight}","name":"color-brand"},{"type":"color","category":"color","value":"rgb(242, 47, 70)","comment":"Twilio brand red","originalValue":"{!amaranth}","name":"color-brand-highlight"},{"type":"color","category":"color","value":"rgb(255, 255, 255)","comment":"Gray Color 0","originalValue":"{!palette-gray-0}","name":"color-gray-0"},{"type":"color","category":"color","value":"rgb(244, 244, 246)","comment":"Gray Color 1","originalValue":"{!palette-gray-10}","name":"color-gray-10"},{"type":"color","category":"color","value":"rgb(18, 28, 45)","comment":"Gray Color 10","originalValue":"{!palette-gray-100}","name":"color-gray-100"},{"type":"color","category":"color","value":"rgb(225, 227, 234)","comment":"Gray Color 2","originalValue":"{!palette-gray-20}","name":"color-gray-20"},{"type":"color","category":"color","value":"rgb(202, 205, 216)","comment":"Gray Color 3","originalValue":"{!palette-gray-30}","name":"color-gray-30"},{"type":"color","category":"color","value":"rgb(174, 178, 193)","comment":"Gray Color 4","originalValue":"{!palette-gray-40}","name":"color-gray-40"},{"type":"color","category":"color","value":"rgb(136, 145, 170)","comment":"Gray Color 5","originalValue":"{!palette-gray-50}","name":"color-gray-50"},{"type":"color","category":"color","value":"rgb(96, 107, 133)","comment":"Gray Color 6","originalValue":"{!palette-gray-60}","name":"color-gray-60"},{"type":"color","category":"color","value":"rgb(75, 86, 113)","comment":"Gray Color 7","originalValue":"{!palette-gray-70}","name":"color-gray-70"},{"type":"color","category":"color","value":"rgb(57, 71, 98)","comment":"Gray Color 8","originalValue":"{!palette-gray-80}","name":"color-gray-80"},{"type":"color","category":"color","value":"rgb(31, 48, 76)","comment":"Gray Color 9","originalValue":"{!palette-gray-90}","name":"color-gray-90"}]
+    "tokens": [{"type":"color","category":"color","value":"rgb(0, 20, 137)","comment":"Default branding color","originalValue":"{!palette-blue-80}","name":"color-brand"},{"type":"color","category":"color","value":"rgb(242, 47, 70)","comment":"Twilio brand red","originalValue":"{!amaranth}","name":"color-brand-highlight"},{"type":"color","category":"color","value":"rgb(255, 255, 255)","comment":"Gray Color 0","originalValue":"{!palette-gray-0}","name":"color-gray-0"},{"type":"color","category":"color","value":"rgb(244, 244, 246)","comment":"Gray Color 1","originalValue":"{!palette-gray-10}","name":"color-gray-10"},{"type":"color","category":"color","value":"rgb(18, 28, 45)","comment":"Gray Color 10","originalValue":"{!palette-gray-100}","name":"color-gray-100"},{"type":"color","category":"color","value":"rgb(225, 227, 234)","comment":"Gray Color 2","originalValue":"{!palette-gray-20}","name":"color-gray-20"},{"type":"color","category":"color","value":"rgb(202, 205, 216)","comment":"Gray Color 3","originalValue":"{!palette-gray-30}","name":"color-gray-30"},{"type":"color","category":"color","value":"rgb(174, 178, 193)","comment":"Gray Color 4","originalValue":"{!palette-gray-40}","name":"color-gray-40"},{"type":"color","category":"color","value":"rgb(136, 145, 170)","comment":"Gray Color 5","originalValue":"{!palette-gray-50}","name":"color-gray-50"},{"type":"color","category":"color","value":"rgb(96, 107, 133)","comment":"Gray Color 6","originalValue":"{!palette-gray-60}","name":"color-gray-60"},{"type":"color","category":"color","value":"rgb(75, 86, 113)","comment":"Gray Color 7","originalValue":"{!palette-gray-70}","name":"color-gray-70"},{"type":"color","category":"color","value":"rgb(57, 71, 98)","comment":"Gray Color 8","originalValue":"{!palette-gray-80}","name":"color-gray-80"},{"type":"color","category":"color","value":"rgb(31, 48, 76)","comment":"Gray Color 9","originalValue":"{!palette-gray-90}","name":"color-gray-90"}]
   },
@@ -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(75, 86, 113)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(136, 145, 170)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(18, 28, 45)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(4, 60, 181)","comment":"Link text","originalValue":"{!palette-blue-70}","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(75, 86, 113)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"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(75, 86, 113)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(136, 145, 170)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
+    "tokens": [{"type":"color","category":"text-color","value":"rgb(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"}]
   },
@@ -56,0 +56,0 @@ {

dist/tokens.ios.json

@@ -6,2 +6,23 @@ {
       "category": "background-color",
+      "value": "rgb(200, 175, 240)",
+      "comment": "User avatar background color",
+      "name": "colorBackgroundUser"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
+      "value": "rgb(209, 250, 224)",
+      "comment": "Trial account background color",
+      "name": "colorBackgroundTrial"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
+      "value": "rgb(255, 241, 179)",
+      "comment": "Subaccount background color",
+      "name": "colorBackgroundSubaccount"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(3, 11, 93)",
@@ -35,2 +56,9 @@ "comment": "Darker background for primary actions or highlights",
       "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.",
+      "name": "colorBackgroundInverseLight"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(244, 124, 34)",
@@ -57,3 +85,3 @@ "comment": "Warning background color",
       "category": "background-color",
-      "value": "rgb(174, 178, 193)",
+      "value": "rgb(225, 227, 234)",
       "comment": "Dark default background color",
@@ -121,3 +149,10 @@ "name": "colorBackgroundDark"
       "category": "background-color",
-      "value": "rgb(35, 54, 89)",
+      "value": "rgb(6, 3, 58)",
+      "comment": "Darkest background for primary actions or highlights",
+      "name": "colorBackgroundPrimaryDarkest"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
+      "value": "rgb(0, 20, 137)",
       "comment": "Primary brand background, accessible with inverse text",
@@ -207,3 +242,10 @@ "name": "colorBackgroundBrand"
       "value": "rgb(18, 28, 45)",
-      "comment": "Inverse background color for any container, the darkest gray in the system",
+      "comment": "Inverse background color of the main page body, the darkest gray in the system",
+      "name": "colorBackgroundBodyInverse"
+    },
+    {
+      "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.",
       "name": "colorBackgroundInverse"
@@ -214,3 +256,3 @@ },
       "category": "background-color",
-      "value": "rgba(18, 28, 45, 0.5)",
+      "value": "rgba(6, 3, 58, 0.4)",
       "comment": "Default background for overlays",
@@ -243,2 +285,9 @@ "name": "colorBackgroundOverlay"
       "category": "border-color",
+      "value": "rgb(255, 255, 255)",
+      "comment": "Lightest border on inverse backgrounds. Must be used on color-background-body-inverse.",
+      "name": "colorBorderInverseLightest"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(3, 11, 93)",
@@ -286,3 +335,3 @@ "comment": "Darker primary border color",
       "category": "border-color",
-      "value": "rgb(174, 178, 193)",
+      "value": "rgb(225, 227, 234)",
       "comment": "Lighter border color",
@@ -315,2 +364,9 @@ "name": "colorBorderLighter"
       "category": "border-color",
+      "value": "rgba(255, 255, 255, 0.9)",
+      "comment": "Lighter border on inverse backgrounds. Must be used on color-background-body-inverse.",
+      "name": "colorBorderInverseLighter"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(237, 253, 243)",
@@ -351,3 +407,3 @@ "comment": "Lightest success border color",
       "category": "border-color",
-      "value": "rgb(174, 178, 193)",
+      "value": "rgb(136, 145, 170)",
       "comment": "Default border color",
@@ -359,2 +415,9 @@ "name": "colorBorder"
       "category": "border-color",
+      "value": "rgba(255, 255, 255, 0.2)",
+      "comment": "Darker border on inverse backgrounds. Must be used on color-background-body-inverse.",
+      "name": "colorBorderInverseDarker"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(254, 245, 238)",
@@ -388,4 +451,4 @@ "comment": "Lightest warning border color",
       "category": "border-color",
-      "value": "rgb(255, 255, 255)",
-      "comment": "Border on inverse backgrounds",
+      "value": "rgba(255, 255, 255, 0.5)",
+      "comment": "Border on inverse backgrounds. Must be used on color-background-body-inverse.",
       "name": "colorBorderInverse"
@@ -403,3 +466,3 @@ },
       "category": "border-color",
-      "value": "rgb(136, 145, 170)",
+      "value": "rgb(202, 205, 216)",
       "comment": "Light border color",
@@ -481,5 +544,5 @@ "name": "colorBorderLight"
       "category": "box-shadow",
-      "value": "0 2px 4px 0 rgba(18, 28, 45, 0.3)",
-      "comment": "Shadow for cards.",
-      "name": "shadowCard"
+      "value": "0 4px 16px 0 rgba(18, 28, 45, 0.2)",
+      "comment": "Default shadow.",
+      "name": "shadow"
     },
@@ -489,5 +552,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 4px rgba(2, 99, 224, 0.8)",
-      "comment": "Shadow for focus ring on interactive elements",
-      "name": "shadowFocus"
+      "value": "0 0 0 1px #ffffff",
+      "comment": "Lightest shadow border on interactive elements on inverse backgrounds.",
+      "name": "shadowBorderInverseLightest"
     },
@@ -497,4 +560,11 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #e1e3ea",
-      "comment": "Shadow border for disabled inputs.",
+      "value": "0 0 0 1px #030b5d",
+      "comment": "Darker shadow border for inputs active.",
+      "name": "shadowBorderPrimaryDarker"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #cacdd8",
+      "comment": "Light shadow border for disabled inputs.",
       "name": "shadowBorderLight"
@@ -505,5 +575,5 @@ },
       "category": "box-shadow",
-      "value": "0 0 0 1px #606b85",
-      "comment": "Shadow border for inputs.",
-      "name": "shadowBorder"
+      "value": "0 0 0 1px rgba(255, 255, 255, 0.9)",
+      "comment": "Light shadow border on interactive elements on inverse backgrounds.",
+      "name": "shadowBorderInverseLight"
     },
@@ -513,5 +583,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #001489",
-      "comment": "Shadow border for inputs hover.",
-      "name": "shadowBorderPrimaryDark"
+      "value": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
+      "comment": "Low elevation default shadow.",
+      "name": "shadowLow"
     },
@@ -521,5 +591,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #030b5d",
-      "comment": "Shadow border for inputs active.",
-      "name": "shadowBorderPrimaryDarker"
+      "value": "0 0 0 4px rgba(2, 99, 224, 0.7)",
+      "comment": "Shadow for focus ring on interactive elements.",
+      "name": "shadowFocus"
     },
@@ -529,5 +599,5 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #d61f1f",
-      "comment": "Shadow border for error inputs.",
-      "name": "shadowBorderError"
+      "value": "0 0 0 4px rgba(255, 255, 255, 0.4)",
+      "comment": "Shadow for focus ring on interactive elements on inverse backgrounds.",
+      "name": "shadowFocusInverse"
     },
@@ -542,2 +612,58 @@ {
     {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 16px 24px 0 rgba(18, 28, 45, 0.2)",
+      "comment": "High elevation default shadow.",
+      "name": "shadowHigh"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #e1e3ea",
+      "comment": "Lighter shadow border for disabled inputs.",
+      "name": "shadowBorderLighter"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #d61f1f",
+      "comment": "Shadow border for error inputs.",
+      "name": "shadowBorderError"
+    },
+    {
+      "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.",
+      "name": "shadowBorderInverseDarker"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #001489",
+      "comment": "Dark shadow border for inputs hover.",
+      "name": "shadowBorderPrimaryDark"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 0 0 1px #8891aa",
+      "comment": "Shadow border for inputs.",
+      "name": "shadowBorder"
+    },
+    {
+      "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.",
+      "name": "shadowBorderInverse"
+    },
+    {
+      "type": "shadow",
+      "category": "box-shadow",
+      "value": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
+      "comment": "Shadow for cards.",
+      "name": "shadowCard"
+    },
+    {
       "category": "font",
@@ -809,3 +935,3 @@ "type": "font",
       "category": "color",
-      "value": "rgb(35, 54, 89)",
+      "value": "rgb(0, 20, 137)",
       "comment": "Default branding color",
@@ -1427,4 +1553,11 @@ "name": "colorBrand"
       "category": "text-color",
+      "value": "rgb(109, 46, 209)",
+      "comment": "Color for text indicating a new status.",
+      "name": "colorTextNew"
+    },
+    {
+      "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-inverse.",
+      "comment": "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
       "name": "colorTextInverseWeak"
@@ -1449,3 +1582,3 @@ },
       "category": "text-color",
-      "value": "rgb(75, 86, 113)",
+      "value": "rgb(96, 107, 133)",
       "comment": "Weak body text for visual hierarchy.",
@@ -1464,3 +1597,3 @@ "name": "colorTextWeak"
       "category": "text-color",
-      "value": "rgb(75, 86, 113)",
+      "value": "rgb(96, 107, 133)",
       "comment": "Default icon color.",
@@ -1472,3 +1605,3 @@ "name": "colorTextIcon"
       "category": "text-color",
-      "value": "rgb(4, 60, 181)",
+      "value": "rgb(2, 99, 224)",
       "comment": "Link text",
@@ -1494,2 +1627,9 @@ "name": "colorTextLink"
       "category": "text-color",
+      "value": "rgb(136, 145, 170)",
+      "comment": "Default icon color for inverse backgrounds.",
+      "name": "colorTextIconInverse"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(0, 20, 137)",
@@ -1523,2 +1663,9 @@ "comment": "Dark shade of link text to be used in interactions",
       "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.",
+      "name": "colorTextInverseWeaker"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(102, 179, 255)",
@@ -1532,3 +1679,3 @@ "comment": "Light shade of link text to be used in interactions",
       "value": "rgb(255, 255, 255)",
-      "comment": "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.",
+      "comment": "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
       "name": "colorTextInverse"
@@ -1539,5 +1686,5 @@ },
       "category": "text-color",
-      "value": "rgb(136, 145, 170)",
-      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
-      "name": "colorTextWeaker"
+      "value": "rgb(245, 138, 138)",
+      "comment": "Light error text for inputs and error misc",
+      "name": "colorTextErrorLight"
     },
@@ -1547,5 +1694,5 @@ {
       "category": "text-color",
-      "value": "rgb(75, 86, 113)",
-      "comment": "Input placeholder text.",
-      "name": "colorTextPlaceholder"
+      "value": "rgb(174, 178, 193)",
+      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
+      "name": "colorTextWeaker"
     },
@@ -1567,9 +1714,2 @@ {
     {
-      "type": "color",
-      "category": "text-color",
-      "value": "rgb(18, 28, 45)",
-      "comment": "Text color for field labels.",
-      "name": "colorTextLabel"
-    },
-    {
       "type": "z-index",
@@ -1576,0 +1716,0 @@ "category": "z-index",

dist/tokens.json

 {
+  "color-background-user": "rgb(200, 175, 240)",
+  "color-background-trial": "rgb(209, 250, 224)",
+  "color-background-subaccount": "rgb(255, 241, 179)",
   "color-background-primary-darker": "rgb(3, 11, 93)",
@@ -6,6 +9,7 @@ "color-background-primary-lighter": "rgb(204, 228, 255)",
   "color-background-destructive-lighter": "rgb(252, 207, 207)",
+  "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-neutral-lightest": "rgb(235, 244, 255)",
-  "color-background-dark": "rgb(174, 178, 193)",
+  "color-background-dark": "rgb(225, 227, 234)",
   "color-background-destructive": "rgb(214, 31, 31)",
@@ -19,3 +23,4 @@ "color-background-primary": "rgb(2, 99, 224)",
   "color-background-primary-lightest": "rgb(235, 244, 255)",
-  "color-background-brand": "rgb(35, 54, 89)",
+  "color-background-primary-darkest": "rgb(6, 3, 58)",
+  "color-background-brand": "rgb(0, 20, 137)",
   "color-background-error": "rgb(214, 31, 31)",
@@ -32,7 +37,9 @@ "color-background-required": "rgb(235, 86, 86)",
   "color-background-brand-highlight": "rgb(242, 47, 70)",
-  "color-background-inverse": "rgb(18, 28, 45)",
-  "color-background-overlay": "rgba(18, 28, 45, 0.5)",
+  "color-background-body-inverse": "rgb(18, 28, 45)",
+  "color-background-inverse": "rgba(255, 255, 255, 0.1)",
+  "color-background-overlay": "rgba(6, 3, 58, 0.4)",
   "color-background-darkest": "rgb(75, 86, 113)",
   "color-border-destructive-lighter": "rgb(252, 207, 207)",
   "color-border-primary-lighter": "rgb(204, 228, 255)",
+  "color-border-inverse-lightest": "rgb(255, 255, 255)",
   "color-border-primary-darker": "rgb(3, 11, 93)",
@@ -44,6 +51,7 @@ "color-border-warning": "rgb(244, 124, 34)",
   "color-border-success": "rgb(20, 176, 83)",
-  "color-border-lighter": "rgb(174, 178, 193)",
+  "color-border-lighter": "rgb(225, 227, 234)",
   "color-border-error-lightest": "rgb(254, 236, 236)",
   "color-border-dark": "rgb(96, 107, 133)",
   "color-border-warning-light": "rgb(255, 179, 122)",
+  "color-border-inverse-lighter": "rgba(255, 255, 255, 0.9)",
   "color-border-success-lightest": "rgb(237, 253, 243)",
@@ -54,3 +62,4 @@ "color-border-error": "rgb(214, 31, 31)",
   "color-border-primary-light": "rgb(102, 179, 255)",
-  "color-border": "rgb(174, 178, 193)",
+  "color-border": "rgb(136, 145, 170)",
+  "color-border-inverse-darker": "rgba(255, 255, 255, 0.2)",
   "color-border-warning-lightest": "rgb(254, 245, 238)",
@@ -60,5 +69,5 @@ "color-border-primary-dark": "rgb(0, 20, 137)",
   "color-border-neutral-light": "rgb(136, 145, 170)",
-  "color-border-inverse": "rgb(255, 255, 255)",
+  "color-border-inverse": "rgba(255, 255, 255, 0.5)",
   "color-border-error-light": "rgb(245, 138, 138)",
-  "color-border-light": "rgb(136, 145, 170)",
+  "color-border-light": "rgb(202, 205, 216)",
   "border-radius-0": "0",
@@ -74,10 +83,19 @@ "border-radius-10": "3px",
   "border-width-40": "8px",
-  "shadow-card": "0 2px 4px 0 rgba(18, 28, 45, 0.3)",
-  "shadow-focus": "0 0 0 4px rgba(2, 99, 224, 0.8)",
-  "shadow-border-light": "0 0 0 1px #e1e3ea",
-  "shadow-border": "0 0 0 1px #606b85",
-  "shadow-border-primary-dark": "0 0 0 1px #001489",
+  "shadow": "0 4px 16px 0 rgba(18, 28, 45, 0.2)",
+  "shadow-border-inverse-lightest": "0 0 0 1px #ffffff",
   "shadow-border-primary-darker": "0 0 0 1px #030b5d",
+  "shadow-border-light": "0 0 0 1px #cacdd8",
+  "shadow-border-inverse-light": "0 0 0 1px rgba(255, 255, 255, 0.9)",
+  "shadow-low": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
+  "shadow-focus": "0 0 0 4px rgba(2, 99, 224, 0.7)",
+  "shadow-focus-inverse": "0 0 0 4px rgba(255, 255, 255, 0.4)",
+  "shadow-border-error-dark": "0 0 0 1px #750c0c",
+  "shadow-high": "0 16px 24px 0 rgba(18, 28, 45, 0.2)",
+  "shadow-border-lighter": "0 0 0 1px #e1e3ea",
   "shadow-border-error": "0 0 0 1px #d61f1f",
-  "shadow-border-error-dark": "0 0 0 1px #750c0c",
+  "shadow-border-inverse-darker": "0 0 0 1px rgba(255, 255, 255, 0.2)",
+  "shadow-border-primary-dark": "0 0 0 1px #001489",
+  "shadow-border": "0 0 0 1px #8891aa",
+  "shadow-border-inverse": "0 0 0 1px rgba(255, 255, 255, 0.5)",
+  "shadow-card": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
   "font-family-text": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
@@ -121,3 +139,3 @@ "font-family-code": "'Fira Mono', 'Courier New', Courier, monospace",
   "color-gray-40": "rgb(174, 178, 193)",
-  "color-brand": "rgb(35, 54, 89)",
+  "color-brand": "rgb(0, 20, 137)",
   "color-gray-30": "rgb(202, 205, 216)",
@@ -216,11 +234,13 @@ "color-gray-20": "rgb(225, 227, 234)",
   "color-text-warning": "rgb(244, 124, 34)",
+  "color-text-new": "rgb(109, 46, 209)",
   "color-text-inverse-weak": "rgb(136, 145, 170)",
   "color-text-link-destructive-darker": "rgb(117, 12, 12)",
   "color-text-success": "rgb(20, 176, 83)",
-  "color-text-weak": "rgb(75, 86, 113)",
+  "color-text-weak": "rgb(96, 107, 133)",
   "color-text-link-destructive-light": "rgb(245, 138, 138)",
-  "color-text-icon": "rgb(75, 86, 113)",
-  "color-text-link": "rgb(4, 60, 181)",
+  "color-text-icon": "rgb(96, 107, 133)",
+  "color-text-link": "rgb(2, 99, 224)",
   "color-text-error-dark": "rgb(173, 17, 17)",
   "color-text-error": "rgb(214, 31, 31)",
+  "color-text-icon-inverse": "rgb(136, 145, 170)",
   "color-text-link-dark": "rgb(0, 20, 137)",
@@ -230,9 +250,9 @@ "color-text-brand-inverse": "rgb(255, 255, 255)",
   "color-text-brand-highlight": "rgb(242, 47, 70)",
+  "color-text-inverse-weaker": "rgb(96, 107, 133)",
   "color-text-link-light": "rgb(102, 179, 255)",
   "color-text-inverse": "rgb(255, 255, 255)",
-  "color-text-weaker": "rgb(136, 145, 170)",
-  "color-text-placeholder": "rgb(75, 86, 113)",
+  "color-text-error-light": "rgb(245, 138, 138)",
+  "color-text-weaker": "rgb(174, 178, 193)",
   "color-text-warning-dark": "rgb(195, 83, 35)",
   "color-text-link-destructive-dark": "rgb(173, 17, 17)",
-  "color-text-label": "rgb(18, 28, 45)",
   "z-index-0": "0",
@@ -239,0 +259,0 @@ "z-index-90": "90",

package.json

 {
   "name": "@twilio-paste/design-tokens",
-  "version": "5.5.0",
+  "version": "6.0.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": "9c20ebf8e3dcb9cd7a5a1ebf2a368c579092c6a8"
+  "gitHead": "3551a3cdc23dd18566dceba80a16b22026b38bed"
 }

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

1132711

increased by12.68%

Lines of code

23621

increased by8.75%

No dependency changes