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

Comparing version 4.0.0 to 4.1.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [4.1.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@4.0.0...@twilio-paste/design-tokens@4.1.0) (2020-01-17)
+
+
+### Features
+
+* **design-token:** add new status tokens ([462f471](https://github.com/twilio-labs/paste/commit/462f4713ab092268bd40b9bfd0d987043a7d7805))
+
+
+
+
+
 # [4.0.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@3.0.5...@twilio-paste/design-tokens@4.0.0) (2019-12-20)
@@ -92,54 +103,5 @@
 
-* chore(icons): update icon list for storybook
 
-* fix(spinner): use new icon
 
-* fix(storybook): use new icon for story
 
-* fix(story): button icons should be 24px
-
-* fix: adjust icon size tokens
-
-* feat: add iconSizes as separate key in theme-tokens
-
-* feat(icons): icons package to use tokens and update icons
-
-* fix(spinner): update to use tokens and new icons
-
-* fix(button): use correct spinner size
-
-* fix(icons): major icons package fixes
-
-- huge overhaul to build process
-- now uses rollup
-- builds into cjs and esm directories
-- made the package publishable to npm
-- moved svg folder out of src, now src only holds react stuff
-- updated scripts to use new paths and cleaned up the code
-- programmatically generates rollup config from the icon-list command
-
-* chore: add new icons dist folders to gitignore
-
-* fix: spinner and button icon usage
-
-* feat(icons): add rollup icon list cache file
-
-* fix(core-bundle): sort packages for consistent builds
-
-* chore: use `esm` instead of `es` in rollup for correctness
-
-* chore: yarn.lock
-
-* fix(spinner): lint error
-
-* chore(icons): move rollup icon list
-
-* chore(spinner): use types package in story
-
-* fix(spinner): swap out destructured props for explicit props
-
-
-
-
-
 # [2.5.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@2.4.0...@twilio-paste/design-tokens@2.5.0) (2019-10-29)
@@ -146,0 +108,0 @@

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

@@ -22,2 +22,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundInverse = "#4f5355";
+export declare const colorBackgroundNeutralLightest = "#f5f8ff";
 export declare const colorBackgroundPrimary = "#027ac5";
@@ -42,2 +43,3 @@ export declare const colorBackgroundPrimaryDark = "#003e82";
 export declare const colorBorderError = "#e22525";
+export declare const colorBorderErrorLight = "#de5858";
 export declare const colorBorderErrorLightest = "#ffe9e7";
@@ -48,2 +50,3 @@ export declare const colorBorderInput = "#888c8e";
 export declare const colorBorderLight = "#e4e7e9";
+export declare const colorBorderNeutralLight = "#c8cccf";
 export declare const colorBorderPrimary = "#027ac5";
@@ -57,2 +60,3 @@ export declare const colorBorderPrimaryDark = "#003e82";
 export declare const colorBorderWarning = "#e46216";
+export declare const colorBorderWarningLight = "#f28510";
 export declare const colorBorderWarningLightest = "#ffecd8";
@@ -76,3 +80,4 @@ export declare const colorBrand = "#233659";
 export declare const colorTextError = "#e22525";
-export declare const colorTextIcon = "#282a2b";
+export declare const colorTextErrorDark = "#921200";
+export declare const colorTextIcon = "#666a6d";
 export declare const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ export declare const colorTextInverseWeak = "#c8cccf";
 export declare const colorTextWarning = "#e46216";
+export declare const colorTextWarningDark = "#a83e00";
 export declare const colorTextWeak = "#666a6d";
@@ -187,2 +193,3 @@ export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
   colorBackgroundInverse: "#4f5355";
+  colorBackgroundNeutralLightest: "#f5f8ff";
   colorBackgroundPrimary: "#027ac5";
@@ -209,2 +216,3 @@ colorBackgroundPrimaryDark: "#003e82";
   colorBorderError: "#e22525";
+  colorBorderErrorLight: "#de5858";
   colorBorderErrorLightest: "#ffe9e7";
@@ -215,2 +223,3 @@ colorBorderInput: "#888c8e";
   colorBorderLight: "#e4e7e9";
+  colorBorderNeutralLight: "#c8cccf";
   colorBorderPrimary: "#027ac5";
@@ -224,2 +233,3 @@ colorBorderPrimaryDark: "#003e82";
   colorBorderWarning: "#e46216";
+  colorBorderWarningLight: "#f28510";
   colorBorderWarningLightest: "#ffecd8";
@@ -342,3 +352,4 @@ };
   colorTextError: "#e22525";
-  colorTextIcon: "#282a2b";
+  colorTextErrorDark: "#921200";
+  colorTextIcon: "#666a6d";
   colorTextInverse: "#ffffff";
@@ -358,2 +369,3 @@ colorTextInverseWeak: "#c8cccf";
   colorTextWarning: "#e46216";
+  colorTextWarningDark: "#a83e00";
   colorTextWeak: "#666a6d";
@@ -360,0 +372,0 @@ };

dist/themes/console/tokens.common.js

@@ -22,2 +22,3 @@ const borderRadius0 = "0";
 const colorBackgroundInverse = "#4f5355";
+const colorBackgroundNeutralLightest = "#f5f8ff";
 const colorBackgroundPrimary = "#027ac5";
@@ -42,2 +43,3 @@ const colorBackgroundPrimaryDark = "#003e82";
 const colorBorderError = "#e22525";
+const colorBorderErrorLight = "#de5858";
 const colorBorderErrorLightest = "#ffe9e7";
@@ -48,2 +50,3 @@ const colorBorderInput = "#888c8e";
 const colorBorderLight = "#e4e7e9";
+const colorBorderNeutralLight = "#c8cccf";
 const colorBorderPrimary = "#027ac5";
@@ -57,2 +60,3 @@ const colorBorderPrimaryDark = "#003e82";
 const colorBorderWarning = "#e46216";
+const colorBorderWarningLight = "#f28510";
 const colorBorderWarningLightest = "#ffecd8";
@@ -76,3 +80,4 @@ const colorBrand = "#233659";
 const colorTextError = "#e22525";
-const colorTextIcon = "#282a2b";
+const colorTextErrorDark = "#921200";
+const colorTextIcon = "#666a6d";
 const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ const colorTextInverseWeak = "#c8cccf";
 const colorTextWarning = "#e46216";
+const colorTextWarningDark = "#a83e00";
 const colorTextWeak = "#666a6d";
@@ -196,2 +202,3 @@ const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
 colorBackgroundInverse,
+colorBackgroundNeutralLightest,
 colorBackgroundPrimary,
@@ -216,2 +223,3 @@ colorBackgroundPrimaryDark,
 colorBorderError,
+colorBorderErrorLight,
 colorBorderErrorLightest,
@@ -222,2 +230,3 @@ colorBorderInput,
 colorBorderLight,
+colorBorderNeutralLight,
 colorBorderPrimary,
@@ -231,2 +240,3 @@ colorBorderPrimaryDark,
 colorBorderWarning,
+colorBorderWarningLight,
 colorBorderWarningLightest,
@@ -250,2 +260,3 @@ colorBrand,
 colorTextError,
+colorTextErrorDark,
 colorTextIcon,
@@ -266,2 +277,3 @@ colorTextInverse,
 colorTextWarning,
+colorTextWarningDark,
 colorTextWeak,
@@ -361,2 +373,3 @@ fontFamilyCode,
 colorBackgroundInverse,
+colorBackgroundNeutralLightest,
 colorBackgroundPrimary,
@@ -383,2 +396,3 @@ colorBackgroundPrimaryDark,
 colorBorderError,
+colorBorderErrorLight,
 colorBorderErrorLightest,
@@ -389,2 +403,3 @@ colorBorderInput,
 colorBorderLight,
+colorBorderNeutralLight,
 colorBorderPrimary,
@@ -398,2 +413,3 @@ colorBorderPrimaryDark,
 colorBorderWarning,
+colorBorderWarningLight,
 colorBorderWarningLightest,
@@ -516,2 +532,3 @@ },
 colorTextError,
+colorTextErrorDark,
 colorTextIcon,
@@ -532,2 +549,3 @@ colorTextInverse,
 colorTextWarning,
+colorTextWarningDark,
 colorTextWeak,
@@ -534,0 +552,0 @@ },

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

@@ -22,2 +22,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundInverse = "#4f5355";
+export declare const colorBackgroundNeutralLightest = "#f5f8ff";
 export declare const colorBackgroundPrimary = "#027ac5";
@@ -42,2 +43,3 @@ export declare const colorBackgroundPrimaryDark = "#003e82";
 export declare const colorBorderError = "#e22525";
+export declare const colorBorderErrorLight = "#de5858";
 export declare const colorBorderErrorLightest = "#ffe9e7";
@@ -48,2 +50,3 @@ export declare const colorBorderInput = "#888c8e";
 export declare const colorBorderLight = "#e4e7e9";
+export declare const colorBorderNeutralLight = "#c8cccf";
 export declare const colorBorderPrimary = "#027ac5";
@@ -57,2 +60,3 @@ export declare const colorBorderPrimaryDark = "#003e82";
 export declare const colorBorderWarning = "#e46216";
+export declare const colorBorderWarningLight = "#f28510";
 export declare const colorBorderWarningLightest = "#ffecd8";
@@ -76,3 +80,4 @@ export declare const colorBrand = "#233659";
 export declare const colorTextError = "#e22525";
