Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@twilio-paste/design-tokens

Package Overview
Dependencies
Maintainers
5
Versions
102
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 6.5.2 to 6.6.0

6

CHANGELOG.md
# Change Log
## 6.6.0
### Minor Changes
- [`4c9ed5ca`](https://github.com/twilio-labs/paste/commit/4c9ed5cac36ada218824d3e24bf45d4a03a12272) [#1236](https://github.com/twilio-labs/paste/pull/1236) Thanks [@richbachman](https://github.com/richbachman)! - The SendGrid theme now inherits everything from the Default theme, except for font family. The SendGrid theme uses Colfax for `font-family-text`.
## 6.5.2

@@ -4,0 +10,0 @@

364

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

@@ -11,3 +11,3 @@ export declare const borderRadius0 = "0";

export declare const borderWidth40 = "8px";
export declare const colorBackground = "rgb(243, 244, 246)";
export declare const colorBackground = "rgb(244, 244, 246)";
export declare const colorBackgroundBody = "rgb(255, 255, 255)";

@@ -18,46 +18,46 @@ export declare const colorBackgroundBodyInverse = "rgb(18, 28, 45)";

export declare const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
export declare const colorBackgroundDark = "rgb(204, 210, 220)";
export declare const colorBackgroundDarker = "rgb(204, 210, 220)";
export declare const colorBackgroundDarkest = "rgb(136, 148, 170)";
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 colorBackgroundErrorDark = "rgb(148, 8, 0)";
export declare const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
export declare const colorBackgroundInverse = "rgb(8, 21, 44)";
export declare const colorBackgroundDark = "rgb(225, 227, 234)";
export declare const colorBackgroundDarker = "rgb(136, 145, 170)";
export declare const colorBackgroundDarkest = "rgb(75, 86, 113)";
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(246, 177, 177)";
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 colorBackgroundErrorDark = "rgb(117, 12, 12)";
export declare const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
export declare const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
export declare const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
export declare const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
export declare const colorBackgroundNew = "rgb(231, 220, 250)";
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 colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
export declare const colorBackgroundPrimary = "rgb(2, 99, 224)";
export declare const colorBackgroundPrimaryDark = "rgb(0, 20, 137)";
export declare const colorBackgroundPrimaryDarker = "rgb(3, 11, 93)";
export declare const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
export declare const colorBackgroundPrimaryLight = "rgb(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 colorBackgroundPrimaryLight = "rgb(153, 205, 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 colorBackgroundSubaccount = "rgb(255, 241, 179)";
export declare const colorBackgroundSuccess = "rgb(0, 153, 74)";
export declare const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
export declare const colorBackgroundSuccess = "rgb(20, 176, 83)";
export declare const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
export declare const colorBackgroundTrial = "rgb(209, 250, 224)";
export declare const colorBackgroundUser = "rgb(200, 175, 240)";
export declare const colorBackgroundWarning = "rgb(228, 98, 22)";
export declare const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
export declare const colorBorder = "rgb(136, 148, 170)";
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 colorBorderErrorDark = "rgb(148, 8, 0)";
export declare const colorBorderErrorLight = "rgb(232, 83, 74)";
export declare const colorBorderErrorLightest = "rgb(255, 233, 231)";
export declare const colorBackgroundWarning = "rgb(244, 124, 34)";
export declare const colorBackgroundWarningLightest = "rgb(254, 245, 238)";
export declare const colorBorder = "rgb(136, 145, 170)";
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 colorBorderErrorDark = "rgb(117, 12, 12)";
export declare const colorBorderErrorLight = "rgb(245, 138, 138)";
export declare const colorBorderErrorLightest = "rgb(254, 236, 236)";
export declare const colorBorderInverse = "rgba(255, 255, 255, 0.5)";

@@ -67,58 +67,56 @@ export declare const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";

export declare const colorBorderInverseLightest = "rgb(255, 255, 255)";
export declare const colorBorderLight = "rgb(182, 191, 206)";
export declare const colorBorderLighter = "rgb(204, 210, 220)";
export declare const colorBorderLight = "rgb(202, 205, 216)";
export declare const colorBorderLighter = "rgb(225, 227, 234)";
export declare const colorBorderNeutral = "rgb(2, 99, 224)";
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 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 colorBorderSuccessLight = "rgb(54, 213, 118)";
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 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(0, 20, 137)";
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(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 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(172, 30, 22)";
export declare const colorTextErrorDark = "rgb(148, 8, 0)";
export declare const colorTextError = "rgb(214, 31, 31)";
export declare const colorTextErrorDark = "rgb(173, 17, 17)";
export declare const colorTextErrorLight = "rgb(235, 86, 86)";
export declare const colorTextIcon = "rgb(136, 148, 170)";
export declare const colorTextIcon = "rgb(96, 107, 133)";
export declare const colorTextIconInverse = "rgb(136, 145, 170)";
export declare const colorTextInverse = "rgb(255, 255, 255)";
export declare const colorTextInverseWeak = "rgb(156, 167, 186)";
export declare const colorTextInverseWeak = "rgb(174, 178, 193)";
export declare const colorTextInverseWeaker = "rgb(96, 107, 133)";
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 colorTextLink = "rgb(2, 99, 224)";
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(74, 11, 11)";
export declare const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
export declare const colorTextLinkLight = "rgb(153, 205, 255)";
export declare const colorTextNeutral = "rgb(0, 20, 137)";
export declare const colorTextNew = "rgb(109, 46, 209)";
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 colorTextWeaker = "rgb(182, 191, 206)";
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(96, 107, 133)";
export declare const colorTextWeaker = "rgb(174, 178, 193)";
export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";

@@ -155,3 +153,3 @@ export declare const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";

export declare const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
export declare const shadowBorder = "0 0 0 1px #8894aa";
export declare const shadowBorder = "0 0 0 1px #8891aa";
export declare const shadowBorderDestructive = "0 0 0 1px #d61f1f";

@@ -161,4 +159,4 @@ export declare const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";

export declare const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
export declare const shadowBorderError = "0 0 0 1px #ac1e16";
export declare const shadowBorderErrorDark = "0 0 0 1px #940800";
export declare const shadowBorderError = "0 0 0 1px #d61f1f";
export declare const shadowBorderErrorDark = "0 0 0 1px #750c0c";
export declare const shadowBorderErrorLight = "0 0 0 1px #eb5656";

@@ -169,11 +167,11 @@ export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";

export declare const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
export declare const shadowBorderLight = "0 0 0 1px #ccd2dc";
export declare const shadowBorderLight = "0 0 0 1px #cacdd8";
export declare const shadowBorderLighter = "0 0 0 1px #e1e3ea";
export declare const shadowBorderPrimary = "0 0 0 1px #0263e0";
export declare const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
export declare const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
export declare const shadowBorderPrimaryDark = "0 0 0 1px #001489";
export declare const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
export declare const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
export declare const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
export declare const shadowCard = "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
export declare const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
export declare const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
export declare const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
export declare const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";

@@ -281,3 +279,3 @@ export declare const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";

export declare const backgroundColors: {
colorBackground: "rgb(243, 244, 246)";
colorBackground: "rgb(244, 244, 246)";
colorBackgroundBody: "rgb(255, 255, 255)";

@@ -288,48 +286,48 @@ colorBackgroundBodyInverse: "rgb(18, 28, 45)";

colorBackgroundBrandHighlightLightest: "rgba(242, 47, 70, 0.1)";
colorBackgroundDark: "rgb(204, 210, 220)";
colorBackgroundDarker: "rgb(204, 210, 220)";
colorBackgroundDarkest: "rgb(136, 148, 170)";
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)";
colorBackgroundErrorDark: "rgb(148, 8, 0)";
colorBackgroundErrorLightest: "rgb(255, 233, 231)";
colorBackgroundInverse: "rgb(8, 21, 44)";
colorBackgroundDark: "rgb(225, 227, 234)";
colorBackgroundDarker: "rgb(136, 145, 170)";
colorBackgroundDarkest: "rgb(75, 86, 113)";
colorBackgroundDestructive: "rgb(214, 31, 31)";
colorBackgroundDestructiveDark: "rgb(117, 12, 12)";
colorBackgroundDestructiveDarker: "rgb(74, 11, 11)";
colorBackgroundDestructiveLight: "rgb(246, 177, 177)";
colorBackgroundDestructiveLighter: "rgb(252, 207, 207)";
colorBackgroundDestructiveLightest: "rgb(254, 236, 236)";
colorBackgroundError: "rgb(214, 31, 31)";
colorBackgroundErrorDark: "rgb(117, 12, 12)";
colorBackgroundErrorLightest: "rgb(254, 236, 236)";
colorBackgroundInverse: "rgba(255, 255, 255, 0.1)";
colorBackgroundInverseLight: "rgba(255, 255, 255, 0.2)";
colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
colorBackgroundNeutralLightest: "rgb(235, 244, 255)";
colorBackgroundNew: "rgb(231, 220, 250)";
colorBackgroundOverlay: "rgba(8, 21, 44, 0.5)";
colorBackgroundPrimary: "rgb(51, 104, 250)";
colorBackgroundPrimaryDark: "rgb(0, 44, 166)";
colorBackgroundPrimaryDarker: "rgb(0, 31, 117)";
colorBackgroundOverlay: "rgba(6, 3, 58, 0.4)";
colorBackgroundPrimary: "rgb(2, 99, 224)";
colorBackgroundPrimaryDark: "rgb(0, 20, 137)";
colorBackgroundPrimaryDarker: "rgb(3, 11, 93)";
colorBackgroundPrimaryDarkest: "rgb(6, 3, 58)";
colorBackgroundPrimaryLight: "rgb(186, 204, 255)";
colorBackgroundPrimaryLighter: "rgb(219, 230, 255)";
colorBackgroundPrimaryLightest: "rgb(245, 248, 255)";
colorBackgroundRequired: "rgb(232, 83, 74)";
colorBackgroundRowStriped: "rgb(249, 250, 251)";
colorBackgroundPrimaryLight: "rgb(153, 205, 255)";
colorBackgroundPrimaryLighter: "rgb(204, 228, 255)";
colorBackgroundPrimaryLightest: "rgb(235, 244, 255)";
colorBackgroundRequired: "rgb(235, 86, 86)";
colorBackgroundRowStriped: "rgb(244, 244, 246)";
colorBackgroundSubaccount: "rgb(255, 241, 179)";
colorBackgroundSuccess: "rgb(0, 153, 74)";
colorBackgroundSuccessLightest: "rgb(224, 255, 239)";
colorBackgroundSuccess: "rgb(20, 176, 83)";
colorBackgroundSuccessLightest: "rgb(237, 253, 243)";
colorBackgroundTrial: "rgb(209, 250, 224)";
colorBackgroundUser: "rgb(200, 175, 240)";
colorBackgroundWarning: "rgb(228, 98, 22)";
colorBackgroundWarningLightest: "rgb(255, 236, 216)";
colorBackgroundWarning: "rgb(244, 124, 34)";
colorBackgroundWarningLightest: "rgb(254, 245, 238)";
};
export declare const borderColors: {
colorBorder: "rgb(136, 148, 170)";
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)";
colorBorderErrorDark: "rgb(148, 8, 0)";
colorBorderErrorLight: "rgb(232, 83, 74)";
colorBorderErrorLightest: "rgb(255, 233, 231)";
colorBorder: "rgb(136, 145, 170)";
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)";
colorBorderErrorDark: "rgb(117, 12, 12)";
colorBorderErrorLight: "rgb(245, 138, 138)";
colorBorderErrorLightest: "rgb(254, 236, 236)";
colorBorderInverse: "rgba(255, 255, 255, 0.5)";

@@ -339,17 +337,17 @@ colorBorderInverseDarker: "rgba(255, 255, 255, 0.2)";

colorBorderInverseLightest: "rgb(255, 255, 255)";
colorBorderLight: "rgb(182, 191, 206)";
colorBorderLighter: "rgb(204, 210, 220)";
colorBorderLight: "rgb(202, 205, 216)";
colorBorderLighter: "rgb(225, 227, 234)";
colorBorderNeutral: "rgb(2, 99, 224)";
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)";
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)";
colorBorderSuccessLight: "rgb(54, 213, 118)";
colorBorderSuccessLightest: "rgb(224, 255, 239)";
colorBorderWarning: "rgb(228, 98, 22)";
colorBorderWarningLight: "rgb(250, 156, 102)";
colorBorderWarningLightest: "rgb(255, 236, 216)";
colorBorderSuccessLightest: "rgb(237, 253, 243)";
colorBorderWarning: "rgb(244, 124, 34)";
colorBorderWarningLight: "rgb(255, 179, 122)";
colorBorderWarningLightest: "rgb(254, 245, 238)";
};

