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

Comparing version 4.3.0 to 4.4.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [4.4.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@4.3.0...@twilio-paste/design-tokens@4.4.0) (2020-04-07)
+
+
+### Features
+
+* **design-tokens:** add overlay background token, switch to rgb colors ([d9f783b](https://github.com/twilio-labs/paste/commit/d9f783b5d46767ab2d433f5619b71fe98c0092fa))
+
+
+
+
+
 # [4.3.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@4.2.0...@twilio-paste/design-tokens@4.3.0) (2020-03-11)
@@ -8,0 +19,0 @@

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

@@ -9,88 +9,89 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
-export declare const colorBackground = "#f8f8f9";
-export declare const colorBackgroundBody = "#ffffff";
-export declare const colorBackgroundBrand = "#233659";
-export declare const colorBackgroundBrandHighlight = "#f22f46";
-export declare const colorBackgroundDestructive = "#e22525";
-export declare const colorBackgroundDestructiveDark = "#921200";
-export declare const colorBackgroundDestructiveDarker = "#600101";
-export declare const colorBackgroundDestructiveLight = "#ecb6b6";
-export declare const colorBackgroundDestructiveLighter = "#f5dddd";
-export declare const colorBackgroundDestructiveLightest = "#ffe9e7";
-export declare const colorBackgroundError = "#e22525";
-export declare const colorBackgroundErrorLightest = "#ffe9e7";
-export declare const colorBackgroundInverse = "#4f5355";
-export declare const colorBackgroundNeutralLightest = "#f5f8ff";
-export declare const colorBackgroundPrimary = "#027ac5";
-export declare const colorBackgroundPrimaryDark = "#003e82";
-export declare const colorBackgroundPrimaryDarker = "#032c5e";
-export declare const colorBackgroundPrimaryLight = "#b3d3e9";
-export declare const colorBackgroundPrimaryLighter = "#dceaf4";
-export declare const colorBackgroundPrimaryLightest = "#f5f8ff";
-export declare const colorBackgroundRequired = "#de5858";
-export declare const colorBackgroundRowStriped = "#f8f8f9";
-export declare const colorBackgroundSuccess = "#00994a";
-export declare const colorBackgroundSuccessLightest = "#e0ffef";
-export declare const colorBackgroundWarning = "#e46216";
-export declare const colorBackgroundWarningLightest = "#ffecd8";
-export declare const colorBorder = "#c8cccf";
-export declare const colorBorderDark = "#888c8e";
-export declare const colorBorderDestructive = "#e22525";
-export declare const colorBorderDestructiveDark = "#921200";
-export declare const colorBorderDestructiveDarker = "#600101";
-export declare const colorBorderDestructiveLight = "#ecb6b6";
-export declare const colorBorderDestructiveLighter = "#f5dddd";
-export declare const colorBorderError = "#e22525";
-export declare const colorBorderErrorLight = "#de5858";
-export declare const colorBorderErrorLightest = "#ffe9e7";
-export declare const colorBorderInput = "#888c8e";
-export declare const colorBorderInputFocus = "#027ac5";
-export declare const colorBorderInputHover = "#027ac5";
-export declare const colorBorderLight = "#e4e7e9";
-export declare const colorBorderNeutralLight = "#c8cccf";
-export declare const colorBorderPrimary = "#027ac5";
-export declare const colorBorderPrimaryDark = "#003e82";
-export declare const colorBorderPrimaryDarker = "#032c5e";
-export declare const colorBorderPrimaryLight = "#b3d3e9";
-export declare const colorBorderPrimaryLighter = "#dceaf4";
-export declare const colorBorderSuccess = "#00994a";
-export declare const colorBorderSuccessLightest = "#e0ffef";
-export declare const colorBorderWarning = "#e46216";
-export declare const colorBorderWarningLight = "#f28510";
-export declare const colorBorderWarningLightest = "#ffecd8";
-export declare const colorBrand = "#233659";
-export declare const colorBrandHighlight = "#f22f46";
-export declare const colorGray0 = "#ffffff";
-export declare const colorGray10 = "#f9fafb";
-export declare const colorGray100 = "#282a2b";
-export declare const colorGray20 = "#f8f8f9";
-export declare const colorGray30 = "#f2f3f4";
-export declare const colorGray40 = "#e4e7e9";
-export declare const colorGray50 = "#c8cccf";
-export declare const colorGray60 = "#888c8e";
-export declare const colorGray70 = "#666a6d";
-export declare const colorGray80 = "#4f5355";
-export declare const colorGray90 = "#424547";
-export declare const colorText = "#282a2b";
-export declare const colorTextBrandHighlight = "#f22f46";
-export declare const colorTextBrandInverse = "#ffffff";
-export declare const colorTextError = "#e22525";
-export declare const colorTextErrorDark = "#921200";
-export declare const colorTextIcon = "#666a6d";
-export declare const colorTextInverse = "#ffffff";
-export declare const colorTextInverseWeak = "#c8cccf";
-export declare const colorTextLabel = "#282a2b";
-export declare const colorTextLink = "#005ea6";
-export declare const colorTextLinkDark = "#003e82";
-export declare const colorTextLinkDarker = "#032c5e";
-export declare const colorTextLinkDestructive = "#e22525";
-export declare const colorTextLinkDestructiveDark = "#b20600";
-export declare const colorTextLinkDestructiveDarker = "#921200";
-export declare const colorTextLinkDestructiveLight = "#ecb6b6";
-export declare const colorTextLinkLight = "#b3d3e9";
-export declare const colorTextPlaceholder = "#666a6d";
-export declare const colorTextSuccess = "#00994a";
-export declare const colorTextWarning = "#e46216";
-export declare const colorTextWarningDark = "#a83e00";
-export declare const colorTextWeak = "#666a6d";
+export declare const colorBackground = "rgb(248, 248, 249)";
+export declare const colorBackgroundBody = "rgb(255, 255, 255)";
+export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
+export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundDestructive = "rgb(226, 37, 37)";
+export declare const colorBackgroundDestructiveDark = "rgb(146, 18, 0)";
+export declare const colorBackgroundDestructiveDarker = "rgb(96, 1, 1)";
+export declare const colorBackgroundDestructiveLight = "rgb(236, 182, 182)";
+export declare const colorBackgroundDestructiveLighter = "rgb(245, 221, 221)";
+export declare const colorBackgroundDestructiveLightest = "rgb(255, 233, 231)";
+export declare const colorBackgroundError = "rgb(226, 37, 37)";
+export declare const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
+export declare const colorBackgroundInverse = "rgb(79, 83, 85)";
+export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
+export declare const colorBackgroundPrimary = "rgb(2, 122, 197)";
+export declare const colorBackgroundPrimaryDark = "rgb(0, 62, 130)";
+export declare const colorBackgroundPrimaryDarker = "rgb(3, 44, 94)";
+export declare const colorBackgroundPrimaryLight = "rgb(179, 211, 233)";
+export declare const colorBackgroundPrimaryLighter = "rgb(220, 234, 244)";
+export declare const colorBackgroundPrimaryLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundRequired = "rgb(222, 88, 88)";
+export declare const colorBackgroundRowStriped = "rgb(248, 248, 249)";
+export declare const colorBackgroundSuccess = "rgb(0, 153, 74)";
+export declare const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBackgroundWarning = "rgb(228, 98, 22)";
+export declare const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
+export declare const colorBorder = "rgb(200, 204, 207)";
+export declare const colorBorderDark = "rgb(136, 140, 142)";
+export declare const colorBorderDestructive = "rgb(226, 37, 37)";
+export declare const colorBorderDestructiveDark = "rgb(146, 18, 0)";
+export declare const colorBorderDestructiveDarker = "rgb(96, 1, 1)";
+export declare const colorBorderDestructiveLight = "rgb(236, 182, 182)";
+export declare const colorBorderDestructiveLighter = "rgb(245, 221, 221)";
+export declare const colorBorderError = "rgb(226, 37, 37)";
+export declare const colorBorderErrorLight = "rgb(222, 88, 88)";
+export declare const colorBorderErrorLightest = "rgb(255, 233, 231)";
+export declare const colorBorderInput = "rgb(136, 140, 142)";
+export declare const colorBorderInputFocus = "rgb(2, 122, 197)";
+export declare const colorBorderInputHover = "rgb(2, 122, 197)";
+export declare const colorBorderLight = "rgb(228, 231, 233)";
+export declare const colorBorderNeutralLight = "rgb(200, 204, 207)";
+export declare const colorBorderPrimary = "rgb(2, 122, 197)";
+export declare const colorBorderPrimaryDark = "rgb(0, 62, 130)";
+export declare const colorBorderPrimaryDarker = "rgb(3, 44, 94)";
+export declare const colorBorderPrimaryLight = "rgb(179, 211, 233)";
+export declare const colorBorderPrimaryLighter = "rgb(220, 234, 244)";
+export declare const colorBorderSuccess = "rgb(0, 153, 74)";
+export declare const colorBorderSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBorderWarning = "rgb(228, 98, 22)";
+export declare const colorBorderWarningLight = "rgb(242, 133, 16)";
+export declare const colorBorderWarningLightest = "rgb(255, 236, 216)";
+export declare const colorBrand = "rgb(35, 54, 89)";
+export declare const colorBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorGray0 = "rgb(255, 255, 255)";
+export declare const colorGray10 = "rgb(249, 250, 251)";
+export declare const colorGray100 = "rgb(40, 42, 43)";
+export declare const colorGray20 = "rgb(248, 248, 249)";
+export declare const colorGray30 = "rgb(242, 243, 244)";
+export declare const colorGray40 = "rgb(228, 231, 233)";
+export declare const colorGray50 = "rgb(200, 204, 207)";
+export declare const colorGray60 = "rgb(136, 140, 142)";
+export declare const colorGray70 = "rgb(102, 106, 109)";
+export declare const colorGray80 = "rgb(79, 83, 85)";
+export declare const colorGray90 = "rgb(66, 69, 71)";
+export declare const colorText = "rgb(40, 42, 43)";
+export declare const colorTextBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorTextBrandInverse = "rgb(255, 255, 255)";
+export declare const colorTextError = "rgb(226, 37, 37)";
+export declare const colorTextErrorDark = "rgb(146, 18, 0)";
+export declare const colorTextIcon = "rgb(102, 106, 109)";
+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 colorTextLink = "rgb(0, 94, 166)";
+export declare const colorTextLinkDark = "rgb(0, 62, 130)";
+export declare const colorTextLinkDarker = "rgb(3, 44, 94)";
+export declare const colorTextLinkDestructive = "rgb(226, 37, 37)";
+export declare const colorTextLinkDestructiveDark = "rgb(178, 6, 0)";
+export declare const colorTextLinkDestructiveDarker = "rgb(146, 18, 0)";
+export declare const colorTextLinkDestructiveLight = "rgb(236, 182, 182)";
+export declare const colorTextLinkLight = "rgb(179, 211, 233)";
+export declare const colorTextPlaceholder = "rgb(102, 106, 109)";
+export declare const colorTextSuccess = "rgb(0, 153, 74)";
+export declare const colorTextWarning = "rgb(228, 98, 22)";
+export declare const colorTextWarningDark = "rgb(168, 62, 0)";
+export declare const colorTextWeak = "rgb(102, 106, 109)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -188,55 +189,56 @@ export declare const fontFamilyText = "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif";
 export declare const backgroundColors: {
-  colorBackground: "#f8f8f9";
-  colorBackgroundBody: "#ffffff";
-  colorBackgroundBrand: "#233659";
-  colorBackgroundBrandHighlight: "#f22f46";
-  colorBackgroundDestructive: "#e22525";
-  colorBackgroundDestructiveDark: "#921200";
-  colorBackgroundDestructiveDarker: "#600101";
-  colorBackgroundDestructiveLight: "#ecb6b6";
-  colorBackgroundDestructiveLighter: "#f5dddd";
-  colorBackgroundDestructiveLightest: "#ffe9e7";
-  colorBackgroundError: "#e22525";
-  colorBackgroundErrorLightest: "#ffe9e7";
-  colorBackgroundInverse: "#4f5355";
-  colorBackgroundNeutralLightest: "#f5f8ff";
-  colorBackgroundPrimary: "#027ac5";
-  colorBackgroundPrimaryDark: "#003e82";
-  colorBackgroundPrimaryDarker: "#032c5e";
-  colorBackgroundPrimaryLight: "#b3d3e9";
-  colorBackgroundPrimaryLighter: "#dceaf4";
-  colorBackgroundPrimaryLightest: "#f5f8ff";
-  colorBackgroundRequired: "#de5858";
-  colorBackgroundRowStriped: "#f8f8f9";
-  colorBackgroundSuccess: "#00994a";
-  colorBackgroundSuccessLightest: "#e0ffef";
-  colorBackgroundWarning: "#e46216";
-  colorBackgroundWarningLightest: "#ffecd8";
+  colorBackground: "rgb(248, 248, 249)";
+  colorBackgroundBody: "rgb(255, 255, 255)";
+  colorBackgroundBrand: "rgb(35, 54, 89)";
+  colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundDestructive: "rgb(226, 37, 37)";
+  colorBackgroundDestructiveDark: "rgb(146, 18, 0)";
+  colorBackgroundDestructiveDarker: "rgb(96, 1, 1)";
+  colorBackgroundDestructiveLight: "rgb(236, 182, 182)";
+  colorBackgroundDestructiveLighter: "rgb(245, 221, 221)";
+  colorBackgroundDestructiveLightest: "rgb(255, 233, 231)";
+  colorBackgroundError: "rgb(226, 37, 37)";
+  colorBackgroundErrorLightest: "rgb(255, 233, 231)";
+  colorBackgroundInverse: "rgb(79, 83, 85)";
+  colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
+  colorBackgroundOverlay: "rgba(40, 42, 43, 0.5)";
+  colorBackgroundPrimary: "rgb(2, 122, 197)";
+  colorBackgroundPrimaryDark: "rgb(0, 62, 130)";
+  colorBackgroundPrimaryDarker: "rgb(3, 44, 94)";
+  colorBackgroundPrimaryLight: "rgb(179, 211, 233)";
+  colorBackgroundPrimaryLighter: "rgb(220, 234, 244)";
+  colorBackgroundPrimaryLightest: "rgb(245, 248, 255)";
+  colorBackgroundRequired: "rgb(222, 88, 88)";
+  colorBackgroundRowStriped: "rgb(248, 248, 249)";
+  colorBackgroundSuccess: "rgb(0, 153, 74)";
+  colorBackgroundSuccessLightest: "rgb(224, 255, 239)";
+  colorBackgroundWarning: "rgb(228, 98, 22)";
+  colorBackgroundWarningLightest: "rgb(255, 236, 216)";
 };
 export declare const borderColors: {
-  colorBorder: "#c8cccf";
-  colorBorderDark: "#888c8e";
-  colorBorderDestructive: "#e22525";
-  colorBorderDestructiveDark: "#921200";
-  colorBorderDestructiveDarker: "#600101";
-  colorBorderDestructiveLight: "#ecb6b6";
-  colorBorderDestructiveLighter: "#f5dddd";
-  colorBorderError: "#e22525";
-  colorBorderErrorLight: "#de5858";
-  colorBorderErrorLightest: "#ffe9e7";
-  colorBorderInput: "#888c8e";
-  colorBorderInputFocus: "#027ac5";
-  colorBorderInputHover: "#027ac5";
-  colorBorderLight: "#e4e7e9";
-  colorBorderNeutralLight: "#c8cccf";
-  colorBorderPrimary: "#027ac5";
-  colorBorderPrimaryDark: "#003e82";
-  colorBorderPrimaryDarker: "#032c5e";
-  colorBorderPrimaryLight: "#b3d3e9";
-  colorBorderPrimaryLighter: "#dceaf4";
-  colorBorderSuccess: "#00994a";
-  colorBorderSuccessLightest: "#e0ffef";
-  colorBorderWarning: "#e46216";
-  colorBorderWarningLight: "#f28510";
-  colorBorderWarningLightest: "#ffecd8";
+  colorBorder: "rgb(200, 204, 207)";
+  colorBorderDark: "rgb(136, 140, 142)";
+  colorBorderDestructive: "rgb(226, 37, 37)";
+  colorBorderDestructiveDark: "rgb(146, 18, 0)";
+  colorBorderDestructiveDarker: "rgb(96, 1, 1)";
+  colorBorderDestructiveLight: "rgb(236, 182, 182)";
+  colorBorderDestructiveLighter: "rgb(245, 221, 221)";
+  colorBorderError: "rgb(226, 37, 37)";
+  colorBorderErrorLight: "rgb(222, 88, 88)";
+  colorBorderErrorLightest: "rgb(255, 233, 231)";
+  colorBorderInput: "rgb(136, 140, 142)";
+  colorBorderInputFocus: "rgb(2, 122, 197)";
+  colorBorderInputHover: "rgb(2, 122, 197)";
+  colorBorderLight: "rgb(228, 231, 233)";
+  colorBorderNeutralLight: "rgb(200, 204, 207)";
+  colorBorderPrimary: "rgb(2, 122, 197)";
+  colorBorderPrimaryDark: "rgb(0, 62, 130)";
+  colorBorderPrimaryDarker: "rgb(3, 44, 94)";
+  colorBorderPrimaryLight: "rgb(179, 211, 233)";
+  colorBorderPrimaryLighter: "rgb(220, 234, 244)";
+  colorBorderSuccess: "rgb(0, 153, 74)";
+  colorBorderSuccessLightest: "rgb(224, 255, 239)";
+  colorBorderWarning: "rgb(228, 98, 22)";
+  colorBorderWarningLight: "rgb(242, 133, 16)";
+  colorBorderWarningLightest: "rgb(255, 236, 216)";
 };
@@ -258,15 +260,15 @@ export declare const borderWidths: {
 export declare const colors: {
-  colorBrand: "#233659";
-  colorBrandHighlight: "#f22f46";
-  colorGray0: "#ffffff";
-  colorGray10: "#f9fafb";
-  colorGray100: "#282a2b";
-  colorGray20: "#f8f8f9";
-  colorGray30: "#f2f3f4";
-  colorGray40: "#e4e7e9";
-  colorGray50: "#c8cccf";
-  colorGray60: "#888c8e";
-  colorGray70: "#666a6d";
-  colorGray80: "#4f5355";
-  colorGray90: "#424547";
+  colorBrand: "rgb(35, 54, 89)";
+  colorBrandHighlight: "rgb(242, 47, 70)";
+  colorGray0: "rgb(255, 255, 255)";
+  colorGray10: "rgb(249, 250, 251)";
+  colorGray100: "rgb(40, 42, 43)";
+  colorGray20: "rgb(248, 248, 249)";
+  colorGray30: "rgb(242, 243, 244)";
+  colorGray40: "rgb(228, 231, 233)";
+  colorGray50: "rgb(200, 204, 207)";
+  colorGray60: "rgb(136, 140, 142)";
+  colorGray70: "rgb(102, 106, 109)";
+  colorGray80: "rgb(79, 83, 85)";
+  colorGray90: "rgb(66, 69, 71)";
 };
@@ -367,24 +369,24 @@ export declare const fonts: {
 export declare const textColors: {
-  colorText: "#282a2b";
-  colorTextBrandHighlight: "#f22f46";
-  colorTextBrandInverse: "#ffffff";
-  colorTextError: "#e22525";
-  colorTextErrorDark: "#921200";
-  colorTextIcon: "#666a6d";
-  colorTextInverse: "#ffffff";
-  colorTextInverseWeak: "#c8cccf";
-  colorTextLabel: "#282a2b";
-  colorTextLink: "#005ea6";
-  colorTextLinkDark: "#003e82";
-  colorTextLinkDarker: "#032c5e";
-  colorTextLinkDestructive: "#e22525";
-  colorTextLinkDestructiveDark: "#b20600";
-  colorTextLinkDestructiveDarker: "#921200";
-  colorTextLinkDestructiveLight: "#ecb6b6";
-  colorTextLinkLight: "#b3d3e9";
-  colorTextPlaceholder: "#666a6d";
-  colorTextSuccess: "#00994a";
-  colorTextWarning: "#e46216";
-  colorTextWarningDark: "#a83e00";
-  colorTextWeak: "#666a6d";
+  colorText: "rgb(40, 42, 43)";
+  colorTextBrandHighlight: "rgb(242, 47, 70)";
+  colorTextBrandInverse: "rgb(255, 255, 255)";
+  colorTextError: "rgb(226, 37, 37)";
+  colorTextErrorDark: "rgb(146, 18, 0)";
+  colorTextIcon: "rgb(102, 106, 109)";
+  colorTextInverse: "rgb(255, 255, 255)";
+  colorTextInverseWeak: "rgb(200, 204, 207)";
+  colorTextLabel: "rgb(40, 42, 43)";
+  colorTextLink: "rgb(0, 94, 166)";
+  colorTextLinkDark: "rgb(0, 62, 130)";
+  colorTextLinkDarker: "rgb(3, 44, 94)";
+  colorTextLinkDestructive: "rgb(226, 37, 37)";
+  colorTextLinkDestructiveDark: "rgb(178, 6, 0)";
+  colorTextLinkDestructiveDarker: "rgb(146, 18, 0)";
+  colorTextLinkDestructiveLight: "rgb(236, 182, 182)";
+  colorTextLinkLight: "rgb(179, 211, 233)";
+  colorTextPlaceholder: "rgb(102, 106, 109)";
+  colorTextSuccess: "rgb(0, 153, 74)";
+  colorTextWarning: "rgb(228, 98, 22)";
+  colorTextWarningDark: "rgb(168, 62, 0)";
+  colorTextWeak: "rgb(102, 106, 109)";
 };
@@ -391,0 +393,0 @@ export declare const zIndices: {

dist/themes/console/tokens.common.js

@@ -9,88 +9,89 @@ const borderRadius0 = "0";
 const borderWidth20 = "2px";
-const colorBackground = "#f8f8f9";
-const colorBackgroundBody = "#ffffff";
-const colorBackgroundBrand = "#233659";
-const colorBackgroundBrandHighlight = "#f22f46";
-const colorBackgroundDestructive = "#e22525";
-const colorBackgroundDestructiveDark = "#921200";
-const colorBackgroundDestructiveDarker = "#600101";
-const colorBackgroundDestructiveLight = "#ecb6b6";
-const colorBackgroundDestructiveLighter = "#f5dddd";
-const colorBackgroundDestructiveLightest = "#ffe9e7";
-const colorBackgroundError = "#e22525";
-const colorBackgroundErrorLightest = "#ffe9e7";
-const colorBackgroundInverse = "#4f5355";
-const colorBackgroundNeutralLightest = "#f5f8ff";
-const colorBackgroundPrimary = "#027ac5";
-const colorBackgroundPrimaryDark = "#003e82";
-const colorBackgroundPrimaryDarker = "#032c5e";
-const colorBackgroundPrimaryLight = "#b3d3e9";
-const colorBackgroundPrimaryLighter = "#dceaf4";
-const colorBackgroundPrimaryLightest = "#f5f8ff";
-const colorBackgroundRequired = "#de5858";
-const colorBackgroundRowStriped = "#f8f8f9";
-const colorBackgroundSuccess = "#00994a";
-const colorBackgroundSuccessLightest = "#e0ffef";
-const colorBackgroundWarning = "#e46216";
-const colorBackgroundWarningLightest = "#ffecd8";
-const colorBorder = "#c8cccf";
-const colorBorderDark = "#888c8e";
-const colorBorderDestructive = "#e22525";
-const colorBorderDestructiveDark = "#921200";
-const colorBorderDestructiveDarker = "#600101";
-const colorBorderDestructiveLight = "#ecb6b6";
-const colorBorderDestructiveLighter = "#f5dddd";
-const colorBorderError = "#e22525";
-const colorBorderErrorLight = "#de5858";
-const colorBorderErrorLightest = "#ffe9e7";
-const colorBorderInput = "#888c8e";
-const colorBorderInputFocus = "#027ac5";
-const colorBorderInputHover = "#027ac5";
-const colorBorderLight = "#e4e7e9";
-const colorBorderNeutralLight = "#c8cccf";
-const colorBorderPrimary = "#027ac5";
-const colorBorderPrimaryDark = "#003e82";
-const colorBorderPrimaryDarker = "#032c5e";
-const colorBorderPrimaryLight = "#b3d3e9";
-const colorBorderPrimaryLighter = "#dceaf4";
-const colorBorderSuccess = "#00994a";
-const colorBorderSuccessLightest = "#e0ffef";
-const colorBorderWarning = "#e46216";
-const colorBorderWarningLight = "#f28510";
-const colorBorderWarningLightest = "#ffecd8";
-const colorBrand = "#233659";
-const colorBrandHighlight = "#f22f46";
-const colorGray0 = "#ffffff";
-const colorGray10 = "#f9fafb";
-const colorGray100 = "#282a2b";
-const colorGray20 = "#f8f8f9";
-const colorGray30 = "#f2f3f4";
-const colorGray40 = "#e4e7e9";
-const colorGray50 = "#c8cccf";
-const colorGray60 = "#888c8e";
-const colorGray70 = "#666a6d";
-const colorGray80 = "#4f5355";
-const colorGray90 = "#424547";
-const colorText = "#282a2b";
-const colorTextBrandHighlight = "#f22f46";
-const colorTextBrandInverse = "#ffffff";
-const colorTextError = "#e22525";
-const colorTextErrorDark = "#921200";
-const colorTextIcon = "#666a6d";
-const colorTextInverse = "#ffffff";
-const colorTextInverseWeak = "#c8cccf";
-const colorTextLabel = "#282a2b";
-const colorTextLink = "#005ea6";
-const colorTextLinkDark = "#003e82";
-const colorTextLinkDarker = "#032c5e";
-const colorTextLinkDestructive = "#e22525";
-const colorTextLinkDestructiveDark = "#b20600";
-const colorTextLinkDestructiveDarker = "#921200";
-const colorTextLinkDestructiveLight = "#ecb6b6";
-const colorTextLinkLight = "#b3d3e9";
-const colorTextPlaceholder = "#666a6d";
-const colorTextSuccess = "#00994a";
-const colorTextWarning = "#e46216";
-const colorTextWarningDark = "#a83e00";
-const colorTextWeak = "#666a6d";
+const colorBackground = "rgb(248, 248, 249)";
+const colorBackgroundBody = "rgb(255, 255, 255)";
+const colorBackgroundBrand = "rgb(35, 54, 89)";
+const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+const colorBackgroundDestructive = "rgb(226, 37, 37)";
+const colorBackgroundDestructiveDark = "rgb(146, 18, 0)";
+const colorBackgroundDestructiveDarker = "rgb(96, 1, 1)";
+const colorBackgroundDestructiveLight = "rgb(236, 182, 182)";
+const colorBackgroundDestructiveLighter = "rgb(245, 221, 221)";
+const colorBackgroundDestructiveLightest = "rgb(255, 233, 231)";
+const colorBackgroundError = "rgb(226, 37, 37)";
+const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
+const colorBackgroundInverse = "rgb(79, 83, 85)";
+const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
+const colorBackgroundPrimary = "rgb(2, 122, 197)";
+const colorBackgroundPrimaryDark = "rgb(0, 62, 130)";
+const colorBackgroundPrimaryDarker = "rgb(3, 44, 94)";
+const colorBackgroundPrimaryLight = "rgb(179, 211, 233)";
+const colorBackgroundPrimaryLighter = "rgb(220, 234, 244)";
+const colorBackgroundPrimaryLightest = "rgb(245, 248, 255)";
+const colorBackgroundRequired = "rgb(222, 88, 88)";
+const colorBackgroundRowStriped = "rgb(248, 248, 249)";
+const colorBackgroundSuccess = "rgb(0, 153, 74)";
+const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+const colorBackgroundWarning = "rgb(228, 98, 22)";
+const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
+const colorBorder = "rgb(200, 204, 207)";
+const colorBorderDark = "rgb(136, 140, 142)";
+const colorBorderDestructive = "rgb(226, 37, 37)";
+const colorBorderDestructiveDark = "rgb(146, 18, 0)";
+const colorBorderDestructiveDarker = "rgb(96, 1, 1)";
+const colorBorderDestructiveLight = "rgb(236, 182, 182)";
+const colorBorderDestructiveLighter = "rgb(245, 221, 221)";
+const colorBorderError = "rgb(226, 37, 37)";
+const colorBorderErrorLight = "rgb(222, 88, 88)";
+const colorBorderErrorLightest = "rgb(255, 233, 231)";
+const colorBorderInput = "rgb(136, 140, 142)";
+const colorBorderInputFocus = "rgb(2, 122, 197)";
+const colorBorderInputHover = "rgb(2, 122, 197)";
+const colorBorderLight = "rgb(228, 231, 233)";
+const colorBorderNeutralLight = "rgb(200, 204, 207)";
+const colorBorderPrimary = "rgb(2, 122, 197)";
+const colorBorderPrimaryDark = "rgb(0, 62, 130)";
+const colorBorderPrimaryDarker = "rgb(3, 44, 94)";
+const colorBorderPrimaryLight = "rgb(179, 211, 233)";
+const colorBorderPrimaryLighter = "rgb(220, 234, 244)";
+const colorBorderSuccess = "rgb(0, 153, 74)";
+const colorBorderSuccessLightest = "rgb(224, 255, 239)";
+const colorBorderWarning = "rgb(228, 98, 22)";
+const colorBorderWarningLight = "rgb(242, 133, 16)";
+const colorBorderWarningLightest = "rgb(255, 236, 216)";
+const colorBrand = "rgb(35, 54, 89)";
+const colorBrandHighlight = "rgb(242, 47, 70)";
+const colorGray0 = "rgb(255, 255, 255)";
+const colorGray10 = "rgb(249, 250, 251)";
+const colorGray100 = "rgb(40, 42, 43)";
+const colorGray20 = "rgb(248, 248, 249)";
+const colorGray30 = "rgb(242, 243, 244)";
+const colorGray40 = "rgb(228, 231, 233)";
+const colorGray50 = "rgb(200, 204, 207)";
+const colorGray60 = "rgb(136, 140, 142)";
+const colorGray70 = "rgb(102, 106, 109)";
+const colorGray80 = "rgb(79, 83, 85)";
+const colorGray90 = "rgb(66, 69, 71)";
+const colorText = "rgb(40, 42, 43)";
+const colorTextBrandHighlight = "rgb(242, 47, 70)";
+const colorTextBrandInverse = "rgb(255, 255, 255)";
+const colorTextError = "rgb(226, 37, 37)";
+const colorTextErrorDark = "rgb(146, 18, 0)";
+const colorTextIcon = "rgb(102, 106, 109)";
+const colorTextInverse = "rgb(255, 255, 255)";
+const colorTextInverseWeak = "rgb(200, 204, 207)";
+const colorTextLabel = "rgb(40, 42, 43)";
+const colorTextLink = "rgb(0, 94, 166)";
+const colorTextLinkDark = "rgb(0, 62, 130)";
+const colorTextLinkDarker = "rgb(3, 44, 94)";
+const colorTextLinkDestructive = "rgb(226, 37, 37)";
+const colorTextLinkDestructiveDark = "rgb(178, 6, 0)";
+const colorTextLinkDestructiveDarker = "rgb(146, 18, 0)";
+const colorTextLinkDestructiveLight = "rgb(236, 182, 182)";
+const colorTextLinkLight = "rgb(179, 211, 233)";
+const colorTextPlaceholder = "rgb(102, 106, 109)";
+const colorTextSuccess = "rgb(0, 153, 74)";
+const colorTextWarning = "rgb(228, 98, 22)";
+const colorTextWarningDark = "rgb(168, 62, 0)";
+const colorTextWeak = "rgb(102, 106, 109)";
 const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -211,2 +212,3 @@ const fontFamilyText = "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif";
 colorBackgroundNeutralLightest,
+colorBackgroundOverlay,
 colorBackgroundPrimary,
@@ -390,2 +392,3 @@ colorBackgroundPrimaryDark,
 colorBackgroundNeutralLightest,
+colorBackgroundOverlay,
 colorBackgroundPrimary,
@@ -392,0 +395,0 @@ colorBackgroundPrimaryDark,

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

@@ -9,88 +9,89 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
-export declare const colorBackground = "#f8f8f9";
-export declare const colorBackgroundBody = "#ffffff";
-export declare const colorBackgroundBrand = "#233659";
-export declare const colorBackgroundBrandHighlight = "#f22f46";
-export declare const colorBackgroundDestructive = "#e22525";
-export declare const colorBackgroundDestructiveDark = "#921200";
-export declare const colorBackgroundDestructiveDarker = "#600101";
-export declare const colorBackgroundDestructiveLight = "#ecb6b6";
-export declare const colorBackgroundDestructiveLighter = "#f5dddd";
-export declare const colorBackgroundDestructiveLightest = "#ffe9e7";
-export declare const colorBackgroundError = "#e22525";
-export declare const colorBackgroundErrorLightest = "#ffe9e7";
-export declare const colorBackgroundInverse = "#4f5355";
-export declare const colorBackgroundNeutralLightest = "#f5f8ff";
-export declare const colorBackgroundPrimary = "#027ac5";
-export declare const colorBackgroundPrimaryDark = "#003e82";
-export declare const colorBackgroundPrimaryDarker = "#032c5e";
-export declare const colorBackgroundPrimaryLight = "#b3d3e9";
-export declare const colorBackgroundPrimaryLighter = "#dceaf4";
-export declare const colorBackgroundPrimaryLightest = "#f5f8ff";
-export declare const colorBackgroundRequired = "#de5858";
-export declare const colorBackgroundRowStriped = "#f8f8f9";
-export declare const colorBackgroundSuccess = "#00994a";
-export declare const colorBackgroundSuccessLightest = "#e0ffef";
-export declare const colorBackgroundWarning = "#e46216";
-export declare const colorBackgroundWarningLightest = "#ffecd8";
-export declare const colorBorder = "#c8cccf";
-export declare const colorBorderDark = "#888c8e";
-export declare const colorBorderDestructive = "#e22525";
-export declare const colorBorderDestructiveDark = "#921200";
-export declare const colorBorderDestructiveDarker = "#600101";
-export declare const colorBorderDestructiveLight = "#ecb6b6";
-export declare const colorBorderDestructiveLighter = "#f5dddd";
-export declare const colorBorderError = "#e22525";
-export declare const colorBorderErrorLight = "#de5858";
-export declare const colorBorderErrorLightest = "#ffe9e7";
-export declare const colorBorderInput = "#888c8e";
-export declare const colorBorderInputFocus = "#027ac5";
-export declare const colorBorderInputHover = "#027ac5";
-export declare const colorBorderLight = "#e4e7e9";
-export declare const colorBorderNeutralLight = "#c8cccf";
-export declare const colorBorderPrimary = "#027ac5";
-export declare const colorBorderPrimaryDark = "#003e82";
-export declare const colorBorderPrimaryDarker = "#032c5e";
-export declare const colorBorderPrimaryLight = "#b3d3e9";
-export declare const colorBorderPrimaryLighter = "#dceaf4";
-export declare const colorBorderSuccess = "#00994a";
-export declare const colorBorderSuccessLightest = "#e0ffef";
-export declare const colorBorderWarning = "#e46216";
-export declare const colorBorderWarningLight = "#f28510";
-export declare const colorBorderWarningLightest = "#ffecd8";
-export declare const colorBrand = "#233659";
-export declare const colorBrandHighlight = "#f22f46";
-export declare const colorGray0 = "#ffffff";
-export declare const colorGray10 = "#f9fafb";
-export declare const colorGray100 = "#282a2b";
-export declare const colorGray20 = "#f8f8f9";
-export declare const colorGray30 = "#f2f3f4";
-export declare const colorGray40 = "#e4e7e9";
-export declare const colorGray50 = "#c8cccf";
-export declare const colorGray60 = "#888c8e";
-export declare const colorGray70 = "#666a6d";
-export declare const colorGray80 = "#4f5355";
-export declare const colorGray90 = "#424547";
-export declare const colorText = "#282a2b";
-export declare const colorTextBrandHighlight = "#f22f46";
-export declare const colorTextBrandInverse = "#ffffff";
-export declare const colorTextError = "#e22525";
-export declare const colorTextErrorDark = "#921200";
-export declare const colorTextIcon = "#666a6d";
-export declare const colorTextInverse = "#ffffff";
-export declare const colorTextInverseWeak = "#c8cccf";
-export declare const colorTextLabel = "#282a2b";
-export declare const colorTextLink = "#005ea6";
-export declare const colorTextLinkDark = "#003e82";
-export declare const colorTextLinkDarker = "#032c5e";
-export declare const colorTextLinkDestructive = "#e22525";
-export declare const colorTextLinkDestructiveDark = "#b20600";
-export declare const colorTextLinkDestructiveDarker = "#921200";
-export declare const colorTextLinkDestructiveLight = "#ecb6b6";
-export declare const colorTextLinkLight = "#b3d3e9";
-export declare const colorTextPlaceholder = "#666a6d";
-export declare const colorTextSuccess = "#00994a";
-export declare const colorTextWarning = "#e46216";
-export declare const colorTextWarningDark = "#a83e00";
-export declare const colorTextWeak = "#666a6d";
+export declare const colorBackground = "rgb(248, 248, 249)";
+export declare const colorBackgroundBody = "rgb(255, 255, 255)";
+export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
+export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundDestructive = "rgb(226, 37, 37)";
+export declare const colorBackgroundDestructiveDark = "rgb(146, 18, 0)";
+export declare const colorBackgroundDestructiveDarker = "rgb(96, 1, 1)";
+export declare const colorBackgroundDestructiveLight = "rgb(236, 182, 182)";
+export declare const colorBackgroundDestructiveLighter = "rgb(245, 221, 221)";
+export declare const colorBackgroundDestructiveLightest = "rgb(255, 233, 231)";
+export declare const colorBackgroundError = "rgb(226, 37, 37)";
+export declare const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
+export declare const colorBackgroundInverse = "rgb(79, 83, 85)";
+export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
+export declare const colorBackgroundPrimary = "rgb(2, 122, 197)";
+export declare const colorBackgroundPrimaryDark = "rgb(0, 62, 130)";
+export declare const colorBackgroundPrimaryDarker = "rgb(3, 44, 94)";
+export declare const colorBackgroundPrimaryLight = "rgb(179, 211, 233)";
+export declare const colorBackgroundPrimaryLighter = "rgb(220, 234, 244)";
+export declare const colorBackgroundPrimaryLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundRequired = "rgb(222, 88, 88)";
+export declare const colorBackgroundRowStriped = "rgb(248, 248, 249)";
+export declare const colorBackgroundSuccess = "rgb(0, 153, 74)";
+export declare const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBackgroundWarning = "rgb(228, 98, 22)";
+export declare const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
+export declare const colorBorder = "rgb(200, 204, 207)";
+export declare const colorBorderDark = "rgb(136, 140, 142)";
+export declare const colorBorderDestructive = "rgb(226, 37, 37)";
+export declare const colorBorderDestructiveDark = "rgb(146, 18, 0)";
+export declare const colorBorderDestructiveDarker = "rgb(96, 1, 1)";
+export declare const colorBorderDestructiveLight = "rgb(236, 182, 182)";
+export declare const colorBorderDestructiveLighter = "rgb(245, 221, 221)";
+export declare const colorBorderError = "rgb(226, 37, 37)";
+export declare const colorBorderErrorLight = "rgb(222, 88, 88)";
+export declare const colorBorderErrorLightest = "rgb(255, 233, 231)";
+export declare const colorBorderInput = "rgb(136, 140, 142)";
+export declare const colorBorderInputFocus = "rgb(2, 122, 197)";
+export declare const colorBorderInputHover = "rgb(2, 122, 197)";
+export declare const colorBorderLight = "rgb(228, 231, 233)";
+export declare const colorBorderNeutralLight = "rgb(200, 204, 207)";
+export declare const colorBorderPrimary = "rgb(2, 122, 197)";
+export declare const colorBorderPrimaryDark = "rgb(0, 62, 130)";
+export declare const colorBorderPrimaryDarker = "rgb(3, 44, 94)";
+export declare const colorBorderPrimaryLight = "rgb(179, 211, 233)";
+export declare const colorBorderPrimaryLighter = "rgb(220, 234, 244)";
+export declare const colorBorderSuccess = "rgb(0, 153, 74)";
+export declare const colorBorderSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBorderWarning = "rgb(228, 98, 22)";
+export declare const colorBorderWarningLight = "rgb(242, 133, 16)";
+export declare const colorBorderWarningLightest = "rgb(255, 236, 216)";
+export declare const colorBrand = "rgb(35, 54, 89)";
+export declare const colorBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorGray0 = "rgb(255, 255, 255)";
+export declare const colorGray10 = "rgb(249, 250, 251)";
+export declare const colorGray100 = "rgb(40, 42, 43)";
+export declare const colorGray20 = "rgb(248, 248, 249)";
+export declare const colorGray30 = "rgb(242, 243, 244)";
+export declare const colorGray40 = "rgb(228, 231, 233)";
+export declare const colorGray50 = "rgb(200, 204, 207)";
+export declare const colorGray60 = "rgb(136, 140, 142)";
+export declare const colorGray70 = "rgb(102, 106, 109)";
+export declare const colorGray80 = "rgb(79, 83, 85)";
+export declare const colorGray90 = "rgb(66, 69, 71)";
+export declare const colorText = "rgb(40, 42, 43)";
+export declare const colorTextBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorTextBrandInverse = "rgb(255, 255, 255)";
+export declare const colorTextError = "rgb(226, 37, 37)";
+export declare const colorTextErrorDark = "rgb(146, 18, 0)";
+export declare const colorTextIcon = "rgb(102, 106, 109)";
+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 colorTextLink = "rgb(0, 94, 166)";
+export declare const colorTextLinkDark = "rgb(0, 62, 130)";
+export declare const colorTextLinkDarker = "rgb(3, 44, 94)";
+export declare const colorTextLinkDestructive = "rgb(226, 37, 37)";
+export declare const colorTextLinkDestructiveDark = "rgb(178, 6, 0)";
+export declare const colorTextLinkDestructiveDarker = "rgb(146, 18, 0)";
+export declare const colorTextLinkDestructiveLight = "rgb(236, 182, 182)";
+export declare const colorTextLinkLight = "rgb(179, 211, 233)";
+export declare const colorTextPlaceholder = "rgb(102, 106, 109)";
+export declare const colorTextSuccess = "rgb(0, 153, 74)";
+export declare const colorTextWarning = "rgb(228, 98, 22)";
+export declare const colorTextWarningDark = "rgb(168, 62, 0)";
+export declare const colorTextWeak = "rgb(102, 106, 109)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -188,55 +189,56 @@ export declare const fontFamilyText = "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif";
 export declare const backgroundColors: {
-  colorBackground: "#f8f8f9";
-  colorBackgroundBody: "#ffffff";
-  colorBackgroundBrand: "#233659";
-  colorBackgroundBrandHighlight: "#f22f46";
-  colorBackgroundDestructive: "#e22525";
-  colorBackgroundDestructiveDark: "#921200";
-  colorBackgroundDestructiveDarker: "#600101";
-  colorBackgroundDestructiveLight: "#ecb6b6";
-  colorBackgroundDestructiveLighter: "#f5dddd";
-  colorBackgroundDestructiveLightest: "#ffe9e7";
-  colorBackgroundError: "#e22525";
-  colorBackgroundErrorLightest: "#ffe9e7";
-  colorBackgroundInverse: "#4f5355";
-  colorBackgroundNeutralLightest: "#f5f8ff";
-  colorBackgroundPrimary: "#027ac5";
-  colorBackgroundPrimaryDark: "#003e82";
-  colorBackgroundPrimaryDarker: "#032c5e";
-  colorBackgroundPrimaryLight: "#b3d3e9";
-  colorBackgroundPrimaryLighter: "#dceaf4";
-  colorBackgroundPrimaryLightest: "#f5f8ff";
-  colorBackgroundRequired: "#de5858";
-  colorBackgroundRowStriped: "#f8f8f9";
-  colorBackgroundSuccess: "#00994a";
-  colorBackgroundSuccessLightest: "#e0ffef";
-  colorBackgroundWarning: "#e46216";
-  colorBackgroundWarningLightest: "#ffecd8";
+  colorBackground: "rgb(248, 248, 249)";
+  colorBackgroundBody: "rgb(255, 255, 255)";
+  colorBackgroundBrand: "rgb(35, 54, 89)";
+  colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundDestructive: "rgb(226, 37, 37)";
+  colorBackgroundDestructiveDark: "rgb(146, 18, 0)";
+  colorBackgroundDestructiveDarker: "rgb(96, 1, 1)";
+  colorBackgroundDestructiveLight: "rgb(236, 182, 182)";
+  colorBackgroundDestructiveLighter: "rgb(245, 221, 221)";
+  colorBackgroundDestructiveLightest: "rgb(255, 233, 231)";
+  colorBackgroundError: "rgb(226, 37, 37)";
+  colorBackgroundErrorLightest: "rgb(255, 233, 231)";
+  colorBackgroundInverse: "rgb(79, 83, 85)";
+  colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
+  colorBackgroundOverlay: "rgba(40, 42, 43, 0.5)";
+  colorBackgroundPrimary: "rgb(2, 122, 197)";
+  colorBackgroundPrimaryDark: "rgb(0, 62, 130)";
+  colorBackgroundPrimaryDarker: "rgb(3, 44, 94)";
+  colorBackgroundPrimaryLight: "rgb(179, 211, 233)";
+  colorBackgroundPrimaryLighter: "rgb(220, 234, 244)";
+  colorBackgroundPrimaryLightest: "rgb(245, 248, 255)";
+  colorBackgroundRequired: "rgb(222, 88, 88)";
+  colorBackgroundRowStriped: "rgb(248, 248, 249)";
+  colorBackgroundSuccess: "rgb(0, 153, 74)";
+  colorBackgroundSuccessLightest: "rgb(224, 255, 239)";
+  colorBackgroundWarning: "rgb(228, 98, 22)";
+  colorBackgroundWarningLightest: "rgb(255, 236, 216)";
 };
 export declare const borderColors: {
-  colorBorder: "#c8cccf";
-  colorBorderDark: "#888c8e";
-  colorBorderDestructive: "#e22525";
-  colorBorderDestructiveDark: "#921200";
-  colorBorderDestructiveDarker: "#600101";
-  colorBorderDestructiveLight: "#ecb6b6";
-  colorBorderDestructiveLighter: "#f5dddd";
-  colorBorderError: "#e22525";
-  colorBorderErrorLight: "#de5858";
-  colorBorderErrorLightest: "#ffe9e7";
-  colorBorderInput: "#888c8e";
-  colorBorderInputFocus: "#027ac5";
-  colorBorderInputHover: "#027ac5";
-  colorBorderLight: "#e4e7e9";
-  colorBorderNeutralLight: "#c8cccf";
-  colorBorderPrimary: "#027ac5";
-  colorBorderPrimaryDark: "#003e82";
-  colorBorderPrimaryDarker: "#032c5e";
-  colorBorderPrimaryLight: "#b3d3e9";
-  colorBorderPrimaryLighter: "#dceaf4";
-  colorBorderSuccess: "#00994a";
-  colorBorderSuccessLightest: "#e0ffef";
-  colorBorderWarning: "#e46216";
-  colorBorderWarningLight: "#f28510";
-  colorBorderWarningLightest: "#ffecd8";
+  colorBorder: "rgb(200, 204, 207)";
+  colorBorderDark: "rgb(136, 140, 142)";
+  colorBorderDestructive: "rgb(226, 37, 37)";
+  colorBorderDestructiveDark: "rgb(146, 18, 0)";
+  colorBorderDestructiveDarker: "rgb(96, 1, 1)";
+  colorBorderDestructiveLight: "rgb(236, 182, 182)";
+  colorBorderDestructiveLighter: "rgb(245, 221, 221)";
+  colorBorderError: "rgb(226, 37, 37)";
+  colorBorderErrorLight: "rgb(222, 88, 88)";
+  colorBorderErrorLightest: "rgb(255, 233, 231)";
+  colorBorderInput: "rgb(136, 140, 142)";
+  colorBorderInputFocus: "rgb(2, 122, 197)";
+  colorBorderInputHover: "rgb(2, 122, 197)";
+  colorBorderLight: "rgb(228, 231, 233)";
+  colorBorderNeutralLight: "rgb(200, 204, 207)";
+  colorBorderPrimary: "rgb(2, 122, 197)";
+  colorBorderPrimaryDark: "rgb(0, 62, 130)";
+  colorBorderPrimaryDarker: "rgb(3, 44, 94)";
+  colorBorderPrimaryLight: "rgb(179, 211, 233)";
+  colorBorderPrimaryLighter: "rgb(220, 234, 244)";
+  colorBorderSuccess: "rgb(0, 153, 74)";
+  colorBorderSuccessLightest: "rgb(224, 255, 239)";
+  colorBorderWarning: "rgb(228, 98, 22)";
+  colorBorderWarningLight: "rgb(242, 133, 16)";
+  colorBorderWarningLightest: "rgb(255, 236, 216)";
 };
@@ -258,15 +260,15 @@ export declare const borderWidths: {
 export declare const colors: {
-  colorBrand: "#233659";
-  colorBrandHighlight: "#f22f46";
-  colorGray0: "#ffffff";
-  colorGray10: "#f9fafb";
-  colorGray100: "#282a2b";
-  colorGray20: "#f8f8f9";
-  colorGray30: "#f2f3f4";
-  colorGray40: "#e4e7e9";
-  colorGray50: "#c8cccf";
-  colorGray60: "#888c8e";
-  colorGray70: "#666a6d";
-  colorGray80: "#4f5355";
-  colorGray90: "#424547";
+  colorBrand: "rgb(35, 54, 89)";
+  colorBrandHighlight: "rgb(242, 47, 70)";
+  colorGray0: "rgb(255, 255, 255)";
+  colorGray10: "rgb(249, 250, 251)";
+  colorGray100: "rgb(40, 42, 43)";
+  colorGray20: "rgb(248, 248, 249)";
+  colorGray30: "rgb(242, 243, 244)";
+  colorGray40: "rgb(228, 231, 233)";
+  colorGray50: "rgb(200, 204, 207)";
+  colorGray60: "rgb(136, 140, 142)";
+  colorGray70: "rgb(102, 106, 109)";
+  colorGray80: "rgb(79, 83, 85)";
+  colorGray90: "rgb(66, 69, 71)";
 };
@@ -367,24 +369,24 @@ export declare const fonts: {
 export declare const textColors: {
-  colorText: "#282a2b";
-  colorTextBrandHighlight: "#f22f46";
-  colorTextBrandInverse: "#ffffff";
-  colorTextError: "#e22525";
-  colorTextErrorDark: "#921200";
-  colorTextIcon: "#666a6d";
-  colorTextInverse: "#ffffff";
-  colorTextInverseWeak: "#c8cccf";
-  colorTextLabel: "#282a2b";
-  colorTextLink: "#005ea6";
-  colorTextLinkDark: "#003e82";
-  colorTextLinkDarker: "#032c5e";
-  colorTextLinkDestructive: "#e22525";
-  colorTextLinkDestructiveDark: "#b20600";
-  colorTextLinkDestructiveDarker: "#921200";
-  colorTextLinkDestructiveLight: "#ecb6b6";
-  colorTextLinkLight: "#b3d3e9";
-  colorTextPlaceholder: "#666a6d";
-  colorTextSuccess: "#00994a";
-  colorTextWarning: "#e46216";
-  colorTextWarningDark: "#a83e00";
-  colorTextWeak: "#666a6d";
+  colorText: "rgb(40, 42, 43)";
+  colorTextBrandHighlight: "rgb(242, 47, 70)";
+  colorTextBrandInverse: "rgb(255, 255, 255)";
+  colorTextError: "rgb(226, 37, 37)";
+  colorTextErrorDark: "rgb(146, 18, 0)";
+  colorTextIcon: "rgb(102, 106, 109)";
+  colorTextInverse: "rgb(255, 255, 255)";
+  colorTextInverseWeak: "rgb(200, 204, 207)";
+  colorTextLabel: "rgb(40, 42, 43)";
+  colorTextLink: "rgb(0, 94, 166)";
+  colorTextLinkDark: "rgb(0, 62, 130)";
+  colorTextLinkDarker: "rgb(3, 44, 94)";
+  colorTextLinkDestructive: "rgb(226, 37, 37)";
+  colorTextLinkDestructiveDark: "rgb(178, 6, 0)";
+  colorTextLinkDestructiveDarker: "rgb(146, 18, 0)";
+  colorTextLinkDestructiveLight: "rgb(236, 182, 182)";
+  colorTextLinkLight: "rgb(179, 211, 233)";
+  colorTextPlaceholder: "rgb(102, 106, 109)";
+  colorTextSuccess: "rgb(0, 153, 74)";
+  colorTextWarning: "rgb(228, 98, 22)";
+  colorTextWarningDark: "rgb(168, 62, 0)";
+  colorTextWeak: "rgb(102, 106, 109)";
 };
@@ -391,0 +393,0 @@ export declare const zIndices: {

dist/themes/console/tokens.es6.js

@@ -9,88 +9,89 @@ export const borderRadius0 = "0";
 export const borderWidth20 = "2px";
-export const colorBackground = "#f8f8f9";
-export const colorBackgroundBody = "#ffffff";
-export const colorBackgroundBrand = "#233659";
-export const colorBackgroundBrandHighlight = "#f22f46";
-export const colorBackgroundDestructive = "#e22525";
-export const colorBackgroundDestructiveDark = "#921200";
-export const colorBackgroundDestructiveDarker = "#600101";
-export const colorBackgroundDestructiveLight = "#ecb6b6";
-export const colorBackgroundDestructiveLighter = "#f5dddd";
-export const colorBackgroundDestructiveLightest = "#ffe9e7";
-export const colorBackgroundError = "#e22525";
-export const colorBackgroundErrorLightest = "#ffe9e7";
-export const colorBackgroundInverse = "#4f5355";
-export const colorBackgroundNeutralLightest = "#f5f8ff";
-export const colorBackgroundPrimary = "#027ac5";
-export const colorBackgroundPrimaryDark = "#003e82";
-export const colorBackgroundPrimaryDarker = "#032c5e";
-export const colorBackgroundPrimaryLight = "#b3d3e9";
-export const colorBackgroundPrimaryLighter = "#dceaf4";
-export const colorBackgroundPrimaryLightest = "#f5f8ff";
-export const colorBackgroundRequired = "#de5858";
-export const colorBackgroundRowStriped = "#f8f8f9";
-export const colorBackgroundSuccess = "#00994a";
-export const colorBackgroundSuccessLightest = "#e0ffef";
-export const colorBackgroundWarning = "#e46216";
-export const colorBackgroundWarningLightest = "#ffecd8";
-export const colorBorder = "#c8cccf";
-export const colorBorderDark = "#888c8e";
-export const colorBorderDestructive = "#e22525";
-export const colorBorderDestructiveDark = "#921200";
-export const colorBorderDestructiveDarker = "#600101";
-export const colorBorderDestructiveLight = "#ecb6b6";
-export const colorBorderDestructiveLighter = "#f5dddd";
-export const colorBorderError = "#e22525";
-export const colorBorderErrorLight = "#de5858";
-export const colorBorderErrorLightest = "#ffe9e7";
-export const colorBorderInput = "#888c8e";
-export const colorBorderInputFocus = "#027ac5";
-export const colorBorderInputHover = "#027ac5";
-export const colorBorderLight = "#e4e7e9";
-export const colorBorderNeutralLight = "#c8cccf";
-export const colorBorderPrimary = "#027ac5";
-export const colorBorderPrimaryDark = "#003e82";
-export const colorBorderPrimaryDarker = "#032c5e";
-export const colorBorderPrimaryLight = "#b3d3e9";
-export const colorBorderPrimaryLighter = "#dceaf4";
-export const colorBorderSuccess = "#00994a";
-export const colorBorderSuccessLightest = "#e0ffef";
-export const colorBorderWarning = "#e46216";
-export const colorBorderWarningLight = "#f28510";
-export const colorBorderWarningLightest = "#ffecd8";
-export const colorBrand = "#233659";
-export const colorBrandHighlight = "#f22f46";
-export const colorGray0 = "#ffffff";
-export const colorGray10 = "#f9fafb";
-export const colorGray100 = "#282a2b";
-export const colorGray20 = "#f8f8f9";
-export const colorGray30 = "#f2f3f4";
-export const colorGray40 = "#e4e7e9";
-export const colorGray50 = "#c8cccf";
-export const colorGray60 = "#888c8e";
-export const colorGray70 = "#666a6d";
-export const colorGray80 = "#4f5355";
-export const colorGray90 = "#424547";
-export const colorText = "#282a2b";
-export const colorTextBrandHighlight = "#f22f46";
-export const colorTextBrandInverse = "#ffffff";
-export const colorTextError = "#e22525";
-export const colorTextErrorDark = "#921200";
-export const colorTextIcon = "#666a6d";
-export const colorTextInverse = "#ffffff";
-export const colorTextInverseWeak = "#c8cccf";
-export const colorTextLabel = "#282a2b";
-export const colorTextLink = "#005ea6";
-export const colorTextLinkDark = "#003e82";
-export const colorTextLinkDarker = "#032c5e";
-export const colorTextLinkDestructive = "#e22525";
-export const colorTextLinkDestructiveDark = "#b20600";
-export const colorTextLinkDestructiveDarker = "#921200";
-export const colorTextLinkDestructiveLight = "#ecb6b6";
-export const colorTextLinkLight = "#b3d3e9";
-export const colorTextPlaceholder = "#666a6d";
-export const colorTextSuccess = "#00994a";
-export const colorTextWarning = "#e46216";
-export const colorTextWarningDark = "#a83e00";
-export const colorTextWeak = "#666a6d";
+export const colorBackground = "rgb(248, 248, 249)";
+export const colorBackgroundBody = "rgb(255, 255, 255)";
+export const colorBackgroundBrand = "rgb(35, 54, 89)";
+export const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export const colorBackgroundDestructive = "rgb(226, 37, 37)";
+export const colorBackgroundDestructiveDark = "rgb(146, 18, 0)";
+export const colorBackgroundDestructiveDarker = "rgb(96, 1, 1)";
+export const colorBackgroundDestructiveLight = "rgb(236, 182, 182)";
+export const colorBackgroundDestructiveLighter = "rgb(245, 221, 221)";
+export const colorBackgroundDestructiveLightest = "rgb(255, 233, 231)";
+export const colorBackgroundError = "rgb(226, 37, 37)";
+export const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
+export const colorBackgroundInverse = "rgb(79, 83, 85)";
+export const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export const colorBackgroundOverlay = "rgba(40, 42, 43, 0.5)";
+export const colorBackgroundPrimary = "rgb(2, 122, 197)";
+export const colorBackgroundPrimaryDark = "rgb(0, 62, 130)";
+export const colorBackgroundPrimaryDarker = "rgb(3, 44, 94)";
+export const colorBackgroundPrimaryLight = "rgb(179, 211, 233)";
+export const colorBackgroundPrimaryLighter = "rgb(220, 234, 244)";
+export const colorBackgroundPrimaryLightest = "rgb(245, 248, 255)";
+export const colorBackgroundRequired = "rgb(222, 88, 88)";
+export const colorBackgroundRowStriped = "rgb(248, 248, 249)";
+export const colorBackgroundSuccess = "rgb(0, 153, 74)";
+export const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export const colorBackgroundWarning = "rgb(228, 98, 22)";
+export const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
+export const colorBorder = "rgb(200, 204, 207)";
+export const colorBorderDark = "rgb(136, 140, 142)";
+export const colorBorderDestructive = "rgb(226, 37, 37)";
+export const colorBorderDestructiveDark = "rgb(146, 18, 0)";
+export const colorBorderDestructiveDarker = "rgb(96, 1, 1)";
+export const colorBorderDestructiveLight = "rgb(236, 182, 182)";
+export const colorBorderDestructiveLighter = "rgb(245, 221, 221)";
+export const colorBorderError = "rgb(226, 37, 37)";
+export const colorBorderErrorLight = "rgb(222, 88, 88)";
+export const colorBorderErrorLightest = "rgb(255, 233, 231)";
+export const colorBorderInput = "rgb(136, 140, 142)";
+export const colorBorderInputFocus = "rgb(2, 122, 197)";
+export const colorBorderInputHover = "rgb(2, 122, 197)";
+export const colorBorderLight = "rgb(228, 231, 233)";
+export const colorBorderNeutralLight = "rgb(200, 204, 207)";
+export const colorBorderPrimary = "rgb(2, 122, 197)";
+export const colorBorderPrimaryDark = "rgb(0, 62, 130)";
+export const colorBorderPrimaryDarker = "rgb(3, 44, 94)";
+export const colorBorderPrimaryLight = "rgb(179, 211, 233)";
+export const colorBorderPrimaryLighter = "rgb(220, 234, 244)";
+export const colorBorderSuccess = "rgb(0, 153, 74)";
+export const colorBorderSuccessLightest = "rgb(224, 255, 239)";
+export const colorBorderWarning = "rgb(228, 98, 22)";
+export const colorBorderWarningLight = "rgb(242, 133, 16)";
+export const colorBorderWarningLightest = "rgb(255, 236, 216)";
+export const colorBrand = "rgb(35, 54, 89)";
+export const colorBrandHighlight = "rgb(242, 47, 70)";
+export const colorGray0 = "rgb(255, 255, 255)";
+export const colorGray10 = "rgb(249, 250, 251)";
+export const colorGray100 = "rgb(40, 42, 43)";
+export const colorGray20 = "rgb(248, 248, 249)";
+export const colorGray30 = "rgb(242, 243, 244)";
+export const colorGray40 = "rgb(228, 231, 233)";
+export const colorGray50 = "rgb(200, 204, 207)";
+export const colorGray60 = "rgb(136, 140, 142)";
+export const colorGray70 = "rgb(102, 106, 109)";
+export const colorGray80 = "rgb(79, 83, 85)";
+export const colorGray90 = "rgb(66, 69, 71)";
+export const colorText = "rgb(40, 42, 43)";
+export const colorTextBrandHighlight = "rgb(242, 47, 70)";
+export const colorTextBrandInverse = "rgb(255, 255, 255)";
+export const colorTextError = "rgb(226, 37, 37)";
+export const colorTextErrorDark = "rgb(146, 18, 0)";
+export const colorTextIcon = "rgb(102, 106, 109)";
+export const colorTextInverse = "rgb(255, 255, 255)";
+export const colorTextInverseWeak = "rgb(200, 204, 207)";
+export const colorTextLabel = "rgb(40, 42, 43)";
+export const colorTextLink = "rgb(0, 94, 166)";
+export const colorTextLinkDark = "rgb(0, 62, 130)";
+export const colorTextLinkDarker = "rgb(3, 44, 94)";
+export const colorTextLinkDestructive = "rgb(226, 37, 37)";
+export const colorTextLinkDestructiveDark = "rgb(178, 6, 0)";
+export const colorTextLinkDestructiveDarker = "rgb(146, 18, 0)";
+export const colorTextLinkDestructiveLight = "rgb(236, 182, 182)";
+export const colorTextLinkLight = "rgb(179, 211, 233)";
+export const colorTextPlaceholder = "rgb(102, 106, 109)";
+export const colorTextSuccess = "rgb(0, 153, 74)";
+export const colorTextWarning = "rgb(228, 98, 22)";
+export const colorTextWarningDark = "rgb(168, 62, 0)";
+export const colorTextWeak = "rgb(102, 106, 109)";
 export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -202,2 +203,3 @@ export const fontFamilyText = "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif";
 colorBackgroundNeutralLightest,
+colorBackgroundOverlay,
 colorBackgroundPrimary,
@@ -204,0 +206,0 @@ colorBackgroundPrimaryDark,

dist/themes/console/tokens.gatsby.json

 {
     "tokens": [{
     "categoryName": "background-colors",
-    "tokens": [{"type":"color","category":"background-color","value":"#f8f8f9","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","name":"color-background"},{"type":"color","category":"background-color","value":"#ffffff","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"#233659","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"#f22f46","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"#e22525","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"#921200","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"#600101","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"#ecb6b6","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"#f5dddd","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"#e22525","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"#4f5355","comment":"Inverse background color for any container","originalValue":"{!palette-gray-80}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"#f5f8ff","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"#027ac5","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"#003e82","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"#032c5e","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"#b3d3e9","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"#dceaf4","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"#f5f8ff","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"#de5858","comment":"Required background color","originalValue":"{!palette-red-50}","name":"color-background-required"},{"type":"color","category":"background-color","value":"#f8f8f9","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-20}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"#00994a","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"#e0ffef","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"#e46216","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"#ffecd8","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(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(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(255, 233, 231)","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"rgb(79, 83, 85)","comment":"Inverse background color for any container","originalValue":"{!palette-gray-80}","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"}]
   },
 {
     "categoryName": "border-colors",
-    "tokens": [{"type":"color","category":"border-color","value":"#c8cccf","comment":"Default border color","originalValue":"{!palette-gray-50}","name":"color-border"},{"type":"color","category":"border-color","value":"#888c8e","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"#e22525","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"#921200","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"#600101","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"#ecb6b6","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"#f5dddd","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"#e22525","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"#de5858","comment":"Light error border color","originalValue":"{!palette-red-50}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"#ffe9e7","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"#888c8e","comment":"Input border color","originalValue":"{!palette-gray-60}","name":"color-border-input"},{"type":"color","category":"border-color","value":"#027ac5","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"#027ac5","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"#e4e7e9","comment":"Light border color","originalValue":"{!palette-gray-40}","name":"color-border-light"},{"type":"color","category":"border-color","value":"#c8cccf","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"#027ac5","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"#003e82","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"#032c5e","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"#b3d3e9","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"#dceaf4","comment":"Lighter primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"#00994a","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"#e0ffef","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"#e46216","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"#f28510","comment":"Light warning border color","originalValue":"{!palette-orange-50}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"#ffecd8","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
+    "tokens": [{"type":"color","category":"border-color","value":"rgb(200, 204, 207)","comment":"Default border color","originalValue":"{!palette-gray-50}","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(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(136, 140, 142)","comment":"Input border color","originalValue":"{!palette-gray-60}","name":"color-border-input"},{"type":"color","category":"border-color","value":"rgb(2, 122, 197)","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"rgb(2, 122, 197)","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"rgb(228, 231, 233)","comment":"Light border color","originalValue":"{!palette-gray-40}","name":"color-border-light"},{"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"}]
   },
@@ -20,3 +20,3 @@ {
     "categoryName": "colors",
-    "tokens": [{"type":"color","category":"color","value":"#233659","comment":"Default branding color","originalValue":"{!midnight}","name":"color-brand"},{"type":"color","category":"color","value":"#f22f46","comment":"Twilio brand red","originalValue":"{!amaranth}","name":"color-brand-highlight"},{"type":"color","category":"color","value":"#ffffff","comment":"Gray Color 0","originalValue":"{!palette-gray-0}","name":"color-gray-0"},{"type":"color","category":"color","value":"#f9fafb","comment":"Gray Color 1","originalValue":"{!palette-gray-10}","name":"color-gray-10"},{"type":"color","category":"color","value":"#282a2b","comment":"Gray Color 10","originalValue":"{!palette-gray-100}","name":"color-gray-100"},{"type":"color","category":"color","value":"#f8f8f9","comment":"Gray Color 2","originalValue":"{!palette-gray-20}","name":"color-gray-20"},{"type":"color","category":"color","value":"#f2f3f4","comment":"Gray Color 3","originalValue":"{!palette-gray-30}","name":"color-gray-30"},{"type":"color","category":"color","value":"#e4e7e9","comment":"Gray Color 4","originalValue":"{!palette-gray-40}","name":"color-gray-40"},{"type":"color","category":"color","value":"#c8cccf","comment":"Gray Color 5","originalValue":"{!palette-gray-50}","name":"color-gray-50"},{"type":"color","category":"color","value":"#888c8e","comment":"Gray Color 6","originalValue":"{!palette-gray-60}","name":"color-gray-60"},{"type":"color","category":"color","value":"#666a6d","comment":"Gray Color 7","originalValue":"{!palette-gray-70}","name":"color-gray-70"},{"type":"color","category":"color","value":"#4f5355","comment":"Gray Color 8","originalValue":"{!palette-gray-80}","name":"color-gray-80"},{"type":"color","category":"color","value":"#424547","comment":"Gray Color 9","originalValue":"{!palette-gray-90}","name":"color-gray-90"}]
+    "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(249, 250, 251)","comment":"Gray Color 1","originalValue":"{!palette-gray-10}","name":"color-gray-10"},{"type":"color","category":"color","value":"rgb(40, 42, 43)","comment":"Gray Color 10","originalValue":"{!palette-gray-100}","name":"color-gray-100"},{"type":"color","category":"color","value":"rgb(248, 248, 249)","comment":"Gray Color 2","originalValue":"{!palette-gray-20}","name":"color-gray-20"},{"type":"color","category":"color","value":"rgb(242, 243, 244)","comment":"Gray Color 3","originalValue":"{!palette-gray-30}","name":"color-gray-30"},{"type":"color","category":"color","value":"rgb(228, 231, 233)","comment":"Gray Color 4","originalValue":"{!palette-gray-40}","name":"color-gray-40"},{"type":"color","category":"color","value":"rgb(200, 204, 207)","comment":"Gray Color 5","originalValue":"{!palette-gray-50}","name":"color-gray-50"},{"type":"color","category":"color","value":"rgb(136, 140, 142)","comment":"Gray Color 6","originalValue":"{!palette-gray-60}","name":"color-gray-60"},{"type":"color","category":"color","value":"rgb(102, 106, 109)","comment":"Gray Color 7","originalValue":"{!palette-gray-70}","name":"color-gray-70"},{"type":"color","category":"color","value":"rgb(79, 83, 85)","comment":"Gray Color 8","originalValue":"{!palette-gray-80}","name":"color-gray-80"},{"type":"color","category":"color","value":"rgb(66, 69, 71)","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":"#282a2b","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"#f22f46","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"#e22525","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"#921200","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-80}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"#666a6d","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"#ffffff","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":"#c8cccf","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":"#282a2b","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"#005ea6","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"#003e82","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":"#032c5e","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":"#e22525","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"#b20600","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":"#921200","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":"#ecb6b6","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":"#b3d3e9","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":"#666a6d","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"#00994a","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"#e46216","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"#a83e00","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"#666a6d","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"}]
+    "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(102, 106, 109)","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(102, 106, 109)","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(102, 106, 109)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"}]
   },
@@ -56,0 +56,0 @@ {

dist/themes/console/tokens.ios.json

@@ -187,2 +187,9 @@ {
       "type": "color",
+      "category": "background-color",
+      "value": "rgba(40, 42, 43, 0.5)",
+      "comment": "Default background for overlays",
+      "name": "colorBackgroundOverlay"
+    },
+    {
+      "type": "color",
       "category": "border-color",
@@ -189,0 +196,0 @@ "value": "rgb(245, 221, 221)",

dist/themes/console/tokens.json

 {
-  "color-background-primary-darker": "#032c5e",
-  "color-background-primary-lighter": "#dceaf4",
-  "color-background-destructive-darker": "#600101",
-  "color-background-destructive-lighter": "#f5dddd",
-  "color-background-warning": "#e46216",
-  "color-background-error-lightest": "#ffe9e7",
-  "color-background-neutral-lightest": "#f5f8ff",
-  "color-background-destructive": "#e22525",
-  "color-background-primary": "#027ac5",
-  "color-background-success": "#00994a",
-  "color-background-row-striped": "#f8f8f9",
-  "color-background-success-lightest": "#e0ffef",
-  "color-background-destructive-lightest": "#ffe9e7",
-  "color-background-primary-lightest": "#f5f8ff",
-  "color-background-brand": "#233659",
-  "color-background-error": "#e22525",
-  "color-background-required": "#de5858",
-  "color-background-destructive-dark": "#921200",
-  "color-background-destructive-light": "#ecb6b6",
-  "color-background-primary-dark": "#003e82",
-  "color-background-primary-light": "#b3d3e9",
-  "color-background-warning-lightest": "#ffecd8",
-  "color-background-body": "#ffffff",
-  "color-background": "#f8f8f9",
-  "color-background-brand-highlight": "#f22f46",
-  "color-background-inverse": "#4f5355",
-  "color-border-destructive-lighter": "#f5dddd",
-  "color-border-primary-lighter": "#dceaf4",
-  "color-border-input-hover": "#027ac5",
-  "color-border-primary-darker": "#032c5e",
-  "color-border-warning": "#e46216",
-  "color-border-destructive-darker": "#600101",
-  "color-border-destructive": "#e22525",
-  "color-border-primary": "#027ac5",
-  "color-border-success": "#00994a",
-  "color-border-error-lightest": "#ffe9e7",
-  "color-border-dark": "#888c8e",
-  "color-border-warning-light": "#f28510",
-  "color-border-success-lightest": "#e0ffef",
-  "color-border-error": "#e22525",
-  "color-border-input": "#888c8e",
-  "color-border-destructive-light": "#ecb6b6",
-  "color-border-primary-light": "#b3d3e9",
-  "color-border": "#c8cccf",
-  "color-border-warning-lightest": "#ffecd8",
-  "color-border-primary-dark": "#003e82",
-  "color-border-destructive-dark": "#921200",
-  "color-border-neutral-light": "#c8cccf",
-  "color-border-error-light": "#de5858",
-  "color-border-input-focus": "#027ac5",
-  "color-border-light": "#e4e7e9",
+  "color-background-primary-darker": "rgb(3, 44, 94)",
+  "color-background-primary-lighter": "rgb(220, 234, 244)",
+  "color-background-destructive-darker": "rgb(96, 1, 1)",
+  "color-background-destructive-lighter": "rgb(245, 221, 221)",
+  "color-background-warning": "rgb(228, 98, 22)",
+  "color-background-error-lightest": "rgb(255, 233, 231)",
+  "color-background-neutral-lightest": "rgb(245, 248, 255)",
+  "color-background-destructive": "rgb(226, 37, 37)",
+  "color-background-primary": "rgb(2, 122, 197)",
+  "color-background-success": "rgb(0, 153, 74)",
+  "color-background-row-striped": "rgb(248, 248, 249)",
+  "color-background-success-lightest": "rgb(224, 255, 239)",
+  "color-background-destructive-lightest": "rgb(255, 233, 231)",
+  "color-background-primary-lightest": "rgb(245, 248, 255)",
+  "color-background-brand": "rgb(35, 54, 89)",
+  "color-background-error": "rgb(226, 37, 37)",
+  "color-background-required": "rgb(222, 88, 88)",
+  "color-background-destructive-dark": "rgb(146, 18, 0)",
+  "color-background-destructive-light": "rgb(236, 182, 182)",
+  "color-background-primary-dark": "rgb(0, 62, 130)",
+  "color-background-primary-light": "rgb(179, 211, 233)",
+  "color-background-warning-lightest": "rgb(255, 236, 216)",
+  "color-background-body": "rgb(255, 255, 255)",
+  "color-background": "rgb(248, 248, 249)",
+  "color-background-brand-highlight": "rgb(242, 47, 70)",
+  "color-background-inverse": "rgb(79, 83, 85)",
+  "color-background-overlay": "rgba(40, 42, 43, 0.5)",
+  "color-border-destructive-lighter": "rgb(245, 221, 221)",
+  "color-border-primary-lighter": "rgb(220, 234, 244)",
+  "color-border-input-hover": "rgb(2, 122, 197)",
+  "color-border-primary-darker": "rgb(3, 44, 94)",
+  "color-border-warning": "rgb(228, 98, 22)",
+  "color-border-destructive-darker": "rgb(96, 1, 1)",
+  "color-border-destructive": "rgb(226, 37, 37)",
+  "color-border-primary": "rgb(2, 122, 197)",
+  "color-border-success": "rgb(0, 153, 74)",
+  "color-border-error-lightest": "rgb(255, 233, 231)",
+  "color-border-dark": "rgb(136, 140, 142)",
+  "color-border-warning-light": "rgb(242, 133, 16)",
+  "color-border-success-lightest": "rgb(224, 255, 239)",
+  "color-border-error": "rgb(226, 37, 37)",
+  "color-border-input": "rgb(136, 140, 142)",
+  "color-border-destructive-light": "rgb(236, 182, 182)",
+  "color-border-primary-light": "rgb(179, 211, 233)",
+  "color-border": "rgb(200, 204, 207)",
+  "color-border-warning-lightest": "rgb(255, 236, 216)",
+  "color-border-primary-dark": "rgb(0, 62, 130)",
+  "color-border-destructive-dark": "rgb(146, 18, 0)",
+  "color-border-neutral-light": "rgb(200, 204, 207)",
+  "color-border-error-light": "rgb(222, 88, 88)",
+  "color-border-input-focus": "rgb(2, 122, 197)",
+  "color-border-light": "rgb(228, 231, 233)",
   "border-radius-0": "0",
@@ -97,15 +98,15 @@ "border-radius-10": "3px",
   "line-height-10": "1rem",
-  "color-brand-highlight": "#f22f46",
-  "color-gray-0": "#ffffff",
-  "color-gray-100": "#282a2b",
-  "color-gray-90": "#424547",
-  "color-gray-80": "#4f5355",
-  "color-gray-70": "#666a6d",
-  "color-gray-60": "#888c8e",
-  "color-gray-50": "#c8cccf",
-  "color-gray-40": "#e4e7e9",
-  "color-brand": "#233659",
-  "color-gray-30": "#f2f3f4",
-  "color-gray-20": "#f8f8f9",
-  "color-gray-10": "#f9fafb",
+  "color-brand-highlight": "rgb(242, 47, 70)",
+  "color-gray-0": "rgb(255, 255, 255)",
+  "color-gray-100": "rgb(40, 42, 43)",
+  "color-gray-90": "rgb(66, 69, 71)",
+  "color-gray-80": "rgb(79, 83, 85)",
+  "color-gray-70": "rgb(102, 106, 109)",
+  "color-gray-60": "rgb(136, 140, 142)",
+  "color-gray-50": "rgb(200, 204, 207)",
+  "color-gray-40": "rgb(228, 231, 233)",
+  "color-brand": "rgb(35, 54, 89)",
+  "color-gray-30": "rgb(242, 243, 244)",
+  "color-gray-20": "rgb(248, 248, 249)",
+  "color-gray-10": "rgb(249, 250, 251)",
   "size-icon-80": "2.25rem",
@@ -156,24 +157,24 @@ "size-icon-70": "2rem",
   "space-80": "1.75rem",
-  "color-text-link-darker": "#032c5e",
-  "color-text-link-destructive": "#e22525",
-  "color-text-warning": "#e46216",
-  "color-text-inverse-weak": "#c8cccf",
-  "color-text-link-destructive-darker": "#921200",
-  "color-text-success": "#00994a",
-  "color-text-weak": "#666a6d",
-  "color-text-link-destructive-light": "#ecb6b6",
-  "color-text-icon": "#666a6d",
-  "color-text-link": "#005ea6",
-  "color-text-error-dark": "#921200",
-  "color-text-error": "#e22525",
-  "color-text-link-dark": "#003e82",
-  "color-text-brand-inverse": "#ffffff",
-  "color-text": "#282a2b",
-  "color-text-brand-highlight": "#f22f46",
-  "color-text-link-light": "#b3d3e9",
-  "color-text-inverse": "#ffffff",
-  "color-text-placeholder": "#666a6d",
-  "color-text-warning-dark": "#a83e00",
-  "color-text-link-destructive-dark": "#b20600",
-  "color-text-label": "#282a2b",
+  "color-text-link-darker": "rgb(3, 44, 94)",
+  "color-text-link-destructive": "rgb(226, 37, 37)",
+  "color-text-warning": "rgb(228, 98, 22)",
+  "color-text-inverse-weak": "rgb(200, 204, 207)",
+  "color-text-link-destructive-darker": "rgb(146, 18, 0)",
+  "color-text-success": "rgb(0, 153, 74)",
+  "color-text-weak": "rgb(102, 106, 109)",
+  "color-text-link-destructive-light": "rgb(236, 182, 182)",
+  "color-text-icon": "rgb(102, 106, 109)",
+  "color-text-link": "rgb(0, 94, 166)",
+  "color-text-error-dark": "rgb(146, 18, 0)",
+  "color-text-error": "rgb(226, 37, 37)",
+  "color-text-link-dark": "rgb(0, 62, 130)",
+  "color-text-brand-inverse": "rgb(255, 255, 255)",
+  "color-text": "rgb(40, 42, 43)",
+  "color-text-brand-highlight": "rgb(242, 47, 70)",
+  "color-text-link-light": "rgb(179, 211, 233)",
+  "color-text-inverse": "rgb(255, 255, 255)",
+  "color-text-placeholder": "rgb(102, 106, 109)",
+  "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",
@@ -180,0 +181,0 @@ "z-index-90": "90",

dist/themes/console/tokens.raw.json

@@ -834,2 +834,10 @@ {
     },
+    "color-background-overlay": {
+      "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"
+    },
     "color-border-destructive-lighter": {
@@ -836,0 +844,0 @@ "type": "color",

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

@@ -9,88 +9,89 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
-export declare const colorBackground = "#f3f4f6";
-export declare const colorBackgroundBody = "#ffffff";
-export declare const colorBackgroundBrand = "#233659";
-export declare const colorBackgroundBrandHighlight = "#f22f46";
-export declare const colorBackgroundDestructive = "#ce241a";
-export declare const colorBackgroundDestructiveDark = "#700600";
-export declare const colorBackgroundDestructiveDarker = "#470500";
-export declare const colorBackgroundDestructiveLight = "#ff8c85";
-export declare const colorBackgroundDestructiveLighter = "#ffb9b3";
-export declare const colorBackgroundDestructiveLightest = "#ffe9e7";
-export declare const colorBackgroundError = "#ac1e16";
-export declare const colorBackgroundErrorLightest = "#ffe9e7";
-export declare const colorBackgroundInverse = "#08152c";
-export declare const colorBackgroundNeutralLightest = "#f5f8ff";
-export declare const colorBackgroundPrimary = "#3368fa";
-export declare const colorBackgroundPrimaryDark = "#002ca6";
-export declare const colorBackgroundPrimaryDarker = "#001f75";
-export declare const colorBackgroundPrimaryLight = "#baccff";
-export declare const colorBackgroundPrimaryLighter = "#dbe6ff";
-export declare const colorBackgroundPrimaryLightest = "#f5f8ff";
-export declare const colorBackgroundRequired = "#e8534a";
-export declare const colorBackgroundRowStriped = "#f9fafb";
-export declare const colorBackgroundSuccess = "#00994a";
-export declare const colorBackgroundSuccessLightest = "#e0ffef";
-export declare const colorBackgroundWarning = "#e46216";
-export declare const colorBackgroundWarningLightest = "#ffecd8";
-export declare const colorBorder = "#b6bfce";
-export declare const colorBorderDark = "#9ca7ba";
-export declare const colorBorderDestructive = "#ce241a";
-export declare const colorBorderDestructiveDark = "#700600";
-export declare const colorBorderDestructiveDarker = "#470500";
-export declare const colorBorderDestructiveLight = "#ff8c85";
-export declare const colorBorderDestructiveLighter = "#ffb9b3";
-export declare const colorBorderError = "#ac1e16";
-export declare const colorBorderErrorLight = "#e8534a";
-export declare const colorBorderErrorLightest = "#ffe9e7";
-export declare const colorBorderInput = "#8894aa";
-export declare const colorBorderInputFocus = "#003adb";
-export declare const colorBorderInputHover = "#003adb";
-export declare const colorBorderLight = "#ccd2dc";
-export declare const colorBorderNeutralLight = "#b6bfce";
-export declare const colorBorderPrimary = "#3368fa";
-export declare const colorBorderPrimaryDark = "#002ca6";
-export declare const colorBorderPrimaryDarker = "#001f75";
-export declare const colorBorderPrimaryLight = "#baccff";
-export declare const colorBorderPrimaryLighter = "#dbe6ff";
-export declare const colorBorderSuccess = "#00994a";
-export declare const colorBorderSuccessLightest = "#e0ffef";
-export declare const colorBorderWarning = "#e46216";
-export declare const colorBorderWarningLight = "#fa9c66";
-export declare const colorBorderWarningLightest = "#ffecd8";
-export declare const colorBrand = "#08152c";
-export declare const colorBrandHighlight = "#3368fa";
-export declare const colorGray0 = "#ffffff";
-export declare const colorGray10 = "#f9fafb";
-export declare const colorGray100 = "#08152c";
-export declare const colorGray20 = "#f3f4f6";
-export declare const colorGray30 = "#e5e7ec";
-export declare const colorGray40 = "#ccd2dc";
-export declare const colorGray50 = "#b6bfce";
-export declare const colorGray60 = "#9ca7ba";
-export declare const colorGray70 = "#8894aa";
-export declare const colorGray80 = "#475672";
-export declare const colorGray90 = "#1d2944";
-export declare const colorText = "#08152c";
-export declare const colorTextBrandHighlight = "#f22f46";
-export declare const colorTextBrandInverse = "#ffffff";
-export declare const colorTextError = "#ac1e16";
-export declare const colorTextErrorDark = "#940800";
-export declare const colorTextIcon = "#8894aa";
-export declare const colorTextInverse = "#ffffff";
-export declare const colorTextInverseWeak = "#9ca7ba";
-export declare const colorTextLabel = "#08152c";
-export declare const colorTextLink = "#003adb";
-export declare const colorTextLinkDark = "#002ca6";
-export declare const colorTextLinkDarker = "#001f75";
-export declare const colorTextLinkDestructive = "#ce241a";
-export declare const colorTextLinkDestructiveDark = "#700600";
-export declare const colorTextLinkDestructiveDarker = "#470500";
-export declare const colorTextLinkDestructiveLight = "#e8534a";
-export declare const colorTextLinkLight = "#85a5ff";
-export declare const colorTextPlaceholder = "#8894aa";
-export declare const colorTextSuccess = "#00994a";
-export declare const colorTextWarning = "#e46216";
-export declare const colorTextWarningDark = "#a83e00";
-export declare const colorTextWeak = "#475672";
+export declare const colorBackground = "rgb(243, 244, 246)";
+export declare const colorBackgroundBody = "rgb(255, 255, 255)";
+export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
+export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundDestructive = "rgb(206, 36, 26)";
+export declare const colorBackgroundDestructiveDark = "rgb(112, 6, 0)";
+export declare const colorBackgroundDestructiveDarker = "rgb(71, 5, 0)";
+export declare const colorBackgroundDestructiveLight = "rgb(255, 140, 133)";
+export declare const colorBackgroundDestructiveLighter = "rgb(255, 185, 179)";
+export declare const colorBackgroundDestructiveLightest = "rgb(255, 233, 231)";
+export declare const colorBackgroundError = "rgb(172, 30, 22)";
+export declare const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
+export declare const colorBackgroundInverse = "rgb(8, 21, 44)";
+export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
+export declare const colorBackgroundPrimary = "rgb(51, 104, 250)";
+export declare const colorBackgroundPrimaryDark = "rgb(0, 44, 166)";
+export declare const colorBackgroundPrimaryDarker = "rgb(0, 31, 117)";
+export declare const colorBackgroundPrimaryLight = "rgb(186, 204, 255)";
+export declare const colorBackgroundPrimaryLighter = "rgb(219, 230, 255)";
+export declare const colorBackgroundPrimaryLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundRequired = "rgb(232, 83, 74)";
+export declare const colorBackgroundRowStriped = "rgb(249, 250, 251)";
+export declare const colorBackgroundSuccess = "rgb(0, 153, 74)";
+export declare const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBackgroundWarning = "rgb(228, 98, 22)";
+export declare const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
+export declare const colorBorder = "rgb(182, 191, 206)";
+export declare const colorBorderDark = "rgb(156, 167, 186)";
+export declare const colorBorderDestructive = "rgb(206, 36, 26)";
+export declare const colorBorderDestructiveDark = "rgb(112, 6, 0)";
+export declare const colorBorderDestructiveDarker = "rgb(71, 5, 0)";
+export declare const colorBorderDestructiveLight = "rgb(255, 140, 133)";
+export declare const colorBorderDestructiveLighter = "rgb(255, 185, 179)";
+export declare const colorBorderError = "rgb(172, 30, 22)";
+export declare const colorBorderErrorLight = "rgb(232, 83, 74)";
+export declare const colorBorderErrorLightest = "rgb(255, 233, 231)";
+export declare const colorBorderInput = "rgb(136, 148, 170)";
+export declare const colorBorderInputFocus = "rgb(0, 58, 219)";
+export declare const colorBorderInputHover = "rgb(0, 58, 219)";
+export declare const colorBorderLight = "rgb(204, 210, 220)";
+export declare const colorBorderNeutralLight = "rgb(182, 191, 206)";
+export declare const colorBorderPrimary = "rgb(51, 104, 250)";
+export declare const colorBorderPrimaryDark = "rgb(0, 44, 166)";
+export declare const colorBorderPrimaryDarker = "rgb(0, 31, 117)";
+export declare const colorBorderPrimaryLight = "rgb(186, 204, 255)";
+export declare const colorBorderPrimaryLighter = "rgb(219, 230, 255)";
+export declare const colorBorderSuccess = "rgb(0, 153, 74)";
+export declare const colorBorderSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBorderWarning = "rgb(228, 98, 22)";
+export declare const colorBorderWarningLight = "rgb(250, 156, 102)";
+export declare const colorBorderWarningLightest = "rgb(255, 236, 216)";
+export declare const colorBrand = "rgb(8, 21, 44)";
+export declare const colorBrandHighlight = "rgb(51, 104, 250)";
+export declare const colorGray0 = "rgb(255, 255, 255)";
+export declare const colorGray10 = "rgb(249, 250, 251)";
+export declare const colorGray100 = "rgb(8, 21, 44)";
+export declare const colorGray20 = "rgb(243, 244, 246)";
+export declare const colorGray30 = "rgb(229, 231, 236)";
+export declare const colorGray40 = "rgb(204, 210, 220)";
+export declare const colorGray50 = "rgb(182, 191, 206)";
+export declare const colorGray60 = "rgb(156, 167, 186)";
+export declare const colorGray70 = "rgb(136, 148, 170)";
+export declare const colorGray80 = "rgb(71, 86, 114)";
+export declare const colorGray90 = "rgb(29, 41, 68)";
+export declare const colorText = "rgb(8, 21, 44)";
+export declare const colorTextBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorTextBrandInverse = "rgb(255, 255, 255)";
+export declare const colorTextError = "rgb(172, 30, 22)";
+export declare const colorTextErrorDark = "rgb(148, 8, 0)";
+export declare const colorTextIcon = "rgb(136, 148, 170)";
+export declare const colorTextInverse = "rgb(255, 255, 255)";
+export declare const colorTextInverseWeak = "rgb(156, 167, 186)";
+export declare const colorTextLabel = "rgb(8, 21, 44)";
+export declare const colorTextLink = "rgb(0, 58, 219)";
+export declare const colorTextLinkDark = "rgb(0, 44, 166)";
+export declare const colorTextLinkDarker = "rgb(0, 31, 117)";
+export declare const colorTextLinkDestructive = "rgb(206, 36, 26)";
+export declare const colorTextLinkDestructiveDark = "rgb(112, 6, 0)";
+export declare const colorTextLinkDestructiveDarker = "rgb(71, 5, 0)";
+export declare const colorTextLinkDestructiveLight = "rgb(232, 83, 74)";
+export declare const colorTextLinkLight = "rgb(133, 165, 255)";
+export declare const colorTextPlaceholder = "rgb(136, 148, 170)";
+export declare const colorTextSuccess = "rgb(0, 153, 74)";
+export declare const colorTextWarning = "rgb(228, 98, 22)";
+export declare const colorTextWarningDark = "rgb(168, 62, 0)";
+export declare const colorTextWeak = "rgb(71, 86, 114)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -188,55 +189,56 @@ export declare const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";
 export declare const backgroundColors: {
-  colorBackground: "#f3f4f6";
-  colorBackgroundBody: "#ffffff";
-  colorBackgroundBrand: "#233659";
-  colorBackgroundBrandHighlight: "#f22f46";
-  colorBackgroundDestructive: "#ce241a";
-  colorBackgroundDestructiveDark: "#700600";
-  colorBackgroundDestructiveDarker: "#470500";
-  colorBackgroundDestructiveLight: "#ff8c85";
-  colorBackgroundDestructiveLighter: "#ffb9b3";
-  colorBackgroundDestructiveLightest: "#ffe9e7";
-  colorBackgroundError: "#ac1e16";
-  colorBackgroundErrorLightest: "#ffe9e7";
-  colorBackgroundInverse: "#08152c";
-  colorBackgroundNeutralLightest: "#f5f8ff";
-  colorBackgroundPrimary: "#3368fa";
-  colorBackgroundPrimaryDark: "#002ca6";
-  colorBackgroundPrimaryDarker: "#001f75";
-  colorBackgroundPrimaryLight: "#baccff";
-  colorBackgroundPrimaryLighter: "#dbe6ff";
-  colorBackgroundPrimaryLightest: "#f5f8ff";
-  colorBackgroundRequired: "#e8534a";
-  colorBackgroundRowStriped: "#f9fafb";
-  colorBackgroundSuccess: "#00994a";
-  colorBackgroundSuccessLightest: "#e0ffef";
-  colorBackgroundWarning: "#e46216";
-  colorBackgroundWarningLightest: "#ffecd8";
+  colorBackground: "rgb(243, 244, 246)";
+  colorBackgroundBody: "rgb(255, 255, 255)";
+  colorBackgroundBrand: "rgb(35, 54, 89)";
+  colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundDestructive: "rgb(206, 36, 26)";
+  colorBackgroundDestructiveDark: "rgb(112, 6, 0)";
+  colorBackgroundDestructiveDarker: "rgb(71, 5, 0)";
+  colorBackgroundDestructiveLight: "rgb(255, 140, 133)";
+  colorBackgroundDestructiveLighter: "rgb(255, 185, 179)";
+  colorBackgroundDestructiveLightest: "rgb(255, 233, 231)";
+  colorBackgroundError: "rgb(172, 30, 22)";
+  colorBackgroundErrorLightest: "rgb(255, 233, 231)";
+  colorBackgroundInverse: "rgb(8, 21, 44)";
+  colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
+  colorBackgroundOverlay: "rgba(8, 21, 44, 0.5)";
+  colorBackgroundPrimary: "rgb(51, 104, 250)";
+  colorBackgroundPrimaryDark: "rgb(0, 44, 166)";
+  colorBackgroundPrimaryDarker: "rgb(0, 31, 117)";
+  colorBackgroundPrimaryLight: "rgb(186, 204, 255)";
+  colorBackgroundPrimaryLighter: "rgb(219, 230, 255)";
+  colorBackgroundPrimaryLightest: "rgb(245, 248, 255)";
+  colorBackgroundRequired: "rgb(232, 83, 74)";
+  colorBackgroundRowStriped: "rgb(249, 250, 251)";
+  colorBackgroundSuccess: "rgb(0, 153, 74)";
+  colorBackgroundSuccessLightest: "rgb(224, 255, 239)";
+  colorBackgroundWarning: "rgb(228, 98, 22)";
+  colorBackgroundWarningLightest: "rgb(255, 236, 216)";
 };
 export declare const borderColors: {
-  colorBorder: "#b6bfce";
-  colorBorderDark: "#9ca7ba";
-  colorBorderDestructive: "#ce241a";
-  colorBorderDestructiveDark: "#700600";
-  colorBorderDestructiveDarker: "#470500";
-  colorBorderDestructiveLight: "#ff8c85";
-  colorBorderDestructiveLighter: "#ffb9b3";
-  colorBorderError: "#ac1e16";
-  colorBorderErrorLight: "#e8534a";
-  colorBorderErrorLightest: "#ffe9e7";
-  colorBorderInput: "#8894aa";
-  colorBorderInputFocus: "#003adb";
-  colorBorderInputHover: "#003adb";
-  colorBorderLight: "#ccd2dc";
-  colorBorderNeutralLight: "#b6bfce";
-  colorBorderPrimary: "#3368fa";
-  colorBorderPrimaryDark: "#002ca6";
-  colorBorderPrimaryDarker: "#001f75";
-  colorBorderPrimaryLight: "#baccff";
-  colorBorderPrimaryLighter: "#dbe6ff";
-  colorBorderSuccess: "#00994a";
-  colorBorderSuccessLightest: "#e0ffef";
-  colorBorderWarning: "#e46216";
-  colorBorderWarningLight: "#fa9c66";
-  colorBorderWarningLightest: "#ffecd8";
+  colorBorder: "rgb(182, 191, 206)";
+  colorBorderDark: "rgb(156, 167, 186)";
+  colorBorderDestructive: "rgb(206, 36, 26)";
+  colorBorderDestructiveDark: "rgb(112, 6, 0)";
+  colorBorderDestructiveDarker: "rgb(71, 5, 0)";
+  colorBorderDestructiveLight: "rgb(255, 140, 133)";
+  colorBorderDestructiveLighter: "rgb(255, 185, 179)";
+  colorBorderError: "rgb(172, 30, 22)";
+  colorBorderErrorLight: "rgb(232, 83, 74)";
+  colorBorderErrorLightest: "rgb(255, 233, 231)";
+  colorBorderInput: "rgb(136, 148, 170)";
+  colorBorderInputFocus: "rgb(0, 58, 219)";
+  colorBorderInputHover: "rgb(0, 58, 219)";
+  colorBorderLight: "rgb(204, 210, 220)";
+  colorBorderNeutralLight: "rgb(182, 191, 206)";
+  colorBorderPrimary: "rgb(51, 104, 250)";
+  colorBorderPrimaryDark: "rgb(0, 44, 166)";
+  colorBorderPrimaryDarker: "rgb(0, 31, 117)";
+  colorBorderPrimaryLight: "rgb(186, 204, 255)";
+  colorBorderPrimaryLighter: "rgb(219, 230, 255)";
+  colorBorderSuccess: "rgb(0, 153, 74)";
+  colorBorderSuccessLightest: "rgb(224, 255, 239)";
+  colorBorderWarning: "rgb(228, 98, 22)";
+  colorBorderWarningLight: "rgb(250, 156, 102)";
+  colorBorderWarningLightest: "rgb(255, 236, 216)";
 };
@@ -258,15 +260,15 @@ export declare const borderWidths: {
 export declare const colors: {
-  colorBrand: "#08152c";
-  colorBrandHighlight: "#3368fa";
-  colorGray0: "#ffffff";
-  colorGray10: "#f9fafb";
-  colorGray100: "#08152c";
-  colorGray20: "#f3f4f6";
-  colorGray30: "#e5e7ec";
-  colorGray40: "#ccd2dc";
-  colorGray50: "#b6bfce";
-  colorGray60: "#9ca7ba";
-  colorGray70: "#8894aa";
-  colorGray80: "#475672";
-  colorGray90: "#1d2944";
+  colorBrand: "rgb(8, 21, 44)";
+  colorBrandHighlight: "rgb(51, 104, 250)";
+  colorGray0: "rgb(255, 255, 255)";
+  colorGray10: "rgb(249, 250, 251)";
+  colorGray100: "rgb(8, 21, 44)";
+  colorGray20: "rgb(243, 244, 246)";
+  colorGray30: "rgb(229, 231, 236)";
+  colorGray40: "rgb(204, 210, 220)";
+  colorGray50: "rgb(182, 191, 206)";
+  colorGray60: "rgb(156, 167, 186)";
+  colorGray70: "rgb(136, 148, 170)";
+  colorGray80: "rgb(71, 86, 114)";
+  colorGray90: "rgb(29, 41, 68)";
 };
@@ -367,24 +369,24 @@ export declare const fonts: {
 export declare const textColors: {
-  colorText: "#08152c";
-  colorTextBrandHighlight: "#f22f46";
-  colorTextBrandInverse: "#ffffff";
-  colorTextError: "#ac1e16";
-  colorTextErrorDark: "#940800";
-  colorTextIcon: "#8894aa";
-  colorTextInverse: "#ffffff";
-  colorTextInverseWeak: "#9ca7ba";
-  colorTextLabel: "#08152c";
-  colorTextLink: "#003adb";
-  colorTextLinkDark: "#002ca6";
-  colorTextLinkDarker: "#001f75";
-  colorTextLinkDestructive: "#ce241a";
-  colorTextLinkDestructiveDark: "#700600";
-  colorTextLinkDestructiveDarker: "#470500";
-  colorTextLinkDestructiveLight: "#e8534a";
-  colorTextLinkLight: "#85a5ff";
-  colorTextPlaceholder: "#8894aa";
-  colorTextSuccess: "#00994a";
-  colorTextWarning: "#e46216";
-  colorTextWarningDark: "#a83e00";
-  colorTextWeak: "#475672";
+  colorText: "rgb(8, 21, 44)";
+  colorTextBrandHighlight: "rgb(242, 47, 70)";
+  colorTextBrandInverse: "rgb(255, 255, 255)";
+  colorTextError: "rgb(172, 30, 22)";
+  colorTextErrorDark: "rgb(148, 8, 0)";
+  colorTextIcon: "rgb(136, 148, 170)";
+  colorTextInverse: "rgb(255, 255, 255)";
+  colorTextInverseWeak: "rgb(156, 167, 186)";
+  colorTextLabel: "rgb(8, 21, 44)";
+  colorTextLink: "rgb(0, 58, 219)";
+  colorTextLinkDark: "rgb(0, 44, 166)";
+  colorTextLinkDarker: "rgb(0, 31, 117)";
+  colorTextLinkDestructive: "rgb(206, 36, 26)";
+  colorTextLinkDestructiveDark: "rgb(112, 6, 0)";
+  colorTextLinkDestructiveDarker: "rgb(71, 5, 0)";
+  colorTextLinkDestructiveLight: "rgb(232, 83, 74)";
+  colorTextLinkLight: "rgb(133, 165, 255)";
+  colorTextPlaceholder: "rgb(136, 148, 170)";
+  colorTextSuccess: "rgb(0, 153, 74)";
+  colorTextWarning: "rgb(228, 98, 22)";
+  colorTextWarningDark: "rgb(168, 62, 0)";
+  colorTextWeak: "rgb(71, 86, 114)";
 };
@@ -391,0 +393,0 @@ export declare const zIndices: {

dist/themes/sendgrid/tokens.common.js

@@ -9,88 +9,89 @@ const borderRadius0 = "0";
 const borderWidth20 = "2px";
-const colorBackground = "#f3f4f6";
-const colorBackgroundBody = "#ffffff";
-const colorBackgroundBrand = "#233659";
-const colorBackgroundBrandHighlight = "#f22f46";
-const colorBackgroundDestructive = "#ce241a";
-const colorBackgroundDestructiveDark = "#700600";
-const colorBackgroundDestructiveDarker = "#470500";
-const colorBackgroundDestructiveLight = "#ff8c85";
-const colorBackgroundDestructiveLighter = "#ffb9b3";
-const colorBackgroundDestructiveLightest = "#ffe9e7";
-const colorBackgroundError = "#ac1e16";
-const colorBackgroundErrorLightest = "#ffe9e7";
-const colorBackgroundInverse = "#08152c";
-const colorBackgroundNeutralLightest = "#f5f8ff";
-const colorBackgroundPrimary = "#3368fa";
-const colorBackgroundPrimaryDark = "#002ca6";
-const colorBackgroundPrimaryDarker = "#001f75";
-const colorBackgroundPrimaryLight = "#baccff";
-const colorBackgroundPrimaryLighter = "#dbe6ff";
-const colorBackgroundPrimaryLightest = "#f5f8ff";
-const colorBackgroundRequired = "#e8534a";
-const colorBackgroundRowStriped = "#f9fafb";
-const colorBackgroundSuccess = "#00994a";
-const colorBackgroundSuccessLightest = "#e0ffef";
-const colorBackgroundWarning = "#e46216";
-const colorBackgroundWarningLightest = "#ffecd8";
-const colorBorder = "#b6bfce";
-const colorBorderDark = "#9ca7ba";
-const colorBorderDestructive = "#ce241a";
-const colorBorderDestructiveDark = "#700600";
-const colorBorderDestructiveDarker = "#470500";
-const colorBorderDestructiveLight = "#ff8c85";
-const colorBorderDestructiveLighter = "#ffb9b3";
-const colorBorderError = "#ac1e16";
-const colorBorderErrorLight = "#e8534a";
-const colorBorderErrorLightest = "#ffe9e7";
-const colorBorderInput = "#8894aa";
-const colorBorderInputFocus = "#003adb";
-const colorBorderInputHover = "#003adb";
-const colorBorderLight = "#ccd2dc";
-const colorBorderNeutralLight = "#b6bfce";
-const colorBorderPrimary = "#3368fa";
-const colorBorderPrimaryDark = "#002ca6";
-const colorBorderPrimaryDarker = "#001f75";
-const colorBorderPrimaryLight = "#baccff";
-const colorBorderPrimaryLighter = "#dbe6ff";
-const colorBorderSuccess = "#00994a";
-const colorBorderSuccessLightest = "#e0ffef";
-const colorBorderWarning = "#e46216";
-const colorBorderWarningLight = "#fa9c66";
-const colorBorderWarningLightest = "#ffecd8";
-const colorBrand = "#08152c";
-const colorBrandHighlight = "#3368fa";
-const colorGray0 = "#ffffff";
-const colorGray10 = "#f9fafb";
-const colorGray100 = "#08152c";
-const colorGray20 = "#f3f4f6";
-const colorGray30 = "#e5e7ec";
-const colorGray40 = "#ccd2dc";
-const colorGray50 = "#b6bfce";
-const colorGray60 = "#9ca7ba";
-const colorGray70 = "#8894aa";
-const colorGray80 = "#475672";
-const colorGray90 = "#1d2944";
-const colorText = "#08152c";
-const colorTextBrandHighlight = "#f22f46";
-const colorTextBrandInverse = "#ffffff";
-const colorTextError = "#ac1e16";
-const colorTextErrorDark = "#940800";
-const colorTextIcon = "#8894aa";
-const colorTextInverse = "#ffffff";
-const colorTextInverseWeak = "#9ca7ba";
-const colorTextLabel = "#08152c";
-const colorTextLink = "#003adb";
-const colorTextLinkDark = "#002ca6";
-const colorTextLinkDarker = "#001f75";
-const colorTextLinkDestructive = "#ce241a";
-const colorTextLinkDestructiveDark = "#700600";
-const colorTextLinkDestructiveDarker = "#470500";
-const colorTextLinkDestructiveLight = "#e8534a";
-const colorTextLinkLight = "#85a5ff";
-const colorTextPlaceholder = "#8894aa";
-const colorTextSuccess = "#00994a";
-const colorTextWarning = "#e46216";
-const colorTextWarningDark = "#a83e00";
-const colorTextWeak = "#475672";
+const colorBackground = "rgb(243, 244, 246)";
+const colorBackgroundBody = "rgb(255, 255, 255)";
+const colorBackgroundBrand = "rgb(35, 54, 89)";
+const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+const colorBackgroundDestructive = "rgb(206, 36, 26)";
+const colorBackgroundDestructiveDark = "rgb(112, 6, 0)";
+const colorBackgroundDestructiveDarker = "rgb(71, 5, 0)";
+const colorBackgroundDestructiveLight = "rgb(255, 140, 133)";
+const colorBackgroundDestructiveLighter = "rgb(255, 185, 179)";
+const colorBackgroundDestructiveLightest = "rgb(255, 233, 231)";
+const colorBackgroundError = "rgb(172, 30, 22)";
+const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
+const colorBackgroundInverse = "rgb(8, 21, 44)";
+const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
+const colorBackgroundPrimary = "rgb(51, 104, 250)";
+const colorBackgroundPrimaryDark = "rgb(0, 44, 166)";
+const colorBackgroundPrimaryDarker = "rgb(0, 31, 117)";
+const colorBackgroundPrimaryLight = "rgb(186, 204, 255)";
+const colorBackgroundPrimaryLighter = "rgb(219, 230, 255)";
+const colorBackgroundPrimaryLightest = "rgb(245, 248, 255)";
+const colorBackgroundRequired = "rgb(232, 83, 74)";
+const colorBackgroundRowStriped = "rgb(249, 250, 251)";
+const colorBackgroundSuccess = "rgb(0, 153, 74)";
+const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+const colorBackgroundWarning = "rgb(228, 98, 22)";
+const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
+const colorBorder = "rgb(182, 191, 206)";
+const colorBorderDark = "rgb(156, 167, 186)";
+const colorBorderDestructive = "rgb(206, 36, 26)";
+const colorBorderDestructiveDark = "rgb(112, 6, 0)";
+const colorBorderDestructiveDarker = "rgb(71, 5, 0)";
+const colorBorderDestructiveLight = "rgb(255, 140, 133)";
+const colorBorderDestructiveLighter = "rgb(255, 185, 179)";
+const colorBorderError = "rgb(172, 30, 22)";
+const colorBorderErrorLight = "rgb(232, 83, 74)";
+const colorBorderErrorLightest = "rgb(255, 233, 231)";
+const colorBorderInput = "rgb(136, 148, 170)";
+const colorBorderInputFocus = "rgb(0, 58, 219)";
+const colorBorderInputHover = "rgb(0, 58, 219)";
+const colorBorderLight = "rgb(204, 210, 220)";
+const colorBorderNeutralLight = "rgb(182, 191, 206)";
+const colorBorderPrimary = "rgb(51, 104, 250)";
+const colorBorderPrimaryDark = "rgb(0, 44, 166)";
+const colorBorderPrimaryDarker = "rgb(0, 31, 117)";
+const colorBorderPrimaryLight = "rgb(186, 204, 255)";
+const colorBorderPrimaryLighter = "rgb(219, 230, 255)";
+const colorBorderSuccess = "rgb(0, 153, 74)";
+const colorBorderSuccessLightest = "rgb(224, 255, 239)";
+const colorBorderWarning = "rgb(228, 98, 22)";
+const colorBorderWarningLight = "rgb(250, 156, 102)";
+const colorBorderWarningLightest = "rgb(255, 236, 216)";
+const colorBrand = "rgb(8, 21, 44)";
+const colorBrandHighlight = "rgb(51, 104, 250)";
+const colorGray0 = "rgb(255, 255, 255)";
+const colorGray10 = "rgb(249, 250, 251)";
+const colorGray100 = "rgb(8, 21, 44)";
+const colorGray20 = "rgb(243, 244, 246)";
+const colorGray30 = "rgb(229, 231, 236)";
+const colorGray40 = "rgb(204, 210, 220)";
+const colorGray50 = "rgb(182, 191, 206)";
+const colorGray60 = "rgb(156, 167, 186)";
+const colorGray70 = "rgb(136, 148, 170)";
+const colorGray80 = "rgb(71, 86, 114)";
+const colorGray90 = "rgb(29, 41, 68)";
+const colorText = "rgb(8, 21, 44)";
+const colorTextBrandHighlight = "rgb(242, 47, 70)";
+const colorTextBrandInverse = "rgb(255, 255, 255)";
+const colorTextError = "rgb(172, 30, 22)";
+const colorTextErrorDark = "rgb(148, 8, 0)";
+const colorTextIcon = "rgb(136, 148, 170)";
+const colorTextInverse = "rgb(255, 255, 255)";
+const colorTextInverseWeak = "rgb(156, 167, 186)";
+const colorTextLabel = "rgb(8, 21, 44)";
+const colorTextLink = "rgb(0, 58, 219)";
+const colorTextLinkDark = "rgb(0, 44, 166)";
+const colorTextLinkDarker = "rgb(0, 31, 117)";
+const colorTextLinkDestructive = "rgb(206, 36, 26)";
+const colorTextLinkDestructiveDark = "rgb(112, 6, 0)";
+const colorTextLinkDestructiveDarker = "rgb(71, 5, 0)";
+const colorTextLinkDestructiveLight = "rgb(232, 83, 74)";
+const colorTextLinkLight = "rgb(133, 165, 255)";
+const colorTextPlaceholder = "rgb(136, 148, 170)";
+const colorTextSuccess = "rgb(0, 153, 74)";
+const colorTextWarning = "rgb(228, 98, 22)";
+const colorTextWarningDark = "rgb(168, 62, 0)";
+const colorTextWeak = "rgb(71, 86, 114)";
 const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -211,2 +212,3 @@ const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";
 colorBackgroundNeutralLightest,
+colorBackgroundOverlay,
 colorBackgroundPrimary,
@@ -390,2 +392,3 @@ colorBackgroundPrimaryDark,
 colorBackgroundNeutralLightest,
+colorBackgroundOverlay,
 colorBackgroundPrimary,
@@ -392,0 +395,0 @@ colorBackgroundPrimaryDark,

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

@@ -9,88 +9,89 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
-export declare const colorBackground = "#f3f4f6";
-export declare const colorBackgroundBody = "#ffffff";
-export declare const colorBackgroundBrand = "#233659";
-export declare const colorBackgroundBrandHighlight = "#f22f46";
-export declare const colorBackgroundDestructive = "#ce241a";
-export declare const colorBackgroundDestructiveDark = "#700600";
-export declare const colorBackgroundDestructiveDarker = "#470500";
-export declare const colorBackgroundDestructiveLight = "#ff8c85";
-export declare const colorBackgroundDestructiveLighter = "#ffb9b3";
-export declare const colorBackgroundDestructiveLightest = "#ffe9e7";
-export declare const colorBackgroundError = "#ac1e16";
-export declare const colorBackgroundErrorLightest = "#ffe9e7";
-export declare const colorBackgroundInverse = "#08152c";
-export declare const colorBackgroundNeutralLightest = "#f5f8ff";
-export declare const colorBackgroundPrimary = "#3368fa";
-export declare const colorBackgroundPrimaryDark = "#002ca6";
-export declare const colorBackgroundPrimaryDarker = "#001f75";
-export declare const colorBackgroundPrimaryLight = "#baccff";
-export declare const colorBackgroundPrimaryLighter = "#dbe6ff";
-export declare const colorBackgroundPrimaryLightest = "#f5f8ff";
-export declare const colorBackgroundRequired = "#e8534a";
-export declare const colorBackgroundRowStriped = "#f9fafb";
-export declare const colorBackgroundSuccess = "#00994a";
-export declare const colorBackgroundSuccessLightest = "#e0ffef";
-export declare const colorBackgroundWarning = "#e46216";
-export declare const colorBackgroundWarningLightest = "#ffecd8";
-export declare const colorBorder = "#b6bfce";
-export declare const colorBorderDark = "#9ca7ba";
-export declare const colorBorderDestructive = "#ce241a";
-export declare const colorBorderDestructiveDark = "#700600";
-export declare const colorBorderDestructiveDarker = "#470500";
-export declare const colorBorderDestructiveLight = "#ff8c85";
-export declare const colorBorderDestructiveLighter = "#ffb9b3";
-export declare const colorBorderError = "#ac1e16";
-export declare const colorBorderErrorLight = "#e8534a";
-export declare const colorBorderErrorLightest = "#ffe9e7";
-export declare const colorBorderInput = "#8894aa";
-export declare const colorBorderInputFocus = "#003adb";
-export declare const colorBorderInputHover = "#003adb";
-export declare const colorBorderLight = "#ccd2dc";
-export declare const colorBorderNeutralLight = "#b6bfce";
-export declare const colorBorderPrimary = "#3368fa";
-export declare const colorBorderPrimaryDark = "#002ca6";
-export declare const colorBorderPrimaryDarker = "#001f75";
-export declare const colorBorderPrimaryLight = "#baccff";
-export declare const colorBorderPrimaryLighter = "#dbe6ff";
-export declare const colorBorderSuccess = "#00994a";
-export declare const colorBorderSuccessLightest = "#e0ffef";
-export declare const colorBorderWarning = "#e46216";
-export declare const colorBorderWarningLight = "#fa9c66";
-export declare const colorBorderWarningLightest = "#ffecd8";
-export declare const colorBrand = "#08152c";
-export declare const colorBrandHighlight = "#3368fa";
-export declare const colorGray0 = "#ffffff";
-export declare const colorGray10 = "#f9fafb";
-export declare const colorGray100 = "#08152c";
-export declare const colorGray20 = "#f3f4f6";
-export declare const colorGray30 = "#e5e7ec";
-export declare const colorGray40 = "#ccd2dc";
-export declare const colorGray50 = "#b6bfce";
-export declare const colorGray60 = "#9ca7ba";
-export declare const colorGray70 = "#8894aa";
-export declare const colorGray80 = "#475672";
-export declare const colorGray90 = "#1d2944";
-export declare const colorText = "#08152c";
-export declare const colorTextBrandHighlight = "#f22f46";
-export declare const colorTextBrandInverse = "#ffffff";
-export declare const colorTextError = "#ac1e16";
-export declare const colorTextErrorDark = "#940800";
-export declare const colorTextIcon = "#8894aa";
-export declare const colorTextInverse = "#ffffff";
-export declare const colorTextInverseWeak = "#9ca7ba";
-export declare const colorTextLabel = "#08152c";
-export declare const colorTextLink = "#003adb";
-export declare const colorTextLinkDark = "#002ca6";
-export declare const colorTextLinkDarker = "#001f75";
-export declare const colorTextLinkDestructive = "#ce241a";
-export declare const colorTextLinkDestructiveDark = "#700600";
-export declare const colorTextLinkDestructiveDarker = "#470500";
-export declare const colorTextLinkDestructiveLight = "#e8534a";
-export declare const colorTextLinkLight = "#85a5ff";
-export declare const colorTextPlaceholder = "#8894aa";
-export declare const colorTextSuccess = "#00994a";
-export declare const colorTextWarning = "#e46216";
-export declare const colorTextWarningDark = "#a83e00";
-export declare const colorTextWeak = "#475672";
+export declare const colorBackground = "rgb(243, 244, 246)";
+export declare const colorBackgroundBody = "rgb(255, 255, 255)";
+export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
+export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundDestructive = "rgb(206, 36, 26)";
+export declare const colorBackgroundDestructiveDark = "rgb(112, 6, 0)";
+export declare const colorBackgroundDestructiveDarker = "rgb(71, 5, 0)";
+export declare const colorBackgroundDestructiveLight = "rgb(255, 140, 133)";
+export declare const colorBackgroundDestructiveLighter = "rgb(255, 185, 179)";
+export declare const colorBackgroundDestructiveLightest = "rgb(255, 233, 231)";
+export declare const colorBackgroundError = "rgb(172, 30, 22)";
+export declare const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
+export declare const colorBackgroundInverse = "rgb(8, 21, 44)";
+export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
+export declare const colorBackgroundPrimary = "rgb(51, 104, 250)";
+export declare const colorBackgroundPrimaryDark = "rgb(0, 44, 166)";
+export declare const colorBackgroundPrimaryDarker = "rgb(0, 31, 117)";
+export declare const colorBackgroundPrimaryLight = "rgb(186, 204, 255)";
+export declare const colorBackgroundPrimaryLighter = "rgb(219, 230, 255)";
+export declare const colorBackgroundPrimaryLightest = "rgb(245, 248, 255)";
+export declare const colorBackgroundRequired = "rgb(232, 83, 74)";
+export declare const colorBackgroundRowStriped = "rgb(249, 250, 251)";
+export declare const colorBackgroundSuccess = "rgb(0, 153, 74)";
+export declare const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBackgroundWarning = "rgb(228, 98, 22)";
+export declare const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
+export declare const colorBorder = "rgb(182, 191, 206)";
+export declare const colorBorderDark = "rgb(156, 167, 186)";
+export declare const colorBorderDestructive = "rgb(206, 36, 26)";
+export declare const colorBorderDestructiveDark = "rgb(112, 6, 0)";
+export declare const colorBorderDestructiveDarker = "rgb(71, 5, 0)";
+export declare const colorBorderDestructiveLight = "rgb(255, 140, 133)";
+export declare const colorBorderDestructiveLighter = "rgb(255, 185, 179)";
+export declare const colorBorderError = "rgb(172, 30, 22)";
+export declare const colorBorderErrorLight = "rgb(232, 83, 74)";
+export declare const colorBorderErrorLightest = "rgb(255, 233, 231)";
+export declare const colorBorderInput = "rgb(136, 148, 170)";
+export declare const colorBorderInputFocus = "rgb(0, 58, 219)";
+export declare const colorBorderInputHover = "rgb(0, 58, 219)";
+export declare const colorBorderLight = "rgb(204, 210, 220)";
+export declare const colorBorderNeutralLight = "rgb(182, 191, 206)";
+export declare const colorBorderPrimary = "rgb(51, 104, 250)";
+export declare const colorBorderPrimaryDark = "rgb(0, 44, 166)";
+export declare const colorBorderPrimaryDarker = "rgb(0, 31, 117)";
+export declare const colorBorderPrimaryLight = "rgb(186, 204, 255)";
+export declare const colorBorderPrimaryLighter = "rgb(219, 230, 255)";
+export declare const colorBorderSuccess = "rgb(0, 153, 74)";
+export declare const colorBorderSuccessLightest = "rgb(224, 255, 239)";
+export declare const colorBorderWarning = "rgb(228, 98, 22)";
+export declare const colorBorderWarningLight = "rgb(250, 156, 102)";
+export declare const colorBorderWarningLightest = "rgb(255, 236, 216)";
+export declare const colorBrand = "rgb(8, 21, 44)";
+export declare const colorBrandHighlight = "rgb(51, 104, 250)";
+export declare const colorGray0 = "rgb(255, 255, 255)";
+export declare const colorGray10 = "rgb(249, 250, 251)";
+export declare const colorGray100 = "rgb(8, 21, 44)";
+export declare const colorGray20 = "rgb(243, 244, 246)";
+export declare const colorGray30 = "rgb(229, 231, 236)";
+export declare const colorGray40 = "rgb(204, 210, 220)";
+export declare const colorGray50 = "rgb(182, 191, 206)";
+export declare const colorGray60 = "rgb(156, 167, 186)";
+export declare const colorGray70 = "rgb(136, 148, 170)";
+export declare const colorGray80 = "rgb(71, 86, 114)";
+export declare const colorGray90 = "rgb(29, 41, 68)";
+export declare const colorText = "rgb(8, 21, 44)";
+export declare const colorTextBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorTextBrandInverse = "rgb(255, 255, 255)";
+export declare const colorTextError = "rgb(172, 30, 22)";
+export declare const colorTextErrorDark = "rgb(148, 8, 0)";
+export declare const colorTextIcon = "rgb(136, 148, 170)";
+export declare const colorTextInverse = "rgb(255, 255, 255)";
+export declare const colorTextInverseWeak = "rgb(156, 167, 186)";
+export declare const colorTextLabel = "rgb(8, 21, 44)";
+export declare const colorTextLink = "rgb(0, 58, 219)";
+export declare const colorTextLinkDark = "rgb(0, 44, 166)";
+export declare const colorTextLinkDarker = "rgb(0, 31, 117)";
+export declare const colorTextLinkDestructive = "rgb(206, 36, 26)";
+export declare const colorTextLinkDestructiveDark = "rgb(112, 6, 0)";
+export declare const colorTextLinkDestructiveDarker = "rgb(71, 5, 0)";
+export declare const colorTextLinkDestructiveLight = "rgb(232, 83, 74)";
+export declare const colorTextLinkLight = "rgb(133, 165, 255)";
+export declare const colorTextPlaceholder = "rgb(136, 148, 170)";
+export declare const colorTextSuccess = "rgb(0, 153, 74)";
+export declare const colorTextWarning = "rgb(228, 98, 22)";
+export declare const colorTextWarningDark = "rgb(168, 62, 0)";
+export declare const colorTextWeak = "rgb(71, 86, 114)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -188,55 +189,56 @@ export declare const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";
 export declare const backgroundColors: {
-  colorBackground: "#f3f4f6";
-  colorBackgroundBody: "#ffffff";
-  colorBackgroundBrand: "#233659";
-  colorBackgroundBrandHighlight: "#f22f46";
-  colorBackgroundDestructive: "#ce241a";
-  colorBackgroundDestructiveDark: "#700600";
-  colorBackgroundDestructiveDarker: "#470500";
-  colorBackgroundDestructiveLight: "#ff8c85";
-  colorBackgroundDestructiveLighter: "#ffb9b3";
-  colorBackgroundDestructiveLightest: "#ffe9e7";
-  colorBackgroundError: "#ac1e16";
-  colorBackgroundErrorLightest: "#ffe9e7";
-  colorBackgroundInverse: "#08152c";
-  colorBackgroundNeutralLightest: "#f5f8ff";
-  colorBackgroundPrimary: "#3368fa";
-  colorBackgroundPrimaryDark: "#002ca6";
-  colorBackgroundPrimaryDarker: "#001f75";
-  colorBackgroundPrimaryLight: "#baccff";
-  colorBackgroundPrimaryLighter: "#dbe6ff";
-  colorBackgroundPrimaryLightest: "#f5f8ff";
-  colorBackgroundRequired: "#e8534a";
-  colorBackgroundRowStriped: "#f9fafb";
-  colorBackgroundSuccess: "#00994a";
-  colorBackgroundSuccessLightest: "#e0ffef";
-  colorBackgroundWarning: "#e46216";
-  colorBackgroundWarningLightest: "#ffecd8";
+  colorBackground: "rgb(243, 244, 246)";
+  colorBackgroundBody: "rgb(255, 255, 255)";
+  colorBackgroundBrand: "rgb(35, 54, 89)";
+  colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundDestructive: "rgb(206, 36, 26)";
+  colorBackgroundDestructiveDark: "rgb(112, 6, 0)";
+  colorBackgroundDestructiveDarker: "rgb(71, 5, 0)";
+  colorBackgroundDestructiveLight: "rgb(255, 140, 133)";
+  colorBackgroundDestructiveLighter: "rgb(255, 185, 179)";
+  colorBackgroundDestructiveLightest: "rgb(255, 233, 231)";
+  colorBackgroundError: "rgb(172, 30, 22)";
+  colorBackgroundErrorLightest: "rgb(255, 233, 231)";
+  colorBackgroundInverse: "rgb(8, 21, 44)";
+  colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
+  colorBackgroundOverlay: "rgba(8, 21, 44, 0.5)";
+  colorBackgroundPrimary: "rgb(51, 104, 250)";
+  colorBackgroundPrimaryDark: "rgb(0, 44, 166)";
+  colorBackgroundPrimaryDarker: "rgb(0, 31, 117)";
+  colorBackgroundPrimaryLight: "rgb(186, 204, 255)";
+  colorBackgroundPrimaryLighter: "rgb(219, 230, 255)";
+  colorBackgroundPrimaryLightest: "rgb(245, 248, 255)";
+  colorBackgroundRequired: "rgb(232, 83, 74)";
+  colorBackgroundRowStriped: "rgb(249, 250, 251)";
+  colorBackgroundSuccess: "rgb(0, 153, 74)";
+  colorBackgroundSuccessLightest: "rgb(224, 255, 239)";
+  colorBackgroundWarning: "rgb(228, 98, 22)";
+  colorBackgroundWarningLightest: "rgb(255, 236, 216)";
 };
 export declare const borderColors: {
-  colorBorder: "#b6bfce";
-  colorBorderDark: "#9ca7ba";
-  colorBorderDestructive: "#ce241a";
-  colorBorderDestructiveDark: "#700600";
-  colorBorderDestructiveDarker: "#470500";
-  colorBorderDestructiveLight: "#ff8c85";
-  colorBorderDestructiveLighter: "#ffb9b3";
-  colorBorderError: "#ac1e16";
-  colorBorderErrorLight: "#e8534a";
-  colorBorderErrorLightest: "#ffe9e7";
-  colorBorderInput: "#8894aa";
-  colorBorderInputFocus: "#003adb";
-  colorBorderInputHover: "#003adb";
-  colorBorderLight: "#ccd2dc";
-  colorBorderNeutralLight: "#b6bfce";
-  colorBorderPrimary: "#3368fa";
-  colorBorderPrimaryDark: "#002ca6";
-  colorBorderPrimaryDarker: "#001f75";
-  colorBorderPrimaryLight: "#baccff";
-  colorBorderPrimaryLighter: "#dbe6ff";
-  colorBorderSuccess: "#00994a";
-  colorBorderSuccessLightest: "#e0ffef";
-  colorBorderWarning: "#e46216";
-  colorBorderWarningLight: "#fa9c66";
-  colorBorderWarningLightest: "#ffecd8";
+  colorBorder: "rgb(182, 191, 206)";
+  colorBorderDark: "rgb(156, 167, 186)";
+  colorBorderDestructive: "rgb(206, 36, 26)";
+  colorBorderDestructiveDark: "rgb(112, 6, 0)";
+  colorBorderDestructiveDarker: "rgb(71, 5, 0)";
+  colorBorderDestructiveLight: "rgb(255, 140, 133)";
+  colorBorderDestructiveLighter: "rgb(255, 185, 179)";
+  colorBorderError: "rgb(172, 30, 22)";
+  colorBorderErrorLight: "rgb(232, 83, 74)";
+  colorBorderErrorLightest: "rgb(255, 233, 231)";
+  colorBorderInput: "rgb(136, 148, 170)";
+  colorBorderInputFocus: "rgb(0, 58, 219)";
+  colorBorderInputHover: "rgb(0, 58, 219)";
+  colorBorderLight: "rgb(204, 210, 220)";
+  colorBorderNeutralLight: "rgb(182, 191, 206)";
+  colorBorderPrimary: "rgb(51, 104, 250)";
+  colorBorderPrimaryDark: "rgb(0, 44, 166)";
+  colorBorderPrimaryDarker: "rgb(0, 31, 117)";
+  colorBorderPrimaryLight: "rgb(186, 204, 255)";
+  colorBorderPrimaryLighter: "rgb(219, 230, 255)";
+  colorBorderSuccess: "rgb(0, 153, 74)";
+  colorBorderSuccessLightest: "rgb(224, 255, 239)";
+  colorBorderWarning: "rgb(228, 98, 22)";
+  colorBorderWarningLight: "rgb(250, 156, 102)";
+  colorBorderWarningLightest: "rgb(255, 236, 216)";
 };
@@ -258,15 +260,15 @@ export declare const borderWidths: {
 export declare const colors: {
-  colorBrand: "#08152c";
-  colorBrandHighlight: "#3368fa";
-  colorGray0: "#ffffff";
-  colorGray10: "#f9fafb";
-  colorGray100: "#08152c";
-  colorGray20: "#f3f4f6";
-  colorGray30: "#e5e7ec";
-  colorGray40: "#ccd2dc";
-  colorGray50: "#b6bfce";
-  colorGray60: "#9ca7ba";
-  colorGray70: "#8894aa";
-  colorGray80: "#475672";
-  colorGray90: "#1d2944";
+  colorBrand: "rgb(8, 21, 44)";
+  colorBrandHighlight: "rgb(51, 104, 250)";
+  colorGray0: "rgb(255, 255, 255)";
+  colorGray10: "rgb(249, 250, 251)";
+  colorGray100: "rgb(8, 21, 44)";
+  colorGray20: "rgb(243, 244, 246)";
+  colorGray30: "rgb(229, 231, 236)";
+  colorGray40: "rgb(204, 210, 220)";
+  colorGray50: "rgb(182, 191, 206)";
+  colorGray60: "rgb(156, 167, 186)";
+  colorGray70: "rgb(136, 148, 170)";
+  colorGray80: "rgb(71, 86, 114)";
+  colorGray90: "rgb(29, 41, 68)";
 };
@@ -367,24 +369,24 @@ export declare const fonts: {
 export declare const textColors: {
-  colorText: "#08152c";
-  colorTextBrandHighlight: "#f22f46";
-  colorTextBrandInverse: "#ffffff";
-  colorTextError: "#ac1e16";
-  colorTextErrorDark: "#940800";
-  colorTextIcon: "#8894aa";
-  colorTextInverse: "#ffffff";
-  colorTextInverseWeak: "#9ca7ba";
-  colorTextLabel: "#08152c";
-  colorTextLink: "#003adb";
-  colorTextLinkDark: "#002ca6";
-  colorTextLinkDarker: "#001f75";
-  colorTextLinkDestructive: "#ce241a";
-  colorTextLinkDestructiveDark: "#700600";
-  colorTextLinkDestructiveDarker: "#470500";
-  colorTextLinkDestructiveLight: "#e8534a";
-  colorTextLinkLight: "#85a5ff";
-  colorTextPlaceholder: "#8894aa";
-  colorTextSuccess: "#00994a";
-  colorTextWarning: "#e46216";
-  colorTextWarningDark: "#a83e00";
-  colorTextWeak: "#475672";
+  colorText: "rgb(8, 21, 44)";
+  colorTextBrandHighlight: "rgb(242, 47, 70)";
+  colorTextBrandInverse: "rgb(255, 255, 255)";
+  colorTextError: "rgb(172, 30, 22)";
+  colorTextErrorDark: "rgb(148, 8, 0)";
+  colorTextIcon: "rgb(136, 148, 170)";
+  colorTextInverse: "rgb(255, 255, 255)";
+  colorTextInverseWeak: "rgb(156, 167, 186)";
+  colorTextLabel: "rgb(8, 21, 44)";
+  colorTextLink: "rgb(0, 58, 219)";
+  colorTextLinkDark: "rgb(0, 44, 166)";
+  colorTextLinkDarker: "rgb(0, 31, 117)";
+  colorTextLinkDestructive: "rgb(206, 36, 26)";
+  colorTextLinkDestructiveDark: "rgb(112, 6, 0)";
+  colorTextLinkDestructiveDarker: "rgb(71, 5, 0)";
+  colorTextLinkDestructiveLight: "rgb(232, 83, 74)";
+  colorTextLinkLight: "rgb(133, 165, 255)";
+  colorTextPlaceholder: "rgb(136, 148, 170)";
+  colorTextSuccess: "rgb(0, 153, 74)";
+  colorTextWarning: "rgb(228, 98, 22)";
+  colorTextWarningDark: "rgb(168, 62, 0)";
+  colorTextWeak: "rgb(71, 86, 114)";
 };
@@ -391,0 +393,0 @@ export declare const zIndices: {

dist/themes/sendgrid/tokens.es6.js

@@ -9,88 +9,89 @@ export const borderRadius0 = "0";
 export const borderWidth20 = "2px";
-export const colorBackground = "#f3f4f6";
-export const colorBackgroundBody = "#ffffff";
-export const colorBackgroundBrand = "#233659";
-export const colorBackgroundBrandHighlight = "#f22f46";
-export const colorBackgroundDestructive = "#ce241a";
-export const colorBackgroundDestructiveDark = "#700600";
-export const colorBackgroundDestructiveDarker = "#470500";
-export const colorBackgroundDestructiveLight = "#ff8c85";
-export const colorBackgroundDestructiveLighter = "#ffb9b3";
-export const colorBackgroundDestructiveLightest = "#ffe9e7";
-export const colorBackgroundError = "#ac1e16";
-export const colorBackgroundErrorLightest = "#ffe9e7";
-export const colorBackgroundInverse = "#08152c";
-export const colorBackgroundNeutralLightest = "#f5f8ff";
-export const colorBackgroundPrimary = "#3368fa";
-export const colorBackgroundPrimaryDark = "#002ca6";
-export const colorBackgroundPrimaryDarker = "#001f75";
-export const colorBackgroundPrimaryLight = "#baccff";
-export const colorBackgroundPrimaryLighter = "#dbe6ff";
-export const colorBackgroundPrimaryLightest = "#f5f8ff";
-export const colorBackgroundRequired = "#e8534a";
-export const colorBackgroundRowStriped = "#f9fafb";
-export const colorBackgroundSuccess = "#00994a";
-export const colorBackgroundSuccessLightest = "#e0ffef";
-export const colorBackgroundWarning = "#e46216";
-export const colorBackgroundWarningLightest = "#ffecd8";
-export const colorBorder = "#b6bfce";
-export const colorBorderDark = "#9ca7ba";
-export const colorBorderDestructive = "#ce241a";
-export const colorBorderDestructiveDark = "#700600";
-export const colorBorderDestructiveDarker = "#470500";
-export const colorBorderDestructiveLight = "#ff8c85";
-export const colorBorderDestructiveLighter = "#ffb9b3";
-export const colorBorderError = "#ac1e16";
-export const colorBorderErrorLight = "#e8534a";
-export const colorBorderErrorLightest = "#ffe9e7";
-export const colorBorderInput = "#8894aa";
-export const colorBorderInputFocus = "#003adb";
-export const colorBorderInputHover = "#003adb";
-export const colorBorderLight = "#ccd2dc";
-export const colorBorderNeutralLight = "#b6bfce";
-export const colorBorderPrimary = "#3368fa";
-export const colorBorderPrimaryDark = "#002ca6";
-export const colorBorderPrimaryDarker = "#001f75";
-export const colorBorderPrimaryLight = "#baccff";
-export const colorBorderPrimaryLighter = "#dbe6ff";
-export const colorBorderSuccess = "#00994a";
-export const colorBorderSuccessLightest = "#e0ffef";
-export const colorBorderWarning = "#e46216";
-export const colorBorderWarningLight = "#fa9c66";
-export const colorBorderWarningLightest = "#ffecd8";
-export const colorBrand = "#08152c";
-export const colorBrandHighlight = "#3368fa";
-export const colorGray0 = "#ffffff";
-export const colorGray10 = "#f9fafb";
-export const colorGray100 = "#08152c";
-export const colorGray20 = "#f3f4f6";
-export const colorGray30 = "#e5e7ec";
-export const colorGray40 = "#ccd2dc";
-export const colorGray50 = "#b6bfce";
-export const colorGray60 = "#9ca7ba";
-export const colorGray70 = "#8894aa";
-export const colorGray80 = "#475672";
-export const colorGray90 = "#1d2944";
-export const colorText = "#08152c";
-export const colorTextBrandHighlight = "#f22f46";
-export const colorTextBrandInverse = "#ffffff";
-export const colorTextError = "#ac1e16";
-export const colorTextErrorDark = "#940800";
-export const colorTextIcon = "#8894aa";
-export const colorTextInverse = "#ffffff";
-export const colorTextInverseWeak = "#9ca7ba";
-export const colorTextLabel = "#08152c";
-export const colorTextLink = "#003adb";
-export const colorTextLinkDark = "#002ca6";
-export const colorTextLinkDarker = "#001f75";
-export const colorTextLinkDestructive = "#ce241a";
-export const colorTextLinkDestructiveDark = "#700600";
-export const colorTextLinkDestructiveDarker = "#470500";
-export const colorTextLinkDestructiveLight = "#e8534a";
-export const colorTextLinkLight = "#85a5ff";
-export const colorTextPlaceholder = "#8894aa";
-export const colorTextSuccess = "#00994a";
-export const colorTextWarning = "#e46216";
-export const colorTextWarningDark = "#a83e00";
-export const colorTextWeak = "#475672";
+export const colorBackground = "rgb(243, 244, 246)";
+export const colorBackgroundBody = "rgb(255, 255, 255)";
+export const colorBackgroundBrand = "rgb(35, 54, 89)";
+export const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export const colorBackgroundDestructive = "rgb(206, 36, 26)";
+export const colorBackgroundDestructiveDark = "rgb(112, 6, 0)";
+export const colorBackgroundDestructiveDarker = "rgb(71, 5, 0)";
+export const colorBackgroundDestructiveLight = "rgb(255, 140, 133)";
+export const colorBackgroundDestructiveLighter = "rgb(255, 185, 179)";
+export const colorBackgroundDestructiveLightest = "rgb(255, 233, 231)";
+export const colorBackgroundError = "rgb(172, 30, 22)";
+export const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
+export const colorBackgroundInverse = "rgb(8, 21, 44)";
+export const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
+export const colorBackgroundOverlay = "rgba(8, 21, 44, 0.5)";
+export const colorBackgroundPrimary = "rgb(51, 104, 250)";
+export const colorBackgroundPrimaryDark = "rgb(0, 44, 166)";
+export const colorBackgroundPrimaryDarker = "rgb(0, 31, 117)";
+export const colorBackgroundPrimaryLight = "rgb(186, 204, 255)";
+export const colorBackgroundPrimaryLighter = "rgb(219, 230, 255)";
+export const colorBackgroundPrimaryLightest = "rgb(245, 248, 255)";
+export const colorBackgroundRequired = "rgb(232, 83, 74)";
+export const colorBackgroundRowStriped = "rgb(249, 250, 251)";
+export const colorBackgroundSuccess = "rgb(0, 153, 74)";
+export const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
+export const colorBackgroundWarning = "rgb(228, 98, 22)";
+export const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
+export const colorBorder = "rgb(182, 191, 206)";
+export const colorBorderDark = "rgb(156, 167, 186)";
+export const colorBorderDestructive = "rgb(206, 36, 26)";
+export const colorBorderDestructiveDark = "rgb(112, 6, 0)";
+export const colorBorderDestructiveDarker = "rgb(71, 5, 0)";
+export const colorBorderDestructiveLight = "rgb(255, 140, 133)";
+export const colorBorderDestructiveLighter = "rgb(255, 185, 179)";
+export const colorBorderError = "rgb(172, 30, 22)";
+export const colorBorderErrorLight = "rgb(232, 83, 74)";
+export const colorBorderErrorLightest = "rgb(255, 233, 231)";
+export const colorBorderInput = "rgb(136, 148, 170)";
+export const colorBorderInputFocus = "rgb(0, 58, 219)";
+export const colorBorderInputHover = "rgb(0, 58, 219)";
+export const colorBorderLight = "rgb(204, 210, 220)";
+export const colorBorderNeutralLight = "rgb(182, 191, 206)";
+export const colorBorderPrimary = "rgb(51, 104, 250)";
+export const colorBorderPrimaryDark = "rgb(0, 44, 166)";
+export const colorBorderPrimaryDarker = "rgb(0, 31, 117)";
+export const colorBorderPrimaryLight = "rgb(186, 204, 255)";
+export const colorBorderPrimaryLighter = "rgb(219, 230, 255)";
+export const colorBorderSuccess = "rgb(0, 153, 74)";
+export const colorBorderSuccessLightest = "rgb(224, 255, 239)";
+export const colorBorderWarning = "rgb(228, 98, 22)";
+export const colorBorderWarningLight = "rgb(250, 156, 102)";
+export const colorBorderWarningLightest = "rgb(255, 236, 216)";
+export const colorBrand = "rgb(8, 21, 44)";
+export const colorBrandHighlight = "rgb(51, 104, 250)";
+export const colorGray0 = "rgb(255, 255, 255)";
+export const colorGray10 = "rgb(249, 250, 251)";
+export const colorGray100 = "rgb(8, 21, 44)";
+export const colorGray20 = "rgb(243, 244, 246)";
+export const colorGray30 = "rgb(229, 231, 236)";
+export const colorGray40 = "rgb(204, 210, 220)";
+export const colorGray50 = "rgb(182, 191, 206)";
+export const colorGray60 = "rgb(156, 167, 186)";
+export const colorGray70 = "rgb(136, 148, 170)";
+export const colorGray80 = "rgb(71, 86, 114)";
+export const colorGray90 = "rgb(29, 41, 68)";
+export const colorText = "rgb(8, 21, 44)";
+export const colorTextBrandHighlight = "rgb(242, 47, 70)";
+export const colorTextBrandInverse = "rgb(255, 255, 255)";
+export const colorTextError = "rgb(172, 30, 22)";
+export const colorTextErrorDark = "rgb(148, 8, 0)";
+export const colorTextIcon = "rgb(136, 148, 170)";
+export const colorTextInverse = "rgb(255, 255, 255)";
+export const colorTextInverseWeak = "rgb(156, 167, 186)";
+export const colorTextLabel = "rgb(8, 21, 44)";
+export const colorTextLink = "rgb(0, 58, 219)";
+export const colorTextLinkDark = "rgb(0, 44, 166)";
+export const colorTextLinkDarker = "rgb(0, 31, 117)";
+export const colorTextLinkDestructive = "rgb(206, 36, 26)";
+export const colorTextLinkDestructiveDark = "rgb(112, 6, 0)";
+export const colorTextLinkDestructiveDarker = "rgb(71, 5, 0)";
+export const colorTextLinkDestructiveLight = "rgb(232, 83, 74)";
+export const colorTextLinkLight = "rgb(133, 165, 255)";
+export const colorTextPlaceholder = "rgb(136, 148, 170)";
+export const colorTextSuccess = "rgb(0, 153, 74)";
+export const colorTextWarning = "rgb(228, 98, 22)";
+export const colorTextWarningDark = "rgb(168, 62, 0)";
+export const colorTextWeak = "rgb(71, 86, 114)";
 export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -202,2 +203,3 @@ export const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";
 colorBackgroundNeutralLightest,
+colorBackgroundOverlay,
 colorBackgroundPrimary,
@@ -204,0 +206,0 @@ colorBackgroundPrimaryDark,

dist/themes/sendgrid/tokens.gatsby.json

 {
     "tokens": [{
     "categoryName": "background-colors",
-    "tokens": [{"type":"color","category":"background-color","value":"#f3f4f6","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","name":"color-background"},{"type":"color","category":"background-color","value":"#ffffff","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"#233659","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"#f22f46","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"#ce241a","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-50}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"#700600","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"#470500","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"#ff8c85","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"#ffb9b3","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-20}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"#ac1e16","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"#08152c","comment":"Inverse background color for any container","originalValue":"{!palette-gray-100}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"#f5f8ff","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"#3368fa","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-50}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"#002ca6","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-70}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"#001f75","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"#baccff","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"#dbe6ff","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-20}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"#f5f8ff","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"#e8534a","comment":"Required background color","originalValue":"{!palette-red-40}","name":"color-background-required"},{"type":"color","category":"background-color","value":"#f9fafb","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"#00994a","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"#e0ffef","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"#e46216","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"#ffecd8","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(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(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(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","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"}]
   },
 {
     "categoryName": "border-colors",
-    "tokens": [{"type":"color","category":"border-color","value":"#b6bfce","comment":"Default border color","originalValue":"{!palette-gray-50}","name":"color-border"},{"type":"color","category":"border-color","value":"#9ca7ba","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"#ce241a","comment":"Destructive border color","originalValue":"{!palette-red-50}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"#700600","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"#470500","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"#ff8c85","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"#ffb9b3","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"#ac1e16","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"#e8534a","comment":"Light error border color","originalValue":"{!palette-red-40}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"#ffe9e7","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"#8894aa","comment":"Input border color","originalValue":"{!palette-gray-70}","name":"color-border-input"},{"type":"color","category":"border-color","value":"#003adb","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"#003adb","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"#ccd2dc","comment":"Light border color","originalValue":"{!palette-gray-40}","name":"color-border-light"},{"type":"color","category":"border-color","value":"#b6bfce","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"#3368fa","comment":"Primary border color","originalValue":"{!palette-blue-50}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"#002ca6","comment":"Dark primary border color","originalValue":"{!palette-blue-70}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"#001f75","comment":"Darker primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"#baccff","comment":"Light primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"#dbe6ff","comment":"Lighter primary border color","originalValue":"{!palette-blue-20}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"#00994a","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"#e0ffef","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"#e46216","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"#fa9c66","comment":"Light warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"#ffecd8","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
+    "tokens": [{"type":"color","category":"border-color","value":"rgb(182, 191, 206)","comment":"Default border color","originalValue":"{!palette-gray-50}","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(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(136, 148, 170)","comment":"Input border color","originalValue":"{!palette-gray-70}","name":"color-border-input"},{"type":"color","category":"border-color","value":"rgb(0, 58, 219)","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"rgb(0, 58, 219)","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"rgb(204, 210, 220)","comment":"Light border color","originalValue":"{!palette-gray-40}","name":"color-border-light"},{"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"}]
   },
@@ -20,3 +20,3 @@ {
     "categoryName": "colors",
-    "tokens": [{"type":"color","category":"color","value":"#08152c","comment":"SendGrid product dark gray","originalValue":"{!palette-gray-100}","name":"color-brand"},{"type":"color","category":"color","value":"#3368fa","comment":"SendGrid product blue","originalValue":"{!palette-blue-50}","name":"color-brand-highlight"},{"type":"color","category":"color","value":"#ffffff","comment":"Gray Color 0","originalValue":"{!palette-gray-0}","name":"color-gray-0"},{"type":"color","category":"color","value":"#f9fafb","comment":"Gray Color 1","originalValue":"{!palette-gray-10}","name":"color-gray-10"},{"type":"color","category":"color","value":"#08152c","comment":"Gray Color 10","originalValue":"{!palette-gray-100}","name":"color-gray-100"},{"type":"color","category":"color","value":"#f3f4f6","comment":"Gray Color 2","originalValue":"{!palette-gray-20}","name":"color-gray-20"},{"type":"color","category":"color","value":"#e5e7ec","comment":"Gray Color 3","originalValue":"{!palette-gray-30}","name":"color-gray-30"},{"type":"color","category":"color","value":"#ccd2dc","comment":"Gray Color 4","originalValue":"{!palette-gray-40}","name":"color-gray-40"},{"type":"color","category":"color","value":"#b6bfce","comment":"Gray Color 5","originalValue":"{!palette-gray-50}","name":"color-gray-50"},{"type":"color","category":"color","value":"#9ca7ba","comment":"Gray Color 6","originalValue":"{!palette-gray-60}","name":"color-gray-60"},{"type":"color","category":"color","value":"#8894aa","comment":"Gray Color 7","originalValue":"{!palette-gray-70}","name":"color-gray-70"},{"type":"color","category":"color","value":"#475672","comment":"Gray Color 8","originalValue":"{!palette-gray-80}","name":"color-gray-80"},{"type":"color","category":"color","value":"#1d2944","comment":"Gray Color 9","originalValue":"{!palette-gray-90}","name":"color-gray-90"}]
+    "tokens": [{"type":"color","category":"color","value":"rgb(8, 21, 44)","comment":"SendGrid product dark gray","originalValue":"{!palette-gray-100}","name":"color-brand"},{"type":"color","category":"color","value":"rgb(51, 104, 250)","comment":"SendGrid product blue","originalValue":"{!palette-blue-50}","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(249, 250, 251)","comment":"Gray Color 1","originalValue":"{!palette-gray-10}","name":"color-gray-10"},{"type":"color","category":"color","value":"rgb(8, 21, 44)","comment":"Gray Color 10","originalValue":"{!palette-gray-100}","name":"color-gray-100"},{"type":"color","category":"color","value":"rgb(243, 244, 246)","comment":"Gray Color 2","originalValue":"{!palette-gray-20}","name":"color-gray-20"},{"type":"color","category":"color","value":"rgb(229, 231, 236)","comment":"Gray Color 3","originalValue":"{!palette-gray-30}","name":"color-gray-30"},{"type":"color","category":"color","value":"rgb(204, 210, 220)","comment":"Gray Color 4","originalValue":"{!palette-gray-40}","name":"color-gray-40"},{"type":"color","category":"color","value":"rgb(182, 191, 206)","comment":"Gray Color 5","originalValue":"{!palette-gray-50}","name":"color-gray-50"},{"type":"color","category":"color","value":"rgb(156, 167, 186)","comment":"Gray Color 6","originalValue":"{!palette-gray-60}","name":"color-gray-60"},{"type":"color","category":"color","value":"rgb(136, 148, 170)","comment":"Gray Color 7","originalValue":"{!palette-gray-70}","name":"color-gray-70"},{"type":"color","category":"color","value":"rgb(71, 86, 114)","comment":"Gray Color 8","originalValue":"{!palette-gray-80}","name":"color-gray-80"},{"type":"color","category":"color","value":"rgb(29, 41, 68)","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":"#08152c","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"#f22f46","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"#ac1e16","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"#940800","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"#8894aa","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"#ffffff","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":"#9ca7ba","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":"#08152c","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"#003adb","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"#002ca6","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":"#001f75","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":"#ce241a","comment":"Destructive link text","originalValue":"{!palette-red-50}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"#700600","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":"#470500","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":"#e8534a","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":"#85a5ff","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":"#8894aa","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"#00994a","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"#e46216","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"#a83e00","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"#475672","comment":"Weak body text for visual hierarchy. Must pass AA color contrast with color-background.","originalValue":"{!palette-gray-80}","name":"color-text-weak"}]
+    "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"}]
   },
@@ -56,0 +56,0 @@ {

dist/themes/sendgrid/tokens.ios.json

@@ -187,2 +187,9 @@ {
       "type": "color",
+      "category": "background-color",
+      "value": "rgba(8, 21, 44, 0.5)",
+      "comment": "Default background for overlays",
+      "name": "colorBackgroundOverlay"
+    },
+    {
+      "type": "color",
       "category": "border-color",
@@ -189,0 +196,0 @@ "value": "rgb(255, 185, 179)",

dist/themes/sendgrid/tokens.json

 {
-  "color-background-primary-darker": "#001f75",
-  "color-background-primary-lighter": "#dbe6ff",
-  "color-background-destructive-darker": "#470500",
-  "color-background-destructive-lighter": "#ffb9b3",
-  "color-background-warning": "#e46216",
-  "color-background-error-lightest": "#ffe9e7",
-  "color-background-neutral-lightest": "#f5f8ff",
-  "color-background-destructive": "#ce241a",
-  "color-background-primary": "#3368fa",
-  "color-background-success": "#00994a",
-  "color-background-row-striped": "#f9fafb",
-  "color-background-success-lightest": "#e0ffef",
-  "color-background-destructive-lightest": "#ffe9e7",
-  "color-background-primary-lightest": "#f5f8ff",
-  "color-background-brand": "#233659",
-  "color-background-error": "#ac1e16",
-  "color-background-required": "#e8534a",
-  "color-background-destructive-dark": "#700600",
-  "color-background-destructive-light": "#ff8c85",
-  "color-background-primary-dark": "#002ca6",
-  "color-background-primary-light": "#baccff",
-  "color-background-warning-lightest": "#ffecd8",
-  "color-background-body": "#ffffff",
-  "color-background": "#f3f4f6",
-  "color-background-brand-highlight": "#f22f46",
-  "color-background-inverse": "#08152c",
-  "color-border-destructive-lighter": "#ffb9b3",
-  "color-border-primary-lighter": "#dbe6ff",
-  "color-border-input-hover": "#003adb",
-  "color-border-primary-darker": "#001f75",
-  "color-border-warning": "#e46216",
-  "color-border-destructive-darker": "#470500",
-  "color-border-destructive": "#ce241a",
-  "color-border-primary": "#3368fa",
-  "color-border-success": "#00994a",
-  "color-border-error-lightest": "#ffe9e7",
-  "color-border-dark": "#9ca7ba",
-  "color-border-warning-light": "#fa9c66",
-  "color-border-success-lightest": "#e0ffef",
-  "color-border-error": "#ac1e16",
-  "color-border-input": "#8894aa",
-  "color-border-destructive-light": "#ff8c85",
-  "color-border-primary-light": "#baccff",
-  "color-border": "#b6bfce",
-  "color-border-warning-lightest": "#ffecd8",
-  "color-border-primary-dark": "#002ca6",
-  "color-border-destructive-dark": "#700600",
-  "color-border-neutral-light": "#b6bfce",
-  "color-border-error-light": "#e8534a",
-  "color-border-input-focus": "#003adb",
-  "color-border-light": "#ccd2dc",
+  "color-background-primary-darker": "rgb(0, 31, 117)",
+  "color-background-primary-lighter": "rgb(219, 230, 255)",
+  "color-background-destructive-darker": "rgb(71, 5, 0)",
+  "color-background-destructive-lighter": "rgb(255, 185, 179)",
+  "color-background-warning": "rgb(228, 98, 22)",
+  "color-background-error-lightest": "rgb(255, 233, 231)",
+  "color-background-neutral-lightest": "rgb(245, 248, 255)",
+  "color-background-destructive": "rgb(206, 36, 26)",
+  "color-background-primary": "rgb(51, 104, 250)",
+  "color-background-success": "rgb(0, 153, 74)",
+  "color-background-row-striped": "rgb(249, 250, 251)",
+  "color-background-success-lightest": "rgb(224, 255, 239)",
+  "color-background-destructive-lightest": "rgb(255, 233, 231)",
+  "color-background-primary-lightest": "rgb(245, 248, 255)",
+  "color-background-brand": "rgb(35, 54, 89)",
+  "color-background-error": "rgb(172, 30, 22)",
+  "color-background-required": "rgb(232, 83, 74)",
+  "color-background-destructive-dark": "rgb(112, 6, 0)",
+  "color-background-destructive-light": "rgb(255, 140, 133)",
+  "color-background-primary-dark": "rgb(0, 44, 166)",
+  "color-background-primary-light": "rgb(186, 204, 255)",
+  "color-background-warning-lightest": "rgb(255, 236, 216)",
+  "color-background-body": "rgb(255, 255, 255)",
+  "color-background": "rgb(243, 244, 246)",
+  "color-background-brand-highlight": "rgb(242, 47, 70)",
+  "color-background-inverse": "rgb(8, 21, 44)",
+  "color-background-overlay": "rgba(8, 21, 44, 0.5)",
+  "color-border-destructive-lighter": "rgb(255, 185, 179)",
+  "color-border-primary-lighter": "rgb(219, 230, 255)",
+  "color-border-input-hover": "rgb(0, 58, 219)",
+  "color-border-primary-darker": "rgb(0, 31, 117)",
+  "color-border-warning": "rgb(228, 98, 22)",
+  "color-border-destructive-darker": "rgb(71, 5, 0)",
+  "color-border-destructive": "rgb(206, 36, 26)",
+  "color-border-primary": "rgb(51, 104, 250)",
+  "color-border-success": "rgb(0, 153, 74)",
+  "color-border-error-lightest": "rgb(255, 233, 231)",
+  "color-border-dark": "rgb(156, 167, 186)",
+  "color-border-warning-light": "rgb(250, 156, 102)",
+  "color-border-success-lightest": "rgb(224, 255, 239)",
+  "color-border-error": "rgb(172, 30, 22)",
+  "color-border-input": "rgb(136, 148, 170)",
+  "color-border-destructive-light": "rgb(255, 140, 133)",
+  "color-border-primary-light": "rgb(186, 204, 255)",
+  "color-border": "rgb(182, 191, 206)",
+  "color-border-warning-lightest": "rgb(255, 236, 216)",
+  "color-border-primary-dark": "rgb(0, 44, 166)",
+  "color-border-destructive-dark": "rgb(112, 6, 0)",
+  "color-border-neutral-light": "rgb(182, 191, 206)",
+  "color-border-error-light": "rgb(232, 83, 74)",
+  "color-border-input-focus": "rgb(0, 58, 219)",
+  "color-border-light": "rgb(204, 210, 220)",
   "border-radius-0": "0",
@@ -97,15 +98,15 @@ "border-radius-10": "3px",
   "line-height-10": "1rem",
-  "color-brand-highlight": "#3368fa",
-  "color-gray-0": "#ffffff",
-  "color-gray-100": "#08152c",
-  "color-gray-90": "#1d2944",
-  "color-gray-80": "#475672",
-  "color-gray-70": "#8894aa",
-  "color-gray-60": "#9ca7ba",
-  "color-gray-50": "#b6bfce",
-  "color-gray-40": "#ccd2dc",
-  "color-brand": "#08152c",
-  "color-gray-30": "#e5e7ec",
-  "color-gray-20": "#f3f4f6",
-  "color-gray-10": "#f9fafb",
+  "color-brand-highlight": "rgb(51, 104, 250)",
+  "color-gray-0": "rgb(255, 255, 255)",
+  "color-gray-100": "rgb(8, 21, 44)",
+  "color-gray-90": "rgb(29, 41, 68)",
+  "color-gray-80": "rgb(71, 86, 114)",
+  "color-gray-70": "rgb(136, 148, 170)",
+  "color-gray-60": "rgb(156, 167, 186)",
+  "color-gray-50": "rgb(182, 191, 206)",
+  "color-gray-40": "rgb(204, 210, 220)",
+  "color-brand": "rgb(8, 21, 44)",
+  "color-gray-30": "rgb(229, 231, 236)",
+  "color-gray-20": "rgb(243, 244, 246)",
+  "color-gray-10": "rgb(249, 250, 251)",
   "size-icon-80": "2.25rem",
@@ -156,24 +157,24 @@ "size-icon-70": "2rem",
   "space-80": "1.75rem",
-  "color-text-link-darker": "#001f75",
-  "color-text-link-destructive": "#ce241a",
-  "color-text-warning": "#e46216",
-  "color-text-inverse-weak": "#9ca7ba",
-  "color-text-link-destructive-darker": "#470500",
-  "color-text-success": "#00994a",
-  "color-text-weak": "#475672",
-  "color-text-link-destructive-light": "#e8534a",
-  "color-text-icon": "#8894aa",
-  "color-text-link": "#003adb",
-  "color-text-error-dark": "#940800",
-  "color-text-error": "#ac1e16",
-  "color-text-link-dark": "#002ca6",
-  "color-text-brand-inverse": "#ffffff",
-  "color-text": "#08152c",
-  "color-text-brand-highlight": "#f22f46",
-  "color-text-link-light": "#85a5ff",
-  "color-text-inverse": "#ffffff",
-  "color-text-placeholder": "#8894aa",
-  "color-text-warning-dark": "#a83e00",
-  "color-text-link-destructive-dark": "#700600",
-  "color-text-label": "#08152c",
+  "color-text-link-darker": "rgb(0, 31, 117)",
+  "color-text-link-destructive": "rgb(206, 36, 26)",
+  "color-text-warning": "rgb(228, 98, 22)",
+  "color-text-inverse-weak": "rgb(156, 167, 186)",
+  "color-text-link-destructive-darker": "rgb(71, 5, 0)",
+  "color-text-success": "rgb(0, 153, 74)",
+  "color-text-weak": "rgb(71, 86, 114)",
+  "color-text-link-destructive-light": "rgb(232, 83, 74)",
+  "color-text-icon": "rgb(136, 148, 170)",
+  "color-text-link": "rgb(0, 58, 219)",
+  "color-text-error-dark": "rgb(148, 8, 0)",
+  "color-text-error": "rgb(172, 30, 22)",
+  "color-text-link-dark": "rgb(0, 44, 166)",
+  "color-text-brand-inverse": "rgb(255, 255, 255)",
+  "color-text": "rgb(8, 21, 44)",
+  "color-text-brand-highlight": "rgb(242, 47, 70)",
+  "color-text-link-light": "rgb(133, 165, 255)",
+  "color-text-inverse": "rgb(255, 255, 255)",
+  "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-label": "rgb(8, 21, 44)",
   "z-index-0": "0",
@@ -180,0 +181,0 @@ "z-index-90": "90",

dist/themes/sendgrid/tokens.raw.json

@@ -28,3 +28,3 @@ {
     "palette-gray-100-transparent-100": {
-      "value": "rgba(18, 28, 45, 1)"
+      "value": "rgba(8, 21, 44, 1)"
     },
@@ -77,3 +77,3 @@ "palette-red-100": {
     "palette-gray-100-transparent-90": {
-      "value": "rgba(18, 28, 45, 0.9)"
+      "value": "rgba(8, 21, 44, 0.9)"
     },
@@ -90,3 +90,3 @@ "palette-red-70": {
     "palette-gray-100-transparent-80": {
-      "value": "rgba(18, 28, 45, 0.8)"
+      "value": "rgba(8, 21, 44, 0.8)"
     },
@@ -103,3 +103,3 @@ "palette-red-60": {
     "palette-gray-100-transparent-70": {
-      "value": "rgba(18, 28, 45, 0.7)"
+      "value": "rgba(8, 21, 44, 0.7)"
     },
@@ -116,3 +116,3 @@ "palette-red-50": {
     "palette-gray-100-transparent-60": {
-      "value": "rgba(18, 28, 45, 0.6)"
+      "value": "rgba(8, 21, 44, 0.6)"
     },
@@ -129,3 +129,3 @@ "palette-red-40": {
     "palette-gray-100-transparent-50": {
-      "value": "rgba(18, 28, 45, 0.5)"
+      "value": "rgba(8, 21, 44, 0.5)"
     },
@@ -145,3 +145,3 @@ "palette-yellow-100": {
     "palette-gray-100-transparent-40": {
-      "value": "rgba(18, 28, 45, 0.4)"
+      "value": "rgba(8, 21, 44, 0.4)"
     },
@@ -158,3 +158,3 @@ "palette-red-20": {
     "palette-gray-100-transparent-30": {
-      "value": "rgba(18, 28, 45, 0.3)"
+      "value": "rgba(8, 21, 44, 0.3)"
     },
@@ -165,6 +165,6 @@ "palette-red-10": {
     "palette-gray-100-transparent-20": {
-      "value": "rgba(18, 28, 45, 0.2)"
+      "value": "rgba(8, 21, 44, 0.2)"
     },
     "palette-gray-100-transparent-10": {
-      "value": "rgba(18, 28, 45, 0.1)"
+      "value": "rgba(8, 21, 44, 0.1)"
     },
@@ -1029,2 +1029,10 @@ "palette-gray-90": {
     },
+    "color-background-overlay": {
+      "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"
+    },
     "color-border-destructive-lighter": {
@@ -1031,0 +1039,0 @@ "type": "color",

dist/tokens.common.d.ts

@@ -9,88 +9,89 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
-export declare const colorBackground = "#f4f4f6";
-export declare const colorBackgroundBody = "#ffffff";
-export declare const colorBackgroundBrand = "#233659";
-export declare const colorBackgroundBrandHighlight = "#f22f46";
-export declare const colorBackgroundDestructive = "#d61f1f";
-export declare const colorBackgroundDestructiveDark = "#750c0c";
-export declare const colorBackgroundDestructiveDarker = "#4a0b0b";
-export declare const colorBackgroundDestructiveLight = "#f58a8a";
-export declare const colorBackgroundDestructiveLighter = "#fccfcf";
-export declare const colorBackgroundDestructiveLightest = "#feecec";
-export declare const colorBackgroundError = "#d61f1f";
-export declare const colorBackgroundErrorLightest = "#feecec";
-export declare const colorBackgroundInverse = "#1f304c";
-export declare const colorBackgroundNeutralLightest = "#ebf4ff";
-export declare const colorBackgroundPrimary = "#0263e0";
-export declare const colorBackgroundPrimaryDark = "#001489";
-export declare const colorBackgroundPrimaryDarker = "#030b5d";
-export declare const colorBackgroundPrimaryLight = "#66b3ff";
-export declare const colorBackgroundPrimaryLighter = "#cce4ff";
-export declare const colorBackgroundPrimaryLightest = "#ebf4ff";
-export declare const colorBackgroundRequired = "#eb5656";
-export declare const colorBackgroundRowStriped = "#f4f4f6";
-export declare const colorBackgroundSuccess = "#14b053";
-export declare const colorBackgroundSuccessLightest = "#edfdf3";
-export declare const colorBackgroundWarning = "#f47c22";
-export declare const colorBackgroundWarningLightest = "#fef5ee";
-export declare const colorBorder = "#aeb2c1";
-export declare const colorBorderDark = "#606b85";
-export declare const colorBorderDestructive = "#d61f1f";
-export declare const colorBorderDestructiveDark = "#750c0c";
-export declare const colorBorderDestructiveDarker = "#4a0b0b";
-export declare const colorBorderDestructiveLight = "#f58a8a";
-export declare const colorBorderDestructiveLighter = "#fccfcf";
-export declare const colorBorderError = "#d61f1f";
-export declare const colorBorderErrorLight = "#f58a8a";
-export declare const colorBorderErrorLightest = "#feecec";
-export declare const colorBorderInput = "#606b85";
-export declare const colorBorderInputFocus = "#0263e0";
-export declare const colorBorderInputHover = "#0263e0";
-export declare const colorBorderLight = "#e1e3ea";
-export declare const colorBorderNeutralLight = "#8891aa";
-export declare const colorBorderPrimary = "#0263e0";
-export declare const colorBorderPrimaryDark = "#001489";
-export declare const colorBorderPrimaryDarker = "#030b5d";
-export declare const colorBorderPrimaryLight = "#66b3ff";
-export declare const colorBorderPrimaryLighter = "#cce4ff";
-export declare const colorBorderSuccess = "#14b053";
-export declare const colorBorderSuccessLightest = "#edfdf3";
-export declare const colorBorderWarning = "#f47c22";
-export declare const colorBorderWarningLight = "#ffb37a";
-export declare const colorBorderWarningLightest = "#fef5ee";
-export declare const colorBrand = "#233659";
-export declare const colorBrandHighlight = "#f22f46";
-export declare const colorGray0 = "#ffffff";
-export declare const colorGray10 = "#f4f4f6";
-export declare const colorGray100 = "#121c2d";
-export declare const colorGray20 = "#e1e3ea";
-export declare const colorGray30 = "#cacdd8";
-export declare const colorGray40 = "#aeb2c1";
-export declare const colorGray50 = "#8891aa";
-export declare const colorGray60 = "#606b85";
-export declare const colorGray70 = "#4b5671";
-export declare const colorGray80 = "#394762";
-export declare const colorGray90 = "#1f304c";
-export declare const colorText = "#121c2d";
-export declare const colorTextBrandHighlight = "#f22f46";
-export declare const colorTextBrandInverse = "#ffffff";
-export declare const colorTextError = "#d61f1f";
-export declare const colorTextErrorDark = "#ad1111";
-export declare const colorTextIcon = "#4b5671";
-export declare const colorTextInverse = "#ffffff";
-export declare const colorTextInverseWeak = "#8891aa";
-export declare const colorTextLabel = "#121c2d";
-export declare const colorTextLink = "#043cb5";
-export declare const colorTextLinkDark = "#001489";
-export declare const colorTextLinkDarker = "#030b5d";
-export declare const colorTextLinkDestructive = "#d61f1f";
-export declare const colorTextLinkDestructiveDark = "#ad1111";
-export declare const colorTextLinkDestructiveDarker = "#750c0c";
-export declare const colorTextLinkDestructiveLight = "#f58a8a";
-export declare const colorTextLinkLight = "#66b3ff";
-export declare const colorTextPlaceholder = "#4b5671";
-export declare const colorTextSuccess = "#14b053";
-export declare const colorTextWarning = "#f47c22";
-export declare const colorTextWarningDark = "#c35323";
-export declare const colorTextWeak = "#4b5671";
+export declare const colorBackground = "rgb(244, 244, 246)";
+export declare const colorBackgroundBody = "rgb(255, 255, 255)";
+export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
+export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundDestructive = "rgb(214, 31, 31)";
+export declare const colorBackgroundDestructiveDark = "rgb(117, 12, 12)";
+export declare const colorBackgroundDestructiveDarker = "rgb(74, 11, 11)";
+export declare const colorBackgroundDestructiveLight = "rgb(245, 138, 138)";
+export declare const colorBackgroundDestructiveLighter = "rgb(252, 207, 207)";
+export declare const colorBackgroundDestructiveLightest = "rgb(254, 236, 236)";
+export declare const colorBackgroundError = "rgb(214, 31, 31)";
+export declare const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
+export declare const colorBackgroundInverse = "rgb(31, 48, 76)";
+export declare const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
+export declare const colorBackgroundOverlay = "rgba(18, 28, 45, 0.5)";
+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 colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
+export declare const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
+export declare const colorBackgroundPrimaryLightest = "rgb(235, 244, 255)";
+export declare const colorBackgroundRequired = "rgb(235, 86, 86)";
+export declare const colorBackgroundRowStriped = "rgb(244, 244, 246)";
+export declare const colorBackgroundSuccess = "rgb(20, 176, 83)";
+export declare const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
+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 colorBorderDark = "rgb(96, 107, 133)";
+export declare const colorBorderDestructive = "rgb(214, 31, 31)";
+export declare const colorBorderDestructiveDark = "rgb(117, 12, 12)";
+export declare const colorBorderDestructiveDarker = "rgb(74, 11, 11)";
+export declare const colorBorderDestructiveLight = "rgb(245, 138, 138)";
+export declare const colorBorderDestructiveLighter = "rgb(252, 207, 207)";
+export declare const colorBorderError = "rgb(214, 31, 31)";
+export declare const colorBorderErrorLight = "rgb(245, 138, 138)";
+export declare const colorBorderErrorLightest = "rgb(254, 236, 236)";
+export declare const colorBorderInput = "rgb(96, 107, 133)";
+export declare const colorBorderInputFocus = "rgb(2, 99, 224)";
+export declare const colorBorderInputHover = "rgb(2, 99, 224)";
+export declare const colorBorderLight = "rgb(225, 227, 234)";
+export declare const colorBorderNeutralLight = "rgb(136, 145, 170)";
+export declare const colorBorderPrimary = "rgb(2, 99, 224)";
+export declare const colorBorderPrimaryDark = "rgb(0, 20, 137)";
+export declare const colorBorderPrimaryDarker = "rgb(3, 11, 93)";
+export declare const colorBorderPrimaryLight = "rgb(102, 179, 255)";
+export declare const colorBorderPrimaryLighter = "rgb(204, 228, 255)";
+export declare const colorBorderSuccess = "rgb(20, 176, 83)";
+export declare const colorBorderSuccessLightest = "rgb(237, 253, 243)";
+export declare const colorBorderWarning = "rgb(244, 124, 34)";
+export declare const colorBorderWarningLight = "rgb(255, 179, 122)";
+export declare const colorBorderWarningLightest = "rgb(254, 245, 238)";
+export declare const colorBrand = "rgb(35, 54, 89)";
+export declare const colorBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorGray0 = "rgb(255, 255, 255)";
+export declare const colorGray10 = "rgb(244, 244, 246)";
+export declare const colorGray100 = "rgb(18, 28, 45)";
+export declare const colorGray20 = "rgb(225, 227, 234)";
+export declare const colorGray30 = "rgb(202, 205, 216)";
+export declare const colorGray40 = "rgb(174, 178, 193)";
+export declare const colorGray50 = "rgb(136, 145, 170)";
+export declare const colorGray60 = "rgb(96, 107, 133)";
+export declare const colorGray70 = "rgb(75, 86, 113)";
+export declare const colorGray80 = "rgb(57, 71, 98)";
+export declare const colorGray90 = "rgb(31, 48, 76)";
+export declare const colorText = "rgb(18, 28, 45)";
+export declare const colorTextBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorTextBrandInverse = "rgb(255, 255, 255)";
+export declare const colorTextError = "rgb(214, 31, 31)";
+export declare const colorTextErrorDark = "rgb(173, 17, 17)";
+export declare const colorTextIcon = "rgb(75, 86, 113)";
+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 colorTextLinkDark = "rgb(0, 20, 137)";
+export declare const colorTextLinkDarker = "rgb(3, 11, 93)";
+export declare const colorTextLinkDestructive = "rgb(214, 31, 31)";
+export declare const colorTextLinkDestructiveDark = "rgb(173, 17, 17)";
+export declare const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
+export declare const colorTextLinkDestructiveLight = "rgb(245, 138, 138)";
+export declare const colorTextLinkLight = "rgb(102, 179, 255)";
+export declare const colorTextPlaceholder = "rgb(75, 86, 113)";
+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 fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -188,55 +189,56 @@ export declare const fontFamilyText = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
 export declare const backgroundColors: {
-  colorBackground: "#f4f4f6";
-  colorBackgroundBody: "#ffffff";
-  colorBackgroundBrand: "#233659";
-  colorBackgroundBrandHighlight: "#f22f46";
-  colorBackgroundDestructive: "#d61f1f";
-  colorBackgroundDestructiveDark: "#750c0c";
-  colorBackgroundDestructiveDarker: "#4a0b0b";
-  colorBackgroundDestructiveLight: "#f58a8a";
-  colorBackgroundDestructiveLighter: "#fccfcf";
-  colorBackgroundDestructiveLightest: "#feecec";
-  colorBackgroundError: "#d61f1f";
-  colorBackgroundErrorLightest: "#feecec";
-  colorBackgroundInverse: "#1f304c";
-  colorBackgroundNeutralLightest: "#ebf4ff";
-  colorBackgroundPrimary: "#0263e0";
-  colorBackgroundPrimaryDark: "#001489";
-  colorBackgroundPrimaryDarker: "#030b5d";
-  colorBackgroundPrimaryLight: "#66b3ff";
-  colorBackgroundPrimaryLighter: "#cce4ff";
-  colorBackgroundPrimaryLightest: "#ebf4ff";
-  colorBackgroundRequired: "#eb5656";
-  colorBackgroundRowStriped: "#f4f4f6";
-  colorBackgroundSuccess: "#14b053";
-  colorBackgroundSuccessLightest: "#edfdf3";
-  colorBackgroundWarning: "#f47c22";
-  colorBackgroundWarningLightest: "#fef5ee";
+  colorBackground: "rgb(244, 244, 246)";
+  colorBackgroundBody: "rgb(255, 255, 255)";
+  colorBackgroundBrand: "rgb(35, 54, 89)";
+  colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundDestructive: "rgb(214, 31, 31)";
+  colorBackgroundDestructiveDark: "rgb(117, 12, 12)";
+  colorBackgroundDestructiveDarker: "rgb(74, 11, 11)";
+  colorBackgroundDestructiveLight: "rgb(245, 138, 138)";
+  colorBackgroundDestructiveLighter: "rgb(252, 207, 207)";
+  colorBackgroundDestructiveLightest: "rgb(254, 236, 236)";
+  colorBackgroundError: "rgb(214, 31, 31)";
+  colorBackgroundErrorLightest: "rgb(254, 236, 236)";
+  colorBackgroundInverse: "rgb(31, 48, 76)";
+  colorBackgroundNeutralLightest: "rgb(235, 244, 255)";
+  colorBackgroundOverlay: "rgba(18, 28, 45, 0.5)";
+  colorBackgroundPrimary: "rgb(2, 99, 224)";
+  colorBackgroundPrimaryDark: "rgb(0, 20, 137)";
+  colorBackgroundPrimaryDarker: "rgb(3, 11, 93)";
+  colorBackgroundPrimaryLight: "rgb(102, 179, 255)";
+  colorBackgroundPrimaryLighter: "rgb(204, 228, 255)";
+  colorBackgroundPrimaryLightest: "rgb(235, 244, 255)";
+  colorBackgroundRequired: "rgb(235, 86, 86)";
+  colorBackgroundRowStriped: "rgb(244, 244, 246)";
+  colorBackgroundSuccess: "rgb(20, 176, 83)";
+  colorBackgroundSuccessLightest: "rgb(237, 253, 243)";
+  colorBackgroundWarning: "rgb(244, 124, 34)";
+  colorBackgroundWarningLightest: "rgb(254, 245, 238)";
 };
 export declare const borderColors: {
-  colorBorder: "#aeb2c1";
-  colorBorderDark: "#606b85";
-  colorBorderDestructive: "#d61f1f";
-  colorBorderDestructiveDark: "#750c0c";
-  colorBorderDestructiveDarker: "#4a0b0b";
-  colorBorderDestructiveLight: "#f58a8a";
-  colorBorderDestructiveLighter: "#fccfcf";
-  colorBorderError: "#d61f1f";
-  colorBorderErrorLight: "#f58a8a";
-  colorBorderErrorLightest: "#feecec";
-  colorBorderInput: "#606b85";
-  colorBorderInputFocus: "#0263e0";
-  colorBorderInputHover: "#0263e0";
-  colorBorderLight: "#e1e3ea";
-  colorBorderNeutralLight: "#8891aa";
-  colorBorderPrimary: "#0263e0";
-  colorBorderPrimaryDark: "#001489";
-  colorBorderPrimaryDarker: "#030b5d";
-  colorBorderPrimaryLight: "#66b3ff";
-  colorBorderPrimaryLighter: "#cce4ff";
-  colorBorderSuccess: "#14b053";
-  colorBorderSuccessLightest: "#edfdf3";
-  colorBorderWarning: "#f47c22";
-  colorBorderWarningLight: "#ffb37a";
-  colorBorderWarningLightest: "#fef5ee";
+  colorBorder: "rgb(174, 178, 193)";
+  colorBorderDark: "rgb(96, 107, 133)";
+  colorBorderDestructive: "rgb(214, 31, 31)";
+  colorBorderDestructiveDark: "rgb(117, 12, 12)";
+  colorBorderDestructiveDarker: "rgb(74, 11, 11)";
+  colorBorderDestructiveLight: "rgb(245, 138, 138)";
+  colorBorderDestructiveLighter: "rgb(252, 207, 207)";
+  colorBorderError: "rgb(214, 31, 31)";
+  colorBorderErrorLight: "rgb(245, 138, 138)";
+  colorBorderErrorLightest: "rgb(254, 236, 236)";
+  colorBorderInput: "rgb(96, 107, 133)";
+  colorBorderInputFocus: "rgb(2, 99, 224)";
+  colorBorderInputHover: "rgb(2, 99, 224)";
+  colorBorderLight: "rgb(225, 227, 234)";
+  colorBorderNeutralLight: "rgb(136, 145, 170)";
+  colorBorderPrimary: "rgb(2, 99, 224)";
+  colorBorderPrimaryDark: "rgb(0, 20, 137)";
+  colorBorderPrimaryDarker: "rgb(3, 11, 93)";
+  colorBorderPrimaryLight: "rgb(102, 179, 255)";
+  colorBorderPrimaryLighter: "rgb(204, 228, 255)";
+  colorBorderSuccess: "rgb(20, 176, 83)";
+  colorBorderSuccessLightest: "rgb(237, 253, 243)";
+  colorBorderWarning: "rgb(244, 124, 34)";
+  colorBorderWarningLight: "rgb(255, 179, 122)";
+  colorBorderWarningLightest: "rgb(254, 245, 238)";
 };
@@ -258,15 +260,15 @@ export declare const borderWidths: {
 export declare const colors: {
-  colorBrand: "#233659";
-  colorBrandHighlight: "#f22f46";
-  colorGray0: "#ffffff";
-  colorGray10: "#f4f4f6";
-  colorGray100: "#121c2d";
-  colorGray20: "#e1e3ea";
-  colorGray30: "#cacdd8";
-  colorGray40: "#aeb2c1";
-  colorGray50: "#8891aa";
-  colorGray60: "#606b85";
-  colorGray70: "#4b5671";
-  colorGray80: "#394762";
-  colorGray90: "#1f304c";
+  colorBrand: "rgb(35, 54, 89)";
+  colorBrandHighlight: "rgb(242, 47, 70)";
+  colorGray0: "rgb(255, 255, 255)";
+  colorGray10: "rgb(244, 244, 246)";
+  colorGray100: "rgb(18, 28, 45)";
+  colorGray20: "rgb(225, 227, 234)";
+  colorGray30: "rgb(202, 205, 216)";
+  colorGray40: "rgb(174, 178, 193)";
+  colorGray50: "rgb(136, 145, 170)";
+  colorGray60: "rgb(96, 107, 133)";
+  colorGray70: "rgb(75, 86, 113)";
+  colorGray80: "rgb(57, 71, 98)";
+  colorGray90: "rgb(31, 48, 76)";
 };
@@ -367,24 +369,24 @@ export declare const fonts: {
 export declare const textColors: {
-  colorText: "#121c2d";
-  colorTextBrandHighlight: "#f22f46";
-  colorTextBrandInverse: "#ffffff";
-  colorTextError: "#d61f1f";
-  colorTextErrorDark: "#ad1111";
-  colorTextIcon: "#4b5671";
-  colorTextInverse: "#ffffff";
-  colorTextInverseWeak: "#8891aa";
-  colorTextLabel: "#121c2d";
-  colorTextLink: "#043cb5";
-  colorTextLinkDark: "#001489";
-  colorTextLinkDarker: "#030b5d";
-  colorTextLinkDestructive: "#d61f1f";
-  colorTextLinkDestructiveDark: "#ad1111";
-  colorTextLinkDestructiveDarker: "#750c0c";
-  colorTextLinkDestructiveLight: "#f58a8a";
-  colorTextLinkLight: "#66b3ff";
-  colorTextPlaceholder: "#4b5671";
-  colorTextSuccess: "#14b053";
-  colorTextWarning: "#f47c22";
-  colorTextWarningDark: "#c35323";
-  colorTextWeak: "#4b5671";
+  colorText: "rgb(18, 28, 45)";
+  colorTextBrandHighlight: "rgb(242, 47, 70)";
+  colorTextBrandInverse: "rgb(255, 255, 255)";
+  colorTextError: "rgb(214, 31, 31)";
+  colorTextErrorDark: "rgb(173, 17, 17)";
+  colorTextIcon: "rgb(75, 86, 113)";
+  colorTextInverse: "rgb(255, 255, 255)";
+  colorTextInverseWeak: "rgb(136, 145, 170)";
+  colorTextLabel: "rgb(18, 28, 45)";
+  colorTextLink: "rgb(4, 60, 181)";
+  colorTextLinkDark: "rgb(0, 20, 137)";
+  colorTextLinkDarker: "rgb(3, 11, 93)";
+  colorTextLinkDestructive: "rgb(214, 31, 31)";
+  colorTextLinkDestructiveDark: "rgb(173, 17, 17)";
+  colorTextLinkDestructiveDarker: "rgb(117, 12, 12)";
+  colorTextLinkDestructiveLight: "rgb(245, 138, 138)";
+  colorTextLinkLight: "rgb(102, 179, 255)";
+  colorTextPlaceholder: "rgb(75, 86, 113)";
+  colorTextSuccess: "rgb(20, 176, 83)";
+  colorTextWarning: "rgb(244, 124, 34)";
+  colorTextWarningDark: "rgb(195, 83, 35)";
+  colorTextWeak: "rgb(75, 86, 113)";
 };
@@ -391,0 +393,0 @@ export declare const zIndices: {

dist/tokens.common.js

@@ -9,88 +9,89 @@ const borderRadius0 = "0";
 const borderWidth20 = "2px";
-const colorBackground = "#f4f4f6";
-const colorBackgroundBody = "#ffffff";
-const colorBackgroundBrand = "#233659";
-const colorBackgroundBrandHighlight = "#f22f46";
-const colorBackgroundDestructive = "#d61f1f";
-const colorBackgroundDestructiveDark = "#750c0c";
-const colorBackgroundDestructiveDarker = "#4a0b0b";
-const colorBackgroundDestructiveLight = "#f58a8a";
-const colorBackgroundDestructiveLighter = "#fccfcf";
-const colorBackgroundDestructiveLightest = "#feecec";
-const colorBackgroundError = "#d61f1f";
-const colorBackgroundErrorLightest = "#feecec";
-const colorBackgroundInverse = "#1f304c";
-const colorBackgroundNeutralLightest = "#ebf4ff";
-const colorBackgroundPrimary = "#0263e0";
-const colorBackgroundPrimaryDark = "#001489";
-const colorBackgroundPrimaryDarker = "#030b5d";
-const colorBackgroundPrimaryLight = "#66b3ff";
-const colorBackgroundPrimaryLighter = "#cce4ff";
-const colorBackgroundPrimaryLightest = "#ebf4ff";
-const colorBackgroundRequired = "#eb5656";
-const colorBackgroundRowStriped = "#f4f4f6";
-const colorBackgroundSuccess = "#14b053";
-const colorBackgroundSuccessLightest = "#edfdf3";
-const colorBackgroundWarning = "#f47c22";
-const colorBackgroundWarningLightest = "#fef5ee";
-const colorBorder = "#aeb2c1";
-const colorBorderDark = "#606b85";
-const colorBorderDestructive = "#d61f1f";
-const colorBorderDestructiveDark = "#750c0c";
-const colorBorderDestructiveDarker = "#4a0b0b";
-const colorBorderDestructiveLight = "#f58a8a";
-const colorBorderDestructiveLighter = "#fccfcf";
-const colorBorderError = "#d61f1f";
-const colorBorderErrorLight = "#f58a8a";
-const colorBorderErrorLightest = "#feecec";
-const colorBorderInput = "#606b85";
-const colorBorderInputFocus = "#0263e0";
-const colorBorderInputHover = "#0263e0";
-const colorBorderLight = "#e1e3ea";
-const colorBorderNeutralLight = "#8891aa";
-const colorBorderPrimary = "#0263e0";
-const colorBorderPrimaryDark = "#001489";
-const colorBorderPrimaryDarker = "#030b5d";
-const colorBorderPrimaryLight = "#66b3ff";
-const colorBorderPrimaryLighter = "#cce4ff";
-const colorBorderSuccess = "#14b053";
-const colorBorderSuccessLightest = "#edfdf3";
-const colorBorderWarning = "#f47c22";
-const colorBorderWarningLight = "#ffb37a";
-const colorBorderWarningLightest = "#fef5ee";
-const colorBrand = "#233659";
-const colorBrandHighlight = "#f22f46";
-const colorGray0 = "#ffffff";
-const colorGray10 = "#f4f4f6";
-const colorGray100 = "#121c2d";
-const colorGray20 = "#e1e3ea";
-const colorGray30 = "#cacdd8";
-const colorGray40 = "#aeb2c1";
-const colorGray50 = "#8891aa";
-const colorGray60 = "#606b85";
-const colorGray70 = "#4b5671";
-const colorGray80 = "#394762";
-const colorGray90 = "#1f304c";
-const colorText = "#121c2d";
-const colorTextBrandHighlight = "#f22f46";
-const colorTextBrandInverse = "#ffffff";
-const colorTextError = "#d61f1f";
-const colorTextErrorDark = "#ad1111";
-const colorTextIcon = "#4b5671";
-const colorTextInverse = "#ffffff";
-const colorTextInverseWeak = "#8891aa";
-const colorTextLabel = "#121c2d";
-const colorTextLink = "#043cb5";
-const colorTextLinkDark = "#001489";
-const colorTextLinkDarker = "#030b5d";
-const colorTextLinkDestructive = "#d61f1f";
-const colorTextLinkDestructiveDark = "#ad1111";
-const colorTextLinkDestructiveDarker = "#750c0c";
-const colorTextLinkDestructiveLight = "#f58a8a";
-const colorTextLinkLight = "#66b3ff";
-const colorTextPlaceholder = "#4b5671";
-const colorTextSuccess = "#14b053";
-const colorTextWarning = "#f47c22";
-const colorTextWarningDark = "#c35323";
-const colorTextWeak = "#4b5671";
+const colorBackground = "rgb(244, 244, 246)";
+const colorBackgroundBody = "rgb(255, 255, 255)";
+const colorBackgroundBrand = "rgb(35, 54, 89)";
+const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+const colorBackgroundDestructive = "rgb(214, 31, 31)";
+const colorBackgroundDestructiveDark = "rgb(117, 12, 12)";
+const colorBackgroundDestructiveDarker = "rgb(74, 11, 11)";
+const colorBackgroundDestructiveLight = "rgb(245, 138, 138)";
+const colorBackgroundDestructiveLighter = "rgb(252, 207, 207)";
+const colorBackgroundDestructiveLightest = "rgb(254, 236, 236)";
+const colorBackgroundError = "rgb(214, 31, 31)";
+const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
+const colorBackgroundInverse = "rgb(31, 48, 76)";
+const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
+const colorBackgroundOverlay = "rgba(18, 28, 45, 0.5)";
+const colorBackgroundPrimary = "rgb(2, 99, 224)";
+const colorBackgroundPrimaryDark = "rgb(0, 20, 137)";
+const colorBackgroundPrimaryDarker = "rgb(3, 11, 93)";
+const colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
+const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
+const colorBackgroundPrimaryLightest = "rgb(235, 244, 255)";
+const colorBackgroundRequired = "rgb(235, 86, 86)";
+const colorBackgroundRowStriped = "rgb(244, 244, 246)";
+const colorBackgroundSuccess = "rgb(20, 176, 83)";
+const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
+const colorBackgroundWarning = "rgb(244, 124, 34)";
+const colorBackgroundWarningLightest = "rgb(254, 245, 238)";
+const colorBorder = "rgb(174, 178, 193)";
+const colorBorderDark = "rgb(96, 107, 133)";
+const colorBorderDestructive = "rgb(214, 31, 31)";
+const colorBorderDestructiveDark = "rgb(117, 12, 12)";
+const colorBorderDestructiveDarker = "rgb(74, 11, 11)";
+const colorBorderDestructiveLight = "rgb(245, 138, 138)";
+const colorBorderDestructiveLighter = "rgb(252, 207, 207)";
+const colorBorderError = "rgb(214, 31, 31)";
+const colorBorderErrorLight = "rgb(245, 138, 138)";
+const colorBorderErrorLightest = "rgb(254, 236, 236)";
+const colorBorderInput = "rgb(96, 107, 133)";
+const colorBorderInputFocus = "rgb(2, 99, 224)";
+const colorBorderInputHover = "rgb(2, 99, 224)";
+const colorBorderLight = "rgb(225, 227, 234)";
+const colorBorderNeutralLight = "rgb(136, 145, 170)";
+const colorBorderPrimary = "rgb(2, 99, 224)";
+const colorBorderPrimaryDark = "rgb(0, 20, 137)";
+const colorBorderPrimaryDarker = "rgb(3, 11, 93)";
+const colorBorderPrimaryLight = "rgb(102, 179, 255)";
+const colorBorderPrimaryLighter = "rgb(204, 228, 255)";
+const colorBorderSuccess = "rgb(20, 176, 83)";
+const colorBorderSuccessLightest = "rgb(237, 253, 243)";
+const colorBorderWarning = "rgb(244, 124, 34)";
+const colorBorderWarningLight = "rgb(255, 179, 122)";
+const colorBorderWarningLightest = "rgb(254, 245, 238)";
+const colorBrand = "rgb(35, 54, 89)";
+const colorBrandHighlight = "rgb(242, 47, 70)";
+const colorGray0 = "rgb(255, 255, 255)";
+const colorGray10 = "rgb(244, 244, 246)";
+const colorGray100 = "rgb(18, 28, 45)";
+const colorGray20 = "rgb(225, 227, 234)";
+const colorGray30 = "rgb(202, 205, 216)";
+const colorGray40 = "rgb(174, 178, 193)";
+const colorGray50 = "rgb(136, 145, 170)";
+const colorGray60 = "rgb(96, 107, 133)";
+const colorGray70 = "rgb(75, 86, 113)";
+const colorGray80 = "rgb(57, 71, 98)";
+const colorGray90 = "rgb(31, 48, 76)";
+const colorText = "rgb(18, 28, 45)";
+const colorTextBrandHighlight = "rgb(242, 47, 70)";
+const colorTextBrandInverse = "rgb(255, 255, 255)";
+const colorTextError = "rgb(214, 31, 31)";
+const colorTextErrorDark = "rgb(173, 17, 17)";
+const colorTextIcon = "rgb(75, 86, 113)";
+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 colorTextLinkDark = "rgb(0, 20, 137)";
+const colorTextLinkDarker = "rgb(3, 11, 93)";
+const colorTextLinkDestructive = "rgb(214, 31, 31)";
+const colorTextLinkDestructiveDark = "rgb(173, 17, 17)";
+const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
+const colorTextLinkDestructiveLight = "rgb(245, 138, 138)";
+const colorTextLinkLight = "rgb(102, 179, 255)";
+const colorTextPlaceholder = "rgb(75, 86, 113)";
+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 fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -211,2 +212,3 @@ const fontFamilyText = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
 colorBackgroundNeutralLightest,
+colorBackgroundOverlay,
 colorBackgroundPrimary,
@@ -390,2 +392,3 @@ colorBackgroundPrimaryDark,
 colorBackgroundNeutralLightest,
+colorBackgroundOverlay,
 colorBackgroundPrimary,
@@ -392,0 +395,0 @@ colorBackgroundPrimaryDark,

dist/tokens.es6.d.ts

@@ -9,88 +9,89 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
-export declare const colorBackground = "#f4f4f6";
-export declare const colorBackgroundBody = "#ffffff";
-export declare const colorBackgroundBrand = "#233659";
-export declare const colorBackgroundBrandHighlight = "#f22f46";
-export declare const colorBackgroundDestructive = "#d61f1f";
-export declare const colorBackgroundDestructiveDark = "#750c0c";
-export declare const colorBackgroundDestructiveDarker = "#4a0b0b";
-export declare const colorBackgroundDestructiveLight = "#f58a8a";
-export declare const colorBackgroundDestructiveLighter = "#fccfcf";
-export declare const colorBackgroundDestructiveLightest = "#feecec";
-export declare const colorBackgroundError = "#d61f1f";
-export declare const colorBackgroundErrorLightest = "#feecec";
-export declare const colorBackgroundInverse = "#1f304c";
-export declare const colorBackgroundNeutralLightest = "#ebf4ff";
-export declare const colorBackgroundPrimary = "#0263e0";
-export declare const colorBackgroundPrimaryDark = "#001489";
-export declare const colorBackgroundPrimaryDarker = "#030b5d";
-export declare const colorBackgroundPrimaryLight = "#66b3ff";
-export declare const colorBackgroundPrimaryLighter = "#cce4ff";
-export declare const colorBackgroundPrimaryLightest = "#ebf4ff";
-export declare const colorBackgroundRequired = "#eb5656";
-export declare const colorBackgroundRowStriped = "#f4f4f6";
-export declare const colorBackgroundSuccess = "#14b053";
-export declare const colorBackgroundSuccessLightest = "#edfdf3";
-export declare const colorBackgroundWarning = "#f47c22";
-export declare const colorBackgroundWarningLightest = "#fef5ee";
-export declare const colorBorder = "#aeb2c1";
-export declare const colorBorderDark = "#606b85";
-export declare const colorBorderDestructive = "#d61f1f";
-export declare const colorBorderDestructiveDark = "#750c0c";
-export declare const colorBorderDestructiveDarker = "#4a0b0b";
-export declare const colorBorderDestructiveLight = "#f58a8a";
-export declare const colorBorderDestructiveLighter = "#fccfcf";
-export declare const colorBorderError = "#d61f1f";
-export declare const colorBorderErrorLight = "#f58a8a";
-export declare const colorBorderErrorLightest = "#feecec";
-export declare const colorBorderInput = "#606b85";
-export declare const colorBorderInputFocus = "#0263e0";
-export declare const colorBorderInputHover = "#0263e0";
-export declare const colorBorderLight = "#e1e3ea";
-export declare const colorBorderNeutralLight = "#8891aa";
-export declare const colorBorderPrimary = "#0263e0";
-export declare const colorBorderPrimaryDark = "#001489";
-export declare const colorBorderPrimaryDarker = "#030b5d";
-export declare const colorBorderPrimaryLight = "#66b3ff";
-export declare const colorBorderPrimaryLighter = "#cce4ff";
-export declare const colorBorderSuccess = "#14b053";
-export declare const colorBorderSuccessLightest = "#edfdf3";
-export declare const colorBorderWarning = "#f47c22";
-export declare const colorBorderWarningLight = "#ffb37a";
-export declare const colorBorderWarningLightest = "#fef5ee";
-export declare const colorBrand = "#233659";
-export declare const colorBrandHighlight = "#f22f46";
-export declare const colorGray0 = "#ffffff";
-export declare const colorGray10 = "#f4f4f6";
-export declare const colorGray100 = "#121c2d";
-export declare const colorGray20 = "#e1e3ea";
-export declare const colorGray30 = "#cacdd8";
-export declare const colorGray40 = "#aeb2c1";
-export declare const colorGray50 = "#8891aa";
-export declare const colorGray60 = "#606b85";
-export declare const colorGray70 = "#4b5671";
-export declare const colorGray80 = "#394762";
-export declare const colorGray90 = "#1f304c";
-export declare const colorText = "#121c2d";
-export declare const colorTextBrandHighlight = "#f22f46";
-export declare const colorTextBrandInverse = "#ffffff";
-export declare const colorTextError = "#d61f1f";
-export declare const colorTextErrorDark = "#ad1111";
-export declare const colorTextIcon = "#4b5671";
-export declare const colorTextInverse = "#ffffff";
-export declare const colorTextInverseWeak = "#8891aa";
-export declare const colorTextLabel = "#121c2d";
-export declare const colorTextLink = "#043cb5";
-export declare const colorTextLinkDark = "#001489";
-export declare const colorTextLinkDarker = "#030b5d";
-export declare const colorTextLinkDestructive = "#d61f1f";
-export declare const colorTextLinkDestructiveDark = "#ad1111";
-export declare const colorTextLinkDestructiveDarker = "#750c0c";
-export declare const colorTextLinkDestructiveLight = "#f58a8a";
-export declare const colorTextLinkLight = "#66b3ff";
-export declare const colorTextPlaceholder = "#4b5671";
-export declare const colorTextSuccess = "#14b053";
-export declare const colorTextWarning = "#f47c22";
-export declare const colorTextWarningDark = "#c35323";
-export declare const colorTextWeak = "#4b5671";
+export declare const colorBackground = "rgb(244, 244, 246)";
+export declare const colorBackgroundBody = "rgb(255, 255, 255)";
+export declare const colorBackgroundBrand = "rgb(35, 54, 89)";
+export declare const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorBackgroundDestructive = "rgb(214, 31, 31)";
+export declare const colorBackgroundDestructiveDark = "rgb(117, 12, 12)";
+export declare const colorBackgroundDestructiveDarker = "rgb(74, 11, 11)";
+export declare const colorBackgroundDestructiveLight = "rgb(245, 138, 138)";
+export declare const colorBackgroundDestructiveLighter = "rgb(252, 207, 207)";
+export declare const colorBackgroundDestructiveLightest = "rgb(254, 236, 236)";
+export declare const colorBackgroundError = "rgb(214, 31, 31)";
+export declare const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
+export declare const colorBackgroundInverse = "rgb(31, 48, 76)";
+export declare const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
+export declare const colorBackgroundOverlay = "rgba(18, 28, 45, 0.5)";
+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 colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
+export declare const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
+export declare const colorBackgroundPrimaryLightest = "rgb(235, 244, 255)";
+export declare const colorBackgroundRequired = "rgb(235, 86, 86)";
+export declare const colorBackgroundRowStriped = "rgb(244, 244, 246)";
+export declare const colorBackgroundSuccess = "rgb(20, 176, 83)";
+export declare const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
+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 colorBorderDark = "rgb(96, 107, 133)";
+export declare const colorBorderDestructive = "rgb(214, 31, 31)";
+export declare const colorBorderDestructiveDark = "rgb(117, 12, 12)";
+export declare const colorBorderDestructiveDarker = "rgb(74, 11, 11)";
+export declare const colorBorderDestructiveLight = "rgb(245, 138, 138)";
+export declare const colorBorderDestructiveLighter = "rgb(252, 207, 207)";
+export declare const colorBorderError = "rgb(214, 31, 31)";
+export declare const colorBorderErrorLight = "rgb(245, 138, 138)";
+export declare const colorBorderErrorLightest = "rgb(254, 236, 236)";
+export declare const colorBorderInput = "rgb(96, 107, 133)";
+export declare const colorBorderInputFocus = "rgb(2, 99, 224)";
+export declare const colorBorderInputHover = "rgb(2, 99, 224)";
+export declare const colorBorderLight = "rgb(225, 227, 234)";
+export declare const colorBorderNeutralLight = "rgb(136, 145, 170)";
+export declare const colorBorderPrimary = "rgb(2, 99, 224)";
+export declare const colorBorderPrimaryDark = "rgb(0, 20, 137)";
+export declare const colorBorderPrimaryDarker = "rgb(3, 11, 93)";
+export declare const colorBorderPrimaryLight = "rgb(102, 179, 255)";
+export declare const colorBorderPrimaryLighter = "rgb(204, 228, 255)";
+export declare const colorBorderSuccess = "rgb(20, 176, 83)";
+export declare const colorBorderSuccessLightest = "rgb(237, 253, 243)";
+export declare const colorBorderWarning = "rgb(244, 124, 34)";
+export declare const colorBorderWarningLight = "rgb(255, 179, 122)";
+export declare const colorBorderWarningLightest = "rgb(254, 245, 238)";
+export declare const colorBrand = "rgb(35, 54, 89)";
+export declare const colorBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorGray0 = "rgb(255, 255, 255)";
+export declare const colorGray10 = "rgb(244, 244, 246)";
+export declare const colorGray100 = "rgb(18, 28, 45)";
+export declare const colorGray20 = "rgb(225, 227, 234)";
+export declare const colorGray30 = "rgb(202, 205, 216)";
+export declare const colorGray40 = "rgb(174, 178, 193)";
+export declare const colorGray50 = "rgb(136, 145, 170)";
+export declare const colorGray60 = "rgb(96, 107, 133)";
+export declare const colorGray70 = "rgb(75, 86, 113)";
+export declare const colorGray80 = "rgb(57, 71, 98)";
+export declare const colorGray90 = "rgb(31, 48, 76)";
+export declare const colorText = "rgb(18, 28, 45)";
+export declare const colorTextBrandHighlight = "rgb(242, 47, 70)";
+export declare const colorTextBrandInverse = "rgb(255, 255, 255)";
+export declare const colorTextError = "rgb(214, 31, 31)";
+export declare const colorTextErrorDark = "rgb(173, 17, 17)";
+export declare const colorTextIcon = "rgb(75, 86, 113)";
+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 colorTextLinkDark = "rgb(0, 20, 137)";
+export declare const colorTextLinkDarker = "rgb(3, 11, 93)";
+export declare const colorTextLinkDestructive = "rgb(214, 31, 31)";
+export declare const colorTextLinkDestructiveDark = "rgb(173, 17, 17)";
+export declare const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
+export declare const colorTextLinkDestructiveLight = "rgb(245, 138, 138)";
+export declare const colorTextLinkLight = "rgb(102, 179, 255)";
+export declare const colorTextPlaceholder = "rgb(75, 86, 113)";
+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 fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -188,55 +189,56 @@ export declare const fontFamilyText = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
 export declare const backgroundColors: {
-  colorBackground: "#f4f4f6";
-  colorBackgroundBody: "#ffffff";
-  colorBackgroundBrand: "#233659";
-  colorBackgroundBrandHighlight: "#f22f46";
-  colorBackgroundDestructive: "#d61f1f";
-  colorBackgroundDestructiveDark: "#750c0c";
-  colorBackgroundDestructiveDarker: "#4a0b0b";
-  colorBackgroundDestructiveLight: "#f58a8a";
-  colorBackgroundDestructiveLighter: "#fccfcf";
-  colorBackgroundDestructiveLightest: "#feecec";
-  colorBackgroundError: "#d61f1f";
-  colorBackgroundErrorLightest: "#feecec";
-  colorBackgroundInverse: "#1f304c";
-  colorBackgroundNeutralLightest: "#ebf4ff";
-  colorBackgroundPrimary: "#0263e0";
-  colorBackgroundPrimaryDark: "#001489";
-  colorBackgroundPrimaryDarker: "#030b5d";
-  colorBackgroundPrimaryLight: "#66b3ff";
-  colorBackgroundPrimaryLighter: "#cce4ff";
-  colorBackgroundPrimaryLightest: "#ebf4ff";
-  colorBackgroundRequired: "#eb5656";
-  colorBackgroundRowStriped: "#f4f4f6";
-  colorBackgroundSuccess: "#14b053";
-  colorBackgroundSuccessLightest: "#edfdf3";
-  colorBackgroundWarning: "#f47c22";
-  colorBackgroundWarningLightest: "#fef5ee";
+  colorBackground: "rgb(244, 244, 246)";
+  colorBackgroundBody: "rgb(255, 255, 255)";
+  colorBackgroundBrand: "rgb(35, 54, 89)";
+  colorBackgroundBrandHighlight: "rgb(242, 47, 70)";
+  colorBackgroundDestructive: "rgb(214, 31, 31)";
+  colorBackgroundDestructiveDark: "rgb(117, 12, 12)";
+  colorBackgroundDestructiveDarker: "rgb(74, 11, 11)";
+  colorBackgroundDestructiveLight: "rgb(245, 138, 138)";
+  colorBackgroundDestructiveLighter: "rgb(252, 207, 207)";
+  colorBackgroundDestructiveLightest: "rgb(254, 236, 236)";
+  colorBackgroundError: "rgb(214, 31, 31)";
+  colorBackgroundErrorLightest: "rgb(254, 236, 236)";
+  colorBackgroundInverse: "rgb(31, 48, 76)";
+  colorBackgroundNeutralLightest: "rgb(235, 244, 255)";
+  colorBackgroundOverlay: "rgba(18, 28, 45, 0.5)";
+  colorBackgroundPrimary: "rgb(2, 99, 224)";
+  colorBackgroundPrimaryDark: "rgb(0, 20, 137)";
+  colorBackgroundPrimaryDarker: "rgb(3, 11, 93)";
+  colorBackgroundPrimaryLight: "rgb(102, 179, 255)";
+  colorBackgroundPrimaryLighter: "rgb(204, 228, 255)";
+  colorBackgroundPrimaryLightest: "rgb(235, 244, 255)";
+  colorBackgroundRequired: "rgb(235, 86, 86)";
+  colorBackgroundRowStriped: "rgb(244, 244, 246)";
+  colorBackgroundSuccess: "rgb(20, 176, 83)";
+  colorBackgroundSuccessLightest: "rgb(237, 253, 243)";
+  colorBackgroundWarning: "rgb(244, 124, 34)";
+  colorBackgroundWarningLightest: "rgb(254, 245, 238)";
 };
 export declare const borderColors: {
-  colorBorder: "#aeb2c1";
-  colorBorderDark: "#606b85";
-  colorBorderDestructive: "#d61f1f";
-  colorBorderDestructiveDark: "#750c0c";
-  colorBorderDestructiveDarker: "#4a0b0b";
-  colorBorderDestructiveLight: "#f58a8a";
-  colorBorderDestructiveLighter: "#fccfcf";
-  colorBorderError: "#d61f1f";
-  colorBorderErrorLight: "#f58a8a";
-  colorBorderErrorLightest: "#feecec";
-  colorBorderInput: "#606b85";
-  colorBorderInputFocus: "#0263e0";
-  colorBorderInputHover: "#0263e0";
-  colorBorderLight: "#e1e3ea";
-  colorBorderNeutralLight: "#8891aa";
-  colorBorderPrimary: "#0263e0";
-  colorBorderPrimaryDark: "#001489";
-  colorBorderPrimaryDarker: "#030b5d";
-  colorBorderPrimaryLight: "#66b3ff";
-  colorBorderPrimaryLighter: "#cce4ff";
-  colorBorderSuccess: "#14b053";
-  colorBorderSuccessLightest: "#edfdf3";
-  colorBorderWarning: "#f47c22";
-  colorBorderWarningLight: "#ffb37a";
-  colorBorderWarningLightest: "#fef5ee";
+  colorBorder: "rgb(174, 178, 193)";
+  colorBorderDark: "rgb(96, 107, 133)";
+  colorBorderDestructive: "rgb(214, 31, 31)";
+  colorBorderDestructiveDark: "rgb(117, 12, 12)";
+  colorBorderDestructiveDarker: "rgb(74, 11, 11)";
+  colorBorderDestructiveLight: "rgb(245, 138, 138)";
+  colorBorderDestructiveLighter: "rgb(252, 207, 207)";
+  colorBorderError: "rgb(214, 31, 31)";
+  colorBorderErrorLight: "rgb(245, 138, 138)";
+  colorBorderErrorLightest: "rgb(254, 236, 236)";
+  colorBorderInput: "rgb(96, 107, 133)";
+  colorBorderInputFocus: "rgb(2, 99, 224)";
+  colorBorderInputHover: "rgb(2, 99, 224)";
+  colorBorderLight: "rgb(225, 227, 234)";
+  colorBorderNeutralLight: "rgb(136, 145, 170)";
+  colorBorderPrimary: "rgb(2, 99, 224)";
+  colorBorderPrimaryDark: "rgb(0, 20, 137)";
+  colorBorderPrimaryDarker: "rgb(3, 11, 93)";
+  colorBorderPrimaryLight: "rgb(102, 179, 255)";
+  colorBorderPrimaryLighter: "rgb(204, 228, 255)";
+  colorBorderSuccess: "rgb(20, 176, 83)";
+  colorBorderSuccessLightest: "rgb(237, 253, 243)";
+  colorBorderWarning: "rgb(244, 124, 34)";
+  colorBorderWarningLight: "rgb(255, 179, 122)";
+  colorBorderWarningLightest: "rgb(254, 245, 238)";
 };
@@ -258,15 +260,15 @@ export declare const borderWidths: {
 export declare const colors: {
-  colorBrand: "#233659";
-  colorBrandHighlight: "#f22f46";
-  colorGray0: "#ffffff";
-  colorGray10: "#f4f4f6";
-  colorGray100: "#121c2d";
-  colorGray20: "#e1e3ea";
-  colorGray30: "#cacdd8";
-  colorGray40: "#aeb2c1";
-  colorGray50: "#8891aa";
-  colorGray60: "#606b85";
-  colorGray70: "#4b5671";
-  colorGray80: "#394762";
-  colorGray90: "#1f304c";
+  colorBrand: "rgb(35, 54, 89)";
+  colorBrandHighlight: "rgb(242, 47, 70)";
+  colorGray0: "rgb(255, 255, 255)";
+  colorGray10: "rgb(244, 244, 246)";
+  colorGray100: "rgb(18, 28, 45)";
+  colorGray20: "rgb(225, 227, 234)";
+  colorGray30: "rgb(202, 205, 216)";
+  colorGray40: "rgb(174, 178, 193)";
+  colorGray50: "rgb(136, 145, 170)";
+  colorGray60: "rgb(96, 107, 133)";
+  colorGray70: "rgb(75, 86, 113)";
+  colorGray80: "rgb(57, 71, 98)";
+  colorGray90: "rgb(31, 48, 76)";
 };
@@ -367,24 +369,24 @@ export declare const fonts: {
 export declare const textColors: {
-  colorText: "#121c2d";
-  colorTextBrandHighlight: "#f22f46";
-  colorTextBrandInverse: "#ffffff";
-  colorTextError: "#d61f1f";
-  colorTextErrorDark: "#ad1111";
-  colorTextIcon: "#4b5671";
-  colorTextInverse: "#ffffff";
-  colorTextInverseWeak: "#8891aa";
-  colorTextLabel: "#121c2d";
-  colorTextLink: "#043cb5";
-  colorTextLinkDark: "#001489";
-  colorTextLinkDarker: "#030b5d";
-  colorTextLinkDestructive: "#d61f1f";
-  colorTextLinkDestructiveDark: "#ad1111";
-  colorTextLinkDestructiveDarker: "#750c0c";
-  colorTextLinkDestructiveLight: "#f58a8a";
-  colorTextLinkLight: "#66b3ff";
-  colorTextPlaceholder: "#4b5671";
-  colorTextSuccess: "#14b053";
-  colorTextWarning: "#f47c22";
-  colorTextWarningDark: "#c35323";
-  colorTextWeak: "#4b5671";
+  colorText: "rgb(18, 28, 45)";
+  colorTextBrandHighlight: "rgb(242, 47, 70)";
+  colorTextBrandInverse: "rgb(255, 255, 255)";
+  colorTextError: "rgb(214, 31, 31)";
+  colorTextErrorDark: "rgb(173, 17, 17)";
+  colorTextIcon: "rgb(75, 86, 113)";
+  colorTextInverse: "rgb(255, 255, 255)";
+  colorTextInverseWeak: "rgb(136, 145, 170)";
+  colorTextLabel: "rgb(18, 28, 45)";
+  colorTextLink: "rgb(4, 60, 181)";
+  colorTextLinkDark: "rgb(0, 20, 137)";
+  colorTextLinkDarker: "rgb(3, 11, 93)";
+  colorTextLinkDestructive: "rgb(214, 31, 31)";
+  colorTextLinkDestructiveDark: "rgb(173, 17, 17)";
+  colorTextLinkDestructiveDarker: "rgb(117, 12, 12)";
+  colorTextLinkDestructiveLight: "rgb(245, 138, 138)";
+  colorTextLinkLight: "rgb(102, 179, 255)";
+  colorTextPlaceholder: "rgb(75, 86, 113)";
+  colorTextSuccess: "rgb(20, 176, 83)";
+  colorTextWarning: "rgb(244, 124, 34)";
+  colorTextWarningDark: "rgb(195, 83, 35)";
+  colorTextWeak: "rgb(75, 86, 113)";
 };
@@ -391,0 +393,0 @@ export declare const zIndices: {

dist/tokens.es6.js

@@ -9,88 +9,89 @@ export const borderRadius0 = "0";
 export const borderWidth20 = "2px";
-export const colorBackground = "#f4f4f6";
-export const colorBackgroundBody = "#ffffff";
-export const colorBackgroundBrand = "#233659";
-export const colorBackgroundBrandHighlight = "#f22f46";
-export const colorBackgroundDestructive = "#d61f1f";
-export const colorBackgroundDestructiveDark = "#750c0c";
-export const colorBackgroundDestructiveDarker = "#4a0b0b";
-export const colorBackgroundDestructiveLight = "#f58a8a";
-export const colorBackgroundDestructiveLighter = "#fccfcf";
-export const colorBackgroundDestructiveLightest = "#feecec";
-export const colorBackgroundError = "#d61f1f";
-export const colorBackgroundErrorLightest = "#feecec";
-export const colorBackgroundInverse = "#1f304c";
-export const colorBackgroundNeutralLightest = "#ebf4ff";
-export const colorBackgroundPrimary = "#0263e0";
-export const colorBackgroundPrimaryDark = "#001489";
-export const colorBackgroundPrimaryDarker = "#030b5d";
-export const colorBackgroundPrimaryLight = "#66b3ff";
-export const colorBackgroundPrimaryLighter = "#cce4ff";
-export const colorBackgroundPrimaryLightest = "#ebf4ff";
-export const colorBackgroundRequired = "#eb5656";
-export const colorBackgroundRowStriped = "#f4f4f6";
-export const colorBackgroundSuccess = "#14b053";
-export const colorBackgroundSuccessLightest = "#edfdf3";
-export const colorBackgroundWarning = "#f47c22";
-export const colorBackgroundWarningLightest = "#fef5ee";
-export const colorBorder = "#aeb2c1";
-export const colorBorderDark = "#606b85";
-export const colorBorderDestructive = "#d61f1f";
-export const colorBorderDestructiveDark = "#750c0c";
-export const colorBorderDestructiveDarker = "#4a0b0b";
-export const colorBorderDestructiveLight = "#f58a8a";
-export const colorBorderDestructiveLighter = "#fccfcf";
-export const colorBorderError = "#d61f1f";
-export const colorBorderErrorLight = "#f58a8a";
-export const colorBorderErrorLightest = "#feecec";
-export const colorBorderInput = "#606b85";
-export const colorBorderInputFocus = "#0263e0";
-export const colorBorderInputHover = "#0263e0";
-export const colorBorderLight = "#e1e3ea";
-export const colorBorderNeutralLight = "#8891aa";
-export const colorBorderPrimary = "#0263e0";
-export const colorBorderPrimaryDark = "#001489";
-export const colorBorderPrimaryDarker = "#030b5d";
-export const colorBorderPrimaryLight = "#66b3ff";
-export const colorBorderPrimaryLighter = "#cce4ff";
-export const colorBorderSuccess = "#14b053";
-export const colorBorderSuccessLightest = "#edfdf3";
-export const colorBorderWarning = "#f47c22";
-export const colorBorderWarningLight = "#ffb37a";
-export const colorBorderWarningLightest = "#fef5ee";
-export const colorBrand = "#233659";
-export const colorBrandHighlight = "#f22f46";
-export const colorGray0 = "#ffffff";
-export const colorGray10 = "#f4f4f6";
-export const colorGray100 = "#121c2d";
-export const colorGray20 = "#e1e3ea";
-export const colorGray30 = "#cacdd8";
-export const colorGray40 = "#aeb2c1";
-export const colorGray50 = "#8891aa";
-export const colorGray60 = "#606b85";
-export const colorGray70 = "#4b5671";
-export const colorGray80 = "#394762";
-export const colorGray90 = "#1f304c";
-export const colorText = "#121c2d";
-export const colorTextBrandHighlight = "#f22f46";
-export const colorTextBrandInverse = "#ffffff";
-export const colorTextError = "#d61f1f";
-export const colorTextErrorDark = "#ad1111";
-export const colorTextIcon = "#4b5671";
-export const colorTextInverse = "#ffffff";
-export const colorTextInverseWeak = "#8891aa";
-export const colorTextLabel = "#121c2d";
-export const colorTextLink = "#043cb5";
-export const colorTextLinkDark = "#001489";
-export const colorTextLinkDarker = "#030b5d";
-export const colorTextLinkDestructive = "#d61f1f";
-export const colorTextLinkDestructiveDark = "#ad1111";
-export const colorTextLinkDestructiveDarker = "#750c0c";
-export const colorTextLinkDestructiveLight = "#f58a8a";
-export const colorTextLinkLight = "#66b3ff";
-export const colorTextPlaceholder = "#4b5671";
-export const colorTextSuccess = "#14b053";
-export const colorTextWarning = "#f47c22";
-export const colorTextWarningDark = "#c35323";
-export const colorTextWeak = "#4b5671";
+export const colorBackground = "rgb(244, 244, 246)";
+export const colorBackgroundBody = "rgb(255, 255, 255)";
+export const colorBackgroundBrand = "rgb(35, 54, 89)";
+export const colorBackgroundBrandHighlight = "rgb(242, 47, 70)";
+export const colorBackgroundDestructive = "rgb(214, 31, 31)";
+export const colorBackgroundDestructiveDark = "rgb(117, 12, 12)";
+export const colorBackgroundDestructiveDarker = "rgb(74, 11, 11)";
+export const colorBackgroundDestructiveLight = "rgb(245, 138, 138)";
+export const colorBackgroundDestructiveLighter = "rgb(252, 207, 207)";
+export const colorBackgroundDestructiveLightest = "rgb(254, 236, 236)";
+export const colorBackgroundError = "rgb(214, 31, 31)";
+export const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
+export const colorBackgroundInverse = "rgb(31, 48, 76)";
+export const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
+export const colorBackgroundOverlay = "rgba(18, 28, 45, 0.5)";
+export const colorBackgroundPrimary = "rgb(2, 99, 224)";
+export const colorBackgroundPrimaryDark = "rgb(0, 20, 137)";
+export const colorBackgroundPrimaryDarker = "rgb(3, 11, 93)";
+export const colorBackgroundPrimaryLight = "rgb(102, 179, 255)";
+export const colorBackgroundPrimaryLighter = "rgb(204, 228, 255)";
+export const colorBackgroundPrimaryLightest = "rgb(235, 244, 255)";
+export const colorBackgroundRequired = "rgb(235, 86, 86)";
+export const colorBackgroundRowStriped = "rgb(244, 244, 246)";
+export const colorBackgroundSuccess = "rgb(20, 176, 83)";
+export const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
+export const colorBackgroundWarning = "rgb(244, 124, 34)";
+export const colorBackgroundWarningLightest = "rgb(254, 245, 238)";
+export const colorBorder = "rgb(174, 178, 193)";
+export const colorBorderDark = "rgb(96, 107, 133)";
+export const colorBorderDestructive = "rgb(214, 31, 31)";
+export const colorBorderDestructiveDark = "rgb(117, 12, 12)";
+export const colorBorderDestructiveDarker = "rgb(74, 11, 11)";
+export const colorBorderDestructiveLight = "rgb(245, 138, 138)";
+export const colorBorderDestructiveLighter = "rgb(252, 207, 207)";
+export const colorBorderError = "rgb(214, 31, 31)";
+export const colorBorderErrorLight = "rgb(245, 138, 138)";
+export const colorBorderErrorLightest = "rgb(254, 236, 236)";
+export const colorBorderInput = "rgb(96, 107, 133)";
+export const colorBorderInputFocus = "rgb(2, 99, 224)";
+export const colorBorderInputHover = "rgb(2, 99, 224)";
+export const colorBorderLight = "rgb(225, 227, 234)";
+export const colorBorderNeutralLight = "rgb(136, 145, 170)";
+export const colorBorderPrimary = "rgb(2, 99, 224)";
+export const colorBorderPrimaryDark = "rgb(0, 20, 137)";
+export const colorBorderPrimaryDarker = "rgb(3, 11, 93)";
+export const colorBorderPrimaryLight = "rgb(102, 179, 255)";
+export const colorBorderPrimaryLighter = "rgb(204, 228, 255)";
+export const colorBorderSuccess = "rgb(20, 176, 83)";
+export const colorBorderSuccessLightest = "rgb(237, 253, 243)";
+export const colorBorderWarning = "rgb(244, 124, 34)";
+export const colorBorderWarningLight = "rgb(255, 179, 122)";
+export const colorBorderWarningLightest = "rgb(254, 245, 238)";
+export const colorBrand = "rgb(35, 54, 89)";
+export const colorBrandHighlight = "rgb(242, 47, 70)";
+export const colorGray0 = "rgb(255, 255, 255)";
+export const colorGray10 = "rgb(244, 244, 246)";
+export const colorGray100 = "rgb(18, 28, 45)";
+export const colorGray20 = "rgb(225, 227, 234)";
+export const colorGray30 = "rgb(202, 205, 216)";
+export const colorGray40 = "rgb(174, 178, 193)";
+export const colorGray50 = "rgb(136, 145, 170)";
+export const colorGray60 = "rgb(96, 107, 133)";
+export const colorGray70 = "rgb(75, 86, 113)";
+export const colorGray80 = "rgb(57, 71, 98)";
+export const colorGray90 = "rgb(31, 48, 76)";
+export const colorText = "rgb(18, 28, 45)";
+export const colorTextBrandHighlight = "rgb(242, 47, 70)";
+export const colorTextBrandInverse = "rgb(255, 255, 255)";
+export const colorTextError = "rgb(214, 31, 31)";
+export const colorTextErrorDark = "rgb(173, 17, 17)";
+export const colorTextIcon = "rgb(75, 86, 113)";
+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 colorTextLinkDark = "rgb(0, 20, 137)";
+export const colorTextLinkDarker = "rgb(3, 11, 93)";
+export const colorTextLinkDestructive = "rgb(214, 31, 31)";
+export const colorTextLinkDestructiveDark = "rgb(173, 17, 17)";
+export const colorTextLinkDestructiveDarker = "rgb(117, 12, 12)";
+export const colorTextLinkDestructiveLight = "rgb(245, 138, 138)";
+export const colorTextLinkLight = "rgb(102, 179, 255)";
+export const colorTextPlaceholder = "rgb(75, 86, 113)";
+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 fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -202,2 +203,3 @@ export const fontFamilyText = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
 colorBackgroundNeutralLightest,
+colorBackgroundOverlay,
 colorBackgroundPrimary,
@@ -204,0 +206,0 @@ colorBackgroundPrimaryDark,

dist/tokens.gatsby.json

 {
     "tokens": [{
     "categoryName": "background-colors",
-    "tokens": [{"type":"color","category":"background-color","value":"#f4f4f6","comment":"Default background color for any container","originalValue":"{!palette-gray-10}","name":"color-background"},{"type":"color","category":"background-color","value":"#ffffff","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"#233659","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"#f22f46","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"#d61f1f","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"#750c0c","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"#4a0b0b","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"#f58a8a","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"#fccfcf","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-20}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"#feecec","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"#d61f1f","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"#feecec","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"#1f304c","comment":"Inverse background color for any container","originalValue":"{!palette-gray-90}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"#ebf4ff","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"#0263e0","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"#001489","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"#030b5d","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"#66b3ff","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"#cce4ff","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-20}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"#ebf4ff","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"#eb5656","comment":"Required background color","originalValue":"{!palette-red-50}","name":"color-background-required"},{"type":"color","category":"background-color","value":"#f4f4f6","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"#14b053","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"#edfdf3","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"#f47c22","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"#fef5ee","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(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(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(254, 236, 236)","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"rgb(31, 48, 76)","comment":"Inverse background color for any container","originalValue":"{!palette-gray-90}","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"}]
   },
 {
     "categoryName": "border-colors",
-    "tokens": [{"type":"color","category":"border-color","value":"#aeb2c1","comment":"Default border color","originalValue":"{!palette-gray-40}","name":"color-border"},{"type":"color","category":"border-color","value":"#606b85","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"#d61f1f","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"#750c0c","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"#4a0b0b","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"#f58a8a","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"#fccfcf","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"#d61f1f","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"#f58a8a","comment":"Light error border color","originalValue":"{!palette-red-40}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"#feecec","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"#606b85","comment":"Input border color","originalValue":"{!palette-gray-60}","name":"color-border-input"},{"type":"color","category":"border-color","value":"#0263e0","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"#0263e0","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"#e1e3ea","comment":"Light border color","originalValue":"{!palette-gray-20}","name":"color-border-light"},{"type":"color","category":"border-color","value":"#8891aa","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"#0263e0","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"#001489","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"#030b5d","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"#66b3ff","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"#cce4ff","comment":"Lighter primary border color","originalValue":"{!palette-blue-20}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"#14b053","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"#edfdf3","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"#f47c22","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"#ffb37a","comment":"Light warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"#fef5ee","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
+    "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(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(96, 107, 133)","comment":"Input border color","originalValue":"{!palette-gray-60}","name":"color-border-input"},{"type":"color","category":"border-color","value":"rgb(2, 99, 224)","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"rgb(2, 99, 224)","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"rgb(225, 227, 234)","comment":"Light border color","originalValue":"{!palette-gray-20}","name":"color-border-light"},{"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"}]
   },
@@ -20,3 +20,3 @@ {
     "categoryName": "colors",
-    "tokens": [{"type":"color","category":"color","value":"#233659","comment":"Default branding color","originalValue":"{!midnight}","name":"color-brand"},{"type":"color","category":"color","value":"#f22f46","comment":"Twilio brand red","originalValue":"{!amaranth}","name":"color-brand-highlight"},{"type":"color","category":"color","value":"#ffffff","comment":"Gray Color 0","originalValue":"{!palette-gray-0}","name":"color-gray-0"},{"type":"color","category":"color","value":"#f4f4f6","comment":"Gray Color 1","originalValue":"{!palette-gray-10}","name":"color-gray-10"},{"type":"color","category":"color","value":"#121c2d","comment":"Gray Color 10","originalValue":"{!palette-gray-100}","name":"color-gray-100"},{"type":"color","category":"color","value":"#e1e3ea","comment":"Gray Color 2","originalValue":"{!palette-gray-20}","name":"color-gray-20"},{"type":"color","category":"color","value":"#cacdd8","comment":"Gray Color 3","originalValue":"{!palette-gray-30}","name":"color-gray-30"},{"type":"color","category":"color","value":"#aeb2c1","comment":"Gray Color 4","originalValue":"{!palette-gray-40}","name":"color-gray-40"},{"type":"color","category":"color","value":"#8891aa","comment":"Gray Color 5","originalValue":"{!palette-gray-50}","name":"color-gray-50"},{"type":"color","category":"color","value":"#606b85","comment":"Gray Color 6","originalValue":"{!palette-gray-60}","name":"color-gray-60"},{"type":"color","category":"color","value":"#4b5671","comment":"Gray Color 7","originalValue":"{!palette-gray-70}","name":"color-gray-70"},{"type":"color","category":"color","value":"#394762","comment":"Gray Color 8","originalValue":"{!palette-gray-80}","name":"color-gray-80"},{"type":"color","category":"color","value":"#1f304c","comment":"Gray Color 9","originalValue":"{!palette-gray-90}","name":"color-gray-90"}]
+    "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"}]
   },
@@ -53,3 +53,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"#121c2d","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"#f22f46","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"#d61f1f","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"#ad1111","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"#4b5671","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"#ffffff","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":"#8891aa","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":"#121c2d","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"#043cb5","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"#001489","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":"#030b5d","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":"#d61f1f","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"#ad1111","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":"#750c0c","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":"#f58a8a","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":"#66b3ff","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":"#4b5671","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"#14b053","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"#f47c22","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"#c35323","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"#4b5671","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"}]
+    "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"}]
   },
@@ -56,0 +56,0 @@ {

dist/tokens.ios.json

@@ -187,2 +187,9 @@ {
       "type": "color",
+      "category": "background-color",
+      "value": "rgba(18, 28, 45, 0.5)",
+      "comment": "Default background for overlays",
+      "name": "colorBackgroundOverlay"
+    },
+    {
+      "type": "color",
       "category": "border-color",
@@ -189,0 +196,0 @@ "value": "rgb(252, 207, 207)",

dist/tokens.json

 {
-  "color-background-primary-darker": "#030b5d",
-  "color-background-primary-lighter": "#cce4ff",
-  "color-background-destructive-darker": "#4a0b0b",
-  "color-background-destructive-lighter": "#fccfcf",
-  "color-background-warning": "#f47c22",
-  "color-background-error-lightest": "#feecec",
-  "color-background-neutral-lightest": "#ebf4ff",
-  "color-background-destructive": "#d61f1f",
-  "color-background-primary": "#0263e0",
-  "color-background-success": "#14b053",
-  "color-background-row-striped": "#f4f4f6",
-  "color-background-success-lightest": "#edfdf3",
-  "color-background-destructive-lightest": "#feecec",
-  "color-background-primary-lightest": "#ebf4ff",
-  "color-background-brand": "#233659",
-  "color-background-error": "#d61f1f",
-  "color-background-required": "#eb5656",
-  "color-background-destructive-dark": "#750c0c",
-  "color-background-destructive-light": "#f58a8a",
-  "color-background-primary-dark": "#001489",
-  "color-background-primary-light": "#66b3ff",
-  "color-background-warning-lightest": "#fef5ee",
-  "color-background-body": "#ffffff",
-  "color-background": "#f4f4f6",
-  "color-background-brand-highlight": "#f22f46",
-  "color-background-inverse": "#1f304c",
-  "color-border-destructive-lighter": "#fccfcf",
-  "color-border-primary-lighter": "#cce4ff",
-  "color-border-input-hover": "#0263e0",
-  "color-border-primary-darker": "#030b5d",
-  "color-border-warning": "#f47c22",
-  "color-border-destructive-darker": "#4a0b0b",
-  "color-border-destructive": "#d61f1f",
-  "color-border-primary": "#0263e0",
-  "color-border-success": "#14b053",
-  "color-border-error-lightest": "#feecec",
-  "color-border-dark": "#606b85",
-  "color-border-warning-light": "#ffb37a",
-  "color-border-success-lightest": "#edfdf3",
-  "color-border-error": "#d61f1f",
-  "color-border-input": "#606b85",
-  "color-border-destructive-light": "#f58a8a",
-  "color-border-primary-light": "#66b3ff",
-  "color-border": "#aeb2c1",
-  "color-border-warning-lightest": "#fef5ee",
-  "color-border-primary-dark": "#001489",
-  "color-border-destructive-dark": "#750c0c",
-  "color-border-neutral-light": "#8891aa",
-  "color-border-error-light": "#f58a8a",
-  "color-border-input-focus": "#0263e0",
-  "color-border-light": "#e1e3ea",
+  "color-background-primary-darker": "rgb(3, 11, 93)",
+  "color-background-primary-lighter": "rgb(204, 228, 255)",
+  "color-background-destructive-darker": "rgb(74, 11, 11)",
+  "color-background-destructive-lighter": "rgb(252, 207, 207)",
+  "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-destructive": "rgb(214, 31, 31)",
+  "color-background-primary": "rgb(2, 99, 224)",
+  "color-background-success": "rgb(20, 176, 83)",
+  "color-background-row-striped": "rgb(244, 244, 246)",
+  "color-background-success-lightest": "rgb(237, 253, 243)",
+  "color-background-destructive-lightest": "rgb(254, 236, 236)",
+  "color-background-primary-lightest": "rgb(235, 244, 255)",
+  "color-background-brand": "rgb(35, 54, 89)",
+  "color-background-error": "rgb(214, 31, 31)",
+  "color-background-required": "rgb(235, 86, 86)",
+  "color-background-destructive-dark": "rgb(117, 12, 12)",
+  "color-background-destructive-light": "rgb(245, 138, 138)",
+  "color-background-primary-dark": "rgb(0, 20, 137)",
+  "color-background-primary-light": "rgb(102, 179, 255)",
+  "color-background-warning-lightest": "rgb(254, 245, 238)",
+  "color-background-body": "rgb(255, 255, 255)",
+  "color-background": "rgb(244, 244, 246)",
+  "color-background-brand-highlight": "rgb(242, 47, 70)",
+  "color-background-inverse": "rgb(31, 48, 76)",
+  "color-background-overlay": "rgba(18, 28, 45, 0.5)",
+  "color-border-destructive-lighter": "rgb(252, 207, 207)",
+  "color-border-primary-lighter": "rgb(204, 228, 255)",
+  "color-border-input-hover": "rgb(2, 99, 224)",
+  "color-border-primary-darker": "rgb(3, 11, 93)",
+  "color-border-warning": "rgb(244, 124, 34)",
+  "color-border-destructive-darker": "rgb(74, 11, 11)",
+  "color-border-destructive": "rgb(214, 31, 31)",
+  "color-border-primary": "rgb(2, 99, 224)",
+  "color-border-success": "rgb(20, 176, 83)",
+  "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-success-lightest": "rgb(237, 253, 243)",
+  "color-border-error": "rgb(214, 31, 31)",
+  "color-border-input": "rgb(96, 107, 133)",
+  "color-border-destructive-light": "rgb(245, 138, 138)",
+  "color-border-primary-light": "rgb(102, 179, 255)",
+  "color-border": "rgb(174, 178, 193)",
+  "color-border-warning-lightest": "rgb(254, 245, 238)",
+  "color-border-primary-dark": "rgb(0, 20, 137)",
+  "color-border-destructive-dark": "rgb(117, 12, 12)",
+  "color-border-neutral-light": "rgb(136, 145, 170)",
+  "color-border-error-light": "rgb(245, 138, 138)",
+  "color-border-input-focus": "rgb(2, 99, 224)",
+  "color-border-light": "rgb(225, 227, 234)",
   "border-radius-0": "0",
@@ -97,15 +98,15 @@ "border-radius-10": "3px",
   "line-height-10": "1rem",
-  "color-brand-highlight": "#f22f46",
-  "color-gray-0": "#ffffff",
-  "color-gray-100": "#121c2d",
-  "color-gray-90": "#1f304c",
-  "color-gray-80": "#394762",
-  "color-gray-70": "#4b5671",
-  "color-gray-60": "#606b85",
-  "color-gray-50": "#8891aa",
-  "color-gray-40": "#aeb2c1",
-  "color-brand": "#233659",
-  "color-gray-30": "#cacdd8",
-  "color-gray-20": "#e1e3ea",
-  "color-gray-10": "#f4f4f6",
+  "color-brand-highlight": "rgb(242, 47, 70)",
+  "color-gray-0": "rgb(255, 255, 255)",
+  "color-gray-100": "rgb(18, 28, 45)",
+  "color-gray-90": "rgb(31, 48, 76)",
+  "color-gray-80": "rgb(57, 71, 98)",
+  "color-gray-70": "rgb(75, 86, 113)",
+  "color-gray-60": "rgb(96, 107, 133)",
+  "color-gray-50": "rgb(136, 145, 170)",
+  "color-gray-40": "rgb(174, 178, 193)",
+  "color-brand": "rgb(35, 54, 89)",
+  "color-gray-30": "rgb(202, 205, 216)",
+  "color-gray-20": "rgb(225, 227, 234)",
+  "color-gray-10": "rgb(244, 244, 246)",
   "size-icon-80": "2.25rem",
@@ -156,24 +157,24 @@ "size-icon-70": "2rem",
   "space-80": "1.75rem",
-  "color-text-link-darker": "#030b5d",
-  "color-text-link-destructive": "#d61f1f",
-  "color-text-warning": "#f47c22",
-  "color-text-inverse-weak": "#8891aa",
-  "color-text-link-destructive-darker": "#750c0c",
-  "color-text-success": "#14b053",
-  "color-text-weak": "#4b5671",
-  "color-text-link-destructive-light": "#f58a8a",
-  "color-text-icon": "#4b5671",
-  "color-text-link": "#043cb5",
-  "color-text-error-dark": "#ad1111",
-  "color-text-error": "#d61f1f",
-  "color-text-link-dark": "#001489",
-  "color-text-brand-inverse": "#ffffff",
-  "color-text": "#121c2d",
-  "color-text-brand-highlight": "#f22f46",
-  "color-text-link-light": "#66b3ff",
-  "color-text-inverse": "#ffffff",
-  "color-text-placeholder": "#4b5671",
-  "color-text-warning-dark": "#c35323",
-  "color-text-link-destructive-dark": "#ad1111",
-  "color-text-label": "#121c2d",
+  "color-text-link-darker": "rgb(3, 11, 93)",
+  "color-text-link-destructive": "rgb(214, 31, 31)",
+  "color-text-warning": "rgb(244, 124, 34)",
+  "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-link-destructive-light": "rgb(245, 138, 138)",
+  "color-text-icon": "rgb(75, 86, 113)",
+  "color-text-link": "rgb(4, 60, 181)",
+  "color-text-error-dark": "rgb(173, 17, 17)",
+  "color-text-error": "rgb(214, 31, 31)",
+  "color-text-link-dark": "rgb(0, 20, 137)",
+  "color-text-brand-inverse": "rgb(255, 255, 255)",
+  "color-text": "rgb(18, 28, 45)",
+  "color-text-brand-highlight": "rgb(242, 47, 70)",
+  "color-text-link-light": "rgb(102, 179, 255)",
+  "color-text-inverse": "rgb(255, 255, 255)",
+  "color-text-placeholder": "rgb(75, 86, 113)",
+  "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",
@@ -180,0 +181,0 @@ "z-index-90": "90",

dist/tokens.raw.json

@@ -834,2 +834,10 @@ {
     },
+    "color-background-overlay": {
+      "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"
+    },
     "color-border-destructive-lighter": {
@@ -836,0 +844,0 @@ "type": "color",

package.json

 {
   "name": "@twilio-paste/design-tokens",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.",
@@ -40,3 +40,3 @@ "main": "dist/tokens.common.js",
   },
-  "gitHead": "a2a657e7dbd4dc6a84538c9b8d9ecec3a54c1ce4"
+  "gitHead": "f6bfb3986a9e73270398b5b6b16c56ea2f9e9655"
 }

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

822155

increased by4.48%

Lines of code

17694

increased by0.51%

No dependency changes