-export declare const colorTextIcon = "#282a2b";
+export declare const colorTextErrorDark = "#921200";
+export declare const colorTextIcon = "#666a6d";
 export declare const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ export declare const colorTextInverseWeak = "#c8cccf";
 export declare const colorTextWarning = "#e46216";
+export declare const colorTextWarningDark = "#a83e00";
 export declare const colorTextWeak = "#666a6d";
@@ -187,2 +193,3 @@ export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
   colorBackgroundInverse: "#4f5355";
+  colorBackgroundNeutralLightest: "#f5f8ff";
   colorBackgroundPrimary: "#027ac5";
@@ -209,2 +216,3 @@ colorBackgroundPrimaryDark: "#003e82";
   colorBorderError: "#e22525";
+  colorBorderErrorLight: "#de5858";
   colorBorderErrorLightest: "#ffe9e7";
@@ -215,2 +223,3 @@ colorBorderInput: "#888c8e";
   colorBorderLight: "#e4e7e9";
+  colorBorderNeutralLight: "#c8cccf";
   colorBorderPrimary: "#027ac5";
@@ -224,2 +233,3 @@ colorBorderPrimaryDark: "#003e82";
   colorBorderWarning: "#e46216";
+  colorBorderWarningLight: "#f28510";
   colorBorderWarningLightest: "#ffecd8";
@@ -342,3 +352,4 @@ };
   colorTextError: "#e22525";
-  colorTextIcon: "#282a2b";
+  colorTextErrorDark: "#921200";
+  colorTextIcon: "#666a6d";
   colorTextInverse: "#ffffff";
@@ -358,2 +369,3 @@ colorTextInverseWeak: "#c8cccf";
   colorTextWarning: "#e46216";
+  colorTextWarningDark: "#a83e00";
   colorTextWeak: "#666a6d";
@@ -360,0 +372,0 @@ };

dist/themes/console/tokens.es6.js

@@ -22,2 +22,3 @@ export const borderRadius0 = "0";
 export const colorBackgroundInverse = "#4f5355";
+export const colorBackgroundNeutralLightest = "#f5f8ff";
 export const colorBackgroundPrimary = "#027ac5";
@@ -42,2 +43,3 @@ export const colorBackgroundPrimaryDark = "#003e82";
 export const colorBorderError = "#e22525";
+export const colorBorderErrorLight = "#de5858";
 export const colorBorderErrorLightest = "#ffe9e7";
@@ -48,2 +50,3 @@ export const colorBorderInput = "#888c8e";
 export const colorBorderLight = "#e4e7e9";
+export const colorBorderNeutralLight = "#c8cccf";
 export const colorBorderPrimary = "#027ac5";
@@ -57,2 +60,3 @@ export const colorBorderPrimaryDark = "#003e82";
 export const colorBorderWarning = "#e46216";
+export const colorBorderWarningLight = "#f28510";
 export const colorBorderWarningLightest = "#ffecd8";
@@ -76,3 +80,4 @@ export const colorBrand = "#233659";
 export const colorTextError = "#e22525";
-export const colorTextIcon = "#282a2b";
+export const colorTextErrorDark = "#921200";
+export const colorTextIcon = "#666a6d";
 export const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ export const colorTextInverseWeak = "#c8cccf";
 export const colorTextWarning = "#e46216";
+export const colorTextWarningDark = "#a83e00";
 export const colorTextWeak = "#666a6d";
@@ -187,2 +193,3 @@ export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
 colorBackgroundInverse,
+colorBackgroundNeutralLightest,
 colorBackgroundPrimary,
@@ -209,2 +216,3 @@ colorBackgroundPrimaryDark,
 colorBorderError,
+colorBorderErrorLight,
 colorBorderErrorLightest,
@@ -215,2 +223,3 @@ colorBorderInput,
 colorBorderLight,
+colorBorderNeutralLight,
 colorBorderPrimary,
@@ -224,2 +233,3 @@ colorBorderPrimaryDark,
 colorBorderWarning,
+colorBorderWarningLight,
 colorBorderWarningLightest,
@@ -342,2 +352,3 @@ };
 colorTextError,
+colorTextErrorDark,
 colorTextIcon,
@@ -358,2 +369,3 @@ colorTextInverse,
 colorTextWarning,
+colorTextWarningDark,
 colorTextWeak,
@@ -360,0 +372,0 @@ };

