Feat: Update light.json (#96)

* Update light.json * Transformed tokens * Built and updated design tokens * Files compiled! * Update light.json * Transformed tokens * Built and updated design tokens * Files compiled! * Update src/data/light.json Co-authored-by: Alexandra Lim <[email protected]> * Transformed tokens * Built and updated design tokens * Files compiled! * Transformed tokens * Built and updated design tokens * Files compiled! Co-authored-by: iryanclarke <[email protected]> Co-authored-by: Alexandra Lim <[email protected]> Co-authored-by: Ian Clarke <[email protected]>
Fullscript · Dec 5, 2022 · 45e28ce · 45e28ce
1 parent 4f16c30
commit 45e28ce
Show file tree

Hide file tree

Showing 17 changed files with 64 additions and 55 deletions.
diff --git a/dist/tokens/native/colors.d.ts b/dist/tokens/native/colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 16:30:56 GMT
+ * Generated on Mon, 05 Dec 2022 18:56:57 GMT
  */
 
 export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};

diff --git a/dist/tokens/native/colors.js b/dist/tokens/native/colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 16:30:56 GMT
+ * Generated on Mon, 05 Dec 2022 18:56:57 GMT
  */
 
 module.exports = {green : {100 : "#FAFFFC",200 : "#EBF2EF",300 : "#D1E0D9",400 : "#B6CFC2",500 : "#86B09B",600 : "#307553",700 : "#275E43",800 : "#244C38"},

diff --git a/dist/tokens/native/themes/light.d.ts b/dist/tokens/native/themes/light.d.ts
@@ -1,11 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 16:30:56 GMT
+ * Generated on Mon, 05 Dec 2022 18:56:57 GMT
  */
 
 export const text : {emphasis : string,body : string,subdued : string,onBackground : string};
 export const system : {textLabelEmphasis : string,textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string,borderFocused : string};
-export const surface : {level0 : string,level1 : string,level2 : string,level3 : string,interactiveBackground : string,interactiveHover : string,interactiveActive : string,overlayInvertable : string,overlayWhiteInvertable : string,overlayStatic : string};
+export const surface : {level0 : string,level1 : string,level2 : string,interactiveBackground : string,interactiveHover : string,interactiveActive : string,overlayContrast : string,overlayTheme : string,overlayBackdrop : string};
 export const primary : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};
 export const info : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};
 export const warning : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};

diff --git a/dist/tokens/native/themes/light.js b/dist/tokens/native/themes/light.js
diff --git a/dist/tokens/native/typography.d.ts b/dist/tokens/native/typography.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 16:30:56 GMT
+ * Generated on Mon, 05 Dec 2022 18:56:57 GMT
  */
 
 export const letterSpacingBase : number;

diff --git a/dist/tokens/native/typography.js b/dist/tokens/native/typography.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 16:30:56 GMT
+ * Generated on Mon, 05 Dec 2022 18:56:57 GMT
  */
 
 module.exports = {

diff --git a/dist/tokens/scss/colors.scss b/dist/tokens/scss/colors.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 29 Nov 2022 16:30:55 GMT
+// Generated on Mon, 05 Dec 2022 18:56:57 GMT
 
 $green100: #FAFFFC;
 $green200: #EBF2EF;

diff --git a/dist/tokens/scss/themes/light.scss b/dist/tokens/scss/themes/light.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 29 Nov 2022 16:30:56 GMT
+// Generated on Mon, 05 Dec 2022 18:56:57 GMT
 
 $textEmphasis: #36485C;
 $textBody: #475A70;
@@ -22,13 +22,12 @@ $systemBorderFocused: #3971A8;
 $surfaceLevel0: #F5F7FA;
 $surfaceLevel1: #FFFFFF;
 $surfaceLevel2: #F5F7FA;
-$surfaceLevel3: #FFFFFF;
 $surfaceInteractiveBackground: #FFFFFF;
 $surfaceInteractiveHover: #F5F7FA;
 $surfaceInteractiveActive: #E6EDF5;
-$surfaceOverlayInvertable: #2E3A47;
-$surfaceOverlayWhiteInvertable: #FFFFFF;
-$surfaceOverlayStatic: #36485C;
+$surfaceOverlayContrast: #2E3A47;
+$surfaceOverlayTheme: #FFFFFF;
+$surfaceOverlayBackdrop: #36485C;
 $primaryTextBase: #307553;
 $primaryTextHover: #275E43;
 $primaryTextActive: #244C38;

diff --git a/dist/tokens/scss/typography.scss b/dist/tokens/scss/typography.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 29 Nov 2022 16:30:55 GMT
+// Generated on Mon, 05 Dec 2022 18:56:57 GMT
 
 $letterSpacingBase: 0;
 $paragraphSpacingBase: 0;

diff --git a/dist/tokens/ts/colors.d.ts b/dist/tokens/ts/colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 16:30:55 GMT
+ * Generated on Mon, 05 Dec 2022 18:56:57 GMT
  */
 
 export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};

diff --git a/dist/tokens/ts/colors.js b/dist/tokens/ts/colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 16:30:55 GMT
+ * Generated on Mon, 05 Dec 2022 18:56:57 GMT
  */
 
 module.exports = {green : {100 : "#FAFFFC",200 : "#EBF2EF",300 : "#D1E0D9",400 : "#B6CFC2",500 : "#86B09B",600 : "#307553",700 : "#275E43",800 : "#244C38"},

diff --git a/dist/tokens/ts/themes/light.d.ts b/dist/tokens/ts/themes/light.d.ts
@@ -1,11 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 16:30:56 GMT
+ * Generated on Mon, 05 Dec 2022 18:56:57 GMT
  */
 
 export const text : {emphasis : string,body : string,subdued : string,onBackground : string};
 export const system : {textLabelEmphasis : string,textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string,borderFocused : string};
-export const surface : {level0 : string,level1 : string,level2 : string,level3 : string,interactiveBackground : string,interactiveHover : string,interactiveActive : string,overlayInvertable : string,overlayWhiteInvertable : string,overlayStatic : string};
+export const surface : {level0 : string,level1 : string,level2 : string,interactiveBackground : string,interactiveHover : string,interactiveActive : string,overlayContrast : string,overlayTheme : string,overlayBackdrop : string};
 export const primary : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};
 export const info : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};
 export const warning : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};

