Merge pull request #146 from emulsify-ds/footer

Design tokens for Footer component
emulsify-ds · Aug 22, 2024 · b1c9fff · b1c9fff
2 parents a5a1aa5 + 0622437
commit b1c9fff
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 24 deletions.
diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 22 Aug 2024 17:08:55 GMT
+ * Generated on Thu, 22 Aug 2024 18:22:46 GMT
  */
 
 :root {
@@ -90,6 +90,12 @@
   --input-bkg: #ffffff;
   --header-search-background: #006089;
   --header-search-text-icon: #ffffff;
+  --footer-background-default: #006089;
+  --footer-background-light: #ffffff;
+  --footer-heading-default: #9ce1ff;
+  --footer-heading-dark: #0080b7;
+  --footer-icon-default: #9ce1ff;
+  --footer-icon-dark: #0080b7;
   --fieldset-color-bg: white;
   --fieldset-color-border: #a9afb1;
   --fieldset-color-label: #00202e;
@@ -388,18 +394,19 @@
   --token-set-order-9: components/checkbox;
   --token-set-order-10: components/cta;
   --token-set-order-11: components/fieldset;
-  --token-set-order-12: components/header;
-  --token-set-order-13: components/input;
-  --token-set-order-14: components/link;
-  --token-set-order-15: components/mainMenu;
-  --token-set-order-16: components/pager;
-  --token-set-order-17: components/radioButton;
-  --token-set-order-18: components/selectdropdown;
-  --token-set-order-19: components/status;
-  --token-set-order-20: components/table;
-  --token-set-order-21: components/tabs;
-  --token-set-order-22: components/textField;
-  --token-set-order-23: storybook;
+  --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/pager;
+  --token-set-order-18: components/radioButton;
+  --token-set-order-19: components/selectdropdown;
+  --token-set-order-20: components/status;
+  --token-set-order-21: components/table;
+  --token-set-order-22: components/tabs;
+  --token-set-order-23: components/textField;
+  --token-set-order-24: storybook;
   --emulsify-ui-kit-full: [object Object];
   --emulsify-global: [object Object];
   --emulsify-semantic: [object Object];

diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json
@@ -2005,6 +2005,40 @@
       }
     }
   },
+  "components/footer": {
+    "footer": {
+      "background": {
+        "default": {
+          "value": "{color.primary.darker}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.text.white}",
+          "type": "color"
+        }
+      },
+      "heading": {
+        "default": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.primary.dark}",
+          "type": "color"
+        }
+      },
+      "icon": {
+        "default": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.primary.dark}",
+          "type": "color"
+        }
+      }
+    }
+  },
   "components/header": {
     "header": {
       "search": {
@@ -3209,6 +3243,7 @@
       "components/checkbox",
       "components/cta",
       "components/fieldset",
+      "components/footer",
       "components/header",
       "components/input",
       "components/link",

diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
@@ -452,6 +452,38 @@
       }
     }
   },
+  "footer": {
+    "background": {
+      "default": {
+        "value": "#006089",
+        "type": "color"
+      },
+      "light": {
+        "value": "#ffffff",
+        "type": "color"
+      }
+    },
+    "heading": {
+      "default": {
+        "value": "#9ce1ff",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#0080b7",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "default": {
+        "value": "#9ce1ff",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#0080b7",
+        "type": "color"
+      }
+    }
+  },
   "fieldset": {
     "color": {
       "bg": {
@@ -2444,50 +2476,54 @@
       "type": "other"
     },
     "12": {
-      "value": "components/header",
+      "value": "components/footer",
       "type": "other"
     },
     "13": {
-      "value": "components/input",
+      "value": "components/header",
       "type": "other"
     },
     "14": {
-      "value": "components/link",
+      "value": "components/input",
       "type": "other"
     },
     "15": {
-      "value": "components/mainMenu",
+      "value": "components/link",
       "type": "other"
     },
     "16": {
-      "value": "components/pager",
+      "value": "components/mainMenu",
       "type": "other"
     },
     "17": {
-      "value": "components/radioButton",
+      "value": "components/pager",
       "type": "other"
     },
     "18": {
-      "value": "components/selectdropdown",
+      "value": "components/radioButton",
       "type": "other"
     },
     "19": {
-      "value": "components/status",
+      "value": "components/selectdropdown",
       "type": "other"
     },
     "20": {
-      "value": "components/table",
+      "value": "components/status",
       "type": "other"
     },
     "21": {
-      "value": "components/tabs",
+      "value": "components/table",
       "type": "other"
     },
     "22": {
-      "value": "components/textField",
+      "value": "components/tabs",
       "type": "other"
     },
     "23": {
+      "value": "components/textField",
+      "type": "other"
+    },
+    "24": {
       "value": "storybook",
       "type": "other"
     }