@@ -365,3 +363,3 @@ export declare const borderWidths: {

shadow: "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
shadowBorder: "0 0 0 1px #8894aa";
shadowBorder: "0 0 0 1px #8891aa";
shadowBorderDestructive: "0 0 0 1px #d61f1f";

@@ -371,4 +369,4 @@ shadowBorderDestructiveDarker: "0 0 0 1px #4a0b0b";

shadowBorderDestructiveLighter: "0 0 0 1px #fccfcf";
shadowBorderError: "0 0 0 1px #ac1e16";
shadowBorderErrorDark: "0 0 0 1px #940800";
shadowBorderError: "0 0 0 1px #d61f1f";
shadowBorderErrorDark: "0 0 0 1px #750c0c";
shadowBorderErrorLight: "0 0 0 1px #eb5656";

@@ -379,11 +377,11 @@ shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";

shadowBorderInverseLightest: "0 0 0 1px #ffffff";
shadowBorderLight: "0 0 0 1px #ccd2dc";
shadowBorderLight: "0 0 0 1px #cacdd8";
shadowBorderLighter: "0 0 0 1px #e1e3ea";
shadowBorderPrimary: "0 0 0 1px #0263e0";
shadowBorderPrimaryDark: "0 0 0 1px #002ca6";
shadowBorderPrimaryDarker: "0 0 0 1px #001f75";
shadowBorderPrimaryDark: "0 0 0 1px #001489";
shadowBorderPrimaryDarker: "0 0 0 1px #030b5d";
shadowBorderPrimaryLight: "0 0 0 1px #99cdff";
shadowBorderPrimaryLighter: "0 0 0 1px #cce4ff";
shadowCard: "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
shadowFocus: "0 0 0 4px rgba(51, 104, 250, 0.8)";
shadowCard: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
shadowFocus: "0 0 0 4px rgba(2, 99, 224, 0.7)";
shadowFocusInverse: "0 0 0 4px rgba(255, 255, 255, 0.4)";

@@ -394,15 +392,15 @@ shadowHigh: "0 16px 24px 0 rgba(18, 28, 45, 0.2)";

export declare const colors: {
colorBrand: "rgb(8, 21, 44)";
colorBrandHighlight: "rgb(51, 104, 250)";
colorBrand: "rgb(0, 20, 137)";
colorBrandHighlight: "rgb(242, 47, 70)";
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)";
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)";
};

@@ -547,30 +545,28 @@ export declare const fonts: {

export declare const textColors: {
colorText: "rgb(8, 21, 44)";
colorText: "rgb(18, 28, 45)";
colorTextBrandHighlight: "rgb(242, 47, 70)";
colorTextBrandInverse: "rgb(255, 255, 255)";
colorTextError: "rgb(172, 30, 22)";
colorTextErrorDark: "rgb(148, 8, 0)";
colorTextError: "rgb(214, 31, 31)";
colorTextErrorDark: "rgb(173, 17, 17)";
colorTextErrorLight: "rgb(235, 86, 86)";
colorTextIcon: "rgb(136, 148, 170)";
colorTextIcon: "rgb(96, 107, 133)";
colorTextIconInverse: "rgb(136, 145, 170)";
colorTextInverse: "rgb(255, 255, 255)";
colorTextInverseWeak: "rgb(156, 167, 186)";
colorTextInverseWeak: "rgb(174, 178, 193)";
colorTextInverseWeaker: "rgb(96, 107, 133)";
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)";
colorTextLink: "rgb(2, 99, 224)";
colorTextLinkDark: "rgb(0, 20, 137)";
colorTextLinkDarker: "rgb(3, 11, 93)";
colorTextLinkDestructive: "rgb(214, 31, 31)";
colorTextLinkDestructiveDark: "rgb(173, 17, 17)";
colorTextLinkDestructiveDarker: "rgb(74, 11, 11)";
colorTextLinkDestructiveLight: "rgb(246, 177, 177)";
colorTextLinkLight: "rgb(153, 205, 255)";
colorTextNeutral: "rgb(0, 20, 137)";
colorTextNew: "rgb(109, 46, 209)";
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)";
colorTextWeaker: "rgb(182, 191, 206)";
colorTextSuccess: "rgb(20, 176, 83)";
colorTextWarning: "rgb(244, 124, 34)";
colorTextWarningDark: "rgb(195, 83, 35)";
colorTextWeak: "rgb(96, 107, 133)";
colorTextWeaker: "rgb(174, 178, 193)";
};