diff --git a/dist/tokens/ts/themes/light.js b/dist/tokens/ts/themes/light.js
diff --git a/dist/tokens/ts/typography.d.ts b/dist/tokens/ts/typography.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 16:30:55 GMT
+ * Generated on Mon, 05 Dec 2022 18:56:57 GMT
  */
 
 export const letterSpacingBase : number;

diff --git a/dist/tokens/ts/typography.js b/dist/tokens/ts/typography.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 16:30:55 GMT
+ * Generated on Mon, 05 Dec 2022 18:56:57 GMT
  */
 
 module.exports = {

diff --git a/src/data/light.json b/src/data/light.json
@@ -85,46 +85,51 @@
     "surface": {
       "level0": {
         "value": "{colors.grey.200}",
-        "type": "color"
+        "type": "color",
+        "description": "Used for setting the lowest most level, mainly applied as a background color to the HTML body. Should always be underneath levels 1 and 2"
       },
       "level1": {
         "value": "{colors.shades.white}",
-        "type": "color"
+        "type": "color",
+        "description": "Used commonly with Boxes and containers that are directly on surface level 0. Also can be used as an alternative HTML body background color."
       },
       "level2": {
         "value": "{colors.grey.200}",
-        "type": "color"
-      },
-      "level3": {
-        "value": "{colors.shades.white}",
-        "type": "color"
+        "type": "color",
+        "description": "Used for elements that are contained within Boxes or other wrappers that are surface level 1."
       },
       "interactive": {
         "background": {
           "value": "{colors.shades.white}",
-          "type": "color"
+          "type": "color",
+          "description": "Used for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems"
         },
         "hover": {
           "value": "{colors.grey.200}",
-          "type": "color"
+          "type": "color",
+          "description": "Hover state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems"
         },
         "active": {
           "value": "{colors.grey.300}",
-          "type": "color"
+          "type": "color",
+          "description": "Active/Pressed state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems"
         }
       },
       "overlay": {
-        "invertable": {
+        "contrast": {
           "value": "{colors.grey.800}",
-          "type": "color"
+          "type": "color",
+          "description": "Used for elements that are absolutely positioned to overlay content on the page. Has a high contrast versus the current theme. Ex: Things like Toasts and Tooltips"
         },
-        "whiteInvertable": {
+        "theme": {
           "value": "{colors.shades.white}",
-          "type": "color"
+          "type": "color",
+          "description": "Used for elements that are absolutely positioned to overlay content on the page. Matches the base color of the theme. Ex: Snackbar"
         },
-        "static": {
+        "backdrop": {
           "value": "{colors.grey.700}",
-          "type": "color"
+          "type": "color",
+          "description": "Used to overlay & de-emphasize the page to draw focus to certain areas. Ex: Used with Modals, Drawers"
         }
       }
     },

diff --git a/src/transformed/transformed-light.json b/src/transformed/transformed-light.json
@@ -85,46 +85,51 @@
     "surface": {
       "level0": {
         "value": "#F5F7FA",
-        "type": "color"
+        "type": "color",
+        "description": "Used for setting the lowest most level, mainly applied as a background color to the HTML body. Should always be underneath levels 1 and 2"
       },
       "level1": {
         "value": "#FFFFFF",
-        "type": "color"
+        "type": "color",
+        "description": "Used commonly with Boxes and containers that are directly on surface level 0. Also can be used as an alternative HTML body background color."
       },
       "level2": {
         "value": "#F5F7FA",
-        "type": "color"
-      },
-      "level3": {
-        "value": "#FFFFFF",
-        "type": "color"
+        "type": "color",
+        "description": "Used for elements that are contained within Boxes or other wrappers that are surface level 1."
       },
       "interactive": {
         "background": {
           "value": "#FFFFFF",
-          "type": "color"
+          "type": "color",
+          "description": "Used for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems"
         },
         "hover": {
           "value": "#F5F7FA",
-          "type": "color"
+          "type": "color",
+          "description": "Hover state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems"
         },
         "active": {
           "value": "#E6EDF5",
-          "type": "color"
+          "type": "color",
+          "description": "Active/Pressed state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems"
         }
       },
       "overlay": {
-        "invertable": {
+        "contrast": {
           "value": "#2E3A47",
-          "type": "color"
+          "type": "color",
+          "description": "Used for elements that are absolutely positioned to overlay content on the page. Has a high contrast versus the current theme. Ex: Things like Toasts and Tooltips"
         },
-        "whiteInvertable": {
+        "theme": {
           "value": "#FFFFFF",
-          "type": "color"
+          "type": "color",
+          "description": "Used for elements that are absolutely positioned to overlay content on the page. Matches the base color of the theme. Ex: Snackbar"
         },
-        "static": {
+        "backdrop": {
           "value": "#36485C",
-          "type": "color"
+          "type": "color",
+          "description": "Used to overlay & de-emphasize the page to draw focus to certain areas. Ex: Used with Modals, Drawers"
         }
       }
     },