Merge pull request #118 from emulsify-ds/cta-component

Design tokens for CTA
emulsify-ds · Apr 11, 2024 · 08ed228 · 08ed228
2 parents dd16c60 + 2c4840e
commit 08ed228
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 18 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 Fri, 01 Mar 2024 19:50:05 GMT
+ * Generated on Wed, 10 Apr 2024 22:33:28 GMT
  */
 
 :root {
@@ -97,7 +97,16 @@
   --radius-lg: 1.25rem;
   --cta-header: [object Object];
   --cta-body: [object Object];
-  --cta-fill: #00202e;
+  --cta-eyebrow: [object Object];
+  --cta-button: [object Object];
+  --cta-color-heading: #0080b7;
+  --cta-color-heading-darker: #006089;
+  --cta-color-eyebrow: #005f89;
+  --cta-color-body: #00202e;
+  --cta-color-button: #ffffff;
+  --cta-background: #9ce1ff;
+  --cta-button-background: #009fe4;
+  --cta-button-background-darker: #006089;
   --checkbox-color-label: #00202e;
   --checkbox-color-label-disabled: #a9afb1;
   --checkbox-button-fill: #009fe4;
@@ -149,7 +158,9 @@
   --color-primary-dark: #0080b7;
   --color-primary-darker: #006089;
   --color-text-body: #00202e;
+  --color-text-body-lighter: #005f89;
   --color-text-heading: #0080b7;
+  --color-text-white: #ffffff;
   --color-warning-default: #d80f0f;
   --color-link: #33b2e9;
   --color-link-hover: #009fe4;

diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json
@@ -1340,9 +1340,17 @@
           "value": "{color.EmulsifyBlue.1000}",
           "type": "color"
         },
+        "body-lighter": {
+          "value": "{color.EmulsifyBlue.800}",
+          "type": "color"
+        },
         "heading": {
           "value": "{color.primary.dark}",
           "type": "color"
+        },
+        "white": {
+          "value": "{color.white}",
+          "type": "color"
         }
       },
       "warning": {
@@ -1625,8 +1633,8 @@
       "header": {
         "value": {
           "fontFamily": "{font-family.primary}",
-          "fontWeight": "{font-weight.primary-bold}",
-          "lineHeight": "{line-height.normal}",
+          "fontWeight": "Extra Bold",
+          "lineHeight": "{line-height.none}",
           "fontSize": "{font-size.h2}",
           "textCase": "{text-case.none}"
         },
@@ -1637,13 +1645,71 @@
           "fontFamily": "{font-family.primary}",
           "fontWeight": "{font-weight.primary-regular}",
           "lineHeight": "{line-height.normal}",
-          "fontSize": "{font-size.lead}",
+          "fontSize": "{font-size.body}",
           "textCase": "{text-case.none}"
         },
         "type": "typography"
       },
-      "fill": {
-        "value": "{color.EmulsifyBlue.1000}",
+      "eyebrow": {
+        "value": {
+          "fontFamily": "{font-family.primary}",
+          "fontWeight": "{font-weight.primary-bold}",
+          "lineHeight": "{line-height.normal}",
+          "fontSize": "{font-size.small}",
+          "textCase": "{text-case.upper}"
+        },
+        "type": "typography"
+      },
+      "button": {
+        "value": {
+          "fontFamily": "{font-family.primary}",
+          "fontWeight": "{font-weight.primary-bold}",
+          "textCase": "{text-case.upper}",
+          "fontSize": "{font-size.body}",
+          "lineHeight": "{line-height.normal}"
+        },
+        "type": "typography",
+        "background": {
+          "value": "{color.EmulsifyBlue.600}",
+          "type": "color"
+        },
+        "darker-background": {
+          "value": "{color.EmulsifyBlue.900}",
+          "type": "color"
+        }
+      },
+      "color": {
+        "heading": {
+          "value": "{color.text.heading}",
+          "type": "color"
+        },
+        "heading-darker": {
+          "value": "{color.primary.darker}",
+          "type": "color"
+        },
+        "eyebrow": {
+          "value": "{color.text.body-lighter}",
+          "type": "color"
+        },
+        "body": {
+          "value": "{color.text.body}",
+          "type": "color"
+        },
+        "button": {
+          "value": "{color.text.white}",
+          "type": "color"
+        }
+      },
+      "background": {
+        "value": "{color.primary.lighter}",
+        "type": "color"
+      },
+      "button-background": {
+        "value": "{color.primary.default}",
+        "type": "color"
+      },
+      "button-background-darker": {
+        "value": "{color.primary.darker}",
         "type": "color"
       }
     }