@@ -577,0 +573,0 @@ export declare const zIndices: {

186

dist/themes/sendgrid/tokens.common.js

@@ -11,3 +11,3 @@ const borderRadius0 = "0";

const borderWidth40 = "8px";
const colorBackground = "rgb(243, 244, 246)";
const colorBackground = "rgb(244, 244, 246)";
const colorBackgroundBody = "rgb(255, 255, 255)";

@@ -18,46 +18,46 @@ const colorBackgroundBodyInverse = "rgb(18, 28, 45)";

const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
const colorBackgroundDark = "rgb(204, 210, 220)";
const colorBackgroundDarker = "rgb(204, 210, 220)";
const colorBackgroundDarkest = "rgb(136, 148, 170)";
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 colorBackgroundErrorDark = "rgb(148, 8, 0)";
const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
const colorBackgroundInverse = "rgb(8, 21, 44)";
const colorBackgroundDark = "rgb(225, 227, 234)";
const colorBackgroundDarker = "rgb(136, 145, 170)";
const colorBackgroundDarkest = "rgb(75, 86, 113)";
const colorBackgroundDestructive = "rgb(214, 31, 31)";
const colorBackgroundDestructiveDark = "rgb(117, 12, 12)";
const colorBackgroundDestructiveDarker = "rgb(74, 11, 11)";
const colorBackgroundDestructiveLight = "rgb(246, 177, 177)";
const colorBackgroundDestructiveLighter = "rgb(252, 207, 207)";
const colorBackgroundDestructiveLightest = "rgb(254, 236, 236)";
const colorBackgroundError = "rgb(214, 31, 31)";
const colorBackgroundErrorDark = "rgb(117, 12, 12)";
const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
const colorBackgroundNew = "rgb(231, 220, 250)";
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 colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
const colorBackgroundPrimary = "rgb(2, 99, 224)";
const colorBackgroundPrimaryDark = "rgb(0, 20, 137)";
const colorBackgroundPrimaryDarker = "rgb(3, 11, 93)";
const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
const colorBackgroundPrimaryLight = "rgb(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 colorBackgroundPrimaryLight = "rgb(153, 205, 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 colorBackgroundSubaccount = "rgb(255, 241, 179)";
const colorBackgroundSuccess = "rgb(0, 153, 74)";
const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
const colorBackgroundSuccess = "rgb(20, 176, 83)";
const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
const colorBackgroundTrial = "rgb(209, 250, 224)";
const colorBackgroundUser = "rgb(200, 175, 240)";
const colorBackgroundWarning = "rgb(228, 98, 22)";
const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
const colorBorder = "rgb(136, 148, 170)";
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 colorBorderErrorDark = "rgb(148, 8, 0)";
const colorBorderErrorLight = "rgb(232, 83, 74)";
const colorBorderErrorLightest = "rgb(255, 233, 231)";
const colorBackgroundWarning = "rgb(244, 124, 34)";
const colorBackgroundWarningLightest = "rgb(254, 245, 238)";
const colorBorder = "rgb(136, 145, 170)";
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 colorBorderErrorDark = "rgb(117, 12, 12)";
const colorBorderErrorLight = "rgb(245, 138, 138)";
const colorBorderErrorLightest = "rgb(254, 236, 236)";
const colorBorderInverse = "rgba(255, 255, 255, 0.5)";

@@ -67,58 +67,56 @@ const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";

const colorBorderInverseLightest = "rgb(255, 255, 255)";
const colorBorderLight = "rgb(182, 191, 206)";
const colorBorderLighter = "rgb(204, 210, 220)";
const colorBorderLight = "rgb(202, 205, 216)";
const colorBorderLighter = "rgb(225, 227, 234)";
const colorBorderNeutral = "rgb(2, 99, 224)";
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 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 colorBorderSuccessLight = "rgb(54, 213, 118)";
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 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(0, 20, 137)";
const colorBrandHighlight = "rgb(242, 47, 70)";
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 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(172, 30, 22)";
const colorTextErrorDark = "rgb(148, 8, 0)";
const colorTextError = "rgb(214, 31, 31)";
const colorTextErrorDark = "rgb(173, 17, 17)";
const colorTextErrorLight = "rgb(235, 86, 86)";
const colorTextIcon = "rgb(136, 148, 170)";
const colorTextIcon = "rgb(96, 107, 133)";
const colorTextIconInverse = "rgb(136, 145, 170)";
const colorTextInverse = "rgb(255, 255, 255)";
const colorTextInverseWeak = "rgb(156, 167, 186)";
const colorTextInverseWeak = "rgb(174, 178, 193)";
const colorTextInverseWeaker = "rgb(96, 107, 133)";
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 colorTextLink = "rgb(2, 99, 224)";
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(74, 11, 11)";
const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
const colorTextLinkLight = "rgb(153, 205, 255)";
const colorTextNeutral = "rgb(0, 20, 137)";
const colorTextNew = "rgb(109, 46, 209)";
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 colorTextWeaker = "rgb(182, 191, 206)";
const colorTextSuccess = "rgb(20, 176, 83)";
const colorTextWarning = "rgb(244, 124, 34)";
const colorTextWarningDark = "rgb(195, 83, 35)";
const colorTextWeak = "rgb(96, 107, 133)";
const colorTextWeaker = "rgb(174, 178, 193)";
const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";

@@ -155,3 +153,3 @@ const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";

const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
const shadowBorder = "0 0 0 1px #8894aa";
const shadowBorder = "0 0 0 1px #8891aa";
const shadowBorderDestructive = "0 0 0 1px #d61f1f";

@@ -161,4 +159,4 @@ const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";

const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
const shadowBorderError = "0 0 0 1px #ac1e16";
const shadowBorderErrorDark = "0 0 0 1px #940800";
const shadowBorderError = "0 0 0 1px #d61f1f";
const shadowBorderErrorDark = "0 0 0 1px #750c0c";
const shadowBorderErrorLight = "0 0 0 1px #eb5656";

@@ -169,11 +167,11 @@ const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";

const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
const shadowBorderLight = "0 0 0 1px #ccd2dc";
const shadowBorderLight = "0 0 0 1px #cacdd8";
const shadowBorderLighter = "0 0 0 1px #e1e3ea";
const shadowBorderPrimary = "0 0 0 1px #0263e0";
const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
const shadowBorderPrimaryDark = "0 0 0 1px #001489";
const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
const shadowCard = "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";

@@ -385,3 +383,2 @@ const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";

colorTextInverseWeaker,
colorTextLabel,
colorTextLink,

@@ -397,3 +394,2 @@ colorTextLinkDark,

colorTextNew,
colorTextPlaceholder,
colorTextSuccess,

@@ -828,3 +824,2 @@ colorTextWarning,

colorTextInverseWeaker,
colorTextLabel,
colorTextLink,

@@ -840,3 +835,2 @@ colorTextLinkDark,

colorTextNew,
colorTextPlaceholder,
colorTextSuccess,

@@ -843,0 +837,0 @@ colorTextWarning,

364

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

@@ -11,3 +11,3 @@ export declare const borderRadius0 = "0";

export declare const borderWidth40 = "8px";
export declare const colorBackground = "rgb(243, 244, 246)";
export declare const colorBackground = "rgb(244, 244, 246)";
export declare const colorBackgroundBody = "rgb(255, 255, 255)";

@@ -18,46 +18,46 @@ export declare const colorBackgroundBodyInverse = "rgb(18, 28, 45)";

export declare const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
export declare const colorBackgroundDark = "rgb(204, 210, 220)";
export declare const colorBackgroundDarker = "rgb(204, 210, 220)";
export declare const colorBackgroundDarkest = "rgb(136, 148, 170)";
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 colorBackgroundErrorDark = "rgb(148, 8, 0)";
export declare const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
export declare const colorBackgroundInverse = "rgb(8, 21, 44)";
export declare const colorBackgroundDark = "rgb(225, 227, 234)";
export declare const colorBackgroundDarker = "rgb(136, 145, 170)";
export declare const colorBackgroundDarkest = "rgb(75, 86, 113)";
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(246, 177, 177)";
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 colorBackgroundErrorDark = "rgb(117, 12, 12)";
export declare const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
export declare const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
export declare const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
export declare const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
export declare const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
export declare const colorBackgroundNew = "rgb(231, 220, 250)";
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 colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
export declare const colorBackgroundPrimary = "rgb(2, 99, 224)";
export declare const colorBackgroundPrimaryDark = "rgb(0, 20, 137)";
export declare const colorBackgroundPrimaryDarker = "rgb(3, 11, 93)";
export declare const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
export declare const colorBackgroundPrimaryLight = "rgb(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 colorBackgroundPrimaryLight = "rgb(153, 205, 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 colorBackgroundSubaccount = "rgb(255, 241, 179)";
export declare const colorBackgroundSuccess = "rgb(0, 153, 74)";
export declare const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
export declare const colorBackgroundSuccess = "rgb(20, 176, 83)";
export declare const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
export declare const colorBackgroundTrial = "rgb(209, 250, 224)";
export declare const colorBackgroundUser = "rgb(200, 175, 240)";
export declare const colorBackgroundWarning = "rgb(228, 98, 22)";
export declare const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
export declare const colorBorder = "rgb(136, 148, 170)";
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 colorBorderErrorDark = "rgb(148, 8, 0)";
export declare const colorBorderErrorLight = "rgb(232, 83, 74)";
export declare const colorBorderErrorLightest = "rgb(255, 233, 231)";
export declare const colorBackgroundWarning = "rgb(244, 124, 34)";
export declare const colorBackgroundWarningLightest = "rgb(254, 245, 238)";
export declare const colorBorder = "rgb(136, 145, 170)";
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 colorBorderErrorDark = "rgb(117, 12, 12)";
export declare const colorBorderErrorLight = "rgb(245, 138, 138)";
export declare const colorBorderErrorLightest = "rgb(254, 236, 236)";
export declare const colorBorderInverse = "rgba(255, 255, 255, 0.5)";

@@ -67,58 +67,56 @@ export declare const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";

export declare const colorBorderInverseLightest = "rgb(255, 255, 255)";
export declare const colorBorderLight = "rgb(182, 191, 206)";
export declare const colorBorderLighter = "rgb(204, 210, 220)";
export declare const colorBorderLight = "rgb(202, 205, 216)";
export declare const colorBorderLighter = "rgb(225, 227, 234)";
export declare const colorBorderNeutral = "rgb(2, 99, 224)";
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 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 colorBorderSuccessLight = "rgb(54, 213, 118)";
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 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(0, 20, 137)";
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(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 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(172, 30, 22)";
export declare const colorTextErrorDark = "rgb(148, 8, 0)";
export declare const colorTextError = "rgb(214, 31, 31)";
export declare const colorTextErrorDark = "rgb(173, 17, 17)";
export declare const colorTextErrorLight = "rgb(235, 86, 86)";
export declare const colorTextIcon = "rgb(136, 148, 170)";
export declare const colorTextIcon = "rgb(96, 107, 133)";
export declare const colorTextIconInverse = "rgb(136, 145, 170)";
export declare const colorTextInverse = "rgb(255, 255, 255)";
export declare const colorTextInverseWeak = "rgb(156, 167, 186)";
export declare const colorTextInverseWeak = "rgb(174, 178, 193)";
export declare const colorTextInverseWeaker = "rgb(96, 107, 133)";
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 colorTextLink = "rgb(2, 99, 224)";
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(74, 11, 11)";
export declare const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
export declare const colorTextLinkLight = "rgb(153, 205, 255)";
export declare const colorTextNeutral = "rgb(0, 20, 137)";
export declare const colorTextNew = "rgb(109, 46, 209)";
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 colorTextWeaker = "rgb(182, 191, 206)";
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(96, 107, 133)";
export declare const colorTextWeaker = "rgb(174, 178, 193)";
export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";

@@ -155,3 +153,3 @@ export declare const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";

export declare const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
export declare const shadowBorder = "0 0 0 1px #8894aa";
export declare const shadowBorder = "0 0 0 1px #8891aa";
export declare const shadowBorderDestructive = "0 0 0 1px #d61f1f";

@@ -161,4 +159,4 @@ export declare const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";

export declare const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
export declare const shadowBorderError = "0 0 0 1px #ac1e16";
export declare const shadowBorderErrorDark = "0 0 0 1px #940800";
export declare const shadowBorderError = "0 0 0 1px #d61f1f";
export declare const shadowBorderErrorDark = "0 0 0 1px #750c0c";
export declare const shadowBorderErrorLight = "0 0 0 1px #eb5656";

@@ -169,11 +167,11 @@ export declare const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";

export declare const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
export declare const shadowBorderLight = "0 0 0 1px #ccd2dc";
export declare const shadowBorderLight = "0 0 0 1px #cacdd8";
export declare const shadowBorderLighter = "0 0 0 1px #e1e3ea";
export declare const shadowBorderPrimary = "0 0 0 1px #0263e0";
export declare const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
export declare const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
export declare const shadowBorderPrimaryDark = "0 0 0 1px #001489";
export declare const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
export declare const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
export declare const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
export declare const shadowCard = "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
export declare const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
export declare const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
export declare const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
export declare const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";

@@ -281,3 +279,3 @@ export declare const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";

export declare const backgroundColors: {
colorBackground: "rgb(243, 244, 246)";
colorBackground: "rgb(244, 244, 246)";
colorBackgroundBody: "rgb(255, 255, 255)";

@@ -288,48 +286,48 @@ colorBackgroundBodyInverse: "rgb(18, 28, 45)";

colorBackgroundBrandHighlightLightest: "rgba(242, 47, 70, 0.1)";
colorBackgroundDark: "rgb(204, 210, 220)";
colorBackgroundDarker: "rgb(204, 210, 220)";
colorBackgroundDarkest: "rgb(136, 148, 170)";
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)";
colorBackgroundErrorDark: "rgb(148, 8, 0)";
colorBackgroundErrorLightest: "rgb(255, 233, 231)";
colorBackgroundInverse: "rgb(8, 21, 44)";
colorBackgroundDark: "rgb(225, 227, 234)";
colorBackgroundDarker: "rgb(136, 145, 170)";
colorBackgroundDarkest: "rgb(75, 86, 113)";
colorBackgroundDestructive: "rgb(214, 31, 31)";
colorBackgroundDestructiveDark: "rgb(117, 12, 12)";
colorBackgroundDestructiveDarker: "rgb(74, 11, 11)";
colorBackgroundDestructiveLight: "rgb(246, 177, 177)";
colorBackgroundDestructiveLighter: "rgb(252, 207, 207)";
colorBackgroundDestructiveLightest: "rgb(254, 236, 236)";
colorBackgroundError: "rgb(214, 31, 31)";
colorBackgroundErrorDark: "rgb(117, 12, 12)";
colorBackgroundErrorLightest: "rgb(254, 236, 236)";
colorBackgroundInverse: "rgba(255, 255, 255, 0.1)";
colorBackgroundInverseLight: "rgba(255, 255, 255, 0.2)";
colorBackgroundNeutralLightest: "rgb(245, 248, 255)";
colorBackgroundNeutralLightest: "rgb(235, 244, 255)";
colorBackgroundNew: "rgb(231, 220, 250)";
colorBackgroundOverlay: "rgba(8, 21, 44, 0.5)";
colorBackgroundPrimary: "rgb(51, 104, 250)";
colorBackgroundPrimaryDark: "rgb(0, 44, 166)";
colorBackgroundPrimaryDarker: "rgb(0, 31, 117)";
colorBackgroundOverlay: "rgba(6, 3, 58, 0.4)";
colorBackgroundPrimary: "rgb(2, 99, 224)";
colorBackgroundPrimaryDark: "rgb(0, 20, 137)";
colorBackgroundPrimaryDarker: "rgb(3, 11, 93)";
colorBackgroundPrimaryDarkest: "rgb(6, 3, 58)";
colorBackgroundPrimaryLight: "rgb(186, 204, 255)";
colorBackgroundPrimaryLighter: "rgb(219, 230, 255)";
colorBackgroundPrimaryLightest: "rgb(245, 248, 255)";
colorBackgroundRequired: "rgb(232, 83, 74)";
colorBackgroundRowStriped: "rgb(249, 250, 251)";
colorBackgroundPrimaryLight: "rgb(153, 205, 255)";
colorBackgroundPrimaryLighter: "rgb(204, 228, 255)";
colorBackgroundPrimaryLightest: "rgb(235, 244, 255)";
colorBackgroundRequired: "rgb(235, 86, 86)";
colorBackgroundRowStriped: "rgb(244, 244, 246)";
colorBackgroundSubaccount: "rgb(255, 241, 179)";
colorBackgroundSuccess: "rgb(0, 153, 74)";
colorBackgroundSuccessLightest: "rgb(224, 255, 239)";
colorBackgroundSuccess: "rgb(20, 176, 83)";
colorBackgroundSuccessLightest: "rgb(237, 253, 243)";
colorBackgroundTrial: "rgb(209, 250, 224)";
colorBackgroundUser: "rgb(200, 175, 240)";
colorBackgroundWarning: "rgb(228, 98, 22)";
colorBackgroundWarningLightest: "rgb(255, 236, 216)";
colorBackgroundWarning: "rgb(244, 124, 34)";
colorBackgroundWarningLightest: "rgb(254, 245, 238)";
};
export declare const borderColors: {
colorBorder: "rgb(136, 148, 170)";
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)";
colorBorderErrorDark: "rgb(148, 8, 0)";
colorBorderErrorLight: "rgb(232, 83, 74)";
colorBorderErrorLightest: "rgb(255, 233, 231)";
colorBorder: "rgb(136, 145, 170)";
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)";
colorBorderErrorDark: "rgb(117, 12, 12)";
colorBorderErrorLight: "rgb(245, 138, 138)";
colorBorderErrorLightest: "rgb(254, 236, 236)";
colorBorderInverse: "rgba(255, 255, 255, 0.5)";

@@ -339,17 +337,17 @@ colorBorderInverseDarker: "rgba(255, 255, 255, 0.2)";

colorBorderInverseLightest: "rgb(255, 255, 255)";
colorBorderLight: "rgb(182, 191, 206)";
colorBorderLighter: "rgb(204, 210, 220)";
colorBorderLight: "rgb(202, 205, 216)";
colorBorderLighter: "rgb(225, 227, 234)";
colorBorderNeutral: "rgb(2, 99, 224)";
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)";
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)";
colorBorderSuccessLight: "rgb(54, 213, 118)";
colorBorderSuccessLightest: "rgb(224, 255, 239)";
colorBorderWarning: "rgb(228, 98, 22)";
colorBorderWarningLight: "rgb(250, 156, 102)";
colorBorderWarningLightest: "rgb(255, 236, 216)";
colorBorderSuccessLightest: "rgb(237, 253, 243)";
colorBorderWarning: "rgb(244, 124, 34)";
colorBorderWarningLight: "rgb(255, 179, 122)";
colorBorderWarningLightest: "rgb(254, 245, 238)";
};

@@ -365,3 +363,3 @@ export declare const borderWidths: {

shadow: "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
shadowBorder: "0 0 0 1px #8894aa";
shadowBorder: "0 0 0 1px #8891aa";
shadowBorderDestructive: "0 0 0 1px #d61f1f";

@@ -371,4 +369,4 @@ shadowBorderDestructiveDarker: "0 0 0 1px #4a0b0b";

shadowBorderDestructiveLighter: "0 0 0 1px #fccfcf";
shadowBorderError: "0 0 0 1px #ac1e16";
shadowBorderErrorDark: "0 0 0 1px #940800";
shadowBorderError: "0 0 0 1px #d61f1f";
shadowBorderErrorDark: "0 0 0 1px #750c0c";
shadowBorderErrorLight: "0 0 0 1px #eb5656";

@@ -379,11 +377,11 @@ shadowBorderInverse: "0 0 0 1px rgba(255, 255, 255, 0.5)";

shadowBorderInverseLightest: "0 0 0 1px #ffffff";
shadowBorderLight: "0 0 0 1px #ccd2dc";
shadowBorderLight: "0 0 0 1px #cacdd8";
shadowBorderLighter: "0 0 0 1px #e1e3ea";
shadowBorderPrimary: "0 0 0 1px #0263e0";
shadowBorderPrimaryDark: "0 0 0 1px #002ca6";
shadowBorderPrimaryDarker: "0 0 0 1px #001f75";
shadowBorderPrimaryDark: "0 0 0 1px #001489";
shadowBorderPrimaryDarker: "0 0 0 1px #030b5d";
shadowBorderPrimaryLight: "0 0 0 1px #99cdff";
shadowBorderPrimaryLighter: "0 0 0 1px #cce4ff";
shadowCard: "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
shadowFocus: "0 0 0 4px rgba(51, 104, 250, 0.8)";
shadowCard: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
shadowFocus: "0 0 0 4px rgba(2, 99, 224, 0.7)";
shadowFocusInverse: "0 0 0 4px rgba(255, 255, 255, 0.4)";

@@ -394,15 +392,15 @@ shadowHigh: "0 16px 24px 0 rgba(18, 28, 45, 0.2)";

export declare const colors: {
colorBrand: "rgb(8, 21, 44)";
colorBrandHighlight: "rgb(51, 104, 250)";
colorBrand: "rgb(0, 20, 137)";
colorBrandHighlight: "rgb(242, 47, 70)";
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)";
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)";
};

