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

Comparing version 4.4.0 to 4.4.1

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [4.4.1](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@4.4.0...@twilio-paste/design-tokens@4.4.1) (2020-04-22)
+
+
+### Bug Fixes
+
+* **tokens:** Add shadow-border-input-* aliases, tokens to themes  ([#400](https://github.com/twilio-labs/paste/issues/400)) ([a553100](https://github.com/twilio-labs/paste/commit/a5531003b713b56f1fd5078cccdbdc4879943fc5))
+
+
+
+
+
 # [4.4.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@4.3.0...@twilio-paste/design-tokens@4.4.0) (2020-04-07)
@@ -8,0 +19,0 @@

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

@@ -125,7 +125,7 @@ export declare const borderRadius0 = "0";
 export declare const lineHeight90 = "2.5rem";
-export declare const shadowBorderInput = "0 0 0 1px #606b85";
+export declare const shadowBorderInput = "0 0 0 1px #888c8e";
 export declare const shadowBorderInputDisabled = "0 0 0 1px #e4e7e9";
-export declare const shadowBorderInputError = "0 0 0 1px #d61f1f";
-export declare const shadowBorderInputErrorHover = "0 0 0 1px #750c0c";
-export declare const shadowBorderInputHover = "0 0 0 1px #030b5d";
+export declare const shadowBorderInputError = "0 0 0 1px #e22525";
+export declare const shadowBorderInputErrorHover = "0 0 0 1px #921200";
+export declare const shadowBorderInputHover = "0 0 0 1px #032c5e";
 export declare const shadowCard = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -250,7 +250,7 @@ export declare const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";
 export declare const boxShadows: {
-  shadowBorderInput: "0 0 0 1px #606b85";
+  shadowBorderInput: "0 0 0 1px #888c8e";
   shadowBorderInputDisabled: "0 0 0 1px #e4e7e9";
-  shadowBorderInputError: "0 0 0 1px #d61f1f";
-  shadowBorderInputErrorHover: "0 0 0 1px #750c0c";
-  shadowBorderInputHover: "0 0 0 1px #030b5d";
+  shadowBorderInputError: "0 0 0 1px #e22525";
+  shadowBorderInputErrorHover: "0 0 0 1px #921200";
+  shadowBorderInputHover: "0 0 0 1px #032c5e";
   shadowCard: "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -257,0 +257,0 @@ shadowFocus: "0 0 0 4px rgba(2, 122, 197, 0.8)";

dist/themes/console/tokens.common.js

@@ -125,7 +125,7 @@ const borderRadius0 = "0";
 const lineHeight90 = "2.5rem";
-const shadowBorderInput = "0 0 0 1px #606b85";
+const shadowBorderInput = "0 0 0 1px #888c8e";
 const shadowBorderInputDisabled = "0 0 0 1px #e4e7e9";
-const shadowBorderInputError = "0 0 0 1px #d61f1f";
-const shadowBorderInputErrorHover = "0 0 0 1px #750c0c";
-const shadowBorderInputHover = "0 0 0 1px #030b5d";
+const shadowBorderInputError = "0 0 0 1px #e22525";
+const shadowBorderInputErrorHover = "0 0 0 1px #921200";
+const shadowBorderInputHover = "0 0 0 1px #032c5e";
 const shadowCard = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -132,0 +132,0 @@ const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";

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

@@ -125,7 +125,7 @@ export declare const borderRadius0 = "0";
 export declare const lineHeight90 = "2.5rem";
-export declare const shadowBorderInput = "0 0 0 1px #606b85";
+export declare const shadowBorderInput = "0 0 0 1px #888c8e";
 export declare const shadowBorderInputDisabled = "0 0 0 1px #e4e7e9";
-export declare const shadowBorderInputError = "0 0 0 1px #d61f1f";
-export declare const shadowBorderInputErrorHover = "0 0 0 1px #750c0c";
-export declare const shadowBorderInputHover = "0 0 0 1px #030b5d";
+export declare const shadowBorderInputError = "0 0 0 1px #e22525";
+export declare const shadowBorderInputErrorHover = "0 0 0 1px #921200";
+export declare const shadowBorderInputHover = "0 0 0 1px #032c5e";
 export declare const shadowCard = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -250,7 +250,7 @@ export declare const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";
 export declare const boxShadows: {
-  shadowBorderInput: "0 0 0 1px #606b85";
+  shadowBorderInput: "0 0 0 1px #888c8e";
   shadowBorderInputDisabled: "0 0 0 1px #e4e7e9";
-  shadowBorderInputError: "0 0 0 1px #d61f1f";
-  shadowBorderInputErrorHover: "0 0 0 1px #750c0c";
-  shadowBorderInputHover: "0 0 0 1px #030b5d";
+  shadowBorderInputError: "0 0 0 1px #e22525";
+  shadowBorderInputErrorHover: "0 0 0 1px #921200";
+  shadowBorderInputHover: "0 0 0 1px #032c5e";
   shadowCard: "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -257,0 +257,0 @@ shadowFocus: "0 0 0 4px rgba(2, 122, 197, 0.8)";

dist/themes/console/tokens.es6.js

@@ -125,7 +125,7 @@ export const borderRadius0 = "0";
 export const lineHeight90 = "2.5rem";
-export const shadowBorderInput = "0 0 0 1px #606b85";
+export const shadowBorderInput = "0 0 0 1px #888c8e";
 export const shadowBorderInputDisabled = "0 0 0 1px #e4e7e9";
-export const shadowBorderInputError = "0 0 0 1px #d61f1f";
-export const shadowBorderInputErrorHover = "0 0 0 1px #750c0c";
-export const shadowBorderInputHover = "0 0 0 1px #030b5d";
+export const shadowBorderInputError = "0 0 0 1px #e22525";
+export const shadowBorderInputErrorHover = "0 0 0 1px #921200";
+export const shadowBorderInputHover = "0 0 0 1px #032c5e";
 export const shadowCard = "0 2px 4px 0 rgba(40, 42, 43, 0.3)";
@@ -132,0 +132,0 @@ export const shadowFocus = "0 0 0 4px rgba(2, 122, 197, 0.8)";

dist/themes/console/tokens.gatsby.json

@@ -16,3 +16,3 @@ {
     "categoryName": "box-shadows",
-    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #606b85","comment":"Shadow border for inputs.","originalValue":"{!shadow-border-input}","name":"shadow-border-input"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e4e7e9","comment":"Shadow border for disabled inputs.","originalValue":"{!shadow-border-input-disabled}","name":"shadow-border-input-disabled"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Shadow border for error inputs.","originalValue":"{!shadow-border-input-error}","name":"shadow-border-input-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #750c0c","comment":"Shadow border for error inputs hover.","originalValue":"{!shadow-border-input-error-hover}","name":"shadow-border-input-error-hover"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #030b5d","comment":"Shadow border for inputs hover.","originalValue":"{!shadow-border-input-hover}","name":"shadow-border-input-hover"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(40, 42, 43, 0.3)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(2, 122, 197, 0.8)","comment":"Shadow for focus ring on interactive elements","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20}px {!palette-blue-60-transparent-80}","name":"shadow-focus"}]
+    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #888c8e","comment":"Shadow border for inputs.","originalValue":"{!shadow-border-input}","name":"shadow-border-input"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e4e7e9","comment":"Shadow border for disabled inputs.","originalValue":"{!shadow-border-input-disabled}","name":"shadow-border-input-disabled"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #e22525","comment":"Shadow border for error inputs.","originalValue":"{!shadow-border-input-error}","name":"shadow-border-input-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #921200","comment":"Shadow border for error inputs hover.","originalValue":"{!shadow-border-input-error-hover}","name":"shadow-border-input-error-hover"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #032c5e","comment":"Shadow border for inputs hover.","originalValue":"{!shadow-border-input-hover}","name":"shadow-border-input-hover"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(40, 42, 43, 0.3)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(2, 122, 197, 0.8)","comment":"Shadow for focus ring on interactive elements","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20}px {!palette-blue-60-transparent-80}","name":"shadow-focus"}]
   },
@@ -19,0 +19,0 @@ {

dist/themes/console/tokens.ios.json

@@ -440,3 +440,3 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #606b85",
+      "value": "0 0 0 1px #888c8e",
       "comment": "Shadow border for inputs.",
@@ -448,3 +448,3 @@ "name": "shadowBorderInput"
       "category": "box-shadow",
-      "value": "0 0 0 1px #030b5d",
+      "value": "0 0 0 1px #032c5e",
       "comment": "Shadow border for inputs hover.",
@@ -456,3 +456,3 @@ "name": "shadowBorderInputHover"
       "category": "box-shadow",
-      "value": "0 0 0 1px #d61f1f",
+      "value": "0 0 0 1px #e22525",
       "comment": "Shadow border for error inputs.",
@@ -464,3 +464,3 @@ "name": "shadowBorderInputError"
       "category": "box-shadow",
-      "value": "0 0 0 1px #750c0c",
+      "value": "0 0 0 1px #921200",
       "comment": "Shadow border for error inputs hover.",
@@ -467,0 +467,0 @@ "name": "shadowBorderInputErrorHover"

dist/themes/console/tokens.json

@@ -64,6 +64,6 @@ {
   "shadow-focus": "0 0 0 4px rgba(2, 122, 197, 0.8)",
-  "shadow-border-input": "0 0 0 1px #606b85",
-  "shadow-border-input-hover": "0 0 0 1px #030b5d",
-  "shadow-border-input-error": "0 0 0 1px #d61f1f",
-  "shadow-border-input-error-hover": "0 0 0 1px #750c0c",
+  "shadow-border-input": "0 0 0 1px #888c8e",
+  "shadow-border-input-hover": "0 0 0 1px #032c5e",
+  "shadow-border-input-error": "0 0 0 1px #e22525",
+  "shadow-border-input-error-hover": "0 0 0 1px #921200",
   "shadow-border-input-disabled": "0 0 0 1px #e4e7e9",
@@ -70,0 +70,0 @@ "font-family-text": "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif",

dist/themes/console/tokens.raw.json

@@ -406,9 +406,9 @@ {
     "shadow-border-input-error-hover": {
-      "value": "0 0 0 1px #750c0c"
+      "value": "0 0 0 1px #921200"
     },
     "shadow-border-input-hover": {
-      "value": "0 0 0 1px #030b5d"
+      "value": "0 0 0 1px #032c5e"
     },
     "shadow-border-input-error": {
-      "value": "0 0 0 1px #d61f1f"
+      "value": "0 0 0 1px #e22525"
     },
@@ -422,3 +422,3 @@ "shadow-elevation-0": {
     "shadow-border-input": {
-      "value": "0 0 0 1px #606b85"
+      "value": "0 0 0 1px #888c8e"
     },
@@ -1127,3 +1127,3 @@ "shadow-elevation-30": {
       "category": "box-shadow",
-      "value": "0 0 0 1px #606b85",
+      "value": "0 0 0 1px #888c8e",
       "comment": "Shadow border for inputs.",
@@ -1136,3 +1136,3 @@ "originalValue": "{!shadow-border-input}",
       "category": "box-shadow",
-      "value": "0 0 0 1px #030b5d",
+      "value": "0 0 0 1px #032c5e",
       "comment": "Shadow border for inputs hover.",
@@ -1145,3 +1145,3 @@ "originalValue": "{!shadow-border-input-hover}",
       "category": "box-shadow",
-      "value": "0 0 0 1px #d61f1f",
+      "value": "0 0 0 1px #e22525",
       "comment": "Shadow border for error inputs.",
@@ -1154,3 +1154,3 @@ "originalValue": "{!shadow-border-input-error}",
       "category": "box-shadow",
-      "value": "0 0 0 1px #750c0c",
+      "value": "0 0 0 1px #921200",
       "comment": "Shadow border for error inputs hover.",
@@ -1157,0 +1157,0 @@ "originalValue": "{!shadow-border-input-error-hover}",

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

@@ -127,3 +127,3 @@ export declare const borderRadius0 = "0";
 export declare const shadowBorderInputDisabled = "0 0 0 1px #ccd2dc";
-export declare const shadowBorderInputError = "0 0 0 1px #d61f1f";
+export declare const shadowBorderInputError = "0 0 0 1px #ac1e16";
 export declare const shadowBorderInputErrorHover = "0 0 0 1px #940800";
@@ -252,3 +252,3 @@ export declare const shadowBorderInputHover = "0 0 0 1px #001f75";
   shadowBorderInputDisabled: "0 0 0 1px #ccd2dc";
-  shadowBorderInputError: "0 0 0 1px #d61f1f";
+  shadowBorderInputError: "0 0 0 1px #ac1e16";
   shadowBorderInputErrorHover: "0 0 0 1px #940800";
@@ -255,0 +255,0 @@ shadowBorderInputHover: "0 0 0 1px #001f75";

dist/themes/sendgrid/tokens.common.js

@@ -127,3 +127,3 @@ const borderRadius0 = "0";
 const shadowBorderInputDisabled = "0 0 0 1px #ccd2dc";
-const shadowBorderInputError = "0 0 0 1px #d61f1f";
+const shadowBorderInputError = "0 0 0 1px #ac1e16";
 const shadowBorderInputErrorHover = "0 0 0 1px #940800";
@@ -130,0 +130,0 @@ const shadowBorderInputHover = "0 0 0 1px #001f75";

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

@@ -127,3 +127,3 @@ export declare const borderRadius0 = "0";
 export declare const shadowBorderInputDisabled = "0 0 0 1px #ccd2dc";
-export declare const shadowBorderInputError = "0 0 0 1px #d61f1f";
+export declare const shadowBorderInputError = "0 0 0 1px #ac1e16";
 export declare const shadowBorderInputErrorHover = "0 0 0 1px #940800";
@@ -252,3 +252,3 @@ export declare const shadowBorderInputHover = "0 0 0 1px #001f75";
   shadowBorderInputDisabled: "0 0 0 1px #ccd2dc";
-  shadowBorderInputError: "0 0 0 1px #d61f1f";
+  shadowBorderInputError: "0 0 0 1px #ac1e16";
   shadowBorderInputErrorHover: "0 0 0 1px #940800";
@@ -255,0 +255,0 @@ shadowBorderInputHover: "0 0 0 1px #001f75";

dist/themes/sendgrid/tokens.es6.js

@@ -127,3 +127,3 @@ export const borderRadius0 = "0";
 export const shadowBorderInputDisabled = "0 0 0 1px #ccd2dc";
-export const shadowBorderInputError = "0 0 0 1px #d61f1f";
+export const shadowBorderInputError = "0 0 0 1px #ac1e16";
 export const shadowBorderInputErrorHover = "0 0 0 1px #940800";
@@ -130,0 +130,0 @@ export const shadowBorderInputHover = "0 0 0 1px #001f75";

dist/themes/sendgrid/tokens.gatsby.json

@@ -16,3 +16,3 @@ {
     "categoryName": "box-shadows",
-    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #8894aa","comment":"Shadow border for inputs.","originalValue":"{!shadow-border-input}","name":"shadow-border-input"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ccd2dc","comment":"Shadow border for disabled inputs.","originalValue":"{!shadow-border-input-disabled}","name":"shadow-border-input-disabled"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #d61f1f","comment":"Shadow border for error inputs.","originalValue":"{!shadow-border-input-error}","name":"shadow-border-input-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #940800","comment":"Shadow border for error inputs hover.","originalValue":"{!shadow-border-input-error-hover}","name":"shadow-border-input-error-hover"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #001f75","comment":"Shadow border for inputs hover.","originalValue":"{!shadow-border-input-hover}","name":"shadow-border-input-hover"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(18, 28, 45, 0.3)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(51, 104, 250, 0.8)","comment":"Shadow for focus ring on interactive elements","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20}px {!palette-blue-50-transparent-80}","name":"shadow-focus"}]
+    "tokens": [{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #8894aa","comment":"Shadow border for inputs.","originalValue":"{!shadow-border-input}","name":"shadow-border-input"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ccd2dc","comment":"Shadow border for disabled inputs.","originalValue":"{!shadow-border-input-disabled}","name":"shadow-border-input-disabled"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #ac1e16","comment":"Shadow border for error inputs.","originalValue":"{!shadow-border-input-error}","name":"shadow-border-input-error"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #940800","comment":"Shadow border for error inputs hover.","originalValue":"{!shadow-border-input-error-hover}","name":"shadow-border-input-error-hover"},{"type":"shadow","category":"box-shadow","value":"0 0 0 1px #001f75","comment":"Shadow border for inputs hover.","originalValue":"{!shadow-border-input-hover}","name":"shadow-border-input-hover"},{"type":"shadow","category":"box-shadow","value":"0 2px 4px 0 rgba(18, 28, 45, 0.3)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","category":"box-shadow","value":"0 0 0 4px rgba(51, 104, 250, 0.8)","comment":"Shadow for focus ring on interactive elements","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20}px {!palette-blue-50-transparent-80}","name":"shadow-focus"}]
   },
@@ -19,0 +19,0 @@ {

dist/themes/sendgrid/tokens.ios.json

@@ -454,3 +454,3 @@ {
       "category": "box-shadow",
-      "value": "0 0 0 1px #d61f1f",
+      "value": "0 0 0 1px #ac1e16",
       "comment": "Shadow border for error inputs.",
@@ -457,0 +457,0 @@ "name": "shadowBorderInputError"

dist/themes/sendgrid/tokens.json

@@ -66,3 +66,3 @@ {
   "shadow-border-input-hover": "0 0 0 1px #001f75",
-  "shadow-border-input-error": "0 0 0 1px #d61f1f",
+  "shadow-border-input-error": "0 0 0 1px #ac1e16",
   "shadow-border-input-error-hover": "0 0 0 1px #940800",
@@ -69,0 +69,0 @@ "shadow-border-input-disabled": "0 0 0 1px #ccd2dc",

dist/themes/sendgrid/tokens.raw.json

@@ -598,3 +598,3 @@ {
     "shadow-border-input-error": {
-      "value": "0 0 0 1px #d61f1f"
+      "value": "0 0 0 1px #ac1e16"
     },
@@ -1328,3 +1328,3 @@ "shadow-elevation-0": {
       "category": "box-shadow",
-      "value": "0 0 0 1px #d61f1f",
+      "value": "0 0 0 1px #ac1e16",
       "comment": "Shadow border for error inputs.",
@@ -1331,0 +1331,0 @@ "originalValue": "{!shadow-border-input-error}",

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

822540

increased by0.05%

No dependency changes