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

Comparing version 5.1.0 to 5.2.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [5.2.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@5.1.0...@twilio-paste/design-tokens@5.2.0) (2020-05-20)
+
+
+### Features
+
+* **design-tokens:** create color-text-weaker token ([3c63e32](https://github.com/twilio-labs/paste/commit/3c63e32a00fac5d3750f8b177759ae1862761802))
+
+
+
+
+
 # [5.1.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@5.0.0...@twilio-paste/design-tokens@5.1.0) (2020-05-07)
@@ -8,0 +19,0 @@

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

@@ -99,2 +99,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextWeak = "rgb(102, 106, 109)";
+export declare const colorTextWeaker = "rgb(200, 204, 207)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -441,2 +442,3 @@ export declare const fontFamilyText = "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif";
   colorTextWeak: "rgb(102, 106, 109)";
+  colorTextWeaker: "rgb(200, 204, 207)";
 };
@@ -443,0 +445,0 @@ export declare const zIndices: {

dist/themes/console/tokens.common.js

@@ -99,2 +99,3 @@ const borderRadius0 = "0";
 const colorTextWeak = "rgb(102, 106, 109)";
+const colorTextWeaker = "rgb(200, 204, 207)";
 const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -314,2 +315,3 @@ const fontFamilyText = "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif";
 colorTextWeak,
+colorTextWeaker,
 fontFamilyCode,
@@ -656,2 +658,3 @@ fontFamilyText,
 colorTextWeak,
+colorTextWeaker,
 },
@@ -658,0 +661,0 @@ zIndices: {

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

@@ -99,2 +99,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextWeak = "rgb(102, 106, 109)";
+export declare const colorTextWeaker = "rgb(200, 204, 207)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -441,2 +442,3 @@ export declare const fontFamilyText = "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif";
   colorTextWeak: "rgb(102, 106, 109)";
+  colorTextWeaker: "rgb(200, 204, 207)";
 };
@@ -443,0 +445,0 @@ export declare const zIndices: {

dist/themes/console/tokens.es6.js

@@ -99,2 +99,3 @@ export const borderRadius0 = "0";
 export const colorTextWeak = "rgb(102, 106, 109)";
+export const colorTextWeaker = "rgb(200, 204, 207)";
 export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -441,2 +442,3 @@ export const fontFamilyText = "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif";
 colorTextWeak,
+colorTextWeaker,
 };
@@ -443,0 +445,0 @@ export const zIndices = {

dist/themes/console/tokens.gatsby.json

@@ -52,3 +52,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-80}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(102, 106, 109)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 94, 166)","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 62, 130)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 44, 94)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(178, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(236, 182, 182)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(179, 211, 233)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(102, 106, 109)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(102, 106, 109)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"}]
+    "tokens": [{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-80}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(102, 106, 109)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(40, 42, 43)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 94, 166)","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 62, 130)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 44, 94)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(226, 37, 37)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(178, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(146, 18, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(236, 182, 182)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(179, 211, 233)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(102, 106, 109)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(102, 106, 109)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(200, 204, 207)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
   },
@@ -55,0 +55,0 @@ {

dist/themes/console/tokens.ios.json

@@ -1369,2 +1369,9 @@ {
       "category": "text-color",
+      "value": "rgb(200, 204, 207)",
+      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
+      "name": "colorTextWeaker"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(102, 106, 109)",
@@ -1371,0 +1378,0 @@ "comment": "Input placeholder text.",

dist/themes/console/tokens.json

@@ -200,2 +200,3 @@ {
   "color-text-inverse": "rgb(255, 255, 255)",
+  "color-text-weaker": "rgb(200, 204, 207)",
   "color-text-placeholder": "rgb(102, 106, 109)",
@@ -202,0 +203,0 @@ "color-text-warning-dark": "rgb(168, 62, 0)",

dist/themes/console/tokens.raw.json

@@ -2205,2 +2205,10 @@ {
     },
+    "color-text-weaker": {
+      "type": "color",
+      "category": "text-color",
+      "value": "#c8cccf",
+      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
+      "originalValue": "{!palette-gray-50}",
+      "name": "color-text-weaker"
+    },
     "color-text-placeholder": {
@@ -2207,0 +2215,0 @@ "type": "color",

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

@@ -99,2 +99,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextWeak = "rgb(71, 86, 114)";
+export declare const colorTextWeaker = "rgb(182, 191, 206)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -441,2 +442,3 @@ export declare const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";
   colorTextWeak: "rgb(71, 86, 114)";
+  colorTextWeaker: "rgb(182, 191, 206)";
 };
@@ -443,0 +445,0 @@ export declare const zIndices: {

dist/themes/sendgrid/tokens.common.js

@@ -99,2 +99,3 @@ const borderRadius0 = "0";
 const colorTextWeak = "rgb(71, 86, 114)";
+const colorTextWeaker = "rgb(182, 191, 206)";
 const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -314,2 +315,3 @@ const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";
 colorTextWeak,
+colorTextWeaker,
 fontFamilyCode,
@@ -656,2 +658,3 @@ fontFamilyText,
 colorTextWeak,
+colorTextWeaker,
 },
@@ -658,0 +661,0 @@ zIndices: {

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

@@ -99,2 +99,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextWeak = "rgb(71, 86, 114)";
+export declare const colorTextWeaker = "rgb(182, 191, 206)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -441,2 +442,3 @@ export declare const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";
   colorTextWeak: "rgb(71, 86, 114)";
+  colorTextWeaker: "rgb(182, 191, 206)";
 };
@@ -443,0 +445,0 @@ export declare const zIndices: {

dist/themes/sendgrid/tokens.es6.js

@@ -99,2 +99,3 @@ export const borderRadius0 = "0";
 export const colorTextWeak = "rgb(71, 86, 114)";
+export const colorTextWeaker = "rgb(182, 191, 206)";
 export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -441,2 +442,3 @@ export const fontFamilyText = "'Colfax', Helvetica, Arial, sans-serif";
 colorTextWeak,
+colorTextWeaker,
 };
@@ -443,0 +445,0 @@ export const zIndices = {

dist/themes/sendgrid/tokens.gatsby.json

@@ -52,3 +52,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(172, 30, 22)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(148, 8, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(136, 148, 170)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(156, 167, 186)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 58, 219)","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 44, 166)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-70}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(0, 31, 117)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(206, 36, 26)","comment":"Destructive link text","originalValue":"{!palette-red-50}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(112, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(71, 5, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-90}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(232, 83, 74)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(133, 165, 255)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(136, 148, 170)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(71, 86, 114)","comment":"Weak body text for visual hierarchy. Must pass AA color contrast with color-background.","originalValue":"{!palette-gray-80}","name":"color-text-weak"}]
+    "tokens": [{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(172, 30, 22)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(148, 8, 0)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(136, 148, 170)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(156, 167, 186)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(8, 21, 44)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(0, 58, 219)","comment":"Link text","originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 44, 166)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-70}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(0, 31, 117)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(206, 36, 26)","comment":"Destructive link text","originalValue":"{!palette-red-50}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(112, 6, 0)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(71, 5, 0)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-90}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(232, 83, 74)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(133, 165, 255)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(136, 148, 170)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(0, 153, 74)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(228, 98, 22)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(168, 62, 0)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(71, 86, 114)","comment":"Weak body text for visual hierarchy. Must pass AA color contrast with color-background.","originalValue":"{!palette-gray-80}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(182, 191, 206)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
   },
@@ -55,0 +55,0 @@ {

dist/themes/sendgrid/tokens.ios.json

@@ -1369,2 +1369,9 @@ {
       "category": "text-color",
+      "value": "rgb(182, 191, 206)",
+      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
+      "name": "colorTextWeaker"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(136, 148, 170)",
@@ -1371,0 +1378,0 @@ "comment": "Input placeholder text.",

dist/themes/sendgrid/tokens.json

@@ -200,2 +200,3 @@ {
   "color-text-inverse": "rgb(255, 255, 255)",
+  "color-text-weaker": "rgb(182, 191, 206)",
   "color-text-placeholder": "rgb(136, 148, 170)",
@@ -202,0 +203,0 @@ "color-text-warning-dark": "rgb(168, 62, 0)",

dist/tokens.common.d.ts

@@ -99,2 +99,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextWeak = "rgb(75, 86, 113)";
+export declare const colorTextWeaker = "rgb(136, 145, 170)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -441,2 +442,3 @@ export declare const fontFamilyText = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
   colorTextWeak: "rgb(75, 86, 113)";
+  colorTextWeaker: "rgb(136, 145, 170)";
 };
@@ -443,0 +445,0 @@ export declare const zIndices: {

dist/tokens.common.js

@@ -99,2 +99,3 @@ const borderRadius0 = "0";
 const colorTextWeak = "rgb(75, 86, 113)";
+const colorTextWeaker = "rgb(136, 145, 170)";
 const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -314,2 +315,3 @@ const fontFamilyText = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
 colorTextWeak,
+colorTextWeaker,
 fontFamilyCode,
@@ -656,2 +658,3 @@ fontFamilyText,
 colorTextWeak,
+colorTextWeaker,
 },
@@ -658,0 +661,0 @@ zIndices: {

dist/tokens.es6.d.ts

@@ -99,2 +99,3 @@ export declare const borderRadius0 = "0";
 export declare const colorTextWeak = "rgb(75, 86, 113)";
+export declare const colorTextWeaker = "rgb(136, 145, 170)";
 export declare const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -441,2 +442,3 @@ export declare const fontFamilyText = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
   colorTextWeak: "rgb(75, 86, 113)";
+  colorTextWeaker: "rgb(136, 145, 170)";
 };
@@ -443,0 +445,0 @@ export declare const zIndices: {

dist/tokens.es6.js

@@ -99,2 +99,3 @@ export const borderRadius0 = "0";
 export const colorTextWeak = "rgb(75, 86, 113)";
+export const colorTextWeaker = "rgb(136, 145, 170)";
 export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
@@ -441,2 +442,3 @@ export const fontFamilyText = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
 colorTextWeak,
+colorTextWeaker,
 };
@@ -443,0 +445,0 @@ export const zIndices = {

dist/tokens.gatsby.json

@@ -52,3 +52,3 @@ {
     "categoryName": "text-colors",
-    "tokens": [{"type":"color","category":"text-color","value":"rgb(18, 28, 45)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(214, 31, 31)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(173, 17, 17)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(75, 86, 113)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(136, 145, 170)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(18, 28, 45)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(4, 60, 181)","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 20, 137)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 11, 93)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(214, 31, 31)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(173, 17, 17)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(117, 12, 12)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(245, 138, 138)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(102, 179, 255)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(75, 86, 113)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(20, 176, 83)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(244, 124, 34)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(195, 83, 35)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(75, 86, 113)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"}]
+    "tokens": [{"type":"color","category":"text-color","value":"rgb(18, 28, 45)","comment":"Body text color","originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","category":"text-color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","category":"text-color","value":"rgb(214, 31, 31)","comment":"Error text for inputs and error misc","originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","category":"text-color","value":"rgb(173, 17, 17)","comment":"Dark error text for inputs and error misc","originalValue":"{!palette-red-70}","name":"color-text-error-dark"},{"type":"color","category":"text-color","value":"rgb(75, 86, 113)","comment":"Default icon color.","originalValue":"{!palette-gray-70}","name":"color-text-icon"},{"type":"color","category":"text-color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","category":"text-color","value":"rgb(136, 145, 170)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.","originalValue":"{!palette-gray-50}","name":"color-text-inverse-weak"},{"type":"color","category":"text-color","value":"rgb(18, 28, 45)","comment":"Text color for field labels.","originalValue":"{!palette-gray-100}","name":"color-text-label"},{"type":"color","category":"text-color","value":"rgb(4, 60, 181)","comment":"Link text","originalValue":"{!palette-blue-70}","name":"color-text-link"},{"type":"color","category":"text-color","value":"rgb(0, 20, 137)","comment":"Dark shade of link text to be used in interactions","originalValue":"{!palette-blue-80}","name":"color-text-link-dark"},{"type":"color","category":"text-color","value":"rgb(3, 11, 93)","comment":"Darker shade of link text to be used in interactions","originalValue":"{!palette-blue-90}","name":"color-text-link-darker"},{"type":"color","category":"text-color","value":"rgb(214, 31, 31)","comment":"Destructive link text","originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","category":"text-color","value":"rgb(173, 17, 17)","comment":"Dark shade of destructive link text to be used in interactions","originalValue":"{!palette-red-70}","name":"color-text-link-destructive-dark"},{"type":"color","category":"text-color","value":"rgb(117, 12, 12)","comment":"Darker shade of destructive link text to be used in interactions","originalValue":"{!palette-red-80}","name":"color-text-link-destructive-darker"},{"type":"color","category":"text-color","value":"rgb(245, 138, 138)","comment":"Light shade of destructive link text to be used in interactions","originalValue":"{!palette-red-40}","name":"color-text-link-destructive-light"},{"type":"color","category":"text-color","value":"rgb(102, 179, 255)","comment":"Light shade of link text to be used in interactions","originalValue":"{!palette-blue-40}","name":"color-text-link-light"},{"type":"color","category":"text-color","value":"rgb(75, 86, 113)","comment":"Input placeholder text.","originalValue":"{!palette-gray-70}","name":"color-text-placeholder"},{"type":"color","category":"text-color","value":"rgb(20, 176, 83)","comment":"Text color for success text.","originalValue":"{!palette-green-60}","name":"color-text-success"},{"type":"color","category":"text-color","value":"rgb(244, 124, 34)","comment":"Color for warning text.","originalValue":"{!palette-orange-60}","name":"color-text-warning"},{"type":"color","category":"text-color","value":"rgb(195, 83, 35)","comment":"Color for dark warning text.","originalValue":"{!palette-orange-70}","name":"color-text-warning-dark"},{"type":"color","category":"text-color","value":"rgb(75, 86, 113)","comment":"Weak body text for visual hierarchy.","originalValue":"{!palette-gray-70}","name":"color-text-weak"},{"type":"color","category":"text-color","value":"rgb(136, 145, 170)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-50}","name":"color-text-weaker"}]
   },
@@ -55,0 +55,0 @@ {

dist/tokens.ios.json

@@ -1369,2 +1369,9 @@ {
       "category": "text-color",
+      "value": "rgb(136, 145, 170)",
+      "comment": "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
+      "name": "colorTextWeaker"
+    },
+    {
+      "type": "color",
+      "category": "text-color",
       "value": "rgb(75, 86, 113)",
@@ -1371,0 +1378,0 @@ "comment": "Input placeholder text.",

dist/tokens.json

@@ -200,2 +200,3 @@ {
   "color-text-inverse": "rgb(255, 255, 255)",
+  "color-text-weaker": "rgb(136, 145, 170)",
   "color-text-placeholder": "rgb(75, 86, 113)",
@@ -202,0 +203,0 @@ "color-text-warning-dark": "rgb(195, 83, 35)",

package.json

 {
   "name": "@twilio-paste/design-tokens",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.",
@@ -23,3 +23,3 @@ "main": "dist/tokens.common.js",
   },
-  "gitHead": "efd7b5773b009e51b103f17236ae67df17796510"
+  "gitHead": "a242f38ed6358a2e31dce0c45345ca224a51d703"
 }

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

934211

increased by0.65%

Lines of code

19983

increased by0.42%

No dependency changes