@@ -547,30 +545,28 @@ export declare const fonts: {

export declare const textColors: {
colorText: "rgb(8, 21, 44)";
colorText: "rgb(18, 28, 45)";
colorTextBrandHighlight: "rgb(242, 47, 70)";
colorTextBrandInverse: "rgb(255, 255, 255)";
colorTextError: "rgb(172, 30, 22)";
colorTextErrorDark: "rgb(148, 8, 0)";
colorTextError: "rgb(214, 31, 31)";
colorTextErrorDark: "rgb(173, 17, 17)";
colorTextErrorLight: "rgb(235, 86, 86)";
colorTextIcon: "rgb(136, 148, 170)";
colorTextIcon: "rgb(96, 107, 133)";
colorTextIconInverse: "rgb(136, 145, 170)";
colorTextInverse: "rgb(255, 255, 255)";
colorTextInverseWeak: "rgb(156, 167, 186)";
colorTextInverseWeak: "rgb(174, 178, 193)";
colorTextInverseWeaker: "rgb(96, 107, 133)";
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)";
colorTextLink: "rgb(2, 99, 224)";
colorTextLinkDark: "rgb(0, 20, 137)";
colorTextLinkDarker: "rgb(3, 11, 93)";
colorTextLinkDestructive: "rgb(214, 31, 31)";
colorTextLinkDestructiveDark: "rgb(173, 17, 17)";
colorTextLinkDestructiveDarker: "rgb(74, 11, 11)";
colorTextLinkDestructiveLight: "rgb(246, 177, 177)";
colorTextLinkLight: "rgb(153, 205, 255)";
colorTextNeutral: "rgb(0, 20, 137)";
colorTextNew: "rgb(109, 46, 209)";
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)";
colorTextWeaker: "rgb(182, 191, 206)";
colorTextSuccess: "rgb(20, 176, 83)";
colorTextWarning: "rgb(244, 124, 34)";
colorTextWarningDark: "rgb(195, 83, 35)";
colorTextWeak: "rgb(96, 107, 133)";
colorTextWeaker: "rgb(174, 178, 193)";
};

@@ -577,0 +573,0 @@ export declare const zIndices: {

184

dist/themes/sendgrid/tokens.es6.js

@@ -11,3 +11,3 @@ export const borderRadius0 = "0";

export const borderWidth40 = "8px";
export const colorBackground = "rgb(243, 244, 246)";
export const colorBackground = "rgb(244, 244, 246)";
export const colorBackgroundBody = "rgb(255, 255, 255)";

@@ -18,46 +18,46 @@ export const colorBackgroundBodyInverse = "rgb(18, 28, 45)";

export const colorBackgroundBrandHighlightLightest = "rgba(242, 47, 70, 0.1)";
export const colorBackgroundDark = "rgb(204, 210, 220)";
export const colorBackgroundDarker = "rgb(204, 210, 220)";
export const colorBackgroundDarkest = "rgb(136, 148, 170)";
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 colorBackgroundErrorDark = "rgb(148, 8, 0)";
export const colorBackgroundErrorLightest = "rgb(255, 233, 231)";
export const colorBackgroundInverse = "rgb(8, 21, 44)";
export const colorBackgroundDark = "rgb(225, 227, 234)";
export const colorBackgroundDarker = "rgb(136, 145, 170)";
export const colorBackgroundDarkest = "rgb(75, 86, 113)";
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(246, 177, 177)";
export const colorBackgroundDestructiveLighter = "rgb(252, 207, 207)";
export const colorBackgroundDestructiveLightest = "rgb(254, 236, 236)";
export const colorBackgroundError = "rgb(214, 31, 31)";
export const colorBackgroundErrorDark = "rgb(117, 12, 12)";
export const colorBackgroundErrorLightest = "rgb(254, 236, 236)";
export const colorBackgroundInverse = "rgba(255, 255, 255, 0.1)";
export const colorBackgroundInverseLight = "rgba(255, 255, 255, 0.2)";
export const colorBackgroundNeutralLightest = "rgb(245, 248, 255)";
export const colorBackgroundNeutralLightest = "rgb(235, 244, 255)";
export const colorBackgroundNew = "rgb(231, 220, 250)";
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 colorBackgroundOverlay = "rgba(6, 3, 58, 0.4)";
export const colorBackgroundPrimary = "rgb(2, 99, 224)";
export const colorBackgroundPrimaryDark = "rgb(0, 20, 137)";
export const colorBackgroundPrimaryDarker = "rgb(3, 11, 93)";
export const colorBackgroundPrimaryDarkest = "rgb(6, 3, 58)";
export const colorBackgroundPrimaryLight = "rgb(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 colorBackgroundPrimaryLight = "rgb(153, 205, 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 colorBackgroundSubaccount = "rgb(255, 241, 179)";
export const colorBackgroundSuccess = "rgb(0, 153, 74)";
export const colorBackgroundSuccessLightest = "rgb(224, 255, 239)";
export const colorBackgroundSuccess = "rgb(20, 176, 83)";
export const colorBackgroundSuccessLightest = "rgb(237, 253, 243)";
export const colorBackgroundTrial = "rgb(209, 250, 224)";
export const colorBackgroundUser = "rgb(200, 175, 240)";
export const colorBackgroundWarning = "rgb(228, 98, 22)";
export const colorBackgroundWarningLightest = "rgb(255, 236, 216)";
export const colorBorder = "rgb(136, 148, 170)";
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 colorBorderErrorDark = "rgb(148, 8, 0)";
export const colorBorderErrorLight = "rgb(232, 83, 74)";
export const colorBorderErrorLightest = "rgb(255, 233, 231)";
export const colorBackgroundWarning = "rgb(244, 124, 34)";
export const colorBackgroundWarningLightest = "rgb(254, 245, 238)";
export const colorBorder = "rgb(136, 145, 170)";
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 colorBorderErrorDark = "rgb(117, 12, 12)";
export const colorBorderErrorLight = "rgb(245, 138, 138)";
export const colorBorderErrorLightest = "rgb(254, 236, 236)";
export const colorBorderInverse = "rgba(255, 255, 255, 0.5)";

@@ -67,58 +67,56 @@ export const colorBorderInverseDarker = "rgba(255, 255, 255, 0.2)";

export const colorBorderInverseLightest = "rgb(255, 255, 255)";
export const colorBorderLight = "rgb(182, 191, 206)";
export const colorBorderLighter = "rgb(204, 210, 220)";
export const colorBorderLight = "rgb(202, 205, 216)";
export const colorBorderLighter = "rgb(225, 227, 234)";
export const colorBorderNeutral = "rgb(2, 99, 224)";
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 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 colorBorderSuccessLight = "rgb(54, 213, 118)";
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 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(0, 20, 137)";
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(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 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(172, 30, 22)";
export const colorTextErrorDark = "rgb(148, 8, 0)";
export const colorTextError = "rgb(214, 31, 31)";
export const colorTextErrorDark = "rgb(173, 17, 17)";
export const colorTextErrorLight = "rgb(235, 86, 86)";
export const colorTextIcon = "rgb(136, 148, 170)";
export const colorTextIcon = "rgb(96, 107, 133)";
export const colorTextIconInverse = "rgb(136, 145, 170)";
export const colorTextInverse = "rgb(255, 255, 255)";
export const colorTextInverseWeak = "rgb(156, 167, 186)";
export const colorTextInverseWeak = "rgb(174, 178, 193)";
export const colorTextInverseWeaker = "rgb(96, 107, 133)";
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 colorTextLink = "rgb(2, 99, 224)";
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(74, 11, 11)";
export const colorTextLinkDestructiveLight = "rgb(246, 177, 177)";
export const colorTextLinkLight = "rgb(153, 205, 255)";
export const colorTextNeutral = "rgb(0, 20, 137)";
export const colorTextNew = "rgb(109, 46, 209)";
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 colorTextWeaker = "rgb(182, 191, 206)";
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(96, 107, 133)";
export const colorTextWeaker = "rgb(174, 178, 193)";
export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";

@@ -155,3 +153,3 @@ export const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";

export const shadow = "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
export const shadowBorder = "0 0 0 1px #8894aa";
export const shadowBorder = "0 0 0 1px #8891aa";
export const shadowBorderDestructive = "0 0 0 1px #d61f1f";

@@ -161,4 +159,4 @@ export const shadowBorderDestructiveDarker = "0 0 0 1px #4a0b0b";

export const shadowBorderDestructiveLighter = "0 0 0 1px #fccfcf";
export const shadowBorderError = "0 0 0 1px #ac1e16";
export const shadowBorderErrorDark = "0 0 0 1px #940800";
export const shadowBorderError = "0 0 0 1px #d61f1f";
export const shadowBorderErrorDark = "0 0 0 1px #750c0c";
export const shadowBorderErrorLight = "0 0 0 1px #eb5656";

@@ -169,11 +167,11 @@ export const shadowBorderInverse = "0 0 0 1px rgba(255, 255, 255, 0.5)";

export const shadowBorderInverseLightest = "0 0 0 1px #ffffff";
export const shadowBorderLight = "0 0 0 1px #ccd2dc";
export const shadowBorderLight = "0 0 0 1px #cacdd8";
export const shadowBorderLighter = "0 0 0 1px #e1e3ea";
export const shadowBorderPrimary = "0 0 0 1px #0263e0";
export const shadowBorderPrimaryDark = "0 0 0 1px #002ca6";
export const shadowBorderPrimaryDarker = "0 0 0 1px #001f75";
export const shadowBorderPrimaryDark = "0 0 0 1px #001489";
export const shadowBorderPrimaryDarker = "0 0 0 1px #030b5d";
export const shadowBorderPrimaryLight = "0 0 0 1px #99cdff";
export const shadowBorderPrimaryLighter = "0 0 0 1px #cce4ff";
export const shadowCard = "0 2px 4px 0 rgba(8, 21, 44, 0.3)";
export const shadowFocus = "0 0 0 4px rgba(51, 104, 250, 0.8)";
export const shadowCard = "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
export const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.7)";
export const shadowFocusInverse = "0 0 0 4px rgba(255, 255, 255, 0.4)";

@@ -551,3 +549,2 @@ export const shadowHigh = "0 16px 24px 0 rgba(18, 28, 45, 0.2)";

colorTextInverseWeaker,
colorTextLabel,
colorTextLink,

@@ -563,3 +560,2 @@ colorTextLinkDark,

colorTextNew,
colorTextPlaceholder,
colorTextSuccess,

@@ -566,0 +562,0 @@ colorTextWarning,

10

dist/themes/sendgrid/tokens.gatsby.json
{
"tokens": [{
"categoryName": "background-colors",
"tokens": [{"type":"color","category":"background-color","value":"rgb(243, 244, 246)","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","name":"color-background"},{"type":"color","category":"background-color","value":"rgb(255, 255, 255)","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"rgb(18, 28, 45)","comment":"Inverse background color of the main page body, the darkest gray in the system","originalValue":"{!palette-gray-100}","name":"color-background-body-inverse"},{"type":"color","category":"background-color","value":"rgb(0, 20, 137)","comment":"Primary brand background, accessible with inverse text","originalValue":"{!palette-blue-80}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"rgb(242, 47, 70)","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"rgba(242, 47, 70, 0.1)","comment":"Lightest highlight brand background, accessible with black text","originalValue":"{!amaranth-transparent-10}","name":"color-background-brand-highlight-lightest"},{"type":"color","category":"background-color","value":"rgb(204, 210, 220)","comment":"Dark default background color","originalValue":"{!palette-gray-40}","name":"color-background-dark"},{"type":"color","category":"background-color","value":"rgb(204, 210, 220)","comment":"Darker default background color","originalValue":"{!palette-gray-40}","name":"color-background-darker"},{"type":"color","category":"background-color","value":"rgb(136, 148, 170)","comment":"Darkest default background color","originalValue":"{!palette-gray-70}","name":"color-background-darkest"},{"type":"color","category":"background-color","value":"rgb(206, 36, 26)","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-50}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"rgb(112, 6, 0)","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"rgb(71, 5, 0)","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"rgb(255, 140, 133)","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"rgb(255, 185, 179)","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-20}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"rgb(172, 30, 22)","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"rgb(148, 8, 0)","comment":"Dark error background color","originalValue":"{!palette-red-70}","name":"color-background-error-dark"},{"type":"color","category":"background-color","value":"rgb(255, 233, 231)","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"rgb(8, 21, 44)","comment":"Inverse background color for any container, the darkest gray in the system","originalValue":"{!palette-gray-100}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"rgba(255, 255, 255, 0.2)","comment":"Light inverse background color for any container. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-20}","name":"color-background-inverse-light"},{"type":"color","category":"background-color","value":"rgb(245, 248, 255)","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"rgb(231, 220, 250)","comment":"Background color for indicating a new status.","originalValue":"{!palette-purple-20}","name":"color-background-new"},{"type":"color","category":"background-color","value":"rgba(8, 21, 44, 0.5)","comment":"Default background for overlays","originalValue":"{!palette-gray-100-transparent-50}","name":"color-background-overlay"},{"type":"color","category":"background-color","value":"rgb(51, 104, 250)","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-50}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"rgb(0, 44, 166)","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-70}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"rgb(0, 31, 117)","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"rgb(6, 3, 58)","comment":"Darkest background for primary actions or highlights","originalValue":"{!palette-blue-100}","name":"color-background-primary-darkest"},{"type":"color","category":"background-color","value":"rgb(186, 204, 255)","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"rgb(219, 230, 255)","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-20}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"rgb(245, 248, 255)","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"rgb(232, 83, 74)","comment":"Required background color","originalValue":"{!palette-red-40}","name":"color-background-required"},{"type":"color","category":"background-color","value":"rgb(249, 250, 251)","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"rgb(255, 241, 179)","comment":"Subaccount background color","originalValue":"{!palette-yellow-20}","name":"color-background-subaccount"},{"type":"color","category":"background-color","value":"rgb(0, 153, 74)","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"rgb(224, 255, 239)","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"rgb(209, 250, 224)","comment":"Trial account background color","originalValue":"{!palette-green-20}","name":"color-background-trial"},{"type":"color","category":"background-color","value":"rgb(200, 175, 240)","comment":"User avatar background color","originalValue":"{!palette-purple-30}","name":"color-background-user"},{"type":"color","category":"background-color","value":"rgb(228, 98, 22)","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"rgb(255, 236, 216)","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
"tokens": [{"type":"color","category":"background-color","value":"rgb(244, 244, 246)","comment":"Default background color for any container","originalValue":"{!palette-gray-10}","name":"color-background"},{"type":"color","category":"background-color","value":"rgb(255, 255, 255)","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"rgb(18, 28, 45)","comment":"Inverse background color of the main page body, the darkest gray in the system","originalValue":"{!palette-gray-100}","name":"color-background-body-inverse"},{"type":"color","category":"background-color","value":"rgb(0, 20, 137)","comment":"Primary brand background, accessible with inverse text","originalValue":"{!palette-blue-80}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"rgb(242, 47, 70)","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"rgba(242, 47, 70, 0.1)","comment":"Lightest highlight brand background, accessible with black text","originalValue":"{!amaranth-transparent-10}","name":"color-background-brand-highlight-lightest"},{"type":"color","category":"background-color","value":"rgb(225, 227, 234)","comment":"Dark default background color","originalValue":"{!palette-gray-20}","name":"color-background-dark"},{"type":"color","category":"background-color","value":"rgb(136, 145, 170)","comment":"Darker default background color","originalValue":"{!palette-gray-50}","name":"color-background-darker"},{"type":"color","category":"background-color","value":"rgb(75, 86, 113)","comment":"Darkest default background color","originalValue":"{!palette-gray-70}","name":"color-background-darkest"},{"type":"color","category":"background-color","value":"rgb(214, 31, 31)","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"rgb(117, 12, 12)","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"rgb(74, 11, 11)","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"rgb(246, 177, 177)","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"rgb(252, 207, 207)","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-20}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"rgb(254, 236, 236)","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"rgb(214, 31, 31)","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"rgb(117, 12, 12)","comment":"Dark error background color","originalValue":"{!palette-red-80}","name":"color-background-error-dark"},{"type":"color","category":"background-color","value":"rgb(254, 236, 236)","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"rgba(255, 255, 255, 0.1)","comment":"Inverse background color for any container. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-10}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"rgba(255, 255, 255, 0.2)","comment":"Light inverse background color for any container. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-20}","name":"color-background-inverse-light"},{"type":"color","category":"background-color","value":"rgb(235, 244, 255)","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"rgb(231, 220, 250)","comment":"Background color for indicating a new status.","originalValue":"{!palette-purple-20}","name":"color-background-new"},{"type":"color","category":"background-color","value":"rgba(6, 3, 58, 0.4)","comment":"Default background for overlays","originalValue":"{!palette-blue-100-transparent-40}","name":"color-background-overlay"},{"type":"color","category":"background-color","value":"rgb(2, 99, 224)","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"rgb(0, 20, 137)","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"rgb(3, 11, 93)","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"rgb(6, 3, 58)","comment":"Darkest background for primary actions or highlights","originalValue":"{!palette-blue-100}","name":"color-background-primary-darkest"},{"type":"color","category":"background-color","value":"rgb(153, 205, 255)","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"rgb(204, 228, 255)","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-20}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"rgb(235, 244, 255)","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"rgb(235, 86, 86)","comment":"Required background color","originalValue":"{!palette-red-50}","name":"color-background-required"},{"type":"color","category":"background-color","value":"rgb(244, 244, 246)","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"rgb(255, 241, 179)","comment":"Subaccount background color","originalValue":"{!palette-yellow-20}","name":"color-background-subaccount"},{"type":"color","category":"background-color","value":"rgb(20, 176, 83)","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"rgb(237, 253, 243)","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"rgb(209, 250, 224)","comment":"Trial account background color","originalValue":"{!palette-green-20}","name":"color-background-trial"},{"type":"color","category":"background-color","value":"rgb(200, 175, 240)","comment":"User avatar background color","originalValue":"{!palette-purple-30}","name":"color-background-user"},{"type":"color","category":"background-color","value":"rgb(244, 124, 34)","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"rgb(254, 245, 238)","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
},
{
"categoryName": "border-colors",
"tokens": [{"type":"color","category":"border-color","value":"rgb(136, 148, 170)","comment":"Default border color","originalValue":"{!palette-gray-70}","name":"color-border"},{"type":"color","category":"border-color","value":"rgb(156, 167, 186)","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"rgb(206, 36, 26)","comment":"Destructive border color","originalValue":"{!palette-red-50}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"rgb(112, 6, 0)","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"rgb(71, 5, 0)","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"rgb(255, 140, 133)","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"rgb(255, 185, 179)","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"rgb(172, 30, 22)","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"rgb(148, 8, 0)","comment":"Dark error border color","originalValue":"{!palette-red-70}","name":"color-border-error-dark"},{"type":"color","category":"border-color","value":"rgb(232, 83, 74)","comment":"Light error border color","originalValue":"{!palette-red-40}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"rgb(255, 233, 231)","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.5)","comment":"Border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-50}","name":"color-border-inverse"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.2)","comment":"Darker border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-20}","name":"color-border-inverse-darker"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.9)","comment":"Lighter border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-90}","name":"color-border-inverse-lighter"},{"type":"color","category":"border-color","value":"rgb(255, 255, 255)","comment":"Lightest border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-border-inverse-lightest"},{"type":"color","category":"border-color","value":"rgb(182, 191, 206)","comment":"Light border color","originalValue":"{!palette-gray-50}","name":"color-border-light"},{"type":"color","category":"border-color","value":"rgb(204, 210, 220)","comment":"Lighter border color","originalValue":"{!palette-gray-40}","name":"color-border-lighter"},{"type":"color","category":"border-color","value":"rgb(2, 99, 224)","comment":"Neutral border color","originalValue":"{!palette-blue-60}","name":"color-border-neutral"},{"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(54, 213, 118)","comment":"Light success border color","originalValue":"{!palette-green-50}","name":"color-border-success-light"},{"type":"color","category":"border-color","value":"rgb(224, 255, 239)","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"rgb(228, 98, 22)","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"rgb(250, 156, 102)","comment":"Light warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"rgb(255, 236, 216)","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
"tokens": [{"type":"color","category":"border-color","value":"rgb(136, 145, 170)","comment":"Default border color","originalValue":"{!palette-gray-50}","name":"color-border"},{"type":"color","category":"border-color","value":"rgb(96, 107, 133)","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"rgb(214, 31, 31)","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"rgb(117, 12, 12)","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"rgb(74, 11, 11)","comment":"Darker destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"rgb(245, 138, 138)","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"rgb(252, 207, 207)","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"rgb(214, 31, 31)","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"rgb(117, 12, 12)","comment":"Dark error border color","originalValue":"{!palette-red-80}","name":"color-border-error-dark"},{"type":"color","category":"border-color","value":"rgb(245, 138, 138)","comment":"Light error border color","originalValue":"{!palette-red-40}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"rgb(254, 236, 236)","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.5)","comment":"Border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-50}","name":"color-border-inverse"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.2)","comment":"Darker border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-20}","name":"color-border-inverse-darker"},{"type":"color","category":"border-color","value":"rgba(255, 255, 255, 0.9)","comment":"Lighter border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0-transparent-90}","name":"color-border-inverse-lighter"},{"type":"color","category":"border-color","value":"rgb(255, 255, 255)","comment":"Lightest border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-border-inverse-lightest"},{"type":"color","category":"border-color","value":"rgb(202, 205, 216)","comment":"Light border color","originalValue":"{!palette-gray-30}","name":"color-border-light"},{"type":"color","category":"border-color","value":"rgb(225, 227, 234)","comment":"Lighter border color","originalValue":"{!palette-gray-20}","name":"color-border-lighter"},{"type":"color","category":"border-color","value":"rgb(2, 99, 224)","comment":"Neutral border color","originalValue":"{!palette-blue-60}","name":"color-border-neutral"},{"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(54, 213, 118)","comment":"Light success border color","originalValue":"{!palette-green-50}","name":"color-border-success-light"},{"type":"color","category":"border-color","value":"rgb(237, 253, 243)","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"rgb(244, 124, 34)","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"rgb(255, 179, 122)","comment":"Light warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"rgb(254, 245, 238)","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
},

