feat(pencil): token updates of inverted and overlay (#158)

* (feat)pencil: added tokens for inverted backgrounds + text, added OverlayModal and updated prim for OverlayTheme(dark mode only). Applied changes to all 4 themes. * Transformed tokens * Built and updated design tokens * Files compiled! * fixing theme: light, 'inverted/background/active' * Transformed tokens * Built and updated design tokens * Files compiled! * Built and updated design tokens * Files compiled! --------- Co-authored-by: brittany-fs <[email protected]> Co-authored-by: Ian Clarke <[email protected]> Co-authored-by: iryanclarke <[email protected]>
Fullscript · Feb 13, 2024 · 0fdfc2f · 0fdfc2f
1 parent f111867
commit 0fdfc2f
Show file tree

Hide file tree

Showing 62 changed files with 559 additions and 79 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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 export const green : {100:{

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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 module.exports = {green : {100:{

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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 export const green : {100:{

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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 module.exports = {green : {100:{

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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 export const text : {emphasis:{
@@ -105,6 +105,10 @@ export const surface : {level0:{
             name: string,
             hex: string,
             description: string
+          },overlayModal:{
+            name: string,
+            hex: string,
+
           },overlayBackdrop:{
             name: string,
             hex: string,
@@ -605,4 +609,25 @@ export const accent : {forestTextBody:{
             name: string,
             hex: string,
 
+          }};
+export const inverted : {backgroundBase:{
+            name: string,
+            hex: string,
+
+          },backgroundHover:{
+            name: string,
+            hex: string,
+
+          },backgroundActive:{
+            name: string,
+            hex: string,
+
+          },textEmphasis:{
+            name: string,
+            hex: string,
+
+          },textBody:{
+            name: string,
+            hex: 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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 module.exports = {text : {emphasis:{
@@ -103,8 +103,12 @@ surface : {level0:{
             description: "Used for elements that are absolutely positioned to overlay content on the page. Is always a dark background regardless of theme. Ex: Things like Toasts and Tooltips"
           },overlayTheme:{
             name: "surface.overlayTheme",
-            hex: "#1D2124",
+            hex: "#2D3238",
             description: "Used for elements that are absolutely positioned to overlay content on the page. Matches the base color of the theme. Ex: Snackbar"
+          },overlayModal:{
+            name: "surface.overlayModal",
+            hex: "#1D2124",
+
           },overlayBackdrop:{
             name: "surface.overlayBackdrop",
             hex: "#000000",
@@ -605,4 +609,25 @@ accent : {forestTextBody:{
             name: "accent.sandBackgroundMuted2",
             hex: "#6B5024",
 
+          }},
+inverted : {backgroundBase:{
+            name: "inverted.backgroundBase",
+            hex: "#E8E9EA",
+
+          },backgroundHover:{
+            name: "inverted.backgroundHover",
+            hex: "#BCBDBF",
+
+          },backgroundActive:{
+            name: "inverted.backgroundActive",
+            hex: "#98999B",
+
+          },textEmphasis:{
+            name: "inverted.textEmphasis",
+            hex: "#141719",
+
+          },textBody:{
+            name: "inverted.textBody",
+            hex: "#1D2124",
+
           }},};
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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 export const text : {emphasis:{
@@ -109,6 +109,10 @@ export const surface : {level0:{
             name: string,
             hex: string,
             description: string
+          },overlayModal:{
+            name: string,
+            hex: string,
+
           }};
 export const primary : {textBase:{
             name: string,
@@ -601,4 +605,25 @@ export const accent : {forestTextBody:{
             name: string,
             hex: string,
 
+          }};
+export const inverted : {backgroundBase:{
+            name: string,
+            hex: string,
+
+          },backgroundHover:{
+            name: string,
+            hex: string,
+
+          },backgroundActive:{
+            name: string,
+            hex: string,
+
+          },textEmphasis:{
+            name: string,
+            hex: string,
+
+          },textBody:{
+            name: string,
+            hex: 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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 module.exports = {text : {emphasis:{
@@ -109,6 +109,10 @@ surface : {level0:{
             name: "surface.overlayBackdrop",
             hex: "#36485C",
             description: "Used to overlay & de-emphasize the page to draw focus to certain areas. Ex: Used with Modals, Drawers"
+          },overlayModal:{
+            name: "surface.overlayModal",
+            hex: "#FFFFFF",
+
           }},
 primary : {textBase:{
             name: "primary.textBase",
@@ -601,4 +605,25 @@ accent : {forestTextBody:{
             name: "accent.sandBackgroundMuted2",
             hex: "#DACCAA",
 
+          }},
+inverted : {backgroundBase:{
+            name: "inverted.backgroundBase",
+            hex: "#2E3A47",
+
+          },backgroundHover:{
+            name: "inverted.backgroundHover",
+            hex: "#36485C",
+
+          },backgroundActive:{
+            name: "inverted.backgroundActive",
+            hex: "#475A70",
+
+          },textEmphasis:{
+            name: "inverted.textEmphasis",
+            hex: "#FFFFFF",
+
+          },textBody:{
+            name: "inverted.textBody",
+            hex: "#F5F7FA",
+
           }},};
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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 export const text : {emphasis:{
@@ -109,6 +109,10 @@ export const surface : {level0:{
             name: string,
             hex: string,
             description: string
+          },overlayModal:{
+            name: string,
+            hex: string,
+
           }};
 export const primary : {textBase:{
             name: string,
@@ -601,4 +605,25 @@ export const accent : {forestTextBody:{
             name: string,
             hex: string,
 
+          }};
+export const inverted : {backgroundBase:{
+            name: string,
+            hex: string,
+
+          },backgroundHover:{
+            name: string,
+            hex: string,
+
+          },backgroundActive:{
+            name: string,
+            hex: string,
+
+          },textEmphasis:{
+            name: string,
+            hex: string,
+
+          },textBody:{
+            name: string,
+            hex: 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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 module.exports = {text : {emphasis:{
@@ -109,6 +109,10 @@ surface : {level0:{
             name: "surface.overlayBackdrop",
             hex: "#36485C",
             description: "Used to overlay & de-emphasize the page to draw focus to certain areas. Ex: Used with Modals, Drawers"
+          },overlayModal:{
+            name: "surface.overlayModal",
+            hex: "#FFFFFF",
+
           }},
 primary : {textBase:{
             name: "primary.textBase",
@@ -601,4 +605,25 @@ accent : {forestTextBody:{
             name: "accent.sandBackgroundMuted2",
             hex: "#DACCAA",
 
+          }},
+inverted : {backgroundBase:{
+            name: "inverted.backgroundBase",
+            hex: "#2E3A47",
+
+          },backgroundHover:{
+            name: "inverted.backgroundHover",
+            hex: "#36485C",
+
+          },backgroundActive:{
+            name: "inverted.backgroundActive",
+            hex: "#475A70",
+
+          },textEmphasis:{
+            name: "inverted.textEmphasis",
+            hex: "#FFFFFF",
+
+          },textBody:{
+            name: "inverted.textBody",
+            hex: "#F5F7FA",
+
           }},};
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 15:21:28 GMT
+ * Generated on Tue, 13 Feb 2024 18:51:30 GMT
  */
 
 export const text : {emphasis:{
@@ -109,6 +109,10 @@ export const surface : {level0:{
             name: string,
             hex: string,
             description: string
+          },overlayModal:{
+            name: string,
+            hex: string,
+
           }};
 export const primary : {textBase:{
             name: string,
@@ -601,4 +605,25 @@ export const accent : {forestTextBody:{
             name: string,
             hex: string,
 
+          }};
+export const inverted : {backgroundBase:{
+            name: string,
+            hex: string,
+
+          },backgroundHover:{
+            name: string,
+            hex: string,
+
+          },backgroundActive:{
+            name: string,
+            hex: string,
+
+          },textEmphasis:{
+            name: string,
+            hex: string,
+
+          },textBody:{
+            name: string,
+            hex: string,
+
           }};