dist/themes/console/tokens.gatsby.json

 {
     "tokens": [{
     "categoryName": "background-colors",
-    "tokens": [{"type":"color","category":"background-color","value":"#f8f8f9","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","name":"color-background"},{"type":"color","category":"background-color","value":"#ffffff","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"#233659","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"#f22f46","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"#e22525","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"#921200","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"#600101","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"#ecb6b6","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"#f5dddd","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"#e22525","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"#4f5355","comment":"Inverse background color for any container","originalValue":"{!palette-gray-80}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"#027ac5","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"#003e82","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"#032c5e","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"#b3d3e9","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"#dceaf4","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"#f5f8ff","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"#f8f8f9","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-20}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"#00994a","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"#e0ffef","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"#e46216","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"#ffecd8","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
+    "tokens": [{"type":"color","category":"background-color","value":"#f8f8f9","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","name":"color-background"},{"type":"color","category":"background-color","value":"#ffffff","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"#233659","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"#f22f46","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"#e22525","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"#921200","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"#600101","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"#ecb6b6","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"#f5dddd","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"#e22525","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"#4f5355","comment":"Inverse background color for any container","originalValue":"{!palette-gray-80}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"#f5f8ff","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"#027ac5","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"#003e82","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"#032c5e","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"#b3d3e9","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"#dceaf4","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"#f5f8ff","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"#f8f8f9","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-20}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"#00994a","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"#e0ffef","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"#e46216","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"#ffecd8","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
   },
 {
     "categoryName": "border-colors",
-    "tokens": [{"type":"color","category":"border-color","value":"#c8cccf","comment":"Default border color","originalValue":"{!palette-gray-50}","name":"color-border"},{"type":"color","category":"border-color","value":"#888c8e","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"#e22525","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"#921200","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"#600101","comment":"Destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"#ecb6b6","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"#f5dddd","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"#e22525","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"#ffe9e7","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"#888c8e","comment":"Input border color","originalValue":"{!palette-gray-60}","name":"color-border-input"},{"type":"color","category":"border-color","value":"#027ac5","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"#027ac5","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"#e4e7e9","comment":"Light border color","originalValue":"{!palette-gray-40}","name":"color-border-light"},{"type":"color","category":"border-color","value":"#027ac5","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"#003e82","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"#032c5e","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"#b3d3e9","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"#dceaf4","comment":"Lighter primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"#00994a","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"#e0ffef","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"#e46216","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"#ffecd8","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
+    "tokens": [{"type":"color","category":"border-color","value":"#c8cccf","comment":"Default border color","originalValue":"{!palette-gray-50}","name":"color-border"},{"type":"color","category":"border-color","value":"#888c8e","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"#e22525","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"#921200","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"#600101","comment":"Destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"#ecb6b6","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"#f5dddd","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"#e22525","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"#de5858","comment":"Light error border color","originalValue":"{!palette-red-50}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"#ffe9e7","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"#888c8e","comment":"Input border color","originalValue":"{!palette-gray-60}","name":"color-border-input"},{"type":"color","category":"border-color","value":"#027ac5","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"#027ac5","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"#e4e7e9","comment":"Light border color","originalValue":"{!palette-gray-40}","name":"color-border-light"},{"type":"color","category":"border-color","value":"#c8cccf","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"#027ac5","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"#003e82","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"#032c5e","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"#b3d3e9","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"#dceaf4","comment":"Lighter primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"#00994a","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"#e0ffef","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"#e46216","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"#f28510","comment":"Light warning border color","originalValue":"{!palette-orange-50}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"#ffecd8","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
   },
@@ -52,3 +52,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"#282a2b","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"#f22f46","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"#e22525","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"#282a2b","comment":"Default icon color.","originalValue":"{!palette-gray-100}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"#c8cccf","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"#282a2b","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"#005ea6","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"#003e82","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"#032c5e","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"#e22525","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"#b20600","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"#921200","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"#ecb6b6","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"#b3d3e9","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"#666a6d","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"#00994a","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"#e46216","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"#666a6d","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"}]
+    "tokens": [{"type":"color","category":"text-color","value":"#282a2b","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"#f22f46","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"#e22525","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"#921200","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-80}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"#666a6d","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"#c8cccf","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"#282a2b","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"#005ea6","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"#003e82","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"#032c5e","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"#e22525","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"#b20600","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"#921200","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"#ecb6b6","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"#b3d3e9","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"#666a6d","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"#00994a","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"#e46216","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"#a83e00","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"#666a6d","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"}]
   },
@@ -55,0 +55,0 @@ {

dist/themes/console/tokens.ios.json

@@ -48,2 +48,9 @@ {
       "category": "background-color",
+      "value": "rgb(245, 248, 255)",
+      "comment": "Lightest neutral background color",
+      "name": "colorBackgroundNeutralLightest"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(226, 37, 37)",
@@ -252,2 +259,9 @@ "comment": "Background for destructive actions or highlights",
       "category": "border-color",
+      "value": "rgb(242, 133, 16)",
+      "comment": "Light warning border color",
+      "name": "colorBorderWarningLight"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(224, 255, 239)",
@@ -316,2 +330,16 @@ "comment": "Lightest success border color",
       "category": "border-color",
+      "value": "rgb(200, 204, 207)",
+      "comment": "Light neutral border color",
+      "name": "colorBorderNeutralLight"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
+      "value": "rgb(222, 88, 88)",
+      "comment": "Light error border color",
+      "name": "colorBorderErrorLight"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(2, 122, 197)",
@@ -994,3 +1022,3 @@ "comment": "Input focus border color",
       "category": "text-color",
-      "value": "rgb(40, 42, 43)",
+      "value": "rgb(102, 106, 109)",
       "comment": "Default icon color.",
@@ -1009,2 +1037,9 @@ "name": "colorTextIcon"
       "category": "text-color",
+      "value": "rgb(146, 18, 0)",
+      "comment": "Dark error text for inputs and error misc",
+      "name": "colorTextErrorDark"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(226, 37, 37)",
@@ -1066,2 +1101,9 @@ "comment": "Error text for inputs and error misc",
       "category": "text-color",
+      "value": "rgb(168, 62, 0)",
+      "comment": "Color for dark warning text.",
+      "name": "colorTextWarningDark"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(178, 6, 0)",
@@ -1068,0 +1110,0 @@ "comment": "Dark shade of destructive link text to be used in interactions",

dist/themes/console/tokens.json

@@ -8,2 +8,3 @@ {
   "color-background-error-lightest": "#ffe9e7",
+  "color-background-neutral-lightest": "#f5f8ff",
   "color-background-destructive": "#e22525",
@@ -38,2 +39,3 @@ "color-background-primary": "#027ac5",
   "color-border-dark": "#888c8e",
+  "color-border-warning-light": "#f28510",
   "color-border-success-lightest": "#e0ffef",
@@ -48,2 +50,4 @@ "color-border-error": "#e22525",
   "color-border-destructive-dark": "#921200",
+  "color-border-neutral-light": "#c8cccf",
+  "color-border-error-light": "#de5858",
   "color-border-input-focus": "#027ac5",
@@ -149,4 +153,5 @@ "color-border-light": "#e4e7e9",
   "color-text-link-destructive-light": "#ecb6b6",
-  "color-text-icon": "#282a2b",
+  "color-text-icon": "#666a6d",
   "color-text-link": "#005ea6",
+  "color-text-error-dark": "#921200",
   "color-text-error": "#e22525",
@@ -160,2 +165,3 @@ "color-text-link-dark": "#003e82",
   "color-text-placeholder": "#666a6d",
+  "color-text-warning-dark": "#a83e00",
   "color-text-link-destructive-dark": "#b20600",
@@ -162,0 +168,0 @@ "color-text-label": "#282a2b",

dist/themes/console/tokens.raw.json

@@ -623,2 +623,10 @@ {
     },
+    "color-background-neutral-lightest": {
+      "type": "color",
+      "category": "background-color",
+      "value": "#f5f8ff",
+      "comment": "Lightest neutral background color",
+      "originalValue": "{!palette-blue-10}",
+      "name": "color-background-neutral-lightest"
+    },
     "color-background-destructive": {
@@ -856,2 +864,10 @@ "type": "color",
     },
+    "color-border-warning-light": {
+      "type": "color",
+      "category": "border-color",
+      "value": "#f28510",
+      "comment": "Light warning border color",
+      "originalValue": "{!palette-orange-50}",
+      "name": "color-border-warning-light"
+    },
     "color-border-success-lightest": {
@@ -929,2 +945,18 @@ "type": "color",
     },
+    "color-border-neutral-light": {
+      "type": "color",
+      "category": "border-color",
+      "value": "#c8cccf",
+      "comment": "Light neutral border color",
+      "originalValue": "{!palette-gray-50}",
+      "name": "color-border-neutral-light"
+    },
+    "color-border-error-light": {
+      "type": "color",
+      "category": "border-color",
+      "value": "#de5858",
+      "comment": "Light error border color",
+      "originalValue": "{!palette-red-50}",
+      "name": "color-border-error-light"
+    },
     "color-border-input-focus": {
@@ -1710,5 +1742,5 @@ "type": "color",
       "category": "text-color",
-      "value": "#282a2b",
+      "value": "#666a6d",
       "comment": "Default icon color.",
-      "originalValue": "{!palette-gray-100}",
+      "originalValue": "{!palette-gray-70}",
       "name": "color-text-icon"
@@ -1724,2 +1756,10 @@ },
     },
+    "color-text-error-dark": {
+      "type": "color",
+      "category": "text-color",
+      "value": "#921200",
+      "comment": "Dark error text for inputs and error misc",
+      "originalValue": "{!palette-red-80}",
+      "name": "color-text-error-dark"
+    },
     "color-text-error": {
@@ -1789,2 +1829,10 @@ "type": "color",
     },
+    "color-text-warning-dark": {
+      "type": "color",
+      "category": "text-color",
+      "value": "#a83e00",
+      "comment": "Color for dark warning text.",
+      "originalValue": "{!palette-orange-70}",
+      "name": "color-text-warning-dark"
+    },
     "color-text-link-destructive-dark": {
@@ -1791,0 +1839,0 @@ "type": "color",

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

@@ -22,2 +22,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundInverse = "#08152c";
+export declare const colorBackgroundNeutralLightest = "#f5f8ff";
 export declare const colorBackgroundPrimary = "#3368fa";
@@ -42,2 +43,3 @@ export declare const colorBackgroundPrimaryDark = "#002ca6";
 export declare const colorBorderError = "#ac1e16";
+export declare const colorBorderErrorLight = "#e8534a";
 export declare const colorBorderErrorLightest = "#ffe9e7";
@@ -48,2 +50,3 @@ export declare const colorBorderInput = "#9ca7ba";
 export declare const colorBorderLight = "#ccd2dc";
+export declare const colorBorderNeutralLight = "#b6bfce";
 export declare const colorBorderPrimary = "#3368fa";
@@ -57,2 +60,3 @@ export declare const colorBorderPrimaryDark = "#002ca6";
 export declare const colorBorderWarning = "#e46216";
+export declare const colorBorderWarningLight = "#fa9c66";
 export declare const colorBorderWarningLightest = "#ffecd8";
@@ -76,3 +80,4 @@ export declare const colorBrand = "#08152c";
 export declare const colorTextError = "#ac1e16";
-export declare const colorTextIcon = "#08152c";
+export declare const colorTextErrorDark = "#940800";
+export declare const colorTextIcon = "#76859e";
 export declare const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ export declare const colorTextInverseWeak = "#9ca7ba";
 export declare const colorTextWarning = "#e46216";
+export declare const colorTextWarningDark = "#a83e00";
 export declare const colorTextWeak = "#475672";
@@ -187,2 +193,3 @@ export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
   colorBackgroundInverse: "#08152c";
+  colorBackgroundNeutralLightest: "#f5f8ff";
   colorBackgroundPrimary: "#3368fa";
@@ -209,2 +216,3 @@ colorBackgroundPrimaryDark: "#002ca6";
   colorBorderError: "#ac1e16";
+  colorBorderErrorLight: "#e8534a";
   colorBorderErrorLightest: "#ffe9e7";
@@ -215,2 +223,3 @@ colorBorderInput: "#9ca7ba";
   colorBorderLight: "#ccd2dc";
+  colorBorderNeutralLight: "#b6bfce";
   colorBorderPrimary: "#3368fa";
@@ -224,2 +233,3 @@ colorBorderPrimaryDark: "#002ca6";
   colorBorderWarning: "#e46216";
+  colorBorderWarningLight: "#fa9c66";
   colorBorderWarningLightest: "#ffecd8";
@@ -342,3 +352,4 @@ };
   colorTextError: "#ac1e16";
-  colorTextIcon: "#08152c";
+  colorTextErrorDark: "#940800";
+  colorTextIcon: "#76859e";
   colorTextInverse: "#ffffff";
@@ -358,2 +369,3 @@ colorTextInverseWeak: "#9ca7ba";
   colorTextWarning: "#e46216";
+  colorTextWarningDark: "#a83e00";
   colorTextWeak: "#475672";
@@ -360,0 +372,0 @@ };

dist/themes/sendgrid/tokens.common.js

@@ -22,2 +22,3 @@ const borderRadius0 = "0";
 const colorBackgroundInverse = "#08152c";
+const colorBackgroundNeutralLightest = "#f5f8ff";
 const colorBackgroundPrimary = "#3368fa";
@@ -42,2 +43,3 @@ const colorBackgroundPrimaryDark = "#002ca6";
 const colorBorderError = "#ac1e16";
+const colorBorderErrorLight = "#e8534a";
 const colorBorderErrorLightest = "#ffe9e7";
@@ -48,2 +50,3 @@ const colorBorderInput = "#9ca7ba";
 const colorBorderLight = "#ccd2dc";
+const colorBorderNeutralLight = "#b6bfce";
 const colorBorderPrimary = "#3368fa";
@@ -57,2 +60,3 @@ const colorBorderPrimaryDark = "#002ca6";
 const colorBorderWarning = "#e46216";
+const colorBorderWarningLight = "#fa9c66";
 const colorBorderWarningLightest = "#ffecd8";
@@ -76,3 +80,4 @@ const colorBrand = "#08152c";
 const colorTextError = "#ac1e16";
-const colorTextIcon = "#08152c";
+const colorTextErrorDark = "#940800";
+const colorTextIcon = "#76859e";
 const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ const colorTextInverseWeak = "#9ca7ba";
 const colorTextWarning = "#e46216";
+const colorTextWarningDark = "#a83e00";
 const colorTextWeak = "#475672";
@@ -196,2 +202,3 @@ const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
 colorBackgroundInverse,
+colorBackgroundNeutralLightest,
 colorBackgroundPrimary,
@@ -216,2 +223,3 @@ colorBackgroundPrimaryDark,
 colorBorderError,
+colorBorderErrorLight,
 colorBorderErrorLightest,
@@ -222,2 +230,3 @@ colorBorderInput,
 colorBorderLight,
+colorBorderNeutralLight,
 colorBorderPrimary,
@@ -231,2 +240,3 @@ colorBorderPrimaryDark,
 colorBorderWarning,
+colorBorderWarningLight,
 colorBorderWarningLightest,
@@ -250,2 +260,3 @@ colorBrand,
 colorTextError,
+colorTextErrorDark,
 colorTextIcon,
@@ -266,2 +277,3 @@ colorTextInverse,
 colorTextWarning,
+colorTextWarningDark,
 colorTextWeak,
@@ -361,2 +373,3 @@ fontFamilyCode,
 colorBackgroundInverse,
+colorBackgroundNeutralLightest,
 colorBackgroundPrimary,
@@ -383,2 +396,3 @@ colorBackgroundPrimaryDark,
 colorBorderError,
+colorBorderErrorLight,
 colorBorderErrorLightest,
@@ -389,2 +403,3 @@ colorBorderInput,
 colorBorderLight,
+colorBorderNeutralLight,
 colorBorderPrimary,
@@ -398,2 +413,3 @@ colorBorderPrimaryDark,
 colorBorderWarning,
+colorBorderWarningLight,
 colorBorderWarningLightest,
@@ -516,2 +532,3 @@ },
 colorTextError,
+colorTextErrorDark,
 colorTextIcon,
@@ -532,2 +549,3 @@ colorTextInverse,
 colorTextWarning,
+colorTextWarningDark,
 colorTextWeak,
@@ -534,0 +552,0 @@ },

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

@@ -22,2 +22,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundInverse = "#08152c";
+export declare const colorBackgroundNeutralLightest = "#f5f8ff";
 export declare const colorBackgroundPrimary = "#3368fa";
@@ -42,2 +43,3 @@ export declare const colorBackgroundPrimaryDark = "#002ca6";
 export declare const colorBorderError = "#ac1e16";
+export declare const colorBorderErrorLight = "#e8534a";
 export declare const colorBorderErrorLightest = "#ffe9e7";
@@ -48,2 +50,3 @@ export declare const colorBorderInput = "#9ca7ba";
 export declare const colorBorderLight = "#ccd2dc";
+export declare const colorBorderNeutralLight = "#b6bfce";
 export declare const colorBorderPrimary = "#3368fa";
@@ -57,2 +60,3 @@ export declare const colorBorderPrimaryDark = "#002ca6";
 export declare const colorBorderWarning = "#e46216";
+export declare const colorBorderWarningLight = "#fa9c66";
 export declare const colorBorderWarningLightest = "#ffecd8";
@@ -76,3 +80,4 @@ export declare const colorBrand = "#08152c";
 export declare const colorTextError = "#ac1e16";
-export declare const colorTextIcon = "#08152c";
+export declare const colorTextErrorDark = "#940800";
+export declare const colorTextIcon = "#76859e";
 export declare const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ export declare const colorTextInverseWeak = "#9ca7ba";
 export declare const colorTextWarning = "#e46216";
+export declare const colorTextWarningDark = "#a83e00";
 export declare const colorTextWeak = "#475672";
@@ -187,2 +193,3 @@ export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
   colorBackgroundInverse: "#08152c";
+  colorBackgroundNeutralLightest: "#f5f8ff";
   colorBackgroundPrimary: "#3368fa";
@@ -209,2 +216,3 @@ colorBackgroundPrimaryDark: "#002ca6";
   colorBorderError: "#ac1e16";
+  colorBorderErrorLight: "#e8534a";
   colorBorderErrorLightest: "#ffe9e7";
@@ -215,2 +223,3 @@ colorBorderInput: "#9ca7ba";
   colorBorderLight: "#ccd2dc";
+  colorBorderNeutralLight: "#b6bfce";
   colorBorderPrimary: "#3368fa";
@@ -224,2 +233,3 @@ colorBorderPrimaryDark: "#002ca6";
   colorBorderWarning: "#e46216";
+  colorBorderWarningLight: "#fa9c66";
   colorBorderWarningLightest: "#ffecd8";
@@ -342,3 +352,4 @@ };
   colorTextError: "#ac1e16";
-  colorTextIcon: "#08152c";
+  colorTextErrorDark: "#940800";
+  colorTextIcon: "#76859e";
   colorTextInverse: "#ffffff";
@@ -358,2 +369,3 @@ colorTextInverseWeak: "#9ca7ba";
   colorTextWarning: "#e46216";
+  colorTextWarningDark: "#a83e00";
   colorTextWeak: "#475672";
@@ -360,0 +372,0 @@ };

dist/themes/sendgrid/tokens.es6.js

@@ -22,2 +22,3 @@ export const borderRadius0 = "0";
 export const colorBackgroundInverse = "#08152c";
+export const colorBackgroundNeutralLightest = "#f5f8ff";
 export const colorBackgroundPrimary = "#3368fa";
@@ -42,2 +43,3 @@ export const colorBackgroundPrimaryDark = "#002ca6";
 export const colorBorderError = "#ac1e16";
+export const colorBorderErrorLight = "#e8534a";
 export const colorBorderErrorLightest = "#ffe9e7";
@@ -48,2 +50,3 @@ export const colorBorderInput = "#9ca7ba";
 export const colorBorderLight = "#ccd2dc";
+export const colorBorderNeutralLight = "#b6bfce";
 export const colorBorderPrimary = "#3368fa";
@@ -57,2 +60,3 @@ export const colorBorderPrimaryDark = "#002ca6";
 export const colorBorderWarning = "#e46216";
+export const colorBorderWarningLight = "#fa9c66";
 export const colorBorderWarningLightest = "#ffecd8";
@@ -76,3 +80,4 @@ export const colorBrand = "#08152c";
 export const colorTextError = "#ac1e16";
-export const colorTextIcon = "#08152c";
+export const colorTextErrorDark = "#940800";
+export const colorTextIcon = "#76859e";
 export const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ export const colorTextInverseWeak = "#9ca7ba";
 export const colorTextWarning = "#e46216";
+export const colorTextWarningDark = "#a83e00";
 export const colorTextWeak = "#475672";
@@ -187,2 +193,3 @@ export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
 colorBackgroundInverse,
+colorBackgroundNeutralLightest,
 colorBackgroundPrimary,
@@ -209,2 +216,3 @@ colorBackgroundPrimaryDark,
 colorBorderError,
+colorBorderErrorLight,
 colorBorderErrorLightest,
@@ -215,2 +223,3 @@ colorBorderInput,
 colorBorderLight,
+colorBorderNeutralLight,
 colorBorderPrimary,
@@ -224,2 +233,3 @@ colorBorderPrimaryDark,
 colorBorderWarning,
+colorBorderWarningLight,
 colorBorderWarningLightest,
@@ -342,2 +352,3 @@ };
 colorTextError,
+colorTextErrorDark,
 colorTextIcon,
@@ -358,2 +369,3 @@ colorTextInverse,
 colorTextWarning,
+colorTextWarningDark,
 colorTextWeak,
@@ -360,0 +372,0 @@ };

dist/themes/sendgrid/tokens.gatsby.json

 {
     "tokens": [{
     "categoryName": "background-colors",
-    "tokens": [{"type":"color","category":"background-color","value":"#f3f4f6","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","name":"color-background"},{"type":"color","category":"background-color","value":"#ffffff","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"#233659","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"#f22f46","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"#ce241a","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-50}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"#700600","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"#470500","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"#e8534a","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"#ff8c85","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"#ac1e16","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"#08152c","comment":"Inverse background color for any container","originalValue":"{!palette-gray-100}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"#3368fa","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-50}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"#002ca6","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-70}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"#001f75","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"#85a5ff","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"#baccff","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"#f5f8ff","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"#f9fafb","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"#00994a","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"#e0ffef","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"#e46216","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"#ffecd8","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
+    "tokens": [{"type":"color","category":"background-color","value":"#f3f4f6","comment":"Default background color for any container","originalValue":"{!palette-gray-20}","name":"color-background"},{"type":"color","category":"background-color","value":"#ffffff","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"#233659","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"#f22f46","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"#ce241a","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-50}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"#700600","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"#470500","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"#e8534a","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"#ff8c85","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-30}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"#ac1e16","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"#ffe9e7","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"#08152c","comment":"Inverse background color for any container","originalValue":"{!palette-gray-100}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"#f5f8ff","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"#3368fa","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-50}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"#002ca6","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-70}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"#001f75","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"#85a5ff","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"#baccff","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-30}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"#f5f8ff","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"#f9fafb","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"#00994a","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"#e0ffef","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"#e46216","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"#ffecd8","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
   },
 {
     "categoryName": "border-colors",
-    "tokens": [{"type":"color","category":"border-color","value":"#b6bfce","comment":"Default border color","originalValue":"{!palette-gray-50}","name":"color-border"},{"type":"color","category":"border-color","value":"#9ca7ba","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"#ce241a","comment":"Destructive border color","originalValue":"{!palette-red-50}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"#700600","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"#470500","comment":"Destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"#e8534a","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"#ff8c85","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"#ac1e16","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"#ffe9e7","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"#9ca7ba","comment":"Input border color","originalValue":"{!palette-gray-60}","name":"color-border-input"},{"type":"color","category":"border-color","value":"#003adb","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"#003adb","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"#ccd2dc","comment":"Light border color","originalValue":"{!palette-gray-40}","name":"color-border-light"},{"type":"color","category":"border-color","value":"#3368fa","comment":"Primary border color","originalValue":"{!palette-blue-50}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"#002ca6","comment":"Dark primary border color","originalValue":"{!palette-blue-70}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"#001f75","comment":"Darker primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"#85a5ff","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"#baccff","comment":"Lighter primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"#00994a","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"#e0ffef","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"#e46216","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"#ffecd8","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
+    "tokens": [{"type":"color","category":"border-color","value":"#b6bfce","comment":"Default border color","originalValue":"{!palette-gray-50}","name":"color-border"},{"type":"color","category":"border-color","value":"#9ca7ba","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"#ce241a","comment":"Destructive border color","originalValue":"{!palette-red-50}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"#700600","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"#470500","comment":"Destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"#e8534a","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"#ff8c85","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"#ac1e16","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"#e8534a","comment":"Light error border color","originalValue":"{!palette-red-40}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"#ffe9e7","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"#9ca7ba","comment":"Input border color","originalValue":"{!palette-gray-60}","name":"color-border-input"},{"type":"color","category":"border-color","value":"#003adb","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"#003adb","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"#ccd2dc","comment":"Light border color","originalValue":"{!palette-gray-40}","name":"color-border-light"},{"type":"color","category":"border-color","value":"#b6bfce","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"#3368fa","comment":"Primary border color","originalValue":"{!palette-blue-50}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"#002ca6","comment":"Dark primary border color","originalValue":"{!palette-blue-70}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"#001f75","comment":"Darker primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"#85a5ff","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"#baccff","comment":"Lighter primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"#00994a","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"#e0ffef","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"#e46216","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"#fa9c66","comment":"Light warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"#ffecd8","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
   },
@@ -52,3 +52,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"#08152c","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"#f22f46","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"#ac1e16","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"#08152c","comment":"Default icon color.","originalValue":"{!palette-gray-100}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"#9ca7ba","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"#08152c","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"#003adb","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"#002ca6","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-70}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"#001f75","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"#ce241a","comment":"Destructive link text","originalValue":"{!palette-red-50}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"#700600","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"#470500","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-90}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"#e8534a","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"#85a5ff","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"#76859e","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"#00994a","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"#e46216","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"#475672","comment":"Weak body text for visual hierarchy. Must pass AA color contrast with color-background.","originalValue":"{!palette-gray-80}","name":"color-text-weak"}]
+    "tokens": [{"type":"color","category":"text-color","value":"#08152c","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"#f22f46","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"#ac1e16","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"#940800","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"#76859e","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"#9ca7ba","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"#08152c","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"#003adb","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"#002ca6","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-70}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"#001f75","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"#ce241a","comment":"Destructive link text","originalValue":"{!palette-red-50}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"#700600","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"#470500","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-90}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"#e8534a","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"#85a5ff","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"#76859e","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"#00994a","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"#e46216","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"#a83e00","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"#475672","comment":"Weak body text for visual hierarchy. Must pass AA color contrast with color-background.","originalValue":"{!palette-gray-80}","name":"color-text-weak"}]
   },
@@ -55,0 +55,0 @@ {

dist/themes/sendgrid/tokens.ios.json

@@ -48,2 +48,9 @@ {
       "category": "background-color",
+      "value": "rgb(245, 248, 255)",
+      "comment": "Lightest neutral background color",
+      "name": "colorBackgroundNeutralLightest"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(206, 36, 26)",
@@ -252,2 +259,9 @@ "comment": "Background for destructive actions or highlights",
       "category": "border-color",
+      "value": "rgb(250, 156, 102)",
+      "comment": "Light warning border color",
+      "name": "colorBorderWarningLight"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(224, 255, 239)",
@@ -316,2 +330,16 @@ "comment": "Lightest success border color",
       "category": "border-color",
+      "value": "rgb(182, 191, 206)",
+      "comment": "Light neutral border color",
+      "name": "colorBorderNeutralLight"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
+      "value": "rgb(232, 83, 74)",
+      "comment": "Light error border color",
+      "name": "colorBorderErrorLight"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(0, 58, 219)",
@@ -994,3 +1022,3 @@ "comment": "Input focus border color",
       "category": "text-color",
-      "value": "rgb(8, 21, 44)",
+      "value": "rgb(118, 133, 158)",
       "comment": "Default icon color.",
@@ -1009,2 +1037,9 @@ "name": "colorTextIcon"
       "category": "text-color",
+      "value": "rgb(148, 8, 0)",
+      "comment": "Dark error text for inputs and error misc",
+      "name": "colorTextErrorDark"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(172, 30, 22)",
@@ -1066,2 +1101,9 @@ "comment": "Error text for inputs and error misc",
       "category": "text-color",
+      "value": "rgb(168, 62, 0)",
+      "comment": "Color for dark warning text.",
+      "name": "colorTextWarningDark"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(112, 6, 0)",
@@ -1068,0 +1110,0 @@ "comment": "Dark shade of destructive link text to be used in interactions",

dist/themes/sendgrid/tokens.json

@@ -8,2 +8,3 @@ {
   "color-background-error-lightest": "#ffe9e7",
+  "color-background-neutral-lightest": "#f5f8ff",
   "color-background-destructive": "#ce241a",
@@ -38,2 +39,3 @@ "color-background-primary": "#3368fa",
   "color-border-dark": "#9ca7ba",
+  "color-border-warning-light": "#fa9c66",
   "color-border-success-lightest": "#e0ffef",
@@ -48,2 +50,4 @@ "color-border-error": "#ac1e16",
   "color-border-destructive-dark": "#700600",
+  "color-border-neutral-light": "#b6bfce",
+  "color-border-error-light": "#e8534a",
   "color-border-input-focus": "#003adb",
@@ -149,4 +153,5 @@ "color-border-light": "#ccd2dc",
   "color-text-link-destructive-light": "#e8534a",
-  "color-text-icon": "#08152c",
+  "color-text-icon": "#76859e",
   "color-text-link": "#003adb",
+  "color-text-error-dark": "#940800",
   "color-text-error": "#ac1e16",
@@ -160,2 +165,3 @@ "color-text-link-dark": "#002ca6",
   "color-text-placeholder": "#76859e",
+  "color-text-warning-dark": "#a83e00",
   "color-text-link-destructive-dark": "#700600",
@@ -162,0 +168,0 @@ "color-text-label": "#08152c",

dist/themes/sendgrid/tokens.raw.json

@@ -809,2 +809,10 @@ {
     },
+    "color-background-neutral-lightest": {
+      "type": "color",
+      "category": "background-color",
+      "value": "#f5f8ff",
+      "comment": "Lightest neutral background color",
+      "originalValue": "{!palette-blue-10}",
+      "name": "color-background-neutral-lightest"
+    },
     "color-background-destructive": {
@@ -1042,2 +1050,10 @@ "type": "color",
     },
+    "color-border-warning-light": {
+      "type": "color",
+      "category": "border-color",
+      "value": "#fa9c66",
+      "comment": "Light warning border color",
+      "originalValue": "{!palette-orange-40}",
+      "name": "color-border-warning-light"
+    },
     "color-border-success-lightest": {
@@ -1115,2 +1131,18 @@ "type": "color",
     },
+    "color-border-neutral-light": {
+      "type": "color",
+      "category": "border-color",
+      "value": "#b6bfce",
+      "comment": "Light neutral border color",
+      "originalValue": "{!palette-gray-50}",
+      "name": "color-border-neutral-light"
+    },
+    "color-border-error-light": {
+      "type": "color",
+      "category": "border-color",
+      "value": "#e8534a",
+      "comment": "Light error border color",
+      "originalValue": "{!palette-red-40}",
+      "name": "color-border-error-light"
+    },
     "color-border-input-focus": {
@@ -1896,5 +1928,5 @@ "type": "color",
       "category": "text-color",
-      "value": "#08152c",
+      "value": "#76859e",
       "comment": "Default icon color.",
-      "originalValue": "{!palette-gray-100}",
+      "originalValue": "{!palette-gray-70}",
       "name": "color-text-icon"
@@ -1910,2 +1942,10 @@ },
     },
+    "color-text-error-dark": {
+      "type": "color",
+      "category": "text-color",
+      "value": "#940800",
+      "comment": "Dark error text for inputs and error misc",
+      "originalValue": "{!palette-red-70}",
+      "name": "color-text-error-dark"
+    },
     "color-text-error": {
@@ -1975,2 +2015,10 @@ "type": "color",
     },
+    "color-text-warning-dark": {
+      "type": "color",
+      "category": "text-color",
+      "value": "#a83e00",
+      "comment": "Color for dark warning text.",
+      "originalValue": "{!palette-orange-70}",
+      "name": "color-text-warning-dark"
+    },
     "color-text-link-destructive-dark": {
@@ -1977,0 +2025,0 @@ "type": "color",

dist/tokens.common.d.ts

@@ -22,2 +22,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundInverse = "#1f304c";
+export declare const colorBackgroundNeutralLightest = "#ebf4ff";
 export declare const colorBackgroundPrimary = "#0263e0";
@@ -42,2 +43,3 @@ export declare const colorBackgroundPrimaryDark = "#001489";
 export declare const colorBorderError = "#d61f1f";
+export declare const colorBorderErrorLight = "#f58a8a";
 export declare const colorBorderErrorLightest = "#feecec";
@@ -48,2 +50,3 @@ export declare const colorBorderInput = "#606b85";
 export declare const colorBorderLight = "#e1e3ea";
+export declare const colorBorderNeutralLight = "#8891aa";
 export declare const colorBorderPrimary = "#0263e0";
@@ -57,2 +60,3 @@ export declare const colorBorderPrimaryDark = "#001489";
 export declare const colorBorderWarning = "#f47c22";
+export declare const colorBorderWarningLight = "#ffb37a";
 export declare const colorBorderWarningLightest = "#fef5ee";
@@ -76,3 +80,4 @@ export declare const colorBrand = "#233659";
 export declare const colorTextError = "#d61f1f";
-export declare const colorTextIcon = "#121c2d";
+export declare const colorTextErrorDark = "#ad1111";
+export declare const colorTextIcon = "#4b5671";
 export declare const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ export declare const colorTextInverseWeak = "#8891aa";
 export declare const colorTextWarning = "#f47c22";
+export declare const colorTextWarningDark = "#c35323";
 export declare const colorTextWeak = "#4b5671";
@@ -187,2 +193,3 @@ export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
   colorBackgroundInverse: "#1f304c";
+  colorBackgroundNeutralLightest: "#ebf4ff";
   colorBackgroundPrimary: "#0263e0";
@@ -209,2 +216,3 @@ colorBackgroundPrimaryDark: "#001489";
   colorBorderError: "#d61f1f";
+  colorBorderErrorLight: "#f58a8a";
   colorBorderErrorLightest: "#feecec";
@@ -215,2 +223,3 @@ colorBorderInput: "#606b85";
   colorBorderLight: "#e1e3ea";
+  colorBorderNeutralLight: "#8891aa";
   colorBorderPrimary: "#0263e0";
@@ -224,2 +233,3 @@ colorBorderPrimaryDark: "#001489";
   colorBorderWarning: "#f47c22";
+  colorBorderWarningLight: "#ffb37a";
   colorBorderWarningLightest: "#fef5ee";
@@ -342,3 +352,4 @@ };
   colorTextError: "#d61f1f";
-  colorTextIcon: "#121c2d";
+  colorTextErrorDark: "#ad1111";
+  colorTextIcon: "#4b5671";
   colorTextInverse: "#ffffff";
@@ -358,2 +369,3 @@ colorTextInverseWeak: "#8891aa";
   colorTextWarning: "#f47c22";
+  colorTextWarningDark: "#c35323";
   colorTextWeak: "#4b5671";
@@ -360,0 +372,0 @@ };

dist/tokens.common.js

@@ -22,2 +22,3 @@ const borderRadius0 = "0";
 const colorBackgroundInverse = "#1f304c";
+const colorBackgroundNeutralLightest = "#ebf4ff";
 const colorBackgroundPrimary = "#0263e0";
@@ -42,2 +43,3 @@ const colorBackgroundPrimaryDark = "#001489";
 const colorBorderError = "#d61f1f";
+const colorBorderErrorLight = "#f58a8a";
 const colorBorderErrorLightest = "#feecec";
@@ -48,2 +50,3 @@ const colorBorderInput = "#606b85";
 const colorBorderLight = "#e1e3ea";
+const colorBorderNeutralLight = "#8891aa";
 const colorBorderPrimary = "#0263e0";
@@ -57,2 +60,3 @@ const colorBorderPrimaryDark = "#001489";
 const colorBorderWarning = "#f47c22";
+const colorBorderWarningLight = "#ffb37a";
 const colorBorderWarningLightest = "#fef5ee";
@@ -76,3 +80,4 @@ const colorBrand = "#233659";
 const colorTextError = "#d61f1f";
-const colorTextIcon = "#121c2d";
+const colorTextErrorDark = "#ad1111";
+const colorTextIcon = "#4b5671";
 const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ const colorTextInverseWeak = "#8891aa";
 const colorTextWarning = "#f47c22";
+const colorTextWarningDark = "#c35323";
 const colorTextWeak = "#4b5671";
@@ -196,2 +202,3 @@ const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
 colorBackgroundInverse,
+colorBackgroundNeutralLightest,
 colorBackgroundPrimary,
@@ -216,2 +223,3 @@ colorBackgroundPrimaryDark,
 colorBorderError,
+colorBorderErrorLight,
 colorBorderErrorLightest,
@@ -222,2 +230,3 @@ colorBorderInput,
 colorBorderLight,
+colorBorderNeutralLight,
 colorBorderPrimary,
@@ -231,2 +240,3 @@ colorBorderPrimaryDark,
 colorBorderWarning,
+colorBorderWarningLight,
 colorBorderWarningLightest,
@@ -250,2 +260,3 @@ colorBrand,
 colorTextError,
+colorTextErrorDark,
 colorTextIcon,
@@ -266,2 +277,3 @@ colorTextInverse,
 colorTextWarning,
+colorTextWarningDark,
 colorTextWeak,
@@ -361,2 +373,3 @@ fontFamilyCode,
 colorBackgroundInverse,
+colorBackgroundNeutralLightest,
 colorBackgroundPrimary,
@@ -383,2 +396,3 @@ colorBackgroundPrimaryDark,
 colorBorderError,
+colorBorderErrorLight,
 colorBorderErrorLightest,
@@ -389,2 +403,3 @@ colorBorderInput,
 colorBorderLight,
+colorBorderNeutralLight,
 colorBorderPrimary,
@@ -398,2 +413,3 @@ colorBorderPrimaryDark,
 colorBorderWarning,
+colorBorderWarningLight,
 colorBorderWarningLightest,
@@ -516,2 +532,3 @@ },
 colorTextError,
+colorTextErrorDark,
 colorTextIcon,
@@ -532,2 +549,3 @@ colorTextInverse,
 colorTextWarning,
+colorTextWarningDark,
 colorTextWeak,
@@ -534,0 +552,0 @@ },

dist/tokens.es6.d.ts

@@ -22,2 +22,3 @@ export declare const borderRadius0 = "0";
 export declare const colorBackgroundInverse = "#1f304c";
+export declare const colorBackgroundNeutralLightest = "#ebf4ff";
 export declare const colorBackgroundPrimary = "#0263e0";
@@ -42,2 +43,3 @@ export declare const colorBackgroundPrimaryDark = "#001489";
 export declare const colorBorderError = "#d61f1f";
+export declare const colorBorderErrorLight = "#f58a8a";
 export declare const colorBorderErrorLightest = "#feecec";
@@ -48,2 +50,3 @@ export declare const colorBorderInput = "#606b85";
 export declare const colorBorderLight = "#e1e3ea";
+export declare const colorBorderNeutralLight = "#8891aa";
 export declare const colorBorderPrimary = "#0263e0";
@@ -57,2 +60,3 @@ export declare const colorBorderPrimaryDark = "#001489";
 export declare const colorBorderWarning = "#f47c22";
+export declare const colorBorderWarningLight = "#ffb37a";
 export declare const colorBorderWarningLightest = "#fef5ee";
@@ -76,3 +80,4 @@ export declare const colorBrand = "#233659";
 export declare const colorTextError = "#d61f1f";
-export declare const colorTextIcon = "#121c2d";
+export declare const colorTextErrorDark = "#ad1111";
+export declare const colorTextIcon = "#4b5671";
 export declare const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ export declare const colorTextInverseWeak = "#8891aa";
 export declare const colorTextWarning = "#f47c22";
+export declare const colorTextWarningDark = "#c35323";
 export declare const colorTextWeak = "#4b5671";
@@ -187,2 +193,3 @@ export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
   colorBackgroundInverse: "#1f304c";
+  colorBackgroundNeutralLightest: "#ebf4ff";
   colorBackgroundPrimary: "#0263e0";
@@ -209,2 +216,3 @@ colorBackgroundPrimaryDark: "#001489";
   colorBorderError: "#d61f1f";
+  colorBorderErrorLight: "#f58a8a";
   colorBorderErrorLightest: "#feecec";
@@ -215,2 +223,3 @@ colorBorderInput: "#606b85";
   colorBorderLight: "#e1e3ea";
+  colorBorderNeutralLight: "#8891aa";
   colorBorderPrimary: "#0263e0";
@@ -224,2 +233,3 @@ colorBorderPrimaryDark: "#001489";
   colorBorderWarning: "#f47c22";
+  colorBorderWarningLight: "#ffb37a";
   colorBorderWarningLightest: "#fef5ee";
@@ -342,3 +352,4 @@ };
   colorTextError: "#d61f1f";
-  colorTextIcon: "#121c2d";
+  colorTextErrorDark: "#ad1111";
+  colorTextIcon: "#4b5671";
   colorTextInverse: "#ffffff";
@@ -358,2 +369,3 @@ colorTextInverseWeak: "#8891aa";
   colorTextWarning: "#f47c22";
+  colorTextWarningDark: "#c35323";
   colorTextWeak: "#4b5671";
@@ -360,0 +372,0 @@ };

dist/tokens.es6.js

@@ -22,2 +22,3 @@ export const borderRadius0 = "0";
 export const colorBackgroundInverse = "#1f304c";
+export const colorBackgroundNeutralLightest = "#ebf4ff";
 export const colorBackgroundPrimary = "#0263e0";
@@ -42,2 +43,3 @@ export const colorBackgroundPrimaryDark = "#001489";
 export const colorBorderError = "#d61f1f";
+export const colorBorderErrorLight = "#f58a8a";
 export const colorBorderErrorLightest = "#feecec";
@@ -48,2 +50,3 @@ export const colorBorderInput = "#606b85";
 export const colorBorderLight = "#e1e3ea";
+export const colorBorderNeutralLight = "#8891aa";
 export const colorBorderPrimary = "#0263e0";
@@ -57,2 +60,3 @@ export const colorBorderPrimaryDark = "#001489";
 export const colorBorderWarning = "#f47c22";
+export const colorBorderWarningLight = "#ffb37a";
 export const colorBorderWarningLightest = "#fef5ee";
@@ -76,3 +80,4 @@ export const colorBrand = "#233659";
 export const colorTextError = "#d61f1f";
-export const colorTextIcon = "#121c2d";
+export const colorTextErrorDark = "#ad1111";
+export const colorTextIcon = "#4b5671";
 export const colorTextInverse = "#ffffff";
@@ -92,2 +97,3 @@ export const colorTextInverseWeak = "#8891aa";
 export const colorTextWarning = "#f47c22";
+export const colorTextWarningDark = "#c35323";
 export const colorTextWeak = "#4b5671";
@@ -187,2 +193,3 @@ export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
 colorBackgroundInverse,
+colorBackgroundNeutralLightest,
 colorBackgroundPrimary,
@@ -209,2 +216,3 @@ colorBackgroundPrimaryDark,
 colorBorderError,
+colorBorderErrorLight,
 colorBorderErrorLightest,
@@ -215,2 +223,3 @@ colorBorderInput,
 colorBorderLight,
+colorBorderNeutralLight,
 colorBorderPrimary,
@@ -224,2 +233,3 @@ colorBorderPrimaryDark,
 colorBorderWarning,
+colorBorderWarningLight,
 colorBorderWarningLightest,
@@ -342,2 +352,3 @@ };
 colorTextError,
+colorTextErrorDark,
 colorTextIcon,
@@ -358,2 +369,3 @@ colorTextInverse,
 colorTextWarning,
+colorTextWarningDark,
 colorTextWeak,
@@ -360,0 +372,0 @@ };

dist/tokens.gatsby.json

 {
     "tokens": [{
     "categoryName": "background-colors",
-    "tokens": [{"type":"color","category":"background-color","value":"#f4f4f6","comment":"Default background color for any container","originalValue":"{!palette-gray-10}","name":"color-background"},{"type":"color","category":"background-color","value":"#ffffff","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"#233659","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"#f22f46","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"#d61f1f","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"#750c0c","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"#4a0b0b","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"#f58a8a","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"#fccfcf","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-20}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"#feecec","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"#d61f1f","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"#feecec","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"#1f304c","comment":"Inverse background color for any container","originalValue":"{!palette-gray-90}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"#0263e0","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"#001489","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"#030b5d","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"#66b3ff","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"#cce4ff","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-20}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"#ebf4ff","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"#f4f4f6","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"#14b053","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"#edfdf3","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"#f47c22","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"#fef5ee","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
+    "tokens": [{"type":"color","category":"background-color","value":"#f4f4f6","comment":"Default background color for any container","originalValue":"{!palette-gray-10}","name":"color-background"},{"type":"color","category":"background-color","value":"#ffffff","comment":"Background color of the main page body","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","category":"background-color","value":"#233659","comment":"Primary brand background, accessible with inverse text","originalValue":"{!midnight}","name":"color-background-brand"},{"type":"color","category":"background-color","value":"#f22f46","comment":"Highlight brand background, accessible with black text","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","category":"background-color","value":"#d61f1f","comment":"Background for destructive actions or highlights","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","category":"background-color","value":"#750c0c","comment":"Dark background for destructive actions or highlights","originalValue":"{!palette-red-80}","name":"color-background-destructive-dark"},{"type":"color","category":"background-color","value":"#4a0b0b","comment":"Darker background for destructive actions or highlights","originalValue":"{!palette-red-90}","name":"color-background-destructive-darker"},{"type":"color","category":"background-color","value":"#f58a8a","comment":"Light background for destructive actions or highlights","originalValue":"{!palette-red-40}","name":"color-background-destructive-light"},{"type":"color","category":"background-color","value":"#fccfcf","comment":"Lighter background for destructive actions or highlights","originalValue":"{!palette-red-20}","name":"color-background-destructive-lighter"},{"type":"color","category":"background-color","value":"#feecec","comment":"Lightest background for destructive actions or highlights","originalValue":"{!palette-red-10}","name":"color-background-destructive-lightest"},{"type":"color","category":"background-color","value":"#d61f1f","comment":"Error background color","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","category":"background-color","value":"#feecec","comment":"Lightest error background color","originalValue":"{!palette-red-10}","name":"color-background-error-lightest"},{"type":"color","category":"background-color","value":"#1f304c","comment":"Inverse background color for any container","originalValue":"{!palette-gray-90}","name":"color-background-inverse"},{"type":"color","category":"background-color","value":"#ebf4ff","comment":"Lightest neutral background color","originalValue":"{!palette-blue-10}","name":"color-background-neutral-lightest"},{"type":"color","category":"background-color","value":"#0263e0","comment":"Background for primary actions or highlights","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","category":"background-color","value":"#001489","comment":"Dark background for primary actions or highlights","originalValue":"{!palette-blue-80}","name":"color-background-primary-dark"},{"type":"color","category":"background-color","value":"#030b5d","comment":"Darker background for primary actions or highlights","originalValue":"{!palette-blue-90}","name":"color-background-primary-darker"},{"type":"color","category":"background-color","value":"#66b3ff","comment":"Light background for primary actions or highlights","originalValue":"{!palette-blue-40}","name":"color-background-primary-light"},{"type":"color","category":"background-color","value":"#cce4ff","comment":"Lighter background for primary actions or highlights","originalValue":"{!palette-blue-20}","name":"color-background-primary-lighter"},{"type":"color","category":"background-color","value":"#ebf4ff","comment":"Lightest background for primary actions or highlights","originalValue":"{!palette-blue-10}","name":"color-background-primary-lightest"},{"type":"color","category":"background-color","value":"#f4f4f6","comment":"Background color for alternative striped rows","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","category":"background-color","value":"#14b053","comment":"Success background color","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","category":"background-color","value":"#edfdf3","comment":"Lightest success background color","originalValue":"{!palette-green-10}","name":"color-background-success-lightest"},{"type":"color","category":"background-color","value":"#f47c22","comment":"Warning background color","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","category":"background-color","value":"#fef5ee","comment":"Lightest warning background color","originalValue":"{!palette-orange-10}","name":"color-background-warning-lightest"}]
   },
 {
     "categoryName": "border-colors",
-    "tokens": [{"type":"color","category":"border-color","value":"#aeb2c1","comment":"Default border color","originalValue":"{!palette-gray-40}","name":"color-border"},{"type":"color","category":"border-color","value":"#606b85","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"#d61f1f","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"#750c0c","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"#4a0b0b","comment":"Destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"#f58a8a","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"#fccfcf","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"#d61f1f","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"#feecec","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"#606b85","comment":"Input border color","originalValue":"{!palette-gray-60}","name":"color-border-input"},{"type":"color","category":"border-color","value":"#0263e0","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"#0263e0","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"#e1e3ea","comment":"Light border color","originalValue":"{!palette-gray-20}","name":"color-border-light"},{"type":"color","category":"border-color","value":"#0263e0","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"#001489","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"#030b5d","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"#66b3ff","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"#cce4ff","comment":"Lighter primary border color","originalValue":"{!palette-blue-20}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"#14b053","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"#edfdf3","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"#f47c22","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"#fef5ee","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
+    "tokens": [{"type":"color","category":"border-color","value":"#aeb2c1","comment":"Default border color","originalValue":"{!palette-gray-40}","name":"color-border"},{"type":"color","category":"border-color","value":"#606b85","comment":"Dark border color","originalValue":"{!palette-gray-60}","name":"color-border-dark"},{"type":"color","category":"border-color","value":"#d61f1f","comment":"Destructive border color","originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"type":"color","category":"border-color","value":"#750c0c","comment":"Destructive focus border color","originalValue":"{!palette-red-80}","name":"color-border-destructive-dark"},{"type":"color","category":"border-color","value":"#4a0b0b","comment":"Destructive hover border color","originalValue":"{!palette-red-90}","name":"color-border-destructive-darker"},{"type":"color","category":"border-color","value":"#f58a8a","comment":"Destructive focus border color","originalValue":"{!palette-red-40}","name":"color-border-destructive-light"},{"type":"color","category":"border-color","value":"#fccfcf","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-lighter"},{"type":"color","category":"border-color","value":"#d61f1f","comment":"Error border color","originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","category":"border-color","value":"#f58a8a","comment":"Light error border color","originalValue":"{!palette-red-40}","name":"color-border-error-light"},{"type":"color","category":"border-color","value":"#feecec","comment":"Lightest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-lightest"},{"type":"color","category":"border-color","value":"#606b85","comment":"Input border color","originalValue":"{!palette-gray-60}","name":"color-border-input"},{"type":"color","category":"border-color","value":"#0263e0","comment":"Input focus border color","originalValue":"{!palette-blue-60}","name":"color-border-input-focus"},{"type":"color","category":"border-color","value":"#0263e0","comment":"Input hover border color","originalValue":"{!palette-blue-60}","name":"color-border-input-hover"},{"type":"color","category":"border-color","value":"#e1e3ea","comment":"Light border color","originalValue":"{!palette-gray-20}","name":"color-border-light"},{"type":"color","category":"border-color","value":"#8891aa","comment":"Light neutral border color","originalValue":"{!palette-gray-50}","name":"color-border-neutral-light"},{"type":"color","category":"border-color","value":"#0263e0","comment":"Primary border color","originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"type":"color","category":"border-color","value":"#001489","comment":"Dark primary border color","originalValue":"{!palette-blue-80}","name":"color-border-primary-dark"},{"type":"color","category":"border-color","value":"#030b5d","comment":"Darker primary border color","originalValue":"{!palette-blue-90}","name":"color-border-primary-darker"},{"type":"color","category":"border-color","value":"#66b3ff","comment":"Light primary border color","originalValue":"{!palette-blue-40}","name":"color-border-primary-light"},{"type":"color","category":"border-color","value":"#cce4ff","comment":"Lighter primary border color","originalValue":"{!palette-blue-20}","name":"color-border-primary-lighter"},{"type":"color","category":"border-color","value":"#14b053","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","category":"border-color","value":"#edfdf3","comment":"Lightest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-lightest"},{"type":"color","category":"border-color","value":"#f47c22","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","category":"border-color","value":"#ffb37a","comment":"Light warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-light"},{"type":"color","category":"border-color","value":"#fef5ee","comment":"Lightest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-lightest"}]
   },
@@ -52,3 +52,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"#121c2d","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"#f22f46","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"#d61f1f","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"#121c2d","comment":"Default icon color.","originalValue":"{!palette-gray-100}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"#8891aa","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"#121c2d","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"#043cb5","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"#001489","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"#030b5d","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"#d61f1f","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"#ad1111","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"#750c0c","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"#f58a8a","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"#66b3ff","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"#4b5671","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"#14b053","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"#f47c22","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"#4b5671","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"}]
+    "tokens": [{"type":"color","category":"text-color","value":"#121c2d","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"#f22f46","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"#d61f1f","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"#ad1111","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"#4b5671","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"#ffffff","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"#8891aa","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"#121c2d","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"#043cb5","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"#001489","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"#030b5d","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"#d61f1f","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"#ad1111","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"#750c0c","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"#f58a8a","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"#66b3ff","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"#4b5671","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"#14b053","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"#f47c22","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"#c35323","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"#4b5671","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"}]
   },
@@ -55,0 +55,0 @@ {

dist/tokens.ios.json

@@ -48,2 +48,9 @@ {
       "category": "background-color",
+      "value": "rgb(235, 244, 255)",
+      "comment": "Lightest neutral background color",
+      "name": "colorBackgroundNeutralLightest"
+    },
+    {
+      "type": "color",
+      "category": "background-color",
       "value": "rgb(214, 31, 31)",
@@ -252,2 +259,9 @@ "comment": "Background for destructive actions or highlights",
       "category": "border-color",
+      "value": "rgb(255, 179, 122)",
+      "comment": "Light warning border color",
+      "name": "colorBorderWarningLight"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(237, 253, 243)",
@@ -316,2 +330,16 @@ "comment": "Lightest success border color",
       "category": "border-color",
+      "value": "rgb(136, 145, 170)",
+      "comment": "Light neutral border color",
+      "name": "colorBorderNeutralLight"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
+      "value": "rgb(245, 138, 138)",
+      "comment": "Light error border color",
+      "name": "colorBorderErrorLight"
+    },
+    {
+      "type": "color",
+      "category": "border-color",
       "value": "rgb(2, 99, 224)",
@@ -994,3 +1022,3 @@ "comment": "Input focus border color",
       "category": "text-color",
-      "value": "rgb(18, 28, 45)",
+      "value": "rgb(75, 86, 113)",
       "comment": "Default icon color.",
@@ -1009,2 +1037,9 @@ "name": "colorTextIcon"
       "category": "text-color",
+      "value": "rgb(173, 17, 17)",
+      "comment": "Dark error text for inputs and error misc",
+      "name": "colorTextErrorDark"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(214, 31, 31)",
@@ -1066,2 +1101,9 @@ "comment": "Error text for inputs and error misc",
       "category": "text-color",
+      "value": "rgb(195, 83, 35)",
+      "comment": "Color for dark warning text.",
+      "name": "colorTextWarningDark"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(173, 17, 17)",
@@ -1068,0 +1110,0 @@ "comment": "Dark shade of destructive link text to be used in interactions",

dist/tokens.json

@@ -8,2 +8,3 @@ {
   "color-background-error-lightest": "#feecec",
+  "color-background-neutral-lightest": "#ebf4ff",
   "color-background-destructive": "#d61f1f",
@@ -38,2 +39,3 @@ "color-background-primary": "#0263e0",
   "color-border-dark": "#606b85",
+  "color-border-warning-light": "#ffb37a",
   "color-border-success-lightest": "#edfdf3",
@@ -48,2 +50,4 @@ "color-border-error": "#d61f1f",
   "color-border-destructive-dark": "#750c0c",
+  "color-border-neutral-light": "#8891aa",
+  "color-border-error-light": "#f58a8a",
   "color-border-input-focus": "#0263e0",
@@ -149,4 +153,5 @@ "color-border-light": "#e1e3ea",
   "color-text-link-destructive-light": "#f58a8a",
-  "color-text-icon": "#121c2d",
+  "color-text-icon": "#4b5671",
   "color-text-link": "#043cb5",
+  "color-text-error-dark": "#ad1111",
   "color-text-error": "#d61f1f",
@@ -160,2 +165,3 @@ "color-text-link-dark": "#001489",
   "color-text-placeholder": "#4b5671",
+  "color-text-warning-dark": "#c35323",
   "color-text-link-destructive-dark": "#ad1111",
@@ -162,0 +168,0 @@ "color-text-label": "#121c2d",

dist/tokens.raw.json

@@ -623,2 +623,10 @@ {
     },
+    "color-background-neutral-lightest": {
+      "type": "color",
+      "category": "background-color",
+      "value": "#ebf4ff",
+      "comment": "Lightest neutral background color",
+      "originalValue": "{!palette-blue-10}",
+      "name": "color-background-neutral-lightest"
+    },
     "color-background-destructive": {
@@ -856,2 +864,10 @@ "type": "color",
     },
+    "color-border-warning-light": {
+      "type": "color",
+      "category": "border-color",
+      "value": "#ffb37a",
+      "comment": "Light warning border color",
+      "originalValue": "{!palette-orange-40}",
+      "name": "color-border-warning-light"
+    },
     "color-border-success-lightest": {
@@ -929,2 +945,18 @@ "type": "color",
     },
+    "color-border-neutral-light": {
+      "type": "color",
+      "category": "border-color",
+      "value": "#8891aa",
+      "comment": "Light neutral border color",
+      "originalValue": "{!palette-gray-50}",
+      "name": "color-border-neutral-light"
+    },
+    "color-border-error-light": {
+      "type": "color",
+      "category": "border-color",
+      "value": "#f58a8a",
+      "comment": "Light error border color",
+      "originalValue": "{!palette-red-40}",
+      "name": "color-border-error-light"
+    },
     "color-border-input-focus": {
@@ -1710,5 +1742,5 @@ "type": "color",
       "category": "text-color",
-      "value": "#121c2d",
+      "value": "#4b5671",
       "comment": "Default icon color.",
-      "originalValue": "{!palette-gray-100}",
+      "originalValue": "{!palette-gray-70}",
       "name": "color-text-icon"
@@ -1724,2 +1756,10 @@ },
     },
+    "color-text-error-dark": {
+      "type": "color",
+      "category": "text-color",
+      "value": "#ad1111",
+      "comment": "Dark error text for inputs and error misc",
+      "originalValue": "{!palette-red-70}",
+      "name": "color-text-error-dark"
+    },
     "color-text-error": {
@@ -1789,2 +1829,10 @@ "type": "color",
     },
+    "color-text-warning-dark": {
+      "type": "color",
+      "category": "text-color",
+      "value": "#c35323",
+      "comment": "Color for dark warning text.",
+      "originalValue": "{!palette-orange-70}",
+      "name": "color-text-warning-dark"
+    },
     "color-text-link-destructive-dark": {
@@ -1791,0 +1839,0 @@ "type": "color",

package.json

 {
   "name": "@twilio-paste/design-tokens",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.",
@@ -39,3 +39,3 @@ "main": "dist/tokens.common.js",
   },
-  "gitHead": "d744a8794c802117efed2f57f00a965df184101b"
+  "gitHead": "ac32954009c2e53e161cf4d7d9e98aa0958b8e02"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

720601

increased by3.89%

Lines of code

16362

increased by3.14%

No dependency changes