(feat)pencil: border tokens (#160)

* (feat)pencil: updated current system border base to new primtive, and added new set of tokens under Surface for original border primitive for non system UI borders. * Transformed tokens * Built and updated design tokens * Files compiled! --------- Co-authored-by: brittany-fs <brittany-fs@users.noreply.github.com>
Fullscript · Feb 23, 2024 · ba6b564 · ba6b564
1 parent 0fdfc2f
commit ba6b564
Show file tree

Hide file tree

Showing 68 changed files with 365 additions and 103 deletions.
diff --git a/dist/documentation/core-dark-colors.d.ts b/dist/documentation/core-dark-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:25 GMT
  */
 
 export const green : {100:{
@@ -188,6 +188,10 @@ export const grey : {100:{
             name: string,
             hex: string,
 
+          },510:{
+            name: string,
+            hex: string,
+
           },600:{
             name: string,
             hex: string,

diff --git a/dist/documentation/core-dark-colors.js b/dist/documentation/core-dark-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:25 GMT
  */
 
 module.exports = {green : {100:{
@@ -188,6 +188,10 @@ grey : {100:{
             name: "grey.500",
             hex: "#515357",
 
+          },510:{
+            name: "grey.510",
+            hex: "#686B70",
+
           },600:{
             name: "grey.600",
             hex: "#98999B",

diff --git a/dist/documentation/core-light-colors.d.ts b/dist/documentation/core-light-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:25 GMT
  */
 
 export const green : {100:{
@@ -184,6 +184,10 @@ export const grey : {100:{
             name: string,
             hex: string,
 
+          },410:{
+            name: string,
+            hex: string,
+
           },500:{
             name: string,
             hex: string,

diff --git a/dist/documentation/core-light-colors.js b/dist/documentation/core-light-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:25 GMT
  */
 
 module.exports = {green : {100:{
@@ -184,6 +184,10 @@ grey : {100:{
             name: "grey.400",
             hex: "#C8D3E0",
 
+          },410:{
+            name: "grey.410",
+            hex: "#B8C6D6",
+
           },500:{
             name: "grey.500",
             hex: "#596D84",

diff --git a/dist/documentation/themes/dark.d.ts b/dist/documentation/themes/dark.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:26 GMT
  */
 
 export const text : {emphasis:{
@@ -113,6 +113,18 @@ export const surface : {level0:{
             name: string,
             hex: string,
             description: string
+          },borderBase:{
+            name: string,
+            hex: string,
+
+          },borderHover:{
+            name: string,
+            hex: string,
+
+          },borderActive:{
+            name: string,
+            hex: string,
+
           }};
 export const primary : {textBase:{
             name: string,

diff --git a/dist/documentation/themes/dark.js b/dist/documentation/themes/dark.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:26 GMT
  */
 
 module.exports = {text : {emphasis:{
@@ -58,7 +58,7 @@ system : {textLabelEmphasis:{
             description: "Used as a background colour for a system container like Box or Message"
           },borderBase:{
             name: "system.borderBase",
-            hex: "#515357",
+            hex: "#686B70",
             description: "Used for the border colour for system components"
           },borderHover:{
             name: "system.borderHover",
@@ -113,6 +113,18 @@ surface : {level0:{
             name: "surface.overlayBackdrop",
             hex: "#000000",
             description: "Used to overlay & de-emphasize the page to draw focus to certain areas. Ex: Used with Modals, Drawers"
+          },borderBase:{
+            name: "surface.borderBase",
+            hex: "#515357",
+
+          },borderHover:{
+            name: "surface.borderHover",
+            hex: "#98999B",
+
+          },borderActive:{
+            name: "surface.borderActive",
+            hex: "#BCBDBF",
+
           }},
 primary : {textBase:{
             name: "primary.textBase",

diff --git a/dist/documentation/themes/emerson.d.ts b/dist/documentation/themes/emerson.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:26 GMT
  */
 
 export const text : {emphasis:{
@@ -113,6 +113,18 @@ export const surface : {level0:{
             name: string,
             hex: string,
 
+          },borderBase:{
+            name: string,
+            hex: string,
+
+          },borderHover:{
+            name: string,
+            hex: string,
+
+          },borderActive:{
+            name: string,
+            hex: string,
+
           }};
 export const primary : {textBase:{
             name: string,

diff --git a/dist/documentation/themes/emerson.js b/dist/documentation/themes/emerson.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:26 GMT
  */
 
 module.exports = {text : {emphasis:{
@@ -58,7 +58,7 @@ system : {textLabelEmphasis:{
             description: "Used as a background colour for a system container like Box or Message"
           },borderBase:{
             name: "system.borderBase",
-            hex: "#C8D3E0",
+            hex: "#B8C6D6",
             description: "Used for the border colour for system components"
           },borderHover:{
             name: "system.borderHover",
@@ -113,6 +113,18 @@ surface : {level0:{
             name: "surface.overlayModal",
             hex: "#FFFFFF",
 
+          },borderBase:{
+            name: "surface.borderBase",
+            hex: "#C8D3E0",
+
+          },borderHover:{
+            name: "surface.borderHover",
+            hex: "#596D84",
+
+          },borderActive:{
+            name: "surface.borderActive",
+            hex: "#475A70",
+
           }},
 primary : {textBase:{
             name: "primary.textBase",

diff --git a/dist/documentation/themes/light.d.ts b/dist/documentation/themes/light.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:26 GMT
  */
 
 export const text : {emphasis:{
@@ -113,6 +113,18 @@ export const surface : {level0:{
             name: string,
             hex: string,
 
+          },borderBase:{
+            name: string,
+            hex: string,
+
+          },borderHover:{
+            name: string,
+            hex: string,
+
+          },borderActive:{
+            name: string,
+            hex: string,
+
           }};
 export const primary : {textBase:{
             name: string,

diff --git a/dist/documentation/themes/light.js b/dist/documentation/themes/light.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:26 GMT
  */
 
 module.exports = {text : {emphasis:{
@@ -58,7 +58,7 @@ system : {textLabelEmphasis:{
             description: "Used as a background colour for a system container like Box or Message"
           },borderBase:{
             name: "system.borderBase",
-            hex: "#C8D3E0",
+            hex: "#B8C6D6",
             description: "Used for the border colour for system components"
           },borderHover:{
             name: "system.borderHover",
@@ -113,6 +113,18 @@ surface : {level0:{
             name: "surface.overlayModal",
             hex: "#FFFFFF",
 
+          },borderBase:{
+            name: "surface.borderBase",
+            hex: "#C8D3E0",
+
+          },borderHover:{
+            name: "surface.borderHover",
+            hex: "#596D84",
+
+          },borderActive:{
+            name: "surface.borderActive",
+            hex: "#475A70",
+
           }},
 primary : {textBase:{
             name: "primary.textBase",

diff --git a/dist/documentation/themes/lightDS3.d.ts b/dist/documentation/themes/lightDS3.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:26 GMT
  */
 
 export const text : {emphasis:{
@@ -113,6 +113,18 @@ export const surface : {level0:{
             name: string,
             hex: string,
 
+          },borderBase:{
+            name: string,
+            hex: string,
+
+          },borderHover:{
+            name: string,
+            hex: string,
+
+          },borderActive:{
+            name: string,
+            hex: string,
+
           }};
 export const primary : {textBase:{
             name: string,

diff --git a/dist/documentation/themes/lightDS3.js b/dist/documentation/themes/lightDS3.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:26 GMT
  */
 
 module.exports = {text : {emphasis:{
@@ -58,7 +58,7 @@ system : {textLabelEmphasis:{
             description: "Used as a background colour for a system container like Box or Message"
           },borderBase:{
             name: "system.borderBase",
-            hex: "#C8D3E0",
+            hex: "#B8C6D6",
             description: "Used for the border colour for system components"
           },borderHover:{
             name: "system.borderHover",
@@ -113,6 +113,18 @@ surface : {level0:{
             name: "surface.overlayModal",
             hex: "#FFFFFF",
 
+          },borderBase:{
+            name: "surface.borderBase",
+            hex: "#C8D3E0",
+
+          },borderHover:{
+            name: "surface.borderHover",
+            hex: "#596D84",
+
+          },borderActive:{
+            name: "surface.borderActive",
+            hex: "#475A70",
+
           }},
 primary : {textBase:{
             name: "primary.textBase",

diff --git a/dist/tokens/native/borders.d.ts b/dist/tokens/native/borders.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:25 GMT
  */
 
 export const radiusBase : number;

diff --git a/dist/tokens/native/borders.js b/dist/tokens/native/borders.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:25 GMT
  */
 
 module.exports = {

diff --git a/dist/tokens/native/core-dark-colors.d.ts b/dist/tokens/native/core-dark-colors.d.ts
@@ -1,13 +1,13 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:25 GMT
  */
 
 export const green: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const blue: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const red: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const purple: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const orange: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
-export const grey: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
+export const grey: {100 : string,200 : string,300 : string,400 : string,500 : string,510 : string,600 : string,700 : string,800 : string};
 export const shades: {white : string,black : string,transparent : string};
 export const brown: {200 : string,300 : string,400 : string,700 : string,800 : string};
diff --git a/dist/tokens/native/core-dark-colors.js b/dist/tokens/native/core-dark-colors.js
@@ -1,14 +1,14 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:25 GMT
  */
 
 module.exports = {green: {100 : "#0C291E",200 : "#124935",300 : "#1F5B45",400 : "#206A4F",500 : "#288563",600 : "#42AD86",700 : "#BFE8D9",800 : "#F0FFF9"},
 blue: {100 : "#0C1B29",200 : "#102337",300 : "#142C45",400 : "#285685",500 : "#4577AD",600 : "#6597CE",700 : "#96BDE7",800 : "#D1E8FF"},
 red: {100 : "#290F16",200 : "#451522",300 : "#5E1D2E",400 : "#8F2843",500 : "#B23655",600 : "#C74C6B",700 : "#EA8AA3",800 : "#FFD1DD"},
 purple: {100 : "#200F29",200 : "#33193F",300 : "#482359",400 : "#542F66",500 : "#693B80",600 : "#865C99",700 : "#B990CC",800 : "#F0D1FF"},
 orange: {100 : "#29170C",200 : "#4A2915",300 : "#63371C",400 : "#8A4E29",500 : "#AD6234",600 : "#CF7945",700 : "#E7AA84",800 : "#FFE3D1"},
-grey: {100 : "#141719",200 : "#1D2124",300 : "#22272B",400 : "#2D3238",500 : "#515357",600 : "#98999B",700 : "#BCBDBF",800 : "#E8E9EA"},
+grey: {100 : "#141719",200 : "#1D2124",300 : "#22272B",400 : "#2D3238",500 : "#515357",510 : "#686B70",600 : "#98999B",700 : "#BCBDBF",800 : "#E8E9EA"},
 shades: {white : "#FFFFFF",black : "#000000",transparent : "transparent"},
 brown: {200 : "#493612",300 : "#5E4317",400 : "#6B5024",700 : "#EFE5D1",800 : "#F6F1E5"},
 };
diff --git a/dist/tokens/native/core-light-colors.d.ts b/dist/tokens/native/core-light-colors.d.ts
@@ -1,14 +1,14 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 18:51:30 GMT
+ * Generated on Wed, 21 Feb 2024 15:30:25 GMT
  */
 
 export const green: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const blue: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const red: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const purple: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const orange: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
-export const grey: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string,900 : string};
+export const grey: {100 : string,200 : string,300 : string,400 : string,410 : string,500 : string,600 : string,700 : string,800 : string,900 : string};
 export const shades: {white : string,black : string,transparent : string};
 export const yellow: {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const brown: {200 : string,300 : string,400 : string,700 : string,800 : string};