@@ -2253,7 +2319,6 @@
         "color.fieldset.bg": "S:bfe975e6026fa7f0aa7fd11985d9ebaeb6565d17,",
         "color.fieldset.border": "S:ca6abb31ab70455a6d11848aadd158a8907b0bea,",
         "color.fieldset.label": "S:0d9aa0b5950a87753c48fba1aa9100282ebbb8e0,",
-        "cta.fill": "S:a6bc1d54b3da7366a595dc0dc2e6987baeafd6f3,",
         "breadcrumb.text.default": "S:ecaf6ffd8d511adea99c5a4d94c5929eed89b7d7,",
         "breadcrumb.text.hover": "S:c0247789551d012ba99e6c2d1738a6f99f8f5f14,",
         "colors.primary.lighter": "S:c8725628a7dffcd7f97d70505a8e1ef3f6f99c16,",
@@ -2443,7 +2508,6 @@
         "color.fieldset.bg": "47251918dfafd3b9a29561c0d8e0f45a1d6a6a8e",
         "color.fieldset.border": "8f1a5d81f61715b473cb09289e806d33e715901a",
         "color.fieldset.label": "667b8ed6a1eae8e94a1c324b6fd9c9dffeb7660a",
-        "cta.fill": "45d5ad4f0856cca1ee16c376e89792a2ec60ef04",
         "checkbox.button.fill": "30f3605f0746da73f37ea046045249db55362821",
         "checkbox.button.fill-hover": "0d9bc68bbfb1c107738cc5b7aa11c1bd1c7631d5",
         "checkbox.button.fill-disabled": "e2aea7eb3659d2c9f7c32a2d1eca870cb41476c6",
@@ -2730,7 +2794,6 @@
         "color.fieldset.bg": "460db7a453063b068e0f6a8fd468df2a3a5d636d",
         "color.fieldset.border": "bac0e0e04922374a9a35f443a582325c3aacea30",
         "color.fieldset.label": "8c40e4982b2746d45e4e69b08db0d547d5e8857a",
-        "cta.fill": "fe8b7bbb13b55c353092d168171c4996c3a4678c",
         "checkbox.button.fill": "3f0fbc42ccba13fd6c47395eb1c2b8a69fd8beb6",
         "checkbox.button.fill-hover": "f57fe90c92e54779298333aa444cbb5cedc510df",
         "checkbox.button.fill-disabled": "37d7515936488e0e90dc79d2a08c5e45ce430dd0",

diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json
@@ -478,8 +478,8 @@
     "header": {
       "value": {
         "fontFamily": "Inter",
-        "fontWeight": "Bold",
-        "lineHeight": "150%",
+        "fontWeight": "Extra Bold",
+        "lineHeight": "100%",
         "fontSize": 37,
         "textCase": "none"
       },
@@ -490,13 +490,71 @@
         "fontFamily": "Inter",
         "fontWeight": "Regular",
         "lineHeight": "150%",
-        "fontSize": 24,
+        "fontSize": 18,
         "textCase": "none"
       },
       "type": "typography"
     },
