Merge pull request #153 from emulsify-ds/gallery

EMULSIFY-309: Design tokens for Gallery component

Author: mariannuar

src/tokens/figma.tokens.json

@@ -1505,6 +1505,10 @@
               }
             }
           }
+        },
+        "darkest": {
+          "value": "{color.EmulsifyBlue.900}",
+          "type": "color"
         }
       },
       "text": {
@@ -2039,6 +2043,36 @@
       }
     }
   },
+  "components/gallery": {
+    "gallery": {
+      "overlay": {
+        "value": "{color.primary.darkest}",
+        "type": "color"
+      },
+      "grid": {
+        "value": "{spacing.xl}",
+        "type": "spacing"
+      },
+      "heading": {
+        "value": "{color.primary.dark}",
+        "type": "color"
+      },
+      "body": {
+        "value": "{color.text.body}",
+        "type": "color"
+      },
+      "modal": {
+        "padding-x": {
+          "value": "{spacing.xl}",
+          "type": "spacing"
+        },
+        "padding-y": {
+          "value": "{spacing.2xl}",
+          "type": "spacing"
+        }
+      }
+    }
+  },
   "components/header": {
     "header": {
       "search": {
@@ -3308,6 +3342,7 @@
       "components/cta",
       "components/fieldset",
       "components/footer",
+      "components/gallery",
       "components/header",
       "components/input",
       "components/link",

src/tokens/tokens.scss

@@ -98,6 +98,12 @@
   --input-bkg: #ffffff;
   --header-search-background: #006089;
   --header-search-text-icon: #ffffff;
+  --gallery-overlay: #00405b;
+  --gallery-grid: 2rem;
+  --gallery-heading: #0080b7;
+  --gallery-body: #00202e;
+  --gallery-modal-padding-x: 2rem;
+  --gallery-modal-padding-y: 4rem;
   --footer-background-default: #006089;
   --footer-background-light: #ffffff;
   --footer-heading-default: #9ce1ff;
@@ -190,6 +196,7 @@
   --color-primary-lighter: #9ce1ff;
   --color-primary-dark: #0080b7;
   --color-primary-darker: #006089;
+  --color-primary-darkest: #00405b;
   --color-text-body: #00202e;
   --color-text-body-lighter: #006089;
   --color-text-heading: #006089;
@@ -403,20 +410,21 @@
   --token-set-order-10: components/cta;
   --token-set-order-11: components/fieldset;
   --token-set-order-12: components/footer;
-  --token-set-order-13: components/header;
-  --token-set-order-14: components/input;
-  --token-set-order-15: components/link;
-  --token-set-order-16: components/mainMenu;
-  --token-set-order-17: components/utilityMenu;
-  --token-set-order-18: components/pager;
-  --token-set-order-19: components/radioButton;
-  --token-set-order-20: components/selectdropdown;
-  --token-set-order-21: components/status;
-  --token-set-order-22: components/table;
-  --token-set-order-23: components/tabs;
-  --token-set-order-24: components/textField;
-  --token-set-order-25: components/tooltip;
-  --token-set-order-26: storybook;
+  --token-set-order-13: components/gallery;
+  --token-set-order-14: components/header;
+  --token-set-order-15: components/input;
+  --token-set-order-16: components/link;
+  --token-set-order-17: components/mainMenu;
+  --token-set-order-18: components/utilityMenu;
+  --token-set-order-19: components/pager;
+  --token-set-order-20: components/radioButton;
+  --token-set-order-21: components/selectdropdown;
+  --token-set-order-22: components/status;
+  --token-set-order-23: components/table;
+  --token-set-order-24: components/tabs;
+  --token-set-order-25: components/textField;
+  --token-set-order-26: components/tooltip;
+  --token-set-order-27: storybook;
   --emulsify-ui-kit-full: [object Object];
   --emulsify-global: [object Object];
   --emulsify-semantic: [object Object];

src/tokens/transformed.tokens.json

@@ -500,6 +500,34 @@
       }
     }
   },
+  "gallery": {
+    "overlay": {
+      "value": "#00405b",
+      "type": "color"
+    },
+    "grid": {
+      "value": 32,
+      "type": "spacing"
+    },
+    "heading": {
+      "value": "#0080b7",
+      "type": "color"
+    },
+    "body": {
+      "value": "#00202e",
+      "type": "color"
+    },
+    "modal": {
+      "padding-x": {
+        "value": 32,
+        "type": "spacing"
+      },
+      "padding-y": {
+        "value": 64,
+        "type": "spacing"
+      }
+    }
+  },
   "footer": {
     "background": {
       "default": {
@@ -995,6 +1023,10 @@
       "darker": {
         "value": "#006089",
         "type": "color"
+      },
+      "darkest": {
+        "value": "#00405b",
+        "type": "color"
       }
     },
     "text": {
@@ -2528,58 +2560,62 @@
       "type": "other"
     },
     "13": {
-      "value": "components/header",
+      "value": "components/gallery",
       "type": "other"
     },
     "14": {
-      "value": "components/input",
+      "value": "components/header",
       "type": "other"
     },
     "15": {
-      "value": "components/link",
+      "value": "components/input",
       "type": "other"
     },
     "16": {
-      "value": "components/mainMenu",
+      "value": "components/link",
       "type": "other"
     },
     "17": {
-      "value": "components/utilityMenu",
+      "value": "components/mainMenu",
       "type": "other"
     },
     "18": {
-      "value": "components/pager",
+      "value": "components/utilityMenu",
       "type": "other"
     },
     "19": {
-      "value": "components/radioButton",
+      "value": "components/pager",
       "type": "other"
     },
     "20": {
-      "value": "components/selectdropdown",
+      "value": "components/radioButton",
       "type": "other"
     },
     "21": {
-      "value": "components/status",
+      "value": "components/selectdropdown",
       "type": "other"
     },
     "22": {
-      "value": "components/table",
+      "value": "components/status",
       "type": "other"
     },
     "23": {
-      "value": "components/tabs",
+      "value": "components/table",
       "type": "other"
     },
     "24": {
-      "value": "components/textField",
+      "value": "components/tabs",
       "type": "other"
     },
     "25": {
-      "value": "components/tooltip",
+      "value": "components/textField",
       "type": "other"
     },
     "26": {
+      "value": "components/tooltip",
+      "type": "other"
+    },
+    "27": {
       "value": "storybook",
       "type": "other"
     }