Merge pull request #139 from emulsify-ds/announcement-alert

Design tokens for the Announcement component
emulsify-ds · Aug 12, 2024 · 33bb1eb · 33bb1eb
2 parents d9b5aa0 + d4464c4
commit 33bb1eb
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 52 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, 08 Aug 2024 21:29:15 GMT
+ * Generated on Mon, 12 Aug 2024 17:38:58 GMT
  */
 
 :root {
@@ -148,6 +148,15 @@
   --breadcrumb-text-hover: #192125;
   --block-quote-padding-x: 2rem;
   --block-quote-padding-y: 0.5rem;
+  --announcement-background-default: #ffffff;
+  --announcement-background-light: #9ce1ff;
+  --announcement-background-dark: #006089;
+  --announcement-heading-default: #0080b7;
+  --announcement-heading-light: #9ce1ff;
+  --announcement-heading-dark: #006089;
+  --announcement-icon-default: #0080b7;
+  --announcement-icon-dark: #00405b;
+  --announcement-icon-light: #9ce1ff;
   --accordion-header: [object Object];
   --accordion-p: [object Object];
   --accordion-color-body: #00202e;
@@ -362,24 +371,25 @@
   --token-set-order-0: global;
   --token-set-order-1: semantic;
   --token-set-order-2: components/accordion;
-  --token-set-order-3: components/blockQuote;
-  --token-set-order-4: components/breadcrumbs;
-  --token-set-order-5: components/button;
-  --token-set-order-6: components/card;
-  --token-set-order-7: components/checkbox;
-  --token-set-order-8: components/cta;
-  --token-set-order-9: components/fieldset;
-  --token-set-order-10: components/input;
-  --token-set-order-11: components/link;
-  --token-set-order-12: components/mainMenu;
-  --token-set-order-13: components/pager;
-  --token-set-order-14: components/radioButton;
-  --token-set-order-15: components/selectdropdown;
-  --token-set-order-16: components/status;
-  --token-set-order-17: components/table;
-  --token-set-order-18: components/tabs;
-  --token-set-order-19: components/textField;
-  --token-set-order-20: storybook;
+  --token-set-order-3: components/announcement;
+  --token-set-order-4: components/blockQuote;
+  --token-set-order-5: components/breadcrumbs;
+  --token-set-order-6: components/button;
+  --token-set-order-7: components/card;
+  --token-set-order-8: components/checkbox;
+  --token-set-order-9: components/cta;
+  --token-set-order-10: components/fieldset;
+  --token-set-order-11: components/input;
+  --token-set-order-12: components/link;
+  --token-set-order-13: components/mainMenu;
+  --token-set-order-14: components/pager;
+  --token-set-order-15: components/radioButton;
+  --token-set-order-16: components/selectdropdown;
+  --token-set-order-17: components/status;
+  --token-set-order-18: components/table;
+  --token-set-order-19: components/tabs;
+  --token-set-order-20: components/textField;
+  --token-set-order-21: 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
@@ -1599,6 +1599,52 @@
       }
     }
   },
+  "components/announcement": {
+    "announcement": {
+      "background": {
+        "default": {
+          "value": "{color.white}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.primary.darker}",
+          "type": "color"
+        }
+      },
+      "heading": {
+        "default": {
+          "value": "{color.primary.dark}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.primary.darker}",
+          "type": "color"
+        }
+      },
+      "icon": {
+        "default": {
+          "value": "{color.primary.dark}",
+          "type": "color"
+        },
+        "dark": {
+          "value": "{color.link-hover-lighter}",
+          "type": "color"
+        },
+        "light": {
+          "value": "{color.primary.lighter}",
+          "type": "color"
+        }
+      }
+    }
+  },
   "components/blockQuote": {
     "blockQuote": {
       "padding": {
@@ -2814,8 +2860,7 @@
       "name": "Emulsify Global",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "global": "enabled",
-        "semantic": "disabled"
+        "global": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17089",
       "$figmaModeId": "23237:11",
@@ -2889,8 +2934,7 @@
       "name": "Emulsify Storybook only",
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
-        "storybook": "source",
-        "semantic": "disabled"
+        "storybook": "source"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17144",
       "$figmaModeId": "23237:13",
@@ -2918,8 +2962,7 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled",
-        "semantic": "disabled"
+        "components/textField": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:23237:17145",
       "$figmaModeId": "23237:14",
@@ -3099,8 +3142,7 @@
         "components/status": "enabled",
         "components/table": "enabled",
         "components/tabs": "enabled",
-        "components/textField": "enabled",
-        "semantic": "disabled"
+        "components/textField": "enabled"
       },
       "group": "WUP"
     }
@@ -3110,6 +3152,7 @@
       "global",
       "semantic",
       "components/accordion",
+      "components/announcement",
       "components/blockQuote",
       "components/breadcrumbs",
       "components/button",

diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
@@ -764,6 +764,50 @@
       }
     }
   },