@@ -16,7 +16,7 @@ {

"categoryName": "box-shadows",
"tokens": [{"type":"shadow","category":"box-shadow","value":"0 4px 16px 0 rgba(18, 28, 45, 0.2)","comment":"Default shadow.","originalValue":"{!shadow-elevation-20}","name":"shadow"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #8894aa","comment":"Shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-70}","name":"shadow-border"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-destructive"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #4a0b0b","comment":"Dark shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}","name":"shadow-border-destructive-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #f6b1b1","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}","name":"shadow-border-destructive-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #fccfcf","comment":"Lighter shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}","name":"shadow-border-destructive-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ac1e16","comment":"Shadow border for error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #940800","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-70}","name":"shadow-border-error-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #eb5656","comment":"Shadow border for inverse error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}","name":"shadow-border-error-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.5)","comment":"Shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-50}","name":"shadow-border-inverse"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.2)","comment":"Darker shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-20}","name":"shadow-border-inverse-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.9)","comment":"Light shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-90}","name":"shadow-border-inverse-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ffffff","comment":"Lightest shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}","name":"shadow-border-inverse-lightest"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ccd2dc","comment":"Shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-40}","name":"shadow-border-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e1e3ea","comment":"Lighter shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #0263e0","comment":"Default shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}","name":"shadow-border-primary"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #002ca6","comment":"Shadow border for inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-70}","name":"shadow-border-primary-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #001f75","comment":"Shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}","name":"shadow-border-primary-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #99cdff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}","name":"shadow-border-primary-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #cce4ff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}","name":"shadow-border-primary-lighter"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(8, 21, 44, 0.3)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(51, 104, 250, 0.8)","comment":"Shadow for focus ring on interactive elements","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-50-transparent-80}","name":"shadow-focus"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(255, 255, 255, 0.4)","comment":"Shadow for focus ring on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","category":"box-shadow","value":"0 16px 24px 0 rgba(18, 28, 45, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","category":"box-shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}]
"tokens": [{"type":"shadow","category":"box-shadow","value":"0 4px 16px 0 rgba(18, 28, 45, 0.2)","comment":"Default shadow.","originalValue":"{!shadow-elevation-20}","name":"shadow"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #8891aa","comment":"Shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}","name":"shadow-border"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-destructive"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #4a0b0b","comment":"Dark shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}","name":"shadow-border-destructive-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #f6b1b1","comment":"Light shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}","name":"shadow-border-destructive-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #fccfcf","comment":"Lighter shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}","name":"shadow-border-destructive-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Shadow border for error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #750c0c","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}","name":"shadow-border-error-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #eb5656","comment":"Shadow border for inverse error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}","name":"shadow-border-error-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.5)","comment":"Shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-50}","name":"shadow-border-inverse"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.2)","comment":"Darker shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-20}","name":"shadow-border-inverse-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px rgba(255, 255, 255, 0.9)","comment":"Light shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0-transparent-90}","name":"shadow-border-inverse-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ffffff","comment":"Lightest shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}","name":"shadow-border-inverse-lightest"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #cacdd8","comment":"Light shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}","name":"shadow-border-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e1e3ea","comment":"Lighter shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-lighter"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #0263e0","comment":"Default shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}","name":"shadow-border-primary"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #001489","comment":"Dark shadow border for inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}","name":"shadow-border-primary-dark"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #030b5d","comment":"Darker shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-90}","name":"shadow-border-primary-darker"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #99cdff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}","name":"shadow-border-primary-light"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #cce4ff","comment":"Lighter shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}","name":"shadow-border-primary-lighter"},{"type":"shadow","category":"box-shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(2, 99, 224, 0.7)","comment":"Shadow for focus ring on interactive elements.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}","name":"shadow-focus"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(255, 255, 255, 0.4)","comment":"Shadow for focus ring on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","category":"box-shadow","value":"0 16px 24px 0 rgba(18, 28, 45, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","category":"box-shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}]
},
{
"categoryName": "colors",
"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"}]
"tokens": [{"type":"color","category":"color","value":"rgb(0, 20, 137)","comment":"Default branding color","originalValue":"{!palette-blue-80}","name":"color-brand"},{"type":"color","category":"color","value":"rgb(242, 47, 70)","comment":"Twilio brand red","originalValue":"{!amaranth}","name":"color-brand-highlight"},{"type":"color","category":"color","value":"rgb(255, 255, 255)","comment":"Gray Color 0","originalValue":"{!palette-gray-0}","name":"color-gray-0"},{"type":"color","category":"color","value":"rgb(244, 244, 246)","comment":"Gray Color 1","originalValue":"{!palette-gray-10}","name":"color-gray-10"},{"type":"color","category":"color","value":"rgb(18, 28, 45)","comment":"Gray Color 10","originalValue":"{!palette-gray-100}","name":"color-gray-100"},{"type":"color","category":"color","value":"rgb(225, 227, 234)","comment":"Gray Color 2","originalValue":"{!palette-gray-20}","name":"color-gray-20"},{"type":"color","category":"color","value":"rgb(202, 205, 216)","comment":"Gray Color 3","originalValue":"{!palette-gray-30}","name":"color-gray-30"},{"type":"color","category":"color","value":"rgb(174, 178, 193)","comment":"Gray Color 4","originalValue":"{!palette-gray-40}","name":"color-gray-40"},{"type":"color","category":"color","value":"rgb(136, 145, 170)","comment":"Gray Color 5","originalValue":"{!palette-gray-50}","name":"color-gray-50"},{"type":"color","category":"color","value":"rgb(96, 107, 133)","comment":"Gray Color 6","originalValue":"{!palette-gray-60}","name":"color-gray-60"},{"type":"color","category":"color","value":"rgb(75, 86, 113)","comment":"Gray Color 7","originalValue":"{!palette-gray-70}","name":"color-gray-70"},{"type":"color","category":"color","value":"rgb(57, 71, 98)","comment":"Gray Color 8","originalValue":"{!palette-gray-80}","name":"color-gray-80"},{"type":"color","category":"color","value":"rgb(31, 48, 76)","comment":"Gray Color 9","originalValue":"{!palette-gray-90}","name":"color-gray-90"}]
},

@@ -53,3 +53,3 @@ {

"categoryName": "text-colors",
"tokens": [{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(172, 30, 22)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(148, 8, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(235, 86, 86)","comment":"Light error text for inputs and error misc","originalValue":"{!palette-red-50}","name":"color-text-error-light"},{"type":"color","category":"text-color","value":"rgb(136, 148, 170)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(136, 145, 170)","comment":"Default icon color for inverse backgrounds.","originalValue":"{!palette-gray-50}","name":"color-text-icon-inverse"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(156, 167, 186)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weaker"},{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 58, 219)","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 44, 166)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-70}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(0, 31, 117)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(206, 36, 26)","comment":"Destructive link text","originalValue":"{!palette-red-50}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(112, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(71, 5, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-90}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(232, 83, 74)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(133, 165, 255)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(0, 20, 137)","comment":"Color for text indicating a neutral status.","originalValue":"{!palette-blue-80}","name":"color-text-neutral"},{"type":"color","category":"text-color","value":"rgb(109, 46, 209)","comment":"Color for text indicating a new status.","originalValue":"{!palette-purple-60}","name":"color-text-new"},{"type":"color","category":"text-color","value":"rgb(136, 148, 170)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(71, 86, 114)","comment":"Weak body text for visual hierarchy. Must pass AA color contrast with color-background.","originalValue":"{!palette-gray-80}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(182, 191, 206)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
"tokens": [{"type":"color","category":"text-color","value":"rgb(18, 28, 45)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(214, 31, 31)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(173, 17, 17)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(235, 86, 86)","comment":"Light error text for inputs and error misc","originalValue":"{!palette-red-50}","name":"color-text-error-light"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Default icon color.","originalValue":"{!palette-gray-60}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(136, 145, 170)","comment":"Default icon color for inverse backgrounds.","originalValue":"{!palette-gray-50}","name":"color-text-icon-inverse"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(174, 178, 193)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-40}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weaker"},{"type":"color","category":"text-color","value":"rgb(2, 99, 224)","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 20, 137)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 11, 93)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(214, 31, 31)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(173, 17, 17)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(74, 11, 11)","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(246, 177, 177)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-30}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(153, 205, 255)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-30}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(0, 20, 137)","comment":"Color for text indicating a neutral status.","originalValue":"{!palette-blue-80}","name":"color-text-neutral"},{"type":"color","category":"text-color","value":"rgb(109, 46, 209)","comment":"Color for text indicating a new status.","originalValue":"{!palette-purple-60}","name":"color-text-new"},{"type":"color","category":"text-color","value":"rgb(20, 176, 83)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(244, 124, 34)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(195, 83, 35)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(96, 107, 133)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-60}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(174, 178, 193)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-40}","name":"color-text-weaker"}]
},

@@ -56,0 +56,0 @@ {

214

dist/themes/sendgrid/tokens.ios.json

@@ -27,3 +27,3 @@ {

"category": "background-color",
"value": "rgb(0, 31, 117)",
"value": "rgb(3, 11, 93)",
"comment": "Darker background for primary actions or highlights",

@@ -35,3 +35,3 @@ "name": "colorBackgroundPrimaryDarker"

"category": "background-color",
"value": "rgb(219, 230, 255)",
"value": "rgb(204, 228, 255)",
"comment": "Lighter background for primary actions or highlights",

@@ -43,3 +43,3 @@ "name": "colorBackgroundPrimaryLighter"

"category": "background-color",
"value": "rgb(71, 5, 0)",
"value": "rgb(74, 11, 11)",
"comment": "Darker background for destructive actions or highlights",

@@ -51,3 +51,3 @@ "name": "colorBackgroundDestructiveDarker"

"category": "background-color",
"value": "rgb(255, 185, 179)",
"value": "rgb(252, 207, 207)",
"comment": "Lighter background for destructive actions or highlights",

@@ -73,3 +73,3 @@ "name": "colorBackgroundDestructiveLighter"

"category": "background-color",
"value": "rgb(228, 98, 22)",
"value": "rgb(244, 124, 34)",
"comment": "Warning background color",

@@ -81,3 +81,3 @@ "name": "colorBackgroundWarning"

"category": "background-color",
"value": "rgb(255, 233, 231)",
"value": "rgb(254, 236, 236)",
"comment": "Lightest error background color",

@@ -96,3 +96,3 @@ "name": "colorBackgroundErrorLightest"

"category": "background-color",
"value": "rgb(245, 248, 255)",
"value": "rgb(235, 244, 255)",
"comment": "Lightest neutral background color",

@@ -104,3 +104,3 @@ "name": "colorBackgroundNeutralLightest"

"category": "background-color",
"value": "rgb(204, 210, 220)",
"value": "rgb(225, 227, 234)",
"comment": "Dark default background color",

@@ -112,3 +112,3 @@ "name": "colorBackgroundDark"

"category": "background-color",
"value": "rgb(206, 36, 26)",
"value": "rgb(214, 31, 31)",
"comment": "Background for destructive actions or highlights",

@@ -120,3 +120,3 @@ "name": "colorBackgroundDestructive"

"category": "background-color",
"value": "rgb(51, 104, 250)",
"value": "rgb(2, 99, 224)",
"comment": "Background for primary actions or highlights",

@@ -128,3 +128,3 @@ "name": "colorBackgroundPrimary"

"category": "background-color",
"value": "rgb(0, 153, 74)",
"value": "rgb(20, 176, 83)",
"comment": "Success background color",

@@ -136,3 +136,3 @@ "name": "colorBackgroundSuccess"

"category": "background-color",
"value": "rgb(249, 250, 251)",
"value": "rgb(244, 244, 246)",
"comment": "Background color for alternative striped rows",

@@ -144,3 +144,3 @@ "name": "colorBackgroundRowStriped"

"category": "background-color",
"value": "rgb(224, 255, 239)",
"value": "rgb(237, 253, 243)",
"comment": "Lightest success background color",

@@ -152,3 +152,3 @@ "name": "colorBackgroundSuccessLightest"

"category": "background-color",
"value": "rgb(255, 233, 231)",
"value": "rgb(254, 236, 236)",
"comment": "Lightest background for destructive actions or highlights",

@@ -160,3 +160,3 @@ "name": "colorBackgroundDestructiveLightest"

"category": "background-color",
"value": "rgb(148, 8, 0)",
"value": "rgb(117, 12, 12)",
"comment": "Dark error background color",

@@ -168,3 +168,3 @@ "name": "colorBackgroundErrorDark"

"category": "background-color",
"value": "rgb(245, 248, 255)",
"value": "rgb(235, 244, 255)",
"comment": "Lightest background for primary actions or highlights",

@@ -190,3 +190,3 @@ "name": "colorBackgroundPrimaryLightest"

"category": "background-color",
"value": "rgb(172, 30, 22)",
"value": "rgb(214, 31, 31)",
"comment": "Error background color",

@@ -198,3 +198,3 @@ "name": "colorBackgroundError"

"category": "background-color",
"value": "rgb(232, 83, 74)",
"value": "rgb(235, 86, 86)",
"comment": "Required background color",

@@ -206,3 +206,3 @@ "name": "colorBackgroundRequired"

"category": "background-color",
"value": "rgb(112, 6, 0)",
"value": "rgb(117, 12, 12)",
"comment": "Dark background for destructive actions or highlights",

@@ -214,3 +214,3 @@ "name": "colorBackgroundDestructiveDark"

"category": "background-color",
"value": "rgb(255, 140, 133)",
"value": "rgb(246, 177, 177)",
"comment": "Light background for destructive actions or highlights",

@@ -222,3 +222,3 @@ "name": "colorBackgroundDestructiveLight"

"category": "background-color",
"value": "rgb(0, 44, 166)",
"value": "rgb(0, 20, 137)",
"comment": "Dark background for primary actions or highlights",

@@ -230,3 +230,3 @@ "name": "colorBackgroundPrimaryDark"

"category": "background-color",
"value": "rgb(186, 204, 255)",
"value": "rgb(153, 205, 255)",
"comment": "Light background for primary actions or highlights",

@@ -238,3 +238,3 @@ "name": "colorBackgroundPrimaryLight"

"category": "background-color",
"value": "rgb(255, 236, 216)",
"value": "rgb(254, 245, 238)",
"comment": "Lightest warning background color",

@@ -253,3 +253,3 @@ "name": "colorBackgroundWarningLightest"

"category": "background-color",
"value": "rgb(204, 210, 220)",
"value": "rgb(136, 145, 170)",
"comment": "Darker default background color",

@@ -261,3 +261,3 @@ "name": "colorBackgroundDarker"

"category": "background-color",
"value": "rgb(243, 244, 246)",
"value": "rgb(244, 244, 246)",
"comment": "Default background color for any container",

@@ -283,4 +283,4 @@ "name": "colorBackground"

"category": "background-color",
"value": "rgb(8, 21, 44)",
"comment": "Inverse background color for any container, the darkest gray in the system",
"value": "rgba(255, 255, 255, 0.1)",
"comment": "Inverse background color for any container. Must be used on color-background-body-inverse.",
"name": "colorBackgroundInverse"

@@ -291,3 +291,3 @@ },

"category": "background-color",
"value": "rgba(8, 21, 44, 0.5)",
"value": "rgba(6, 3, 58, 0.4)",
"comment": "Default background for overlays",

@@ -299,3 +299,3 @@ "name": "colorBackgroundOverlay"

"category": "background-color",
"value": "rgb(136, 148, 170)",
"value": "rgb(75, 86, 113)",
"comment": "Darkest default background color",

@@ -307,3 +307,3 @@ "name": "colorBackgroundDarkest"

"category": "border-color",
"value": "rgb(255, 185, 179)",
"value": "rgb(252, 207, 207)",
"comment": "Destructive focus border color",

@@ -315,3 +315,3 @@ "name": "colorBorderDestructiveLighter"

"category": "border-color",
"value": "rgb(219, 230, 255)",
"value": "rgb(204, 228, 255)",
"comment": "Lighter primary border color",

@@ -330,3 +330,3 @@ "name": "colorBorderPrimaryLighter"

"category": "border-color",
"value": "rgb(0, 31, 117)",
"value": "rgb(3, 11, 93)",
"comment": "Darker primary border color",

@@ -338,3 +338,3 @@ "name": "colorBorderPrimaryDarker"

"category": "border-color",
"value": "rgb(228, 98, 22)",
"value": "rgb(244, 124, 34)",
"comment": "Warning border color",

@@ -346,3 +346,3 @@ "name": "colorBorderWarning"

"category": "border-color",
"value": "rgb(71, 5, 0)",
"value": "rgb(74, 11, 11)",
"comment": "Darker destructive hover border color",

@@ -354,3 +354,3 @@ "name": "colorBorderDestructiveDarker"

"category": "border-color",
"value": "rgb(206, 36, 26)",
"value": "rgb(214, 31, 31)",
"comment": "Destructive border color",

@@ -362,3 +362,3 @@ "name": "colorBorderDestructive"

"category": "border-color",
"value": "rgb(51, 104, 250)",
"value": "rgb(2, 99, 224)",
"comment": "Primary border color",

@@ -370,3 +370,3 @@ "name": "colorBorderPrimary"

"category": "border-color",
"value": "rgb(0, 153, 74)",
"value": "rgb(20, 176, 83)",
"comment": "Success border color",

@@ -378,3 +378,3 @@ "name": "colorBorderSuccess"

"category": "border-color",
"value": "rgb(204, 210, 220)",
"value": "rgb(225, 227, 234)",
"comment": "Lighter border color",

@@ -386,3 +386,3 @@ "name": "colorBorderLighter"

"category": "border-color",
"value": "rgb(255, 233, 231)",
"value": "rgb(254, 236, 236)",
"comment": "Lightest error border color",

@@ -394,3 +394,3 @@ "name": "colorBorderErrorLightest"

"category": "border-color",
"value": "rgb(156, 167, 186)",
"value": "rgb(96, 107, 133)",
"comment": "Dark border color",

@@ -402,3 +402,3 @@ "name": "colorBorderDark"

"category": "border-color",
"value": "rgb(250, 156, 102)",
"value": "rgb(255, 179, 122)",
"comment": "Light warning border color",

@@ -424,3 +424,3 @@ "name": "colorBorderWarningLight"

"category": "border-color",
"value": "rgb(224, 255, 239)",
"value": "rgb(237, 253, 243)",
"comment": "Lightest success border color",

@@ -432,3 +432,3 @@ "name": "colorBorderSuccessLightest"

"category": "border-color",
"value": "rgb(172, 30, 22)",
"value": "rgb(214, 31, 31)",
"comment": "Error border color",

@@ -440,3 +440,3 @@ "name": "colorBorderError"

"category": "border-color",
"value": "rgb(148, 8, 0)",
"value": "rgb(117, 12, 12)",
"comment": "Dark error border color",

@@ -448,3 +448,3 @@ "name": "colorBorderErrorDark"

"category": "border-color",
"value": "rgb(255, 140, 133)",
"value": "rgb(245, 138, 138)",
"comment": "Destructive focus border color",

@@ -456,3 +456,3 @@ "name": "colorBorderDestructiveLight"

"category": "border-color",
"value": "rgb(186, 204, 255)",
"value": "rgb(102, 179, 255)",
"comment": "Light primary border color",

@@ -471,3 +471,3 @@ "name": "colorBorderPrimaryLight"

"category": "border-color",
"value": "rgb(136, 148, 170)",
"value": "rgb(136, 145, 170)",
"comment": "Default border color",

@@ -486,3 +486,3 @@ "name": "colorBorder"

"category": "border-color",
"value": "rgb(255, 236, 216)",
"value": "rgb(254, 245, 238)",
"comment": "Lightest warning border color",

@@ -494,3 +494,3 @@ "name": "colorBorderWarningLightest"

"category": "border-color",
"value": "rgb(0, 44, 166)",
"value": "rgb(0, 20, 137)",
"comment": "Dark primary border color",

@@ -502,3 +502,3 @@ "name": "colorBorderPrimaryDark"

"category": "border-color",
"value": "rgb(112, 6, 0)",
"value": "rgb(117, 12, 12)",
"comment": "Destructive focus border color",

@@ -510,3 +510,3 @@ "name": "colorBorderDestructiveDark"

"category": "border-color",
"value": "rgb(182, 191, 206)",
"value": "rgb(136, 145, 170)",
"comment": "Light neutral border color",

@@ -525,3 +525,3 @@ "name": "colorBorderNeutralLight"

"category": "border-color",
"value": "rgb(232, 83, 74)",
"value": "rgb(245, 138, 138)",
"comment": "Light error border color",

@@ -533,3 +533,3 @@ "name": "colorBorderErrorLight"

"category": "border-color",
"value": "rgb(182, 191, 206)",
"value": "rgb(202, 205, 216)",
"comment": "Light border color",

@@ -632,4 +632,4 @@ "name": "colorBorderLight"

"category": "box-shadow",
"value": "0 0 0 1px #001f75",
"comment": "Shadow border for inputs active.",
"value": "0 0 0 1px #030b5d",
"comment": "Darker shadow border for inputs active.",
"name": "shadowBorderPrimaryDarker"

@@ -640,4 +640,4 @@ },

"category": "box-shadow",
"value": "0 0 0 1px #ccd2dc",
"comment": "Shadow border for disabled inputs.",
"value": "0 0 0 1px #cacdd8",
"comment": "Light shadow border for disabled inputs.",
"name": "shadowBorderLight"

@@ -676,4 +676,4 @@ },

"category": "box-shadow",
"value": "0 0 0 4px rgba(51, 104, 250, 0.8)",
"comment": "Shadow for focus ring on interactive elements",
"value": "0 0 0 4px rgba(2, 99, 224, 0.7)",
"comment": "Shadow for focus ring on interactive elements.",
"name": "shadowFocus"

@@ -705,3 +705,3 @@ },

"category": "box-shadow",
"value": "0 0 0 1px #940800",
"value": "0 0 0 1px #750c0c",
"comment": "Shadow border for error inputs hover.",

@@ -727,3 +727,3 @@ "name": "shadowBorderErrorDark"

"category": "box-shadow",
"value": "0 0 0 1px #ac1e16",
"value": "0 0 0 1px #d61f1f",
"comment": "Shadow border for error inputs.",

@@ -742,4 +742,4 @@ "name": "shadowBorderError"

"category": "box-shadow",
"value": "0 0 0 1px #002ca6",
"comment": "Shadow border for inputs hover.",
"value": "0 0 0 1px #001489",
"comment": "Dark shadow border for inputs hover.",
"name": "shadowBorderPrimaryDark"

@@ -764,3 +764,3 @@ },

