feat(data): making adaptive type play well with Figma

Sage · Sep 18, 2024 · 23dbc28 · 23dbc28
1 parent 94c40f8
commit 23dbc28
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 7 deletions.
diff --git a/data/tokens/components/page.json b/data/tokens/components/page.json
@@ -217,7 +217,7 @@
             "fontFamily": "{global.fontFamilies.sage-text}",
             "fontWeight": "{primitives.fontWeights.bold}",
             "lineHeight": "{primitives.lineHeights.400}",
-            "fontSize": "{global.fontSize.adaptive.headings.step5}"
+            "fontSize": "{global.fontSize.adaptive.heading.step5}"
           },
           "type": "typography"
         },
@@ -226,7 +226,7 @@
             "fontFamily": "{global.fontFamilies.sage-text}",
             "fontWeight": "{primitives.fontWeights.bold}",
             "lineHeight": "{primitives.lineHeights.400}",
-            "fontSize": "{global.fontSize.adaptive.step4}"
+            "fontSize": "{global.fontSize.adaptive.heading.step4}"
           },
           "type": "typography"
         },
@@ -235,7 +235,7 @@
             "fontFamily": "{global.fontFamilies.sage-text}",
             "fontWeight": "{primitives.fontWeights.bold}",
             "lineHeight": "{primitives.lineHeights.400}",
-            "fontSize": "{global.fontSize.adaptive.headings.step3}"
+            "fontSize": "{global.fontSize.adaptive.heading.step3}"
           },
           "type": "typography"
         },
@@ -244,7 +244,7 @@
             "fontFamily": "{global.fontFamilies.sage-text}",
             "fontWeight": "{primitives.fontWeights.medium}",
             "lineHeight": "{primitives.lineHeights.400}",
-            "fontSize": "{global.fontSize.adaptive.headings.step2}"
+            "fontSize": "{global.fontSize.adaptive.heading.step2}"
           },
           "type": "typography"
         },
@@ -253,7 +253,7 @@
             "fontFamily": "{global.fontFamilies.sage-text}",
             "fontWeight": "{primitives.fontWeights.medium}",
             "lineHeight": "{primitives.lineHeights.400}",
-            "fontSize": "{global.fontSize.adaptive.headings.step1}"
+            "fontSize": "{global.fontSize.adaptive.heading.step1}"
           },
           "type": "typography"
         },

diff --git a/data/tokens/context/frozenproduct.json b/data/tokens/context/frozenproduct.json
@@ -215,7 +215,7 @@
     "fontSize": {
       "adaptive": {
         "step-2": {
-          "value": "12",
+          "value": "11",
           "type": "fontSizes"
         },
         "step-1": {
@@ -238,13 +238,39 @@
           "value": "20",
           "type": "fontSizes"
         },
+        "step4": {
+          "value": "22",
+          "type": "fontSizes"
+        },
         "step5": {
           "value": "24",
           "type": "fontSizes"
         },
         "step11": {
           "value": "82",
           "type": "fontSizes"
+        },
+        "heading": {
+          "step1": {
+            "value": "16",
+            "type": "fontSizes"
+          },
+          "step2": {
+            "value": "18",
+            "type": "fontSizes"
+          },
+          "step3": {
+            "value": "20",
+            "type": "fontSizes"
+          },
+          "step4": {
+            "value": "22",
+            "type": "fontSizes"
+          },
+          "step5": {
+            "value": "24",
+            "type": "fontSizes"
+          }
         }
       }
     },

diff --git a/data/tokens/context/marketing.json b/data/tokens/context/marketing.json
@@ -42,6 +42,54 @@
             "type": "typography"
           }
         }
+      },
+      "adaptive": {
+        "H1": {
+          "value": {
+            "fontFamily": "{global.fontFamilies.sage-text}",
+            "fontWeight": "{primitives.fontWeights.black}",
+            "lineHeight": "{primitives.lineHeights.400}",
+            "fontSize": "{global.fontSize.adaptive.heading.step5}"
+          },
+          "type": "typography"
+        },
+        "H2": {
+          "value": {
+            "fontFamily": "{global.fontFamilies.sage-text}",
+            "fontWeight": "{primitives.fontWeights.black}",
+            "lineHeight": "{primitives.lineHeights.400}",
+            "fontSize": "{global.fontSize.adaptive.heading.step4}"
+          },
+          "type": "typography"
+        },
+        "H4": {
+          "value": {
+            "fontFamily": "{global.fontFamilies.sage-text}",
+            "fontWeight": "{primitives.fontWeights.bold}",
+            "lineHeight": "{primitives.lineHeights.400}",
+            "fontSize": "{global.fontSize.adaptive.heading.step2}"
+          },
+          "type": "typography"
+        },
+        "H5": {
+          "value": {
+            "fontFamily": "{global.fontFamilies.sage-text}",
+            "fontWeight": "{primitives.fontWeights.medium}",
+            "lineHeight": "{primitives.lineHeights.400}",
+            "fontSize": "{global.fontSize.adaptive.heading.step1}"
+          },
+          "type": "typography"
+        },
+        "p": {
+          "standard": {
+            "value": "{global.typography.adaptive.body.M}",
+            "type": "typography"
+          },
+          "large": {
+            "value": "{global.typography.adaptive.body.L}",
+            "type": "typography"
+          }
+        }
       }
     }
   },
@@ -256,5 +304,33 @@
         }
       }
     }
+  },
+  "global": {
+    "fontSize": {
+      "adaptive": {
+        "heading": {
+          "step1": {
+            "value": "22",
+            "type": "fontSizes"
+          },
+          "step2": {
+            "value": "25",
+            "type": "fontSizes"
+          },
+          "step3": {
+            "value": "34",
+            "type": "fontSizes"
+          },
+          "step4": {
+            "value": "45",
+            "type": "fontSizes"
+          },
+          "step5": {
+            "value": "52",
+            "type": "fontSizes"
+          }
+        }
+      }
+    }
   }
 }
diff --git a/data/tokens/context/product.json b/data/tokens/context/product.json
@@ -7,5 +7,33 @@
         "description": "transparent override used for hiding colors when needed."
       }
     }
+  },
+  "global": {
+    "fontSize": {
+      "adaptive": {
+        "heading": {
+          "step1": {
+            "value": "19",
+            "type": "fontSizes"
+          },
+          "step2": {
+            "value": "22",
+            "type": "fontSizes"
+          },
+          "step3": {
+            "value": "22",
+            "type": "fontSizes"
+          },
+          "step4": {
+            "value": "25",
+            "type": "fontSizes"
+          },
+          "step5": {
+            "value": "34",
+            "type": "fontSizes"
+          }
+        }
+      }
+    }
   }
 }
diff --git a/data/tokens/global/typography.json b/data/tokens/global/typography.json
@@ -928,7 +928,7 @@
           "value": "95",
           "type": "fontSizes"
         },
-        "headings": {
+        "heading": {
           "step1": {
             "value": "19",
             "type": "fontSizes"