+  "announcement": {
+    "background": {
+      "default": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "light": {
+        "value": "#9ce1ff",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#006089",
+        "type": "color"
+      }
+    },
+    "heading": {
+      "default": {
+        "value": "#0080b7",
+        "type": "color"
+      },
+      "light": {
+        "value": "#9ce1ff",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#006089",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "default": {
+        "value": "#0080b7",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#00405b",
+        "type": "color"
+      },
+      "light": {
+        "value": "#9ce1ff",
+        "type": "color"
+      }
+    }
+  },
   "accordion": {
     "header": {
       "value": {
@@ -2320,74 +2364,78 @@
       "type": "other"
     },
     "3": {
-      "value": "components/blockQuote",
+      "value": "components/announcement",
       "type": "other"
     },
     "4": {
-      "value": "components/breadcrumbs",
+      "value": "components/blockQuote",
       "type": "other"
     },
     "5": {
-      "value": "components/button",
+      "value": "components/breadcrumbs",
       "type": "other"
     },
     "6": {
-      "value": "components/card",
+      "value": "components/button",
       "type": "other"
     },
     "7": {
-      "value": "components/checkbox",
+      "value": "components/card",
       "type": "other"
     },
     "8": {
-      "value": "components/cta",
+      "value": "components/checkbox",
       "type": "other"
     },
     "9": {
-      "value": "components/fieldset",
+      "value": "components/cta",
       "type": "other"
     },
     "10": {
-      "value": "components/input",
+      "value": "components/fieldset",
       "type": "other"
     },
     "11": {
-      "value": "components/link",
+      "value": "components/input",
       "type": "other"
     },
     "12": {
-      "value": "components/mainMenu",
+      "value": "components/link",
       "type": "other"
     },
     "13": {
-      "value": "components/pager",
+      "value": "components/mainMenu",
       "type": "other"
     },
     "14": {
-      "value": "components/radioButton",
+      "value": "components/pager",
       "type": "other"
     },
     "15": {
-      "value": "components/selectdropdown",
+      "value": "components/radioButton",
       "type": "other"
     },
     "16": {
-      "value": "components/status",
+      "value": "components/selectdropdown",
       "type": "other"
     },
     "17": {
-      "value": "components/table",
+      "value": "components/status",
       "type": "other"
     },
     "18": {
-      "value": "components/tabs",
+      "value": "components/table",
       "type": "other"
     },
     "19": {
-      "value": "components/textField",
+      "value": "components/tabs",
       "type": "other"
     },
     "20": {
+      "value": "components/textField",
+      "type": "other"
+    },
+    "21": {
       "value": "storybook",
       "type": "other"
     }
@@ -2817,8 +2865,7 @@
     "id": "0a5c4562bd35f00ce8a339239980a3842147c0bd",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "global": "enabled",
-      "semantic": "disabled"
+      "global": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17089",
     "$figmaModeId": "23237:11",
@@ -2894,8 +2941,7 @@
     "id": "16a10d373d39988a75c7d612cd449a633f373c44",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "storybook": "source",
-      "semantic": "disabled"
+      "storybook": "source"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17144",
     "$figmaModeId": "23237:13",
@@ -2924,8 +2970,7 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled",
-      "semantic": "disabled"
+      "components/textField": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:23237:17145",
     "$figmaModeId": "23237:14",
@@ -3107,8 +3152,7 @@
       "components/status": "enabled",
       "components/table": "enabled",
       "components/tabs": "enabled",
-      "components/textField": "enabled",
-      "semantic": "disabled"
+      "components/textField": "enabled"
     },
     "group": "WUP",
     "type": "other",