"category": "box-shadow",
"value": "0 0 0 1px #8894aa",
"value": "0 0 0 1px #8891aa",
"comment": "Shadow border for inputs.",

@@ -786,3 +786,3 @@ "name": "shadowBorder"

"category": "box-shadow",
"value": "0 2px 4px 0 rgba(8, 21, 44, 0.3)",
"value": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
"comment": "Shadow for cards.",

@@ -1002,4 +1002,4 @@ "name": "shadowCard"

"category": "color",
"value": "rgb(51, 104, 250)",
"comment": "SendGrid product blue",
"value": "rgb(242, 47, 70)",
"comment": "Twilio brand red",
"name": "colorBrandHighlight"

@@ -1017,3 +1017,3 @@ },

"category": "color",
"value": "rgb(8, 21, 44)",
"value": "rgb(18, 28, 45)",
"comment": "Gray Color 10",

@@ -1025,3 +1025,3 @@ "name": "colorGray100"

"category": "color",
"value": "rgb(29, 41, 68)",
"value": "rgb(31, 48, 76)",
"comment": "Gray Color 9",

@@ -1033,3 +1033,3 @@ "name": "colorGray90"

"category": "color",
"value": "rgb(71, 86, 114)",
"value": "rgb(57, 71, 98)",
"comment": "Gray Color 8",