-    "fill": {
-      "value": "#00202e",
+    "eyebrow": {
+      "value": {
+        "fontFamily": "Inter",
+        "fontWeight": "Bold",
+        "lineHeight": "150%",
+        "fontSize": 16,
+        "textCase": "uppercase"
+      },
+      "type": "typography"
+    },
+    "button": {
+      "value": {
+        "fontFamily": "Inter",
+        "fontWeight": "Bold",
+        "textCase": "uppercase",
+        "fontSize": 18,
+        "lineHeight": "150%"
+      },
+      "type": "typography",
+      "background": {
+        "value": "{color.EmulsifyBlue.600}",
+        "type": "color"
+      },
+      "darker-background": {
+        "value": "{color.EmulsifyBlue.900}",
+        "type": "color"
+      }
+    },
+    "color": {
+      "heading": {
+        "value": "#0080b7",
+        "type": "color"
+      },
+      "heading-darker": {
+        "value": "#006089",
+        "type": "color"
+      },
+      "eyebrow": {
+        "value": "#005f89",
+        "type": "color"
+      },
+      "body": {
+        "value": "#00202e",
+        "type": "color"
+      },
+      "button": {
+        "value": "#ffffff",
+        "type": "color"
+      }
+    },
+    "background": {
+      "value": "#9ce1ff",
+      "type": "color"
+    },
+    "button-background": {
+      "value": "#009fe4",
+      "type": "color"
+    },
+    "button-background-darker": {
+      "value": "#006089",
       "type": "color"
     }
   },
@@ -766,9 +824,17 @@
         "value": "#00202e",
         "type": "color"
       },
+      "body-lighter": {
+        "value": "#005f89",
+        "type": "color"
+      },
       "heading": {
         "value": "#0080b7",
         "type": "color"
+      },
+      "white": {
+        "value": "#ffffff",
+        "type": "color"
       }
     },
     "warning": {
@@ -2255,7 +2321,6 @@
       "color.fieldset.bg": "S:bfe975e6026fa7f0aa7fd11985d9ebaeb6565d17,",
       "color.fieldset.border": "S:ca6abb31ab70455a6d11848aadd158a8907b0bea,",
       "color.fieldset.label": "S:0d9aa0b5950a87753c48fba1aa9100282ebbb8e0,",
-      "cta.fill": "S:a6bc1d54b3da7366a595dc0dc2e6987baeafd6f3,",
       "breadcrumb.text.default": "S:ecaf6ffd8d511adea99c5a4d94c5929eed89b7d7,",
       "breadcrumb.text.hover": "S:c0247789551d012ba99e6c2d1738a6f99f8f5f14,",
       "colors.primary.lighter": "S:c8725628a7dffcd7f97d70505a8e1ef3f6f99c16,",
@@ -2445,7 +2510,6 @@
       "color.fieldset.bg": "47251918dfafd3b9a29561c0d8e0f45a1d6a6a8e",
       "color.fieldset.border": "8f1a5d81f61715b473cb09289e806d33e715901a",
       "color.fieldset.label": "667b8ed6a1eae8e94a1c324b6fd9c9dffeb7660a",
-      "cta.fill": "45d5ad4f0856cca1ee16c376e89792a2ec60ef04",
       "checkbox.button.fill": "30f3605f0746da73f37ea046045249db55362821",
       "checkbox.button.fill-hover": "0d9bc68bbfb1c107738cc5b7aa11c1bd1c7631d5",
       "checkbox.button.fill-disabled": "e2aea7eb3659d2c9f7c32a2d1eca870cb41476c6",
@@ -2736,7 +2800,6 @@
       "color.fieldset.bg": "460db7a453063b068e0f6a8fd468df2a3a5d636d",
       "color.fieldset.border": "bac0e0e04922374a9a35f443a582325c3aacea30",
       "color.fieldset.label": "8c40e4982b2746d45e4e69b08db0d547d5e8857a",
-      "cta.fill": "fe8b7bbb13b55c353092d168171c4996c3a4678c",
       "checkbox.button.fill": "3f0fbc42ccba13fd6c47395eb1c2b8a69fd8beb6",
       "checkbox.button.fill-hover": "f57fe90c92e54779298333aa444cbb5cedc510df",
       "checkbox.button.fill-disabled": "37d7515936488e0e90dc79d2a08c5e45ce430dd0",