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

Comparing version 5.2.2 to 5.3.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [5.3.0](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@5.2.2...@twilio-paste/design-tokens@5.3.0) (2020-06-25)
+
+
+### Features
+
+* **design-tokens:** adding 2 new border-width tokens ([69ae496](https://github.com/twilio-labs/paste/commit/69ae496699d53b3837bf11542b7104846c82e86e))
+
+
+
+
+
 ## [5.2.2](https://github.com/twilio-labs/paste/compare/@twilio-paste/design-tokens@5.2.1...@twilio-paste/design-tokens@5.2.2) (2020-06-12)
@@ -8,0 +19,0 @@

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

@@ -9,2 +9,4 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
+export declare const borderWidth30 = "4px";
+export declare const borderWidth40 = "8px";
 export declare const colorBackground = "rgb(248, 248, 249)";
@@ -278,2 +280,4 @@ export declare const colorBackgroundBody = "rgb(255, 255, 255)";
   borderWidth20: "2px";
+  borderWidth30: "4px";
+  borderWidth40: "8px";
 };
@@ -280,0 +284,0 @@ export declare const boxShadows: {

dist/themes/console/tokens.common.js

@@ -9,2 +9,4 @@ const borderRadius0 = "0";
 const borderWidth20 = "2px";
+const borderWidth30 = "4px";
+const borderWidth40 = "8px";
 const colorBackground = "rgb(248, 248, 249)";
@@ -225,2 +227,4 @@ const colorBackgroundBody = "rgb(255, 255, 255)";
 borderWidth20,
+borderWidth30,
+borderWidth40,
 colorBackground,
@@ -494,2 +498,4 @@ colorBackgroundBody,
 borderWidth20,
+borderWidth30,
+borderWidth40,
 },
@@ -496,0 +502,0 @@ boxShadows: {

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

@@ -9,2 +9,4 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
+export declare const borderWidth30 = "4px";
+export declare const borderWidth40 = "8px";
 export declare const colorBackground = "rgb(248, 248, 249)";
@@ -278,2 +280,4 @@ export declare const colorBackgroundBody = "rgb(255, 255, 255)";
   borderWidth20: "2px";
+  borderWidth30: "4px";
+  borderWidth40: "8px";
 };
@@ -280,0 +284,0 @@ export declare const boxShadows: {

dist/themes/console/tokens.es6.js

@@ -9,2 +9,4 @@ export const borderRadius0 = "0";
 export const borderWidth20 = "2px";
+export const borderWidth30 = "4px";
+export const borderWidth40 = "8px";
 export const colorBackground = "rgb(248, 248, 249)";
@@ -278,2 +280,4 @@ export const colorBackgroundBody = "rgb(255, 255, 255)";
 borderWidth20,
+borderWidth30,
+borderWidth40,
 };
@@ -280,0 +284,0 @@ export const boxShadows = {

dist/themes/console/tokens.gatsby.json

@@ -12,3 +12,3 @@ {
     "categoryName": "border-widths",
-    "tokens": [{"type":"size","category":"border-width","value":"0","comment":"Border width reset","originalValue":"{!border-width-0}","name":"border-width-0"},{"type":"size","category":"border-width","value":"1px","comment":"Small border width","originalValue":"{!border-width-10}","name":"border-width-10"},{"type":"size","category":"border-width","value":"2px","comment":"Large border width","originalValue":"{!border-width-20}","name":"border-width-20"}]
+    "tokens": [{"type":"size","category":"border-width","value":"0","comment":"Border width reset","originalValue":"{!border-width-0}","name":"border-width-0"},{"type":"size","category":"border-width","value":"1px","comment":"Small border width","originalValue":"{!border-width-10}","name":"border-width-10"},{"type":"size","category":"border-width","value":"2px","comment":"Large border width","originalValue":"{!border-width-20}","name":"border-width-20"},{"type":"size","category":"border-width","value":"4px","comment":"Small border width","originalValue":"{!border-width-30}","name":"border-width-30"},{"type":"size","category":"border-width","value":"8px","comment":"Large border width","originalValue":"{!border-width-40}","name":"border-width-40"}]
   },
@@ -15,0 +15,0 @@ {

dist/themes/console/tokens.ios.json

@@ -445,2 +445,16 @@ {
     {
+      "type": "size",
+      "category": "border-width",
+      "value": "4px",
+      "comment": "Small border width",
+      "name": "borderWidth30"
+    },
+    {
+      "type": "size",
+      "category": "border-width",
+      "value": "8px",
+      "comment": "Large border width",
+      "name": "borderWidth40"
+    },
+    {
       "type": "shadow",
@@ -447,0 +461,0 @@ "category": "box-shadow",

dist/themes/console/tokens.json

@@ -65,2 +65,4 @@ {
   "border-width-20": "2px",
+  "border-width-30": "4px",
+  "border-width-40": "8px",
   "shadow-card": "0 2px 4px 0 rgba(40, 42, 43, 0.3)",
@@ -67,0 +69,0 @@ "shadow-focus": "0 0 0 4px rgba(2, 122, 197, 0.8)",

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

@@ -9,2 +9,4 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
+export declare const borderWidth30 = "4px";
+export declare const borderWidth40 = "8px";
 export declare const colorBackground = "rgb(243, 244, 246)";
@@ -278,2 +280,4 @@ export declare const colorBackgroundBody = "rgb(255, 255, 255)";
   borderWidth20: "2px";
+  borderWidth30: "4px";
+  borderWidth40: "8px";
 };
@@ -280,0 +284,0 @@ export declare const boxShadows: {

dist/themes/sendgrid/tokens.common.js

@@ -9,2 +9,4 @@ const borderRadius0 = "0";
 const borderWidth20 = "2px";
+const borderWidth30 = "4px";
+const borderWidth40 = "8px";
 const colorBackground = "rgb(243, 244, 246)";
@@ -225,2 +227,4 @@ const colorBackgroundBody = "rgb(255, 255, 255)";
 borderWidth20,
+borderWidth30,
+borderWidth40,
 colorBackground,
@@ -494,2 +498,4 @@ colorBackgroundBody,
 borderWidth20,
+borderWidth30,
+borderWidth40,
 },
@@ -496,0 +502,0 @@ boxShadows: {

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

@@ -9,2 +9,4 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
+export declare const borderWidth30 = "4px";
+export declare const borderWidth40 = "8px";
 export declare const colorBackground = "rgb(243, 244, 246)";
@@ -278,2 +280,4 @@ export declare const colorBackgroundBody = "rgb(255, 255, 255)";
   borderWidth20: "2px";
+  borderWidth30: "4px";
+  borderWidth40: "8px";
 };
@@ -280,0 +284,0 @@ export declare const boxShadows: {

dist/themes/sendgrid/tokens.es6.js

@@ -9,2 +9,4 @@ export const borderRadius0 = "0";
 export const borderWidth20 = "2px";
+export const borderWidth30 = "4px";
+export const borderWidth40 = "8px";
 export const colorBackground = "rgb(243, 244, 246)";
@@ -278,2 +280,4 @@ export const colorBackgroundBody = "rgb(255, 255, 255)";
 borderWidth20,
+borderWidth30,
+borderWidth40,
 };
@@ -280,0 +284,0 @@ export const boxShadows = {

dist/themes/sendgrid/tokens.gatsby.json

@@ -12,3 +12,3 @@ {
     "categoryName": "border-widths",
-    "tokens": [{"type":"size","category":"border-width","value":"0","comment":"Border width reset","originalValue":"{!border-width-0}","name":"border-width-0"},{"type":"size","category":"border-width","value":"1px","comment":"Small border width","originalValue":"{!border-width-10}","name":"border-width-10"},{"type":"size","category":"border-width","value":"2px","comment":"Large border width","originalValue":"{!border-width-20}","name":"border-width-20"}]
+    "tokens": [{"type":"size","category":"border-width","value":"0","comment":"Border width reset","originalValue":"{!border-width-0}","name":"border-width-0"},{"type":"size","category":"border-width","value":"1px","comment":"Small border width","originalValue":"{!border-width-10}","name":"border-width-10"},{"type":"size","category":"border-width","value":"2px","comment":"Large border width","originalValue":"{!border-width-20}","name":"border-width-20"},{"type":"size","category":"border-width","value":"4px","comment":"Small border width","originalValue":"{!border-width-30}","name":"border-width-30"},{"type":"size","category":"border-width","value":"8px","comment":"Large border width","originalValue":"{!border-width-40}","name":"border-width-40"}]
   },
@@ -15,0 +15,0 @@ {

dist/themes/sendgrid/tokens.ios.json

@@ -445,2 +445,16 @@ {
     {
+      "type": "size",
+      "category": "border-width",
+      "value": "4px",
+      "comment": "Small border width",
+      "name": "borderWidth30"
+    },
+    {
+      "type": "size",
+      "category": "border-width",
+      "value": "8px",
+      "comment": "Large border width",
+      "name": "borderWidth40"
+    },
+    {
       "type": "shadow",
@@ -447,0 +461,0 @@ "category": "box-shadow",

dist/themes/sendgrid/tokens.json

@@ -65,2 +65,4 @@ {
   "border-width-20": "2px",
+  "border-width-30": "4px",
+  "border-width-40": "8px",
   "shadow-card": "0 2px 4px 0 rgba(8, 21, 44, 0.3)",
@@ -67,0 +69,0 @@ "shadow-focus": "0 0 0 4px rgba(51, 104, 250, 0.8)",

dist/tokens.common.d.ts

@@ -9,2 +9,4 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
+export declare const borderWidth30 = "4px";
+export declare const borderWidth40 = "8px";
 export declare const colorBackground = "rgb(244, 244, 246)";
@@ -278,2 +280,4 @@ export declare const colorBackgroundBody = "rgb(255, 255, 255)";
   borderWidth20: "2px";
+  borderWidth30: "4px";
+  borderWidth40: "8px";
 };
@@ -280,0 +284,0 @@ export declare const boxShadows: {

dist/tokens.common.js

@@ -9,2 +9,4 @@ const borderRadius0 = "0";
 const borderWidth20 = "2px";
+const borderWidth30 = "4px";
+const borderWidth40 = "8px";
 const colorBackground = "rgb(244, 244, 246)";
@@ -225,2 +227,4 @@ const colorBackgroundBody = "rgb(255, 255, 255)";
 borderWidth20,
+borderWidth30,
+borderWidth40,
 colorBackground,
@@ -494,2 +498,4 @@ colorBackgroundBody,
 borderWidth20,
+borderWidth30,
+borderWidth40,
 },
@@ -496,0 +502,0 @@ boxShadows: {

dist/tokens.es6.d.ts

@@ -9,2 +9,4 @@ export declare const borderRadius0 = "0";
 export declare const borderWidth20 = "2px";
+export declare const borderWidth30 = "4px";
+export declare const borderWidth40 = "8px";
 export declare const colorBackground = "rgb(244, 244, 246)";
@@ -278,2 +280,4 @@ export declare const colorBackgroundBody = "rgb(255, 255, 255)";
   borderWidth20: "2px";
+  borderWidth30: "4px";
+  borderWidth40: "8px";
 };
@@ -280,0 +284,0 @@ export declare const boxShadows: {

dist/tokens.es6.js

@@ -9,2 +9,4 @@ export const borderRadius0 = "0";
 export const borderWidth20 = "2px";
+export const borderWidth30 = "4px";
+export const borderWidth40 = "8px";
 export const colorBackground = "rgb(244, 244, 246)";
@@ -278,2 +280,4 @@ export const colorBackgroundBody = "rgb(255, 255, 255)";
 borderWidth20,
+borderWidth30,
+borderWidth40,
 };
@@ -280,0 +284,0 @@ export const boxShadows = {

dist/tokens.gatsby.json

@@ -12,3 +12,3 @@ {
     "categoryName": "border-widths",
-    "tokens": [{"type":"size","category":"border-width","value":"0","comment":"Border width reset","originalValue":"{!border-width-0}","name":"border-width-0"},{"type":"size","category":"border-width","value":"1px","comment":"Small border width","originalValue":"{!border-width-10}","name":"border-width-10"},{"type":"size","category":"border-width","value":"2px","comment":"Large border width","originalValue":"{!border-width-20}","name":"border-width-20"}]
+    "tokens": [{"type":"size","category":"border-width","value":"0","comment":"Border width reset","originalValue":"{!border-width-0}","name":"border-width-0"},{"type":"size","category":"border-width","value":"1px","comment":"Small border width","originalValue":"{!border-width-10}","name":"border-width-10"},{"type":"size","category":"border-width","value":"2px","comment":"Large border width","originalValue":"{!border-width-20}","name":"border-width-20"},{"type":"size","category":"border-width","value":"4px","comment":"Small border width","originalValue":"{!border-width-30}","name":"border-width-30"},{"type":"size","category":"border-width","value":"8px","comment":"Large border width","originalValue":"{!border-width-40}","name":"border-width-40"}]
   },
@@ -15,0 +15,0 @@ {

dist/tokens.ios.json

@@ -445,2 +445,16 @@ {
     {
+      "type": "size",
+      "category": "border-width",
+      "value": "4px",
+      "comment": "Small border width",
+      "name": "borderWidth30"
+    },
+    {
+      "type": "size",
+      "category": "border-width",
+      "value": "8px",
+      "comment": "Large border width",
+      "name": "borderWidth40"
+    },
+    {
       "type": "shadow",
@@ -447,0 +461,0 @@ "category": "box-shadow",

dist/tokens.json

@@ -65,2 +65,4 @@ {
   "border-width-20": "2px",
+  "border-width-30": "4px",
+  "border-width-40": "8px",
   "shadow-card": "0 2px 4px 0 rgba(18, 28, 45, 0.3)",
@@ -67,0 +69,0 @@ "shadow-focus": "0 0 0 4px rgba(2, 99, 224, 0.8)",

package.json

 {
   "name": "@twilio-paste/design-tokens",
-  "version": "5.2.2",
+  "version": "5.3.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": "5af03b6b050bf578dc450e5df18b12e0a590fa12"
+  "gitHead": "e70c6fdb389600940a49b5047f1dbc4383082bdb"
 }

No alert changes

Improved metrics

Total package byte prevSize

942557

increased by0.77%

Lines of code

20169

increased by0.92%

No dependency changes