@@ -1041,3 +1041,3 @@ "name": "colorGray80"

"category": "color",
"value": "rgb(136, 148, 170)",
"value": "rgb(75, 86, 113)",
"comment": "Gray Color 7",

@@ -1049,3 +1049,3 @@ "name": "colorGray70"

"category": "color",
"value": "rgb(156, 167, 186)",
"value": "rgb(96, 107, 133)",
"comment": "Gray Color 6",

@@ -1057,3 +1057,3 @@ "name": "colorGray60"

"category": "color",
"value": "rgb(182, 191, 206)",
"value": "rgb(136, 145, 170)",
"comment": "Gray Color 5",

@@ -1065,3 +1065,3 @@ "name": "colorGray50"

"category": "color",
"value": "rgb(204, 210, 220)",
"value": "rgb(174, 178, 193)",
"comment": "Gray Color 4",

@@ -1073,4 +1073,4 @@ "name": "colorGray40"

"category": "color",
"value": "rgb(8, 21, 44)",
"comment": "SendGrid product dark gray",
"value": "rgb(0, 20, 137)",
"comment": "Default branding color",
"name": "colorBrand"

@@ -1081,3 +1081,3 @@ },

"category": "color",
"value": "rgb(229, 231, 236)",
"value": "rgb(202, 205, 216)",
"comment": "Gray Color 3",

@@ -1089,3 +1089,3 @@ "name": "colorGray30"

"category": "color",
"value": "rgb(243, 244, 246)",
"value": "rgb(225, 227, 234)",
"comment": "Gray Color 2",

@@ -1097,3 +1097,3 @@ "name": "colorGray20"

"category": "color",
"value": "rgb(249, 250, 251)",
"value": "rgb(244, 244, 246)",
"comment": "Gray Color 1",

@@ -1680,3 +1680,3 @@ "name": "colorGray10"

"category": "text-color",
"value": "rgb(0, 31, 117)",
"value": "rgb(3, 11, 93)",
"comment": "Darker shade of link text to be used in interactions",

@@ -1688,3 +1688,3 @@ "name": "colorTextLinkDarker"

"category": "text-color",
"value": "rgb(206, 36, 26)",
"value": "rgb(214, 31, 31)",
"comment": "Destructive link text",

@@ -1696,3 +1696,3 @@ "name": "colorTextLinkDestructive"

"category": "text-color",
"value": "rgb(228, 98, 22)",
"value": "rgb(244, 124, 34)",
"comment": "Color for warning text.",

@@ -1711,4 +1711,4 @@ "name": "colorTextWarning"

"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.",
"value": "rgb(174, 178, 193)",
"comment": "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
"name": "colorTextInverseWeak"

@@ -1719,3 +1719,3 @@ },

"category": "text-color",
"value": "rgb(71, 5, 0)",
"value": "rgb(74, 11, 11)",
"comment": "Darker shade of destructive link text to be used in interactions",

@@ -1727,3 +1727,3 @@ "name": "colorTextLinkDestructiveDarker"

"category": "text-color",
"value": "rgb(0, 153, 74)",
"value": "rgb(20, 176, 83)",
"comment": "Text color for success text.",

@@ -1735,4 +1735,4 @@ "name": "colorTextSuccess"

"category": "text-color",
"value": "rgb(71, 86, 114)",
"comment": "Weak body text for visual hierarchy. Must pass AA color contrast with color-background.",
"value": "rgb(96, 107, 133)",
"comment": "Weak body text for visual hierarchy.",
"name": "colorTextWeak"

@@ -1743,3 +1743,3 @@ },

"category": "text-color",
"value": "rgb(232, 83, 74)",
"value": "rgb(246, 177, 177)",
"comment": "Light shade of destructive link text to be used in interactions",

@@ -1751,3 +1751,3 @@ "name": "colorTextLinkDestructiveLight"

"category": "text-color",
"value": "rgb(136, 148, 170)",
"value": "rgb(96, 107, 133)",
"comment": "Default icon color.",

@@ -1759,3 +1759,3 @@ "name": "colorTextIcon"

"category": "text-color",
"value": "rgb(0, 58, 219)",
"value": "rgb(2, 99, 224)",
"comment": "Link text",

@@ -1767,3 +1767,3 @@ "name": "colorTextLink"

"category": "text-color",
"value": "rgb(148, 8, 0)",
"value": "rgb(173, 17, 17)",
"comment": "Dark error text for inputs and error misc",

@@ -1782,3 +1782,3 @@ "name": "colorTextErrorDark"

"category": "text-color",
"value": "rgb(172, 30, 22)",
"value": "rgb(214, 31, 31)",
"comment": "Error text for inputs and error misc",

@@ -1797,3 +1797,3 @@ "name": "colorTextError"

"category": "text-color",
"value": "rgb(0, 44, 166)",
"value": "rgb(0, 20, 137)",
"comment": "Dark shade of link text to be used in interactions",

@@ -1812,3 +1812,3 @@ "name": "colorTextLinkDark"

"category": "text-color",
"value": "rgb(8, 21, 44)",
"value": "rgb(18, 28, 45)",
"comment": "Body text color",

@@ -1834,3 +1834,3 @@ "name": "colorText"

"category": "text-color",
"value": "rgb(133, 165, 255)",
"value": "rgb(153, 205, 255)",
"comment": "Light shade of link text to be used in interactions",

@@ -1843,3 +1843,3 @@ "name": "colorTextLinkLight"

"value": "rgb(255, 255, 255)",
"comment": "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.",
"comment": "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.",
"name": "colorTextInverse"

@@ -1857,3 +1857,3 @@ },

"category": "text-color",
"value": "rgb(182, 191, 206)",
"value": "rgb(174, 178, 193)",
"comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",

@@ -1865,3 +1865,3 @@ "name": "colorTextWeaker"

"category": "text-color",
"value": "rgb(168, 62, 0)",
"value": "rgb(195, 83, 35)",
"comment": "Color for dark warning text.",

@@ -1873,3 +1873,3 @@ "name": "colorTextWarningDark"

"category": "text-color",
"value": "rgb(112, 6, 0)",
"value": "rgb(173, 17, 17)",
"comment": "Dark shade of destructive link text to be used in interactions",

@@ -1879,16 +1879,2 @@ "name": "colorTextLinkDestructiveDark"

{
"type": "color",
"category": "text-color",
"value": "rgb(136, 148, 170)",
"comment": "Input placeholder text.",
"name": "colorTextPlaceholder"
},
{
"type": "color",
"category": "text-color",
"value": "rgb(8, 21, 44)",
"comment": "Text color for field labels.",
"name": "colorTextLabel"
},
{
"type": "z-index",

@@ -1895,0 +1881,0 @@ "category": "z-index",

182

dist/themes/sendgrid/tokens.json

@@ -5,68 +5,68 @@ {

"color-background-subaccount": "rgb(255, 241, 179)",
"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-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-brand-highlight-lightest": "rgba(242, 47, 70, 0.1)",
"color-background-inverse-light": "rgba(255, 255, 255, 0.2)",
"color-background-warning": "rgb(228, 98, 22)",
"color-background-error-lightest": "rgb(255, 233, 231)",
"color-background-warning": "rgb(244, 124, 34)",
"color-background-error-lightest": "rgb(254, 236, 236)",
"color-background-new": "rgb(231, 220, 250)",
"color-background-neutral-lightest": "rgb(245, 248, 255)",
"color-background-dark": "rgb(204, 210, 220)",
"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-error-dark": "rgb(148, 8, 0)",
"color-background-primary-lightest": "rgb(245, 248, 255)",
"color-background-neutral-lightest": "rgb(235, 244, 255)",
"color-background-dark": "rgb(225, 227, 234)",
"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-error-dark": "rgb(117, 12, 12)",
"color-background-primary-lightest": "rgb(235, 244, 255)",
"color-background-primary-darkest": "rgb(6, 3, 58)",
"color-background-brand": "rgb(0, 20, 137)",
"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-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(246, 177, 177)",
"color-background-primary-dark": "rgb(0, 20, 137)",
"color-background-primary-light": "rgb(153, 205, 255)",
"color-background-warning-lightest": "rgb(254, 245, 238)",
"color-background-body": "rgb(255, 255, 255)",
"color-background-darker": "rgb(204, 210, 220)",
"color-background": "rgb(243, 244, 246)",
"color-background-darker": "rgb(136, 145, 170)",
"color-background": "rgb(244, 244, 246)",
"color-background-brand-highlight": "rgb(242, 47, 70)",
"color-background-body-inverse": "rgb(18, 28, 45)",
"color-background-inverse": "rgb(8, 21, 44)",
"color-background-overlay": "rgba(8, 21, 44, 0.5)",
"color-background-darkest": "rgb(136, 148, 170)",
"color-border-destructive-lighter": "rgb(255, 185, 179)",
"color-border-primary-lighter": "rgb(219, 230, 255)",
"color-background-inverse": "rgba(255, 255, 255, 0.1)",
"color-background-overlay": "rgba(6, 3, 58, 0.4)",
"color-background-darkest": "rgb(75, 86, 113)",
"color-border-destructive-lighter": "rgb(252, 207, 207)",
"color-border-primary-lighter": "rgb(204, 228, 255)",
"color-border-inverse-lightest": "rgb(255, 255, 255)",
"color-border-primary-darker": "rgb(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-lighter": "rgb(204, 210, 220)",
"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-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-lighter": "rgb(225, 227, 234)",
"color-border-error-lightest": "rgb(254, 236, 236)",
"color-border-dark": "rgb(96, 107, 133)",
"color-border-warning-light": "rgb(255, 179, 122)",
"color-border-inverse-lighter": "rgba(255, 255, 255, 0.9)",
"color-border-neutral": "rgb(2, 99, 224)",
"color-border-success-lightest": "rgb(224, 255, 239)",
"color-border-error": "rgb(172, 30, 22)",
"color-border-error-dark": "rgb(148, 8, 0)",
"color-border-destructive-light": "rgb(255, 140, 133)",
"color-border-primary-light": "rgb(186, 204, 255)",
"color-border-success-lightest": "rgb(237, 253, 243)",
"color-border-error": "rgb(214, 31, 31)",
"color-border-error-dark": "rgb(117, 12, 12)",
"color-border-destructive-light": "rgb(245, 138, 138)",
"color-border-primary-light": "rgb(102, 179, 255)",
"color-border-success-light": "rgb(54, 213, 118)",
"color-border": "rgb(136, 148, 170)",
"color-border": "rgb(136, 145, 170)",
"color-border-inverse-darker": "rgba(255, 255, 255, 0.2)",
"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-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-inverse": "rgba(255, 255, 255, 0.5)",
"color-border-error-light": "rgb(232, 83, 74)",
"color-border-light": "rgb(182, 191, 206)",
"color-border-error-light": "rgb(245, 138, 138)",
"color-border-light": "rgb(202, 205, 216)",
"border-radius-0": "0",

@@ -85,4 +85,4 @@ "border-radius-10": "2px",

"shadow-border-destructive-darker": "0 0 0 1px #4a0b0b",
"shadow-border-primary-darker": "0 0 0 1px #001f75",
"shadow-border-light": "0 0 0 1px #ccd2dc",
"shadow-border-primary-darker": "0 0 0 1px #030b5d",
"shadow-border-light": "0 0 0 1px #cacdd8",
"shadow-border-destructive-lighter": "0 0 0 1px #fccfcf",

@@ -92,18 +92,18 @@ "shadow-border-primary-lighter": "0 0 0 1px #cce4ff",

"shadow-low": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
"shadow-focus": "0 0 0 4px rgba(51, 104, 250, 0.8)",
"shadow-focus": "0 0 0 4px rgba(2, 99, 224, 0.7)",
"shadow-focus-inverse": "0 0 0 4px rgba(255, 255, 255, 0.4)",
"shadow-border-primary": "0 0 0 1px #0263e0",
"shadow-border-destructive": "0 0 0 1px #d61f1f",
"shadow-border-error-dark": "0 0 0 1px #940800",
"shadow-border-error-dark": "0 0 0 1px #750c0c",
"shadow-high": "0 16px 24px 0 rgba(18, 28, 45, 0.2)",
"shadow-border-lighter": "0 0 0 1px #e1e3ea",
"shadow-border-error": "0 0 0 1px #ac1e16",
"shadow-border-error": "0 0 0 1px #d61f1f",
"shadow-border-inverse-darker": "0 0 0 1px rgba(255, 255, 255, 0.2)",
"shadow-border-primary-dark": "0 0 0 1px #002ca6",
"shadow-border-primary-dark": "0 0 0 1px #001489",
"shadow-border-primary-light": "0 0 0 1px #99cdff",
"shadow-border-destructive-light": "0 0 0 1px #f6b1b1",
"shadow-border": "0 0 0 1px #8894aa",
"shadow-border": "0 0 0 1px #8891aa",
"shadow-border-inverse": "0 0 0 1px rgba(255, 255, 255, 0.5)",
"shadow-border-error-light": "0 0 0 1px #eb5656",
"shadow-card": "0 2px 4px 0 rgba(8, 21, 44, 0.3)",
"shadow-card": "0 2px 8px 0 rgba(18, 28, 45, 0.1)",
"font-family-text": "'Colfax', Helvetica, Arial, sans-serif",

@@ -139,15 +139,15 @@ "font-family-code": "'Fira Mono', 'Courier New', Courier, monospace",

"line-height-10": "1rem",
"color-brand-highlight": "rgb(51, 104, 250)",
"color-brand-highlight": "rgb(242, 47, 70)",
"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)",
"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(0, 20, 137)",
"color-gray-30": "rgb(202, 205, 216)",
"color-gray-20": "rgb(225, 227, 234)",
"color-gray-10": "rgb(244, 244, 246)",
"size-square-40": "0.75rem",

@@ -241,30 +241,28 @@ "size-icon-80": "2.5rem",

"space-negative-110": "-2.5rem",
"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-link-darker": "rgb(3, 11, 93)",
"color-text-link-destructive": "rgb(214, 31, 31)",
"color-text-warning": "rgb(244, 124, 34)",
"color-text-new": "rgb(109, 46, 209)",
"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-inverse-weak": "rgb(174, 178, 193)",
"color-text-link-destructive-darker": "rgb(74, 11, 11)",
"color-text-success": "rgb(20, 176, 83)",
"color-text-weak": "rgb(96, 107, 133)",
"color-text-link-destructive-light": "rgb(246, 177, 177)",
"color-text-icon": "rgb(96, 107, 133)",
"color-text-link": "rgb(2, 99, 224)",
"color-text-error-dark": "rgb(173, 17, 17)",
"color-text-neutral": "rgb(0, 20, 137)",
"color-text-error": "rgb(172, 30, 22)",
"color-text-error": "rgb(214, 31, 31)",
"color-text-icon-inverse": "rgb(136, 145, 170)",
"color-text-link-dark": "rgb(0, 44, 166)",
"color-text-link-dark": "rgb(0, 20, 137)",
"color-text-brand-inverse": "rgb(255, 255, 255)",
"color-text": "rgb(8, 21, 44)",
"color-text": "rgb(18, 28, 45)",
"color-text-brand-highlight": "rgb(242, 47, 70)",
"color-text-inverse-weaker": "rgb(96, 107, 133)",
"color-text-link-light": "rgb(133, 165, 255)",
"color-text-link-light": "rgb(153, 205, 255)",
"color-text-inverse": "rgb(255, 255, 255)",
"color-text-error-light": "rgb(235, 86, 86)",
"color-text-weaker": "rgb(182, 191, 206)",
"color-text-warning-dark": "rgb(168, 62, 0)",
"color-text-link-destructive-dark": "rgb(112, 6, 0)",
"color-text-placeholder": "rgb(136, 148, 170)",
"color-text-label": "rgb(8, 21, 44)",
"color-text-weaker": "rgb(174, 178, 193)",
"color-text-warning-dark": "rgb(195, 83, 35)",
"color-text-link-destructive-dark": "rgb(173, 17, 17)",
"z-index-0": "0",

@@ -271,0 +269,0 @@ "z-index-90": "90",

2

package.json
{
"name": "@twilio-paste/design-tokens",
"version": "6.5.2",
"version": "6.6.0",
"description": "Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.",

@@ -5,0 +5,0 @@ "main": "dist/tokens.common.js",

dist/themes/sendgrid/sketch.sketchpalette

Sorry, the diff of this file is not supported yet

dist/themes/sendgrid/tokens.android.xml

Sorry, the diff of this file is not supported yet

dist/themes/sendgrid/tokens.custom-properties.css

Sorry, the diff of this file is not supported yet

dist/themes/sendgrid/tokens.default.scss

Sorry, the diff of this file is not supported yet

dist/themes/sendgrid/tokens.less

Sorry, the diff of this file is not supported yet

dist/themes/sendgrid/tokens.map.scss

Sorry, the diff of this file is not supported yet

dist/themes/sendgrid/tokens.raw.json

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc